二、Js基础及深入
1、JS组成
ECMAScript: 翻译 解释器 核心 人们写的东西翻译成0 1 给计算机 计算机的0 1 解释成人么可以看懂的
DOM：Document Object Model（文档对象模型） 赋予JS操作HTML能力 document对象
BOM：Browser Object Model 赋予JS操作浏览器的能力 window对象
各组成部分的兼容性，兼容性问题由来
ECMA： 几乎没有兼容性问题
DOM： 有一些操作不兼容
BOM： 没有兼容问题（完全不兼容）
2、变量
------变量类型
--类型 typeof运算符
用法typeof a、返回值；
常见类型：number、string、boolean、undefined、object、function
undefine: 1. 真的没定义； 2. 虽定义，未赋值；
经验：一个变量应该（最好）只存放一种类型的数据；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>typeof</title>
<script type="text/javascript">
var a=true;
alert(typeof a);
var b=function (){
alert("abc");
};
alert(typeof b);
</script>
</head>
<body>
</body>
</html>
-------类型转换
------显示类型转换（强制类型转换） parseInt（）（字符串转整型） parseFloat（字符串转浮点型）
-字符串转整数 parseInt（） //从左到右扫描，遇到非数字跳出 NaN not a number 非数字 NaN和NaN不相等 检测一个结果是否是非数字 isNaN（）
-字符串转小数 parseFloat（）
------隐式类型转换
- == 先转换类型，然后比较
- ===不转换类型，直接比
- - //数字相减
计算两个文本框的和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parseInt字符串转整数</title>
<script type="text/javascript">
window.onload=function (){
var oTxt1=document.getElementById("txt1");
var oTxt2=document.getElementById("txt2");
var oBtn=document.getElementById("btn1");
oBtn.onclick=function (){
if(isNaN(oTxt1.value)){
alert("输入的第一个数有误");
}else if (isNaN(oTxt2.value)) {
alert("输入的第二个数有误");
}else{
alert(parseInt(oTxt1.value)+parseInt(oTxt2.value));
}
};
};
</script>
</head>
<body>
<input id="txt1" type="text" /> +
<input id="txt2" type="text" />
<input id="btn1" type="button" value="求和" />
</body>
</html>
-------变量作用域和闭包
------变量作用域（作用范围）
局部变量：只能在定义它的函数里面使用
全局变量：在任何地方都能用
------闭包
子函数可以使用父函数中的局部变量；
之前一直在使用闭包
网上对于闭包的定义
3、命名规范
----命名规范及必要性
可读性——能看懂
规范性——符合规则
-----匈牙利命名法
类型前缀
首字母大写
4、运算符
算数：+ - * / % （取模应用：隔行变色）
赋值：= += -= *= /= %=
关系： < > <= >= == === != !==
逻辑：&&与 并且 ||或 ！否
隔行变色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>隔行变色</title>
<script type="text/javascript">
window.onload=function (){
var aLi=document.getElementsByTagName("li");
for(var i=0; i<aLi.length; i++){
if(i%2==0){
aLi[i].style.background="#ccc";
}else{
aLi[i].style.background=" ";
}
}
};
</script>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
5、程序流程控制
判断： if switch ？：三元运算符
循环：while for
中断： break（整个循环中断） continue（中断本次循环）
什么是真 、什么是假： （真： true、非零数字、非空字符串‘false’、非空对象） （假： false、数字0、空字符串、空对象 null 、 undefined ，数字NaN）
if语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>判断n是两位数</title>
<script type="text/javascript">
window.onload=function (){
var n=4;
//有错误，如果n是浮点数的话，判断有误
if(n>9 && n<100){
alert("n是两位数");
}else{
alert("n不是两位数");
}
};
</script>
</head>
<body>
</body>
</html>
switch语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>根据男女信息问候</title>
</head>
<script type="text/javascript">
var name="abc";
var sex="女";
switch (sex){
case "男":
alert(name+"先生，你好");
break;
case "女":
alert(name+"女士，你好");
break;
default:
alert(name+"你好");
}
</script>
<body>
</body>
</html>
6、Json（ 基于JavaScript语言的轻量级的数据交换格式(JavaScript Object Notation)）
什么是Json: 用来描述JS里面的数据
Json和数组： 跟数组有点像，用来存数据的 json['a'] arr[0] json没有length
var a=12; var b=5; var c="abc"
var json={a: 12, b: 5 , c: “abc”} json.a 放在json里的东西可以当做变量使用；
Json和for in
循环 碰到数组： for（var i=0； i<*.length; i++） 也可以for（var i in arr） （最好还是用前面的一种）
碰到json： for（var i in json）
7、 函数返回值（函数把一些东西传到外面来）
什么是函数返回值
函数的执行结果
可以没有返回值
一个函数应该只返回一种类型的值
8 函数传参
可变参（不定参）：arguments
参数的个数可变，参数数组 var result=0; for(var i=0; i<arguments.length; i++){ result+=arguments[i]; } return result;
例子1：求和
求所有参数的和
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arguments求和</title>
</head>
<script type="text/javascript">
window.onload=function (){
function sum(){
var result=0;
for(var i=0; i<arguments.length; i++){
result+=arguments[i];
}
return result;
}
//arguments代表不定参
alert(sum(12,4,12,4));
};
</script>
<body>
</body>
</html>
判断arguments.length
给参数取名，增强可读性
例子2：CSS函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>arguments css函数</title>
<script type="text/javascript">
//用arguments来表示；
// function css(){
// if(arguments.length==2){
// return arguments[0].style[arguments[1]];
// }else{
// arguments[0].style[arguments[1]]=arguments[2];
// }
// }
//用obj,name,value参数来代替
function css(obj, name, value){
if(arguments.length==2){
return obj.style[name];
}else{
obj.style[name]=value;
}
}
window.onload=function (){
var oDiv=document.getElementById("div1");
//alert(css(oDiv, "width"));
css(oDiv, "width", "300px");
};
</script>
</head>
<body>
<!-- 运行函数css，当有两个参数时，代表获取，当有3个参数时，代表设置； -->
<div id="div1" style=" 200px; height: 200px; background: red; "></div>
</body>
</html>
取非行间样式(不能用来设置) style只能获取行间样式 currentStyle可以获取非行间样式
obj.currentStyle[attr]
getComputedStyle(obj,false)[attr]
复合样式：background border 等； 单一样式： width height color等 不能取复合样式 只能取单一样式
JS第二定律：但凡是好东西，大多不兼容
// IE
odiv.currentStyle.width
//chrome FF IE8以下不兼容
getComputedStyle(oDiv, null).width (第二个参数是个垃圾 随便什么都行 null false 都可以)
在所有浏览器下兼容代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取非行间样式</title>
<style type="text/css">
#div1{ 100px; height: 100px; background: red;}
</style>
<script type="text/javascript">
window.onload=function (){
var oDiv=document.getElementById("div1");
//style只能用于获取行间样式
// alert(oDiv.style.width);
//IE 下currentStyle用于获取非行间样式
// alert(oDiv.currentStyle.width);
//chrome FF 下用getComputedStyle(obj,null)[name]来获取非行间样式
//alert(getComputedStyle(oDiv,null).width);
//考虑兼容性问题
if(oDiv.currentStyle){
//IE
alert(oDiv.currentStyle.width);
}else{
//chrome FF
alert(getComputedStyle(oDiv, null).width);
}
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
封装成函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取非行间样式封装成函数</title>
<style type="text/css">
#div1{ 100px; height: 100px; background: red;}
</style>
<script type="text/javascript">
function getStyle(obj, name){
if(obj.currentStyle){
alert(obj.currentStyle[name]);
}else{
alert(getComputedStyle(obj, null)[name]);
}
}
window.onload=function (){
var oDiv=document.getElementById("div1");
//没法取复合样式，如background，border是由很多成员组成的
getStyle(oDiv, "width");
};
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
9、数组基础
数组的使用
定义
var arr=[12,5,8,9]
var arr=new Array(12,5,8,9)
没有任何差别，[]性能略高，因为代码短
数组的属性
length
既可以获取，又可以设置
例子：快速清空数组
数组使用原则：数组中应该只存一种类型的变量
10、数组方法
添加/删除（头部、尾部）
var arr=[1,2,3];
arr.push(4) 尾部添加
arr.pop() 尾部删除
arr.unshift() 从头部添加
arr.shift() 从头部删除、
插入/删除/替换 （中间）
splice(起点，长度) 删除元素 从什么位置开始删 删多少个 splice(2, 3) 从第二个后面删，不包括第二个
splice(起点，0，元素) 插入元素 从什么位置开始删0个 再插入多个元素 arr.splice(2,0,'a','b','c');
splice(起点，长度，元素) 替换元素 从什么位置开始删 删多少个 再插入多个元素 arr.splice(2,2,'a','b','c')
排序/连接
排序
sort（【比较函数】，排序一个数组）
排序一个字符串数组
排序一个数字数组
例子：//从小到大排序 可以简化 arr.sort(function (n1, n2 ){return n1-n2;})
var arr=[12,8,99,19,112]
arr.sort(function(n1,n2)){
if(n1<n2) //n1<n2,n1应该出现在n2之前，返回一个小于0的数；
{
return -1;
}
else if(n1>n2)
{
return 1;
}
else
{
return 0;
}
}
转换类
concat（数组2）
连接两个数组
var a=[1,2,3];
var b=[4,5,6];
a.concat(b);
join（分隔符）
var a=[1,2,3,4];
a.join("-")
用分隔符，组合数组元素，生成字符串
字符串split