cndaqiang Web Linux DFT

JavaScript学习

2020-07-01
cndaqiang
web
RSS

参考

JavaScript 教程-菜鸟教程

简介

备注

  • 像写html一样,在网页中插入<script></script>就行
  • <script>内可以放执行命令,则立即执行
  • <script>内也可以放置函数,可定义此函数的前后都可以调用此函数
    大家喜欢把函数定义在<head>内,不是必须的
  • 也可以引用外部的JavaScript<script src="myScript.js"></script>
  • 同行换行用;,不同行;非必须,但是建议加;
  • 不同的script中定义的变量全局通用
  • 注释//开头

示例

<!DOCTYPE html>
<html>
    <head>
        <script>
            function myfun()
                {
                    window.alert("hello world");
                };
        </script>
    </head>
    <body>
        <button onclick="myfun()"> call fun </button>
    </body>

</html>

chrome打开, 可以执行,写错的代码,也会报错在某行 也可以在这里直接写脚本@gliderhx 也可以直接在下面的Console中输入

输出函数

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台

html事件

触发事件,执行js命令

事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键(?测试无效)
onload 浏览器已完成页面的加载
<h1  onclick="alert(Date())">点我获取当前时间</h1>

变量

定义

  • 作用域
    • 在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。

    • 在函数外声明(也用var)的变量是全局变量,直接给为定义过的变量赋值(即使是函数内,在函数被执行后)变为全局变量

    • 全局变量可以delete 变量名返回true, 局域变量返回false
  • 变量名区分大小写,支持_,$,字母开头的变量
  • 可以在声明变量时定义var a=123,也可以声明后定义var a; a=123 ;
  • 可以同时定义多个变量var str="hello world", a; a=123 ;
  • 变量没有类型的区分,即之前是数值,后面可以是字符串var a; a=123 ; a="hello"
  • 每种变量都是对象,和面向对象的python一致,有相应的属性和方法
    var a=123; var b=456
    var str="hello world"
    

数据类型

  • 字符串
    使用单引号和双引号定义 a="hellowrold"
  • 数字
    a=123;a=12.34;a=123e5;a=123e-5
  • 布尔
    a=true ;a=false
  • 数组
    Array()
    a=Array(123,456,"hello",345);
    a=new Array();a[0]=123,a[1]="hello";
    a=new Array(123,456,"hello")
    

一切皆对象

typeof查看类型

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object
typeof Array(123,456,"hello",345)  // 返回 object
typeof undefined // 返回 "undefined"
typeof null                   // 返回 object
typeof function () {}         // 返回 function

constructor可以查看构造函数

"John".constructor                 // 返回函数 String()  { [native code] }
(3.14).constructor                 // 返回函数 Number()  { [native code] }
false.constructor                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor  // 返回函数 Object()  { [native code] }
new Date().constructor             // 返回函数 Date()    { [native code] }
function () {}.constructor         // 返回函数 Function(){ [native code] }

用这些函数也可创建对象,也可以用于转换类型,如

Number(123)
123
Number(String(123))
123

这些对象还有很多性质可以调整格式,如

Number(String(123)).toExponential()
"1.23e+2"
//Number的更多方法
//toExponential()	把对象的值转换为指数计数法。
//toFixed()	把数字转换为字符串,结果的小数点后有指定位数的数字。
//toPrecision()	把数字格式化为指定的长度。

其他

Undefined 这个值表示变量不含有值,输出空白, 例如未传入函数的输入参数时
null表示这个值为null,用于清空变量,输出null

a=null;a=Undefined

只定义类型,不赋值

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

字符串

字符串的索引顺序和python类似,下标从0开始, 不可以str[0:1],有多种截取方法比如substring,使用+号连接

a="hello world"
"hello world"
a[0]
"h"
a.substring(0,1)
"h"
a.length
11
(a+a).length
22

字符串属性

属性 描述
constructor 返回创建字符串属性的函数
length 返回字符串的长度
prototype 允许您向对象添加属性和方法

字符串方法

方法 描述
charAt() 返回指定索引位置的字符
charCodeAt() 返回指定索引位置字符的 Unicode 值
concat() 连接两个或多个字符串,返回连接后的字符串
fromCharCode() 将 Unicode 转换为字符串
indexOf() 返回字符串中检索指定字符第一次出现的位置
lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
localeCompare() 用本地特定的顺序来比较两个字符串
match() 找到一个或多个正则表达式的匹配
replace() 替换与正则表达式匹配的子串
search() 检索与正则表达式相匹配的值
slice() 提取字符串的片断,并在新的字符串中返回被提取的部分
split() 把字符串分割为子字符串数组
substr() 从起始索引号提取字符串中指定数目的字符
substring() 提取字符串中两个指定的索引号之间的字符
toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射
toLowerCase() 把字符串转换为小写
toString() 返回字符串对象值
toUpperCase() 把字符串转换为大写
trim() 移除字符串首尾空白
valueOf() 返回某个字符串对象的原始值

计算

数值计算

  • 通用计算符:加减乘除+-*/,幂级数1.1**1.2,取余2%3,括号()
    i++ i-- ++i --i, 连加/减在变量后面的,返回值是变量原来的数值
    = += -= *= /= %=也有
  • 逻辑运算== != < > >= <=
    === 绝对等于(值和类型均相等)
    !== 不绝对等于(值和类型有一个不相等,或两个都不相等
    x=5
    5
    //值相同,类型不同
    x == "5"
    true
    x === "5"
    false
    
  • 连接"hello"+"world"

对象

使用{key:value}定义,使用var.key调用
对象中也可以有方法,使用var.fun()调用

a={name:"xiaoming",age:15}
window.alert(a.age)

条件

if

if (condition)
{
    当条件为 true 时执行的代码
}
//
if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}
//
if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

switch

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

循环

for

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}
  • 语句1,3可省略,但是分号不能省略
  • 语句 1 (代码块)开始前执行, 可省略
  • 语句 2 定义运行循环(代码块)的条件
  • 语句 3 在循环(代码块)已被执行之后执行,可省略

实例

for (var i=0; i<5; i++)
{
      x=x + "该数字为 " + i + "<br>";
}

for in

a="hello world"
for ( x in a)
{
    //此时x以此为0,1,2,...,10
    alert(x)
}
//当a为数组时, x仍是0,1,2,...,
//因此可以这样调用数组中的值
a=Array(123,456,"hello",345);
for ( x in a)
{
    alert(a[x])
}

while

while (条件)
{
    需要执行的代码
}

do while

至少执行一次

do
{
    需要执行的代码
}
while (条件);

break 跳出&其他用法, continue 下一个循环

continue仅用于进入下一个循环
break还可以用于跳出其他带有标签的代码块,例如switch

function hello(a)
{
      return a > 5
}

// 在代码前面label: 这样标记即可
test:
{
      a=3
      if ( hello(a) )
      {
            break test
      }
      alert(a)
}

函数

定义

function myfun()
{
    window.alert("hello world")
}

调用

  • 可以直接在script里面调用<script>myfun()</script> 需要先定义后使用
  • 用html方式调用,可以先调用后定义,难道是先执行javascript在解释html的原因?
    <button onclick="myfun()">call fun</button>
    

参数和返回值

function myfun(a,b)
{
    c=a+" "+b;
    window.alert(c);
    return c;
};

d=myfun('hello','world');

内置函数

//返回时间
Date()

时间函数

方法 描述
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear() 从 Date 对象以四位数字返回年份。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。

正则表达式[略]

JavaScript 正则表达式


本文首发于我的博客@cndaqiang.
本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!


类似文章

下一篇 Linux使用clash


评论


广告


广告
访客数据