Javascript 教程

最新推荐文章于 2024-07-18 20:54:54 发布

程序员-张师傅

最新推荐文章于 2024-07-18 20:54:54 发布

阅读量962

点赞数 25

分类专栏： javascript 文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/2401_82471222/article/details/139790459

版权

javascript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

JavaScript 输出

使用 window.alert() 弹出警告框

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>使用 window.alert() 弹出警告框</title>
</head>
<body>
	
    <script>
        window.alert("你好，世界！");
    </script>
</body>
</html>

使用 document.write() 方法将内容写到 HTML 文档中

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>使用 document.write() 方法将内容写到 HTML 文档中</title>
</head>
<body>
	
    <script>
        // 使用 document.write() 方法将内容写到 HTML 文档中
        document.write("Hello, World!");
    </script>
</body>
</html>

使用 innerHTML 写入到 HTML 元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>使用 innerHTML 写入到 HTML 元素。</title>
</head>
<body>
	<p id="demo">这是一段正常文本！</p>
    <script>
        // 获取元素
        var p = document.getElementById("demo");
        // 写入 HTML 代码
        p.innerHTML = "<b>被替换后，这是一个加粗的文本！</b>";
     
    </script>
</body>
</html>

JavaScript 语法

JavaScript 字面量

数字（Number）字面量

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>数字（Number）字面量</title>
</head>
<body>
    <h1>整数</h1>
    <p id="num1">123</p>
    <h1>小数</h1>
    <p id="num2">3.14</p>
    <h1>科学计数法</h1>
    <p id="num3">6.022e23</p>

    <script>
        document.getElementById("num1").innerHTML = 123;
        document.getElementById("num2").innerHTML = 3.14;
        document.getElementById("num3").innerHTML = 6.022e23;
    </script>
</body>
</html>

字符串（String）字面量

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>字符串（String）字面量 </title>
</head>
<body>
    <h1>字符串（String）字面量</h1>
    <p id="demo">字符串字面量是指用单引号或双引号括起来的任意文本，例如："Hello, world!" 或 'I love JavaScript'。</p>

    <script>
        document.getElementById("demo").innerHTML = "Hello, world!";
    </script>
</body>
</html>

表达式字面量

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>表达式字面量</title>
</head>
<body>
    <h1>表达式字面量:1+1*2+3/4</h1>
    <p id="demo">计算结果</p>
    <script>
        document.getElementById("demo").innerHTML = 1+1*2+3/4;
    </script>
</body>
</html>

数组（Array）字面量

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>数组（Array）字面量</title>
</head>
<body>
    <h1>数组（Array）字面量</h1>
    <p id="demo">数组显示结果</p>
    <script>
        document.getElementById("demo").innerHTML = ["apple", "banana", "orange",2018];
    </script>
</body>
</html>

对象（Object）字面量

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>对象（Object）字面量</title>
</head>
<body>
    <h1>对象（Object）字面量</h1>
    <p id="demo">对象（Object）字面量</p>
    <script>
        var obj = {
            name: "张三",
            age: 25,
            gender: "男"
        };   // 对象字面量
        document.getElementById("demo").innerHTML = "姓名：" + obj.name + "，年龄：" + obj.age + "，性别：" + obj.gender;
        
        
    </script>
</body>
</html>

函数（Function）字面量

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>函数（Function）字面量</title>
</head>
<body>
    <h1>函数（Function）字面量</h1>
    <p id="demo">函数（Function）字面量</p>
    <script>
        function myFunction(a, b) {


            return a * b;
        }

        var x = myFunction(2, 3);
        document.getElementById("demo").innerHTML = x;
    </script>
</body>
</html>

JavaScript 变量

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>JavaScript 变量</title>
</head>
<body>
    <h1>变量是一个名称。字面量是一个值。</h1>
    <p id="demo">函数（Function）字面量</p>
    <script>
        var bianliang1, bianliang2; // 声明两个变量
        bianliang1 = 10; // 给变量赋值
        bianliang2 = "hello"; // 给变量赋值
        document.getElementById("demo").innerHTML = bianliang1 + " " + bianliang2; // 输出变量值
    </script>
</body>
</html>

JavaScript 操作符

算术运算符

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>算术运算符</title>
</head>
<body>
    <h1>算术运算符。</h1>
    <p id="demo">结果：</p>
    <script>
        var x = 10;
        var y = 5;
        var z = 2;  
        var result = x + y * z;
        document.getElementById("demo").innerHTML = result;
    </script>
</body>
</html>

赋值运算符

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>赋值运算符</title>
</head>
<body>
    <h1>赋值运算符</h1>
    <p id="demo">结果：</p>
    <script>
        var x = 10;
        var y = 5;
        var z = x + y;
        document.getElementById("demo").innerHTML = z;
    </script>
</body>
</html>

JavaScript if...Else 语句

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>JavaScript if...Else 语句</title>
</head>
<body>
    <h1>JavaScript if...Else 语句</h1>
    <p id="demo">结果：</p>
    <script>
        var num1 = 10;
        var num2 = 5;
        if (num1 > num2) {
            document.getElementById("demo").innerHTML = "num1 大于 num2";
        } else {
            document.getElementById("demo").innerHTML = "num1 小于等于 num2";
        }
    </script>
</body>
</html>

JavaScript switch 语句

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>JavaScript switch 语句</title>
</head>
<body>
    <h1>JavaScript switch 语句</h1>
    <p id="demo">结果：</p>
    <script>
        var num = 1;
        switch (num) {
            case 1:
                document.getElementById("demo").innerHTML = "你选择了 1";
                break;
            case 2:
                document.getElementById("demo").innerHTML = "你选择了 2";
                break;
            case 3:
                document.getElementById("demo").innerHTML = "你选择了 3";
                break;
            default:
                document.getElementById("demo").innerHTML = "你没有选择任何值";
        }
    </script>
</body>
</html>

JavaScript for 循环

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>JavaScript for 循环</title>
</head>
<body>
    <h1>JavaScript for 循环</h1>
    <p id="demo">结果：</p>
    <script>
        var sum = 0;
        for (var i = 1; i <= 10; i++) {
            sum += i;
        }
        document.getElementById("demo").innerHTML = "1+2+3+...+10=" + sum;  //输出结果
    </script>
</body>
</html>

JavaScript while 循环

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>JavaScript while 循环</title>
</head>
<body>
    <h1>JavaScript while 循环</h1>
    <p id="demo">结果：</p>
    <script>
        var i = 0;
        while (i < 5) {
            document.getElementById("demo").innerHTML += i + " ";
            i++;
        }
    </script>
</body>
</html>

JavaScript break 和 continue 语句

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
	<title>JavaScript break 和 continue 语句</title>
</head>
<body>
    <h1>JavaScript break 和 continue 语句</h1>
    <p id="demo">结果：</p>
    <script>
        var i = 0;
        while (i < 10) {
            i++;    
            if (i == 5) {
                break;
            }
            document.getElementById("demo").innerHTML += i + " ";
        }
        document.getElementById("demo").innerHTML += "<br>";
        i = 0;
        while (i < 10) {
            i++;
            if (i == 5) {
                continue;
            }
            document.getElementById("demo").innerHTML += i + " ";
        }
    </script>
</body>
</html>