Day02-JavaWeb开发-JavaScript(基础语法&函数&对象&事件)&Vue

本文链接：https://blog.csdn.net/weixin_68063226/article/details/138356433

1. JS 基础语法

1.1 js 介绍

1.2 js 引入方式

<!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>
    <!-- 内部脚本 -->
    <!-- <script>
        alert('Hello JS')
    </script> -->

    <!-- 外部脚本 -->
    <script src="js/demo.js"></script>
</head>
<body>

</body>
</html>

alert('Hello JS')

1.3 js 基础语法-书写语法

<!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>
    <script>
         /* alert("JS"); */ 

         //方式一: 弹出警告框
         window.alert("hello js");

         //方式二: 写入html页面中
         document.write("hello js");

         //方式三: 控制台输出
         console.log("hello js");

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

1.4 js 基础语法-变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-基础语法</title>
</head>
<body>
    <script>

        // var定义变量
        // var a = 10;
        // a = "张三";

        // alert(a);

        // 特点1 : 作用于比较大, 全局变量
        // 特点2 : 可以重复定义的
        /* {
            var x = 1;
            var x = "A";

        }
            alert(x); */

        // let : 局部变量, 不能重复定义
        /* {
            let x = 1;
            alert(x);

        } */
        
        // const: 常量, 不能给改变的
        const pi = 3.14;
        alert(pi);

    </script>

</body>
</html>

1.5 js 基础语法- 数据类型&运算符

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据类型</title>
</head>

<body>

</body>
<script>
    //原始数据类型
    alert(typeof 3); //number
    alert(typeof 3.14); //number

    alert(typeof "A"); //String
    alert(typeof 'Hello'); //String

    alert(typeof true); //boolean
    alert(typeof false); //boolean

    alert(typeof null); //object

    var a;
    alert(typeof a); //undefined
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>运算符</title>
</head>

<body>

</body>

<script>
/*     var age = 20;
    var _age = "20";
    var $age = 20;

    alert(age == _age); //true
    alert(age === _age); //false
    alert(age === $age); //true */


    /*     // 类型转换 - 其他类型转换为数字
        alert(parseInt("12"));  //12
        alert(parseInt("12A45")); //12
        alert(parseInt("A45")); //NaN (not a number)
     */


    // // 类型转换 - 其他类型转换为boolean
    // if (0) { //false
    //     alert("0 转换为false");
    // }
    // if (NaN) { //false
    //     alert("NaN 转换为false");
    // }
    // if (1) { //true
    //     alert("除0和NaN其他数字都转为 true");
    // }

    // if(""){ //false
    //     alert("空字符串为 false, 其他都是true");
    // }

    // if(" "){ //true
    //     alert("空字符串为 false, 其他都是true")
    // }

    if(null){ //false
        alert("null 转化为false");
    }
    if(undefined){ //false
        alert("undefined 转化为false");
    }


</script>

</html>

注: 其中, === 为全等运算符.

2. JS 函数

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-函数</title>
</head>

<body>

</body>
<script>
/*     //定义函数-1
    function add(a, b) {
        return a + b;
    } */

    //定义函数-2
    var add = function (a, b) {
        return a + b;
    }

    //函数调用
    var result = add(10, 20);
    alert(result);  // 30

    var result2 = add(10, 20, 30, 40);
    alert(result2); // 30 ,调用时可以传递任意个数的参数, 只接受前两个参数
</script>

</html>

3. JS 对象

3.1 JS 对象-Array数组对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>对象-Array</title>
</head>

<body>

</body>
<script>
    //定义数据
    //var arr = new Array(1,2,3,4); //方式一
    // var arr = [1,2,3,4,]; //方式二

    // console.log(arr[0]);
    // console.log(arr[1]);

    //特点: 长度可变, 类型可变(类似于Java当中的集合)
    // var arr = [1,2,3,4,];
    // arr[10] = 50;

    // // 长度可变
    // console.log(arr[10]);
    // console.log(arr[9]);
    // console.log(arr[8]);

    // // 类型可变
    // arr[9] = "A";
    // arr[8] =  true;

    // console.log(arr);


    var arr = [1, 2, 3, 4];
    arr[10] = 50;
    //for循环: 遍历数组中所有的元素
    // for (let i = 0; i < arr.length; i++) {
    //     console.log(arr[i]);
    // }

    // console.log("=================================");


    //forEach: 遍历数组中有值的元素
    // arr.forEach(function(e){
    //     console.log(e);
    // })

    // //ES6 箭头函数: (...) => {...} -- 简化函数定义
    // arr.forEach((e) => {
    //     console.log(e);
    // })

    //push: 添加元素到数组的末尾
    // arr.push(7,8,9);
    // console.log(arr);

    //splice: 删除元素
    arr.splice(2,2);  // 从第三个位置开始删, 连删两个
    console.log(arr);


</script>

</html>

3.2 JS 对象-String字符串

substring: 简单来说就是根据两个指定的索引位置来截取字符串.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-String</title>
</head>
<body>
    
</body>
<script>
    //创建字符串对象
    // var str = new String("Hello String");
    var str = "  Hello String   ";

    console.log(str);

    //length
    console.log(str.length);

    //charAt
    console.log(str.charAt(6));

    //indexOf
    console.log(str.indexOf("lo"));

    //trim: 去除字符串两边的空格
    var s = str.trim()
    console.log(s);

    //substring(start,end) --- 开始索引, 结束索引 (同java汉头不含尾)
    console.log(s.substring(0,4));


</script>
</html>

3.3 JS 对象-Json

JSON-介绍

上面为对象, 下面的 "属性名" : "属性值"为JSON文本.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-JSON</title>
</head>
<body>
    
</body>
<script>
    //自定义对象
/*     var user = {
        name: "Tom",
        age: 10,
        gender: "male",
        // eat: function(){
        //     alert("用膳~");
        // }

        //简化书写方式
        eat(){  
            alert("用膳~");
        }
    }

    alert(user.name);
    user.eat(); */


    //定义json
    var jsonstr = '{"name":"Tom", "age":18, "addr":["北京","上海","西安"]}';
    alert(jsonstr.name);

    //json字符串 --> js对象
    var obj = JSON.parse(jsonstr);
    alert(obj.name);

    //js对象 --> json字符串
    alert(JSON.stringify(obj));

</script>
</html>

3.4 JS 对象-BOM

对于Java程序员, 只需要知道Window和Location这两个对象即可.

3.4.1 Window对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-BOM</title>
</head>

<body>

</body>
<script>
    //获取
    // window.alert("Hello BOM");
    // alert("Hello BOM Window");

    //方法
    //confirm - 对话框 --确认: true, 取消: false.
    // var flag = confirm("您确认删除该记录吗?");
    // alert(flag);

    //定时器 setInterval -- 周期性的执行某一个函数
    //     var i = 0;    
    // setInterval(function () {
    //     i++;
    //     console.log("定时器执行了" + i + "次");
    // }, 2000)  //每2000ms执行一次

    //定时器 - setTimeout -- 延迟指定时间执行一次函数
    setTimeout(function(){
        alert("JS");
    },3000);
</script>

</html>

3.4.2 Location对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-BOM</title>
</head>

<body>

</body>
<script>
    //获取
    // window.alert("Hello BOM");
    // alert("Hello BOM Window");

    //方法
    //confirm - 对话框 --确认: true, 取消: false.
    // var flag = confirm("您确认删除该记录吗?");
    // alert(flag);

    //定时器 setInterval -- 周期性的执行某一个函数
    //     var i = 0;    
    // setInterval(function () {
    //     i++;
    //     console.log("定时器执行了" + i + "次");
    // }, 2000)  //每2000ms执行一次

    //定时器 - setTimeout -- 延迟指定时间执行一次函数
    // setTimeout(function(){
    //     alert("JS");
    // },3000);




    //location
    alert(location.href);

    location.href = "https://www.itcast.cn"; //无需点击,自动跳转到指定链接网址

</script>

</html>

3.5 JS 对象-DOM

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-对象-DOM</title>
</head>

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

    <div class="cls">传智教育</div> <br>
    <div class="cls">黑马程序员</div> <br>

    <!-- 定义复选框 -->
    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏

</body>
<script>
    //1. 获取Element元素
    //1.1 获取元素-根据ID获取
    // var img = document.getElementById('light');
    // alert(img);

    //1.2 获取元素-根据标签获取 - div
    // var divs = document.getElementsByTagName('div')
    // for (let i = 0; i < divs.length; i++) {
    //     alert(divs[i]);        
    // }

    //1.3 获取元素-根据name属性获取
    // var ins = document.getElementsByName('hobby');
    // for (let i = 0; i < ins.length; i++) {
    //     alert(ins[i]);        
    // }

    //1.4 获取元素-根据class属性获取
    // var divs = document.getElementsByClassName('cls');
    // for (let i = 0; i < divs.length; i++) {
    //     alert(divs[i]);        
    // }



    //2. 查询参考手册, 属性、方法
    var divs = document.getElementsByClassName('cls');
    var div1 = divs[0];

    div1.innerHTML = "传智教育666";


</script>

</html>

3.6 JS 对象-DOM案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="light" src="img/off.gif"> <br>

    <div class="cls">传智教育</div>   <br>
    <div class="cls">黑马程序员</div> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>
    <script>
        //1. 点亮灯泡
        var img = document.getElementById('light');
        img.src = "img/on.gif";

        //2. 将所有的 div 标签的标签体内容后面加上: 非常好(very good), 红色字体 -- <font color='red'></font>
        var divs = document.getElementsByTagName('div');
        for (let i = 0; i < divs.length; i++) {
            const div = divs[i];
            div.innerHTML += "<font color='red'>very good</font>";             
        }


        //3. 使所有的复选框呈现被选中的状态
        var ins = document.getElementsByName('hobby');
        for (let i = 0; i < ins.length; i++) {
            const check = ins[i];
            check.checked = true;//选中
        }


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

3.7 JS 事件-事件绑定&常见事件

3.7.1 事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-事件-事件绑定</title>
</head>
<body>
    <input type="button" id="btn1" value="事件绑定1" onclick="on()">
    <input type="button" id="btn2" value="事件绑定2">    
</body>

<script>
    function on(){
        alert("按钮1被点击了...");
    }

    document.getElementById('btn2').onclick = function(){
        alert("按钮2被点击了...");
    }
</script>
</html>

3.7.2 常见事件

3.7.3 JS -事件-案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>事件-案例</title>
</head>

<body>
    <img id="light" src="img/off.gif"> <br>
    <input type="button" value="点亮" onclick="on()">
    <input type="button" value="熄灭" onclick="off()">

    <br> <br>

    <input type="text" id="name" value="ITCAST" onfocus="lower()" onblur="upper()">
    <br> <br>

    <input type="checkbox" name="hobby"> 电影
    <input type="checkbox" name="hobby"> 旅游
    <input type="checkbox" name="hobby"> 游戏
    <br>

    <input type="button" value="全选" onclick="checkAll()">
    <input type="button" value="反选" onclick="reverse()">

    <script>
        //1. 点击 "点亮" 按钮, 点亮灯泡; 点击 "熄灭" 按钮, 熄灭灯泡; -- onclick事件
        function on() {
            //a. 获取img元素对象
            var img = document.getElementById("light");

            //b. 设置src属性
            img.src = "img/on.gif";

        }

        function off() {
            //a. 获取img元素对象
            var img = document.getElementById("light");

            //b. 设置src属性
            img.src = "img/off.gif";

        }


        //2. 输入框聚焦后, 展示小写; 输入框离焦后, 展示大写; -- onfocus, onblur
        function lower(){//小写
            //a. 获取输入框元素对象
            var input = document.getElementById('name')

            //b. 将值转为小写
            input.value = input.value.toLowerCase();
        }

        function upper(){//大写
            //a. 获取输入框元素对象
            var input = document.getElementById('name')

            //b. 将值转为小写
            input.value = input.value.toUpperCase();
        }

        //3. 点击 "全选" 按钮使所有的复选框呈现选中状态; 点击 "反选" 按钮使所有的复选框呈现取消勾选的状态;
        function checkAll(){
            //a. 获取所有复选框的元素对象
            var hobbys = document.getElementsByName("hobby");

            //b. 设置选中状态
            for (let i = 0; i < hobbys.length; i++) {
                const element = hobbys[i];
                element.checked = true;
                
            }
        }

        function reverse(){
            //a. 获取所有复选框的元素对象
            var hobbys = document.getElementsByName("hobby");

            //b. 设置未选中状态
            for (let i = 0; i < hobbys.length; i++) {
                const element = hobbys[i];
                element.checked = false;
                
            }
        }



    </script>
</body>

</html>

4. 前端框架-Vue

4.1 Vue-概述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-快速入门</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <!-- 视图层的数据变化会影响数据模型, 数据模型的数据变化又会影响视图层的展示 -->
    <div id="app">
        <!-- 绑定数据模型, v-model为数据绑定模型 -->
        <input type="text" v-model="message"> 

        <!-- 表示要将数据模型展示出来 -->
        {{message}}
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el:"#app", //Vue接管区域 - id
        data:{//数据模型
            message: "Hello Vue"
        }
    })
</script>
</html>

4.2 Vue指令-(v-bind&v-model&v-on)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-bind和v-model</title>
    <script src="js/vue.js"></script>
</head>
<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>
    //定义Vue对象
    new Vue({
        el:"#app", //Vue接管区域 - id
        data:{//数据模型
            url:"https://www.baidu.com"
        }
    })
</script>
</html>

Vue-v-on指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-on</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">

        <input type="button" value="点我一下" v-on:click="handle()">
        <!-- 另一种写法 -->
        <input type="button" value="点我一下" @click="handle()">
    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el:"#app", //Vue接管区域 - id
        data:{//数据模型

        },
        methods: {
            handle:function(){
                alert("你点我了一下")
            }
        },
    })
</script>
</html>

4.3 Vue-指令-(v-if&v-show&v-for)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-if和v-show</title>
    <script src="js/vue.js"></script>
</head>

<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="age >= 60">老年人(60及以上)</span>

    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //Vue接管区域 - id
        data: { //数据模型
            age: 20
        },
        methods: {

        },
    })
</script>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-指令-v-for</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">

        <div v-for="addr in addrs">{{addr}}</div>

        <hr>

        <div v-for="addr, index) in addrs">{{index+1}}:{{addr}}</div>


    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //Vue接管区域 - id
        data: { //数据模型
            addrs:["北京","上海","西安","成都","深圳"]
        },
        methods: {

        },
    })
</script>
</html>

4.4 Vue-指令-案例

<!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>Vue-指令-案例</title>
    <script src="js/vue.js"></script>
</head>
<body>
    
    <div id="app">
        
        <table border="1" cellspacing="0" width="60%">
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
                <th>性别</th>
                <th>成绩</th>
                <th>等级</th>
            </tr>
            <tr align="center" v-for="(user, index) in users">
                <td>{{index + 1}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
                <td><span v-if="user.gender==1">男</span>
                    <span v-if="user.gender==2">女</span></td>
                <td>{{user.score}}</td>
                <td>
                    <span v-if="user.score >= 85">优秀</span>
                    <span v-else-if="user.score >=60">及格</span>
                    <span style="color: red;" v-else>不及格</span>
                </td>
            </tr>
        </table>

    </div>

</body>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el: "#app",
        data: {
            users: [{
                name: "Tom",
                age: 20,
                gender: 1,
                score: 78
            },{
                name: "Rose",
                age: 18,
                gender: 2,
                score: 86
            },{
                name: "Jerry",
                age: 26,
                gender: 1,
                score: 90
            },{
                name: "Tony",
                age: 30,
                gender: 1,
                score: 52
            }]
        },
        methods: {
            
        },
    })
</script>
</html>

4.5 Vue-生命周期

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue-生命周期</title>
    <script src="js/vue.js"></script>
</head>

<body>
    <div id="app">



    </div>

</body>
<script>
    //定义Vue对象
    new Vue({
        el: "#app", //Vue接管区域 - id
        data: { //数据模型

        },
        methods: {

        },
        mounted() {
            alert("vue挂载完成, 发送请求到服务器")
        },

    })
</script>

</html>