Javascript教程（二）——JavaScript基础语法

JS的输出语句

//向浏览器弹出一个警告框
alert("Hello world");

//让计算机在页面中输出一个内容
document.write("Hello world");

//向控制台输出一个message
console.log("Hello world");

JS的编写位置

1、写到标签的属性中，属于结构与行为耦合，不方便维护，不太推荐

<!--写到onclick属性中,当我们点击时，js代码才会执行-->
<button onclick="alert('msg');">点我</button>

<!--写到href属性中,当我们点击超链接时，js代码会执行-->
<a href="javascript:alert('msg');">点我</a>

<!--此时点击无反应-->
<a href="javascript:;">点我</a>

2、在script标签中写

<script type="text/javascript">
	alert("msg");
</script>

3、编写到外部js文件中，然后通过script标签引入，推荐使用。

• script标签一旦用于引入外部文件了，此时再在script标签内部写东西是无效的，就算写了，浏览器也会忽略。
• 如有需要，再建立如2的script标签。

<script type="text/javascript" src="js/script.js"></script>

JS注意事项

1、JS中严格区分大小写。
2、JS代码每一条语句后要以（;）结尾。

• 如果不写分号，浏览器会自动添加，但是会消耗一些系统资源
• 而且有时候，浏览器会加错分号，所以在开发中分号必须写

3、JS中会忽略多个空格和换行，所以我们可以利用空格和换行，使代码美观清晰。

JS基础语法

1、字面量与变量

（1）字面量：一些不可改变的值

• 比如：1 2 3 4 5
• 字面量可以直接使用，但是我们一般不直接使用

（2）变量：可以用来保存字面量，而变量的值是可以任意改变的

• 变量更加方便我们使用，所以在开发中都是通过变量去保存一个字面量，而很少直接使用字面量。
• 声明变量 var a;
• 为变量赋值 a = 123;（没有赋值的时候，console.log(a)会是undefined）
• 声明和赋值也可以同时进行：var b = 789;

2、标识符

在JS中所有可以由我们自主命名的都可以称为标识符，例如：变量名，函数名，属性名
命名一个标识符需要遵守以下规则：

• 1、标识符中可以含有字母，数字，_ ，$
• 2、标识符不能以数字开头
• 3、标识符不能是ES中的关键字或保留字
• 4、标识符一般采用驼峰命名法

JS底层保存标识符时，实际上采用的时Unicode编码，所以理论上讲，所有utf-8中含有的内容都可以用作标识符。（所以其实中文也可以用作变量名……但正常人一般不这么做……）

主要就是变量的定义，变量类型，if…else，while，for…这些，学过其他语言的JS语法很好掌握

3、JS中的数据类型（6种）

（1）String 字符串

• JS中单双引号都可以，但是嵌套引号时，要么单引号嵌套双引号，要么双引号嵌套单引号，不能双引号嵌套双引号或是单引号嵌套单引号。
• 引号中可以用转义字符:

\"    表示  "
\'    表示  '
\n    表示换行
\t    制表符
\\    表示   \
……

（2）Number 数值

• JS中所有的数值都是Number类型（包括整数和浮点数）
• 如何区分var a = 123; var b = "123"呢？
• 使用typeof运算符来检查一个变量的类型，检查字符串时，会返回string，检查数值时，会返回number
• 语法：typeof 变量
• Number.MAX_VALUE：JS中可以表示的数字的最大值为：1.79769031348623157e+308
• Number.MAX_VALUE：JS中可以表示的最小的小数（0以上的最小值）为：5e-324
• 如果使用Number表示的数字超过了最大值，则会返回Infinity，表示正无穷

//Infinity 正无穷
//-Infinity 负无穷

var a = Infinity
console.log(typeof Infinity); //返回“number”

• NaN 是一个特殊的数字，表示Not a number; 使用typeof检查NaN，返回也是number。
• JS中整数的运算基本可保证精确
• JS进行浮点运算，可能得到一个不精确的结果，所以千万不要用JS进行对精确度要求较高的运算

（3）Boolean 布尔值

• true & false
• 使用typeof检查布尔值，返回是boolean

（4）Null （空值）

• Null类型的值只有一个，就是null

var a = null;

console.log(a); //输出"null"
console.log(typeof a); //输出"object"

• null这个值专门用来表示一个为空的对象

（5）Undefined （未定义）

• Undefined类型的值只有一个，就是undefined
• 当声明一个变量，但是并不给变量赋值时候，它的值就是undefined

（6）Object 对象（在下一节中详细讲解）

4、JS中的强制数据类型转换

是指将数据类型，转为String，Number或Boolean类型。

（1）将其他数据类型转为String

• 方式一：
  • 调用被转换数据类型的toString()方法:a.toString()
  • 该方法不会影响到原变量，只会将转换的结果返回
  • 但是注意：null和undefined这两个值没有toString()方法，调了就会报错
• 方式二：
  • 调用String()函数，并将被转换的数据，作为参数传递给函数:String(a)
  • 调用String()函数做强转时，
    • 对于Number和Boolean类型的值，实际就是调用的toString()方法
    • 但是对于null和undefined，是直接转换为"null"和"undefined"

（2）将其他数据类型转为Number

• 方式一：
  • 调用Number()函数，并将被转换的数据，作为参数传递给函数:Number(a)
    • 字符串 —> 数字
      1、如果是纯数字的字符串，则直接转为数字
      2、如果含有非数字的内容，则转为NaN
      3、如果字符串是空串或是全为空格，则转换为0
    • 布尔 —> 数字
      true 转成 1
      false 转成 0
    • null —> 数字 0
    • undefined —> 数字 NaN
• 方式二： 这种方式专门用来对付字符串
  • parseInt() 把一个字符串转换为一个整数
    • 可以将一个字符串中有效的整数内容取出来，其他内容舍去，然后转为Number
    • 只会取非法字符前的整数内容，小数点也不行，就比如
      • a = "123.456; a = parseInt(a); "a也是会变成123的
  • parseFloat() 把一个字符串转换为一个浮点数
    • 与parseInt() 类似，不同的是它可以获得有效的小数部分
  • 如果对非String类型的值使用parseInt()和parseFloat()
    • JS会先将其转换为String，然后再按以上操作。

（3）将其他数据类型转为Boolean

• 使用Boolean()函数
  • 数字 —> 布尔
    • 除了0和NaN，其余都是true
  • 字符串 —> 布尔
    • 除了空串，其余都是true
  • null和undefined都会转换为false
  • 对象也会转换为true

5、运算符

算数运算符

逻辑操作符

JS中为我们提供了三种逻辑运算符

(1) ! 非

• !可以用来对一个值进行非运算
• 所谓非运算就是值对一个布尔值进行取反操作，
  • true变false，false变true
• 如果对一个值进行两次取反，它不会变化
• 如果对非布尔值进行元素，则会将其转换为布尔值，然后再取反
  • 所以我们可以利用该特点，来将一个其他的数据类型转换为布尔值
  • 可以为一个任意数据类型取两次反，来将其转换为布尔值，
  • 原理和Boolean()函数一样

(2) && 与

• &&可以对符号两侧的值进行与运算并返回结果
• 运算规则
  • 两个值中只要有一个值为false就返回false，
    • 只有两个值都为true时，才会返回true
  • JS中的“与”属于短路的与，
    • 如果第一个值为false，则不会看第二个值

(3) || 或

• ||可以对符号两侧的值进行或运算并返回结果
• 运算规则：
  • 两个值中只要有一个true，就返回true
    • 如果两个值都为false，才返回false
  • JS中的“或”属于短路的或
    • 如果第一个值为true，则不会检查第二个值

(4) && || 非布尔值的情况

• 对于非布尔值进行与或运算时
  • 会先将其转换为布尔值，然后再运算，并且返回原值
• 与运算：
  • 如果第一个值为true，则必然返回第二个值
  • 如果第一个值为false，则直接返回第一个值
• 或运算:
  • 如果第一个值为true，则直接返回第一个值
  • 如果第一个值为false，则返回第二个值

赋值运算符

+=、*=、-=、/=、%=

关系运算符

• 小于（<）、大于（>）、小于等于（<=）和大于等于（>=）
• 这几个运算符都返回一个布尔值。用来表示两个值之间的关系是否成立。
  • – 5 > 10 false
  • – 5 < 10 true
  • – 5 <= 10 true
  • – 5 >= 10 false

相等 == & 不等 !=

全等

• 除了== 以外，JS中还提供了 ===。
• === 表示全等，他和 == 基本一致，不过 == 在判断两个值时会进行自动的类型转换，而===不会。
• 也就是说 “55”==55 会返回 true ，而 “55”===55 会返回false；
• 同样我们还有 !== 表示不全等，同样比较时不会自动转型。
• 也就是说 “55”!=55 会返回false，而 “55”!==55 会返回 true；

逗号

• 使用逗号可以在一条语句中执行多次操作。
• 比如：var num1=1, num2=2, num3=3;
• 使用逗号运算符分隔的语句会从左到右顺序依次执行。

条件运算符

• 条件运算符也称为三元运算符。通常运算符写为?:。
• 例如：x > 0 ? x : -x // 求x的绝对值
• 上边的例子，首先会执行x>0
  • 如果返回true则执行冒号左边的代码，并将结果返回
  • 如果返回false则执行冒号右边的代码，并将结果返回

运算符优先级（表中越靠上优先级越高）

6、Unicode编码表

/*
	在字符串中使用转义字符输入Unicode编码
	\u四位编码
*/
console.log("\u2620")

/*
	在网页中使用Unicode编码
	&#编码；
	这里的编码需要的是10进制
*/
<h1>&#9760;</h1>

语句

• 前边我所说表达式和运算符等内容可以理解成是我们一 门语言中的单词，短语。
• 而语句（statement）就是我们这个语言中一句一句完整的话了。
• 语句是一个程序的基本单位，JS的程序就是由一条一条语句构成的，每一条语句使用;结尾。
• JS中的语句默认是由上至下顺序执行的，但是我们也可以通过一些流程控制语句来控制语句的执行顺序。

代码块

• 我们的程序是由一条一条语句构成的
• 语句是按照自上向下的顺序一条一条执行的
• 在JS中可以使用 {} 来为语句进行分组,
  • 同一个 {} 中的语句我们称为是一组语句，它们要么都执行，要么都不执行
  • 一个 {} 中的语句我们也称为叫一个代码块
    • 在代码块的后边就不用再编写;了
  • JS中的代码块，只具有分组的的作用，没有其他的用途
    • 代码块内部的内容，在外部是完全可见的

流程控制语句（略）

1、条件判断语句

• if…else语句

2、条件分支语句

• switch…case语句

3、循环语句

• for循环
• while循环
• do…while循环

【补充知识】

prompt()函数

• 可以弹出一个提示框，该提示框中会带有一个文本框，
• 用户可以在文本框中输入一段内容，该函数需要一个字符串作为参数，
• 该字符串将会作为提示框的提示文字
• 用户输入的内容将会作为函数的返回值返回，可以定义一个变量来接收该内容
• prompt()函数的返回值是String类型的
• 所以前面放一个+来把返回值转为Number类型