语法基础

本文是《JavaScript 快速上手》的读书笔记，旨在挖坑，打桩，并列出主要骨架。

为什么要学 JavaScript 呢？两点原因：

客户端表单数据校验，减轻服务器端的压力
制作页面动态特效

01. 简介

嵌入到 HTML 页面中的编程语言，由浏览器一边解释一边执行
HTML 用于控制网页的结构，CSS 用于控制网页的外观，而 JavaScript 控制着网页的行为
不是“会动”的页面就叫动态页面，静态页面和动态页面的区别在于是否与服务器进行数据交互
学习路径：JavaScript 入门、jQuery、JavaScript 进阶

JavaScript 引入

想要在 HTML 中引入 JavaScript，一般有 3 种方式：

外部 JavaScript
内部 JavaScript
元素事件 JavaScript

那么，推荐使用哪一种引入方式呢？

外部 JavaScript 是最理想的 JavaScript 引入方式。在实际开发中，为了提升网站的性能和可维护性，一般都会使用外部 JavaScript。

在 HTML 中，我们可以使用“script 标签”引入外部 JavaScript 文件。在 script 标签中，我们只需用到 src 这一个属性

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!--1.在 head 中引入-->
    <script src="index.js"></script>
  </head>

  <body>
    <!--2.在 body 中引入-->
    <script src="index.js"></script>
  </body>
</html>

外部 JavaScript，与 CSS 不同的是，JavaScript 既可以在 head 中引入，又可以在 body 中引入。

那么，推荐在 head 还是 body 中引入呢？

据观察，JavaScript 外部文件一般在 head 引入的比较普遍。

内部 JavaScript，放在 <script></script> 标签中间的 JavaScript 代码

html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!--1.在 head 中引入-->
    <script>
      ……
    </script>
  </head>

  <body>
    <!--2.在 body 中引入-->
    <script>
      ……
    </script>
  </body>
</html>

本书中的大部分实例演示，使用的都是内部 JavaScript，在 head 引入。

元素属性 JavaScript，在元素的事件属性中直接编写 JavaScript 或调用函数

02. 语法基础

变量与常量
- 标识符，[a-zA-Z0-9_$]，数字不开头，大小写敏感
- var 变量名 = 值；
- var 大写常量名 = 值；
数据类型
- 5 种基本数据类型：数字，字符串，布尔值，未定义值，空值
  - 数字：不分“整型”和“浮点型”
  - 字符串：用单引号 ' 或双引号 " 括起来
  - 布尔值：true 和 false
  - 未定义值：虽然使用 var n; 声明了，但是没赋值，此时该变量的值就是“未定义值”，undefined
  - 空值：var n = null;，则表示系统没有给这个变量 n 分配内存空间
- 1 种引用数据类型：对象（数组也是属于对象的一种）
运算符
- 算术运算符
  - 加法运算符：num+num = num，str+str = str，num+str = str
  - 自增运算符
  - 自减运算符
- 赋值运算符
- 比较运算符
- 逻辑运算符
- 条件运算符
类型转换：隐式类型转换和显式类型转换
- “字符串”转为“数字”：
  - Number() 将任何“数字型字符串”转换成数字
  - parseInt() 和 parseFloat() 可以提取“首字母为数字的任意字符串”
- “数字”转为“字符串”
  - 数字与空串相加 var a = 2018+""
  - toString()
转义字符
- \'
- \"
- \n

对于字符串的换行，有以下两种情况：
如果是在 document.write() 中换行，则应该用 <br/>
如果是在 alert() 中换行，则应该用 \n

注释
- 单行注释 // 单行注释内容
- 多行注释 /* 多行注释内容块 */

03. 流程控制

待补充

04. 认识函数

定义函数的关键字，function name(a, b) {}
JavaScript 的函数调用和 Java 有区别，4 种调用方式
- 直接调用
- 在表达式中调用，返回值参与表达式运算
- 在超链接中调用，a 元素的 <a href="javascript: 函数名">点击这里</a>，点击就调用
- 在事件中调用，比如单击按钮，写在按钮的事件属性里 <input type="button" onclick="alertMes()" value="提交" />
内置函数和自定义函数

05. 字符串对象

内置对象：字符串对象 String，数组对象 Array，日期对象 Date，数值对象 Math
str.length
str.toLowerCase()，toUpperCase()
str.charAt(n)
str.substring(start, end)：切片
str.replace("js", "JavaScript")
str.replace(/loser/g, "hero")：通过正则表达式查找和替换
str.split("分隔符")：返回一个数组
str.indexOf("指定子串")，str.lastIndexOf("指定子串")：不存在则返回 -1

06. 数组对象

var arr = new Array(a1, a2, ..., an);
var arr = [a1, a2, ..., an]; 语法糖
arr.length
arr.slice(start, end)：切片
arr.unshift(a1, a2)，arr.push(a3, a4)：在开头和结尾添加新元素
arr.shift()，arr.pop()：在开头和结尾删一个
arr.sort(up)，arr.sort(down)：此处关于升序函数和降序函数不是特别明白，需要后续学习
arr.reverse()：数组反向
arr.join("连接符")：把数组内的各项元素拼接成一条字符串

07. 时间对象

var oDate = new Date();
方法：getXXX()，setXXX()

08. 数学对象

Math 对象跟其他对象不一样，Math 对象不需要使用 new 关键字来创造，而可以直接使用它的属性和方法。

Math.PI，角度 120*Math.PI/180，150*Math.PI/180
Math.max()，Math.min()，Math.floor()，Math.ceil()
Math.random()，生成 [0,1)

语法基础 ​

01. 简介 ​

JavaScript 引入 ​

02. 语法基础 ​

03. 流程控制 ​

04. 认识函数 ​

05. 字符串对象 ​

06. 数组对象 ​

07. 时间对象 ​

08. 数学对象 ​