2022-8-24第一组孙乃宇JavaScript

JavaScriptnext

JavaScript脚本语言，解释型，

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

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

JS的两种模型：

DOM：文档对象模型 document

BOM：浏览器对象模型 window

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

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

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

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

Chrome v8

node v8

safari JavaScriptCore

ECAScript ES 一套规范

JavaScript JS 具体的实现

ES6 ES5 ES7....语法

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

向body打印输出

建议放这里

页面的加载顺序是从上到下

JS是用来控制页面的显示方式

需要等待页面加载完成，再执行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>
​
        <h1>我是h1</h1>
        <script src="js/my.js"></script>
        <script>
            document.write("123");
        </script>
    </body>
</html>

数据类型

自动类型推断 弱类型

1、数字 number

2、字符串 string

3、布尔型 boolean

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

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

6、NaN 非数字

7、数组

8、对象

<!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>
​
        <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>
    </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>对象（了解）</title>
    </head>
    <body>
        <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>
    </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>
        <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>
    </body>
</html>

Math

<!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>
        <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));
        </script>
    </body>
</html>

DOM

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找到和传入的选择器匹配的所有元素

// 返回值一堆元素节点

posted @   孙乃宇  阅读(206)  评论(0)  编辑  收藏  举报
相关博文：
·  长春人文学院第四组孙乃宇https://www.cnblogs.com/sunnaiyu/js
·  2022-8-25第一组孙乃宇JavaScript
·  20220826 第七小组 王茜
·  2022-08-24 day34 第一小组 王鸣赫
·  2022-8-24 js
阅读排行：
· 地球OL攻略 —— 某应届生求职总结
· 周边上新：园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源！
· 提示词工程——AI应用必不可少的技术
· .NET周刊【3月第1期 2025-03-02】
点击右上角即可分享
微信分享提示
SQL AI 助手