将内容写到 HTML 文档中 - - - document.write()

    <script>
    	// 括号里的内容要有引号
        document.write("
这是一个标题
");
        document.write('
hello world
');
    script>
    <style>
        .box{
            width: 100px;height: 100px;
            background: red;
        }
    style>
1
2
3
4
5
6
7
8
9
10
11

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖

在文本字符串中使用反斜杠\对代码行进行换行

<script>
document.write("你好 \
世界!");
script>
1
2
3
4

弹出警告框 window.alert() - - - 测试常用

<button type="button" onclick="alert('欢迎!')">点我!button>
1

    <script>
        window.alert(5 + 6);
    script>
1
2
3

改变HTML内容 - - - innerHTML

    <p id="demo">
        JavaScript 能改变 HTML 元素的内容。
    p>
    <script>
        function myFunction() {
            // x = document.getElementById("demo");  // 找到元素
            // x.innerHTML = "Hello JavaScript!";    // 改变内容

            document.getElementById('demo').innerHTML = 'Hello JavaScript!'
        }
    script>
    <button type="button" onclick="myFunction()">点击这里button>
1
2
3
4
5
6
7
8
9
10
11
12

console.log 写到控制台

---

---

JavaScript 语句标识符 (关键字)

var 声明变量

    <script>
        // 一行声明多个变量
        var name = 'tom',age = 12,gender = '';
        // 可横跨多行
        var name,
            age,
            gender;
        // x,y 为 undefined(未使用值来声明的变量)， z 为 1
        var x,y,z=1;
    script>
1
2
3
4
5
6
7
8
9
10

JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。

typeof 查看变量的数据类型

<script>
document.getElementById("demo").innerHTML = 
	typeof false + "
" +
	typeof {name:'john', age:34};
script>
1
2
3
4
5

创建数组

    <script>
        var cars=new Array();
        cars[0]="Saab";
        cars[1]="Volvo";
        cars[2]="BMW";

        // var cars=new Array("Saab","Volvo","BMW");

        document.write(cars)
        document.write('

')
		
		// 注意使用分号隔开，不是逗号
        for(i=0;i<cars.length;i++){
            document.write(cars[i] + '
')
        }
    script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

创建对象

    <script>
        var person =
        {
            firstname: "John",
            lastname: "Doe",
            id: 5566
        };
        // 得到值的两种方法  访问对象属性
        document.write(person.lastname + "
");		// Doe
        document.write(person["lastname"] + "
");	// Doe
    script>
1
2
3
4
5
6
7
8
9
10
11

对象方法

    <p id="demo">p>
    <script>
        var person = {
            firstName: "John",
            lastName: "Doe",
            id: 5566,
            fullName: function () {
                return this.firstName + " " + this.lastName;
            }
        };
        // 访问 person 对象的 fullName() 方法
        document.getElementById("demo").innerHTML = person.fullName();	// John Doe
        // 访问 person 对象的 fullName 属性，它将作为一个定义函数的字符串返回
        document.getElementById("demo").innerHTML = person.fullName;	// function () { return this.firstName + " " + this.lastName; }
    script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

函数

    <script>
        function myFun(){
            alert('Hello World!')
        }
    script>
    <button onclick="myFun">点我button>
1
2
3
4
5
6

传参

    <button onclick="myFunction('Harry Potter','Wizard')">点击这里button>	
    <button onclick="myFunction('Bob','Builder')">点击这里button>
    <script>
        function myFunction(name, job) {
            alert("Welcome " + name + ", the " + job);
        }
    script>
1
2
3
4
5
6
7

返回值

    <p id="demo">p>
    <script>
        function myFunction(a, b) {
            return a * b;
        }
        document.getElementById("demo").innerHTML = myFunction(4, 3);
    script>
1
2
3
4
5
6
7

12

JavaScript 变量

    <script>
        var var1 = 1; // 不可配置全局属性
        var2 = 2; // 没有使用 var 声明，可配置全局属性

        console.log(this.var1); // 1
        console.log(window.var1); // 1
        console.log(window.var2); // 2

        delete var1; // false 无法删除
        console.log(var1); //1

        delete var2;
        console.log(delete var2); // true
        console.log(var2); // 已经删除 报错变量未定义    
    script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

作用域

作用域为可访问变量，对象，函数的集合

局部作用域

    <p id="demo">p>
    <script>
        myFunction();
        document.getElementById("demo").innerHTML = "carName 的类型是：" + typeof carName;
        function myFunction() {
            // 局部变量在声明的函数外不可以访问
            var carName = "Volvo";
        }
    script>
1
2
3
4
5
6
7
8
9

carName 的类型是：undefined

全局作用域

    <p id="demo">p>
    <script>
        var carName = "Volvo";
        myFunction();
        function myFunction() {
            document.getElementById("demo").innerHTML =
                "我可以显示 " + carName;
        }
    script>
1
2
3
4
5
6
7
8
9

我可以显示 Volvo

    <p id="demo">p>
    <script>
        myFunction();
        document.getElementById("demo").innerHTML =
            "我可以显示 " + carName;
        function myFunction() {
            // 如果你的变量没有声明，它将自动成为全局变量
            carName = "Volvo";
        }
    script>
1
2
3
4
5
6
7
8
9
10

我可以显示 Volvo

HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象，所以window 对象可以调用函数内的局部变量。
注意：所有数据变量都属于 window 对象。

    <p id="demo">p>
    <script>
        myFunction();
        document.getElementById("demo").innerHTML =
            "我可以显示 " + window.carName;
        function myFunction() {
            carName = "Volvo";
        }
    script>
1
2
3
4
5
6
7
8
9

我可以显示 Volvo

事件

按钮

onclick 点击 属性

<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?button>
<p id="demo">p>
1
2

Tue Oct 24 2023 09:37:54 GMT+0800 (中国标准时间)

改变自身元素的内容 this.innerHTML

<button onclick="this.innerHTML=Date()">现在的时间是?button>
1

点击 调用函数

    <button onclick="displayDate()">点这里button>
    <script>
        function displayDate() {
            document.getElementById("demo").innerHTML = Date();
        }
    script>
    <p id="demo">p>
1
2
3
4
5
6
7

常见的HTML事件