一、 JavaScript 概述

1. 什么是JavaScript

1) JS 介绍

简称JS，是一种浏览器解释型语言,嵌套在HTML文件中交给浏览器解释执行。主要用来实现网页的动态效果，用户交互及前后端的数据传输等。

2) JS 组成

1. 核心语法 -ECMAScript 规范了JS的基本语法
2. 浏览器对象模型 -BOM
   Browser Object Model，提供了一系列操作浏览器的方法
3. 文档对象模型 -DOM
   Document Object Model ，提供了一系列操作的文档的方法

2. 使用方式

1. 元素绑定事件
   • 事件 ：指用户的行为（单击，双击等）或元素的状态（输入框的焦点状态等）
   • 事件处理：元素监听某种事件并在事件发生后自动执行事件处理函数。
   • 常用事件：onclick (单击事件)
   • 语法 ：将事件名称以标签属性的方式绑定到元素上，自定义事件处理。

   <!--实现点击按钮在控制台输出-->
   <button onclick="console.log('Hello World');">点击</button>
   

2. 文档内嵌。使用<script type="text/javascript"></script>标签书写 JS 代码
   • 语法 ：

   <script type="text/javascript">
     alert("网页警告框");
   </script>
   

   • 注意 ：<script></script>标签可以书写在文档的任意位置，书写多次，一旦加载到script标签就会立即执行内部的JS代码，因此不同的位置会影响代码最终的执行效果
3. 外部链接
   • 创建外部的JS文件 XX.js，在HTML文档中使用<script src=""></script>引入

   <script src="index.js"></script>
   

   • 注意 ：<script></script>既可以实现内嵌 JS 代码，也可以实现引入外部的 JS 文件，但是只能二选一。

二、基础语法

1. 语法规范

1. JS是由语句组成,语句由关键字,变量,常量,运算符,方法组成.分号可以作为语句结束的标志,也可以省略
2. JS严格区分大小写
3. 注释语法
   单行注释使用 //
   多行注释使用 /* */

2. JS的变量与常量

1) 变量

1. 作用 : 用于存储程序运行过程中可动态修改的数据
2. 语法 : 使用关键var声明,自定义变量名

   var a;      //变量声明
   a = 100;    //变量赋值
   var b = 200; //声明并赋值
   var m,n,k;  //同时声明多个变量
   var j = 10,c = 20; //同时声明并赋值多个变量
   

3. 命名规范 :
   • 变量名,常量名,函数名,方法名自定义,可以由数字,字母,下划线,$组成,禁止以数字开头
   • 禁止与关键字冲突(var const function if else for while do break case switch return class)
   • 变量名严格区分大小写
   • 变量名尽量见名知意,多个单词组成采用小驼峰,例如："userName"
4. 使用注意 :
   • 变量如果省略var关键字,并且未赋值,直接访问会报错
   • 变量使用var关键字声明但未赋值,变量初始值为undefined
   • 变量省略var关键字声明,已被赋值,可正常使用.影响变量作用域

2) 常量

1. 作用 : 存储一经定义就无法修改的数据
2. 语法 : 必须声明的同时赋值

   const PI = 3.14;
   

3. 注意 :
   • 常量一经定义,不能修改,强制修改会报错
   • 命名规范同变量,为了区分变量,常量名采用全大写字母

3. 数据类型

1) 基本数据类型（简单数据类型）

1. number 数值类型

   • 整数
     1. 十进制表示

     ```javascript
      var a = 100;
     ```
     2. 八进制表示
        以0为前缀
     ```javascript
      var b = 021; //结果为十进制的 17
     ```
     3. 十六进制
        以0x为前缀
     ```javascript
      var c = 0x35;//结果为十进制的 53
     ```
        使用 : 整数可以采用不同进制表示,在控制台输出时一律会按照十进制输出
     

   • 小数
     1. 小数点表示

      var m = 1.2345;
     

     2. 科学计数法
        例 : 1.5e3
        e表示10为底,e后面的数值表示10的次方数
        1.5e3 等价于 1.5 * 10(3)

2. string 字符串类型
   字符串 : 由一个或多个字符组成,使用""或''表示,每一位字符都有对应的Unicode编码

   var s = "100";
   var s1 = "张三";
   

3. boolean 布尔类型
   只有真和假两个值，布尔值与number值可以互相转换。true 为 1，false 为 0

   var isSave = true;
   var isChecked = false;
   

4. undefined (程序返回的值)
   特殊值,变量声明未赋值时显示undefined

   var a;
   console.log(a);//undefined
   

5. null 空类型 (主动使用的)
   解除对象引用时使用null,表示对象为空

2) 引用数据类型

主要指对象，函数等

3) 检测数据类型

typeof 变量或表达式
typeof (变量或表达式)

var n = "asda";
console.log(typeof n);//string
console.log(typeof(n));//string

4. 数据类型转换

不同类型的数据参与运算时,需要转换类型

1) 强制类型转换

1. 转换字符串类型
   方法 : toString()
   返回转换后的字符串

var a = 100;
a = a.toString(); //"100"
var b = true;
b = b.toString(); //"true"

2. 转换number类型

   • Number(param)
     参数为要进行数据类型转换的变量或值，返回转换后的结果:
     如果转换成功,返回number值
     如果转换失败,返回NaN,(Not a Number)，只要数据中存在非number字符,一律转换失败，返回 NaN

       Number("abc")
       typeof NaN
       Number(undefined)
       Number(null)
   

   • parseInt(param)
     参数为要解析的数据
     作用 : 从数据中解析整数值
     过程 :
     1. 如果参数为非字符串类型,会自动转成字符串
     2. 从左向右依次对每一位字符转number,转换失败则停止向后解析,返回结果
   • parseFloat(param)
     作用 : 提取number值，包含整数和小数部分

2) 隐式类型转换（自动转换）

1. 当字符串与其他数据类型进行"+"运算时,表示字符串的拼接，不再是数学运算
   转换规则 ：将非字符串类型的数据转换成字符串之后进行拼接，最终结果为字符串

2. 其他情况下，一律将操作数转number进行数学运算

5. 运算符

1) 赋值运算符

= 将右边的值赋给左边变量

2) 算数运算符

+ - * / %  加 减 乘 除 取余

3) 复合运算符

+= -= *= /= %=

4) 自增或自减运算符

++ -- 变量的自增和自减指的是在自身基础上进行 +1或-1 的操作

注意：

• 自增或自减运算符在单独与变量结合时，放前和放后没有区别
• 如果自增或自减运算符与其他运算符结合使用，要区分前缀和后缀,做前缀，那就先++/--,再进行赋值或其他运算，如果做后缀，就先结合其他运算符，再进行++ / --

5) 关系运算符/比较运算符

> <     
>= <=
==(相等) !=(不相等)
===(全等) !==(不全等)

1. 关系运算符用来判断表达式之间的关系,结果永远是布尔值 true/false

2. 使用

   • 字符串与字符串之间的比较
     依次比较每位字符的Unicode码,只要某位字符比较出结果,就返回最终结果
   • 其他情况
     一律将操作数转换为number进行数值比较，如果某一操作数无法转换number，则变成NaN参与比较运算，结果永远是false

   null和其他数据类型做等值比较运算 不转换成数字
   null和undefined相等 但是 null和undefined不全等

3. 相等与全等
   • 相等 : 不考虑数据类型,只做值的比较(包含自动类型转换)
   • 全等 : 不会进行数据类型转换,要求数据类型一致并且值相等才判断全等

6) 逻辑运算符

1. && 逻辑与 条件1&&条件2 (and)
   表达式同时成立,最终结果才为true;全1则1
2. || 逻辑或 条件1||条件2 (or)
   表达式中只要有一个成立,最终结果即为true; 有1则1
3. ! 逻辑非 !条件 (not)
   对已有表达式的结果取反
   注意 : 除零值以外,所有值都为真

7) 三目运算符

语法 :

表达式1 ? 表达式2 : 表达式3;

过程 :
判断表达式1是否成立,返回布尔值
如果表达式1成立,执行表达式2;
如果表达式1不成立,执行表达式3;

a>b?console.log('a比b大'):console.log('b比a大')
1 2 3
练习：
first.js

console.log("外部链接方式执行js代码");

use_js.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 2. 文档内嵌 -->
    <script type="text/javascript">
        console.log('head中的js代码');
    </script>
    <!-- 3. 外部链接方式 -->
    <script src="first.js"></script>
</head>
<body>
    <!-- 1. 元素绑定事件方式 -->
    <button onclick="console.log('hello world');">clickme</button>
    <script>
        console.log('body中的js代码');
    </script>
</body>
<script>
    console.log('最后的js代码');
</script>
</html>

output.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Js输出语句</title>
</head>
<body>
    <!-- 弹窗 -->
    <button onclick="alert('hello world');">alert</button>
    <!-- 控制台输出 -->
    <button onclick="console.log('hello world');">console.log</button>
    <!-- 在页面中动态输出 -->
    <!-- 原先网页的内容都会被覆盖 -->
    <button onclick="document.write('hello world');">document.write</button>
</body>
</html>

var.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量的使用</title>
</head>
<body>
    <script>
        // 先声明后赋值
        var a;
        a =100;
        console.log('a=',a);
        // 声明时同时赋值
        var b =200;
        console.log('b=',b);
        // 多个变量同时声明
        var m,n,k;
        // 1.只声明，没有赋值，值为undefined[注意的问题1]
        console.log(m,n,k);
        //多个变量同时声明并赋值
        var name='aidvn2013',age=18;
        console.log('name=',name,'age=',age);
        // 2. 未经声明直接使用，是错误的
        // console.log('count=',count);
        // 3. 不声明，赋值后使用，可以使用，但是影响作用域
        number=100;
        console.log('number=',number);
    </script>
</body>
</html>

input.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1. 接收用户输入一个用户名
        var username = prompt("请输入您的大名：");
        // 2. 在页面中动态显示欢迎信息
        document.write("北京欢迎您:",username);
    </script>    
</body>
</html>

const.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>常量的使用</title>
</head>
<body>
    <script>
        const PI = 3.1415926;
        console.log(PI*2);
        // 常量一经赋值，不能修改
        // PI = 3.14;
        console.log(PI.toFixed(2));
        //PI变量本身的值并未修改
        console.log(PI);



    </script>
</body>
</html>

type.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.1 数值类型中的整形
        var a =100;
        // 十六进制
        var b = 0x64;
        console.log(a,b);
        // 1.2 数值类型中的小数
        var c =1.25;
        console.log(c);
        // 科学计数法(极大数和极小数时使用)
        var d = 2.99e8
        var e = 1.33e-5
        console.log(d);
        console.log(e);
        // 2. 字符串类型
        var name="aidvn2103";
        console.log(name);
        // 3.布尔类型
        var isStart=true;
        var isCheck=false;
        console.log(isStart,isCheck);
        // 4. undefined
        var count;
        console.log(count);
        // 5.null (空对象)
        var person = null;
        console.log(person);
        // 6.对象类型(object)
        var obj1={};
        console.log(obj1);
        var obj2=null
        console.log(obj2);
        var obj3={
            name:"aidvn2103",
            age:18
        };
        console.log(obj3);
        // 输出对象的属性值
        console.log(obj3.name,obj3.age);
        console.log(obj3['name'],obj3['age']);
        // typeof的使用
        console.log(typeof 10);
        // 检测表达式：数值相加
        console.log(typeof(10+20));
        // 检测表达式：字符串连接
        console.log(typeof("10"+20));
        console.log(typeof true);
        var test;
        console.log(typeof test);
        var test2=null;
        // null这种数据类型，本质是object，所以结果是object。
        console.log(typeof null);
        console.log(typeof test2);
        

    </script>
</body>
</html>

type_convert.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 1.1 数值转换字符串类型
        var num=100;
        console.log(num,typeof(num));
        console.log(num.toString(),typeof(num.toString()));
        // 2.2.布尔类型转字符串类型
        var isStart=false;
        console.log(isStart,typeof(isStart));
        console.log(isStart.toString(),typeof(isStart.toString()));
        // 2 转换为数值类型
        var num1="100";
        console.log(Number(num1)); 
        var num2="abc";
        //结果为NaN，表示转换失败
        console.log(Number(num2));
        console.log(Number(true));//1
        console.log(Number(false));//0
        console.log(Number(null));//0
        console.log(Number(undefined));//NaN
        // NaN属于number类型
        console.log(typeof NaN);

    </script>
</body>
</html>