你的位置:首页 > Java教程

[Java教程]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+275
-减法x=y-235
*乘法x=y*2105
/除法x=y/22.55
%取模(余数)x=y%215
++自增x=++y66
x=y++56
--自减x=--y44
x=y--54

  ②JavaScript 赋值运算符

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

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

  ③用于字符串的 + 运算符

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

2、JavaScript 比较 和 逻辑运算符

  ①比较运算符

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

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

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

  ②逻辑运算符

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

    给定 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     // 返回 numbertypeof false     // 返回 booleantypeof [1,2,3,4]    // 返回 objecttypeof {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    // undefinedtypeof null     // objectnull === undefined   // falsenull == 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.14Number(" ")  // 返回 0 Number("")  // 返回 0Number("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 属性不是必须的):

  <script src="myscript.js">

  使用 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 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" >16   Hello17  </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);