JavaScript

前端开发人员必须了解的七大技能图谱

1. 基本语法

1.1 引入

• 内联试

  <a href="javascript:void(0)" οnclick="alert('ok')">点击</a>

• 内嵌式

  <script>
  alert('ok');
  </script>

• 外链式

  <script src="demo.js"></script>

  1.2 调试输出

1. alert():将内容通过对话框弹出到浏览器

• document.write():将内容直接输出到浏览器
• console.log():将内容输出到浏览器的控制台

1.3 语句

1. javascript代码的末尾不必须添加分号，但是推荐加上

• javascript严格区分大小写
• javascript会忽略多余的空格
• javascript是脚本语言，浏览器在读取代码时，逐行的执行脚本代码。而对于传统的编程来说，会在执行前对所有代码进行编译（解释型语言）

1.4 注释

1. 单行注释：(双斜杠)//

• 多行注释：/**/

1.5 变量：

• 存储信息的“容器”（使用以前的代数来理解）
• 变量的命名规则：变量名由字母，数字，下划线和$组成，且不能以数字开头

  // 申明变量
  var username = 'zhangsan';

// 同时申明多个变量
var username = 'zhangsan', age = 30, sex = '男';

// 申明变量但是不赋值
var username;

// 不使用var申明变量
username = 'zhangsan';

一个好的编程习惯是，在代码开始处，统一对需要的变量进行声明。
尽可能不要定义全局变量，防止变量污染

1.6 数据类型

字符串（String）、数字（Number）、布尔（Boolean）、数组（Array）、对象（Object）、空（Null）、未定义（Undefined）
只有一种：对象

使用typeof检测数据类型

1.6.1 字符串（String）

• 使用单引号和双引号定义字符串
• 单双引号需要注意的内容
  • 单双引号没有区别
  • 单双引号可以相互嵌套
  • 不可以嵌套自身，除非使用转义字符转义

1.6.2 数字（Number）

• 整型
• 浮点型（计算的时候有计算损耗，不建议进行精确计算）
• NaN(Not a number)
  • NaN与任何值运算都为NaN
  • NaN与任何值都不想等，包括自身
  • isNaN():判断一个值是否时NaN

1.6.3 布尔（Boolean）

• true
• false

1.6.4 数组

    // 1. 创建数组的方式var cars = new Array();cars[0] = 'BMW';cars[1] = 'BYD';cars[2] = 'BenZ';// 2.直接定义数组var cars = new Array('BMW', 'BYD', 'Benz');// 3.简单定义var cars = ['BMW', 'BYD', 'Benz'];

1.6.5 对象

    var person = {username:'zhangsan', age:20, sex:'男'};// 调用对象的两种方式person.usernameperson['age']

1.6.6 Undefined

• 未定义的变量
• 定义但是未赋值的变量

1.6.7 Null

• 将值设置为null清空变量

1.7 数据类型的相互转化

1.7.1 转化为字符串

• String()

1.7.2 转化为布尔

• Boolean()
  • '' 0 0.0 NaN false null undefined->false
  • 其余都为真（'false','0','null'）

1.7.3 转化为数值

• Number() 不包含进制之间的转化
  1. 普通字符串->NaN
  2. 纯数字字符串,数值->原型输出
  3. 空字符串'',空格字符串' ',null->0
  4. true->1 false->0
  5. undefined->NaN
• parseInt()
  • 从第一个字符开始查找，直到找到非法字符(非数字)截止，返回找到的数字
• parseFloat()
  • 从第一个字符开始查找，直到找到非法字符(除数字和第一个小数点之外的字符)截止，返回找到的数字

1.8 运算符

1.8.1 算术运算符

• /
• %：取余
• ++
• --

  var a = 3;
  var b = 5;

a++ + b++ // 9
a++ + ++a // 9
++a + a++ // 8

1.8.2 赋值运算符

• =
• +=
• -=
• *=
• /=
• %=

  var a = 3;
  a += 2; // 相当于 a = a + 2

alert(a) // 5

1.8.3 连接运算符 +

• ＋号两边是纯数字：＋代表加法运算
• 除此之外，＋都是连接运算

  3 + 5 // 8
  3 + '5' // 35
  '3a' + 5 // 3a5

1.8.4 比较运算符

• =：赋值操作
• ==：判断双等于号两边是否相等
• ===
• !=
• !==
• >
• <
• <=

1.8.5 逻辑运算符

• &&（两真为真，其余都为假）
• ||（两假为假，其余都为真）
• ! （取反）

1.8.6 条件运算符（三元运算符）

3==3 ? value1 : value2;

1.9 流程控制：条件语句

1.9.1 if条件语句

条件语句用于基于不同的条件来执行不同的动作

// 定义变量
var age = 24;// 只有if判断
if (age < 18) {console.log('小弟弟，你好小');
}// if...else...判断
if (age < 18) {// 当年龄小于18岁的时候，执行此段代码console.log('你还小，不要祸害小姑娘');
} else {// 当年龄大于等于18岁的时候，执行此段代码console.log('不小了，找个小姑娘吧');
}// if...else if...else...
if (age < 18) {console.log('小弟弟，你还小');
} else if (age >= 18 && age < 24) {console.log('你还是一个剩斗士');
} else if (age >= 24 && age < 30) {console.log('你是一个必剩客');
} else {console.log('你乃齐天大剩也');
}

1.9.2 switch语句

基于不同的条件来执行不同的动作

var month = 1;
switch (month) {case 1:case 3:case 5:case 7:case 8:case 10:case 12:console.log('31天');break;case 4:case 6:case 9:case 11:console.log('30天');break;case 2:console.log('28天');break;default:console.log('输入的月份有问题');
}

2.0 流程控制－循环语句

2.0.1 for循环

for (var i = 0; i < 10; i++) {console.log(i);
}

2.0.2 while循环

var i = 0;
while (i < 10) {console.log(i);i++;
}

2.0.3 do...while循环

var i = 0;
do {console.log(i);i++;
} while (i < 10);

2.0.4 for...in...循环

var data = {username:'张三',age:20,sex:'男'};for (var i in data) {console.log(i+'===>'+data[i]);
}

2.0.5 break和continue语句

// break:终止循环
for (var i = 0; i < 10; i++) {if (i == 4) {break;}console.log(i);
}// 最终的结果是：0 1 2 3

// 跳过当前循环继续执行下一次的循环
for (var i = 0; i < 10; i++) {if (i == 4) {continue;}console.log(i);
}
// 最终的结果是：0 1 2 3 5 6 7 8 9

2.1 正则表达式

2.1.1 元字符

• \d:数字
• \s:空白字符
• \w:约等于A-Za-z0-9_
• ^a-z{6,12}$:必须时6-12位的字母

2.1.2 量词

• * 相当于{0,}
• + 相当于{1,}
• ? 相当于{0,1}
• {6,18}

2.1.3 模式修正符

• i:不区分大小写
• g:执行全局匹配
• m:执行多行匹配

2.2 JSON

2.2.1 JSON功能

存储和传输数据的格式

2.2.2 实例

{"username":"zhangsan", "age":20, "sex":"男"}

2.2.3 JSON方法

• 将JSON字符串转化为JSON对象：JSON.parse()
• 将Javascript对象转换为JSON字符串:JSON.stringify()

2.3 函数

2.3.1 函数定义

// 1.常规定义函数
// demo函数如果被new关键字使用，则为构造函数，如果普通调用，则为普通函数
function demo(){console.log('第一种定义函数方式');
}// 2.使用匿名函数
(function(){console.log('第二种定义函数方式');
})()// 3.使用Function定义函数
new Function('x','y','return x+y;');

2.3.2 函数的特点

• 变量的作用域
  • 在函数外申明的变量为全局变量，函数内可以直接调用
  • 在函数内使用var申明的变量为局部变量，只能在函数内调用，相当于此函数内的全局变量
  • 在函数内直接定义变量为全局变量
• 参数个数
  • 形参 > 实参：多余的形参的值为undefined
  • 实参 > 形参：多余的实参被忽略
• arguments函数内置对象
  • 函数中内置的的所有参数组成的对象

2.4 内置对象

2.4.1 Array对象

• arr.length
• arr.concat()
• arr.join()
• arr.push()
• arr.pop()
• arr.shift()
• arr.unshift()
• arr.sort()
• arr.reverse()
• arr.splice():从数组中添加或删除元素。
• arr.every():检测数值元素的每个元素是否都符合条件。
• arr.map():通过指定函数处理数组的每个元素，并返回处理后的数组。
• arr.filter():检测数值元素，并返回符合条件所有元素的数组。

• arr.some():检测数组元素中是否有元素符合指定条件。

  2.4.2 Boolean对象

  2.4.3 Date对象

• var d = new Date()
• d.getFullYear()
• d.getMonth()
• d.getDate()
• d.getHours()
• d.getMinutes()
• d.getSeconds()
• d.getTime()

• d.toUTCString()

  2.4.4 Math对象

  属性

• PI:圆周率

  方法

• abs()
• ceil()
• floor()
• round()
• max()
• min()

• random()

  2.4.5 Number对象

• MAX_VALUE:最大的数
• MIN_VALUE:最小的数

• toFixed()

  2.4.6 String对象

• length
• split()
• search()
• match()

• replace()

• slice()
• indexOf()
• lastIndexOf()

• charAt()

• charCodeAt():指定位置的字母对应的Unicode编码

• String.formCharCode():将Unicode编码转为字符

2.4.7 RegExp对象

• reg.test(str):使用正则表达式检验str是否符合要求

2.BOM（Window对象）

2.1 全局属性和函数

• 所有的全局变量是window对象的属性
• 所有的全局函数是window对象的方法
• 系统方法
  • alert()
  • confirm()
  • prompt()
  • open()
  • close()
  • moveBy()
  • moveTo()
  • resizeBy()
  • resizeTo()
  • scrollBy()
  • scrollTo()
  • setInterval()
  • setTimeout()
  • clearInterval()

  • clearTimeout()

    2.2 Navigator对象:获取浏览器的相关信息

• appCodeName 返回浏览器的代码名。
• appName 返回浏览器的名称。
• appVersion 返回浏览器的平台和版本信息。
• cookieEnabled 返回指明浏览器中是否启用 cookie 的布尔值。
• platform 返回运行浏览器的操作系统平台。
• userAgent 返回由客户机发送服务器的 user-agent 头部的值。

• userLanguage 返回 OS 的自然语言设置。

  2.3 Screen对象：获取浏览器的屏幕信息

• width
• height
• availHeight

• availWidth

  2.4 Frames对象

  父修改iframe的背景色：iframeObj.contentWindow.document.style.background
  iframe修改父页面的背景色：parent.document.style.background

  2.5 History对象

• length:返回浏览器历史列表中URL数目
• back():加载 history 列表中的前一个 URL。
• forward():加载 history 列表中的下一个 URL。

• go():加载 history 列表中的某个具体的页面

  2.6 Location对象

• hash:锚点 历史回退 pushState(PAJAX)

• href

• reload()

3.HTML DOM对象

3.1 DOM Document对象

3.1.1 Form表单对象

- document.forms[0]
- document.forms['formName']
- document.formName
- 表单元素对象:formObj.inputName

3.1.2 Select对象

- 属性：- disabled- length- selectedIndex
- 方法：add()remove()

3.1.2 table表格对象

- table.rows：获取表格行
- talbe.insertRow(index)：添加行
- table.deleteRow(index)：删除行
- row.cells:获取单元格对象
- row.insertCell(index)：添加单元格

3.1.3 Cookie对象

document.cookie = 'username=zhangsan;expires=date;path=/;domain=qq.com;secure'

3.2 DOM 功能（通过功能确定DOM是做什么的）

3.2.1 获取并改变HTML标签

- document.getElementById()
- document.getElementsByTagName()
- document.getElementsByName()
- document.querySelector()
- document.querySelectorAll()
- ID名直接获取（用于测试，不推荐用于正式环境）

3.2.2 获取并改变HTML属性

- obj.src
- obj.getAttribute()
- obj.setAttribute()
- obj.removeAttribute()

3.2.3 获取并改变CSS样式

- obj.style.width
- 获取最终的样式（兼容）function getStyle(obj, attr){return obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, null)[attr];}

3.2.4 事件处理

3.2.4.1 鼠标事件

• onclick
• ondblclick
• oncontextmenu
• onmouseover
• onmouseout
• onmousedown
• onmouseup
• onmousemove

3.2.4.2 键盘事件

• onkeydown
• onkeyup
• onkeypress

3.2.4.3 表单事件

• onfocus
• onblur
• onsubmit
• onchange
• onreset
• onselect

3.2.4.4 框架对象事件

• onload
• onunload
• onresize
• onscroll
• onerror
• onabort

3.2.4.5 鼠标键盘属性值

• altKey:
• shiftKey:
• ctrlKey:
• keyCode
• clientX:
• clientY:

3.2.4.6 事件冒泡

• stopPropagation():火狐和谷歌
• e.cancelBubble = true; IE火狐谷歌取消冒泡
• jquery中可以用return false阻止冒泡和默认事件

3.3 DOM 节点操作

3.2.1 标签元素的属性

• attribute:
• childNodes:

• className:

• firstChild/firstElementChild:
• lastChild/lastElementChild:
• nextSibling/nextElementSibling:
• previousSibling/previousElementSibling:

• parentNode:

• nodeName:
• nodeType:1标签 2属性 3文本

• nodeValue:

• innerHTML:
• clientWidth:
• clientHeight:
• offsetHeight:
• offsetWidth
• offsetLeft:
• offsetTop:
• scrollWidth:
• scrollHeight:
• scrollTop:

• scrollLeft:

3.2.2 标签元素的方法

• appendChild()
• insertBefore()
• replaceChild()
• removeChild()
• cloneNode()