[JavaScript知识库]JavaScript

JavaScript语言由3部分组成，分别是ECMAScript、BOM和DOM，

其中ECMAScript是JavaScript语言的核心，

而Web API包括BOM(页面文档对象模型)和DOM(浏览器对象模型)两部分，

利用DOM可完成对HTML文档内所有元素的获取、访问、标签属性和样式的设置等操作。在实际开发中，诸如改变盒子的大小、标签栏的切换、购物车功能等带有交互效果的页面，都离不开DOM。

交互性：信息的动态交互
安全性：不允许直接访问硬盘
跨平台性：只要是可以解释js的浏览器都可以执行，和平台无关

//1.
在html中在script标签中书写script代码
//2.
用script标签引入js文件 敲入src属性引入js文件路径

1.输出语句与输入语句

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

2.变量的赋值和声明

赋值

一条语句，多个变量 var 开头，并使用逗号分隔变量即可：
var lastname="Doe", age=30, job="carpenter";
一条语句中声明的多个变量不可以同时赋同一个值:
var x,y,z=1;

变量

全局变量
var 变量; ? undefined--未定义，为赋于初始值都是这个
声明变量类型 ?null--空置 ?NAN--not a number--非数字非数值
var carname=new String;字符串
var x= ? ? ?new Number;数值类型
var y= ? ? ?new Boolean;布尔类型
var cars= ? new Array;
var person= new Object;对象类型

3.循环语句

switch(n)
{
 ? ?case 1:
 ? ? ? ?执行代码块 1
 ? ? ? ?break;
 ? ?case 2:
 ? ? ? ?执行代码块 2
 ? ? ? ?break;
 ? ?default:
 ? ? ? ?与 case 1 和 case 2 不同时执行的代码
}

4.数组 对象 关键字

var cars=new Array();
cars[0]="Saab";
?
var cars=new Array("Saab","Volvo","BMW");
?
var cars=["Saab","Volvo","BMW"];

数组最值

Math.max.apply(Math,数组名)
Math.min.apply(Math,数组名)

数组排序

function maoPao(arr) {
    if (Array.isArray(arr)) {
        for (var i = 0; i < arr.length - 1; i++) {
            for (var j = 0; j < arr.length - 1 - i; j++) {
                if (arr[j] < arr[j + 1]) {
                    [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]]
                }
            }
        }
    }
    return arr
}
var arr = maoPao([1, 5, 6, 2, 3])
alert(arr)

5.对象

变量名.属性或者函数名()
键值对对象
var star = {
 ? ?name : 'pink',
 ? ?age : 18,
 ? ?sex : '男',
 ? ?sayHi : function(){
 ? ? ? ?alert('大家好啊~');
 ?  }
};
?
定义对象在赋值
?
var andy = new Obect();
andy.name = 'pink';
andy.age = 18;
andy.sex = '男';
andy.sayHi = function(){
 ? ?alert('大家好啊~');
}
?
构造函数定义
?
function Person(name, age, sex) {
 ? ? this.name = name;
 ? ? this.age = age;
 ? ? this.sex = sex;
 ? ? this.sayHi = function() {
 ? ? ?alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
 ?  }
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);
?

遍历对象属性

for...in 语句用于对数组或者对象的属性进行循环操作。
for (变量 in 对象名字) {
 ? ?// 在此执行代码
}
语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。
for (var k in obj) {
 ? ?console.log(k); ? ? ?// 这里的 k 是属性名
 ? ?console.log(obj[k]); // 这里的 obj[k] 是属性值
}
?

6.关键字

this

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象

function函数

函数不允许重载，会覆盖上一次定义

//1.
function 函数名(参数不用定义类型){
 ? ?
}; 
返回值直接用return返回语句即可
//2.
var 函数名 = function(参数列表){
 ? ?
}
//3.隐形参数arguments
function fun(){ ? 
    //定义函数没有参数  
 ? ?alert(arguments[0]+arguments[1])
}/可用arguments调用即将传入的参数
fun(1,2)//调用传入参数 ? 结果为3

5.js事件

（输入设备与页面交互的相应）

事件的注册(告诉浏览器事件响应后需要执行哪些代码)又叫绑定，分为静态注册和动态注册
静态注册:通过html标签的事件属性直接赋予事件响应后的代码
动态注册:先通过js代码获取标签dom对象,然后再通过dom对象.事件名=function(){}

//onload 加载完成事件 浏览器解析完页面自动执行 页面加载完成之后常用于做页面的js代码初始化操作
静态:
function fun =(){}//script标签中
οnlοad="fun()"//加到body标签中
动态:window.οnlοad=function(){}
//onclick 点击事件 常用于按钮的点击响应
静态注册:
script标签中定义方法,给标签添加onclick属性，值为方法名
动态:
window.onload = function(){
var btnObj = document.getElementById("id名")
btnObj.onclick = function(){}
}
//onblur 时区焦点事件
常用于输入框失去焦点后验证其输入内容
//onchange 内容发生改变事件
常用于下拉框列表和输入框内容发生改变后操作
//onsubmit 表单提交事件 return false 制止提交
常用于表单提交前 验证所有表单项是否合法
点击提交后会跳转

6.DOM模型文档树

DOM全称是Document Object Model文档对象模型

文档中的标签，属性，文本转换成对象来管理。

DOM对象提供对body的直接访问，document.body.
//创建标签 
var crea = document.createElement("div");
crea.innerHTML = "李佳琪";//赋值
document.body.appendChild(crea);//添加body标签的子元素
//创建文本对象
var textObj = document.createTextNode("李佳琪");

//获取第一个id名为这个的标签
document.getElementById("id名")
获取表单中输入的值是dom对象打点掉value属性
innerHTML获取标签中的内容 innerText 只获取文本
//获取所有name名的标签 返回多个标签对象集合
document.getElementsByName("name名")
//获取标签名对象集合
document.getElementsByTagName("标签名")
?
3个查询方法 id属性查询优先 如果没有id属性按name查询然后是标签名
以上三个方法代码一定要在页面代码执行完之后再执行才能查询到
window.οnlοad=function(){} 

7.正则表达式

(regular expression)描述了一种字符串匹配的模式（pattern）

runoo+b，可以匹配 runoob、runooob、runoooooob 等，+ 号代表前面的字符必须至少出现一次（1次或多次）。
runoo*b，可以匹配 runob、runoob、runoooooob 等，* 号代表前面的字符可以不出现，也可以出现一次或者多次（0次、或1次、或多次）。
colou?r 可以匹配 color 或者 colour，? 问号代表前面的字符最多只可以出现一次（0次、或1次）。

//  test(字符串)方法测试某个字符串是不是匹配我的规则
var reg = /e/;表示字符串中是否包含"e"
var reg = new RegExp("e");相当于/e/
reg.test("abc");传入字符 返回false ?
//花括号
[a-z]表示小写a到小写z[0-9]
var reg = new RegExp("[abc]");表示是否含有a或b或c
//元字符
\w表示是否包含字母数字下划线，
//量词
a+表示至少一个a----a*表示包含0个或多个a----a?包含零个或1个a
a{X}包含连续的X个a的序列----a{x,y}包含至少X个 至多Y个a的连续序列
a$以a结尾的字符串 ? ^a以a开头的字符串
^a{x,y}$ 不是包含 必须完美匹配
^\w{5,12}$ 从头到尾字符5到12位