负责网页的行为（交互效果）

两种引入方式，一种内部脚本，另一种外部文件

alert(a)；  弹出框

console.log(PI); 输出到浏览器控制台

document.write(); 向HTML的body输出内容

数据类型

特殊情况

alert(typeof null);  类型为object

let a;

alert(typeof a); 类型为undefined

使用反引号，模板字符串 --简化字符串拼接

函数多种表达式

自定义对象 

箭头函数中this 不指向当前对象，而是指向当前对象的父级（这个例子中指向windows）

json  js对象标记法

可以看到类的属性

语法特点：所有的key，必须使用“ ”，值为字符串也要“ ”

作为数据载体在网络中数据传输

例子

<script>

       let person = {

        name:'itcast',

        age:18,

        gender:'男'

       }

       alert(person);  // 返回object Object 不行

       alert(JSON.stringify(person)); //返回字符串

       let personJson = '{"name":"heima","age":20}'  //这是字符串

       alert(JSON.parse(personJson)); //返回对象  

    </script>

总结

DOM 文档对象模型

讲HTMR文档中，所有的元素都分装成js对象

采用面向对象的方式操作这个页面中所有的元素

例子1

<h1 id="title1">1111111</h1>

     <h1>2222222</h1>

        <h1>3333333</h1>

    <script>

        //1.修改第一个h1标签的文本内容

        //1.1获取dom对象

        let h1 = document.querySelector('#title1');   //修改1111

       

        //1.2调用DOM对象中属性或方法

        h1.innerHTML = '修改文本内容';

    </script>

例子2

<h1 id="title1">1111111</h1>

     <h1>2222222</h1>

        <h1>3333333</h1>

    <script>

        //1.修改第一个h1标签的文本内容

        //1.1获取dom对象

        let hs = document.querySelectorAll('h1');

       

        //1.2调用DOM对象中属性或方法

        hs[0].innerHTML = '修改文本内容';

    </script>

事件监听 解释
例子

document.querySelector('#btn1').addEventListener('click', () =>{

            console.log('试试就试试');

        });

        document.querySelector('#btn1').addEventListener('click', () =>{

            console.log('试试就试试22');

        });

        document.querySelector('#btn2').onclick =() =>{

            console.log('试试就试试');

        }

        document.querySelector('#btn2').onclick =() =>{

            console.log('试试就试试22');

        }

上面的那个是叠加输出，可以输出多个事件。下面是覆盖，只会输出22那个事件

鼠标移入移出，隔行换色的效果

mouseenter   mouseleave

操作类似，具体例子如下

事件监听-常见事件（优化-JS模块化）

上面代码复用性较差，难以维护

先把它装入单独json文件，用src调虚拟路径使用

高级js用法，讲js模块化，需要type，定义

consolg避免函数重复运行调用（将可重复型逻辑抽取到独立文件），再写一个json配置文件，并且用import，export调用