初始JavaScript（JS）

初始JavaScript（JS）

JavaScript是什么？

JS运行过程

JS的组成

引入方式

输入输出

JS基础语法

【1】变量

（1）创建变量

var name = 'zhangsan';
var age = 20;

（2）动态类型

【2】基本数据类型

（1）number数字类型

var a = 07; // 八进制整数, 以 0 开头
var b = 0xa; // 十六进制整数, 以 0x 开头
var c = 0b10; // 二进制整数, 以 0b 开头

（2）string

var msg = "My name is "zhangsan""; // 出错
var msg = "My name is \"zhangsan\""; // 正确, 使用转义字符. \" 来表示字符串内部的引号.
var msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号
var msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号

（3）boolean

（4）undefined和null

var b = null;
console.log(b + 10); // 10
console.log(b + "10"); // null10

【3】运算符

【4】数组

（1）创建数组

// 使用new关键字创建
var arr = new Array();
//使用字面量方式创建
var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"

（2）获取数组元素

（3）新增数组元素

通过修改length新增：此时末尾新增的元素都为undefined；
通过下标新增：下标超过数组范围时，会在指定位置插入新元素，此时超出部分的其他元素为undefined；
使用push函数追加元素；

（4）删除数组元素

var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr);
// 结果
[9, 5, 7]

（5）遍历数组

for(var i of arr){
    console.log(i);
}

【5】函数

（1）函数定义

可以通过function来定义函数

// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
    函数体
    return 返回值;
}

也可以通过函数表达式来定义函数

var add = function() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

（2）变量作用域

function test() {
    num = 100;
}
test();
console.log(num);
// 执行结果
100

【6】对象

（1）创建对象

使用字面量创建对象

使用new Object创建对象

var student = new Object(); // 和创建数组类似
    student.name = "蔡徐坤";
    student.height = 175;
    student['weight'] = 170;
    student.sayHello = function () {
    console.log("hello");
}

（2）属性获取

JS（Web API）

【1】什么是Web API

【2】获取元素

函数名	作用
querySelector（selectors）	获取某个元素，保证选择器只能筛选一个元素
querySelectorAll（selectors）	获取多个元素

【3】操作元素

（1）获取/修改元素内容

使用innerText

var div = document.querySelector('div');
// 读取 div 内部内容
console.log(div.innerText);
// 修改 div 内部内容, 界面上就会同步修改
div.innerText = 'hello js <span>hello js</span>';

使用innerHTML

<div>
    <span>hello world</span>
    <span>hello world</span>
</div>
<script>
    var div = document.querySelector('div');
    // 读取页面内容
    console.log(div.innerHTML);
    // 修改页面内容
    div.innerHTML = '<span>hello js</span>'
</script>

（2）获取/修改表单元素的属性

（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>
    <p style="color:black">这是一个会变颜色的字体</p>
    <input type="button" value="点击">
    <script>
        var p=document.querySelector("p");
        var btu=document.querySelector("input");
        // 通过函数将其与点击事件相关联
        btu.onclick=function(){
            var color=p.style.color;
            console.log("color:"+color);
            if(color=="black"){
                p.style.color="red";
            }else{
                p.style.color="black";
            }
        }
    </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>
    <style>
        div{
            width: 100%;
            height: 600px;
            color:black;
        }
        .white{
            background-color: white;
            color:black;
        }
        .black{
            background-color: black;
            color:white;
        }
    </style>
</head>
<body class="white">
    <div id="p" class="white"><p1>模式切换</p1></div>
    <script>
        var p=document.querySelector("div");
        p.onclick=function(){
            var classname=p.className;
            if(classname=="white"){
                p.className="black";
            }else{
                p.className="white";
            }
        }
    </script>
</body>
</html>