ChuannBlog

JavaScript

JS简介

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

因为网景开发了JavaScript，一年后微软又模仿JavaScript开发了JScript，为了让JavaScript成为全球标准，几个公司联合ECMA（European Computer Manufacturers Association）组织定制了JavaScript语言的标准，被称为ECMAScript标准。
所以简单说来就是，ECMAScript是一种语言标准，而JavaScript是网景公司对ECMAScript标准的一种实现。
那为什么不直接把JavaScript定为标准呢？因为JavaScript是网景的注册商标。
不过大多数时候，我们还是用JavaScript这个词。如果你遇到ECMAScript这个词，简单把它替换为JavaScript就行了。

快速入门

引入方式

变量、常量和标识符

变量

  1. 声明变量时不用声明变量类型. 全都使用var关键字;
  2. 一行可以声明多个变量.并且可以是不同类型;
  3. 声明变量时 可以不用var. 如果不用var 那么它是全局变量;
  4. 变量命名,首字符只能是字母,下划线,$美元符 三选一，余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写，x与X是两个变量;

常量和标识符

数据类型

JavaScript的数据类型分为两类：

数字类型(number)

console.log(10);      //整数10
console.log(1.1);     //浮点数1.1
console.log(.1);      //浮点数0.1
console.log(10.0);    //整数10
console.log(10.);     //整数10
console.log(3.123e7); //科学计数法，31230000

字符串类型(string)

console.log('hello');
console.log("hello");
console.log('你好');
console.log('\nhello');
console.log('he\'llo');
console.log('he\"llo');
console.log('he\\llo');

布尔类型(boolean)

Null & Undefined类型

运算符

算术运算符

自加自减
单元运算符
- 除了可以表示减号还可以表示负号  例如：x=-y
+ 除了可以表示加法运算还可以用于字符串的连接  例如："abc"+"def"="abcdef"
NaN
var d="chuck";
d=+d;
console.log(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据
console.log(typeof(d));//Number

//NaN特点:

var n=NaN;

console.log(n>3);
console.log(n<3);
console.log(n==3);
console.log(n==NaN);

console.log(n!=NaN);//NaN参与的所有的运算都是false,除了!=

比较运算符

  1. 全等号(===)和非全等号(!==)
    • 所做的运算与等号(==)和非等号(!=)相同
    • 但是在运算前，不执行类型转换
     console.log(2==2);
 console.log(2=="2");
 console.log(2==="2");
 console.log(2!=="2");
  2. 大小比较
    • 比较运算符两侧如果一个是数字类型，一个是其他类型，会将其类型转换成数字类型；
    • 比较运算符两侧如果都是字符串类型，比较的是最高位的asc码，如果最高位相等，继续取第二位比较。
     var result = "Blue" < "alpha";
 console.log(result);
 //字母B的ASCII码是66，字母a的ASCII码是97
	
 var result = "25" < "3";
 console.log(result); 
 //"2" 的ASCII码是 50，"3" 的ASCII码是 51
	
 var bResult = "25" < 3;
 console.log(result);
 //字符串 "25" 将被转换成数字 25，然后与数字 3 进行比较
  3. 比较运算符的类型转换规则
    1. 如果一个运算数是 Boolean 值，在检查相等性之前，把它转换成数字值。false 转换成 0，true 为 1；
    2. 如果一个运算数是字符串，另一个是数字，在检查相等性之前，要尝试把字符串转换成数字；
    3. 如果一个运算数是对象，另一个是字符串，在检查相等性之前，要尝试把对象转换成字符串；
    4. 如果一个运算数是对象，另一个是数字，在检查相等性之前，要尝试把对象转换成数字。
  4. 比较运算符的其他规则
    1. 值 null 和 undefined 相等；
    2. 在检查相等性时，不能把 null 和 undefined 转换成其他值；
    3. 如果某个运算数是 NaN，等号将返回 false，非等号将返回 true；
    4. 如果两个运算数都是对象，那么比较的是它们的引用值。如果两个运算数指向同一对象，那么等号返回 true，否则两个运算数不等。

逻辑运算符

if (2>1 && [1,2]){
    console.log("条件与")
}

//以下并不直接输出布尔值
console.log(1 && 3);//3
console.log(0 && 3);//0
console.log(0 || 3);//3
console.log(2 || 3);//2

流程控制

顺序结构

分支结构

if-else
if (表达式){
   语句１;
   ......
   } else{
   语句２;
   .....
   }
if-elif－else
if (表达式1) {
    语句1;
}else if (表达式2){
    语句2;
}else if (表达式3){
    语句3;
} else{
    语句4;
}
switch-case
switch (表达式) {
    case 值1:语句1;break;
    case 值2:语句2;break;
    case 值3:语句3;break;
    default:语句4;
}

循环结构

for循环
while循环
while (条件){
    语句1；
    ...
}

异常处理

对象

在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是基于对象实现的。

var aa=Number.MAX_VALUE; 
//利用数字对象获取可表示最大数
var bb=new String("hello JavaScript"); 
//创建字符串对象
var cc=new Date();
//创建日期对象
var dd=new Array("星期一","星期二","星期三","星期四"); 
//数组对象

String对象

字符串对象的创建

字符串对象的属性和方法

－－－－字符串查询方法

－－－－子字符串处理方法

Array对象

数组对象的创建

数组对象的属性和方法

Date对象

创建Date对象

Date对象的方法—获取日期和时间

Date对象的方法—设置日期和时间

Date对象的方法—日期和时间的转换

Math对象

属性方法：

Function对象

函数的定义

function 函数名 (参数){
    函数体;
    return 返回值;
}

Function对象的属性与方法

Function 的调用

函数的内置对象arguments

匿名函数

var func = function(arg){
    return "tony";
}

BOM

window对象

Window 对象方法

DOM(Document Object Model)

相关定义

DOM树

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Yuan</title>
</head>
<body>
    <h1>hello</h1>
    <a href="https://www.baidu.com/">点我吧</a>
</body>
</html>

节点

DOM对节点的定义：

  1. 整个文档是一个文档节点
  2. 每个 HTML 标签是一个元素节点
  3. 包含在 HTML 元素中的文本是文本节点
  4. 每一个 HTML 属性是一个属性节点

节点关系

节点树中的节点彼此拥有层级关系。
父(parent),子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。

在节点树中，顶端节点被称为根（root）
每个节点都有父节点、除了根（它没有父节点）
一个节点可拥有任意数量的子节点
同胞是拥有相同父节点的节点

对节点操作

查找节点
增加节点
删除节点
替换节点

操作节点

  1. 获取节点的文本
    • node.innerText
    • node.innerHTML
  2. 节点通用属性操作
    • node.setAttribute(“attr_name”,”value”)
    • node.getAttribute(“attr_name”)
    • node.removeAttribute(“attr_name”)
  3. 需要使用value属性获取文本内容的节点，其他节点value属性为undefined
    • input
    • select
    • textarea
     <div id="test">点我吧</div>
 <input type="text" class="test" value="123">
 <script>
     var ele = document.getElementById('test');
     console.log(ele.innerText, ele.value, typeof ele.innerText);
	
     var ele2 = document.getElementsByClassName('test')[0];
     console.log(ele2.innerText, ele2.value, typeof ele2.innerText);
 </script>
  4. class属性
    • node.className
    • node.classList
    • node.classList.add
    • node.classList.remove
     <div class="c1 c2" id="test">123456789</div>
 <script>
     var ele = document.getElementById('test');
     console.log(ele.className, typeof ele.className);
     console.log(ele.classList, typeof ele.classList);
     ele.classList.add('c3');
     ele.classList.remove('c2');
     console.log(ele.classList, typeof ele.classList);
 </script>

  5. CSS样式-style属性

     <div id="test">JavaScript</div>
 <script>
     var element = document.getElementById('test');
     element.style.display = "inline-block";
     element.style.width = "200px";
     element.style.height = "100px";
     element.style.marginTop = "100px";
     element.style.marginLeft = "500px";
     element.style.backgroundColor = "wheat";
     element.style.color = "blue";
     element.style.fontFamily = "Georgia";
     element.style.fontSize = "30px";
     element.style.textAlign = "center";
     element.style.lineHeight = "100px";
 </script>
  6. 可以innerHTML给节点添加HTML代码（非W3C标准，但是主流浏览器支持）
    • node.innerHTML = “<p>增加的内容</p>”

事件(事件句柄Event Handlers)

常用事件类型概览

Event对象

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就是KeyCode.

绑定事件的方式

部分事件介绍

onload
onsubmit
事件传播
onchange
onkeydown

Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就是KeyCode.

<input type="text" id="ccc">
<script>
    var key = document.getElementById('ccc');
    key.onkeydown = function (event) {
        console.log(123)
    };
    key.onkeyup = function () {
        console.log(456)
    };
</script>
onmouseout——onmouseleave

事件委派

事件实例

表格全选、反选、取消
<button class="select_all">全选</button>
<button class="select_reverse">反选</button>
<button class="cancel">取消</button>
<table border="1">
    <tr>
        <td><input type="checkbox" class="ck"></td>
        <td>111</td>
        <td>111</td>
        <td>111</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="ck"></td>
        <td>222</td>
        <td>222</td>
        <td>222</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="ck"></td>
        <td>333</td>
        <td>333</td>
        <td>333</td>
    </tr>
    <tr>
        <td><input type="checkbox" class="ck"></td>
        <td>444</td>
        <td>444</td>
        <td>444</td>
    </tr>
</table>
<script>
    var ele_select_all = document.getElementsByClassName('select_all')[0];
    var ele_select_reverse = document.getElementsByClassName('select_reverse')[0];
    var ele_cancel = document.getElementsByClassName('cancel')[0];
    var elements = document.getElementsByClassName('ck');
    ele_select_all.onclick = function () {
        for (var i=0;i<elements.length;i++){
            elements[i].checked = true;
        }
    };
    ele_cancel.onclick = function () {
        for (var i=0;i<elements.length;i++){
            elements[i].checked = false;
        }
    };
    ele_select_reverse.onclick = function () {
        for (var i=0;i<elements.length;i++){
            elements[i].checked?elements[i].checked = false:elements[i].checked = true;
        }
    }
</script>
轮播图，tab切换

代码链接