2022-08-24 第五组赖哲栋学习笔记

JavaScript

JavaScript脚本语言，解释型，主要用来给HTML网页增加动态功能
通常的js是运行在浏览器环境下的
JS的两种模型
- DOM：文档对象模型 document
- BOM：浏览器对象模型 window
nodejs运行在计算机环境下，服务器技术。不能操作BOM和DOM，但是它可以操作文件，实际上是一门后端技术
JS解释器（不同浏览器，Js的解释器不一样）
- Chrome---->v8
- node---->v8
- safari---->JavaScriptCore
ECMAScript ES ---->一套规范
JavaScript JS ---->具体的实现
JS基本上是web前端的核心
从外部引入js----->
JS放在HTML的位置
- js建议放在body结束标签上面--->网页的执行顺序是自上而下的，JS是用来控制页面的显示方式，需要等待网页加载完成，再执行JS

JS的数据类型

数据类型
数字	number	自动类型推断弱类型
字符串	string	自动类型推断弱类型
布尔型	boolean	自动类型推断弱类型
空	null	定义了，但值为空
未定义	undefined	没有声明过
非数字	NaN
数组		var v7 = [1, 2, 3, 4];
对象		var v8 = {"username": "admin","password": "123456"};

		var v1 = 10;
        var v2 = 1.5;
        var v3 = "你好";
        var v4 = "好";
        var v5 = true;
        var v6 = null;
        //数组
        var v7 = [1, 2, 3, 4];
		//向body打印输出
        document.write(v7[2]);
        //对象
        var v8 = {
            "username": "admin",
            "password": "123456",
            "id": 1001
        };
		document.write("<br>");//换行
        document.write(v8.password);

声明变量语法

var：可以重新声明和修改

var num = 1;
var num = 2;

let(ES6新增)：可以修改但是不能重新声明

let num = 1;
num = 2;

const(ES6新增)：不可以修改并且不能重新声明

const a = 1;
a = 2;--->×

数组

//Array()是一个函数，返回一个空数组
let arr = [1, 2, 3, 4, 5];
arr[100] = 10;
document.write(arr);//1,2,3,4,5,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,10  中间的数字都是未定义(undefined)

可以理解为JS中的数组就是java中的集合
js数组和java集合的不同处
- 没有下标越界
- 可以给任意位置赋值

函数(相当于java的方法)

/*
    可以有参数列表
    参数可以有多个
*/
function plus(a, b) {
    // let a = 1;
    // let b = 2;
    /*
        return的作用：return可以终止函数的执行
    */
    return a + b;
}
//调用函数
console.log(plus(111, 555));
console.log(plus(111, 555，1，2,3,67,7456));//不会报错，依然输出前两个数之和

对象

        //Object()返回一个空对象
        function User(name) {
            this.name = name;
        }
        //创建了一个user对象
        let user = new User("张三");
        console.log(user.name);

        let obj = Object();
        //JS对象的属性
        obj.name = "李四";
        obj.age = 30;
		//JS对象的方法
        obj.eat = function () {
            console.log("我正在吃东西...");
        }
        //对象调用方法
        obj.eat();

        //json串
        let teacher = {
            name: "王五",
            age: 35,
            drank: function () {
                console.log("我正在喝酒...");
            }
        }
        console.log(teacher['name']());

判断和循环

在JS中，if（条件）-------> 规定 0,null,undefined为false，剩下的都是true

		let s = 2;
        if (null) {
            console.log("abc");
        } else {
            console.log("cba"); //输出cba
        }

        //遍历输出数组
		let arr = [1, 2, 3, 4, 5];
        // for (let i = 0; i < arr1.length; i++) {
        //     console.log(arr[i]);
        // }
        for (i in arr) {
            console.log(arr[i]);
        }

		//遍历输出对象
		let student = {
            name: "小明",
            age: 22
        }-
        //遍历对象
        // console.log(student.length);
        for (stu in student) {
            console.log(stu); //依次输出 name,age
            console.log(student[stu]);//依次输出 小明,22
        }

常见工具对象

	let arr1 = [1,2,3];
	let arr2 = [9,8,7];
    console.log(arr1.concat(arr2)); //拼接
    // 在数组最后的位置添加一个元素
    arr1.push(10);
    //移除数组中的最后一个元素
    arr1.pop();
    //移除数组中的第一个元素
    arr1.shift();
	
	let name = "你好";
    // 对字符串进行编码
    document.write(escape(name)); //%u4F60%u597DtrueNaN

 	//isNaN  判断是不是数字，是返回false，不是返回true
    document.write(isNaN("哈哈")); //true

    //Number() 将字符串转换成数字，如果里面是数字，返回该数字，否则，返回NaN 
    document.write(Number("哈哈")); //NaN

    //String() 将一个值转成字符串
    document.write(String(123));

    // parseInt(); 转整数
    // parseFloat(); 转小数

 String：
     charAt，indexOf，lastIndexOf，
     replace，concat，match，
     substring，substr，toUpperCase
     toLowerCase
 Math：
     random，ceil，
     floor，round
 Date：
     getDate，getDay
     getMonth，getYear
     getHours，getMinutes
     
     let js = "alert('哈哈哈')"
    //把一个字符串解析成js代码执行
    eval(js);

JavaScript（独有的）

DOM编程 Document Object Model

文档本身就是一个文档对象document
所有的HTML元素都是元素节点
所有的HTML属性都是属性节点
元素的文本都是文本节点
注释节点(一点不用)

获取元素节点

<body>
    <div id="div1" class="div1">我是div</div>
    <script>
        //根据id属性获取对应的元素节点
        //通过id获取到的是唯一的一个节点
         let div1 = document.getElementById("div1");
		console.log(div1);
        //根据标签名获取对应的元素节点
        //通过标签名获取到的是一堆标签元素节点
         let div2 = document.getElementsByTagName("div");   
		console.log(div2[0]);
        //根据class样式获取对应的元素节点
        //通过class样式获取到的是一堆标签元素节点
        let div3 = document.getElementsByClassName("div1");
        console.log(div3[0]);

		// 新方式
        // querySelector找到和传入的选择器匹配的第一个元素
        // 返回值是一个元素节点
        let div = document.querySelector("#div1")
        let div = document.querySelector("div")
        let div = document.querySelector(".div1")
        // querySelectorAll找到和传入的选择器匹配的所有元素，返回值是一个数组
        let divs = document.querySelectorAll("div")
        console.log(divs[0]);
    </script>
</body>

innerHTML和innerText

        let div = document.querySelector("div");
        //innerHTML可以获取到HTML标签
        console.log(div.innerHTML);
        //innerText只能获取到文本
        console.log(div.innerText);

        let div2 = document.querySelector(".div2");
        // innerHTML：可以实现值内的标签效果
        div2.innerHTML = "<h1>我是div2里的内容</h1>";
        //innerText：把值当字符串输出
        div2.innerText = "<h1>我是div2里的内容</h1>";

函数

    <button onclick="fun()">按钮</button>
    <!-- 文本框内输入的内容是文本框的value值 -->
    <input type="text" id="username">

    <script>
        function fun() {
            let input = document.querySelector("#username");
            alert(input.value)//通过弹窗输出文本框内输入的值
        }
    </script>

新增元素节点

<!DOCTYPE html>
<html lang="zh-CN">
<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>
    <style>
        .mydiv {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <button onclick="fun()">打我！！！！</button>
    <div id="container"></div>
    <script>
        function fun() {
            //新建一个元素节点
            let myDiv = document.createElement("div");

            //给新建的div加样式
            myDiv.setAttribute("class", "mydiv");

            //如果有id，尽量使用id
            let container = document.querySelector("#container");
            // innerHTML或innerText赋值只能赋字符串
            // ccontainer.innerHTML = myDiv;
            container.append(myDiv);
        }
    </script>
</body>
</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>Document</title>
    </head>
    <body>
        <button onclick="delOne()">删除某一个子元素</button>
        <button onclick="del(this)">删除自己</button>
        <button onclick="delAll()">清空</button>
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>

        <script>

            function delOne() {
                let ul = document.querySelector("ul");
                let lis = document.querySelectorAll("li");
                ul.removeChild(lis[2]);
            }

            function delAll() {
               // 清空ul
               let ul = document.querySelector("ul");
               ul.innerHTML = ""; 
            }

            function del(obj) {
                // console.log(obj);
                // 找到要删除的元素
                // let btn = document.querySelector("button");
                // console.log(btn)
                // 元素.remove方法直接删除
                // btn.remove();
                obj.remove();
            }
        </script>
    </body>
</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>Document</title>
    </head>
    <body>
        <ul>
            <li><a href="#">1</a></li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
        <script>
            // 获取当前节点的所有子节点
            let uls = document.querySelector("ul");
            // 只拿html节点
            console.log(uls.children);

            // 全text和li节点
            console.log(uls.childNodes);
            /*
                从某一个角度来说。
                字节点相对的状态
            */
            console.log(uls.children[0].children);
        </script>
    </body>
</html>

练习

写一个简易的计算器

<!DOCTYPE html>
<html lang="zh-CN">

<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>
    <style>
        .myli {
            color: aquamarine;
        }
    </style>
</head>
<body>
    <input type="text">
    <select>
        <option value="+">+</option>
        <option value="-">-</option>
        <option value="*">*</option>
        <option value="/">/</option>
    </select>
    <input type="text">
    <button onclick="fun()">=</button>
    <input type="text" id="count" readonly>
    <button onclick="delAll()">清除所有</button>
    <ol id="myol"></ol>
    <script>
        let r = 1;
        function fun() {
            let arr = document.querySelectorAll("input");
            /* 
                   下拉菜单我们要找的元素是select，选择的是哪一个
                   选项，这个select的value值就是哪一个选项的value值
               */
            let str = document.querySelector("select");
            let count = document.querySelector("#count");

            let num1 = parseInt(arr[0].value);
            let num2 = parseInt(arr[1].value);
            let str1 = str.value;

            count.value = eval(num1 + str1 + num2);


            let myli = document.createElement("li");
            myli.setAttribute("class", "myli");

            // 生成历史记录的时候，加上按钮
            /*
                并且处理id的问题，加单击事件
            */
            myli.innerHTML = num1 + str1 + num2 + "=" + count.value + "<button id=a" + r + " onclick='del(this)'>删除</button>";

            // 自我删除
            /*
                li按照自定义的规则，li处理id的问题
            */
            myli.setAttribute("id", "a" + r);
            // 标记自增
            r++;

            let myol = document.querySelector("#myol");
            myol.append(myli);
            // myli.append(del);
            arr[0].value = null;
            arr[1].value = null;
        }

        function delAll() {
            // 拿到历史记录的ol
            let myol = document.querySelector("#myol");
            myol.innerHTML = "";
        }

        function del(obj) {
            //获取按钮的id值，转换成li列表的id值
            let myli = document.querySelector("#" + obj.id);
            myli.remove();
        }
    </script>
</body>
</html>

posted on 2022-08-25 08:38 小赖的博客阅读(27) 评论(0) 编辑收藏举报

刷新页面返回顶部

导航

2022-08-24 第五组 赖哲栋 学习笔记

JavaScript

JS的数据类型

声明变量语法

数组

函数(相当于java的方法)

对象

判断和循环

常见工具对象

JavaScript（独有的）

DOM编程 Document Object Model

innerHTML和innerText

函数

新增元素节点

删除元素节点

元素子节点

练习

2022-08-24 第五组赖哲栋学习笔记