JavaScript 是一门跨平台、面向对象的脚本语言。JavaScript 是用来控制网页行为的，它能使网页可交互。

一、JavaScript 引入方式（P71）

（1）内部脚本：将 JS 代码定义在 HTML 页面中

（2）外部脚本：将 JS 代码定义在外部 JS 文件中，然后引入到 HTML 页面中

1. 内部脚本

在 HTML 中， JavaScript 代码必须位于 <script> 与 </script> 标签之间

提示：

在 HTML 文档中可以在任意地方，放置任意数量的标签。

一般把脚本置于元素的底部，可改善显示速度

2. 外部脚本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script src="../js/demo.js"></script>
</body>
</html>

二、JavaScript 基础语法

1. 书写语法

（1）区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

（2）每行结尾的分号可有可无，如果一行上写多个语句时，必须加分号用来区分多个语句。

（3）注释

1️⃣ 单行注释： // 注释内容

2️⃣多行注释： /* 注释内容 */

（4）大括号表示代码块
if (count == 3) {
    alert(count);
}

2. 输出语句

（1）使用 window.alert() 写入警告框

（2）使用 document.write() 写入 HTML 输出

（3）使用 console.log() 写入浏览器控制台
<script>
    window.alert("hello js~");//写入警告框

    document.write("hello js 2~");//写入html页面

    console.log("hello js 3");//写入浏览器的控制台
</script>

3. 变量

JavaScript 中用 var 关键字（ variable 的缩写）来声明变量。

而在 JavaScript 是一门弱类型语言，变量 可以存放不同类型的值
var test = 20;
test = "张三";

js 中的变量名命名也有如下规则，和 java 语言基本都相同

（1）组成字符可以是任何字母、数字、下划线（_）或美元符号（$ ）

（2）数字不能开头

（3）建议使用驼峰命名

JavaScript 中 var 关键字有点特殊

（1）作用域：全局变量

{
    var age = 20;
}
alert(age); // 在代码块中定义的age 变量，在代码块外边还可以使用

（2）变量可以重复定义

{
    var age = 20;
    var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
}
alert(age); //打印的结果是 30

ECMAScript 6 新增了 let 关键字来定义变量。它的用法类似于 var ，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。

ECMAScript 6 新增了 const 关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

4. 数据类型

JavaScript 中提供了两类数据类型：原始类型和引用类型。

使用 typeof 运算符可以获取数据类型

原始数据类型：

（1）number：数字（整数、小数、NaN(Not a Number)）

（2）string：字符、字符串，单双引皆可

（3）boolean：布尔。true，false

（4）null：对象为空

（5）undefined：当声明的变量未初始化时，该变量的默认值是 undefined

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    // number
    // var age = 20;
    // var price = 99.8;
    // alert(typeof age);
    // alert(typeof price);

    //string
    // var ch = 'a';
    // var name = '张三';
    // var addr = "北京";
    //
    // alert(typeof ch);
    // alert(typeof name);
    // alert(typeof addr);
    //
    // //boolean
    // var flag = true;
    // var flag2 = false;
    //
    // alert(typeof flag);
    // alert(typeof flag2);
    //
    // //null
    // var obj = null;
    //
    // alert(typeof obj);//object
    //
    // //undefined
    var a ;
    alert(typeof a);

</script>

</body>
</html>

5. 运算符

一元运算符： ++ ， --

算术运算符： + ， - ， * ， / ， %

赋值运算符： = ， += ， -=…

关系运算符： > ， < ， >= ， <= ， != ， == ， ===…

逻辑运算符： && ， || ， !

三元运算符：条件表达式 ? true_value : false_value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    /*
        ==:
            1. 判断类型是否一样，如果不一样，则进行类型转换
            2. 再去比较其值

        ===:全等于
            1. 判断类型是否一样，如果不一样，直接返回false
            2. 再去比较其值

     */
    var age1 = 20;
    var age2 = "20";

    // alert(age1 == age2);// true
    // alert(age1 === age2);// false

    /*
        类型转换：
            * 其他类型转为number：
                1. string: 按照字符串的字面值，转为数字.如果字面值不是数字，则转为NaN。一般使用parseInt
                2. boolean: true 转为1，false转为0

            * 其他类型转为boolean：
                1. number:0和NaN转为false，其他的数字转为true
                2. string:空字符串转为false，其他的字符串转为true
                3. null:false
                4. undefined:false
     */
    // var str = +"20";
    /*var str = "20";
    alert(parseInt(str) + 1);*/

/*
    var flag = +false;
    alert(flag);*/

    // var flag = 3;
    // var flag = "";
 /*   var flag = undefined;

    if(flag){
        alert("转为true");
    }else {
        alert("转为false");
    }*/

    var str = "abc";

    //健壮性判断
    //if(str != null && str.length > 0){
    if(str){
        alert("转为true");
    }else {
        alert("转为false");
    }

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

6. 流程控制语句

JavaScript 中提供了和 Java 一样的流程控制语句，如下

if

switch

for

while

dowhile

7. 函数

函数（就是 Java 中的方法）是被设计为执行特定任务的代码块； JavaScript 函数通过 function 关键词进行定义。

7.1 定义函数

function 函数名(参数1,参数2..){
    要执行的代码
}

var 函数名 = function (参数列表){
    要执行的代码
}

注意：

（1）形式参数不需要类型。因为 JavaScript 是弱类型语言

（2）返回值也不需要定义类型，可以在函数内部直接使用 return 返回即可

7.2 函数调用

函数名称 ( 实际参数列表 );

（1）JS 中，函数调用可以传递任意个数参数

（2）例如 let result = add(1,2,3) ;
它是将数据 1 传递给了变量 a ，将数据 2 传递给了变量 b ，而数据 3 没有变量接收。

三、JavaScript 常用对象

JavaScript 提供了很多对象供使用者来使用。这些对象总共分为三类

（1）基本对象

（2） BOM 对象

（3） DOM对象

DOM 中的对象就比较多了，下图只是截取部分

1. Array 对象

JavaScript Array 对象用于定义数组

1.1 定义格式

方式 1： var 变量名 = new Array ( 元素列表 );
var arr = new Array(1,2,3); //1,2,3 是存储在数组中的数据（元素）
方式2： var 变量名 = [ 元素列表 ];
var arr = [1,2,3]; //1,2,3 是存储在数组中的数据（元素）

1.2 元素访问

arr [ 索引 ] = 值 ;
var a = arr2[0];

1.3 特点

JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意的类型的数据。

1.4 属性

1.5 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    // 方法：
    // push:添加方法
    var arr5 = [1,2,3];
    /* arr5.push(10);
     alert(arr5);*/

    // splice:删除元素
    arr5.splice(0,1);
    alert(arr5);

</script>

</body>
</html>

2. String 对象

方式 1： var 变量名 = new String ( s );
var str1 = new String("abc");
方式2： var 变量名 = s ;
var str2 = "abc";
var str3 = 'abc';

属性： String 对象提供了很多属性，下面给大家列举了一个属性 length ，该属性是用于动态的获取字符串的长度
alert(str3.length);

函数：String 对象提供了很多函数（方法）
var str4 = '  abc   ';

alert(1 + str4.trim() + 1);

3. 自定义对象

var 对象名称 = {
                属性名称1:属性值1,
                属性名称2:属性值2,
                ...,
                函数名称:function (形参列表){},
                ...
                };

调用属性的格式：对象名 . 属性名

调用函数的格式：对象名 . 函数名 ()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    var person = {
        name : "zhangsan",
        age : 23,
        eat: function (){
            alert("干饭~");
        }

    };

    alert(person.name);
    alert(person.age);

    person.eat();

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

四、BOM

BOM ： Browser Object Model 浏览器对象模型。也就是 JavaScript 将浏览器的各个组成部分封装为对象。

BOM 中包含了如下对象：

（1）Window ：浏览器窗口对象

（2）Navigator ：浏览器对象

（3）Screen ：屏幕对象

（4）History ：历史记录对象

（5）Location ：地址栏对象

1. Window 对象

该对象不需要创建直接使用 window ，其中 window. 可以省略。
window.alert("abc");

alert("abc");

属性：获取其他 BOM 组成对象

方法：

2. History

获取：使用 window.history 获取，其中 window. 可以省略
window.history.方法();

history.方法();

方法：

3. Location

获取：使用 window.location 获取，其中 window. 可以省略
window.location.方法();

location.方法();

属性：

五、DOM

1. 概述

DOM ： Document Object Model 文档对象模型。

也就是 JavaScript 将 HTML 文档的各个组成部分封装为对象 。

（1）Document ：整个文档对象

（2）Element ：元素对象

（3）Attribute ：属性对象

（4）Text ：文本对象

（5）Comment ：注释对象

JavaScript 通过 DOM，就能够对 HTML 进行操作了

（1）改变 HTML 元素的内容
（2）改变 HTML 元素的样式（ CSS ）

（3）对 HTML DOM 事件作出反应

（4）添加和删除 HTML 元素

DOM 相关概念：

DOM 是 W3C （万维网联盟）定义了访问 HTML 和 XML 文档的标准。该标准被分为 3 个不同的部分：

（1）核心 DOM ：针对任何结构化文档的标准模型。 XML 和 HTML 通用的标准

        Document：整个文档对象

        Element：元素对象

        Attribute：属性对象

        Text：文本对象

        Comment：注释对象

（2）XML DOM ：针对 XML 文档的标准模型

（3）HTML DOM：针对 HTML 文档的标准模型（该标准是在核心 DOM 基础上，对 HTML 中的每个标签都封装成了不同的对象）

1️⃣例如： <img> 标签在浏览器加载到内存中时会被封装成 Image 对象，同时该对象也是 Element 对象。

2️⃣ 例如： <input type='button'> 标签在浏览器加载到内存中时会被封装成 Button 对象，同时该对象也是 Element 对象。

2. 获取 Element 对象

HTML 中的 Element 对象可以通过 Document 对象获取，而 Document 对象是通过 window 对象获取。

Document 对象中提供了以下获取 Element 元素对象的函数

（1）getElementById() ：根据 id 属性值获取，返回单个 Element 对象

（2）getElementsByTagName() ：根据标签名称获取，返回 Element 对象数组

（3）getElementsByName() ：根据 name 属性值获取，返回 Element 对象数组

（4）getElementsByClassName() ：根据 class 属性值获取，返回 Element 对象数组

3. 常见 HTML Element 对象使用

查阅文档

六、事件监听

事件：HTML 事件是发生在 HTML 元素上的 “ 事情 ” 。

比如：

（1）按钮被点击

（2）鼠标移动到元素之上

（3）按下键盘按键

事件监听： JavaScript 可以在事件被侦测到时 执行一段逻辑代码。

1. 事件绑定

JavaScript 提供了两种事件绑定方式：

（1）方式一：通过 HTML 标签中的事件属性进行绑定
<input type="button" value="点我" onclick="on()">

<script>

    function on(){
        alert("我被点了");
    }
    
</script>
（2）方式二：通过 DOM 元素属性绑定
<input type="button" value="再点我" id="btn">

<script>

    document.getElementById("btn").onclick = function (){
        alert("我被点了");
    }

</script>