JavaScript基础知识（一）

一、JavaScript基础

1、JavaScript用法：

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。
HTML引入外部js文件方法示例：

<!DOCTYPE html>

<html>

<body>

    <script src="myScript.js"></script>

</body>

</html>

2、<script> 标签：

在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

3、JavaScript使用限制：

在 HTML 文档中放入不限数量的脚本。
脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入 <head> 部分中，或者放在页面底部，不会干扰页面的内容。

4、JavaScript输出

　　①JavaScript通常用来操作HTML

　　②文档输出：

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

5、JavaScript语句：

　　①JavaScript 语句：

　　　　向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

　　②分号：

　　用于分隔 JavaScript 语句，通常我们在每条可执行的语句结尾添加分号，使用分号的另一用处是在一行中编写多条语句。

　　③JavaScript 代码

　　JavaScript 代码是 JavaScript 语句的序列。浏览器按照编写顺序依次执行每条语句。

　　④标识符：

　　标识符必须以字母、下划线或美元符号开始

　　语句标识符是保留关键字不能作为变量名使用。

　　⑤JavaScript对大小写敏感

　　⑥空格：JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。

　　⑦语句标识符是保留关键字不能作为变量名使用。如break、var、do ... while等

　　⑧换行：不允许在语句单词中换行。

6、注释

　　①单行注释以 // 开头。

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

7、JavaScript 变量

　　变量是用于存储信息的"容器"。var x=5; var y=6; var z=x+y;

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

8、JavaScript 数据类型

　　字符串（String）、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空（Null）、未定义（Undefined）。

二、JavaScript 语法

1、JavaScript运算符

　　①JavaScript 算术运算符

　　y=5，下面的表格解释了这些算术运算符：

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（余数）	x=y%2	1	5
++	自增	x=++y	6	6
++	自增	x=y++	5	6
--	自减	x=--y	4	4
--	自减	x=y--	5	4

　　②JavaScript 赋值运算符

　　给定 x=10 和 y=5，下面的表格解释了赋值运算符：

运算符	例子	等同于	运算结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

　　③用于字符串的 + 运算符

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

2、JavaScript 比较和逻辑运算符

　　①比较运算符

　　比较运算符在逻辑语句中使用，以测定变量或值是否相等。

　　x=5，下面的表格解释了比较运算符：　　

运算符	描述	比较	返回值
==	等于（不限类型）	x==8	false
==	等于（不限类型）	x==5	true
===	绝对等于（值和类型均相等）	x==="5"	false
===	绝对等于（值和类型均相等）	x===5	true
!=	不等于	x!=8	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!=="5"	true
!==	不绝对等于（值和类型有一个不相等，或两个都不相等）	x!==5	false
>	大于	x>8	false
<	小于	x<8	true
>=	大于或等于	x>=8	false
<=	小于或等于	x<=8	true

　　②逻辑运算符

　　　　逻辑运算符用于测定变量或值之间的逻辑。

　　　　给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符	描述	例子
&&	and	(x < 10 && y > 1) 为 true
\|\|	or	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

　　③条件运算符

　　　　JavaScript 还包含了基于某些条件对变量进行赋值的条件运算符。

　　　语法： variablename=(condition)?value1:value2；

3、条件语句

　　通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

　　在 JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行

if (condition1)

{

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

}

else if (condition2)

{

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

}

else

{

  当条件 1 和 条件 2 都不为 true 时执行的代码

}

switch 语句 - 使用该语句来选择多个代码块之一来执行

switch(n)

{

    case 1:

        执行代码块 1

        break;

    case 2:

        执行代码块 2

        break;

    default:

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

}

4、JavaScript for 循环

　　JavaScript 支持不同类型的循环：

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

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

{

    被执行的代码块

}

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

var person={fname:"John",lname:"Doe",age:25};

for (x in person)

{

    txt=txt + person[x];

}

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

while (条件)

{

    需要执行的代码

}

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

do

{

    需要执行的代码

}

while (条件);

5、JavaScript 跳转语句 break 和 continue 　　

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。

6、JavaScript 标签

　　break 和 continue 语句仅仅是能够跳出代码块的语句。

　　语法：

break labelname;

continue labelname;

continue 语句（带有或不带标签引用）只能用在循环中。

break 语句（不带标签引用），只能用在循环或 switch 中。

通过标签引用，break 语句可用于跳出任何 JavaScript 代码块：

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

list: {

    document.write(cars[0] + "<br>");

    document.write(cars[1] + "<br>");

    document.write(cars[2] + "<br>");

    break list;

    document.write(cars[3] + "<br>");

    document.write(cars[4] + "<br>");

    document.write(cars[5] + "<br>");

}

7、JavaScript typeof, null, 和 undefined

　　①typeof 操作符

　　可以使用 typeof 操作符来检测变量的数据类型。

typeof "John"                // 返回 string

typeof 3.14                  // 返回 number

typeof false                 // 返回 boolean

typeof [1,2,3,4]             // 返回 object

typeof {name:'John', age:34} // 返回 object

　　在JavaScript中，数组是一种特殊的对象类型。因此 typeof [1,2,3,4] 返回 object。

　　②null

　　在 JavaScript 中 null 表示 "什么都没有"。

　　null是一个只有一个值的特殊类型。表示一个空对象引用。

　　用 typeof 检测 null 返回是object。

　　设置为 null 来清空对象: var person = null; // 值为 null(空), 但类型为对象

　　③Undefined

　　在 JavaScript 中, undefined 是一个没有设置值的变量。

　　typeof 一个没有值的变量会返回 undefined。

var person; // 值为 undefined(空), 类型是undefined

　　任何变量都可以通过设置值为 undefined 来清空。类型为 undefined.

　　④Undefined 和 Null 的区别

null 和 underfined 的值相等，但类型不等：

typeof undefined             // undefined

typeof null                  // object

null === undefined           // false

null == undefined            // true

8、JavaScript 类型转换

　　Number() 转换为数字， String() 转换为字符串， Boolean() 转化为布尔值。

　　JavaScript 变量可以转换为新变量或其他数据类型：

- 通过使用 JavaScript 函数
- 通过 JavaScript 自身自动转换

　　①将数字转换为字符串

　　全局方法 String() 可以将数字转换为字符串。

　　该方法可用于任何类型的数字，字母，变量，表达式：

String(x) // 将变量 x 转换为字符串并返回

String(123) // 将数字 123 转换为字符串并返回

String(100 + 23) // 将数字表达式转换为字符串并返回

　　Number 方法 toString() 也是有同样的效果。

x.toString()

(123).toString()

(100 + 23).toString()

　　常用数字转换为字符串的方法：

方法	描述
toExponential()	把对象的值转换为指数计数法。
toFixed()	把数字转换为字符串，结果的小数点后有指定位数的数字。
toPrecision()	把数字格式化为指定的长度。

　　②将布尔值转换为字符串

　　全局方法 String() 可以将布尔值转换为字符串。

String(false)        // 返回 "false"

String(true)         // 返回 "true"

Boolean 方法 toString() 也有相同的效果。

false.toString()     // 返回 "false"

true.toString()      // 返回 "true"

　　③将日期转换为字符串

　　Date() 返回字符串。

Date() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

　　全局方法 String() 可以将日期对象转换为字符串。

String(new Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

　　Date 方法 toString() 也有相同的效果。

obj = new Date()

obj.toString()   // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

　　常用日期转换为字符串的函数：

方法	描述
getDate()	从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()	从 Date 对象返回一周中的某一天 (0 ~ 6)。
getFullYear()	从 Date 对象以四位数字返回年份。
getHours()	返回 Date 对象的小时 (0 ~ 23)。
getMilliseconds()	返回 Date 对象的毫秒(0 ~ 999)。
getMinutes()	返回 Date 对象的分钟 (0 ~ 59)。
getMonth()	从 Date 对象返回月份 (0 ~ 11)。
getSeconds()	返回 Date 对象的秒数 (0 ~ 59)。
getTime()	返回 1970 年 1 月 1 日至今的毫秒数。

　　④将字符串转换为数字

　　全局方法 Number() 可以将字符串转换为数字。

　　字符串包含数字(如 "3.14") 转换为数字 (如 3.14).

　　空字符串转换为 0。

　　其他的字符串会转换为 NaN (不是个数字)。

Number("3.14")    // 返回 3.14

Number(" ")       // 返回 0

Number("")        // 返回 0

Number("99 88")   // 返回 NaN

　　常用字符串转为数字的方法：

方法	描述
parseFloat()	解析一个字符串，并返回一个浮点数。
parseInt()	解析一个字符串，并返回一个整数。

　　⑤一元运算符 +

　　Operator + 可用于将变量转换为数字：

var y = "5";      // y 是一个字符串

var x = + y;      // x 是一个数字

　　如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字):

　　 var y = "John"; // y 是一个字符串

var x = + y; // x 是一个数字 (NaN)

　　⑥将布尔值转换为数字

　　全局方法 Number() 可将布尔值转换为数字。

Number(false) // 返回 0

Number(true) // 返回 1

　　⑦将日期转换为数字

　　全局方法 Number() 可将日期转换为数字。

　　 d = new Date();

Number(d) // 返回 1404568027739

　　日期方法 getTime() 也有相同的效果。

　　 d = new Date();

d.getTime() // 返回 1404568027739

　　⑧自动转换类型

　　当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。

　　以下输出结果不是你所期望的：

5 + null    // 返回 5         null 转换为 0

"5" + null  // 返回"5null"   null 转换为 "null"

"5" + 1     // 返回 "51"      1 转换为 "1"

"5" - 1     // 返回 4         "5" 转换为 5

　　⑨自动转换为字符串

　　当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法：

document.getElementById("demo").innerHTML = myVar;

// if myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"

// if myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"

// if myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

数字和布尔值也经常相互转换：

// if myVar = 123             // toString 转换为 "123"

// if myVar = true            // toString 转换为 "true"

// if myVar = false           // toString 转换为 "false"

9、JavaScript 正则表达式

　　正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

　　搜索模式可用于文本搜索和文本替换。

　　语法：

/正则表达式主体/修饰符(可选)

　　其中修饰符可选，如：

var patt = /runoob/i

解析：/runoob/i  是一个正则表达式。

　　　　runoob  是一个正则表达式主体 (用于检索)。

　　　　i  是一个修饰符 (搜索不区分大小写)。

　　①使用字符串方法

　　在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

　　search() 方法用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

var str = "Visit Runoob!";

var n = str.search(/Runoob/i);//输出结果6

　　search 方法可使用字符串作为参数。字符串参数会转换为正则表达式。

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

var str = document.getElementById("demo").innerHTML;

var txt = str.replace(/microsoft/i,"Runoob");//输出结果Visit Runoob!

　　replace() 方法将接收字符串作为参数

　　②正则表达式修饰符

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

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

　正则表达式模式

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

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x\|y)	查找任何以 \| 分隔的选项。

　　元字符是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

　　量词:

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

　　③test()

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

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

　　④exec（）

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

　　exec() 方法用于检索字符串中的正则表达式的匹配。

　　该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

10、变量的提升

　　JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。

　　JavaScript 只有声明的变量会提升，初始化的不会。

11、JavaScript 代码规范

　　JavaScript 代码规范

　　代码规范通常包括以下几个方面:

- 变量和函数的命名规则
- 空格，缩进，注释的使用规则。
- 其他常用规范……

　　规范的代码可以更易于阅读与维护。

　　代码规范一般在开发前规定。

　　①变量名

　　变量名推荐使用驼峰法来命名(camelCase):

firstName = "John";

lastName = "Doe";

price = 19.90;

tax = 0.20;

fullPrice = price + (price * tax);

　　②空格与运算符

　　通常运算符 ( = + - * / ) 前后需要添加空格:

var x = y + z;

var values = ["Volvo", "Saab", "Fiat"];

　　③语句规则

　　简单语句的通用规则:

- 一条语句通常以分号作为结束符。

var values = ["Volvo", "Saab", "Fiat"];

var person = {

    firstName: "John",

    lastName: "Doe",

    age: 50,

    eyeColor: "blue"

};

　　复杂语句的通用规则:

- 将左花括号放在第一行的结尾。
- 左花括号前添加一空格。
- 将右花括号独立放在一行。
- 不要以分号结束一个复杂的声明。

function toCelsius(fahrenheit) {

    return (5 / 9) * (fahrenheit - 32);

}

　　循环:

for (i = 0; i < 5; i++) {

    x += i;

}

　　条件语句:

if (time < 20) {

    greeting = "Good day";

} else {

    greeting = "Good evening";

}

　　④对象规则

　　对象定义的规则:

- 将左花括号与类名放在同一行。
- 冒号与属性值间有个空格。
- 字符串使用双引号，数字不需要。
- 最后一个属性-值对后面不要添加逗号。
- 将右花括号独立放在一行，并以分号作为结束符号。

var person = {

    firstName: "John",

    lastName: "Doe",

    age: 50,

    eyeColor: "blue"

};

　　短的对象代码可以直接写成一行:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

　　每行代码字符小于 80

　　为了便于阅读每行字符建议小于数 80 个。

　　如果一个 JavaScript 语句超过了 80 个字符，建议在运算符或者逗号后换行。

document.getElementById("demo").innerHTML =

    "Hello Runoob.";

　　⑤命名规则

　　一般很多代码语言的命名规则都是类似的，例如:

- 变量和函数为驼峰法（ camelCase）
- 全局变量为大写 (UPPERCASE )
- 常量 (如 PI) 为大写 (UPPERCASE )

　　HTML 和 CSS 的横杠(-)字符:

　　HTML5 属性可以以 data- (如：data-quantity, data-price) 作为前缀。

　　CSS 使用 - 来连接属性名 (font-size)。

　　通常在 JavaScript 中被认为是减法，所以不允许使用。

　　下划线:

　　很多程序员比较喜欢使用下划线(如：date_of_birth), 特别是在 SQL 数据库中。

　　PHP 语言通常都使用下划线。

　　帕斯卡拼写法(PascalCase):

　　帕斯卡拼写法(PascalCase) 在 C 语言中语言较多。

　　驼峰法：

　　JavaScript 中通常推荐使用驼峰法，jQuery 及其他 JavaScript 库都使用驼峰法。

　　变量名不要以 $ 作为开始标记，会与很多 JavaScript 库冲突。

　　HTML 载入外部 JavaScript 文件

　　使用简洁的格式载入 JavaScript 文件 ( type 属性不是必须的):

　　使用 JavaScript 访问 HTML 元素

　　一个糟糕的 HTML 格式可能会导致 JavaScript 执行错误。

　　以下两个 JavaScript 语句会输出不同结果:

var obj = getElementById("Demo")

var obj = getElementById("demo")

　　HTML 与 JavaScript 尽量使用相同的命名规则。

　　文件扩展名

- HTML 文件后缀可以是 .html (或r .htm)。
- CSS 文件后缀是 .css 。
- JavaScript 文件后缀是 .js 。

　　使用小写文件名：

大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。

其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。

三、JavaScript 函数

(一) JavaScript 函数

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

　　JavaScript 使用关键字 function 定义函数，函数可以通过声明定义，也可以是一个表达式。

1、函数声明

　　语法 :

function functionName(parameters) {

   执行的代码

}

　　注意：

分号是用来分隔可执行JavaScript语句。
由于函数声明不是一个可执行语句，所以不以分号结束。
函数声明后不会立即执行，会在我们需要的时候调用到。
JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

2、函数表达式

　　JavaScript 函数可以通过一个表达式定义。

　　函数表达式可以存储在变量中： var x = function (a, b) {return a * b};

　　在函数表达式存储在变量后，变量也可作为一个函数使用：

var x = function (a, b) {return a * b};

var z = x(4, 3);

　　以上函数实际上是一个匿名函数 (函数没有名称)。

　　上述函数以分号结尾，因为它是一个执行语句。

3、Function() 构造函数

　　函数同样可以通过内置的 JavaScript 函数构造器（Function()）定义。

var myFunction = new Function("a", "b", "return a * b");

var x = myFunction(4, 3);

//上面实例可以写成：

var myFunction = function (a, b) {return a * b}

var x = myFunction(4, 3);

　　在 JavaScript 中，很多时候，你需要避免使用 new 关键字。

4、函数提升（Hoisting）

　　提升（Hoisting）是 JavaScript 默认将当前作用域提升到前面去的的行为。

　　提升（Hoisting）应用在变量的声明与函数的声明。

　　因此，函数可以在声明之前调用：

myFunction(5);

function myFunction(y) {

    return y * y;

}

　　使用表达式定义函数时无法提升。

5、自调用函数

函数表达式可以 "自调用",自调用表达式会自动调用。如果表达式后面紧跟 () ，则会自动调用。

不能自调用声明的函数。

通过添加括号，来说明它是一个函数表达式：

(function () {

    var x = "Hello!!";      // 我将调用自己

})();

　　以上函数实际上是一个匿名自我调用的函数 (没有函数名)。

6、函数可作为一个值使用

　　JavaScript 函数作为一个值使用：

function myFunction(a, b) {

    return a * b;

}

var x = myFunction(4, 3);

7、函数是对象

　　在 JavaScript 中使用 typeof 操作符判断函数类型将返回 "function" 。

　　但是JavaScript 函数描述为一个对象更加准确。

　　JavaScript 函数有属性和方法。

　　arguments.length 属性返回函数调用过程接收到的参数个数：

function myFunction(a, b) {

    return arguments.length;

}

（二）JavaScript 函数参数

　　JavaScript 函数对参数的值没有进行任何的检查。

1、函数显式参数(Parameters)与隐式参数(Arguments)

　　函数的显式参数:

functionName(parameter1, parameter2, parameter3) { // 要执行的代码…… }

　　函数显式参数在函数定义时列出。

　　函数隐式参数在函数调用时传递给函数真正的值。

　　①参数规则

- JavaScript 函数定义时显式参数没有指定数据类型。
- JavaScript 函数对隐式参数没有进行类型检测。
- JavaScript 函数对隐式参数的个数没有进行检测。

　　②默认参数

　　如果函数在调用时未提供隐式参数，参数会默认设置为： undefined

　　有时这是可以接受的，但是建议最好为参数设置一个默认值：

function myFunction(x, y) { y = y || 0; }

　　如果y已经定义， y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。

2、Arguments 对象

　　JavaScript 函数有个内置的对象 arguments 对象。

　　argument 对象包含了函数调用的参数数组。

　　通过这种方式你可以很方便的找到最大的一个参数的值：

x = findMax(1, 123, 500, 115, 44, 88);

function findMax() {

    var i, max = arguments[0];

    if(arguments.length < 2) return max;

    for (i = 0; i < arguments.length; i++) {

        if (arguments[i] > max) {

            max = arguments[i];

        }

    }

    return max;

}

　　①通过值传递参数

　　在函数中调用的参数是函数的隐式参数。

　　JavaScript 隐式参数通过值来传递：函数仅仅只是获取值。

　　如果函数修改参数的值，不会修改显式参数的初始值（在函数外定义）。

　　隐式参数的改变在函数外是不可见的。

　　②通过对象传递参数

　　在JavaScript中，可以引用对象的值。

　　因此我们在函数内部修改对象的属性就会修改其初始的值。

　　修改对象属性可作用于函数外部（全局变量）。

　　修改对象属性在函数外是可见的。

（三）JavaScript 函数调用

1、函数在HTML中的调用方式：

在<script>标签内调用

<script>

       function demo(){

           var a = 10 ;

           var b = 10 ;

           var sum = a+b ;

           alert(sum)

       }

       demo();//调用函数

</script>

在HTML文件中调用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <script>

       function demo(){

           var a = 10 ;

           var b = 10 ;

           var sum = a+b ;

           alert(sum)

       }

    </script>

    <button onclick="demo()">按钮</button>

</body>

</html>

③调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。

这些参数可以在函数中使用，可以发送任意多的参数，由逗号 (,) 分隔：

　　　　 myFunction(argument1,argument2)；

function myFunction(var1,var2){ 代码 }

变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。

 1 <body>

 2     <script>

 3        function demo(a,b){

 4            var sum = a+b ;

 5            alert(sum)

 6        }

 7        demo(10,20);

 8        demo(100,200);

 9     </script>

10 </body>

　　④带有返回值的函数

　　有时，我们会希望函数将值返回调用它的地方。

　　通过使用 return 语句就可以实现。

　　在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction(){

    var x=5;

    return x;

}

var myVar=myFunction();

//document.getElementById("demo").innerHTML=myFunction();

2、JavaScript 函数在js中4 种调用方式：

　　每种方式的不同方式在于 this 的初始化。

　　this 关键字：一般而言，在Javascript中，this指向函数执行时的当前对象。

　　注意： this 是保留关键字，你不能修改 this 的值。

　　①作为一个函数调用

function myFunction(a, b) { return a * b; } myFunction(10, 2); // myFunction(10, 2) 返回 20

　　以上函数不属于任何对象。但是在 JavaScript 中它始终是默认的全局对象。

　　在 HTML 中默认的全局对象是 HTML 页面本身，所以函数是属于 HTML 页面。

　　在浏览器中的页面对象是浏览器窗口(window 对象)。以上函数会自动变为 window 对象的函数。

　　myFunction() 和 window.myFunction() 是一样的。

　　②全局对象

　　当函数没有被自身的对象调用时， this 的值就会变成全局对象。

　　在 web 浏览器中全局对象是浏览器窗口（window 对象）。

　　该实例返回 this 的值是 window 对象:

function myFunction() { return this; } myFunction(); // 返回 window 对象

　　函数作为全局对象调用，会使 this 的值成为全局对象。

　　使用 window 对象作为一个变量容易造成程序崩溃

　　③函数作为方法调用

　　在 JavaScript 中你可以将函数定义为对象的方法。

　　以下实例创建了一个对象 (myObject), 对象有两个属性 (firstName 和 lastName), 及一个方法 (fullName):

var myObject = {

    firstName:"John",

    lastName: "Doe",

    fullName: function () {

        return this.firstName + " " + this.lastName;

    }

}

myObject.fullName(); // 返回 "John Doe"

fullName 方法是一个函数。函数属于对象。 myObject 是函数的所有者。

this对象，拥有 JavaScript 代码。实例中 this 的值为 myObject 对象。

函数作为对象方法调用，会使得 this 的值成为对象本身。

　　④使用构造函数调用函数

　　如果函数调用前使用了 new 关键字, 则是调用了构造函数。

　　这看起来就像创建了新的函数，但实际上 JavaScript 函数是重新创建的对象：

// 构造函数:

function myFunction(arg1, arg2) {

    this.firstName = arg1;

    this.lastName = arg2;

}

// This creates a new object

var x = new myFunction("John","Doe");

x.firstName; // 返回 "John"

构造函数的调用会创建一个新的对象。新对象会继承构造函数的属性和方法。

构造函数中 this 关键字没有任何的值。

this 的值在函数调用时实例化对象(new object)时创建。

　　⑤作为函数方法调用函数

　　在 JavaScript 中, 函数是对象。JavaScript 函数有它的属性和方法。

　　call() 和 apply() 是预定义的函数方法。两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。

function myFunction(a, b) { return a * b; } myObject =myFunction.call(myObject, 10, 2); // 返回 20

　　通过 call() 或 apply() 方法你可以设置 this 的值, 且作为已存在对象的新方法调用。

3、变量

　　①局部变量

　　在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

　　可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

　　只要函数运行完毕，本地变量就会被删除。

　　②全局变量

　　在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

　　③JavaScript 变量的生存期

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

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

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

　　④向未声明的 JavaScript 变量分配值

　　如果您把值赋给尚未声明的变量，该变量将被自动作为全局变量声明。

carname="Volvo";

　　将声明一个全局变量 carname，即使它在函数内执行。

4、JavaScript 闭包

　　JavaScript 变量可以是局部变量或全局变量。

　　私有变量可以用到闭包。

　　函数也可以访问函数外部定义的变量

　　变量声明时如果不使用 var 关键字，那么它就是一个全局变量，即便它在函数内定义。

　　①变量生命周期

　　全局变量的作用域是全局性的，即在整个JavaScript程序中，全局变量处处都在。

　　而在函数内部声明的变量，只在函数内部起作用。这些变量是局部变量，作用域是局部性的；函数的参数也是局部性的，只在函数内部起作用。

　　②JavaScript 内嵌函数

　　所有函数都能访问全局变量。

　　实际上，在 JavaScript 中，所有函数都能访问它们上一层的作用域。

　　JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。

　　该实例中，内嵌函数 plus() 可以访问父函数的 counter 变量：

function add() {

    var counter = 0;

    function plus() {counter += 1;}

    plus();

    return counter;

}

　　闭包是可访问上一层函数作用域里变量的函数，即便上一层函数已经关闭。

四、JavaScript异常处理和事件处理

1、JavaScript 错误 - throw、try 和 catch

try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。

　　①异常的捕获 try 和 catch

- try 语句允许我们定义在执行时进行错误测试的代码块。
- catch 语句允许我们定义当 try 代码块发生错误时，所执行的代码块。
- JavaScript 语句 try 和 catch 是成对出现的。

try {

  //在这里运行代码

} catch(err) {

  //在这里处理错误

}

　　②异常的抛出 throw： throw exception

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <form>

        <input id="txt" type="text">

        <input id="btn" type="button" onclick="demo()" value="按钮">

    </form>

    <script>

       function demo(){

            try {

                var e = document.getElementById("txt").value;

                if(e==""){

                    throw "请输入"

                }

            }catch (err){

                alert(err);

            }

       }

    </script>

</body>

</html>

2、事件

　　①HTML事件：HTML 事件可以是浏览器行为，也可以是用户行为。

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

<button onclick="demo()">按钮</button>

<script>

        function demo(){

            alert("Hello");

        }

</script>

　　　常见的HTML事件

事件	描述
onclick	单击事件
onmouseover	鼠标经过事件
onmouseout	鼠标移出事件
onchange	文本内容改变事件
onselect	文本框选中事件
onfocus	光标聚集事件
onblur	移开光标事件
onload	浏览器已完成页面的加载
onunload	关闭网页事件
onkeydown	用户按下键盘按

//onmouseover、onmouseout示例
<div class="div" onmouseout="onOut(this)" onmousemove="onOver(this)"></div>

    <script>

        function onOver(ooj) {

            ooj.innerHTML="Hello";

        }

        function onOut(ooj) {

            ooj.innerHTML="World"

        }

</script>

　　//onselect示例

<form>

     <input type="text" onselect="changeDemo(this)">

     <script>

            function changeDemo(bg) {

                bg.style.background="red";

            }

     </script>

</form>

五、JavaScript DOM对象

1、HTML DOM (文档对象模型)

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

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

　　JavaScript 获得了足够的能力来创建动态的 HTML。

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

2、DOM操作HTML

　　①改变 HTML 输出流

　　在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

　　注意：绝对不要在文档加载完成之后使用 document.write()。这会覆盖该文档。

　　②查找 HTML 元素

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

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

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

　　③改变 HTML 内容

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

　　如需改变 HTML 元素的内容，请使用这个语法： document.getElementById("id").innerHTML=新的 HTML

　　④改变 HTML 属性

　　如需改变 HTML 元素的属性，请使用这个语法： document.getElementById("id").attribute=新属性值

<body>

    <a id="aid" href="http://www.baidu.com">Hello</a>

    <button onclick="demo()">按钮</button>

    <script>

        function demo() {

            document.getElementById("aid").href="http://hao123.com";

        }

    </script>

</body>

3、DOM操作CSS

　　①改变 HTML 样式

　　如需改变 HTML 元素的样式，请使用这个语法： document.getElementById(id).style.property=新样式

 1 <!DOCTYPE html>

 2 <html lang="en">

 3 <head>

 4     <meta charset="UTF-8">

 5     <title>Title</title>

 6     <style>

 7         .div{

 8             width: 100px;

 9             height: 100px;

10             background-color: red;

11         }

12     </style>

13 </head>

14 <body>

15     <div id="div" class="div">

16         Hello

17     </div>

18     <button onclick="demo()">按钮</button>

19     <script>

20         function demo() {

21             document.getElementById("div").style.background="blue";

22         }

23     </script>

24 </body>

25 </html>

4、DOM EventListener

　　①addEventListener() 方法

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

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

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

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

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

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

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

语法： element.addEventListener(event, function, useCapture);

- 第一个参数是事件的类型 (如 "click" 或 "mousedown").
- 第二个参数是事件触发后调用的函数。
- 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

　　注意:不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。

 1 <!DOCTYPE html>

 2 <html>

 3 <head>

 4 <meta charset="utf-8">

 5 <title></title>

 6 </head>

 7 <body>

 8     <p>该实例使用 addEventListener() 方法在按钮中添加点击事件。</p>

 9     <button id="myBtn">点我</button>

10     <script>        
11　　　　　　document.getElementById("myBtn").addEventListener("click", function(){

12     　　　　alert("Hello World!");

13 　　　　});

14 　　</script>

14 </body>

16 </html>

　　②removeEventListener() 方法

　　removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄，如： element.removeEventListener("mousemove", myFunction);

JavaScript基础知识（一）的更多相关文章

Javascript基础知识总结一
Javascript基础知识总结一 <!DOCTYPE html> <html> <head lang="en"> <meta chars ...
学习javascript基础知识系列第二节 - this用法
通过一段代码学习javascript基础知识系列第二节 - this用法 this是面向对象语言中的一个重要概念,在JAVA,C#等大型语言中,this固定指向运行时的当前对象.但是在javascr ...
学习javascript基础知识系列第三节 - ()()用法
总目录:通过一段代码学习javascript基础知识系列注意: 为了便于执行和演示,建议使用chrome浏览器,按F12,然后按Esc(或手动选择)打开console,在console进行执行和演示 ...
JavaScript 基础知识 - BOM篇
前言本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码 ...
(转)JAVA AJAX教程第二章-JAVASCRIPT基础知识
开篇:JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的.这章我给大家整理了一些JAVASCRIPT的基础知识.常用 ...
JavaScript基础知识整理
只整理基础知识中关键技术,旨在系统性的学习和备忘. 1.在 JScript 中 null 和 undefined 的主要区别是 null 的操作象数字 0,而 undefined 的操作象特殊值NaN ...
Jquery源码中的Javascript基础知识（三）
这篇主要说一下在源码中jquery对象是怎样设计实现的,下面是相关代码的简化版本: (function( window, undefined ) { // code 定义变量 jQuery = fun ...
JavaScript基础知识从浅入深理解（一）
JavaScript的简介 javascript是一门动态弱类型的解释型编程语言,增强页面动态效果,实现页面与用户之间的实时动态的交互. javascript是由三部分组成:ECMAScript.DO ...
JavaScript基础知识必知！！！
JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型. JS作用:表单验证,减轻服务端的压力:添加页面动画效果:动态更改页面内容:Ajax网络请求. 下面简单介 ...
javascript基础知识笔记-自用
笔记内容根据个人基础知识不足不明白之处做的记录.主要看的:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript 1.变量,变量的名字又叫标识符 ...

随机推荐

Resetting Frame Animation
最近在做个小项目的时候,需要用到帧动画.对应着某种状态,该动画可以停止和再次播放.我们知道,通过函数 someAnimObj.start() someAnimObj.stop() 可以很容易地实现 ...
使用 Live555 搭建流媒体服务器
最近因为工作需要,需要搭建流媒体服务器,所以研究了一下,在此分享我的搭建过程. 搭建过程还是非常简单的! 搭建环境为Centos 7.2 64bit 一.安装gcc编译器 yum install gc ...
Vijos 1010 清帝之惑之乾隆
背景乾隆,雍正的第四子,在位60年,退位后又当了三年太上皇,终年89岁. 乾隆即位之初,实行宽猛互济的政策,务实足国,重视农桑,停止捐纳,平定叛乱等一系列活动中,充分体现了他的文治武功,乾隆帝向慕风 ...
tcp/ip通信传输流
利用TCP/IP协议族进行网络通信时,会通过分层顺序与对方进行通信,发送端从应用层往下走,接收端则往应用层方向走. 我们用HTTP进行举例客户端在应用层发出想要看到某个web页面的http请求.HT ...
vue实现对表格数据的增删改查
在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的用户列表里,我们可以录入新用户的信息,也可以对既有的用户信息进行修改.在vue中,我们更应该专注 ...
Microsoft office2010页码设置----论文、课程设计报告格式
思想:将目录页(含目录页)与目录页以下的页面用分隔符分隔开,单独设置目录页以下的页面页码,删除目录页(含目录)以前的页码. 1.在目录页页面内容最下面一行插入分隔符,实现与下面页面分隔开的目的. 页面 ...
JavaScript图片翻转
<script type="text/javascript"> /** * 注册函数f,当文档加载问成时执行这个函数f * 如果文件已经载入完成,尽快以异步方式执行它 ...
MySQL中的联合索引学习教程
MySQL中的联合索引学习教程这篇文章主要介绍了MySQL中的联合索引学习教程,其中谈到了联合索引对排序的优化等知识点,需要的朋友可以参考下联合索引又叫复合索引.对于复合索引:Mysql从左到 ...
xshell常用命令
常用的命令: suse linux 常用命令 (1) 命令ls--列出文件 ls 显示当前目录文件 ls -la 给出当前目录下所有文件的一个长列表,包括以句点开头的"隐藏"文件 ...
开源个.NetCore写的 - 并发请求工具PressureTool
本篇和大家分享的是一个并发请求工具,并发往往代表的就是压力,对于一些订单量比较多的公司这种情况很普遍,也因此出现了很多应对并发的解决方案如:分布式,队列,数据库锁等: 对于没有遇到过或者不可能线上来 ...

JavaScript基础知识（一）

JavaScript基础知识（一）的更多相关文章

随机推荐

热门专题