js 学习笔记
一 入门级别
html是定义网页的内容，CSS规定网页的布局，JS是对网页行为进行编程；
js是互联网上对位流行的脚本语言，这门语言可以用于HTML和web，更为广泛的用于服务器，PC，笔记本，电脑，平板等设备。
js 的用法，HTML的脚本必须位于标签之间，脚本可被放置在HTML页面和和部分中间。
外部的就是文件，我们需要在标签内的SRC属性中设置该js文件。
需要注意的细节问题
1.在标签中填写onclick事件调用函数时，不是onclick = 函数名，而是onclick = 函数名（）
2.外部javajscript文件不使用<script>标签，直接写js代码。
3.HTML输出流中使用document。write代码
1.1 JS中的输出
- JS 中通过不同的方式进行输出数据
- 使用window.alert()弹出警告框
- 使用document.write()方法件内容写到HTML文档中
- 使用innerHTML写入到HTML元素
- 使用console.log()写入到浏览器的控制台
- 重点细节
- 使用document.write()仅仅向文档输出写内容，如果在文档以完成加载后执行document.write,整个HTML页面将会被覆盖。
1.2 JS基础知识
1.2.1 访问对象方法
可以通过以下的方法创建对象方法
格式：
name: function(){
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>创建和使用对象方法。</p>
<p>对象方法作为一个函数定义存储在对象属性中。</p>
<p id="demo"></p>
<script>
var person = {
firstName: "John",
lastName : "Doe",
id : 5566,
fullName : function()
{
return this.firstName + " " + this.lastName;
}
};
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>
1.2.2 js函数
函数石油事件驱动的或者当它被调用的时候执行的可重复使用的代码块。
- JS函数语法，函数就是保狗仔花括号中的代码块，前面使用关键词function:
function funcitonname()
{
//执行代码
}
中间需要注意的是关键词必须是小写的，并且必须以与函数名称相同的大小来调用函数。
- 调用带参数的函数
在调用函数的时候你可以向其传递值，这些值就是被称之为参数，这些参数可以在函数中使用，中间的参数通过逗号进行隔开。
function myFunction(var1,var2)
{
//代码
}
-
带有返回值的函数
function myFunction(){ var x = 5; return x; } 注意：函数调用将被返回值取代
1.2.3 js 作用域
作用域是可访问变量的集合，在函数中存在的变量和Java语言中的变量的语言是一样的，比如：局部变量和全局变量的相关知识点，两者是相类似的。
1.2.4 js 事件
常见的HTML事件
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素改变 |
| onclick | 用户点击 HTML 元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
1.2.5 js字符串
js字符串用于储存和处理文本；字符串可以存储系列字符如“zhouzongi”,字符串可以插入引号中的任何字符，可以使用单引号或者双引号。我们也可以通过索引位置来访问字符串的每个字符。特殊的字符串如下，如防止中间进行隔断的情况：
| 代码 | 输出 |
|---|---|
| ’ | 单引号 |
| " | 双引号 |
| \ | 反斜杠 |
| \n | 换行 |
| \r | 回车 |
| \t | tab(制表符) |
| \b | 退格符 |
| \f | 换页符 |
js中可以使用字符常见：var frist1 = “jone”
但是我们也可以使用new关键字将字符串定义为一个对象: var frist2= new String（“John”）
注意：此时的frist1===frist2 //结果是错误的，因为1是字符串，2是对象。
1.2.6 js循环
- 使用for循环：
for (var i = 0;i<cars.length ;i++){
document.write(cars[i]="<br>");
}
-
for /in循环
for/in循环遍历对象的属性 var person={fname:"Bill",lname:"Gates",age:56}; for (x in person) // x 为属性名 { txt=txt + person[x]; }
1.2.7 js错误
语法：
try {
... //异常的抛出
} catch(e) {
... //异常的捕获与处理
} finally {
... //结束处理
}
1.2.8 拓展
- HTML表单验证也可以通过浏览器来自动完成，若表单字段的值为空，那么required属性会阻止表单提交，运行的代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form action="demo_form.php" method="post">
<input type="text" name="fname" required="required">
<input type="submit" value="提交">
</form>
</body>
</html>
- 约束验证 HTML 输入属性
| 属性 | 描述 |
|---|---|
| disabled | 规定输入的元素不可用 |
| max | 规定输入元素的最大值 |
| min | 规定输入元素的最小值 |
| pattern | 规定输入元素值的模式 |
| required | 规定输入元素字段是必需的 |
| type | 规定输入元素的类型 |
- 约束验证 CSS 伪类选择器
| 选择器 | 描述 |
|---|---|
| :disabled | 选取属性为 “disabled” 属性的 input 元素 |
| :invalid | 选取无效的 input 元素 |
| :optional | 选择没有"optional"属性的 input 元素 |
| :required | 选择有"required"属性的 input 元素 |
| :valid | 选取有效值的 input 元素 |
-
let关键字解决的问题是，保持let命令所在的代码块{}内饰有效的。
实例
var i = 5; for (var i = 0; i < 10; i++) { // 一些代码… } // 这里输出 i 为 10
使用 let 关键字：
实例
let i = 5; for (let i = 0; i < 10; i++) { // 一些代码… } // 这里输出 i 为 5
在第一个实例中，使用了 var 关键字，它声明的变量是全局的，包括循环体内与循环体外。
在第二个实例中，使用 let 关键字， 它声明的变量作用域只在循环体内，循环体外的变量不受影响。
-
相同点：在函数体内使用var和let关键字生命的变量有点类似，它们的作用与都是局部的。在函数体外和代码外使用var和let嘎UN就爱你自生命的白能量有点类似，他的作用域都是全局的。 在相同的作用域或者块级作用域中，不能使用let关键字来重置var关键字。 var关键字声明的变量在任何地方都能够修改。
1.2.9 json
JSON的用途：用于存储和传输数据的格式，通常用于服务端向网页传递数据。这个这个常用的地方是通过后台的数据传递实现异步交互。
1.2.10 异步编程
对比于同步来说，同步的执行就是按照代码的顺序进行执行，然而异步则是不按照代码顺序执行。
在此引入的setTimeout就是一个消耗时长的过程，他的第一个参数是回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，然后通过执行回调函数“print”，在命令行输出“Time out”。
setTimeout(function () {
document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);
1.2.11 JS promise
-
目的promise目的是更加优雅地书写复杂的异步任务。
-
构建一个promise对象
new Promise(function (resolve, reject) { // 要做的事情... });
二 js的函数
2.1 js函数的定义
在上述的教程中，我们已将了解到函数的声明的语法
function 函数名称(参数中间通过，隔开){
//执行的代码
}
函数声明后不会进行执行，会在我们需要的时候调用到。函数的声明不是一个可执行的语句，所以不需要通过分号结束
function myFunction(a, b) {
return a * b;
}
下面的函数实际上是一个执行语句，所以是通过分号结尾(也就是函数的调用）
var x = function (a, b) {return a * b};
var z = x(4, 3);
2.2 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);
2.3 函数的提升（Hosting)
应用范围：在声明变量与函数的声明。 提升就是将当前的作用域提升到期那面的行为。因此函数可以在声明之前调用：
myFunction(5);
function myFunction(y) {
return y * y;
}
使用表达式定义函数时无法提升。
2.4 自调用函数
函数表达式可以“自调用"，自调用表达式会自动调用，如果表达式后面紧更着（）,则会自动调用，不能自调用声明函数，通过添加括号，来说明它是一个函数表达式：
(function () {
var x = "Hello!!"; // 我将调用自己
})();
2.5 函数是对象
js函数有属性和方法
function name(a,b){
return arguments.length;
}
其中arguments.length属性返回函数调用过程接收到的参数的个数。
toString()方法将函数作为一个字符串返回
function myFunction(a, b) {
return a * b;
}
var txt = myFunction.toString();
2.6 函数显示参数（paramenters）与隐式参数（Arguments）
-
区别：函数显示参数在函数定义时列出，函数隐式参数在函数调用的时候传递给函数真正的值。
-
如果函数调用时设置了过多的参数，参数将无法被引用，因为无法找到对应的参数名称，只能使用arguments对象来调用。
-
arguments对象：包含了函数调用的参数数组，通过这种方式你可以很方便地找到最大的一个参数的值。通过这种方式可以很方便的找到最大的参数值，隐式函数进行值传递，函数仅仅只是获取值。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>菜鸟教程(runoob.com)</title> </head> <body> <p>计算所有参数之和：</p> <p id="demo"></p> <script> /*代码中arguments.length 表示的是参数的个数*/ function sumAll() { var i, sum = 0; for(i = 0; i < arguments.length; i++) { sum += arguments[i]; } return sum; } document.getElementById("demo").innerHTML = sumAll(1, 123, 500, 115, 44, 88); </script> </body> </html> 求出的所有参数之和 871
-
2.7 函数的调用（有四种调用方式）
-
This关键字，在JS中，this指向函数执行的当前对象
-
全局变量：当函数没有被自身的对象调用时，this的值就会变成全局变量对象，在web浏览器中全局变量是浏览器窗口(window对象)。该实例返回this的值是window对象。
function myFunction() { return this; } myFunction(); // 返回 [object window] -
函数作为方法调用
-
下列实例创建了一个对象，对象有两个竖向以及一个方法(其中myObject是函数的所有者，实例中的this值为myObject对象)
var myObject = { firstName:"John", lastName: "Doe", fullName: function () { return this.firstName + " " + this.lastName; } } myObject.fullName(); // 返回 "John Doe"
-
-
使用构造函数调用函数
-
如果函数调用前使用了new关键字，则是调用了构造函数，这看起来像是创建了新的函数，但实际上js函数是重新创建的对象；
// 构造函数: 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)时创建。
-
-
作为函数方法调用函数
-
在js中，函数是对象，JS函数有他自己的属性和方法，call()和apply()是预定义的函数方法，两个方法可用于调用函数，两个方法的第一个参数必须是对象本身。
-
实例
function myFunction(a, b) { return a * b; } myObject = myFunction.call(myObject, 10, 2); // 返回 20 function myFunction(a, b) { return a * b; } myArray = [10, 2]; myObject = myFunction.apply(myObject, myArray); // 返回 20
-
2.8 js闭包
- 在js中，变量的声明如果不适用var关键字，那么他就是一个全局变量，即便他在函数中定义。
二 高级JS
2.1 js DOM
-
document.wrie()可以直接用于向HTML输出流写内容
-
改变HTML内容最简单的方法是使用innerHTML属性，使用的语法是document.getElementById(id).innerHTML = “XXXXXXX”;
-
改变HTML的属性，使用的语法是：
document.getElementById(id).attribute=新属性值实例
<img id="image" src="smiley.gif"> <script> document.getElementById("image").src="landscape.jpg"; </script> -
改变HTML的样式
document.getElementById(id).style.property=新样式实例
<script> document.getElementById("p2").style.color="blue"; document.getElementById("p2").style.fontFamily="Arial"; document.getElementById("p2").style.fontSize="larger"; </script> -
对于事件作出反应，向button元素分配onclick事件
<script> document.getElementById("myBtn").onclick=function(){displayDate()}; </script> -
onload和onunload事件
两个事件会在用户进入或离开页面是被触发，onload事件可以用于检测访问者的浏览器类型和浏览器版本，并基于这些纤细加载网页的正确版本。
1471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
