JavaScript基础总结

一、JavaScript 简介

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。

• 用途
  直接写入 HTML 输出流
  对事件的反应
  改变 HTML 内容
  改变 HTML 图像
  改变 HTML 样式
  验证输入

二、JavaScript用法

HTML 中的脚本必须位于 < script> 与 < /script> 标签之间。
脚本可被放置在 HTML 页面的 < body> 和 < head> 部分中。

JavaScript 函数和事件

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。
如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

Chrome 浏览器中执行 JavaScript

为大家介绍如何在 Chrome 浏览器上进行 JavaScript 代码的运行与调试。
我们在 Chrome 浏览器中可以通过按下 F12 按钮或者右击页面，选择"检查"来开启开发者工具。

1. Console 窗口调试 JavaScript 代码
   打开开发者工具后，我们可以在 Console 窗口调试 JavaScript代码，如下图：
   

2. Chrome snippets 小脚本
   我们也可以在 Chrome 浏览器中创建一个脚本来执行，在开发者工具中点击 Sources 面板，选择 Snippets 选项卡，在导航器中右击鼠标，然后选择 Create new snippet 来新建一个脚本文件：
   

JavaScript 输出

JavaScript 没有任何打印或者输出的函数。
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

三、JavaScript 语法

3.1JavaScript 字面量

1. 字符串（String）字面量

"John Doe"
'John Doe'

2. 表达式字面量

5 + 6
5 * 10

3. 数组（Array）字面量

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

4. 对象（Object）字面量

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

5. 函数（Function）字面量

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

3.2JavaScript 变量

在编程语言中，变量用于存储数据值。
JavaScript 使用关键字 var 来定义变量， 使用等号来为变量赋值：

var x, length
x = 5
length = 6

3.3JavaScript 语句

JavaScript 语句是发给浏览器的命令。
这些命令的作用是告诉浏览器要做的事情。
下面的 JavaScript 语句向 id=“demo” 的 HTML 元素输出文本 “你好 Dolly” ：

document.getElementById("demo").innerHTML = "你好 Dolly";

• JavaScript 代码块
  JavaScript 可以分批地组合起来。
  代码块以左花括号开始，以右花括号结束。
  代码块的作用是一并地执行语句序列。

function myFunction()
{
    document.getElementById("demo").innerHTML="你好Dolly";
    document.getElementById("myDIV").innerHTML="你最近怎么样?";
}

3.4JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

3.5JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。

3.6JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

常见的HTML事件

事件				描述
onchange			HTML 元素改变
onclick				用户点击 HTML 元素
onmouseover			用户在一个HTML元素上移动鼠标
onmouseout			用户从一个HTML元素上移开鼠标
onkeydown			用户按下键盘按键
onload				浏览器已完成页面的加载

3.7JavaScript 表单

HTML 表单验证可以通过 JavaScript 来完成。
以下实例代码用于判断表单字段(fname)值是否存在， 如果不存在，就弹出信息，阻止表单提交：

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

HTML 约束验证
HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。
约束验证是表单被提交时浏览器用来实现验证的一种算法。
HTML 约束验证基于：

HTML 输入属性
CSS 伪类选择器
DOM 属性和方法

• 约束验证 HTML 输入属性

属性			描述
disabled		规定输入的元素不可用
max				规定输入元素的最大值
min				规定输入元素的最小值
pattern			规定输入元素值的模式
required		规定输入元素字段是必需的
type 			规定输入元素的类型

• 约束验证 CSS 伪类选择器

选择器			描述
:disabled		选取属性为 "disabled" 属性的 input 元素
:invalid		选取无效的 input 元素
:optional		选择没有"optional"属性的 input 元素
:required		选择有"required"属性的 input 元素
:valid			选取有效值的 input 元素

3.8JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

3.9JavaScript JSON

JSON 是用于存储和传输数据的格式。
JSON 通常用于服务端向网页传递数据

• JSON 语法规则
  数据为 键/值 对。
  数据由逗号分隔。
  大括号保存对象
  方括号保存数组

实例

{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

创建 JavaScript 字符串，字符串为 JSON 格式的数据：

var text = '{ "sites" : [' +
'{ "name":"Runoob" , "url":"www.runoob.com" },' +
'{ "name":"Google" , "url":"www.google.com" },' +
'{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

使用 JavaScript 内置函数 JSON.parse() 将字符串转换为 JavaScript 对象:

var obj = JSON.parse(text);

最后，在你的页面中使用新的 JavaScript 对象：

var text = '{ "sites" : [' +
    '{ "name":"Runoob" , "url":"www.runoob.com" },' +
    '{ "name":"Google" , "url":"www.google.com" },' +
    '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
    
obj = JSON.parse(text);
document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

3.10 JavaScript 异步编程

我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情，比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。
为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

• 回调函数
  回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。

除了 setTimeout 函数以外，异步回调广泛应用于 AJAX 编程。

四、JavaScript HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

HTML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
HTML DOM 模型被构造为对象的树：

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。
为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

1. 通过 id 找到 HTML 元素

var x=document.getElementById("intro");

2. 通过标签名找到 HTML 元素

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

3. 通过类名找到 HTML 元素

var x=document.getElementsByClassName("intro");

JavaScript Cookie

Cookie 用于存储 web 页面的用户信息。
JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。