学习笔记——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>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>

三、学习总结

😵今天复习了web前端很重要的一环JavaScript，新增了很多知识点，要将所有知识点进行整合，继续加油！！！

四、理解程度

需要加深理解程度

五、笔记内容

JavaScript脚本语言，解释型，

主要用来给HTML网页增加动态功能。

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

JS的两种模型：

DOM：文档对象模型 document

BOM：浏览器对象模型 window

nodejs运行在计算机环境下，服务器技术。

不能操作BOM和DOM。但是它可以操作文件，

能操作数据库，实际上是一门后端技术。

JS解释器：不同的浏览器，JS解释器不一样。

Chrome	v8
node	v8
safari	JavaScriptCore

ECMAScript ES 一套规范

JavaScript JS 具体的实现

ES6 ES5 ES7....语法

JS基本上是web前端的核心！！！

页面的加载顺序是从上到下。JS是用来控制页面的显示方式。需要等待页面加载完成，再执行JS

自动类型推断弱类型

1、数字 number

2、字符串 string

3、布尔型 boolean

4、null 空，定义了，但是值为空

5、undefined 未定义，没有声明过

6、NaN 非数字

7、数组

8、对象

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

声明变量语法

        <script>
            // ES6声明变量语法
            // var num = 1;
            // var num = 2;
            // document.write(num);

            // 新的声明变量的关键字
            // let num = 1;
            // num = 2;
            // document.writeln(num);

            // 声明常量的关键字
            const num = 1;
            // num = 2;
            document.write(num);

        </script>

函数方法：

Array()是一个函数，返回值就是一个空数组

JS里"没有"方法这个概念，叫做函数

JS里的方法不是java里的方法

JS里的函数相当于java里的方法

let arr = Array();

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

let arr = new Array();

        <script>
            // 可以理解为JS中的数组就是java中的集合
            let arr = [1,2,3,4,5];
            arr[100] = 10;
            document.writeln(arr + "<br>");
            document.writeln(arr.length);
        </script>

        <script>
            // 函数（Java的方法）
            /*
                可以有参数列表
                参数可以有多个
            */
            function plus(a,b) {
                // let a = 1;
                // let b = 2;
                // console.log(a + b);
                // 返回值
                /* return的作用
                
                    return可以终止函数的执行
                */

                return a + b;
                console.log(123);
            }
            // 调用函数
            console.log(plus(100,2,3,4,5,6,7));
        </script>

对象（了解）

        <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

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

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

            let student = {
                name: "小明",
                age: 10
            }
            // 遍历对象
            // console.log(student.length);
            for(attr in student) {
                console.log(attr);
                console.log(student[attr]);
            }
            /*
                中间省略了运算符 ===
            */
        </script>

常用工具对象Array()

        <script>
           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));

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

js = "1+1";

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

document.write(eval(js));

document.write(js);

isNaN 判断一个值是不是数字，是false，不是true

document.write(isNaN("哈哈"));

parseInt(); 转整数

parseFloat(); 转小数

document.write(10 / 4);

Number() 把一个值转成数字

document.write(Number("11111"));

String() 把一个值转成字符串

document.write(String(123));

String：

charAt，indexOf，lastIndexOf，

replace，concat，match，

substring，substr，toUpperCase

toLowerCase

Math：

random，ceil，

floor，round

Date：

getDate，getDay

getMonth，getYear

getHours，getMinutes

DOM编程：Document Object Model

文档本身就是一个文档对象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找到和传入的选择器匹配的第一个元素

返回值是一个元素节点

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

console.log(div);

querySelectorAll找到和传入的选择器匹配的所有元素

返回值一堆元素节点

let divs = document.querySelectorAll("div");

console.log(divs[0]);

innerHTML

innerText

    <body>
        <div>
            <p>我是div</p>
        </div>

        <div class="div2">

        </div>

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

函数：

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

        <script>
            function fun() {
                let input = document.querySelector("#username");
                alert(input.value);
            }
        </script>
    </body>

新增内容

（1）

<!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>
        <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>
</html>

（2）

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

（3）

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

posted @ 2022-08-24 22:14 LJMMJL 阅读(14) 评论(0) 编辑收藏举报

ljmskipper

学习笔记——JS

一、学习重点

二、学习内容

三、学习总结

四、理解程度

五、笔记内容

公告

搜索

常用链接

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论