JavaScript学习记录

JavaScript简介：

JavaScript 是一种解释型的脚本语言，被大量地应用于网页中，用以实现网页和浏览者的动态交互。目前几乎所有的浏览器都可以很好地支持 JavaScript。由于 JavaScript 可以及时响应浏览者的操作，控制页面的行为表现，提高用户体验，因而已经成为前端开发人员必须掌握的语言之一。

JavaScript输出

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

1、使用 window.alert() 弹出警告框。

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

3、使用 innerHTML 写入到 HTML 元素。

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

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

​JavaScript 字面量​

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

​1、整数、小数​

​2、字符串​

​3、数组​

​4、对象​

​5、函数​

JavaScript 变量

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

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

JavaScript 语句

在 HTML 中，JavaScript 语句向浏览器发出的命令。

语句是用分号分隔：

在 JavaScript 中，用分号来结束语句是可选的。

JavaScript 注释

双斜杠 // 后的内容将会被浏览器忽略。

JavaScript 数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

JavaScript 函数

JavaScript 语句可以写在函数内，函数可以重复引用：

引用一个函数 = 调用函数(执行函数内的语句)。

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}

JavaScript 代码块

JavaScript 可以分批地组合起来。

代码块以左花括号开始，以右花括号结束。

代码块的作用是一并地执行语句序列。

<script>
function myFunction(){
  document.getElementById("myPar").innerHTML="你好世界！";
  document.getElementById("myDiv").innerHTML="你最近怎么样?";
}
</script>

JavaScript 多行注释

多行注释以 /* 开始，以 */ 结尾。

JavaScript 变量

变量是用于存储信息的"容器"。

​JavaScript 数组​

​数组下标是基于零的，所以第一个项目是 [0]，第二个是 [1]，以此类推。​

var cars = ["Saab","Volvo","BMW"];

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={
    firstname : "John",
    lastname  : "Doe",
    id        :  5566
};

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

最常用的对象创建方式:

第一种：

function Demo(){
    var obj=new Object();
    obj.name="张思";
    obj.age=12;
    obj.firstF=function(){
    }
    obj.secondF=function(){
    }
    return obj;
}

var one=Demo();
// 调用输出
document.write(one.age);

​第二种：​

function Demo(){
    this.name="张思";
    this.age=12;
    this.firstF=function(){
    }
    this.secondF=function(){
    }
}

var one=new Demo

// 调用输出
document.write(one.age);

JavaScript 对象（2）

JavaScript 对象是拥有属性和方法的数据。

我们通常认为 "JavaScript 对象是键值对的容器"。

键值对通常写法为 name : value (键与值以冒号分割)。

键值对在 JavaScript 对象通常称为 对象属性。

对象键值对的写法类似于：

• PHP 中的关联数组
• Python 中的字典
• C 语言中的哈希表
• Java 中的哈希映射
• Ruby 和 Perl 中的哈希表

对象方法

对象的方法定义了一个函数，并作为对象的属性存储。

对象方法通过添加 () 调用 (作为一个函数)。

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()

{

   // 执行代码

}

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

JavaScript 字符串

JavaScript 字符串用于存储和处理文本。

字符串方法

方法                         描述

charAt()                 返回指定索引位置的字符

charCodeAt()         返回指定索引位置字符的 Unicode 值

concat()                 连接两个或多个字符串，返回连接后的字符串

fromCharCode()     将 Unicode 转换为字符串

indexOf()               返回字符串中检索指定字符第一次出现的位置

lastIndexOf()          返回字符串中检索指定字符最后一次出现的位置

localeCompare()     用本地特定的顺序来比较两个字符串

match()                  找到一个或多个正则表达式的匹配

replace()                替换与正则表达式匹配的子串

search()                 检索与正则表达式相匹配的值

slice()                  提取字符串的片断，并在新的字符串中返回被提取的部分

split()                  把字符串分割为子字符串数组

substr()               从起始索引号提取字符串中指定数目的字符

substring()          提取字符串中两个指定的索引号之间的字符

toLocaleLowerCase()        根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射

toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射

toLowerCase()                     把字符串转换为小写

toString()                            返回字符串对象值

toUpperCase()                     把字符串转换为大写

trim()                                  移除字符串首尾空白

valueOf()                             返回某个字符串对象的原始值

JavaScript 运算符

运算符 = 用于赋值。

运算符 + 用于加值。

用于字符串的 + 运算符

+ 运算符用于把文本值或字符串变量加起来（连接起来）。

如需把两个或多个字符串变量连接起来，请使用 + 运算符。

if...else 语句

请使用 if....else 语句在条件为 true 时执行代码，在条件为 false 时执行其他代码。

语法

if (condition)

{

   当条件为 true 时执行的代码

}

else

{

   当条件不为 true 时执行的代码

}

JavaScript switch 语句

switch 语句用于基于不同的条件来执行不同的动作。

语法

switch(n)

{

   case 1:

       执行代码块 1

       break;

   case 2:

       执行代码块 2

       break;

   default:

       与 case 1 和 case 2 不同时执行的代码

}

不同类型的循环

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数

for/in - 循环遍历对象的属性

while - 当指定的条件为 true 时循环指定的代码块

do/while - 同样当指定的条件为 true 时循环指定的代码块

For 循环

for 循环是您在希望创建循环时常会用到的工具。

下面是 for 循环的语法：

for (语句 1; 语句 2; 语句 3)

{

   被执行的代码块

}

语句 1 （代码块）开始前执行

语句 2 定义运行循环（代码块）的条件

语句 3 在循环（代码块）已被执行之后执行

For/In 循环

JavaScript for/in 语句循环遍历对象的属性：

while 循环

while 循环会在指定条件为真时循环执行代码块。

语法

while (条件)

{

   需要执行的代码

}

4 种循环的适用场景

for : 比较适合遍历数组,字符串等等。

for in : 比较适合遍历对象，遍历对象时使用这个再合适不过了。

while : while 的话，与 for 的使用场景差不多。唯一不同的是，遍历的条件必须满足。

do while : 至少执行一边的循环，遍历数组和字符串也是很方便。

JavaScript break 和 continue 语句

break 语句用于跳出循环。

continue 用于跳过循环中的一个迭代。

什么是正则表达式？

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

search() 方法使用正则表达式

实例

使用正则表达式搜索 "Runoob" 字符串，且不区分大小写：

var str = "Visit Runoob!";  

var n = str.search(/Runoob/i);

输出结果为：

6

正则表达式修饰符

修饰符 可以在全局搜索中不区分大小写:

正则表达式模式

方括号用于查找某个范围内的字符：

test() 方法是一个正则表达式方法。

test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

以下实例用于搜索字符串中的字符 "e"：

实例

var patt = /e/;

patt.test("The best things in life are free!");

字符串中含有 "e"，所以该实例输出为：

true

JavaScript 调试工具

在程序代码中寻找错误叫做代码调试。

调试很难，但幸运的是，很多浏览器都内置了调试工具。

内置的调试工具可以开始或关闭，严重的错误信息会发送给用户。

有了调试工具，我们就可以设置断点 (代码停止执行的位置), 且可以在代码执行时检测变量。

浏览器启用调试工具一般是按下 F12 键，并在调试菜单中选择 "Console" 。

在头部声明你的变量

对于大多数程序员来说并不知道 JavaScript 声明提升。

如果程序员不能很好的理解声明提升，他们写的程序就容易出现一些问题。

为了避免这些问题，通常我们在每个作用域开始前声明这些变量，这也是正常的 JavaScript 解析步骤，易于我们理解。

JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

JavaScript 异步编程

异步的概念

异步（Asynchronous, async）是与同步（Synchronous, sync）相对的概念。

在我们学习的传统单线程编程中，程序的运行是同步的（同步不意味着所有步骤同时运行，而是指步骤在一个控制流序列中按顺序执行）。而异步的概念则是不保证同步的概念，也就是说，一个异步过程的执行将不再与原有的序列有顺序关系。

简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。

HTML DOM (文档对象模型)

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

​HTML DOM​ 模型被构造为​对象​的树：

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

JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应

查找 HTML 元素

通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

• 通过 id 找到 HTML 元素
• 通过标签名找到 HTML 元素
• 通过类名找到 HTML 元素

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id="intro" 元素：

实例

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

通过标签名查找 HTML 元素

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

实例

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

var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：

实例

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

改变 HTML 内容

修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

改变 HTML 属性

如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值

改变 HTML 样式

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式

ddEventListener() 方法实例

在用户点击按钮时触发监听事件：

document.getElementById("myBtn").addEventListener("click", displayDate);

addEventListener() 方法用于向指定元素添加事件句柄。

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

你可以向一个元素添加多个事件句柄。

你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。

你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听。

你可以使用 removeEventListener() 方法来移除事件的监听。

语法

​element​.addEventListener(​event, function, useCapture​);

第一个参数是事件的类型 (如 "click" 或 "mousedown").

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

事件冒泡或事件捕获？

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在 ​冒泡 ​中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。

在 ​捕获 ​中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。

removeEventListener() 方法

removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄:

实例

​element​.removeEventListener("mousemove", myFunction);

JavaScript 计时事件

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。

setTimeout() - 在指定的毫秒数后执行指定代码。

注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

如何停止执行?

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法

window.clearInterval(​intervalVariable​)

​window.clearInterval()​ 方法可以不使用window前缀，直接使用函数​clearInterval()​。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：

setTimeout() 方法语法

myVar= window.setTimeout("javascript function", milliseconds);

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg。

第二个参数指示从当前起多少毫秒后执行第一个参数。

如何停止执行?

clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

语法

window.clearTimeout(​timeoutVariable​)

​window.clearTimeout()​ 方法可以不使用window 前缀。

要使用clearTimeout() 方法, 你必须在创建超时方法中（setTimeout）使用全局变量:

myVar=setTimeout("javascript function",milliseconds);

如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。

如有问题，可留言交流。