Day3JavaScript（一）JavaScript初识以及bom操作
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));//3
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));//11
对象
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)"/>
