0005 Javascript知识点
001 概述
概述：一门客户端脚本语言
运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎
脚本语言：不需要编译，直接就可以被浏览器解析执行了
002 功能
可以来增强用户和html页面的交互过程
可以控制html元素
能够让页面有一些动态的效果
增强用户的体验
003 发展史
1. 1992年 NNombase公司了，开发出第一门客户端脚本语言，专门用于表单的校验 命名为C--，后来更名为ScriptEase
2. 1995年 Netscape（网景）公司，开发了一门客户端脚本语言：livescript，后来请了SUN公司的专家，修改之后命名为JavaScript
3. 1996年，微软抄袭JavaScript，并开发了JScript
4. 1997年，ECMA（欧洲计算机制造商协会），ECMAScript，即使所有客户端脚本语言的标准
JavaScript = ECMAScript + JavaScript特有的东西（BOM+DOM）
004 ECMAScript基本语法
ECMAScript：客户端脚本语言的标准
4.1 与html结合方式
01 内部js
定义<script>，标签体内容就是js代码
02 外部js
定义<script>，通过src属性引入外部的js文件
注意：
1. <script>可以定义在html页面的任何位置，但是定义的位置会影响到执行的顺序（从上到下依次执行）
2. <script>可以定义多个。
案例01:与html结合方式(按顺序执行，从上向下)
a.js alert("我是外部的js文件"); b.html <html> <head> <!-- 内部js --> <script> alert("我是内部的js代码"); </script> <!-- 外部引入的js文件 --> <script src="a.js" ></script> </head> <body></body> </html>
4.2 注释
单行注释： //
多行注释： /*注释内容*/
4.3 数据类型
1. 原始数据类型（基本数据类型）
1） number： 数字。整数/小数/NaN(not a number 一个不是睡着的数字类型)
2） string： 字符串。 字符串“abc”, "a",'abc'
3） boolean： true和false
4） null： 一个对象为空的占位符
5） undefined： 未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
2. 应用数据类型：对象
4.4 变量
变量：一小块存储数据的内存空间（被命名的内存空间，用来存储数据）
java原因是强类型语言，JavaScript是弱类型语言
强类型：在开辟变量存储空间时，定义了空间将来存储数据的数据类型，只能存储固定类型的数据
弱类型：在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据
语法：
var 变量名 = 初始化值;
var a = 10;
查询变量的数据类型 typeof(a);
4.5 运算符
1. 一元运算符： 只有一个运算数的运算符
++(自增)，--（自减），+（正号）,-(负号)
++（--）在前，先自增（自减），再运算
++（--）在后，先运算，再自增（自减）
注意：
1. 在js中，如果运算数不是运算符所要求的类型，那么js引擎会自动将运算数进行类型转换
其他类型转换为number
string转number，按照字面值转换，如果字面值不是数字，则转为NaN（不是数字的数字）
alert(typeof(+"abc")) //NaN
boolean转number：true转为1，false转为0；
2. 算数运算符：
+, -, *, /, % ...
3. 赋值运算符
= += -= ...
4. 比较运算符
>, <, >=, <=, ==, ===(全等于)
比较方式：
1. 类型相同，直接比较
* 字符串：按照字典顺序比较，按位逐一比较，知道得出大小为止（ASCII）
如： "abc" > "acd" -->false
2. 类型不同呢，先进行类型转换，然后再比较
“112” < 123---->true
3. "==="全等于：在比较之前，先判断类型，如果类型不一样，则直接返回false
“123” === 123 ----> false
5. 逻辑运算符
&&, ||, !
&&: 与（短路效果），短路,只要前面的表达式为假，那么后面的表达式就不执行了，直接返回假
||: 或（短路效果）。 短路，只要前面的表达式为真，那么后面的表达式就不执行了，直接返回真
！： 非
其他类型转boolean
1. number: 0或NaN为假，其它为真
2. string: 除了空字符串("")，其他都是true
3. null&undefined:都是false
4. 对象:所有对象都是true（例如： var date = new Date();）
例如：
//js中可以这样来简化书写
if(obj){}//防止空指针异常，如果是对象，正常执行；如果不是对象，直接返回false
6. 三元运算符
? :
语法：
表达式?值1:值2；
判断表达式的值，如果是true则取值1，如果是false则取值2；
例如：
var a = 3;
var b = 1;
var c = a > b ? 1:0；
7. JS特殊语法(都不建议使用，最好还是按照正常的逻辑来写)：
1. 语句以“;”结尾，如果一行只有一条语句则“;”可以省略（不用知道，不建议使用）
2. 变量的定义需使用关键字var，也可以不用
使用var，定义的变量是局部变量 如：var a = 4;
不使用var，定义的变量是全局变量 如： a = 5;(不建议使用)
4.6 流程控制语句
1. if...else...
2. switch
在java中，Switch语句可以接收的数据类型： byte,int , short, char, 枚举(1.5), string(1.7)
switch(变量){case 值1: 语句; break;}
在JavaScript中，Switch语句可以接受任意的原始数据类型
例如： var a ="";
switch(a){
case 1: alert("number"); break;
case "abc": alert("string"); break;
case true: alert("true"); break;
case null: alert("null"); break;
case undefined: alert("undefined"); break;
}
3. while
4. do...while
5. for
例如：
var sum = 0;
for(var i = 1; i<=100;i++){
sum += i;
}
005 基本对象
5.1 Function:函数（方法）对象
1. 创建
1. var fun = new Function(形式参数列表,方法体);【了解即可，现在可以忘掉了】
例如：
var fun1 = new Function("a","c","alert(a);");
2. function 方法名称(形式参数列表){方法体;}
例如：
function fun02(a,b){
alert(a+b);
}
3. var 方法名称 = function(形式参数列表){方法体;}
例如：
var fun03 = function(形式参数列表){
alert(a+b);
}
2. 方法
3. 属性
length:代表形参的格式
例如： alert(fnu02.length);
4. 特点
1. 方法定义时，方法的形参类型可以不用写,返回值类型也可以不用写
2. 方法是一个对象，如果定义名称相同方法的话，会直接覆盖前一个方法；
3. 在JS中，方法的调用只与方法的名称有关，和参数列表无关【重要】 如：fun02(),可以;fun02(1),也可以
4. 在方法声明中有一个隐藏的内置对象（数组），arguments，封装了所有的实际参数 如：fun02(1,2,3),也可以，最后一个不显示
例如：求任意个数的和
function(){
var sum = 0;
for(var i = 0; i < arguments.length; i++){
sum += arguments[i];
}
return sum;
}
var sum = add(1,2,3,4,5,7,9);
alert(sum);
5. 调用
方法名称(实际参数列表);
例如：
fun1(3,4);
5.2 Array：数组对象
1. 创建
1）var arr = new Array(元素长度); 如var arr = new Array(1,2,3,4);---->1,2,3,4
2) var arr = new Array(默认长度); 如var arr = new Array(5);------->,,,,
3) var arr = [元素列表]; 如var arr = [1,2,3,4];----------->1,2,3,4
2. 方法
join(参数):将数组中的元素按照指定的分隔符（参数）拼接为字符串
push(): 向数组的尾部添加一个或多个元素，并返回新的长度 如：arr.push(11);
3. 属性
length: 数组的长度
4. 特点
1) 在JS中，数组元素的类型是可变的 如var arr = [1,"abv",true];
2) 在JS中，数组元素的长度是可变的 如arr[10];-->undefined
5.3 Date:日期对象
1. 创建
var date new Date();
2. 方法
toLocalString():返回当前date对象对应时间的本地字符串格式
getTime(): 获取毫秒值，返回当前日期对象描述的时间到1970年1月1日零点的毫秒值之差
5.4 Math:数学对象
1. 创建
特点：Math对象不用创建，直接使用 Math.方法名();
2. 方法
random():返回0~1之间的随机数;[包含0，不包含1] 如Math.randim();
ceil(x): 对数字进行上舍入（向上取整）Math.ceil(3.14)-->4
floor(x): 对数字进行下舍入(向下取整)Math.ceil(3.14)-->3
round(x): 把数字四舍五入为最接近的整数
3. 属性
PI 圆周率 如：Math.PI;
练习：取1~100之间的随机整数
1. 取随机数，然后乘以100
2. 舍去小数部分
3. +1
var number = Math.floor(Math.random() * 100) +1;
5.5 RegExp；正则表达式对象
1. 正则表达式：定义字符串的组成规则
1. 单个字符：[]
如： [a] [ab]（表示a或b都行） [a-zA-Z0-9]
特殊符号代表含义的单个字符：
\d:单个数字字符 [0-9]
\w:单个单词字符[a-zA-Z0-9_] 表示：小写字母+大写字母+数字+下划线都行
2. 量词符号
?: 表示出现0次或1次
*: 表示出现0次或多次
+: 表示出现1次或多次
{m,n}:表示 m <= 数量 <= n
m如果缺省： {,n}: 最多n次
n如果缺省： {m,}: 最少m次
3. 开始结束符号
^: 开始
$: 结束
2. 正则对象
1. 创建
1）var reg = new RegExp("正则表达式");
2) var reg = /正则表达式/;【常用】
注意：
使用第一种的时候需要多加一个“\”，不然容易转义成其他意思
2. 方法
1） test(参数):验证指定的字符串是否符合正则定义的规范
例如：
var reg = new RegExp("^\\w{6,12}$");//或者var reg2 = /^\w{6,12}$/;//基本用第二种方式
使用第一种需要多加一个"\"，不然会直接转义成其他意思
var username = "sahnghai";
//验证
var flag = reg.test(username);
alert(flag);//-->true
5.6 Global: 全局对象
1. 特点： 这个Global中封装的方法不需要对象就可以直接调用 方法名();
2. 方法：
encodeURI():url编码
decodeURI():url解码
encodeURIComponent(): url编码，编码的字符更多
decodeURIComponent(): url解码，
parseInt():将字符串转为数字
逐一判断每一个字符是否为数字，直到不是数字为止，将前面数字部分转为number
isNaN: 判断一个值是不是NaN
NaN六亲不认，连自己都不认，NaN参与的==比较，全部都是false
eval():将JavaScript字符串，并把它转为脚本代码来执行
例如：
var jscode = "alert(123)";
eval(jscode);
006 DOM简单学习
为了满足案例要求
功能：控制html文档的内容
代码：获取页面标签（元素）对象Element
document.getElementById("id值")：通过id值来获取元素对象
操作Element对象
1. 修改属性值
1） 明确获取的对象是哪一个
2） 查看API文档，找到其中有哪些属性可以设置
2. 修改标签体内容
属性：innerHTML
案例：
<body>
<img id="light" src="img/off.gif">
<h1 id="title">阿里巴巴</h1>
<script>
//通过id获取元素对象
var light = document.getElementById("light");
alert("我要换图片了...");
//修改属性值
light.src = "img/on.gif";
//1. 获取h1标签对象
var title = document.getElementById("title");
//2. 修改内容
title.innerHTML = "京东";
</script>
</body>
007 事件简单学习
功能： 某些组件被执行了某些操作后，触发某些代码的执行
造句：XXX被XXX，我就XXX；
我方水晶被摧毁之后，我就责备队友
如何绑定事件
1.直接在html标签上指定事件的属性(操作)，属性值就是js代码
1) 事件：onclick() ---> 单击事件
2. 通过js获取元素对象，指定事件属性，并设置一个函数;
案例01：
<head>
</head>
<body>
<img id="light" arc="off.gif" onclick="fun();">
<img id="light02" arc="off.gif">
<script>
//第一种方法：对img代码侵入，耦合度比较高
function fun(){
alert("我被点了");
}
function fun02(){
alert("老是点我");
}
//第二种方法
//1. 获取light02的对象
var light02 = document.getElementById("light02");
//2. 绑定事件
light02.onclick = fun02()
</script>
</body>
008 案例：通过点击电灯图片来实现灯的亮灭
//1. 获取图片对象
var light = document.getElement("light");
var flag = false;//代表灯是灭的,off是灭灯的图片
//2. 绑定事件
light.onclick = function(){
if(flag){//判断如果灯是开的，则灭掉
light.src="off.gif";
flag = false;
}else{//判断如果灯是灭的，则打开
light.src="on.gif";
flag = true;
}
}
