JavaScript基础

概念

一门客户端脚本语言
- 运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
- 脚本语言：不需要编译，直接就可以被浏览器解析执行了
功能
- 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。
JavaScript发展史
- JavaScript=ECMAScript+JavaScript自己特有的东西(BOM+DOM)

ECMAScript：客户端脚本语言的标准

基本语法
1. 与html结合方式
  1. 内部js：
    - 定义<script>，标签体就是script代码
  2. 外部js：
    
    定义<script>，通过src属性引入外部的js文件
  3. 注意：
    - <script>标签可以定义多个
2. 注释
  1. 和C++一样
3. 数据类型：
  1. 原始数据类型(原始数据类型)：
    1. number：数字。整数/小数/NaN(not a number一个不是数字的数字类型)
    2. string：字符串。字符串 “abc”
    3. boolean：true 和 false
    4. null：对象为空
    5. undefined：未定义。若一个变量没有给初始值，则会被默认赋值为undefined
  2. 引用数据类型：对象
4. 变量
  - 变量：一小块存储数据的内存空间
  - java语言是强类型语言，而JavaScript是弱类型语言
    - 强类型：在开辟变量存储空间时，定义了空间将来存储的数据的类型。只能储存固定类型的数据
    - 弱类型：在开辟变量存储空间是，不定义空间将来存储数据类型，可以存储任意类型的数据
  - 语法：
    - var 变量名=初始化值;
  - typeof运算符：获取变量的类型
    - 注：null运算符后得到的是object
5. 运算符
  1. 一元运算符
    - ++，–，+(正号)
    - 注意：在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动的将运算数进行类型转换
      - 其他类型转number
        
        string转number：按照字面值转换。如果字面值不是数字，则转为NaN(不是数字的数字)
        boolean转number，true变1，false变0；
  2. 二元运算符
    - 算术运算符
  3. 赋值运算符
    - +=，=，-= 。。。
  4. 比较运算符
    - ===(全等于)
    - 类型相同：直接比较
      - 字符串：按照字典顺序比较，就是按位逐一比较，直到得出大小为止
    - 类型不同：先类型转换，再去比较
      - ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false
  5. 逻辑运算符
    - &&，||，!
    - 其他类型转boolean
      1. number：0或NaN为false，其他为true
      2. string：除了空字符串，其他全为true
      3. null&&undefined：都是false
      4. 对象：所有对象都是true
  6. 三元运算符
    - ? :表达式：和C++一样
6. 流程控制语句
  1. if…else
  2. switch
    - 在java中，switch语句可以接收的数据类型：byte int short char，枚举(1.5后)，String(1.7后)
      - switch(变量)
        
        case 值:
    - 在JS中，switch语句可以接受任意的原始数据类型
  3. while
  4. do…while
  5. for
7. JS特殊语法
  1. 语句以 ; 结尾，如果一行只有一条语句则 ; 可以省略（但是不建议）
  2. 变量的定义使用var关键字，也可以不适用
    - 用var：定义的变量是局部变量
    - 不用var：定义的变量就是全局变量（有时候也不建议）
8. 练习：九九乘法表
```
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style> td{
          border: 1px solid; } </style>
    <script> document.write("<table align='center'>"); for (var i=1;i<=9;i++){
          document.write("<tr>"); for (var j=1;j<=i;j++){
          document.write("<td>"); document.write(j+"*"+i+"="+(i*j)+"\t"); document.write("</td>"); } document.write("</tr>"); } document.write("</table>"); </script>
</head>
<body>

</body>
</html>
```

基本对象（更多自行查看https://www.w3school.com.cn/jsref/index.asp）

Function：函数对象

<script> /* Function：函数(方法)对象 1. 创建： 1. var fun = new Function(形式参数,方法体);(不符合定义方法的逻辑！) 2. function 方法名称(参数列表){ 方法体 } 3. var 方法名 = function(参数列表){ 方法体 } 3. 属性： length：代表形参的个数 4. 特点“ 1. 方法定义是，形参的类型不用写，返回类型也不写。 2. 方法是一个对象，如果定义名称相同的话，后定义的会覆盖前面定义的方法 3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关 4. 在方法声明中有一个隐藏的内置对象，叫arguments，封装所有的实际参数 5. 调用 方法名称(实际参数列表); */ //1.创建方式 // var fun1 = new Function("a","b","alert(a)"); // //调用方法 // fun1(12,2); //2.创建方式二 function fun2(a,b){
            document.write(a*b); } fun2(2,3); </script>

Array：数组对象

<script> /** * Array：数组对象 * 1. 创建 * 1.var arr = new Array(元素列表); * 2.var arr = new Array(默认长度); * 3.var arr = [元素列表]; * 2. 方法(其他方法自行查看https://www.w3school.com.cn/jsref/index.asp) * 1.join(参数)：将数组中的元素按照指定的分隔符拼接为字符串 * 2.push(值)：向数组的尾部添加一个或者更多的元素，并且返回新的长度 * 3. 属性 * 1.length：长度 * 4. 特点 * 1. JS中，数组长度是可变的 * 2. JS中，数组元素类型可变的 */ </script>

Boolean

Date

<script> /** * Date：日期对象 * 1. 创建 * var data = new data(); * 2. 方法： * toLocaleString()：返回当前data对象对应的时间，本地字符串格式 * getTime()：获取毫秒值，返回当前日期对象描述的时间到1970年1月1日0点的毫秒值差 */ var date = new Date(); document.write(date+"<br>"); document.write(date.toLocaleString()+"<br>"); </script>

Math

<script> /** * Math对象 * 1. 创建： * 特点：Math对象不用创建，直接使用，Math.方法名 * 2. 方法： * random()：返回随机数 * ceil(x)：对数字进行向上舍入 * floor(x)：对数字进行下舍入 * round(x)：把数字四舍五入为最接近的整数 * 3. 属性： * PI */ </script>

Number
- 原始数据类型的包装类
String
- 原始数据类型的包装类
RegExp：正则表达式对象
1. 正则表达式：定义字符串的组成规则
  1. 单个字符：[]
    1. 如[a] [ab] [a-zA-Z0-9_]
    2. 特殊符号代表特殊含义的单个字符
      - \d：单个数字字符[0-9];
      - \w：单个单词字符[a-zA-Z0-9_]
  2. 量词符号：
    1. ?：表示出现0次或者1次
    2. *：表示出现0次或者多次
    3. +：出现一次或者多次
    4. {m,n}：表示m<=数量<=n
      1. 如果m缺省：{,n}最多n次
      2. 如果n缺省：{m,}最少m次
    5. 如\w*：表示单字符出现0次或多次
  3. 开始结束符号
    - ^开始
    - $结束
2. 正则对象：
  1. 创建
    1. var reg = new RegExp(“正则表达式”);
    2. var reg = /正则表达式/;
  2. 方法
    1. test(参数)：验证指定的字符串是否符合正则定义的规范
```
<script> //1. var reg = new RegExp("^\\w{6,12}$");//记得加转译\\ //2. var reg2=/^\w{6,12}$/; // alert(reg); // alert(reg2); var username = "qinlijian"; document.write(username+"<br>"); document.write(reg.test(username)); </script>
```

Global

特点：全局对象，这个Global中封装的方法不需要对象就可以直接调用。方法名();
方法：

<script> /** * 方法： * encodeURI():URL编码 * decodeURI():URL解码 * * encodeURIComponent():url编码，编码的字符更多 * decodeURIComponent():url解码 * * parseInt():将字符串转为数字 * 从第一个开始逐一判断每一个字符是否是数字，直到不是数字为止，将前边数字部分转为number * * isNaN()：判断一个值是否是NaN * NaN和任何值比较都返回false * * eval():将JavaScript字符串，并把它作为脚本代码来执行 * */ var str = "http://www.baidu.com?wd=你好世界"; var encode=encodeURI(str);//编码 document.write(encode+"<br>");//UTF-8编码：%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C var s=decodeURI(encode);//解码 document.write(s+"<br>");//你好世界 var str1 = "http://www.baidu.com?wd=你好世界"; var encode1=encodeURIComponent(str1);//编码 document.write(encode1+"<br>");//UTF-8编码：%E4%BD%A0%E5%A5%BD%E4%B8%96%E7%95%8C var s1=decodeURIComponent(encode1);//解码 document.write(s1+"<br>");//你好世界 </script>