学习笔记_JavaScript基础_1
JS 简介
JavaScript 是属于 HTML 和 Web 的编程语言。
编程令计算机完成您需要它们做的工作。
JavaScript 很容易学习。
为何学习 JavaScript？
JavaScript 是 web 开发者必学的三种语言之一：
- HTML 定义网页的内容
- CSS 规定网页的布局
- JavaScript 对网页行为进行编程
JavaScript 简介
JavaScript 能够改变 HTML 内容
getElementById() 是多个 JavaScript HTML 方法之一。
本例使用该方法来“查找” id=“demo” 的 HTML 元素，并把元素内容（innerHTML）更改为 “Hello JavaScript”：
实例
document.getElementById("demo").innerHTML = "Hello JavaScript";
document.getElementById("demo").innerHTML = 'Hello JavaScript';
-
JavaScript 能够改变 HTML 属性
通过改变
标签的 src 属性（source）来改变一张 HTML 图像
JavaScript 能够改变 HTML 样式 (CSS)
改变 HTML 元素的样式，是改变 HTML 属性的一种变种：
实例
document.getElementById("demo").style.fontSize = "25px";
- JavaScript 能够隐藏 HTML 元素
可通过改变 display 样式来隐藏 HTML 元素：
实例
document.getElementById("demo").style.display="none";
- JavaScript 能够显示 HTML 元素
可通过改变 display 样式来显示隐藏的 HTML 元素：
实例
document.getElementById("demo").style.display="block";
JavaScript 使用
JS 输出
<script> 标签
在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
实例
<script>
document.getElementById("demo").innerHTML = "我的第一段 JavaScript";
</script>
注释：旧的 JavaScript 例子也许会使用 type 属性：<script type=“text/javascript”>。
注释：type 属性不是必需的。JavaScript 是 HTML 中的默认脚本语言。
-
<head> 或<body> 中的 JavaScript
您能够在 HTML 文档中放置任意数量的脚本。
脚本可被放置与 HTML 页面的 或 部分中，或兼而有之。 -
<head> 中的 JavaScript
在本例中，JavaScript 函数被放置于 HTML 页面的 <head> 部分。
该函数会在按钮被点击时调用：
实例
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>
<body>
<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>
</body>
</html>
提示：把脚本置于 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
外部脚本
脚本可放置与外部文件中：
外部文件：myScript.js
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
外部脚本很实用，如果相同的脚本被用于许多不同的网页。
JavaScript 文件的文件扩展名是 .js。
如需使用外部脚本，请在 <script> 标签的 src (source) 属性中设置脚本的名称：
实例
<script src="myScript.js"></script>
您可以在 <head> 或 <body> 中放置外部脚本引用。
该脚本的表现与它被置于 <script> 标签中是一样的。
注释：外部脚本不能包含 <script> 标签。
外部 JavaScript 的优势
在外部文件中放置脚本有如下优势：
- 分离了 HTML 和代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载
如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：
实例
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部引用
可通过完整的 URL 或相对于当前网页的路径引用外部脚本
<script src="https://www.xxxx.com/js/myScript1.js"></script>
JavaScript 输出
JavaScript 不提供任何内建的打印或显示函数。
JavaScript 显示方案
JavaScript 能够以不同方式“显示”数据：
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
使用 innerHTML
如需访问 HTML 元素，JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容：
实例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>
提示：更改 HTML 元素的 innerHTML 属性是在 HTML 中显示数据的常用方法。
使用 document.write()
出于测试目的，使用 document.write() 比较方便：
实例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>
注意：在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML ：
实例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<button onclick="document.write(5 + 6)">试一试</button>
</body>
</html>
提示：document.write() 方法仅用于测试。
使用 window.alert()
您能够使用警告框来显示数据：
实例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>
使用 console.log()
在浏览器中，您可使用 console.log() 方法来显示数据。
请通过 F12 来激活浏览器控制台，并在菜单中选择“控制台”。
实例
<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>
JavaScript 语句
在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”。
实例
var x, y, z; // 语句 1
x = 22; // 语句 2
y = 11; // 语句 3
z = x + y; // 语句 4
JavaScript 程序
- 计算机程序是由计算机“执行”的一系列“指令”。
- 在编程语言中，这些编程指令被称为语句。
- JavaScript 程序就是一系列的编程语句。
注释：在 HTML 中，JavaScript 程序由 web 浏览器执行。
JavaScript 语句
JavaScript 语句由以下构成：
值、运算符、表达式、关键词和注释。
这条语句告诉浏览器在 id=“demo” 的 HTML 元素中输出 “Hello Kitty.”：
实例
document.getElementById("demo").innerHTML = "Hello Kitty.";
大多数 JavaScript 程序都包含许多 JavaScript 语句。
这些语句会按照它们被编写的顺序逐一执行。
注释：JavaScript 程序（以及 JavaScript 语句）常被称为 JavaScript 代码。
分号( ; )
分号分隔 JavaScript 语句。
请在每条可执行的语句之后添加分号：
a = 5;
b = 6;
c = a + b;
如果有分号分隔，允许在同一行写多条语句：
a = 5; b = 6; c = a + b;
可能在网上看到不带分号的例子。
提示：以分号结束语句不是必需的，但我们仍然强烈建议您这么做。
JavaScript 空白字符
JavaScript 会忽略多个空格。您可以向脚本添加空格，以增强可读性。
下面这两行是相等的：
var person = "Bill";
var person="Bill";
在运算符旁边（ = + - * / ）添加空格是个好习惯：
var x = y + z;
JavaScript 行长度和折行
为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。
如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符：
实例
document.getElementById("demo").innerHTML =
"Hello Kitty.";
JavaScript 代码块
JavaScript 语句可以用花括号（{...}）组合在代码块中。
代码块的作用是定义一同执行的语句。
您会在 JavaScript 中看到成块组合在一起的语句：
实例
function myFunction() {
document.getElementById("demo").innerHTML = "Hello Kitty.";
document.getElementById("myDIV").innerHTML = "How are you?";
}
注释：在本教程中我们为代码块用了 4 个空格的缩进。
JavaScript 关键词
JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。
下面的表格列出了一部分将在教程中学到的关键词：
| 关键词 | 描述 |
|---|---|
| break | 终止 switch 或循环。 |
| continue | 跳出循环并在顶端开始。 |
| debugger | 停止执行 JavaScript，并调用调试函数（如果可用）。 |
| do … while | 执行语句块，并在条件为真时重复代码块。 |
| for | 标记需被执行的语句块，只要条件为真。 |
| function | 声明函数。 |
| if … else | 标记需被执行的语句块，根据某个条件。 |
| return | 退出函数。 |
| switch | 标记需被执行的语句块，根据不同的情况。 |
| try … catch | 对语句块实现错误处理。 |
| var | 声明变量。 |
注释：JavaScript 关键词指的是保留的单词。保留词无法用作变量名。
JavaScript 语法
JavaScript 语法是一套规则，它定义了 JavaScript 的语言结构。
var x, y; // 如何声明变量
x = 7; y = 8; // 如何赋值
z = x + y; // 如何计算值
JavaScript 值
JavaScript 语句定义两种类型的值：混合值和变量值。
混合值被称为字面量（literal）。变量值被称为变量。
JavaScript 字面量
-
书写混合值最重要的规则是：
写数值有无小数点均可：15.90
10011
-
字符串是文本，由双引号或单引号包围：
"Bill Gates" 'Bill Gates'
JavaScript 变量
在编程语言中，变量用于存储数据值。
JavaScript 使用 var 关键词来声明变量。
= 号用于为变量赋值。
在本例中，x 被定义为变量。然后，x 被赋的值是 7：
var x;
x = 7;
JavaScript 运算符
JavaScript 使用算数运算符（+ - * /）来计算值：
(7 + 8) * 10
JavaScript 使用赋值运算符（=）向变量赋值：
var x, y;
var x = 7;
var y = 8;
值可以是多种类型，比如数值和字符串。
例如：
"Bill" + " " + "Gates"，计算为 "Bill Gates"：
"Bill" + " " + "Gates"
JavaScript 关键词
JavaScript 关键词用于标识被执行的动作。
var 关键词告知浏览器创建新的变量：
var x = 7 + 8;
var y = x * 10;
JavaScript 注释
并非所有 JavaScript 语句都被“执行”。
双斜杠 // 或 /* 与 */ 之间的代码被视为注释。
注释会被忽略，不会被执行：
var x = 7; // 会执行
// var x = 8; 不会执行
JavaScript 标识符
标识符是名称。
-
在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。
-
在大多数编程语言中，合法名称的规则大多相同。
-
在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。
-
连串的字符可以是字母、数字、下划线或美元符号。
提示：数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。
JavaScript 对大小写敏感
所有 JavaScript 标识符对大小写敏感。
变量 lastName 和 lastname，是两个不同的变量。
lastName = "Gates";
lastname = "Jobs";
JavaScript 不会把 VAR 或 Var 译作关键词 var。
JavaScript 与驼峰式大小写
历史上，程序员曾使用三种把多个单词连接为一个变量名的方法：
连字符：
first-name, last-name, master-card, inter-city.
注释：JavaScript 中不能使用连字符。它是为减法预留的。
下划线：
first_name, last_name, master_card, inter_city.
驼峰式大小写（Camel Case）：
FirstName, LastName, MasterCard, InterCity.
JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写：
firstName, lastName, masterCard, interCity
JavaScript 字符集
JavaScript 使用 Unicode 字符集。
Unicode 覆盖世界上几乎所有的字符、标点和符号。
JavaScript 注释（2）
JavaScript 注释用于解释 JavaScript 代码，增强其可读性。
JavaScript 注释也可以用于在测试替代代码时阻止执行。
单行注释
单行注释以 // 开头。
任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。
本例在每条代码行之前使用单行注释：
实例
// 改变标题：
document.getElementById("myH").innerHTML = "我的第一张页面";
// 改变段落：
document.getElementById("myP").innerHTML = "我的第一个段落。";
本例在每行结尾处使用了单行注释来解释代码：
实例
var x = 5; // 声明 x，为其赋值 5
var y = x + 2; // 声明 y，为其赋值 x + 2