1、前言
HTML管页面结构，CSS管页面样式，JavaScript管页面逻辑、页面行为、与后台交互等。
CSS已经学完了，下面开始JavaScript学习。我推荐下面的教程，如果学完了HTML+CSS，同时具有java、c++等编程基础，看起来嗖嗖快：
https://www.w3school.com.cn/js/index.asp
下面介绍一些基本语法：
2、JavaScript使用：
- 在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。
- 脚本可以任意数量。可被放置与 HTML 页面的 <body> 或 <head> 部分中，或兼而有之。
- 把脚本置于 <body> 元素的底部，可改善显示速度，因为脚本编译会拖慢显示。
- 在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”。
3、JavaScript引入：
3.1、内部引入：
- <body> 或 <head> 中，或兼而有之；通过 <script> JavaScript代码 </script> 引入。
3.2、外部引入：
- 外部脚本很实用，如果相同的脚本被用于许多不同的网页。
- JavaScript 文件的文件扩展名是 .js。
- HTML中的引入方式：<script src="echarts.js"></script>。可通过完整的 URL 链接至脚本：<script src="https://www.w3school.com.cn/js/myScript1.js"></script>，但必须是能上网的时候。
- 可以在 <head> 或 <body> 中放置外部脚本引用。
- 外部引入的优势包括：①分离了 HTML 和代码、②使 HTML 和 JavaScript 更易于阅读和维护、③已缓存的 JavaScript 文件可加速页面加载。
4、JavaScript输出：
JavaScript 能够以不同方式“显示”数据：
- 使用 innerHTML 写入 HTML 元素*****
- 使用 window.alert() 写入警告框****
- 使用 document.write() 写入 HTML 输出*
- 使用 console.log() 写入浏览器控制台*
5、JavaScript数据类型：
JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：
- var length = 7; // 数字
- var lastName = "Gates"; // 字符串
- var cars = ["Porsche", "Volvo", "BMW"]; // 数组
- var x = {firstName:"Bill", lastName:"Gates"}; // 对象
6、JavaScript函数：
- function name(参数 1, 参数 2, 参数 3) {
要执行的代码；
}
7、JavaScript对象：
对象有属性也有方法。名称:值对被称为属性。方法是在对象上执行的动作，方法以函数定义被存储在属性中。
var person = {
firstName: "Bill", //属性。
lastName : "Gates", //属性。
id : 678, //属性。
fullName : function() { //函数，以属性的形式保存在对象中。
return this.firstName + " " + this.lastName;
}
};
8、JavaScript事件：
HTML 事件可以是浏览器或用户做的某些事情。下面是 HTML 事件的一些简单例子：
- HTML 网页完成加载
- HTML 输入字段被修改
- HTML 按钮被点击
通常，当事件发生时，用户会希望做某件事。JavaScript 允许您在事件被侦测到时执行代码。通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。例：
-
<button οnclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>
下面是一些常见的 HTML 事件：
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素已被改变 |
| onclick | 用户点击了 HTML 元素 |
| onmouseover | 用户把鼠标移动到 HTML 元素上 |
| onmouseout | 用户把鼠标移开 HTML 元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已经完成页面加载 |
9、JavaScript字符串：
JavaScript 字符串是引号中的零个或多个字符。您能够使用单引号或双引号，您可以在字符串中使用引号，但注意转义：
| 代码 | 结果 | 描述 |
|---|---|---|
| \' | ' | 单引号 |
| \" | " | 双引号 |
| \\ | \ | 反斜杠 |
内建属性 length 可返回字符串的长度：
-
var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; var sln = txt.length;
字符串的属性和方法（标记*为常用）：
| 属性 | 描述 |
|---|---|
| constructor | 对创建该对象的函数的引用 |
| *length | 字符串的长度 |
| prototype | 允许您向对象添加属性和方法 |
| 方法 | 描述 |
|---|---|
| anchor() | 创建 HTML 锚。 |
| big() | 用大号字体显示字符串。 |
| blink() | 显示闪动字符串。 |
| bold() | 使用粗体显示字符串。 |
| charAt() | 返回在指定位置的字符。 |
| charCodeAt() | 返回在指定的位置的字符的 Unicode 编码。 |
| concat() | 连接字符串。 |
| fixed() | 以打字机文本显示字符串。 |
| fontcolor() | 使用指定的颜色来显示字符串。 |
| fontsize() | 使用指定的尺寸来显示字符串。 |
| fromCharCode() | 从字符编码创建一个字符串。 |
| *indexOf() | 检索字符串。 |
| italics() | 使用斜体显示字符串。 |
| lastIndexOf() | 从后向前搜索字符串。 |
| link() | 将字符串显示为链接。 |
| localeCompare() | 用本地特定的顺序来比较两个字符串。 |
| match() | 找到一个或多个正则表达式的匹配。 |
| replace() | 替换与正则表达式匹配的子串。 |
| search() | 检索与正则表达式相匹配的值。 |
| slice() | 提取字符串的片断，并在新的字符串中返回被提取的部分。 |
| small() | 使用小字号来显示字符串。 |
| *split() | 把字符串分割为字符串数组。 |
| strike() | 使用删除线来显示字符串。 |
| sub() | 把字符串显示为下标。 |
| *substr() | 从起始索引号提取字符串中指定数目的字符。 |
| *substring() | 提取字符串中两个指定的索引号之间的字符。 |
| sup() | 把字符串显示为上标。 |
| toLocaleLowerCase() | 把字符串转换为小写。 |
| toLocaleUpperCase() | 把字符串转换为大写。 |
| *toLowerCase() | 把字符串转换为小写。 |
| *toUpperCase() | 把字符串转换为大写。 |
| toSource() | 代表对象的源代码。 |
| *toString() | 返回字符串。 |
| valueOf() | 返回某个字符串对象的原始值。 |
10、JavaScript数字：
JavaScript 只有一种数值类型。书写数值时带不带小数点均可。超大或超小的数可通过科学计数法来写：
-
var x = 123e5; // 12300000 var y = 123e-5; // 0.00123
JavaScript 数值始终是 64 位的浮点数。与许多其他编程语言不同，JavaScript 不会定义不同类型的数，比如整数、短的、长的、浮点的等等。JavaScript 数值始终以双精度浮点数来存储。
- 整数（不使用指数或科学计数法）会被精确到 15 位。
- 小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准。
- JavaScript 会把前缀为 0x 的数值常量解释为十六进制。
- 绝不要用前导零写数字（比如 07）。一些 JavaScript 版本会把带有前导零的数解释为八进制。
NaN 属于 JavaScript 保留词，指示某个数不是合法数（即Not a Number）。可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数。
JavaScript数字方法：
| 全局方法 | 描述 |
|---|---|
| Number() | 返回数字，由其参数转换而来。 |
| parseFloat() | 解析其参数并返回浮点数。 |
| parseInt() | 解析其参数并返回整数。 |
JavaScript数值属性：
| 属性 | 描述 |
|---|---|
| MAX_VALUE | 返回 JavaScript 中可能的最大数。 |
| MIN_VALUE | 返回 JavaScript 中可能的最小数。 |
| NEGATIVE_INFINITY | 表示负的无穷大（溢出返回）。 |
| NaN | 表示非数字值（"Not-a-Number"）。 |
| POSITIVE_INFINITY | 表示无穷大（溢出返回）。 |
Number 对象方法：
| 方法 | 描述 |
|---|---|
| toString | 把数字转换为字符串，使用指定的基数。 |
| toLocaleString | 把数字转换为字符串，使用本地数字格式顺序。 |
| toFixed | 把数字转换为字符串，结果的小数点后有指定位数的数字。 |
| toExponential | 把对象的值转换为指数计数法。 |
| toPrecision | 把数字格式化为指定的长度。 |
| valueOf | 返回一个 Number 对象的基本数字值。 |
11、JavaScript数组：
可通过引用数组名来访问完整数组：
-
var cars = ["Saab", "Volvo", "BMW"]; document.getElementById("demo").innerHTML = cars;
数组内元素也可以是对象、数组（本质上也是对象）。数组和对象的区别：
- 在 JavaScript 中，数组使用数字索引。
- 在 JavaScript 中，对象使用命名索引。
- 数组是特殊类型的对象，具有数字索引。
何时使用数组，何时使用对象？
- JavaScript 不支持关联数组
- 如果希望元素名为字符串（文本）则应该使用对象。
- 如果希望元素名为数字则应该使用数组。
避免 new Array()，请使用 [] 取而代之！
-
var points = new Array(); // 差 var points = []; // 优
既然数组也是对象，那如何识别数组？常见的问题是：我如何知晓某个变量是否是数组？
- ECMAScript 5 定义了新方法 Array.isArray()。
- 对于低版本，可以创建您自己的 isArray() 函数以解决此问题：
function isArray(x) { return x.constructor.toString().indexOf("Array") > -1; }
数组的真实力量隐藏在数组的属性和方法中（*号标记为常用）：
| 属性 | 描述 |
|---|---|
| constructor | 返回对创建此对象的数组函数的引用。 |
| *length | 设置或返回数组中元素的数目。 |
| prototype | 使您有能力向对象添加属性和方法。 |
| 方法 | 描述 |
|---|---|
| *concat() | 连接两个或更多的数组，并返回结果。 |
| *join() | 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 |
| *pop() | 删除并返回数组的最后一个元素 |
| *push() | 向数组的末尾添加一个或更多元素，并返回新的长度。 |
| *reverse() | 颠倒数组中元素的顺序。 |
| shift() | 删除并返回数组的第一个元素 |
| slice() | 从某个已有的数组返回选定的元素 |
| *sort() | 对数组的元素进行排序 |
| splice() | 删除元素，并向数组添加新元素。 |
| toSource() | 返回该对象的源代码。 |
| toString() | 把数组转换为字符串，并返回结果。 |
| toLocaleString() | 把数组转换为本地数组，并返回结果。 |
| unshift() | 向数组的开头添加一个或更多元素，并返回新的长度。 |
| valueOf() | 返回数组对象的原始值 |
12、JavaScript数组迭代：
Array.forEach()。forEach() 方法为每个数组元素调用一次函数（回调函数）：
-
var txt = ""; var numbers = [45, 4, 9, 16, 25]; numbers.forEach(myFunction); function myFunction(value) { txt = txt + value + "<br>"; }
Array.map()。map() 方法通过对每个数组元素执行函数来创建新数组。map() 方法不会对没有值的数组元素执行函数。map() 方法不会更改原始数组：
-
var numbers1 = [45, 4, 9, 16, 25]; var numbers2 = numbers1.map(myFunction); function myFunction(value, index, array) { return value * 2; }
Array.filter()。filter() 方法创建一个包含通过测试的数组元素的新数组。这个例子用值大于 18 的元素创建一个新数组：
-
var numbers = [45, 4, 9, 16, 25]; var over18 = numbers.filter(myFunction); function myFunction(value, index, array) { return value > 18; }
13、JavaScript-JSON：
JSON 是存储和传输数据的格式。JSON 经常在数据从服务器发送到网页时使用。什么是 JSON？
- JSON 指的是 JavaScript Object Notation
- JSON 是轻量级的数据交换格式
- JSON 独立于语言 *
- JSON 是“自描述的”且易于理解
* JSON 的语法是来自 JavaScript 对象符号的语法，但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。JSON 语法规则：
- 数据是名称/值对
- 数据由逗号分隔
- 花括号保存对象
- 方括号保存数组
JSON 格式在语法上与创建 JavaScript 对象的代码相同。由于这种相似性，JavaScript 程序可以很容易地将 JSON 数据转换成本地的 JavaScript 对象。但也有不同点，如下：
①名称/值对由（双引号中的）字段名构成，其后是冒号，再其后是值。但JSON 名称需要双引号，而JavaScript 名称不需要。
-
"firstName":"Bill"
②类似 JavaScript，数组能够包含对象：在下面的例子中，对象 "employees" 是一个数组，用双引号括起来。
-
"employees":[ {"firstName":"Bill", "lastName":"Gates"}, {"firstName":"Steve", "lastName":"Jobs"}, {"firstName":"Alan", "lastName":"Turing"} ]
那么，如何把 JSON 文本转换为 JavaScript 对象？很简单：
①JSON 的通常用法是从 web 服务器读取数据，然后在网页中显示数据。为了简单起见，可以使用字符串作为输入演示。首先，创建包含 JSON 语法的 JavaScript 字符串：
-
var text = '{ "employees" : [' + '{ "firstName":"Bill" , "lastName":"Gates" },' + '{ "firstName":"Steve" , "lastName":"Jobs" },' + '{ "firstName":"Alan" , "lastName":"Turing" } ]}';
②然后，使用 JavaScript 的内建函数 JSON.parse() 来把这个字符串转换为 JavaScript 对象：
-
var obj = JSON.parse(text);
③最后，请在您的页面中使用这个新的 JavaScript 对象：
-
<p id="demo"></p> <script> document.getElementById("demo").innerHTML = obj.employees[1].firstName + " " + obj.employees[1].lastName; </script>
扫一扫
840
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
