JavaWeb---------JS

历史记录

清除记录

猜你想搜

AcWing热点
App
登录/注册

JavaWeb---------JS

作者：

Agoni7z , 2024-05-11 20:57:48 , 所有人可见 , 阅读 20

2

1

JS的介绍

什么是JavaScript?
JavaScript:
Javascript(简称:JS) 是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互.
JavaScript和Java 是完全不同的语言，不论是概念还是设计。但是基础语法类似。
JavaScript在1995年由 Brendan Eich 发明，并于1997 年成为 ECMA标准
ECMAScript 6(ES6)是最新的JavaScript版本(发布于2015年)。

JS的两种引入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 内部脚本 -->
<!--     <script>
        alert('Hello JS！');
    </script> -->

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

</body>
</html>

JS的三种输出语句

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        /* alert("JS"); */

        // 方式一：弹出警告框
        window.alert("Hello JS");

        // 方式二：写入html页面中
        document.write("Hello JS");

        // 方式三：控制台数据
        console.log("Hello JS");
    </script>
</body>
</html>

JS中的常量定义方式

一：var关键字

二：let关键字

三：const关键字

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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);
        } */
        // alert(x); // 拿不到x的值

        //const：常量，不能改变的
        const pi = 3.14;
        pi = 3.15;
        alert(pi);
    </script>
</body>
</html>

JS的数据类型

// 原始数据类型
        alter(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

JS的算数运算符(“===”)

JS的类型转换

       // 类型转换 - 其他类型转为数字
        alter(parseInt("12")); // 12
        alert(parseInt("12A45")); // 12
        alert(parseInt("A45")); // NaN（Not a Number）

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

        if (" ") { // false
            alter("空字符串为 false，其他都是true");
        }
        if (null) { // false 
            alert("null 转化为false");
        }
        if (undefined) {
            alert("undefined 转化为false");
        }

JS的流程控制语句

JS的流程控制语句和Java的用法一致就不过多描述了

上述完整代码实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
       /*  var age = 20;
        var _age = "20";
        var $age = 20;

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

        // 类型转换 - 其他类型转为数字
        alter(parseInt("12")); // 12
        alert(parseInt("12A45")); // 12
        alert(parseInt("A45")); // NaN（Not a Number）

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

        if (" ") { // false
            alter("空字符串为 false，其他都是true");
        }
        if (null) { // false 
            alert("null 转化为false");
        }
        if (undefined) {
            alert("undefined 转化为false");
        }

        // 原始数据类型
        alter(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>
</body>
</html>

JS----函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 定义函数 -1
       /*  function add(a, b) {
            return a + b;
        } */


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

        // 函数调用
        var result = add(10, 20, 30 , 40);
        alert(result);
    </script>
</body>
</html>

JS----数组和箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 定义数组
        // var arr = new Array(1, 2, 3, 4);
        /* var arr = [1, 2, 3, 4];

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

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

        console.log(arr[10]);
        console.log(arr[9]); // undefined
        console.log(arr[8]); // undefined

        arr[9] = "A";
        arr[8] = true;

        console.log(arr);
 */
        var arr = [1, 2, 3, 4];
        arr[10] = 50;
        for (let i = 0; i < arr.length; i++) {
            console.log(arr[i]);
        }

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

        //ES4 箭头函数：(...) => {...}
        arr.forEach((e) => {
            console.log(e);
        })

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

        // splice: 删除元素
        arr.splice(2, 2); // 从2索引开始的两个元素
        console.log(arr);

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

这里特别说明一下forEach遍历和普通for循环遍历的区别
forEach遍历的是每一个有值元素
普通for遍历的是所有元素包括undefined类型元素

JS-----String对象以及方法

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

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

        //charAt （字符串索引从0开始）
        console.log(str.charAt(4)); // o 
        //indexOf
        console.log(str.indexOf("lo"));
        //trim
        var s = str.trim();
        console.log(s);

        //substring(start, end) ------ 开始索引，结束索引（含头不含尾）
        console.log(s.substring(0, 5)); [0, 4]

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

代码运行结果

JS的自定义对象，JSON介绍以及JSON的基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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); //undefined 原因：jsonstr是字符串类型，而jsonstr.name是对象的获取方式

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

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

JS-----BOM对象(window和location)

BOM介绍

window

location

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

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

<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); */

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



        // location
        alert(location.href);

        location.href = "https://www.baidu.com"; // 这里要加https
    </script>
</body>

</html>

Java----DOM的介绍以及使用方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="h1" src="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. 获取Element元素对象
        //1.1 获取元素-根据ID获取
       /*  var img = document.getElementById('h1');
        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>
</body>
</html>

大致思路：
1、先document.获取Element元素对象，获取的方式可以通过id，标签，name属性，class属性。
2、获取完对象之后会返回一个数组，数组中存的是每一个标签或者... 可以通过参考手册中的方法对某一个对象进行操作

JS—DOM案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="h1" 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. 点亮灯泡 改变src的属性值
        var img = document.getElementById('h1');
        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>

DOM的事件绑定&&常见事件

代码实例一：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</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>

常见事件

代码实例二：

<!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 onload="load()">

    <form action="" style="text-align: center;" onsubmit="subfn()">
        <input type="text" name="username" onblur="bfn()" onfocus="ffn()" onkeydown="kfn()">

        <input id="b1" type="submit" value="提交">

        <input id="b1" type="button" value="单击事件" onclick="fn1()">
    </form>  

    <br><br><br>

    <table width="800px" border="1" cellspacing="0" align="center" onmouseover="over()" onmouseout="out()">
        <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 load(){
        console.log("页面加载完成...")
    }

    //onclick: 鼠标点击事件
    function fn1(){
        console.log("我被点击了...");
    }

    //onblur: 失去焦点事件
    function bfn(){
        console.log("失去焦点...");
    }

    //onfocus: 元素获得焦点
    function ffn(){
        console.log("获得焦点...");
    }

    //onkeydown: 某个键盘的键被按下
    function kfn(){
        console.log("键盘被按下了...");
    }

    //onmouseover: 鼠标移动到元素之上
    function over(){
        console.log("鼠标移入了...")
    }

    //onmouseout: 鼠标移出某元素
    function out(){
        console.log("鼠标移出了...")
    }

    //onsubmit: 提交表单事件
    function subfn(){
        alert("表单被提交了...");
    }

</script>
</html>

练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="h1" 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. 点亮灯泡 改变src的属性值
        var img = document.getElementById('h1');
        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>

0 评论

App 内打开