1.JS引入方式

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

  • JavaScript代码必须位于script标签之间
  • 在HTML文档中，可以在任何地方，放置任意数量的script
  • 一般会吧脚本置于body元素的底部，可改善显示速度

  <script>
      alert("Hello JS");
  </script>
  

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

  • 外部JS文件中，只包含JS代码，不包含script标签
  • 该script标签不能自闭和

    <script src='js文件路径.js'></script>
    

2.JS基础语法

2.1、书写语法

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

• 每行结尾分号可有可无【但建议写】

• 注释

  • 与Java一致

• 大括号表示代码块

  if(count == 3){
      alert(count);
  }
  

• 输出语句

  • window.alert()写入警告框
  • document.write()写入HTML输出
  • console.log()写入浏览器控制台

  <script>
      window.alert("Hello");//浏览器弹出警告框
      document.write("Hello");//写入HTML
      console.log("Hello");//写入浏览器控制台
  </script>
  

2.2、变量

• 变量
  • JavaScript 中用 var 关键字来声明变量
    • 全局变量
    • 可重复定义
  • JavaScript 是一门弱类型语言，变量可以存放不同类型的值
  • 变量名需要遵循规则：
    • 组成字符可以是任何字母、数字、下划线、$
    • 数字不能开头
    • 建议驼峰命名
• 注意事项
  • let 关键字来定义变量，它的用法类似于var,但所声明变量只能在关键字所在的代码块内容使用，且不允许重复声明
  • const关键字来定义常量

<script>
        //var 变量
        //特点：作用域比较大，全局变量，且可以重复定义
        var a = "浩楠";
        alert(a);
        //let变量:局部变量，不能重复定义
        {
            let x = 1;
            alert(x);
        }
        //const常量：不能改变值
        const p = 3.14;
    </script>

2.3、数据类型、运算符、流程控制语句

• 数据类型：原始类型和引用类型

  • number:数字（整数、小数、NaN）
  • string:字符串，单双引都可
  • boolean:布尔
  • null：对象为空
  • undefined：当声明的变量未初始化时，默认值

• 使用typeof可以获取数据类型

  <script>
          alert(typeof 1);//number
          alert(typeof 1.1);//number
  
          alert(typeof "Hello");//string
          alert(typeof 'Hello');//string
  
          alert(typeof true);//boolean
          alert(typeof false);//boolean
  
          alert(typeof null)//object
  
          var a;
          alert(typeof a);//undifined
      </script>
  

• 运算符：于Java一致 【不同在 == 与 ===】

  • ==：会进行类型转换，再比较内容
  • ===：不会进行类型转换

• 转换类型

  • 字符串类型转为数字
    • 如果字面值不是数字，则转为NaN
  • 其他类型转boolean
    • Number：0 和 NaN 都为false，其他为true
    • String：空字符串为false，其他为true
    • Null 和 undefined为false，其它为true
• 流程控制语句
  • 与Java一致

<script>
        alert(20=="20");//true
        alert(20==="20");//false
        alert(20===20);//true;

        //类型转换   将其他类型转为boolean
        if(0){
            alert("0转换为false");
        }
        if(NaN){
            alert("NaN转换为false");
        }
        if(1){
            alert("其它的均为true");
        }
        if(""){
            alert("除了空字符串其他都是true");
        }
        if(null){
            alert("null转换为false");
        }
        if(undefined){
            alert("undefined转换为false");
        }
    </script>

3.JS函数

• 介绍

  • 函数（方法）是被设计为执行特定任务的代码块

• 定义

  • 函数通过 function 关键字进行定义

  function functionName(参数1,参数2..){
      //代码块
  }
  //方式二
  var add = function(a,b){
      return a+b;
  }
  

  • Js中，函数调用可以传递任意个数的参数

• 注意

  • 形式参数不需要类型，因为JavaScript是弱类型语言
  • 返回值也不需要定义，可以在函数内部直接使用return返回即可

• 调用

  • 函数名称(实参);

<script>
    //定义函数方式一：
    function add(a,b){
        return a+b;
    }
    alert(add(10,30));
    //定义函数方式二：
    var mutiply = function (a,b){
        return a*b;
    }
    alert(mutiply(10,10));
</script>

4.JS对象

4.1、Array

• JavaScript 中 Array对象用于定义数组

• 定义

  • //方式一
    var arr = new Array(1,2,3,4);
    //方式二：
    var arr = [1,2,3,4];
    

• 访问

  • alert(arr[2]);
    arr[10] = "hello";
    

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

• 属性

• 方法

    <script>
        //定义数组
         /*
        var arr = new Array(1,2,3,4,5);
        var arr = [1,2,3,4,5];

        console.log(arr[2]);
         */

        //特点：长度可变，类型可变
        /* var arr = [1,2,3,4,5];
        arr[10] = 50;
        alert(arr[10]);

        arr[9] = true;
        arr[8] = "次";
        console.log(arr); */

        //length属性
        var arr = [1,2,3,4];
        arr[10] = 50;
        //for循环会输出所有的内容包括undefined
        for(let i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }

        //forEach：遍历（只遍历有值的）
        arr.forEach(function(e){
            console.log(e);
        })

        //ES6：简化forEach
        arr.forEach(e => {
            console.log(e);
        })

        console.log("--------------------")
        //push：在数组后面添加值
        arr.push(5,6,7);
        console.log(arr);

        //splice:删除内容   （从哪里开始，删除几个）
        arr.splice(2,2);
        console.log(arr);
    </script>

4.2、String

• String字符串对象创建

  //方式一
  var str = new String("Hello String");
  //方式二
  var str = "Hello String";
  

• 属性

• 方法

<script>
        //创建字符串
        //var str = new String("Hello Js");
        var str = "  Hello Js  ";

        //length
        console.log(str.length);
        //charAt
        console.log(str.charAt(3));
        //indexOf
        console.log(str.indexOf("l"));
        //trim
        var s = str.trim();
        console.log(s);
        //substring：与Java一致，包前不包后
        console.log(s.substring(0,5));
    </script>

4.3、JSON

• 自定义对象格式

  var user = {
      name:"浩楠",
      age:22,
      eat:function(){
          alert("干饭");
      }
  }
  

• 调用格式

  console.log(user.name);
  user.eat();
  

• Json介绍

  • Json 是通过 JavaScript对象标记法书写的文本

  {
      "name":"浩楠",
      "age":22,
  }
  

• JSON-基础语法

  var userStr = '{"name":"浩楠","age":22,"address":["北京","上海","洛阳"]}'
  

• JSON字符串转为JS对象

  var obj = JSON.parse(userStr);
  

• JS对象转为JSON字符串

  var jsonStr = JSON.stringify(obj);
  

<script>
        //创建自定义对象
        var user = {
            name:"浩楠",
            age:22,
            /* eat:function(){
                alert("干饭");
            } */
            eat(){
                alert("干饭");
            }
        }
        console.log(user.name);
        user.eat();

        //定义json
        var jsonStr = '{"name":"浩楠","age":22,"address":["北京","上海","洛阳"]}';
        alert(jsonStr.name);
        //json字符串——js对象
        var obj = JSON.parse(jsonStr);
        alert(obj.name);
        //js对象——json字符串
        var str = JSON.stringify(obj);
        alert(str);
    </script>

4.4、BOM

• 概念

  • Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象

• window

  • 浏览器窗口对象
  • 直接使用window获取

  window.alert("Hello");
  

  • 属性
    • history：对 History 对象的只读引用
    • location：用于窗口或框架的Location对象
    • navigator：对 Navigator对象的只读引用
  • 方法
    • alert()：警告框
    • confirm()：显示带有一段信息以及确认按钮和取消按钮的对话框
    • setInterval()：按照指定的周期来调用或计算表达式（毫秒）
    • setTimeout()：指定毫秒数后只执行或计算表达式

• location

  • 介绍：地址栏对象
  • 获取：使用window.location获取
  • 属性：href（设置或返回完整的当前页面URL）

<script>
        //获取window
        window.alert("I am window");
        //方法 confirm
        var isTrue = window.confirm("您确定要删除吗？");
        alert(isTrue);
        //定时器：setInterval  周期性执行某一个函数
        var i = 0;
        window.setInterval(function(){
            i++;
            console.log("定时器：执行第"+i+"次");
        },2000)
        //定时器：setTimeout    延迟一定时间后执行某一个函数
        window.setTimeout(function(){
            alert("setTimeout");
        },3000);

        //location.href:当前的路径，也可以修改
        alert(window.location.href);
        window.location.href = "https://www.baidu.com";
    </script>

4.5、DOM

• 概念
  • Document Object Model，文档对象模型

• 将标记语言的各个组成部分封装为对应的对象

  • document：整个文档对象
  • element：元素对象
  • attribute：属性对象
  • text：文本对象
  • comment：注释对象

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

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

  • 根据ID属性值获取，返回单个Element对象

  var h1 = document.getElementById("h1");
  

  • 根据标签名称获取，返回Element对象数组

  var divs = document.getElementsByTagName("div");
  

  • 根据name属性值获取，返回Element对象数组

  var hobbies = document.getElementsByName("hobby");
  

  • 根据class属性值获取，返回Element对象数组

  var clss = document.getElementsByClassName("cls");
  

<body>
    <img id="i" src="./yan.jpg"/>

    <div class="cls">洛阳理工</div>
    <div class="cls">濮院520</div>

    <input type="checkbox" name="hobby"/>电影
    <input type="checkbox" name="hobby"/>旅游
    <input type="checkbox" name="hobby"/>美食
</body>
    <script>
        //获取Element元素
        //1.根据ID获取
        var img = document.getElementById("i");
        alert(img);
        //2.根据标签获取
        var ds = document.getElementsByTagName("div");
        for (let i = 0; i < ds.length; i++) {
            alert(ds[i]);
        }
        //3.根据name属性获取
        var hobbies = document.getElementsByName("hobby");
        for (let i = 0; i < hobbies.length; i++) {
            alert(hobbies[i]);
        }
        //4.根据class属性获取
        var cls = document.getElementsByClassName("cls");
        //通过属性来修改内容
        ds[0].innerHTML = "洛阳理工学院"
    </script>

4.6、案例

• 需求
  • 点亮灯泡
  • 将所有div标签的标签体内容后面加上：红色字体very good
  • 使所有的复选框呈现被选中的状态

<body>
    <img id="i" src="./off.gif"/>

    <div class="cls">洛阳理工</div>
    <div class="cls">濮院520</div>

    <input type="checkbox" name="hobby"/>电影
    <input type="checkbox" name="hobby"/>旅游
    <input type="checkbox" name="hobby" />美食
</body>
    <script>
        //1.点亮  src属性
        var light = document.getElementById("i");
        light.src = "./on.gif";
        //2.将所有div标签后面加上红色very Good    利用<font color='red'>内容</font>标签
        var ds = document.getElementsByTagName("div");
        for (let i = 0; i < ds.length; i++) {
            ds[i].innerHTML += "<font color='red'>very Good</font>";
        }
        //所有复选框为选中状态
        var cs = document.getElementsByName("hobby");
        for (let i = 0; i < cs.length; i++) {
            cs[i].checked = true;
        }
    </script>

5.JS事件监听

• 事件：HTML事件是发生在HTML元素上的“事情”
  • 按钮被点击
  • 鼠标移动到元素上
  • 按下键盘按键
• 事件监听：JavaScript可以在事件被侦测到时，执行相应的代码

5.1、事件绑定

• 方式一：通过HTML标签中的时间属性进行绑定

<input type="button" onclick="on()" value="按钮"/>
<script>
    function on(){
        alert("点击");
    }
</script>

• 方式二：通过 DOM 元素属性绑定

<input type="button" id="btn" value="按钮"/>
<script>
    document.getElementById("btn").onclick = function(){
        alert("点击");
    }
</script>

5.2、常见事件

<body onload="lod()">
    <form action="" style="text-align:center;">
        <input type="text" name="userName" onfocus="f()" onblur="b()" onkeydown="key()"/>
        <input id="sub" type="submit" value="提交" onsubmit="sub()" />
        <input id="bt" type="button" value="单击事件" onclick="c()"/>
    </form>
    <br/><br><br>
    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="mouseOver()" onmouseout="mouseOut()">
        <tr>
            <th>学号</th>
            <th>姓名</th>
            <th>分数</th>
            <th>评语</th>
        </tr>
        <tr align="center">
            <td>001</td>
            <td>张三</td>
            <td>90</td>
            <td>很优秀</td>
        </tr>
        <tr align="center">
            <td>002</td>
            <td>李四</td>
            <td>92</td>
            <td>优秀</td>
        </tr>
    </table>
</body>
    <script>
        //onload：页面加载事件
        function lod(){
            console.log("页面加载事件");
        }
        //onclick：鼠标点击事件
        function c(){
            console.log("点击事件");
        }
        //onblur：失去焦点事件
        function b(){
            console.log("失去了焦点");
        }
        //onfocus：获取焦点事件
        function f(){
            console.log("获取焦点");
        }
        //onkeydown：键盘的某个键被按下
        function key(){
            console.log("键盘被按下");
        }
        //onmouseover：鼠标移动到元素上
        function mouseOver(){
            console.log("鼠标移动元素上了");
        }
        //onmouseout：鼠标移出某元素
        function mouseOut(){
            console.log("鼠标移出元素");
        }
        //onsubmit：提交表单事件
        function sub(){
            alert("表单提交");
        }
    </script>

5.3、案例

• 需求
  • 点击“点亮”按钮，点亮灯泡。点击“熄灭”按钮，熄灭灯泡
  • 输入框鼠标聚焦后，展示小写，鼠标离焦后，展示大写
  • 点击“全选”按钮使所有的复选框呈现被选中的状态，点击“反选”按钮使所有的复选框呈现取消勾选的状态

<body>
    <img src="on.gif" id="light"/>
    <input type="button" id="onLight" value="点亮"/>
    <input type="button" id="offLight" value="熄灭"/>
    <br>
    <input type="text" id="content" value="PLEASE GIVE ME MONEY"/>
    <br>
    <input type="checkbox" name="hobby"/>电影
    <input type="checkbox" name="hobby"/>旅游
    <input type="checkbox" name="hobby"/>游戏
    <br/>
    <input type="button" id="allChecked" value="全选"/>
    <input type="button" id="reverseChecked" value="反选"/>
</body>
    <script>
        var img = document.getElementById("light");
        //点亮
        document.getElementById("onLight").onclick = function(){
            img.src = "./on.gif";
        }
        //熄灭
        document.getElementById("offLight").onclick = function(){
            img.src = "./off.gif";
        }
        var str = document.getElementById("content");
        str.onfocus = function(){
            str.value = str.value.toLowerCase();
        }
        str.onblur = function(){
            str.value = str.value.toUpperCase();
        }

        var hobbies = document.getElementsByName("hobby");
        //全选
        document.getElementById("allChecked").onclick = function(){
            for(let i=0;i<hobbies.length;i++){
                hobbies[i].checked = true;
            }
        }
        //复选
        document.getElementById("reverseChecked").onclick = function(){
            for(let i=0;i<hobbies.length;i++){
                if(hobbies[i].checked){
                    hobbies[i].checked = false;
                }else{
                    hobbies[i].checked = true;
                }
            }
        }

    </script>

6.Vue

• 概述

  • Vue 是一套前端框架，免除原生 JavaScript中DOM操作，简化书写
  • 基于MVVM(Model-View-ViewModel)思想，实现数据的双向绑定，将编程的关注点放在数据上
  • 官网：https://v2.cn.vuejs.org/

• 快速入门

  • 新建HTML页面，引入Vue.js文件

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

  • 在JS代码区域，创建Vue核心对象，定义数据模型

  new Vue({
      el:"#app",//Vue接管区域
      data:{
          message:"Hello Vue"
      }
  })
  

  • 编写视图

  ```html

  <div id="app">
      <input type="text" v-model="message"/>
  

  </div>

</body>

- 插值表

  - 形式：
  - 内容可以是：变量、三元运算符、函数调用、算术运算

## 6.1、Vue常用指令

- 指令：HTML标签上带有 v- 前缀的特殊属性，不同指令含有不同的含义
- 常用指令

![image-20230810221838593.png](images/image-20230810221838593.png)

- v-bind 和 v-model

```html
<body>
    <div id="app">
        <a v-bind:href="url">链接1</a>
        <a :href="url">链接2</a>
        <input type="text" v-model="url"/>
    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data:{
                url:"https://www.baidu.com"
            }
        })
    </script>

注意：通过v-bind或者v-model绑定的变量，必须在数据模型中声明

• v-on

<body>
    <div id="app">
        <input type="button" v-on:click="handle()" value="单击事件">
        <input type="button" @click="handle()" value="简化单机事件">
    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data:{

            },
            methods:{
                handle:function(){
                    alert("单机事件");
                }
            }
        })
    </script>

• v-if、v-else-if、v-else、v-show

<body>
    <div id="app">
        <input type="text" v-model="age">经判定，为：
        <span v-if="age < 35">年轻人（35以下）</span>
        <span v-else-if="age>35 && age<60">中年人（35-60）</span>
        <span v-else>老年人（60及以上）</span>
        <br><br>
        <input type="text" v-model="age">经判定，为：
        <span v-show="age < 35">年轻人（35以下）</span>
        <span v-show="age>35 && age<60">中年人（35-60）</span>
        <span v-show>老年人（60及以上）</span>
    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data:{
                age:20
            }
        })
    </script>

区别在于，效果一致，但v-show是通过display的属性来隐藏或显示该标签

• v-for

<body>
    <div id="app">
        <div v-for="address in addresses"></div>
        <hr>
        <div v-for="(address,index) in addresses">:</div>
    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data:{
                addresses:["上海","北京","广州","洛阳"]
            }
        })
    </script>

6.2、指令案例

• 需求

<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>
    <style>
        td{
            text-align:center
        }
    </style>
<script src="./vue.js"></script>
<body>
    <table id="app" align="center" width="800px" height="300px" border="1" cellspacing="0">
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>性别</th>
            <th>成绩</th>
            <th>等级</th>
        </tr>
        <tr v-for="(user,index) in users">
            <td></td>
            <td></td>
            <td></td>
            <td>
                <span v-if="user.sex == 1">男</span>
                <span v-else>女</span>
            </td>
            <td></td>
            <td>
                <span v-if="user.score >= 85">优秀</span>
                <span v-else-if="user.score >= 65 && user.score <85">及格</span>
                <span  v-else style="color:red">不及格</span>
            </td>
        </tr>
    </table>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            users:[
                {
                    name:"马浩楠",
                    age:22,
                    sex:1,
                    score:78
                },
                {
                    name:"程明辉",
                    age:22,
                    sex:2,
                    score:86
                },
                {
                    name:"吴赛",
                    age:22,
                    sex:2,
                    score:90
                },
                {
                    name:"李泽",
                    age:22,
                    sex:2,
                    score:52
                }
            ]
        }
    })
</script>
</html>

6.3、Vue生命周期

• 生命周期
  • 指一个对象从创建到销毁的整个过程
• 生命周期八个阶段
  • 每触发一个声明周期事件，会自动执行一个声明周期方法（钩子）

• mounted：挂在完成，Vue初始化成功，HTML页面渲染成功（通常用来发送请求到服务端，加载数据）

<body>
    <div id="app">

    </div>
</body>
    <script>
        new Vue({
            el:"#app",
            data:{

            },
            methods:{

            },
            mounted(){
                alert("Vue挂载完毕，发送请求获取数据");
            }
        })
    </script>