Day3JavaScript（一）JavaScript初识以及bom操作详解编程语言

什么是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 // 这是一个true值 

2 // 这是一个false值

underfined

 script 

 var d; 

 alert(typeof d); 

 /script 

 

 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 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="上一个" / 

 input type="button" value="下一个" / 

 input type="button" value="跳转" / 

 

原创文章，作者：Maggie-Hunter，如若转载，请注明出处：https://blog.ytso.com/11162.html

cgojava