外部 JavaScript 的优势
在外部文件中放置脚本有如下优势：
分离了 HTML 和代码
- 使 HTML 和 JavaScript 更易于阅读和维护
- 已缓存的 JavaScript 文件可加速页面加载
- 如需向一张页面添加多个脚本文件 - 请使用多个 script 标签：
<script src="myScript1.js"></script>
<script src="myScript2.js"></script>
外部引用
可通过完整的 URL 或相对于当前网页的路径引用外部脚本：
本例使用完整的 URL 来链接至脚本：
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>
JavaScript 显示方案
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
分号 ;
- 分号分隔 JavaScript 语句。
- 请在每条可执行的语句之后添加分号：
JavaScript 行长度和折行
为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。
如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符：
JavaScript 关键词
JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。
下面的表格列出了一部分将在教程中学到的关键词：
JavaScript 关键词指的是保留的单词。保留词无法用作变量名。
JavaScript 变量
在编程语言中，变量用于存储数据值。
JavaScript 使用 var 关键词来声明变量。
= 号用于为变量赋值。
JavaScript 标识符
标识符是名称。
在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。
在大多数编程语言中，合法名称的规则大多相同。
在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。
连串的字符可以是字母、数字、下划线或美元符号。
提示：数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。
JavaScript 与驼峰式大小写
注释
多行注释 - 多行注释以 /* 开头，以 */ 结尾。//单行
JavaScript 运算符
JavaScript 数据类型
JavaScript 变量能够保存多种数据类型：数值、字符串值、数组、对象等等：
var length = 7; // 数字
var lastName = "Gates"; // 字符串
var cars = ["Porsche", "Volvo", "BMW"]; // 数组
var x = {firstName:"Bill", lastName:"Gates"}; // 对象
Null
在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。
不幸的是，在 JavaScript 中，null 的数据类型是对象。
您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。
您可以通过设置值为 null 清空对象：
var person = null; // 值是 null，但是类型仍然是对象
var person = undefined; // 值是 undefined，类型是 undefined
Undefined 与 null 的值相等，但类型不相等：
typeof undefined // undefined
typeof null // object
null === undefined // false
null == undefined // true
您也可以通过设置值为 undefined 清空对象：
局部变量
在 JavaScript 函数中声明的变量，会成为函数的局部变量。
局部变量只能在函数内访问。
this 关键词
在函数定义中，this 引用该函数的“拥有者”。
在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。
换言之，this.firstName 的意思是 this 对象的 firstName 属性。
请在 JS this 关键词这一章学习更多有关 this 关键词的知识。
访问对象属性
您能够以两种方式访问属性：
objectName.propertyName
objectName["propertyName"]
HTML 事件
HTML 事件可以是浏览器或用户做的某些事情。
- HTML 网页完成加载
- HTML 输入字段被修改
- HTML 按钮被点击
通常，当事件发生时，用户会希望做某件事。
JavaScript 允许您在事件被侦测到时执行代码。
替换字符串内容
replace() 方法用另一个值替换在字符串中指定的值：
str = "Please visit Microsoft!";
var n = str.replace("Microsoft", "W3School");
Array.forEach()
forEach() 方法为每个数组元素调用一次函数（回调函数）。
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value, index, array) {
txt = txt + value + "<br>";
}
var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);
function myFunction(value) {
txt = txt + value + "<br>";
}
创建 Date 对象
Date 对象由新的 Date() 构造函数创建。
有 4 种方法创建新的日期对象：
- new Date()
- new Date(year, month, day, hours, minutes, seconds, milliseconds)
- new Date(milliseconds)
- new Date(date string)
-
条件语句
在您写代码时，经常会需要基于不同判断执行不同的动作。
您可以在代码中使用条件语句来实现这一点。
在 JavaScript 中，我们可使用如下条件语句：
- 使用 if 来规定要执行的代码块，如果指定条件为 true
- 使用 else 来规定要执行的代码块，如果相同的条件为 false
- 使用 else if 来规定要测试的新条件，如果第一个条件为 false
- 使用 switch 来规定多个被执行的备选代码块
JavaScript Switch 语句
switch(表达式) {
case n:
代码块
break;
case n:
代码块
break;
default:
默认代码块
}
代码解释：
计算一次 switch 表达式
把表达式的值与每个 case 的值进行对比
如果存在匹配，则执行关联代码
不同类型的循环
JavaScript 支持不同类型的循环：
for - 多次遍历代码块
for/in - 遍历对象属性
while - 当指定条件为 true 时循环一段代码块
do/while - 当指定条件为 true 时循环一段代码块
While 循环
while 循环会一直循环代码块，只要指定的条件为 true。
JavaScript 数据类型
- JavaScript 中有五种可包含值的数据类型：
字符串（string）
数字（number）
布尔（boolean）
对象（object）
函数（function） - 有三种对象类型：
对象（Object）
日期（Date）
数组（Array） - 同时有两种不能包含值的数据类型：
null
undefined - typeof 运算符
您可以使用 typeof 运算符来确定 JavaScript 变量的数据类型。
-NaN 的数据类型是数值
数组的数据类型是对象
日期的数据类型是对象
null 的数据类型是对象
未定义变量的数据类型是 undefined
尚未赋值的变量的数据类型也是 undefined
您无法使用 typeof 去判断 JavaScript 对象是否是数组（或日期）
JavaScript 错误 - Throw 和 Try to Catch
try 语句使您能够测试代码块中的错误。
catch 语句允许您处理错误。
throw 语句允许您创建自定义错误。
finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。
function myFunction() {
var message, x;
message = document.getElementById("message");
message.innerHTML = "";
x = document.getElementById("demo").value;
try {
if(x == "") throw "是空的";
if(isNaN(x)) throw "不是数字";
x = Number(x);
if(x > 10) throw "太大";
if(x < 5) throw "太小";
}
catch(err) {
message.innerHTML = "错误：" + err + ".";
}
finally {
document.getElementById("demo").value = "";
}
}
JavaScript 函数作用域
在 JavaScript 中有两种作用域类型：
- 局部作用域
- 全局作用域
JavaScript 拥有函数作用域：每个函数创建一个新的作用域。
作用域决定了这些变量的可访问性（可见性）。
函数内部定义的变量从函数外部是不可访问的（不可见的）。
== “use strict”; 定义 JavaScript 代码应该以“严格模式”执行。==
this 是什么？
JavaScript this 关键词指的是它所属的对象。
它拥有不同的值，具体取决于它的使用位置：
在方法中，this 指的是所有者对象。
单独的情况下，this 指的是全局对象。
在函数中，this 指的是全局对象。
在函数中，严格模式下，this 是 undefined。
在事件中，this 指的是接收事件的元素。
像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。
JavaScript 调试器
查找编程代码中的错误被称为代码调试。
调试并不简单。但幸运地是，所有现代浏览器都有内置的调试器。
内置的调试器可打开或关闭，强制将错误报告给用户。
通过调试器，您也可以设置断点（代码执行被中断的位置），并在代码执行时检查变量。
通常通过 F12 键启动浏览器中的调试器，然后在调试器菜单中选择“控制台”。
console.log() 方法
如果您的浏览器支持调试，那么您可以使用 console.log() 在调试窗口中显示 JavaScript 的值：
JavaScript 代码约定
代码约定(Coding conventions)指的是编程的样式指导方针。这些原则大体上包括：
变量和函数的命名和声明规则
使用空格、缩进和注释的规则
编程习惯和准则
代码约定确保质量：
改善代码可读性
提升代码可维护性
命名约定
请始终对您所有的代码使用相同的命名约定。例如：
变量和函数名以驼峰大小写来写
全局变量使用大写（我们不这样做，但是相当普遍）
常量（比如 PI）使用大写
我们是否应在变量名中使用连字符、驼峰大小写或下划线吗？
这是程序员们经常讨论的问题。答案取决于这个问题是谁回答的：
HTML 和 CSS 中的连字符：
HTML5 属性能够以 data- 开头（data-quantity, data-price）。
CSS 在 property-names 中使用连字符（font-size）。
Hyphens 可被错误地视为减法运算符。JavaScript 命名不允许使用连字符。
下划线：
许多程序员喜欢使用下划线（date_of_birth），特别是在 SQL 数据库中。
下划线经常被用在 PHP 参考资料中。
帕斯卡命名法（PascalCase）：
C 语言程序员经常使用帕斯卡命名法。
驼峰大小写（camelCase）：
JavaScript 本身、jQuery 以及其他 JavaScript 库使用驼峰大小写。
JavaScript 命名请不要以 $ 符号开头。此举会引起 JavaScript 库名称冲突。
文件扩展名
HTML 文件应该使用 .html 扩展名（而非 .htm）。
CSS 文件应该使用 .css 扩展名。
JavaScript 文件应该使用 .js 扩展名。
使用小写文件名
大多数 web 服务器（Apache、Unix）对文件名的大小写敏感：
london.jpg 无法视作 London.jpg 进行访问。
其他 web 服务器（微软的 IIS）对大小写不敏感：
london.jpg 能够以 London.jpg 或 london.jpg 来访问。
如果您混合使用大小写，则必须严格保持连续和一致。
如果您将站点从大小写不敏感的服务器转移至对大小写敏感的服务器，即使这种小错误也可能破坏您的网站。
为了避免这些问题，请始终使用小写文件名（如果可能）。
函数
- 什么是函数：函数是由一系列语句构成的完成特定功能的代码块。
- 函数编程的好处： 提高代码的复用性。提高程序的可维护性。
- 函数的分类：
3.1 系统函数 ：
比如 ： parseInt() | parseFloat() | prompt()
3.2 自定义函数
① 函数的声明：
function 函数名(参数表){
//函数体
}
② 函数的调用：
函数名(参数表);
③ 参数的定义：
- 参数不需要声明变量类型，直接书写变量名。
- JS函数的参数传递的个数与定义的个数可以不匹配。
- JS中任意一个函数，都有一个arguments对象， 用于保存传递的参数值。arguments对象类似一个数组, 可以通过arguments[index] 的方式访问参数值。
④ return关键字： - 可以给函数一个返回值。
- 结束当前函数的执行。
3.3 JS中特殊自定义函数 ：
① 匿名函数 【重点】
Var fn1 = function(){ // 将一个匿名函数 声明赋值给一个变量
}
Fn1(); // 调用匿名函数
② 函数如果重名，会出现覆盖的效果。
3.4 声明提前： 在JS中所有的变量与函数的声明都会提前到当前作用域的最上面，集中声明。但是实际的赋值保持当前位置不变。
3.5 全局作用域 与 局部作用域
① 全局作用域： 定义在全局作用域的变量，所有的位置都可以使用。
② 局部作用域： 函数的内部是局部作用域。 局部作用域中定义的变量 称为局部变量，只能在当前的局部作用域使用。
PS： 函数内部使用变量时， 自己有则不用全局的， 自己没有找全局。
3.6 特殊用法：
① 函数可以当做参数传递
② 函数可以嵌套定义
DOM (document object model) 【重点】
-
DOM-文档对象模型， 是将HTML文档中的元素，以一个DOM树的结构进行保存，方便我们变成操作HTML文档的结构。
-
DOM树的特点：
2.1 在DOM树上的每一个HTML标签称为一个节点(node)
2.2 每一个节点，只有一个直接的父节点
2.3 每一个节点， 有一到多个子节点。 -
使用DOM编程主要作用：
3.1 操作标签对象的属性
3.2 动态的操作HTML文档的结构。 比如动态的创建添加新的HTML元素， 动态的删除一个HTML元素等。
3.3 通过DOM编程完成表单验证。
-
获取标签对象
4.1 根据ID属性值获取： document.getElementById(ID);
4.2 根据name属性值获取： document.getElementsByName(name);
4.3 根据class属性值获取： document.getElementsByClassName(class);
4.4 根据标签名获取：document.getElementsByTagName(tagName); -
操作标签对象的属性
5.1 获取属性值： obj.attrName 、 obj.getAttribute(attrName)
5.2 设置属性值： obj.attrName = 新值 、 obj.setAttribute(attrName,newValue); -
操作标签体内容
6.1 获取
- obj.innerText | 只处理文本
- obj.innerHTML | 处理文本以及HTML标签
6.2 设置 - obj.innerText = 新内容 | 只处理文本
- obj.innerHTML = 新内容 | 处理文本以及HTML标签
- 对于单选按钮和多选框的操作：
- 选中 ： obj.checked=true / 取消选中： obj.checked=false;
- 获取当前状态 ： obj.checked
- 对于下拉列表的操作：
- 获取选中option的value: obj.value
- 获取选中option的下标：obj.selectedIndex
- 获取所有option选项的数组： obj.options
- 获取节点的关系节点
9.1 获取父节点： obj.parentNode
9.2 获取子节点： obj.childNodes
9.3 获取第一个子节点：obj.firstChild
9.4 获取上一个哥哥节点：obj.previousSibling
9.5 获取下一个弟弟节点：obj.nextSibling - 操作页面结构
10.1 添加
- 创建节点对象：document.createElement(标签名);
- 添加到原有的DOM树上：父节点.appendChild(子节点);
10.2 删除 - 父节点.removeChild(子节点);
浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() -移动当前窗口
- window.resizeTo() -重新调整当前窗口
- 窗口尺寸
两个属性可用用于确定浏览器窗口的尺寸。
window.innerHeight - 浏览器窗口的内高度（以像素计）
window.innerWidth - 浏览器窗口的内宽度（以像素计）
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
Window Location
window.location 对象可不带 window 前缀书写。
window.location.href 返回当前页面的 href (URL)
window.location.hostname 返回 web 主机的域名
window.location.pathname 返回当前页面的路径或文件名
window.location.protocol 返回使用的 web 协议（http: 或 https:）
window.location.assign 加载新文档
Window History
window.history 对象可不带 window 书写。
为了保护用户的隐私，JavaScript 访问此对象存在限制。
一些方法：
history.back() - 等同于在浏览器点击后退按钮
history.forward() - 等同于在浏览器中点击前进按钮
- 全称浏览器对象模型，主要是操作浏览器相关的动作。
- Window窗口对象使用：
2.1 弹窗提示： window.alert(提示信息);
2.2 接收用户信息: window.prompt(提示信息);
2.3 确认提示窗： window.confirm(提示信息); | 返回的是boolean值
2.4 打开一个新的窗口: window.open();
2.5 关闭当前窗口: window.close();
2.6 定时器：
- var id = window.setTimeout(function(){}, 时间/毫秒); | 定时任务执行一次
清除定时器： window.clearTimeout(id); - var id = window.setInterval(function(){}, 时间/毫秒); | 周期性执行定时任务
清除定时器： window.clearInterval(id);
- Location地址栏对象使用：
3.1 使用localtion对象跳转资源：
location.href=’目标路径’; - 手动提交表单： fomObj.submit();
cookies
冒泡事件
532
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
