javascript基础07

1.HTML DOM (Document Object Model)

document.getElementById("some id"): 这样的document就是DOM对象
JavaScript 能够改变任意 HTML 元素的大多数属性

*注意:
html - dom - document
浏览器 - bom - window

2.match()函数

match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

语法:
stringObject.match(searchvalue) :必需。规定要检索的字符串值。
stringObject.match(regexp):必需。规定要匹配的模式的 RegExp 对象。如果该参数不是 RegExp 对象,则需要首先把它传递给 RegExp 构造函数,将其转换为 RegExp 对象

我们可以使用全局匹配的正则表达式来检索字符串中的所有数字:

<script type="text/javascript">
    var str="1 plus 2 equal 3"
    document.write(str.match(/\d+/g))
</script>

3.Date()函数

Date()js中直接调用结果:Sun Oct 09 2016 14:37:15 GMT+0800 (CST)

var date = new Date();
var year = date.getFullYear();
var month = date.getMonth();
var day = date.getDay();
alert("今天是"+year+"年"+month+"月"+day+"日");

4.js对象:
{firstName:"John", lastName:"Doe", age:40, eyeColor:"blue"}
*注意: notation:n. 符号;乐谱;注释;记号法
jsonjavascript object notation

5.数据类型

JavaScript 有多种数据类型:数字,字符串,数组,对象等等

*注意:
16 + "你好" => "16你好"

5.JavaScript 使用Unicode字符集。
Unicode覆盖了所有的字符,包含标点等字符。
JavaScript 中,常见的是驼峰法的命名规则,如 lastName (而不是lastname)。

6.innerHTML与innerText 区别:

1)innerHTML:
  也就是从对象的起始位置到终止位置的全部内容,包括Html标签。
2)innerText:
  从起始位置到终止位置的内容, 但它去除Html标签

<div id="test"> 
   <span style="color:red">test1</span> test2 
</div>

获取id=test节点:
它的innerHTML就是:<span style="color:red">test1</span>test2
它的innerText是:test1test2

*注意:
  innerHTML是符合W3C标准的属性,而innerText只适用于IE浏览器,因此,尽可能地去使用innerHTML,而少用
innerText,如果要输出不含HTML标签的内容,可以使用innerHTML取得包含HTML标签的内容后,再用正则表达式去除HTML标签,下面是一个简单的符合W3C标准的示例:
<a href="javascript:alert(document.getElementById('test').innerHTML.replace(/<.+?>/gim,''))">去除HTML标签后的文本</a>

7.对代码行进行折行

document.write("你好 \ 是加尔!");

*注意:JavaScript 是脚本语言。浏览器会在读取代码时,逐行地执行脚本代码。而对于传统编程来说,会在执行前对所有代码进行编译。

8.声明

var carname;
在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined

在执行过以下语句后,变量carname的值将是 undefined

var carname="Volvo";
var carname; // 在以下两条语句执行后,变量 carname 的值依然是 "Volvo":

9.JavaScript 对象

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

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

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

对象属性有两种寻址方式:

name=person.lastname;
name=person["lastname"]; 

*注意:键加""双引号也可以的

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

10.Undefined 和 Null区别

Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
cars = null
person = null

之后alert(cars) 结果为null,注意不是undefined

11.声明变量类型

当您声明新变量时,可以使用关键词 "new" 来声明其类型:

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象。

12.js的对象

1)键值对,对象属性
可以说 "JavaScript 对象是变量的容器"。
我们通常认为 "JavaScript 对象是键值对的容器"。
键值对在 JavaScript对象通常称为 对象属性。

对象键值对的写法类似于:
PHP 中的关联数组
Python 中的字典
C 语言中的哈希表

2)对象方法

对象的方法定义了一个函数,并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。

name = person.fullName(); // person.fullName() 调用person对象的方法,返回的值赋值给了name

JavaScript对象是属性方法的容器

在微信小程序中:

wx.request({
     url:"http://www.xxxx",
     method:'GET',
     data:{},
     header:{
         'Accept':'application/json'
     },
     success:function(res){
          that.setData({
                images:res.data
          })
     }
})

// wx.request();  调用函数.传入的是 js对象 {}

*注意:
函数属性作为一个方法访问与函数属性作为一个属性访问。

var person = {
    firstName: "John",
    lastName : "Doe",
    id       : 5566,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};

document.getElementById("demo").innerHTML = person.fullName();  // 方法访问
document.getElementById("demo").innerHTML = person.fullName;

13.JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。

14.向未声明的 JavaScript 变量分配值

如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
carname="Volvo";
将声明一个全局变量 carname,即使它在函数内执行。

函数参数只在函数内起作用,是局部变量。

15.html中的全局变量

html中,全局变量是window对象:所有数据变量都属于window对象

function myFunction() {
     carName = "Volvo";
} 
myFunction();
//此处可使用 window.carName

注意:要先执行myFunction()之后才能使用全局变量carName

16.js事件

HTML 事件是发生在HTML 元素上的事情。
当在HTML 页面中使用 JavaScript时, JavaScript可以触发这些事件。

HTML 事件可以是浏览器行为,也可以是用户行为。

常见的html事件:

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

17.js字符串

var answer = "He is called 'Johnny'";

1)alert(answer[13]) ; // '
2)answer.length
3)特殊字符

在 JavaScript 中,字符串写在单引号或双引号来中。
"We are the so-called "Vikings" from the north."
如何解决以上的问题呢?可以使用反斜杠 () 来转义 "Vikings" 字符串中的双引号,如下:
"We are the so-called \"Vikings\" from the north."

特殊字符的转义:

\'  单引号
\"  双引号
\\  反斜杠
\n  换行
\r  回车
\t  tab(制表符)
\b  退格符
\f  换页符

18.字符串可以是对象

通常,JavaScript 字符串是原始值,可以使用字符创建:var firstName = "John"

但我们也可以使用 new 关键字将字符串定义为一个对象:var firstName = new String("John")

不要创建String对象。它会拖慢执行速度,并可能产生其他副作用:

var x = "John";              
var y = new String("John");
(x === y) // is false because x is a string and y is an object. 

1)字符串属性

constructor 返回创建字符串属性属性的函数
length 返回字符串的长度
prototype 允许您向对象添加属性和方法

2)字符串方法
charAt() 返回指定索引位置的字符 charCodeAt() 返回指定索引位置字符的 Unicode 值 concat() 连接两个或多个字符串,返回连接后的字符串 fromCharCode() 将字符转换为 Unicode 值 indexOf() 返回字符串中检索指定字符第一次出现的位置 lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置 localeCompare() 用本地特定的顺序来比较两个字符串 match() 找到一个或多个正则表达式的匹配 replace() 替换与正则表达式匹配的子串 search() 检索与正则表达式相匹配的值 slice() 提取字符串的片断,并在新的字符串中返回被提取的部分 split() 把字符串分割为子字符串数组 substr() 从起始索引号提取字符串中指定数目的字符 substring() 提取字符串中两个指定的索引号之间的字符 toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写,只有几种语言(如土耳其语)具有地方特有的大小写映射 toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写,只有几种语言(如土耳其语)具有地方特有的大小写映射 toLowerCase() 把字符串转换为小写 toString() 返回字符串对象值 toUpperCase() 把字符串转换为大写 trim() 移除字符串首尾空白 valueOf() 返回某个字符串对象的原始值

19.js中的breakcontinue

break 语句可用于跳出循环。
break 语句跳出循环后,会继续执行该循环之后的代码(如果有的话):

continue 语句中断循环中的迭代,如果出现了指定的条件,然后继续循环中的下一个迭代。 该例子跳过了值 3:
eg:

for (i=0;i<=10;i++)
  {
      if (i==3) continue;
      x=x + "The number is " + i + "<br>";
   } 

20.JavaScript typeof, null, 和 undefined

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

JavaScriptnull表示 "什么都没有"。

typeof检测 null返回是object

可以设置为 null 来清空对象:
var person = null;

可以设置为 undefined 来清空对象:
var person = undefined;

JavaScript 中, undefined 是一个没有设置值的变量。
typeof 一个没有值的变量会返回 undefined

Undefined和Null的区别:

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true

请注意:

NaN 的数据类型是 number
数组(Array)的数据类型是 object
日期(Date)的数据类型为 object
null 的数据类型是 object
未定义变量的数据类型为 undefined

21.JavaScript 类型转换

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

22.JavaScript 数据类型

在 JavaScript 中有 5 中不同的数据类型:

string
number
boolean
object
function

3 种对象类型:

Object
Date
Array

2 个不包含任何值的数据类型:

null
undefined

23.JavaScript 类型转换

1)将数字转换为字符串

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

x.toString()
(123).toString()
(100 + 23).toString()

2)将布尔值转换为字符串

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

String(false)        // 返回 "false"
 String(true)         // 返回 "true" 

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

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

3)将日期转换为字符串

全局方法 String() 可以将日期转换为字符串。
String(Date()) // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

Date 方法 toString() 也有相同的效果。
Date().toString() // 返回 Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)

4)将字符串转换为数字

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

5)将布尔值转换为数字

Number(false)     // 返回 0
Number(true)      // 返回 1 

*注意:获得时间戳

d = new Date();
d.getTime()        // 返回 1404568027739 

6)自动转换类型 Type Conversion

5 + null    // 返回 5         because null is converted to 0
"5" + null  // 返回"5null"   because null is converted to "null"
"5" + 1     // 返回 "51"      because 1 is converted to "1"  
"5" - 1     // 返回 4         because "5" is converted to 5

7)自动转换为字符串

 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" 

24.js正则表达式

Regular Expression: 有规律的 表达式
简写为:regex, regexp,RE

作用:使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。
搜索模式可用于文本搜索文本替换

1)什么是正则表达式?
正则表达式是由一个字符序列形成的搜索模式
当你在文本中搜索数据是,你可以用搜索模式来描述你要查询的内容。
正则表达式可以是一个简单的字符,或一个更复杂的模式。
正则表达式可用于所有文本搜索文本替换的操作。

2)语法:
/pattern/modifiers; // pattern:模式 modifier:修饰语

eg:
var patt = /shouce.ren/i
/shouce.ren/i 是一个正则表达式。
shouce.ren 是一个模式 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。

3)使用字符串方法

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

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

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

实例:

var str = "Visit shouce.ren";
var n = str.search(/shouce.ren/i); // 输出的n 为6

var str = "Visit shouce.ren!";
var n = str.search("shouce.ren");   // n => 6

var str = "Visit Microsoft!";
var res = str.replace(/microsoft/i, "shouce.ren");   // res => shouce.ren

作用:
正则表达式参数可用在以上方法中 (替代字符串参数)。
正则表达式使得搜索功能更加强大(如实例中不区分大小写)。

4)正则表达式修饰符

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

i   执行对大小写不敏感的匹配。
g   执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。
m   执行多行匹配。

5)正则表达式模式

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

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

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

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

量词:

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

6)使用 RegExp 对象
JavaScript中,RegExp对象是一个预定义了属性和方法的正则表达式对象。

a.使用test()

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

var patt = /e/;
patt.test("The best things in life are free!");

b.使用exec()

exec() 方法是一个正则表达式方法。
exec()方法用于检索字符串中的正则表达式的匹配。
该函数返回一个数组,其中存放匹配的结果。如果未找到匹配,则返回值为 null

eg:

 /e/.exec("the best things");  // 含有e: 返回  "e"

25.js表单验证

JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。表单数据经常需要使用 JavaScript 来验证其正确性:

1)必填(或者必选)项目

function validateForm(){
 var x=document.forms["myForm"]["fname"].value;
 if (x==null || x=="")
   {
   alert("First name must be filled out");
   return false;
   }
 }

2)Email验证:

 function validateForm(){

     var x=document.forms["myForm"]["email"].value;
     var atpos=x.indexOf("@");
     var dotpos=x.lastIndexOf(".");
     if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
       alert("Not a valid e-mail address");
       return false;
       }
  }

26.js标准

所有的现代浏览器完全支持 ECMAScript 3ES3JavaScript的第三版,从 1999年开始)。

ECMAScript 4(ES4)未通过。

ECMAScript 5ES52009年发布),是 JavaScript最新的官方版本。

随着时间的推移,我们开始看到,所有的现代浏览器已经完全支持ES5

27.javaScript JSON

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

1)什么是JSON?

JSON英文全称 JavaScript Object Notation
JSON 是一种轻量级的数据交换格式。
JSON是独立的语言 。
JSON易于理解。

*注意:JSON 使用 JavaScript 语法,但是 JSON格式仅仅是一个文本
文本可以被任何编程语言读取及作为数据格式传递。

eg:

{"employees":[
 {"firstName":"John", "lastName":"Doe"}, 
 {"firstName":"Anna", "lastName":"Smith"},
 {"firstName":"Peter", "lastName":"Jones"}
 ]}

2)JSON 格式化后为 JavaScript 对象

JSON格式在语法上与创建 JavaScript 对象代码是相同的。
由于它们很相似,所以 JavaScript 程序可以很容易的将JSON数据转换为 JavaScript 对象。

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

4)JSON 字符串转换为JavaScript 对象

通常我们从服务器中读取 JSON数据,并在网页中显示数据。
eg:
创建 JavaScript 字符串,字符传为 JSON格式的数据:

var text = '{ "employees" : [' +
 '{ "firstName":"John" , "lastName":"Doe" },' +
 '{ "firstName":"Anna" , "lastName":"Smith" },' +
 '{ "firstName":"Peter" , "lastName":"Jones" } ]}';

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

var obj = JSON.parse(text);  // 将json格式字符串转为js对象

28.javascript:void(0)含义

我们经常会使用到 javascript:void(0)这样的代码,那么在JavaScriptjavascript:void(0)代表的是什么意思呢?

javascript:void(0)中最关键的是void关键字, voidJavaScript中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值
eg:
<a href="javascript:void(0)">单击此处什么也不会发生</a>

<head>
 <script type="text/javascript">
 function getValue(){
   var a,b,c;
   a = void ( b = 5, c = 7 );
   document.write('a = ' + a + ' b = ' + b +' c = ' + c );
 }
 </script>
 </head> 
// 输出结果: a=undefined b = 5 c = 7  。void();  ()里面计算一个表达式,但是不返回值

1)href="#"与href="javascript:void(0)"的区别

# 包含了一个位置信息,默认的锚是#top 也就是网页的上端。
javascript:void(0), 仅仅表示一个死链接。
在页面很长的时候会使用 # 来定位页面的具体位置,格式为:# + id
eg:

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br><br><br> <p id="pos">尾部定位点</p> 

29.函数

1)匿名函数

 var x = function (a, b) {return a * b};  // 匿名函数声明
 var z = x(4, 3);   // 函数调用

2)Function() 构造函数

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

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3); // 函数调用

*注意:在 JavaScript 中,很多时候,你需要避免使用 new 关键字。所以建议一般不适用new关键字去创建

3)函数提升 Hoisting

参考:http://www.jb51.net/article/30719.htm

js中:与c语言不一样,c语言有块级作用域,js却没有,因为JavaScript是函数级作用域(function-level scope)
这和C系语言是完全不同的。,就像if语句,并不会创建一个新的作用域。只有函数才会创建新的作用域
C,C++,C#或是Java 块级作用域。

var x = 1; 
console.log(x); // 1 
if (true) { 
var x = 2; 
console.log(x); //2 
} 
console.log(x);// 2 

因为JavaScript函数的灵活性,对于这个问题我们有一个解决方案。如果你必须在函数中创建一个临时的作用域,请像下面这样做:

function foo() { 
    var x = 1; 
    if (x) { 
        (function () { 
            var x = 2; 
           // some other code 
         }()); 
    } 
   // x is still 1. 
 } 

开辟临时作用域:
(function(){ })

这种方面确实非常灵活,它使用在任何需要创建一个临时作用域的地方,不仅仅是某个块中。但是,我强烈建议多花点时间好好理解下JavaScript scoping。它实在是非常强力,而且它也是我最喜欢的语言特性之一。如果你很好的理解了scoping,理解hoisting将会更加容易。

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

var text = myFunction.toString();

1)js中提升,有变量提升函数提升

var v='Hello World'; 
    (function(){ 
    var v; 
    alert(v);    // 结果是undefined
    v='I love you'; 
})() 

可见js中的作用域是以函数为边界的

函数的写法: 一种是函数表达式,另外一种是函数声明方式

*注意:js没有块级作用域的概念

变量提升与js预编译有关

js预编译时会先在当前作用域中找到var声明的变量分配空间,赋值为undefined,如果找不到就会到下一级作用域中找

解析器在向执行环境中加载数据时,对函数声明函数表达式并非一视同仁。
解析器会率先读取函数声明,并使其在执行任何代码之前可用(可以访问);至于函数表达式,则必须等到解析器执行到它所在的代码行,才会真正被解释执行。

*注意:
参考:http://www.cnblogs.com/Wayou/p/javascript_arguments_passing_with_reference.html
1.匿名函数无法在声明前调用

  1. 参数变更影响到函数外部
    当传递给函数的参数是一个数组或对象时,在函数体内对这个传入的参数的更改会影响到函数体外的原传入值。
    一般说来,对参数的更改不会影响到原来变量的值,更改只在函数体内起作用:
    但情况有所不同,当传入的参数是数组、对象时,在函数体内对参数所做的更改会反映到原变量上。
    3.使用arguments来接收个数未定的参数

eg:这个是函数声明

alert(sum(10,10));
function sum(num1,num2)
{
    return num1+num2;
} 

以上代码完全可以正确执行,因为在代码开始执行之前,解析器就已经通过一个名为函数声明提升function declaration hoisting)的过程,读取并将函数声明添加到执行环境中。对代码求值时,JavaScript引擎在第一遍会声明函数并将它们放到源代码树的顶部。所以,即使声明函数的代码在调用它的代码后面,JavaScript引擎也能把函数声明提升到顶部。如果像下面的例子所示,把上面的函数声明改为等价的函数表达式,就会在执行的时候出现错误。

这个是函数表达式,函数表达式不会提升函数

alert(sum(10,10));  // 报错
var sum=function(num1,num2)
{
    return num1+num2;
};  

try{

以上代码会在运行的时候出现错误,原因在于函数位于一个初始化语句中,而不是一个函数声明。换句话讲,在执行到函数所在的语句之前,变量sum中不会保存有对函数的引用;而且,由于第一行代码就会导致“unexpected identifier”(意外标识符)错误,实际上也不会执行到下一行。

try,catch的使用:

}catch(e){
     alert(e);
}

4)自调用函数

函数表达式可以 "自调用"。
自调用表达式会自动调用。
如果表达式后面紧跟 (),则会自动调用。
Y不能自调用声明的函数。
通过添加括号,来说明它是一个函数表达式

实例:

(function(){
    var x = 'hellow!';   // 我将会自动调用自己
})();

语法:

( // 自动调用函数 )()

5)函数是对象

eg:

function(a, b){
    return arguments.length;  // 返回收到参数个数
}

6)函数默认参数

如果函数在调用时缺少参数,参数会默认设置为: undefined
有时这是可以接受的,但是建议最好为参数设置一个默认值:

eg:

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

或者,更简单的方式:

function myFunction(x, y) {
     y = y || 0;  // 如果y已经定义 , y || 返回 y, 因为 y 是 true, 否则返回 0, 因为 undefined 为 false。
} 

7)函数的Arguments对象

JavaScript 函数有个内置的对象 arguments 对象.
argument 对象包含了函数调用的参数数组。
如果函数调用时设置了过多的参数,参数将无法被引用,因为无法找到对应的参数名。 只能使用arguments对象来调用
通过这种方式你可以很方便的找到最后一个参数的值:

eg:

x = findMax(1, 123, 500, 115, 44, 88);
function findMax() {    
      var i, max = 0;   
       for (i = 0; i < arguments.length; i++) {  
            if (arguments[i] > max) {         
                max = arguments[i];      
            }  
       }   
       return max;
 }

8)通过值传递参数

在函数中调用的参数是函数的参数。
如果函数修改参数的值,将不会修改参数的初始值(在函数外定义)。
函数参数的改变不会影响函数外部的变量(局部变量)。

9)通过对象传递参数

JavaScript中,可以引用对象的值。
因此我们在函数内部修改对象的属性就会修改其初始的值。
修改对象属性可作用于函数外部(全局变量)。

10)函数的调用

JavaScript 函数有 4 种调用方式。
每种方式的不同方式在于 this 的初始化。

a)作为一个函数调用
实例

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对象作为一个变量容易造成程序崩溃。

b)函数作为方法调用

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

var myObject = {
     firstName:"John",
     lastName: "Doe",
     fullName: function () {
         return this.firstName + " " + this.lastName;
     }
 }
 myObject.fullName();         // 返回 "John Doe" 

*注意:这里,方法和函数的区别

c)使用构造函数调用函数

function myFunction(){    
    this.fir = arguments[0];    
    this.sec = arguments[1];
}
var my = new myFunction("a", "b");
alert(my.fir);

*注意:
构造函数中 this 关键字没有任何的值。
this 的值在函数调用时实例化对象(new object)时创建。

d)作为函数方法调用函数

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

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

例子1:

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

例子2:

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

11)js闭包

JavaScript变量可以是局部变量全局变量
私有变量可以用到闭包

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

JavaScript内嵌函数
所有函数都能访问全局变量。
实际上,在 JavaScript中,所有函数都能访问它们上一层的作用域。
JavaScript 支持嵌套函数嵌套函数可以访问上一层的函数变量。

JavaScript 闭包
函数自我调用 该函数会做什么?
eg:

var add = (function () {
    var counter = 0;
    return function () {
        return counter += 1;
    }
})();
add();
add();
add();

// 计数器为 3

变量add指定了函数自我调用的返回字值。
自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
这个叫作JavaScript 闭包。它使得函数拥有私有变量变成可能。
计数器受匿名函数作用域保护,只能通过 add 方法修改。

*注意:函数自调用和闭包的区别

30.HTML DOM

通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
当网页被加载时,浏览器会创建页面的文档对象模型Document Object Model)。

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

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

1)查找HTML元素
var x=document.getElementById("intro");
如果找到该元素,则该方法将以对象(在 x中)的形式返回该元素。
如果未找到该元素,则 x 将包含 null

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

var x=document.getElementsByClassName("intro");  // 返回的一个数组,class = intro的数组

2)改变HTML输出流

document.write(Date());

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

3)改变 HTML 内容

document.getElementById(id).innerHTML=new HTML 
  1. 改变 HTML 属性

    document.getElementById(id).attribute=new value
    eg:

    document.getElementById("img").src = "landscape.jpg";

5)改变css

document.getElementById(id).style.property=new style 

eg:

document.getElementById("p2").style.color="blue";

31.html dom事件

HTML DOM 使 JavaScript有能力对 HTML事件做出反应。

onclick=JavaScript 

类型:

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

实例:

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

*注意:onclick属性不适用以下元素:<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>

1)onloadonunload事件

作用:
onloadonunload事件会在用户进入或离开页面时被触发

onload 事件可用于检测访问者的浏览器类型浏览器版本,并基于这些信息来加载网页的正确版本。

onloadonunload事件可用于处理 cookie

2)<input> 的 onchange事件

3)onmouseover 和 onmouseout 事件

4)onmousedown、onmouseup 以及 onclick 事件

onmousedown, onmouseup 以及onclick构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown事件,当释放鼠标按钮时,会触发 onmouseup事件,最后,当完成鼠标点击时,会触发 onclick 事件。

32.HTML DOM EventListener

当用户点击按钮时触发监听事件:

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

addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄,如:两个 "click" 事件。
你可以向任何DOM 对象添加事件监听,不仅仅是HTML 元素。如: window对象。
当你使用 addEventListener() 方法时,JavaScriptHTML 标记中分离开来,可读性更强, 在没有控制HTML标记时也可以添加事件监听。
可以使用 removeEventListener()方法来移除事件的监听。

1)语法:

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型 (如 "click""mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
*注意:不要使用 "on"前缀。 例如,使用"click",而不是使用 "onclick"

2)事件冒泡或事件捕获?

事件传递有两种方式:冒泡捕获

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

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

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

默认值为false, 即冒泡传递,当值为 true时, 事件使用捕获传递
捕获传递:

document.getElementById("myDiv").addEventListener("click", myFunction, true);

3)浏览器支持

var x = document.getElementById("myBtn");
if (x.addEventListener) {                    // 所有主流浏览器,除了 IE 8 及更早版本
    x.addEventListener("click", myFunction);
} else if (x.attachEvent) {                  // IE 8 及更早版本
    x.attachEvent("onclick", myFunction);
}

33.HTML DOM 元素(节点)

1)给自己增加子节点,删除子节点
appendChild()
removeChild()

eg:

var child=document.getElementById("p1");
child.parentNode.removeChild(child);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,117评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,328评论 1 293
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,839评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,007评论 0 206
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,384评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,629评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,880评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,593评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,313评论 1 243
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,392评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,052评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2 270

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,152评论 0 4
  •   引用类型的值(对象)是引用类型的一个实例。   在 ECMAscript 中,引用类型是一种数据结构,用于将数...
    霜天晓阅读 1,014评论 0 1
  • 感赏儿子今天安排了学习。 感赏儿子对我说的话,儿子说,你每天都不高兴,出门也不高兴,回来也不高兴,我难过时需要你安...
    玲03阅读 181评论 0 1
  • 1《爱情模样》 干柴烈火情奔放, 水煮生米爱疯狂。 柴尽火灭化作灰, 水浊饭稀泡成汤。 2《结婚模样》 有车有房都...
    实笔能书阅读 623评论 41 45
  • 你是飞雪留给冬天的信笺 是寒风留给春花的悬念 你是漂洋过海的白鸽坚持的信念 是追寻时间的使者不停歇 你是夏夜的磅礴...
    酒梦阅读 917评论 44 48