01）自学JavaScript

1. JavaScript 简介

1.1 JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

2. JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中

2.1 <script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<script>alert("我的第一个 JavaScript");</script>

2.2 <body> 中的 JavaScript

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>

2.3 在 <head> 或者 <body> 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

2.4<head> 中的 JavaScript 函数

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

3. JavaScript 输出

JavaScript 没有任何打印或者输出的函数。

3.1 JavaScript 显示数据

JavaScript 可以通过不同的方式来输出数据：

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

<!DOCTYPE html>
<html>
<body><h1>我的第一个页面</h1>
<p>我的第一个段落。</p><script>
window.alert(5 + 6);
</script></body>
</html>

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

<!DOCTYPE html>
<html>
<body><h1>我的第一个 Web 页面</h1><p>我的第一个段落。</p><script>
document.write(Date());
</script></body>
</html>

3.1.3 使用 innerHTML 写入到 HTML 元素

<!DOCTYPE html>
<html>
<body><h1>我的第一个 Web 页面</h1><p id="demo">我的第一个段落</p><script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script></body>
</html>

3.1.4 使用 console.log() 写入到浏览器的控制台

<!DOCTYPE html>
<html>
<body><h1>我的第一个 Web 页面</h1><script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script></body>
</html>

4. JavaScript 语法

JavaScript 是一个程序语言。语法规则定义了语言结构。

4.1 JavaScript 语法

JavaScript 是一个脚本语言。

它是一个轻量级，但功能强大的编程语言。

4.2 JavaScript 字面量

在编程语言中，一般固定值称为字面量，如 3.14。

4.2.1 数字（Number）字面量

可以是整数或者是小数，或者是科学计数(e)。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body><p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 123e5;
</script></body>
</html>

4.2.2 字符串（String）字面量 可以使用单引号或双引号:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body><p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 'John Doe';
</script></body>
</html>

4.2.3 表达式字面量 用于计算：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body><p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 * 10;
</script></body>
</html>

4.2.4 数组（Array）字面量

定义一个数组：

[40, 100, 1, 5, 25, 10]

4.2.5 对象（Object）字面量

定义一个对象：

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

4.2.6 函数（Function）字面量

定义一个函数：

function myFunction(a, b) { return a * b;}

5. JavaScript 变量

在编程语言中，变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body><p id="demo"></p>
<script>
var length;
length = 6;
document.getElementById("demo").innerHTML = length;
</script></body>
</html>

变量可以通过变量名访问。在指令式语言中，变量通常是可变的。字面量是一个恒定的值。变量是一个名称。字面量是一个值。