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));//

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)"/>