2019-03-09 JavaScript学习笔记之JavaScript基础

参考资料:《JavaScript从入门到精通》、《PHP、MySQL与JavaScript学习手册》

JavaScript在HTML中的使用

在页面中直接嵌入JavaScript代码

JavaScript是完全在网页浏览器上运行的客户端脚本语言。在HTML文档中可以使用标记将JavaScript脚本嵌入到其中。

JavaScript不以分号结尾,因为在JavaScript中,换行起到了和PHP中分号相同的作用。但是,如果想在一行中放置多条语句,则需要在除了最后一句之外的每条语句后都加一个分号。当然,也可以在没条语句后面都加一个分号。

当要为不支持或不可用JavaScript浏览器的用户提供可选的HTML是,可以使用这对标记。

在HTML文档中可以使用多个

或者,也可以从网上获取JavaScript文件:


注意:在外部JS文件中,不需要将脚本代码用标签括起来。

使用JavaScript显示"Hello, World"


    
        
        Hello, World
        
    
    
        
        
    

在文档头部使用JavaScript

除了在文档的body内放置脚本外,也可以把脚本放在段。

把脚本放在这里可以在页面加载的时候执行脚本;把关键代码放在这里,也可确保这些代码能够被文档中任意依赖它们的脚本立即使用。

在老式和非标准浏览器中使用JavaScript

如果要支持那些不能提供脚本的浏览器,需要使用HTML注释标记

以下实例是为无JavaScript的浏览器修改“Hello, World”例子:


    
        
            Hello, World
        
    
    
        
    

用在JavaScript中的注释符//表示这一行的剩余部分是注释。支持JavaScript的浏览器会忽略-->,而不支持JavaScript的浏览器会忽略//而执行-->来结束HTML注释。

数据结构

JavaScript脚本语言的数据结构包括标识符关键字常量变量等。

标识符

标识符是一个名称。在JavaScript中,标识符用来命名变量和函数,或者用作某些循环的标签。

在JavaScript中,合法的标识符第一个字符必须是字母下划线美元符号,其后可以是字母、数字、下划线或美元符号。

注意:标识符不能和JavaScript中用于其他目的的关键字同名。

关键字

关键字是指在JavaScript语言中有特定含义,成为JavaScript语法中的一部分的那些字。使用关键字作为变量名或函数名,会使JavaScript发生编译错误。

常量

当程序运行时,值不能改变的量为常量

常量主要用于为程序提供固定和精确的值,如数字、逻辑值真/假等都是常量。

通常使用const来声明常量,语法格式如下:

const 常量名 : 数据类型 = 值;

变量

变量是指程序中一个已经命名的存储单元,它的主要作用就是为数据操作提供存放信息的容器。

变量的命名

JavaScript中,没有特定的字符标识变量。JavaScript变量使用以下命名规则:

  1. 一个变量止咳包含字母a-z、0-9和美元符号$及下划线_。
  2. 变量名中不允许有空格或标点符号。
  3. 变量名的第一个字符只可以是a-z、A-Z或$和_。
  4. 变量名区分大小写。
  5. 变量名的长度没有限制。
  6. 不能使用JavaScript的关键字。

变量的声明与赋值

使用变量前需要先对其进行声明。所有的JavaScript变量都由关键字var声明。

声明变量的格式如下:

var variable;

可以在声明变量的同时对其赋值:

var variable = 11;

声明变量时所遵循的规则如下:

  1. 可以使用一个关键字var同时声明多个变量。
  2. 可以在声明变量的同时对其赋值,即初始化
  3. 如果声明了变量而没有对其赋值,其值默认为undefined。
  4. var语句可以用作for循环和for/in循环的一部分。
  5. 可以使用var语句多次声明同一个变量。

由于JavaScript是弱类型,所以可以把任意类型的数据赋值给变量。

例如:

var varible = 100;          //数值类型
var str = "Hello, World";   //字符串
var bue = true;             //布尔类型

变量的作用域

变量的作用域是指某些变量在程序中的有效范围,也就是程序中定义该变量的区域。

JavaScript的变量有两种:局部变量全局变量

局部变量是定义在函数体内,只作用于函数体的变量,函数的参数也是局部性的。

全局变量是定义在所有函数之外,作用于整个脚本代码的变量。

变量的生存期

变量的生存期是指变量在计算机中存在的有效时间,可以简单理解为该变量所赋的值在程序中的有效范围。

JavaScript中变量的生存期有两种:全局变量局部变量

全局变量在主程序定义,其有效范围从其定义开始,一直到本程序结束为止。

局部变量在程序的函数中定义,其有效范围只在该函数中。

注释和语句块

JavaScript中用“//”作为单行注释标记,用/*和*/作为多行注释标记,用{和}包装成语句块。

数据类型

JavaScript脚本语言中采用的是弱类型的方式,即一个数据不必首先作声明,可以在使用或者赋值时再确定其数据的类型,当然也可以先声明该数据的类型,即通过在复制时自动说明其数据类型。

数字型

JavaScript不区分整型数值和浮点型数值,而是所有的数字都用浮点型表示的。

当一个数字直接出现在JavaScript程序中时,称它为数值直接量

整型数据

在JavaScript程序中,十进制的整数是一个数字序列。

十六进制和八进制

JavaScript可以识别十六进制的数据。

所谓十六进制的数据,是以“0X”或“0x”开头,其后跟随十六进制数字串的直接量。

JavaScript的某些实现允许采用八进制格式的整型数据。

八进制数据以数字0开头,其后跟随一个数字序列。

注:最好不要使用以0开头的整型数据。

浮点型数据

浮点型数据可以具有小数点,它们采用的是科学计数法的语法。一个实数值可以被表示为整数部分后加小数点和小数部分。

还可以用指数法表示浮点型数据,即实数后跟随字母E或e,后加正负号,其后再加一个整型指数。语法格式如下:

1.234E-12   //3.12×10^11
3.12e11     //1.234×10^-12

字符串型

字符串是由Unicode字符、数字、标点符号等组成的序列,是JavaScript用来表示文本的数据类型。

字符串型数据是包含在单引号双引号中的,由单引号定界的字符串中可以含有双引号,由双引号定界的字符串中也可以含有单引号。

例如:

'Hello, World'
"QNKCDZ0"
'name = "myname"'
"You can call me 'Tom'!"

注意:双引号内出现双引号或单引号内出现单引号必须进行转义。

布尔型

布尔数据类型只有两个,这两个合法的值分别由直接量true和false表示,用来说明某个事物是真还是假。

布尔值通常在JavaScript程序中用来比较所得结果,也用于JavaScript的控制结构。

数组

JavaScript的数组和PHP很相似,像其他数值一样,其数组也可以包含字符串数值数据

要给数组赋值,可以使用以下语法:

toys = ['bat', 'ball', 'whistle', 'puzzle', 'doll'];

创建多维数组,是把小数组放在大数组中,可以用如下代码:

face = 
[
    ['R', 'G', 'Y'],
    ['W', 'R', 'O'],
    ['Y', 'W', 'G']
];
或者
face = [['R', 'G', 'Y'], ['W', 'R', 'O'], ['Y', 'W', 'G']];

要访问该二维数组中向下第二,向右第三的元素,可以用如下方式(数组下标从0开始):

document.write(face[1][2]);

特殊数据类型

转义字符

反斜杠开头的不可显示的特殊字符通常称为控制字符,也称为转义字符

通过转义字符可以防止引号匹配混乱的问题。

以下是JavaScript常用的转义字符:

转义字符 说明
\b 退格
\n 回车换行
\t tab符号
\f 换页
' 单引号
" 双引号
\v 跳格(tab,水平)
\r 换行
\OOO 八进制整数
\xHH 十六进制整数
\uhhhh 十六进制编码的Unicode字符
\\ 反斜杠

未定义值

未定义类型的变量是undefined,表示变量还没有赋值或者赋予了一个不存在的属性值

JavaScript中有一种特殊类型的数字常量NaN,即“非数字”,即没有意义的数字。

空值

关键字null表示空值,用于定义空的或者不存在的引用。如果试图引用一个没有定义的变量,则返回一个null值。

注意:null与undefined的区别是,null表示变量被赋予了一个空值,而undefined表示变量尚未被赋值。

运算符

算术运算符

算术运算符用于进行数学运算。

运算符 描述
+
-
*
/
% 求模
++ 自增
-- 自减

注意:自增、自减运算符有两种使用情况:i++(i--)表示在使用i之后使i的值加(减)1,++i(--i)表示在使用i的值之前先使i增(减)1。

例1 算术运算符的使用

运用JavaScript运算符

    var num1 = 120, num2 = 25;
    document.write("120 + 25 = "+(num1 + num2)+"
"); document.write("120 - 25 = "+(num1 - num2)+"
"); document.write("120 * 25 = "+(num1 * num2)+"
"); document.write("120 / 25 = "+(num1 / num2)+"
"); document.write("120++ = "+(num1++)+"
"); document.write("++120 = "+(++num1)+"
");

输出:

120 + 25 = 145
120 - 25 = 95
120 * 25 = 3000
120 / 25 = 4.8
120++ = 120
++120 = 122

比较运算符

比较运算符首先对操作数进行比较,然后返回一个布尔值。

运算符 描述
< 小于
> 大于
<= 小于等于
>= 大于等于
== 等于。只根据表面值进行判断,不涉及数据类型。
=== 绝对等于。根据表面值和数据类型同时判断。
!= 不等于。只根据表面值进行判断,不涉及数据类型。
!=== 不绝对等于。根据表面值和数据类型同时判断。

例2 比较运算符的使用


输出:

age变量的值为:25
age >= 20:true
age < 20:false
age != 20:true
age > 20:true

赋值运算符

JavaScript中的赋值运算可以分为简单赋值运算复合赋值运算

简单赋值运算是将赋值运算符(=)右边的表达式的值保存到左边的变量中。

符合赋值运算混合了算术运算、位操作等其他操作和赋值操作。

运算符 描述
= 赋值
+= 相加后赋值
-= 相减后赋值
*= 相乘后赋值
/= 左边的变量除以右边的变量后赋给左边的变量
%= 左边的便利用右边的变量求模后赋给左边的变量
&= 进行与逻辑运算后赋值
|= 进行或逻辑运算后赋值
^= 进行异或运算后赋值

逻辑运算符

逻辑运算符 描述
! 取反
& 逻辑与
&& 与运算符
| 逻辑或
^ 异或运算符
?: 条件运算符
|| 或运算符

其他运算符

位操作运算符

位运算符分两种,普通位运算符位移运算符

在进行运算前,都先将操作数转换为32位的二进制整数,然后再进行相关运算,最后输出结果将以十进制表示。

位操作运算符对数值的位进行操作。

位操作运算符 描述
& 与运算符
| 或运算符
^ 异或运算符
~ 非运算符
<< 左移
>> 带符号右移
>>> 填0右移

typeof运算符

typeof运算符用于返回它的操作数当前所容纳的数据类型。

例3 用typeof运算符返回当前所容纳的数据类型


输出:

a的类型为number
b的类型为string
c的类型为object

注意:typeof运算符的返回值有6种可能:number,string,boolean,object,function和undefined。

new运算符

通过new运算符来创建一个新对象。

例如:

Object1 = new Object;
Array2 = new Array();
Date3 = new Date("August 8 2008");

运算符的优先级

优先级 结合性 运算符
1 向左 . [] ()
2 向右 ++ -- - ! delete new typeof void
3 向左 * / %
4 向左 + -
5 向左 << >> >>>
6 向左 < <= > >= in instanceof
7 向左 == != === !==
8 向左 &
9 向左 ^
10 向左
11 向左 &&
12 向左
13 向右 ?:
14 向右 =
15 向右 *= /= %= += -= <<= >>= >>>= &= ^=
16 向左 ,

表达式

表达式是一个语句集合,计算结果是一个值,这个值被JavaScript归入boolean,number,string,function,object这五种数据类型之一。

数据类型的转换规则

其他类型转换为数值型

类型 转换后结果
undefined NaN
null 0
逻辑型 若其值为true,结果为1,否则为0
字符串型 若内容为数字,结果为相应数字,否则为NaN
其他对象 NaN

其他数据类型转换为逻辑型

类型 转换后结果
undefined false
null false
数值型 若其值为0或NaN,则结果为false,否则为true
字符串型 若长度为0,则结果为false,否则为true
其他对象 true

其他数据类型转换为字符串型

类型 转换后结果
undefined "undefined"
null "NaN"
逻辑型 NaN、0或与数值相对应的字符串
字符串型 若其值为true,则结果为"true",否则为"false"
其他对象 若存在,则其结果为toString()方法的值,否则期结果为"undefined"

你可能感兴趣的:(2019-03-09 JavaScript学习笔记之JavaScript基础)