JavaScript 笔记总结

一、js的简介 
1、js是什么
　　js是可以嵌入到html中，是 基于对象 和 事件驱动 的 脚本语言
　　特点：
　　　　(1)交互性
　　　　(2)安全性：js不能访问本地磁盘
　　　　(3)跨平台：浏览器中都具备js解析器
2、js能做什么
　　　(1)js能动态的修改(增删)html和css的代码
　　　(2)能动态的校验数据

3、js历史及组成
　　ECMAScript BOM(浏览器对象模型)  DOM(文档对象模型)
4、js被引入的方式
　　(1)内嵌脚本
　　　　<input type="button" value="button" onclick="alert('xxx')" />
　　(2)内部脚本
　　　　<script type="text/javascript">
　　　　　　alert("xxx");
　　　　</script>
(3)外部脚本
　　首先先创建一个js文件
　　其次在html中引入
　　<script type="text/javascript" src="demo1.js"></script>
　　js代码放在哪？
　　　　放在哪都行 但是在不影响html功能的前提下 越晚加载越好
二、js基本语法
1、变量
　　(1)
　　　　var x = 5;
　　　　x = 'javascript';
　　　　var y = "hello";
　　　　var b = true;
　　(2)
　　　　x = 5;

2、原始数据类型
　　(1)number:数字类型
　　(2)string：字符串类型
　　(3)boolean:布尔类型
　　(4)null:空类型
　　(5)underfind:未定义

　　注意：number、boolean、string是伪对象

　　类型转换：
　　　　numberoolean转成string
　　　　toString();
　　　　stringoolean转成number
　　　　parseInt()
　　　　parseFloat()
　　　　boolean 不能转
　　　　string 可以将数字字符串转换成number 如果“123a3sd5” 转成123强制转换
　　　　Boolean()  强转成布尔
　　　　数字强转成布尔  非零就是true   零就是false
　　　　字符串强转成布尔  非“”(空字符串)就是true   空字符串“”就是false
　　　　Number() 强转成数字
　　　　布尔转数字 true转成1  false转成0
　　　　字符串转数字 不能强转

3、引用数据类型
　　java: Object obj = new Object();
　　js: var obj = new Object();
　　var num = new Number();

4、运算符
　　(1)赋值运算符
　　　　var x = 5;
　　(2)算数运算符
　　　　+ - * / %
　　　　+: 遇到字符串变成连接
　　　　-：先把字符串转成数字然后进行运算
　　　　*: 先把字符串转成数字然后进行运算
　　　　/: 先把字符串转成数字然后进行运算
　　(3)逻辑运算符
　　　　&& ||
　　(4)比较运算符
　　　　< > >= <= != ==
　　　　===:全等：类型与值都要相等
　　(5)三元运算符
　　　　3<2?"大于":"小于"
　　(6)void运算符
　　　　<a href="javascript:void(0);">xxxxxx</a>
　　(7)类型运算符
　　　　typeof:判断数据类型 返回我的数据类型
　　　　instanceof：判断数据类型 是否是某种类型
　　　　var obj = new Object();
　　　　alert(typeof obj);//object
　　　　alert(obj instanceof Object);//true
5、逻辑语句
　　(1)if-else
　　　　//条件:
　　　　//数字非0 字符串非空====true
　　　　if(9){
　　　　　　alert("true--");
　　　　}else{
　　　　　　alert("false--");
　　　　}
　　(2)switch
　　　　var x = "java";
　　　　switch(x){
　　　　　　case "css":
　　　　　　　　alert("css");
　　　　　　　　break;
　　　　　　case "js":
　　　　　　　　alert("js");
　　　　　　　　break;
　　　　　　case "java":
　　　　　　　　alert("java");
　　　　　　　　break;
　　　　　　default:
　　　　　　　　alert("def");
　　　　　　}

　　(3)for
　　　　 for(var i = 0;i<5;i++){
　　　　　　alert(i);
　　　　 }
　　(4)for in
　　　　var arr = [1,3,5,7,"js"];
　　　　 for(index in arr){//index代表角标
　　　　　　//alert(index);
　　　　　　alert(arr[index]);
　　　　 }

三、js内建对象
　　(1)Number
　　　　创建方式：
　　　　　　var myNum=new Number(value);
　　　　　　var myNum=Number(value);
　　　　　　属性和方法：
　　　　　　　　toString():转成字符串
　　　　　　　　valueOf()：返回一个 Number 对象的基本数字值
　　(2)Boolean
　　　　创建方式：
　　　　　　var bool = new Boolean(value);
　　　　　　var bool = Boolean(value);
　　　　属性和方法：
　　　　　　toString():转成字符串
　　　　　　valueOf()：返回一个 Boolean 对象的基本值(boolean)
　　(3)String
　　　　创建方式：
　　　　　　var str = new String(s);
　　　　　　var str = String(s);
　　　　属性和方法：
　　　　　　length:字符串的长度
　　　　　　charAt():返回索引字符
　　　　　　charCodeAt:返回索引字符unicode
　　　　　　indexOf():返回字符的索引
　　　　　　lastIndexOf();逆向返回字符的索引
　　　　　　split();将字符串按照特殊字符切割成数组
　　　　　　substr():从起始索引号提取字符串中指定数目的字符
　　　　　　substring():提取字符串中两个指定的索引号之间的字符
　　　　　　toUpperCase();转大写
　　(4)Array
　　　　创建方式：
　　　　　　var arr = new Array();//空数组
　　　　　　var arr = new Array(size);//创建一个指定长度的数据
　　　　　　var arr = new Array(element0, element1, ..., elementn);//创建数组直接实例化元素
　　　　　　var arr = [];//空数组
　　　　　　var arr = [1,2,5,"java"];//创建数组直接实例化元素
　　　　属性和方法：
　　　　　　length:数组长度
　　　　　　join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔一个
　　　　　　pop():删除并返回最后元素
　　　　　　push()：向数组的末尾添加一个或更多元素，并返回新的长度
　　　　　　reverse();反转数组
　　　　　　sort();排序
　　(5)Date
　　　　创建方式：
　　　　　　var myDate = new Date();
　　　　　　var myDate = new Date(毫秒值);//代表从1970-1-1到现在的一个毫秒值
　　　　属性和方法
　　　　　　getFullYear():年
　　　　　　getMonth():月 0-11
　　　　　　getDate():日 1-31
　　　　　　getDay()：星期 0-6
　　　　　　getTime():返回1970年1月1日午夜到指定日期（字符串）的毫秒数
　　　　　　toLocalString();获得本地时间格式的字符串
　　(6)Math
　　　　创建方式：
　　　　　　Math 对象并不像 Date 和 String 那样是对象的类，因此没有构造函数 Math()，像 Math.sin() 这样的函数只是函数，不是某个对象的方法。您无需创建它，通过把 Math 作为对象使用就可以调用其所有属性和方法。
　　　　属性和方法
　　　　　　PI：圆周率
　　　　　　abs():绝对值
　　　　　　ceil():对数进行上舍入
　　　　　　floor():对数进行下舍入
　　　　　　pow(x,y)：返回 x 的 y 次幂
　　　　　　random():0-1之间的随机数
　　　　　　round():四舍五入
　　(7)RegExp
　　　　创建方式：
　　　　　　var reg = new RegExp(pattern);
　　　　　　var reg = /^正则规则$/;
　　　　规则的写法：
　　　　　　[0-9] 
　　　　　　[A-Z]
　　　　　　[a-z]
　　　　　　[A-z]
　　　　　　d 代表数据
　　　　　　D 非数字
　　　　　　w 查找单词字符
　　　　　　W 查找非单词字符
　　　　　　s 查找空白字符
　　　　　　S 查找非空白字符
　　　　　　n+ 出现至少一次
　　　　　　n* 出现0次或多次
　　　　　　n? 出现0次或1次
　　　　　　{5} 出现5
　　　　　　{2,8} 2到8次
　　　　方法：
　　　　　　test(str):检索字符串中指定的值。返回 true 或 false
　　　　需求：
　　　　　　校验邮箱：
　　　　　　　　var email = haohao_827@163.com
　　　　　　　　var reg = /^[A-z]+[A-z0-9_-]*@[A-z0-9]+.[A-z]+$/;
　　　　　　　　reg.test(email);
四、js的函数
1、js函数定义的方式
　　(1)普通方式
　　　　语法：function 函数名(参数列表){函数体}
　　　　示例：
　　　　　　function method(){
　　　　　　　　alert("xxx");
　　　　　　}
　　　　　　method();
　　(2)匿名函数
　　　　语法：function(参数列表){函数体}
　　　　示例：
　　　　　　var method = function(){
　　　　　　　　alert("yyy");
　　　　　　};
　　　　　　method();
　　(3)对象函数
　　　　语法：new Function(参数1,参数2,...,函数体);
　　　　注意：参数名称必须使用字符串形式、最后一个默认是函数体且函数体需要字符串形式
　　　　示例：
　　　　　　var fn = new Function("a","b","alert(a+b)");
　　　　　　fn(2,5);
2、函数的参数
　　(1)形参没有var去修饰
　　(2)形参和实参个数不一定相等
　　(3)arguments对象 是个数组 会将传递的实参进行封装
　　　　function fn(a,b,c){
　　　　　　//var sum = a+b+c;
　　　　　　//alert(sum);
　　　　　　//arguments是个数组 会将传递的实参进行封装
　　　　　　for(var i=0;i<arguments.length;i++){
　　　　　　　　alert(arguments[i]);
　　　　　　}
　　　　}
　　　　fn(1,2,4,8);

3、返回值
　　(1)在定义函数的时候不必表明是否具有返回值
　　(2)返回值仅仅通过return关键字就可以了 return后的代码不执行
　　　　function fn(a,b){
　　　　　　return a+b;
　　　　　　//alert("xxxx");
　　　　}
　　　　alert(fn(2,3));

4、js的全局函数
　　(1)编码和解码
　　　　encodeURI()   decodeURI()
　　　　encodeURIComponet()   decodeURIComponent()
　　　　escape() unescape()
　　　　三者区别：
　　　　　　进行编码的符号范围不同吧，实际开发中常使用第一种
　　(2)强制转换
　　　　Number()
　　　　String()
　　　　Boolean()
　　(3)转成数字
　　　　parseInt()
　　　　parseFloat()
　　(4)eval()方法
　　　　将字符串当作脚本进行解析运行
　　　　//var str = "var a=2;var b=3;alert(a+b)";
　　　　//eval(str);
　　　　function print(str){
　　　　　　eval(str);
　　　　}
　　　　print("自定义逻辑");

五、js的事件
　　事件
　　事件源
　　响应行为
1、js的常用事件
　　onclick:点击事件
　　onchange:域内容被改变的事件
　　需求：实现二级联动
　　　　<select id="city">
　　　　　　<option value="bj">北京</option>
　　　　　　<option value="tj">天津</option>
　　　　　　<option value="sh">上海</option>
　　　　</select>
　　　　<select id="area">
　　　　　　<option>海淀</option>
　　　　　　<option>朝阳</option>
　　　　　　<option>东城</option>
　　　　</select>
　　　　<script type="text/javascript">
　　　　var select = document.getElementById("city");
　　　　select.onchange = function(){
　　　　　　var optionVal = select.value;
　　　　　　switch(optionVal){
　　　　　　　　case 'bj':
　　　　　　　　　　var area = document.getElementById("area");

　　　　　　　　　　area.innerHTML = "<option>海淀</option><option>朝阳</option><option>东城</option>";    

                             　　break;

　　　　　　　　case 'tj':
　　　　　　　　　　var area = document.getElementById("area");
　　　　　　　　　　area.innerHTML = "<option>南开</option><option>西青</option><option>河西</option>";
　　　　　　　　　　break;
　　　　　　　　case 'sh':
　　　　　　　　　　var area = document.getElementById("area");
　　　　　　　　　　area.innerHTML = "<option>浦东</option><option>杨浦</option>";
　　　　　　　　　　break;
　　　　　　　　default:
　　　　　　　　　　alert("error");
　　　　　　}
　　　　};
　　　　</script>
onfoucus:获得焦点的事件
onblur:失去焦点的事件
需求： 当输入框获得焦点的时候，提示输入的内容格式
当输入框失去焦点的时候，提示输入有误
<label for="txt">name</label>
<input id="txt" type="text" /><span id="action"></span>
<script type="text/javascript">
var txt = document.getElementById("txt");
txt.onfocus = function(){
//友好提示
var span = document.getElementById("action");
span.innerHTML = "用户名格式最小8位";
span.style.color = "green";
};
txt.onblur = function(){
//错误提示
var span = document.getElementById("action");
span.innerHTML = "对不起 格式不正确";
span.style.color = "red";
};
</script>

onmouseover:鼠标悬浮的事件
onmouseout:鼠标离开的事件
需求：div元素 鼠标移入变为绿色 移出恢复原色
#d1{200px;height: 200px;}
<div id="d1"></div>
<script type="text/javascript">
var div = document.getElementById("d1");
div.onmouseover = function(){
this.style.backgroundColor = "green";
};
div.onmouseout = function(){
this.style.backgroundColor = "red";
};
</script>


onload:加载完毕的事件
等到页面加载完毕在执行onload事件所指向的函数
<span id="span"></span>
<script type="text/javascript">
window.onload = function(){
var span = document.getElementById("span");
alert(span);
span.innerHTML = "hello js";
};
</script>

2、事件的绑定方式
(1)将事件和响应行为都内嵌到html标签中
<input type="button" value="button"  onclick="alert('xxx')"/>
(2)将事件内嵌到html中而响应行为用函数进行封装
<input type="button" value="button" onclick="fn()" />
<script type="text/javascript">
function fn(){
alert("yyy");
}
</script>
(3)将事件和响应行为 与html标签完全分离
<input id="btn" type="button" value="button"/>
<script type="text/javascript">
var btn = document.getElementById("btn");
btn.onclick = function(){
alert("zzz");
};
</script>

****this关键字
this经过事件的函数进行传递的是html标签对象
<input id="btn" name="mybtn" type="button" value="button123" onclick="fn(this)"/>
<script type="text/javascript">
function fn(obj){
alert(obj.name);
}
</script>

3、阻止事件的默认行为
IE：window.event.returnValue = false;
W3c: 传递过来的事件对象.preventDefault();
//ie：window.event.returnValue = false;
//W3c：传递过来的事件对象.preventDefault();
//W3c标准
if(e&&e.preventDefault){
alert("w3c");
e.preventDefault();
//IE标签
}else{
alert("ie");
window.event.returnValue = false;
}


//通过事件返回false也可以阻止事件的默认行为
<a href="demo11.html" onclick="return false">点击我吧</a>

4、阻止事件的传播
IE：window.event.cancelBubble = true;
W3c: 传递过来的事件对象.stopPropagation();
if(e&&e.stopPropagation){
alert("w3c");
e.stopPropagation();
//IE标签
}else{
alert("ie");
window.event.cancelBubble = true;
}


六、js的bom
(1)window对象
弹框的方法：
提示框：alert("提示信息");
确认框：confirm("确认信息");
有返回值：如果点击确认返回true  如果点击取消 返回false
var res = confirm("您确认要删除吗？");
alert(res);
输入框：prompt("提示信息");
有返回值：如果点击确认返回输入框的文本 点击取消返回null
var res =  prompt("请输入密码？");
alert(res);
open方法：
window.open("url地址");
open("../jsCore/demo10.html");

定时器：
setTimeout(函数,毫秒值);
setTimeout(
function(){
alert("xx");
},
3000
);
clearTimeout(定时器的名称);
var timer;
var fn = function(){
alert("x");
timer = setTimeout(fn,2000);
};
var closer = function(){
clearTimeout(timer);
};
fn();
setInterval(函数,毫秒值);
clearInterval(定时器的名称)
var timer = setInterval(
function(){
alert("nihao");
},
2000
);
var closer = function(){
clearInterval(timer);
};

需求：注册后5秒钟跳转首页
恭喜您注册成功，<span id="second" style="color: red;">5</span>秒后跳


转到首页，如果不跳转请<a href="../jsCore/demo10.html">点击这里</a>
<script type="text/javascript">
var time = 5;
var timer;
timer = setInterval(
function(){
var second = document.getElementById("second");
if(time>=1){
second.innerHTML = time;
time--;
}else{
clearInterval(timer);
location.href="../jsCore/demo10.html";
}
},
1000
);
</script>

(2)location
location.href="url地址";
(3)history
back();
forward();
go();
<a href="demo7.html">后一页</a>
<input type="button" value="上一页" onclick="history.back()">
<input type="button" value="下一页" onclick="history.forward()">

<input type="button" value="上一页" onclick="history.go(-1)">
<input type="button" value="下一页" onclick="history.go(1)">