标签：教程 JavaScript 字面 demo Javascript innerHTML getElementById document
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>
标签：教程,
JavaScript,
字面,
demo,
Javascript,
innerHTML,
getElementById,
document
From： https://blog.csdn.net/2401_82471222/article/details/139790459