引用JavaScript

内部引用

通过HTML文档内的script标签加载JavaScript代码。

<script type="text/javascript">
  document.write("Hello World!");
</script>

外部引用

也是使用HTML文档的script标签，但是要使用script标签的src属性，指向外部JavaScript文件的路径。

// other code ...    
    <script type="text/javascript" src="./main.js"></script>
  </body>
</html>

变量

变量就是存储信息的容器。

声明和初始化。

• 声明就相当于拿了一个"盒子"说这个"盒子"就用来存储姓名了，即指定变量名；

• 初始化相当于将信息放在这个"盒子"中存储

变量的数据类型

1.JavaScript中变量一般是松散型的，所谓的松散型指的是变量可以用来保存任何类型的值。
2.变量是有数据类型的，比如：我们在用"盒子"来存储信息时，不必规定这个”盒子“这能存储数字类型的信息，而是数字，字符串，日期等什么类型的信息都可以存储，但是数据本身是由数据类型的。

变量名

必须是合法的标识符，包含：大小写字母，数组，下划线‘_’，美元符号‘$’，但不能以数字开头。

数据类型

• 字符串型 String
• 数字类型 number
• Null类型 null 表示空值，没有被呈现
• 布尔类型 boolien
• Undefined类型 undefined 一个没有被赋值的变量会有的默认值
• symbel 类型
• object 对象或null类型

算数运算符

• 加 + 减 - 乘 * 除 /
• 求余 % ，
  例如 :

 2%3    //8
-1%2    //-1
-4%2    //-0
5.5%2   //1.5

• 幂运算 **
  例如 :

   2**3   //8
   -2**2  //错误，有歧义
（-2）**2  //4

逻辑运算符

&&

都为true时结果为true

||

都为假时结果为假

！

非 不是 否定 的意思,结果跟表达式相反就好啦

字符串

1. 字符串 可以由双引号（"）或者单引号（'）表示，但左右引号必须匹配

2. +号表示连接，意为将右边的字符串连接在左边的字符串后面

3. 转义字符

    \n: 换行
    \t: 制表符
    \b: 退格
    \r: 回车
    \\: 斜杠（\）
    \': 单引号（'）
    \": 双引号（"）
   

方法

获取字符串的某个字符

• 1、是使用 [charAt]

 return 'cat'.charAt(1);    // returns "a"

• 2.是把字符串当作一个类似数组的对象，其中的每个字符对应一个数值索引：

return 'cat'[2];         // returns "t"

concat()方法 - 字符串连接

concat()方法将一个或多个字符串与原字符串连接合并，形成一个新的字符串并返回。concat()方法并不影响原字符串。

var hello = "Hello, ";
console.log(hello.concat("tws", " have a nice day."));   // Hello, tws have a nice day.

includes()方法 - 字符串搜索

includes()方法用于判断一个字符串是否包含在另一个字符串中，根据情况返回true或false，且该方法是区分大小写的。

'Blue Whale'.includes('blue'); // false (大小写不同)
'Blue Whale'.includes('Blue'); // true

substr()方法 - 提取子字符串

substr()方法返回一个字符串中从指定位置开始到指定字符数的字符。该方法在调用的时候需要传入两个参数分别为：开始提取字符的位置和提取的字符数长度（可选）。

var str = 'abcdefghij';
str.substr(0,3); // 'abc'
str.substr(3,3); // 'def'
str.substr(3); // 'defghij'

substring()方法 - 提取子字符串

substring()方法返回一个字符串在开始索引位置到结束索引位置之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。该方法也接受两个参数，第一个参数是开始提取字符的位置，但与substr()方法不同的是，substring()方法的第二个参数是结束提取字符的位置（可选）。

var str = 'abcdefghij';
str.substring(0,3); // 'abc'
str.substring(3,3); // ''  (因为从3到3，中间没有字符)
str.substring(3); // 'defghij'
str.substring(2,3); // 'c'

对象

概念：

对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）
例如：创建一个person对象

var person = {
  name: "Ming",
  age: 17,
  talk: function () { 
    console.log("another... Sky... walk...");
  }
};

语法规则

一个对象由许多的成员组成，每一个成员都拥有一个名字（像上面的name，age），和一个值（如"Ming",17）。每一个名字/值（name/value）对被逗号分隔开，并且名字和值之间由冒号（:）分隔,

注意：如果是最后一个属性，后面就不要加逗号，因为在一些旧的浏览器下会报错。

例如：

var objectName = {
  member1Name : member1Value,
  member2Name : member2Value,
  member3Name : member3Value
}

访问对象的属性和方法

1.点表示法

对象的名字表现为一个命名空间(namespace)，它必须写在第一位——当你想访问对象内部的属性或方法时，然后是一个点(.)，紧接着是你想要访问的项目，标识可以是简单属性的名字(name)，或者是数组属性的一个子元素，又或者是对象的方法调用。

person.age
person.interests[1]
person.bio()

子命名空间

可以用一个对象来做另一个对象成员的值，例如将name成员

name : ['Bob', 'Smith'],

改为

name : {
  first : 'Bob',
  last : 'Smith'
},

你只需要链式的再使用一次点表示法，像这样：

person.name.first
person.name.last

注意：

你需要将

person.name[0]
person.name[1]

改成

person.name.first
person.name.last

2.括号表示法

把这样的代码

person.age
person.name.first

改成

person['age']
person['name']['first']

这看起来很像访问一个数组的元素，从根本上来说是一回事儿，你使用了关联了值的名字，而不是索引去选择元素。难怪对象有时被称之为关联数组(associative array)了——对象做了字符串到值的映射，而数组做的是数字到值的映射。

设置成员变量

• 改变已有成员变量的值

person.age = 45
person['name']['last'] = 'Cratchit'

看看是否被改变了

person.age
person['name']['last']

• 创建新的成员

person['eyes'] = 'hazel'
person.farewell = function() { alert("Bye everybody!") }

测试创建的新成员

person['eyes']
person.farewell()

括号表示法一个有用的地方是它不仅可以动态的去设置对象成员的值，还可以动态的去设置成员的名字。

var myDataName = 'height'
var myDataValue = '1.75m'
person[myDataName] = myDataValue

输出

person.height

这是使用点表示法无法做到的，点表示法只能接受字面量的成员的名字，不接受变量作为名字。

this关键字

关键字"this"指向了当前代码运行时的对象——它保证了当代码的上下文(context)改变时变量的值的正确性

方法

字符串对象方法

• substr(startIndex, length) 从startIndex取,取length个字符

startIndex必需。要抽取的子串的起始下标, 必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2指倒数第二个字符，以此类推。

• substring(startIndex, stopIndex) 从startIndex和stopIndex之间的字符,不包括stopIndex

• toSource()显示对象的源代码

• valueOf() 返回字符串对象的当前被赋予的值

• string.toLowerCase()返回小写的新字符串.

• string.charAt(pos) 返回pos位置上的字符串(js没有char类型).

若pos<0或>=string.length, 则 返回空字符串.

• str1.localeCompare(str2) 比较两个字符串,

若str1<str2则返回负数, 若相等则返回0, 否则正数.

• string.slice(start, end)复制string的内容, 范围[start, end), 不包含end 位置的内容.

这个函数的参数取值情况和array.slice()参数取值情况差不多.

• string.split(separator, limit) 将string根据separator的要求分隔内容, 返回形成的数组.

limit参数 是可选的, 表示分隔的最大个数.
separator是一个字符串或者正则表达式.这个方法忽略'g'

• replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的方法字符串

anchor("name")用来把字符串转换为HTML锚点标记内(<ANAME=>)

big()把字符串中的文本变成大字体(<BIG>)

blink()把字符串中的文本变成闪烁字体(<BLINK>)

bold()把字符串中的文本变成黑字体(<B>)

fixed() 把字符串中的文本变成固定间距字体,即电报形式(<TT>)

fontcolor(color)设置字符串中文本的颜色(<FONT COLOR=>)

Fontsize(size)把字符串中的文本变成指定大小(<FONTSIZE=>)

italics()把字符串中的文本变成斜字体(<I>)

Link(url)用来把字符串转换-HTML链接标记中(<AHREF=>)

small() 把字符串中的文本变成小字体(<SMALL>)

strike()把字符串中的文本变成划掉字体(<STRIKE>)

sub()把字符串中的文本变成下标(subscript)字体((SUB>)

sup() 把字符串中的文本变成上标(superscript)字体(<SUP>)

string.search(regexp)用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。与indexOf()功能类似, 返回值情况相同. 这个方法忽略'g'.

regexp可以是需要在 stringObject 中检索的子串，也可以是需要检索的 RegExp 对象。

Number对象方法

• valueOf()

返回数学对象的原始值

• number.toExponential(fractionDigits)

将数字转换为指数表示形式字符串，fractionDigits指定指数的小数位的位数, 取值区间[0,20].

• number.toFixed(fractionDigits)

将数字表示成10进制字符串, fractionDigits同上.

• number.toPrecision(precision)

与toFixed()类同, 只是precision指定的是数字的有效位数, 取值范围[0,21].

• number.toString(radix)

将number转换为需要的进制字符串形式，radix默认是10.

• Math.floor（）向下取整
• Math.ceil () 向上取整

Date对象

getDay() 返回一周中的第几天(0-6)

getYear() 返回年份.2000年以前为2位,2000(包含)以后为4位

getFullYear() 返回完整的4位年份数

getMonth() 返回月份数(0-11)

getDate() 返回日(1-31)

getHours() 返回小时数(0-23)

getMinutes() 返回分钟(0-59)

getSeconds() 返回秒数(0-59)

getMilliseconds() 返回毫秒(0-999)

getUTCDay() 依据国际时间来得到现在是星期几(0-6)

getUTCFullYear() 依据国际时间来得到完整的年份

getUTCMonth() 依据国际时间来得到月份(0-11)

getUTCDate() 依据国际时间来得到日(1-31)

getUTCHours() 依据国际时间来得到小时(0-23)

getUTCMinutes() 依据国际时间来返回分钟(0-59)

getUTCSeconds() 依据国际时间来返回秒(0-59)

getUTCMilliseconds()依据国际时间来返回毫秒(0-999)

getTime() 返回从1970年1月1号0:0:0到现在一共花去的毫秒数

getTimezoneoffset() 返回时区偏差值,即格林威治平均时间(GMT)与运行脚本的计算机所处时区设置之间相差的分钟数)

parse(dateString) 返回在Date字符串中自从1970年1月1日00:00:00以来的毫秒数

setYear(yearInt) 设置年份.2位数或4位数

setFullYear(yearInt)设置年份.4位数

setMonth(monthInt) 设置月份(0-11)

setDate(dateInt) 设置日(1-31)

setHours(hourInt) 设置小时数(0-23)

setMinutes(minInt) 设置分钟数(0-59)

setSeconds(secInt) 设置秒数(0-59)

setMilliseconds(milliInt) 设置毫秒(0-999)

setUTCFullYear(yearInt) 依据国际时间来设置年份

setUTCMonth(monthInt) 依据国际时间来设置月(0-11)

setUTCDate(dateInt) 依据国际时间来设置日(1-31)

setUTCHours(hourInt) 依据国际时间来设置小时

setUTCMinutes(minInt) 依据国际时间来设置分钟

setUTCSeconds(secInt) 依据国际时间来设置秒

setUTCMilliseconds(milliInt)依据国际时间来设置毫秒

setTime(timeInt) 设置从1970年1月1日开始的时间.毫秒数

toGMTString() 根据格林威治时间将Date对象的日期(一个数值)转变成一个GMT时间字符串,如:Weds,15 June l997 14:02:02 GMT

toUTCString() 根据通用时间将一个Date对象的日期转换为一个字符串

toLocaleString() 把Date对象的日期(一个数值)转变成一个字符串,使用所在计算机上配置使用的特定日期格式

toSource() 显示对象的源代码

toString() 将日期对象转换为字符串

UTC(yyyy, mm, dd, hh, mm, ss, msec)返回从格林威治标准时间到指定时间的差距,单位为毫秒

valueOf() 返回日期对象的原始值

遍历对象属性

数组

数组是数据的有序列表，在JavaScript中，数组中的每一项可以保存任何类型的数据，也就是说可以用数组的第一项保存字符串，第二项保存数值，第三项保存对象等，同时，JavaScript中数组的长度是可以动态调整的，即可以随着数据的添加自动增长以容纳新增数据。

构建数组

第一种方法

var fruits = new Array();

如果预先知道数组要保存的项目数量，也可以给构造函数传递该参数，例如，下面的代码将创建一个长度为10的数组：

var fruits = new Array(10);

第二种方法
我们直接把数组中的每一个数据项都列出来，包含在一对中括号之间，不同的数据项以逗号隔开

var fruits = ['apple', 'pear', 'peach']; // 创建了一个包含三个字符串的数组
var names = []; // 创建了一个空数组
var values = [1, 2, ,]; // 不要这样做!这样会创建一个包含2项或4项的数组

数组方法

• push()方法 向数组的末尾添加新的元素。
• pop()方法 从数组的末尾移除一个元素。
• unshift()方法 向数组的前面添加新的元素。
• shift()方法 从数组的前面移除一个元素。
• indexOf()方法 找到某一个数据项在数组中的索引值。例如：

var fruits = ['apple', 'pear', 'peach'];
console.log(fruits.indexOf('pear'));    // 1 

• splice() 方法 通过索引删除某个元素或多个元素

   var fruits = ['apple', 'pear', 'peach'];
   document.write(fruits.splice(1));    // pear,peach

• forEach（）方法 遍历数组
  语法：

  array.forEach(function(数组元素（必须）, index（索引值（可选））, 数组名), thisValue)

    var fruits = ['apple', 'pear', 'peach'];
    fruits.forEach(function (item, index, array){
          document.write(item,index);    //apple0pear1peach2
    });

• slice()方法 复制一个数组
• reverse() 反转数组项的顺序，改变原数组

    var fruits = ['apple', 'pear', 'peach'];
    document.write(fruits.reverse());    // peach,pear,apple

• sort() 方法 按升序排列数组。

var numbers= [1,15,5,10];
numbers.sort()          //[1, 10, 15, 5]         numbers:[1, 10, 15, 5]

• concat() 创建一个当前数组的副本，然后在数组末尾添加参数项，并返回新的数组，原数组不变

var numbers= [1,2,3,4];
 numbers.concat(5,[6,7])          //[1,2,3,4,5,6,7]         numbers:[1,2,3,4]

• entries() 方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.entries();

返回

[0, "Banana"]
[1, "Orange"]
[2, "Apple"]
[3, "Mango"]

• every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。

如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。

• fill() 方法用于将一个固定值替换数组的元素。
  语法：array.fill(value, start, end)
  value:填充的值 ；start：开始填充的位置；end：结束的位置

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.fill("Runoob", 2, 4);     //结果：Banana,Orange,Runoob,Runoob 

• filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

语法：array.filter(function(Value,index,arr), thisValue)

• find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。

find() 方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined

• findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。
• forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
• from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。
• includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
• indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
• isArray() 方法用于判断一个对象是否为数组。如果对象是数组返回 true，否则返回 false。
• join() 方法用于把数组中的所有元素转换一个字符串。元素是通过指定的分隔符进行分隔的。

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var energy = fruits.join(" and "); //Banana and Orange and Apple and Mango 

• map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。

var numbers = [4, 9, 16, 25];

function myFunction() {
    x = document.getElementById("demo")
    x.innerHTML = numbers.map(Math.sqrt);
}   //2,3,4,5

• keys() 方法用于从数组创建一个包含数组键的可迭代对象。

如果对象是数组返回 true，否则返回 false。

• 字符转ascii码：用charCodeAt();
  语法：stringObject.charCodeAt(index)
  ascii码砖字符：用fromCharCode();
  语法：String.fromCharCode(numX,numX,...,numX)
  大写字母A 到Z 的值是从65 到，小写a到z 是从91 到 122

DOM

什么是DOM？

DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
注：DOM 是 Document Object Model（文档对象模型）的缩写。

DOM节点

根据 W3C 的 HTML DOM 标准，HTML 文档中的所有内容都是节点：

• 整个文档是一个文档节点
• 每个 HTML 元素是元素节点
• HTML 元素内的文本是文本节点
• 每个 HTML 属性是属性节点
• 注释是注释节点

访问节点

访问 HTML 元素（节点）
访问 HTML 元素等同于访问节点
您能够以不同的方式来访问 HTML 元素：

• 通过使用 getElementById() 方法
• 通过使用 getElementsByTagName() 方法
• 通过使用 getElementsByClassName() 方法

getElementById() 方法

getElementById() 方法返回带有指定 ID 的元素：

<!DOCTYPE html>
<html>
<body>

<p id="intro">Hello World!</p>
<p>本例演示 <b>getElementById</b> 方法！</p>

<script>
x=document.getElementById("intro");
document.write("<p>来自 intro 段落的文本：" + x.innerHTML + "</p>");
</script>

</body>
</html>

结果

Hello World!

本例演示 getElementById 方法！

来自 intro 段落的文本：Hello World!

getElementsByTagName() 方法

getElementsByTagName() 返回带有指定标签名的所有元素。

<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<p>DOM 很有用！</p>
<p>本例演示 <b>getElementsByTagName</b> 方法。</p>

<script>
x=document.getElementsByTagName("p");
document.write("第一段的文本: " + x[0].innerHTML);
</script>

</body>
</html>

结果

Hello World!

DOM 很有用！

本例演示 getElementsByTagName 方法。
第一段的文本: Hello World! 

HTML DOM 节点列表长度

length 属性定义节点列表中节点的数量。
您可以使用 length 属性来循环节点列表：

<!DOCTYPE html>
<html>
<body>

<p>Hello World!</p>
<p>DOM 很有用！</p>
<p>本例演示 <b>length</b> 属性。</p>

<script>
x=document.getElementsByTagName("p");
for (i=0;i<x.length;i++)
  { 
  document.write(x[i].innerHTML);
  document.write("<br>");
  }
</script>
</body>
</html>

结果

Hello World!

DOM 很有用！

本例演示 length 属性。
Hello World!
DOM 很有用！
本例演示 length 属性。

getElementsByClassName() 方法

如果您希望查找带有相同类名的所有 HTML 元素，请使用这个方法：

document.getElementsByClassName("intro");

上面的例子返回包含 class="intro" 的所有元素的一个列表：