JavaScript

JavaScript

脚本语言，解释型
主要用来给HTML网页增加动态功能

通常的js是运行在浏览器环境下的

JS的两种模型

DOM：文档对象模型 document
BOM：浏览器对象模型 window

node js

运行在计算机环境下，服务器技术，不能操作BOM和DOM，但是它可以操作文件，能操作数据库，实际上是一门后端技术

JS解释器

不同的浏览器，JS解释器不一样
Chrome— v8
node— v8
safari— JavaScriptCore

ECMAScript和JavaScript

ECMAScript

ES
一套规范

JavaScript

JS
具体的实现

JS基本上是web前端的核心
JS使用
JS底层
JS解析过程
JS优化

向body打印输出

document.write(123)

JS的位置

最好在最后一个body的最上方
页面的加载顺序是从上到下
JS是用来控制页面的显示方式
需要等待页面加载完成，再执行JS

JS的数据类型

自动类型推断，弱类型

数组 number
字符型 string
布尔型 boolean

其他

null 空：定义了，值为空
undefined 未定义，没有声明过
NaN 非数字

数组
对象

变量的声明

    <script>
        var v1 = 10;
        var v2 = 1.5;
        var v3 = "你好";
        var v4 = '我好';
        var v5 = true;
        var v6 = null;
        //数组
        var v7 = [1,2,3,4,5];
        document.write(v7[2])
        //对象
        var v8 = {
            "username":"admin",
            "password":"123456",
            "id":1001
        }
        document.write(v8.username)
    </script>

ES6声明变量语法

新的声明变量的关键字

let num = 1;
num = 2;

声明常量的关键字

const num = 1;

数组

Array（）是一个函数，返回值是一个空数组
JS里的方法不是java里的方法，JS里的函数相当于java里的方法

let arr = Array;
Array.

在JS中，函数可以当做《类》使用

let arr = new Array()

可以理解为JS中的数组就是java中的集合

let arr = [1,2,3,4,5]
arr[100] = 10;
document.writeln(arr + "<br>");
document.writeln(arr.length)

函数（Java的方法）

function plus(){
            let a = 1;
            let b = 2;
            return(a+b);
        }
        console.log(plus())

对象


<script>
            function plus(){}
            // 对象
            // Array()返回一个空数组
            // Object()返回一个空对象
            // let obj = new Object();
            function User(name) {
                this.name = name;
            }
            // 创建了一个user对象
            // 我们之前定义的this.name就是这个对象的属性
            // 我现在的user对象中有一个name属性，值是张三
            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("我正在喝酒...");
                }
            }
            // teacher.drank();
            console.log(teacher['drank']());
        </script>

判断和循环

在JS中，if条件
规定：0、null、undefined为false，剩下的都是true

let a = 0;
            if(undefined){
                console.log(a);
                console.log("哈哈哈");
            }else {
                console.log("false");
            }

遍历数组

    let arr = [1,2,3,4,5];
    for (let i = 0; index < arr.length; i++) {
        const element = arr[i];
    }
    for (i in arr) {
        console.log( arr[i]);
    }

遍历对象

let student = {
            name:"小明",
            age:10
        }
        
        for (i in student) {
            console.log(attr);
            console.log(student[attr]);
        }

常用工具对象

String

charAt，indexOf，lastIndexOf，
replace，concat，match，
substring，substr，toUpperCase
toLowerCase

Math

random，ceil，
floor，round

Date

getDate，getDay
getMonth，getYear
getHours，getMinutes

Array()

<script>
            /*
                常用工具对象
                Array()
            */
           let arr1 = [1,2,3];
           let arr2 = [9,8,7];
        //    console.log(arr1.concat(arr2));
           arr1.push(10);
           // 移除数组中的最后一个元素
           arr1.pop();
           // 移除数组中的第一个元素
           arr1.shift();
           console.log(arr1);
        </script>

对字符串进行编码

let name = "你好";
        //对字符串进行编码
document.write(escape(name))

把一个字符串解析成JS代码执行

let js = "alert('哈哈哈')";
eval(js)

DOM编程 Document Object Mode1

文档本身就是一个文档对象document
所有的HTML元素都是元素结点
所有的HTML属性都是属性结点
元素的文本是文本结点
注释结点（一般不用）

获取元素结点

根据id属性获取对应的元素结点

通过id获取到的是唯一的一个结点

let div = document.getElementById("div1");

根据标签名获取对应的元素结点

通过标签名获取到的是一堆标签元素结点

let div = document.getElementsByTagName("div");

根据class样式获取对应的元素结点

通过class样式获取的是一堆标签元素结点

let div = document.getElementsByClassName("div1")
console.log(div[0]);

新方法

querySelector

querySelector找到和传入的选择器匹配的第一个元素
返回值是一个元素结点

let div = document.querySelector("div");
console.log(div);

querySelectorAll

querySelectorAll找到和传入的选择器匹配的所有元素
返回值是一堆元素结点

let divs = document.querySelectorAll("div")
console.log(divs[0]);

innerHTML和innerText

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

            let div2 = document.querySelector(".div2");
            div2.innerHTML = "<h1>我是div2里面的h1</h1>";
            div2.innerText = "<h1>我是div2里面的h1</h1>";
        </script>

新建一个元素结点并追加到元素上

<style>
            .mydiv {
                width: 200px;
                height: 200px;
                background-color: green;
            }
        </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赋值只能附字符串
                // container.innerHTML = myDiv;
                container.append(myDiv);
                /*
                    每次点击=号，在下方显示计算的历史记录！
                */
            }   
            
        </script>

删除按钮

 <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>

拿结点

<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>

案例（计算器）

<!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>
        <input type="text" class="num1">
        <select class="oper">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" class="num2">
        <button onclick="calc()">=</button>
        <input type="text" readonly class="result">
        <hr>
        <button onclick="cls()">清空历史记录</button>
        <ol id="history"></ol>

        <script>
            /* 定义一个不重复的变量，用它来当做
                button和li共同的id
            */
            let r = 1;
            function calc() {

                // 获取第一个数
                let num1 = document.querySelector(".num1").value;
                // 获取第二个数
                let num2 = document.querySelector(".num2").value;
                let result = document.querySelector(".result");
                /* 
                    下拉菜单我们要找的元素是select，选择的是哪一个
                    选项，这个select的value值就是哪一个选项的value值
                */
                let oper = document.querySelector(".oper");

                result.value = eval(num1 + oper.value + num2);

                let li = document.createElement("li");
                // 生成历史记录的时候，加上按钮
                /*
                    并且处理id的问题，加单击事件
                */
                li.innerHTML = num1 + oper.value + num2 + "=" + eval(num1 + oper.value + num2) + "<button id=b" + r +" onclick='remself(this)'>删除</button>";

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

                let ol = document.querySelector("#history");
                ol.append(li);

                document.querySelector(".num1").value = "";
                document.querySelector(".num2").value = "";
                
            }  
            
            function cls() {
                // 拿到历史记录的ol
                let ol = document.querySelector("#history");
                ol.innerHTML = "";
            }

            function remself(obj) {
                // 把拿到的b1转换成li
                let li = document.getElementById(String(obj.id).replace("b","l"));
                // 删除自己
                li.remove();
            }

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

原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/282068.html

2022-08-24 第八组 卢睿 学习心得

JavaScript

JS的两种模型

node js

JS解释器

ECMAScript和JavaScript

ECMAScript

JavaScript

向body打印输出

JS的位置

JS的数据类型

自动类型推断，弱类型

其他

变量的声明

ES6声明变量语法

新的声明变量的关键字

声明常量的关键字

数组

函数（Java的方法）

对象

判断和循环

遍历数组

遍历对象

常用工具对象

String

Math

Date

Array()

对字符串进行编码

把一个字符串解析成JS代码执行

DOM编程 Document Object Mode1

获取元素结点

根据id属性获取对应的元素结点

根据标签名获取对应的元素结点

根据class样式获取对应的元素结点

新方法

querySelector

querySelectorAll

innerHTML和innerText

新建一个元素结点并追加到元素上

删除按钮

拿结点

案例（计算器）

相关推荐

发表回复

2022-08-24 第八组卢睿学习心得