Javascript 教程

JavaScript 输出

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


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

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


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 元素。


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 = "被替换后，这是一个加粗的文本！";
     
    script>
body>
html>

JavaScript 语法

JavaScript 字面量

数字（Number）字面量


html>
<html>
<head>
    <meta charset="UTF-8">
	<title>数字（Number）字面量title>
head>
<body>
    <h1>整数h1>
    <p id="num1">123p>
    <h1>小数h1>
    <p id="num2">3.14p>
    <h1>科学计数法h1>
    <p id="num3">6.022e23p>
 
    <script>
        document.getElementById("num1").innerHTML = 123;
        document.getElementById("num2").innerHTML = 3.14;
        document.getElementById("num3").innerHTML = 6.022e23;
    script>
body>
html>

字符串（String）字面量


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>

表达式字面量


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

数组（Array）字面量


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）字面量


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）字面量


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 变量


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 操作符

算术运算符


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>

赋值运算符


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 语句


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 语句


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 循环


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 循环


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 语句


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 += "
";
        i = 0;
        while (i < 10) {
            i++;
            if (i == 5) {
                continue;
            }
            document.getElementById("demo").innerHTML += i + " ";
        }
    script>
body>
html>

相关阅读:
PHP：背包问题算法(附完整源码)
华为机试题输入输出总结
 使用亚马逊云科技Amazon SageMaker，为营销活动制作广告素材
 OpenHarmony移植案例： build lite源码分析之hb命令__entry__.py
Golang 基础三
 【论文笔记】神经网络压缩调研
 鲸探发布点评：9月22日发售《“京华号”盾构机》数字藏品
 [Spring Boot]10 使用RestTemplate调用第三方接口
 Vue3模块找不到问题解决：找不到模块‘vue ‘。你的意思是将“模块解决方案”选项设置为“节点”，还是添加ali
guava本地缓存CacheLoader使用
原文地址：https://blog.csdn.net/2401_82471222/article/details/139790459