js课程笔记（一）前五节课基础内容总结

js课程笔记（一）前五节课基础内容总结
一、数据类型
1.分类：
**基本数据：stirng、number、boolean、undefind
**复杂数据：object（null，function）
2.undefind的出现情况：
**var一个变量，但是未对其赋值。
**函数未定义返回值，后者返回return；并没有带值。
**dom元素的自定义属性（非本身属性）获取。
**document.getElementsByTagName("一个未定义的标签")时候。
3.null
**原型链最末端
4.特殊类型NaN（不是一个数字）
**注意NaN不等于自己，如果判断一个是不是NaN可以用isNaN（该值）==true/false来判断
5.字符串转数字的方法（还有一个字符串charAt（0）获取指定下表的字符）
**Number（“123”）--》123              转换看起来像一个数字的字符串Number（“123abc”）--》NaN
**parseInt（“123abc”）--》123        碰到不识别的就停止
**parseFloat（“123adfd”）--》123   碰到不识别的就停止
**字符串转数字时候（所有运算符除了+都）会有隐式转换  （“12”+12 --》1212，12+“12”--》1212）
6.true/false 表达式
true的表达式：
 number非0的
 string非空的字符串
object 非空对象
boolean true

[b]Function   永真
[/b]

false的表达式：
 
0
  
“” 空字符串
   {} 空对象
[b]  false[/b]  
  NaN  永假
  undefined 永假
----------------------------------------------------------------------------------------------
二、作用域
**函数或变量是按声明 --》定义--》执行这样的顺序进行的；
1.局部变量：只能在函数内部访问的
2.全局变量：在js任意地方都可以访问的
3.闭包：子函数可以访问父函数内的变量（会有内存泄漏问题）
**闭包的问题（i值）：
var oLi=document.getElementsByTagName('li');
for(var i=0;i<oLi.length;i++){
oLi[i].onclick=function(){
alert(i);//返回oLi.length个oLi.length+1的值，不是我们想要的结果，可以用封闭函数处理如下注释代码：
}
/*
(function(index){
oLi[i].onclick=function(){
alert(index);//0.........oLi.length-1,或者也可以用索引的方式解决，如下注释代码
}
})(i);
*/
/*
oLi[i].index=i;

oLi[i].onclick=function(){
alert(this.index);//0.........oLi.length-1
};<
1325d
/span>

*/

}
三、封闭空间（其实就是函数的自执行，实质也是函数作用域的应用）解决的问题
（function（）{
//函数体
}）（参数）
1.变量名冲突：当很多人协同工作时候该方法很受用，每个人都有自己的封闭空间就不怕变量之间互相影响了。
2.i值的问题：
**如上面二、3的闭包中所提到的for循环中的i值，如果想要在click事件触发函数中得到，就可以用封闭空间实现：

(function(index){
oLi[i].onclick=function(){
alert(index);//0.........oLi.length-1,或者也可以用索引的方式解决，如下注释代码
}
})(i);

**定时器中的i值如果场景和上面一致，现在在click事件触发函数中有一个定时器setTimeout（或者setInterval）

(function(index){
oLi[i].onclick=function(){

setTimeout(function(){
alert(index); //0.........oLi.length-1,或者也可以用索引的方式解决，如下注释代码

},500);
}
})(i);

四、定时器
1.种类：
**timer=setTimeout(function(){},700);延迟700毫秒调用第一个参数函数
       **timer=setInterval(function(){},700);间隔700毫秒调用一次第一个参数函数
2.注意事项
**一定要在使用定时器之前先清除clearTimeout(timer)/clearInterval(timer);防止每次叠加干扰；
**还有定时器函数里面的this一般指向window(全局对象)，除非手动赋值指定(可以将该函数外面的this付给_this;这样定时器里面就可以获取到_this了)；
**定时器定以后会放到一个队列中，如果js主进程队列的任务执行完后会将定时器放到该队列末尾执行，关于0毫秒不同浏览器解析不一致10几毫秒或者等等。
**如果第一个参数是函数名的形式，记得不要加(),否则就是执行完函数的结果了；
五、流程控制
1.switch (){case} 当条件种类不多时候最佳选择；
2.if()else if(){}else{}
**break;和continue；前者是跳出整个循环，后者是跳出档次循环；
六、Date对象
var date=new Date();//获取的是系统时间（本地格式）
1.基本的方法（能获取的时间都能设置，除了星期）
**date.getFullYear()   -->获取年份
**date.getMonth()    -->获取月份(0-11)要加1填坑
**date.getDate()   -->获取天
**date.getHours()   -->获取小时
**date.getMinutes()   -->获取分钟
**date.getSeconds() -->获取秒
**date.getTime()   -->获取当前距离1970年的时间毫秒值；（时间戳）
**date.getDay()   -->获取周几（0-6）0表示周日，所以有个方便用法arr=['星期如'，‘星期一’，'星期二'，'星期三'，‘星期四’，‘星期五’，‘星期六’]；这样arr[date.getDay]-->就是汉化后的星期几；
**setFullYear('年','月','日');   -->设置日期，参数可以只有一个，两个，没给的参数会默认系统当前的时间作为参数。
**setMonth（月）--》设置月份要比实际月份-1
**setDate（日）
**setHours('时','分','秒','毫秒');   -->设置时间，除了毫秒，其他参数可以有一个两个三个，不设也是系统默认时间填
补。
**setMinutes（分）
**setSeconds（秒）
**日期有个自动进位的功能，如下面两个例子
1.求1个月多少天
思路：找到最后一天，需要先找到下个月第一天，找到下个月
var date = new Date();
date.setMonth(date.getMonth+1);
date.setDate(0);
console.log(date.getDate());//就是这个月多少天；
2.求上个月的最后一天星期几
       思路：这个月的第一天
var date= new Date();
date.setDate(0);
date.getDay();//获取了上个月最后一天的星期几
七、获取计算后的样式
1、种类
**getComputedStyle(元素,false).样式名称；//chrome  FF safari opera ....
**元素.currentStyle.样式名称；//IE

2、封装一个兼容的获取计算后样式的函数getStyle：
function getStyle(obj,name){
return obj.currentStyle? obj.currentStyle[name]:getComputedStyle(obj,false)[name];//该处判断条件不可以换成getComputedStyle，因为在IE下直接报错；
}
**尽量不要获取符合样式；
3、捎带设置样式的方法：
**元素.style.样式名=“”；
**元素.className=“”；//推荐方式
**元素.style.cssText=“”;//集中批量设置样式字符串，不推荐
八、随机数
Math.random()*(m-n)+n   --->  获取[n~m)间的随机数法则；
九、表单元素
1.获取表单value
**input.value() //输入框的值
**select.value() //下拉框当前选中的值
**注意都是字符串，所有的元素属性和表单获取的值都是字符串；
**(非表单元素可以根据innerHTML获取其内部值)
2.判断选中表单元素的方式
**radio 或者 checkbox等 用checked=true表示选中，反则checked=false表示选中；
3.表单中的select相关操作
var select  = document.getElementById("select");
var aOptions = select.options; //获取所有的option选项；
var iSelectedIndex=select.selectedIndex;//获取选中项的下标；
var sText=sOptions[0].innerHTML/text; 获取第一个选项的文本值
var sValue=select.value;//选中项的value值
创建option    ：var  oOption = new  Option(文本值，value值)；
添加option    ：select.add(oOption);
删除option    ：select.remove(第几个)；
十、数组
arr[10][0] //10;
var a=[];
有length属性
方法后补充.........................................
十一、命名规范
1.要求：具有可读性，规范性，可使用匈牙利，驼峰命名法
2.规则：**变量前缀是类型名的缩写；
**单词首字母大写(驼峰)；
**函数名可以不加类型名的缩写；
3.前缀 　　类型 　　　例子
--------------------------------------------------------------------------------------------------------------------------
o　　　Object　　　oDiv
s　　　string　　　sName
b　　　boolean　　　bChose
i　　　integer　　　iAge
a　　　array　　　aTag
f　　　float　　　fPrice
fn　　function　　　fnFix
re　　regexp　　　reString
v　　variant　　　vNumber （字体变量）
--------------------------------------------------------------------------------------------------------------------------
十二、简写
1.页面中只有一个的
**document.body
**document.title
2.流程控制类的
**if(){}else{} 当if或者两者的执行语句都是一句话的时候，可以省略{}，例：
if(a)
console.log(a);
else
console.log('none');
**if(a){console.log(a);}    // a&&console.log(a);
**三目运算符，条件？条件真执行：调价假执行，例：
var result=2==3？true:false; //false;
**注意就是三目运算符会将结果的共同部分提到最前面，例如2==3 真就return true，假就return false时候，要写成 return 2==3？true：false；
十三、arguments
实参的集合，一个类数组对象(拥有length属性，但是没有array的push，pop等方法);
十四、eval()
把字符串转成js可以执行的程序。但是有eval注入和eval攻击的弊端，所以少用，尽量不用；
eval(字符串/函数表达式)，但是如果参数是一个json对象类型var json={"name":"tom","age":23}需要处理一下
eval("("+json+")"); 否则会报语法错误。
十五、Math对象
Math.ceil();//向上取整
Math.floor();//向下取整
Math.round();//四舍五入
Math.abs();//取绝对值
Math.min(12,3,83);//取最小值
Math.max(12l,34,4);//取最大值
Math.sqrt();//开参数的平方
Math.pow(n,m);//求n的m次幂
十六、数组(尽量存储同一类型数据，方便处理，可以设置长度为0，清空数组。)
1.定义: var a=[];//a[]
var a=new Array();//a[]
var a=new Array(1,3,4);//a[1,3,4]
var a=new Array(10);//长度为10的数组
2.操作方法
var arr=new Array();
1)arr.push(2); //从arr后面添加一个元素2；返回新数组长度；
2)arr.unshift(2);//从arr前面添加一个元素2；返回新数组长度；
3)arr.pop();//从arr后面删除一个元素；返回这个元素。
4)arr.shift();//从arr前面删除一个元素；返回该元素；
5)arr.splice(开始位置，删除个数，添加一个元素......)
arr.splice(开始位置，1)；模仿删除
arr.splice(开始位置，0，添加)；模仿添加
6)arr.join("连接符")；//将数组元素用连接符连接成一个字符串；
7)arr.reverse();//数组方向排列
8)arr.sort();//数组排序，默认按字典顺序，如果有参数函数按照参数函数处理
arr.sort(numSort)
function numSort(n1,n2){
return n1-n2;//从小到大排列，n2-n1：从大到小排列
}
9)arr.concat( 另一个数组)；//数组连接，返回一个新数组；
十七、json（打包变量（数据）的格式,无序，没有length属性）
var json={"name":"tom","age":18};
json.name//获取name属性值
json["name"]//获取name属性值
如果是循环用for in
for(var key in json){
json[key];//获取每个属性值时候key是变量，获取只能用[]
}
十八、字符串
var str="welcome to china. ";
1.方法：
1）str.charAt(i);//获取str中的第i个位置的字符。
2）str.indexOf(小字符串)；//小字符串在str中出现的第一个位置，从左向右,区分大小写，没有返回-1
3）str.lastIndexOf(小字符串)；//小字符串在str中出现的第一个位置，从右向左，区分大小写，没找到返回-1
4)  str.substring（开始，结束）//截取[开始，结束)区间字符串，一个参数默认为开始值，一直截取到末尾。
5)  str.toLowerCase（）//转小写
6)  str.toUpperCase（）//转大写
7）str.split("分隔符")//字符串根据分隔符切分成数组，返回一个数组；
8）str.replace("希望被替换的串"，“替换成哪个串”);
2.字符串比较规则：
1）英文：按字典序，拆开字符比较
2）数字：拆开比较单个
3）中文：unicode编码序（入库顺序大到小）
3.编码：
str.charCodeAt(i)；//第i个字符的ASCII
String.fromCharCode('0x4e00');//中文的一，unicode（16进制）转汉字
unicode在css，html中书写要去掉u,
"\u4e00"-->"\4e00"
"\u9fa5"-->"\9fa5"
4.字符集
常用的两种
utf-8:国际标准  1个汉字占三个字节
gb2312:中文  1个汉字占2个字节
获取不同字符集类型时候字符串所占字节长度函数在封装函数的文章中介绍。
十九、js语言特性
1.预解析(会把声明提到最前面，在赋值表达式的位置赋值。冲不出函数，冲不出script标签。)
1）变量的：
var a=12；
function show(){
console.log(a);
var a=5;
/*
var a;
console.log(a);
a=5;
*/
}
show();//undefind
2）函数的：（不要在if等语句中定义函数）
var a=12;
if(a%2==0){
function show(){
console.log("偶数");
}
}else{

function show(){
console.log("奇数");
}
}
老版本IE中可以看到结果是奇数，也就是把函数声明提到最前面了，所以最后的覆盖了最前的。现在新的浏览器不会。
2.引用（只有对象类型才有引用，基本类型（如变量）就是赋值）
var a=[1,2,3];
var b=a;
b.push(4);
console.log(a);//[1,2,3,4]
3.应急措施，把有错误不影响使用，或者别人的错误代码放到try中
try{
//错误代码
}catch(e){
//补救措施
}
4."use strict";严格模式
优点：规范
缺点：不兼容
特点：1）定义变量前面必须加var
2）不允许语句中出现定义函数
3）没有with语句
4）作用范围冲不出函数，冲不出script标签
5）不会对与解析造成影响
二十、一些坑
1.var a=b=c=12;
相当于var a=12;b=12;c=12; 没有给b或c var声明，就是默认他们是全局变量。（变量尽量不用连等）
2.js在浏览器中所有的全局变量都属于window（node里面是global）。
3.逗号
**如果是特定语法需要，就叫逗号表达式，例如{name:"tom",age:12}
**否则，叫做逗号运算符,默认看最后一个的值
if(12,3,9,0)     //0
for(var i=0,a=3)  //a=3
4.||  从前向后看，遇到真值就不看后面了，如果都是假，就取最后一个假值，例如
var  a=12||0||null;   //12
var a = 0||null;    //null
5,&&   a&&b 如果a是真就执行b，如果是假 就执行a
6.判断浏览器类型，不得已才使用，如果可以兼容的写代码，就尽量不要判断浏览器。 

function show(){
console.log("偶数");
}