函数定义
函数的声明
function functionName(parameters){
code;
}
函数表达式
JS函数可以通过一个表达式定义,函数表达式可以存储在变量中。当存储在变量中之后,变量也可以作为一个函数使用。函数表达式实际是一个匿名函数,是执行语句,已分号结尾。
var x = function(a,b) {return a * b};
var z = x(4,3);
Function()构造函数
函数可用JS构造器来定义。Function()。实际上不必使用构造函数,JS中应避免使用new
关键字。
var mayFunction = new Function("a","b","return a * b");
var x = myFunction(4,3);
函数提升(Hoisting)
提升(Hoisting)是JS默认将当前作用域提升到前面去的行为。
so,函数可以在声明之前调用。
自调用函数
函数表达式可以 "自调用"。
自调用表达式会自动调用。
如果表达式后面紧跟 () ,则会自动调用。
Y不能自调用声明的函数。
通过添加括号,来说明它是一个函数表达式:
(function () {
var x = "Hello!!"; // 我将调用自己
})();
函数是对象
函数可以作为一个值使用。
JS函数带有属性和方法。
arguments.lenth
属性返回函数调用过程接收到的参数个数:
function myFunction(a, b) { return arguments.length; }
toString()
方法将函数作为一个字符串返回:var text = myFunction.toString()
;
函数参数
JS函数对参数的值不进行任何检查。
显式参数和隐式参数
函数显式参数在函数定义时列出,隐式参数在函数调用时传递给函数真正的值。
默认参数
如果函数在调用时缺少参数,参数会默认设置为undefined(undefined为FALSE)。建议最好为参数设置一个默认值。
简单方式:
function myFunction(x, y) { y = y || 0; }
Arguments对象
JS函数有个内置的arguments对象,包含了函数调用的参数数组。
function findMax() {
var i, max = 0;
for (i = 0; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
}
函数的调用
JS函数有4种调用方式,每种方式的不同在于this的初始化。
this指向函数执行时的当前对象。
全局对象
当函数没有被自身的对象调用时,this的值就是全局对象。在 web 浏览器中全局对象是浏览器窗口(window 对象)。该实例返回 this 的值是 window 对象。使用window对象作为一个变量容易造成程序崩溃。
function myFunction() {
return this;
}
myFunction(); // 返回 window 对象
函数作为方法调用
用实例创建一个对象,对象带有属性和方法。
var myObject = {
firstName:"John",
lastName: "Doe",
fullName: function () {
return this.firstName + " " + this.lastName;
}
}
myObject.fullName(); // 返回 "John Doe"
使用构造函数调用函数
如果哈数调用前使用了new关键字,则是调用了构造函数。
function myFunction(arg1,arg2){
this.firstName = arg1;
this.lastName = arg2;
}
var x = myFunction("John","Doe");
x.firstName; // 返回"John"
作为函数方法调用函数
JS中函数是对象,他有自己的属性和方法。all(),apply()是预定义的函数方法,两个方法可用于调用函数,两个方法的第一个参数必须是对象本身。
function myFunction(a, b) {
return a * b;
}
myFunction.call(myObject, 10, 2); // 返回 20
// myArray = [10,2];
// myFunction.apply(myObject, myArray); // 返回 20
JS闭包
JS私有变量可以用到闭包。
变量声明如果不使用var关键字,那它就是一个全局变量。
自我调用函数,闭包:
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
add();
add();
add();
// 计数器为 3
变量add指定了函数自我调用的返回字值。
自我调用函数只执行一次。设置计数器为0。并返回函数表达式。
add变量可以作为一个函数使用。它可以访问函数上一层作用域的计数器。
这个叫做JS闭包。它使得函数拥有私有变量变成可能。计数器受匿名函数的作用域保护,只能通过add方法修改。
闭包可以访问上一层作用域里变量的函数,即时上一层函数已经关闭。
HTML DOM
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
通过可编程对象模型,JavaScript获得了足够的能力来创建动态的HTML。
JavaScript 能够改变页面中的所有 HTML 元素
JavaScript 能够改变页面中的所有 HTML 属性
JavaScript 能够改变页面中的所有 CSS 样式
JavaScript 能够对页面中的所有事件做出反应
查找HTML元素
通过ID查找:var x = document.getElementById("intro");
通过标签名查找:var x = document.getElementById("main"); var y = x.getElementsByTagName("p") // 数组
通过类名查找:var x = document.getElementsByClassName("intro") // 数组
改变HTML
- 改变输出流:
document.write()
。绝对不要在文档加载完成后使用document.write()
,会覆盖该文档。 - 改变HTML内容:
document.getElementById(id).innerHTML = new value
- 改变HTML属性:
document.getElementById(id).attribute = new value
改变CSS
document.getElementById(id).style.property = new style
DOM 事件
对事件做出反应
如需在用户点击某个元素时执行代码,则添加JS代码:onclick = JavaScript
HTML DOM分配事件
分配onclick事件,eg:<script>document.getElementById("myBtn").onclick=function(){displayDate()};</script>
一些事件:
- onload,onunload
- onchange
- onmouseover,onmouseout
- onmousedown,onmouseup,onclick
- onfocus
HTML DOM EventListener
addEventListener()
element.addEventListener(event,function,userCapture)
- event:事件类型,不要使用"on"前缀。
- function:事件触发后调用的函数。
- userCapture:布尔值,用于描述事件是冒泡还是捕获,默认为false,冒泡传递。可选。
addEventListener()允许向同个元素添加多个事件,且不会覆盖已存在的事件。
事件冒泡,事件捕获
冒泡:内部元素的事件先被触发,再触发外部元素事件。
捕获:外部元素事件先被触发,再触发内部元素的事件。
removeEventListener()方法
用于移除由addEventListener()方法添加的事件句柄。
DOM元素
创建新的HTML元素(节点)
如需向HTML DOM添加新元素,必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);
var element=document.getElementById("div1");
element.appendChild(para);
</script>
删除已有HTML元素
<div id="div1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>
JavaScript对象
JavaScript中的所有事务都是对象,并且允许自定义对象。对象只是带有属性和方法的特殊数据类型。
JavaScript类
JavaScript是面向对象的语言,但JavaScript不使用类。
在JavaScript中,不会创建类,也不会通过类来创建对象。JavaScript是基于prototype的,而不是基于类的。
Number
属性:
- MAX_VALUE
- MIN_VALUE
- NEGATIVE_INFINITY // 服务穷大
- POSITIVE_INFINITY // 正无穷大
- NaN // 非数字值
- prototype
- constructor
方法:
- toExponential()
- toFixed()
- toPrecision()
- toString()
- valueOf()
String
属性:
- length
- prototype
- constructor
方法:
- charAt()
- charCodeAt()
- concat()
- fromCharCode()
- indexOf() // 定位字符串中某个指定的字符首次出现的位置。
- lastIndexOf() // 在字符串末尾开始查找字符串出现的位置。
- match() // 内容匹配,如果找到则返回这个字符。
- replace()
- search()
- slice()
- split() // 转为数组
- substr()
- substring()
- toLowerCase()
- toUpperCase()
- valueOf()
Date
方法:
- Date() // 获得当前日期
- getFullYear() // 使用 getFullYear() 获取年份。
- getTime() // getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
- setFullYear() // 使用 setFullYear() 设置具体的日期。
- toUTCString() // 使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串。
- getDay() // 使用 getDay() 和数组来显示星期,而不仅仅是数字。
Array
- 合并多个数组 - concat()
- 用数组的元素组成字符串 - join()
- 删除数组的最后一个元素 - pop()
- 数组的末尾添加新的元素 - push()
- 将一个数组中的元素的顺序反转排序 - reverse()
- 删除数组的第一个元素 - shift()
- 从一个数组中选择元素 - slice()
- 数组排序(按字母顺序升序)- sort()
- 数字排序(按数字顺序升序)- sort()
- 数字排序(按数字顺序降序)- sort()
- 在数组的第2位置添加一个元素 - splice()
- 转换数组到字符串 -toString()
- 在数组的开头添加新元素 - unshift()
Boolean
如果布尔对象无初始值或者其值为:0,-0,null,"",false,undefined,NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!
Math
Math.round(2.5);
- round()四舍五入
- random()0-1的随机数
- max()多个数中的最大数
- min()多个数中的最小数
RegExp
浏览器BOM
所有浏览器都支持window对象,它表示浏览器窗口。
网友评论