JavaScript简介
什么是JavaScript
弱类型，动态类型，基于原型的直译性的编程语言。1995年netscape(网景)在导航者浏览器中设计完成。
JavaScript的特点
1.与HTML之间进行交互
2.不需要编译（浏览器中有解释器）
3.跨平台
4.安全性：不能直接访问本地文件
5.大小写敏感
JavaScript的作用
1.JavaScript可以动态的增删改查HTML的元素
2.JavaScript可以动态的修改样式（css）
3.JavaScript可以对事件进行响应
4.JavaScript可以实现对表单的动态校验
5.JavaScript可以对cookie和session进行处理
6.JavaScript可以实现后台操作（node.js）
JavaScript的组成
1.ECMAscript
2.bom
3.dom
JavaScript的引入方式
1.内联
<head>
<meta charset="utf-8" />
<title></title>
<script> </script>
</head>
2.引入外部文件
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/myjs.js" ></script>
</head>
注意：脚本存在执行的先后顺序
数据类型和变量
变量
变量名称规范：变量名是大小写英文、数字、$和_的组合，且不能用数字开头。变量名也不能是JavaScript的关键字，如if、while等。见名知义，申明一个变量用var语句。
数据类型
number
JavaScript不区分整数和浮点数，统一用Number表示，以下都是合法的Number类型：
123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity
字符串string
字符串是以单引号'或双引号"括起来的任意文本，比如'abc'，"xyz"等等。请注意，''或""本身只是一种表示方式，不是字符串的一部分，因此，字符串'abc'只有a，b，c这3个字符。
布尔值boolean
布尔值和布尔代数的表示完全一致，一个布尔值只有true、false两种值，要么是true，要么是false，可以直接用true、false表示布尔值，也可以通过布尔运算计算出来：
true; // 这是一个true值
false; // 这是一个false值
2 > 1; // 这是一个true值
2 >= 3; // 这是一个false值
underfined
<script>
var d;
alert(typeof d);
</script>
null
<script>
var d;
d = null;
alert(typeof d);
</script>
array(数组)
<script>
var d;
d = null;
d = ["aa","bb","cc"];
alert(typeof d);
</script>
object
<script>
var d;
d = null;
d = ["aa","bb","cc"];
d = {"name":"zs"};
alert(typeof d);
</script>
JavaScript类型转换
number+string
<script>
var a = 1;
var b = "2";
var d = a+b;
alert(d);
</script>
boolean+number
<script>
var a = 1;
var b = true;
var d = a+b;
alert(d);
</script>
boolean+string
<script>
var a = "1";
var b = true;
var d = a+b;
alert(d);
</script>
string+undefined
<script>
var a = "1";
var b = true;
var c;
var d = a+c;
alert(d);
</script>
number+undefined
<script>
var a = 1;
var b = true;
var c;
var d = a+c;
alert(d);
</script>
运算符
算数运算符
赋值运算符
比较运算符
var a = 5;
var b = "5";
alert(a == b); //值
alert(a === b); //值和类型
逻辑运算符
三目运算符
流程控制
分支语句
if...else...
与java一样
switch
与java一样
循环语句
while循环
与java一样
do...while循环
与java一样
for循环
与java一样
for ... in
for循环的一个变体是for ... in循环，它可以把一个对象的所有属性依次循环出来：
<script>
var arr = ["aa","bb","cc","dd",11,22,33];
for(var i in arr){
console.log(arr[i]);//i是下标
}
</script>
break和continue
小案例
<script>
var w = 1000;
for(var i=0;i<15;i++){
if(i<8){
var width = w-i*100;
document.write("<hr width="+width+"px>");
}else if(i>8){
var width = 300+(i-7)*100;
document.write("<hr width="+width+"px>");
}
} </script>
结果：
函数
无参函数的声明和调用
function calc(){
console.log("aa");
}
calc();
有参函数的声明和调用
function sum(a,b) {
console.log(a+b);
}
返回值
function calc4(a,b){
return a + b;
}
var a = calc4(1,2);
匿名函数（闭包）
(function (x) {
return x * x;
})(3);
内置函数
isNaN():判断值是否为非数字
var a= "aa";
console.log(isNaN(a));//true
var b = "1";
console.log(isNaN(b));//false
parseInt():将字符串转换为整数
var a = "1";
var b = "2";
console.log(parseInt(a)+parseInt(b));//
parseFlocat():将字符串转换为小数
var a = "1.4";
var b = "2.5";
console.log(parseFloat(a)+parseFloat(b));//3.9
eval():对字符串进行计算，类型转换
var c = "3+2*4";
console.log(eval(c));//
对象
js面向对象语言。属性和方法
内置对象
字符串对象
对象创建:
var s = "aaa";
s = new String("aaa");
属性:
length:长度
方法:
console.log(s.charAt(1)); //根据索引获取字符
console.log(s.indexOf("d")); //根据字符获取索引位置,不出现为-1
console.log(s.substr(1,2)); //bc
console.log(s.substring(1,2)); //b
数组对象
数组定义:
var arr = ["aa","bb","cc"];
//console.log(arr);
arr = new Array();
arr[0] = "aa";
arr[1] = "bb"; arr = new Array("bb","cc");
console.log(arr); arr = new Array();
arr["北京市"]=["昌平区","西城区"];
arr["上海市"]=["浦东区","徐汇区"];
for(var i in arr){
console.log(i);
}
属性:
length
方法:
concat():连接
reverse():倒叙
sort():排序
push():追加
pop():删除
日期对象
对象创建:
Date()
属性
方法
var myDate = new Date();
var year = myDate.getFullYear(); //year
var month = myDate.getMonth()+1; //month
var day = myDate.getDay(); //0-6 周中的天
var day2 = myDate.getDate(); //月中的天
var hour = myDate.getHours();
var min = myDate.getMinutes();
var sec = myDate.getSeconds();
自定义对象
function test(){
var stu = new Object();
stu.name = "zs";
stu.age = 12;
console.log(stu.name);
}
//学生对象 name age
function Student(name,age){
this.name = name;
this.age = age;
this.show = function(){
console.log("name="+this.name+",age="+this.age);
}
}
var stu = new Student("zs",12);
console.log(stu.name);
stu.show();
//扩展属性或者方法
Student.prototype.sex = "男";
bom(浏览器对象模型)
1）控制浏览器行为。
2）所有全局变量和函数都属于window。window可省略。
3）window
属性:
document:文档
history:浏览的url
location:包含url的信息
innerWidth:宽度
innerHeight:高度
navagitor:浏览器信息 方法:
var myWindow = open("http://www.baidu.com","baidu",
"width=200px,height=200px,left=200px,top=100px");
//关闭
myWindow.close();
var conf = confirm("确认删除?");
var str = prompt("请输入密码?","123456"); var t = setTimeout(function(){
console.log("boom");
},1000); clearTimeout(t); var inter = setInterval(function(){
console.log(new Date());
},1000);
clearInterval(inter);
4）history对象
浏览器历史
属性:
length
方法:
<input type="button" value="上一个" onclick="history.back();"/>
<input type="button" value="下一个" onclick="history.forward();"/>
<input type="button" value="跳转" onclick="history.go(1)"/>