javascript 笔记！

1.通过javascript向文档中输出文本

document是javascript的内置对象，代表浏览器的文档部分

document.write("Hello Javascript"); 向文档写入字符串

 

2.javascript都是放在script标签中的，一旦加载，就会执行

javascript顺序执行,如果有多段script代码，会按照从上到下，顺序执行

javascript有两种注释方式 :

单行注释 //

多行注释

 

3. JavaScript  调试办法

a.alert进行调试

b.使用firefox

c.console.log() ，console.log() 只会把信息输出在console里，而不会影响用户的使用

 

4.基本数据类型

undefine，Boolean,Number,String，null

undefine         声明了但未赋值        

Boolean         布尔，Boolean变量有两种值，分别是true或者false

Number         数字，javascript中的Number可以表示十进制，八进制，十六进制整数，浮点数，科学技术法

<!--分割-->

<script>

  var a=10; //十进制

  var b=012;//第一位是0，表示八进制

  var c=0xA;//0x开头表示十六进制

  var d=3.14;//有小数点表示浮点数

  var e=3.14e2;//使用e的幂表示科学技术法

  document.write("十进制 10 的值: "+a);

  document.write("<br>");

  document.write("八进制 012 的值: "+b);

  document.write("<br>");

  document.write("十六进制 0xA 的值: "+c);

  document.write("<br>");

  document.write("浮点数 3.14 的值: "+d);

  document.write("<br>");

  document.write("科学技术法 3.14e2 的值: "+e);

  document.write("<br>");

</script>

 

String         字符串,单引号和双引号，都用来表示字符串。

var         动态类型,变量的类型是动态的，当值是整数的时候，就是Number类型，当值是字符串的时候，就是String类型

typeof         变量类型判断,使用typeof来进行判断数据类型,正是因为变量是动态类型的，所以无法确定当前到底是哪种类型，这个时候，就可以使用typeof来进行判断

null         空对象/对象不存在 ,null表示一个对象不存在

 

5.伪对象概念：javascript是一门很有意思的语言，即便是基本类型，也是伪对象，所以他们都有属性和方法。

 

6.无论是Number,Boolean还是String都有一个toString方法，用于转换为字符串

数字转字符串 :

Number转换为字符串的时候有默认模式和基模式两种

<!--分割-->

a.toString()  //默认模式，即十进制

a.toString(2)  //基模式，二进制

a.toString(8)  //基模式，八进制

a.toString(16)  //基模式，十六进制

 

String()和toString()的区别：

String()和toString()一样都会返回字符串，区别在于对null的处理

String()会返回字符串"null"

<!--分割-->

把空对象转换为字符串：null

 

toString() 就会报错，无法执行

<!--分割-->

null.toString() / toString(null) 就会报错，所以后面的代码不能执行

 

7.转换为数字

javascript分别提供内置函数 parseInt()和parseFloat()，转换为数字

如果被转换的字符串，同时又数字和字符构成，那么"parseInt"会一直定位数字，直到出现非字符。

<!--分割-->

"10abc" 会被转换为 10,因为abc不是数字

"10abc8" 会被转换为 10 //判断每一位，直到发现不是数字的那一位

"hello javascript"转换为:NaN

 

8.转换为Boolean

当转换字符串时：非空即为true

<!--分割-->

Boolean("")//空字符串,转换为布尔后的值:false

Boolean("hello javascript")//非空字符串,转换为布尔后的值:true

 

当转换数字时：非0即为true

<!--分割-->

Boolean(0)//0,转换为布尔后的值:false

Boolean(3.14)//非0,转换为布尔后的值:true

 

当转换对象时：非null即为true

<!--分割-->

Boolean(null)//空对象 null 转换为布尔后的值:false

Boolean(new Object() )//对象存在,非空对象 new Object() 转换为布尔后的值:true

 

9.基本算数运算符:+ - * / %（取余数）

<!--分割-->

10%3=1

 

10.自增，自减运算符

自增++在原来的基础上 ，增加 1.

需要注意的是

如果 ++放在 前面 ，就是 先运算，后取值 。

如果 ++放在 后面 ，就是 先取值，后运算。

自减 -- 是一个道理。

<!--分割-->

var a = 5;

a++; //先取值，再运算(先取值 ，即5)

++a; //先运算，再取值(5+1=6,取值6)

a--; //先取值，再运算(先取值 ，即5)

--a; //先运算，再取值(5-1=4,取值4)

 

11.赋值运算符

=，+=，-=，*=，/=，%=

x=5 是 最基本的赋值运算符，即把右边的值，赋给左边的变量x。

+=

x+=y, 表示 x=x+y

<!--分割-->

x+=6  //x=x+6

 

-=

<!--分割-->

x-=6  //x=x-6

 

*=

<!--分割-->

x*=6  //x=x*6

 

/=

<!--分割-->

x/=6  //x=x/6

 

%=

<!--分割-->

x%=6  //x=x%6

 

12.+运算符的多态

+ 具备多态特征

当两边都是数字的时候 ，表现为算数运算符

当任意一边是字符串的时候，表现为字符串连接符

<!--分割-->

1+2=3  //两边都是数字,算数运算符

1+"2"=12  //"2"是字符串,字符串连接符

 

13.基本逻辑运算符:==,!=,>,>=

 

14.绝对等，绝对不等于

与==进行值是否相等的判断不同 ，绝对等 ===还会进行 类型的判断

比如 数字1和 字符串'1'比较，值是相等的，但是类型不同

所以=会返回true,但是===会返回false

绝对不等于!=== 与上是一个道理

<!--分割-->

1=='1': true

1==='1': false

 

15.三相运算符 (?:)

有三个操作数

如果第一个返回true,就返回第二个操作符

否则就返回第三个操作符。

<!--分割-->

var age=15;

age<18 ? "Yes" : "No"

 

16.条件语句

if...else...

if条件一定是一个Boolean类型的值,条件成立时执行

else表示当条件不成立时执行的代码

 

else if(多条件判断 )

<!--分割-->

if(age<18){ }

else if(age<22){ }

else{ }

 

switch (多条件判断)

switch 语句与else if一样，也是进行多条件判断的

需要注意的是，每个判断结束，都要加上break;

<!--分割-->

var day=new Date().getDay(); //通过日期对象获取数字形式的星期几

switch (day)

{

case 0:

  today="星期天";

  break;

case 1:

  today="星期一";

  break;

......

}

 

17. 循环语句

常用的循环语句有： for, while, do-while, for-each都是用于在满足条件的前提下，重复执行代码用的

for循环

<!--分割-->

for(var i=0;i<5;i++){

  p(i);

}

while循环

<!--分割-->

var i = 0;

while(i<5){

  p(i);

  i++;

}

do-while循环

<!--分割-->

do{

p(i);

i++;

} while(i<5);

forEach是增强的for循环，主要用于遍历数组。

continue 表示放弃本次循环，进行下一次循环

<!--分割-->

for(i=0;i<5;i++){

  if(i==3)

    continue;

  p(i);

}

break表示终止循环，循环体结束

<!--分割-->

for(i=0;i<5;i++){

  if(i==3)

    break;

  p(i);

}

 

18.错误处理

JavaScript提供了一种try catch的错误处理机制，当有错误抛出的时候，可以catch住。

<!--分割-->调用不存在的函数

try{

   document.write("试图调用不存在的函数f2()<br>");

    f2();  //调用不存在的函数f2();

}

catch(err){

   document.write("捕捉到错误产生:");

    document.write(err.message);

}

 

19. javascript 数字对象

JavaScript中的对象是有着属性和方法的一种特殊数据类型。

常见的对象有数字Number，字符串String，日期Date，数组Array等。

 

创建一个数字对象 :可以通过new Number()创建一个数字对象

与基本类型的数字不同，对象类型的数字，拥有更多的属性和方法

<!--分割-->

var x = new Number(123);

document.write('数字对象x的类型:'+typeof x); //通过typeof 获知这是一个object

var y = 123;

document.write('基本类型y的类型:'+typeof y); //通过typeof 获知这是一个number

 

Number对象能够取到的最大( Number.MAX_VALUE 最大值)和最小 ( Number.MIN_VALUE 最小值)边界

 

NaN(Not a Number),表示不是一个数字

当通过非数字创建Number的时候，就会得到NaN.

注意： 不能通过 是否等于Number.NaN来判断 是否 “不是一个数字”，应该使用函数 isNaN()

<!--分割-->

<script>

function p(s){

  document.write(s);

  document.write("<br>");

}

var a = new Number("123abc"); //通过非数字创建Number对象，得到的是一个NaN

p('通过非数字字符串"123abc"创建出来的Number对象 a的值是：'+a);

p('但是, a==Number.NaN会返回:'+(a==Number.NaN)); //即便是一个NaN 也"不等于" Number.NaN

p('正确判断是否是NaN的方式是调用isNaN函数:'+isNaN(a)); //正确的方式是通过isNaN() 函数进行判断

</script>

 

toFixed返回一个数字的小数表达

<!--分割-->

var b = new Number("3.1415926");

b.toFixed(3);//保留三位小数点

 

返回一个Number对象的科学计数法表达

<!--分割-->

var a = new Number("123");

a.toExponential ();//数字对象123通过toExponential 返回计数法表达 1.23e+2

 

返回一个数字对象的基本数字类型

方法 valueOf() 返回一个基本类型的数字

<!--分割-->

<script>

//通过typeof 判断数据类型可以发现，一种是object,一种是number

function p(s){

  document.write(s);

  document.write("<br>");

}

var a = new Number("123");

var b = a.valueOf();

p('数字对象a的类型是: '+typeof a); //返回object

p('通过valueOf()返回的值的类型是'+typeof b); //返回number

</script>

 

20.字符串对象

可以通过new String()创建一个String对象

 

属性 l<!--分割-->h 返回字符串的长度

<!--分割-->

var y = new String("Hello JavaScrpt");

document.write("通过.l<!--分割-->h属性获取字符串'Hellow JavaScript'的长度"+y.l<!--分割-->h);

 

charAt 返回指定位置的字符

charCodeAt 返回指定位置的字符对应的Unicode码

<!--分割-->

y.charAt(0);   //返回H

y.charCodeAt(0);   //返回H对应的Unicode码 72

 

concat用于进行字符串拼接

<!--分割-->

var x = new String("Hello ");

var y = new String("Javascript");

document.write( '通过函数concat()把x和y连接起来: ' +  x.concat(y) );

 

indexOf 返回子字符串第一次出现的位置

lastIndexOf 返回子字符串最后一次出现的位置

<!--分割-->

y.indexOf ("a");

y.lastIndexOf ("a");

 

比较两段字符串是否相同 :localeCompare 比较两段字符串是否相同，0即表示相同，非0表示不同

<!--分割-->

x.localeCompare(y);

 

substring 截取一段子字符串

<!--分割-->

x.substring (0,3);   //左闭右开，取得到0，取不到3

 

split 根据分隔符，把字符串转换为数组。

<!--分割-->

var x = new String("Hello This Is JavaScript");

var y =  x.split(" ");  //通过空格分隔split(" "),得到数组y(Hello,This,Is,JavaScript)

var z =  x.split(" ",2);   //通过空格分隔split(" ",2),得到数组，并且只保留前两个Hello,This

注： 第二个参数可选，表示返回数组得长度

 

replace(search,replacement)

找到满足条件的子字符串search，替换为replacement

<!--分割-->

var x = new String("Hello JavaScript");

var y = x.replace("a","o");   //把x字符串里的第一个"a"替换成"o"

 

注: 默认情况下只替换找到的第一个子字符串，如果要所有都替换，需要写成：

x.replace(/a/g, "o");

或者

var regS = new RegExp("a","g");

x.replace(regS, "o");

<!--分割-->

var x = new String("Hello JavaScript");

var regS = new RegExp("a","g");  

var z = x.replace(regS, "o");       //把x字符串里所有的"a"替换成"o"

或者

x.replace(/a/g, "o");   //把x字符串里所有的"a"替换成"o"

 

所有返回字符串类型的方法，返回的都是基本类型的String

 

21.创建数组对象

创建数组对象的3种方式：

1. new Array() 创建长度是0的数组

2. new Array(5); 创建长度是5的数组,，但是其每一个元素都是undefine

3. new Array(3,1,4,1,5,9,2,6); 根据参数创建数组

 

22.属性l<!--分割-->h 获取一个数组的长度

<!--分割-->

var x = new Array(3,1,4,1,5,9,2,6); //根据参数创建数组

document.write("通过.l<!--分割-->h获取当前数组的长度:"+x.l<!--分割-->h');

 

23.遍历一个数组

遍历有两种方式

1.结合for循环，通过下标遍历

<!--分割-->

var x=new Array(3,1,4);

for(i=0;i<x.l<!--分割-->h;i++)

{

        document.write("使用普通的for循环遍历数组:"+x[i]+"\<br/>");

}

2.使用增强for in循环遍历

需要注意的是，在增强for in中，i是下标的意思。

for(i in x)

{  //for in 循环

  p(x[i]);

}

<!--分割-->

var x=new Array(3,1,4);

for(i in x){  //for in 循环

  document.write("使用增强for循环遍历数组"+x[i]+"\<br/>");   //.使用增强for in循环遍历

}

24.方法 concat 连接两个数组

<!--分割-->

var x = new Array(3,1,4);

var y = new Array(1,5,9,2,6);

var z = x.concat(y);

document.write("使用concat连接数组x和y,数组z是:"+z);

 

25.方法 join 通过指定"分隔符"，返回一个数组的字符串表达

var x = new Array(3,1,4);    //x的类型是object

var y = x.join();

//join返回一个数组的字符串表达,其类型是 :string

document.write("y = x.join() 得到的是数组x的字符串表达，其值是"+y+"  其类型是 :"+(typeof y)+"\<br/>");

var z = x.join("@");  //指定"分隔符"为"@" ,而不是默认的","

document.write("z = x.join(\"@\");是x的字符串表达，不过分隔符不是默认的\",\" 而是\"@\" : "+z);

 

26. 分别在"最后的位置"插入数据和获取数据(获取后删除,就像先入后出的栈一样

方法push在最后的位置插入数据

<!--分割-->

var x = new Array(3,1,4);

x.push(5);  //插入数据"5"

document.write("向x中push 5,得到:"+ x);   //得到:3,1,4,5

 

方法pop在最后的位置获取数据(获取后删除)

<!--分割-->

var x = new Array(3,1,4);

var e = x.pop();

document.write("从x中pop一个值出来，其值是:"+ e);  //方法pop获取数据,获取后删除数据的最后一个

document.write("<br/>");

document.write("pop之后，x数组的值是:"+ x);  //x数组的值3,1

 

27.分别在"最开始的位置"插入数据和获取数据(获取后删除)

方法unshift在最开始的位置插入数据

<!--分割-->

var x = new Array(3,1,4);

x.unshift(5);

document.write("对数组 unshift 值5(在最前面加)，数组变为:"+ x); //数组变为5,3,1,4

 

方法shift在最开始的位置获取数据(获取后删除)

<!--分割-->

var x = new Array(3,1,4);

var e = x.shift ();

document.write("从数组中 shift 一个数(从最前面取)，其值是:"+ e);  //即3

document.write("<br>");

document.write("shift之后，数组变为:"+x);  //数组变为1,4

 

28.方法 sort对数组的内容进行排序

<!--分割-->

var x = new Array(3,1,4,1,5,9,2,6);

x.sort();

document.write("使用sort排序后的数组x是:"+x);  //数组x是:1,1,2,3,4,5,6,9

 

29.自定义排序算法

sort()默认采用正排序，即小的数排在前面。 如果需要采用自定义排序的算法，就把比较器函数作为参数传递给sort()。

比较器函数:

function comparator(v1,v2){

   return v2-v1;  //v2-v1表示大的放前面，小的放后面

}

调用sort函数的时候，把这个比较器函数comparator作为参数传递进去即可

<!--分割-->

function comparator(v1,v2){

   return v2-v1;

}

var x = new Array(3,1,4,1,5,9,2,6);

x.sort(comparator);

document.write("使用sort 进行自定义倒排序后的数组x是:"+x);  //进行自定义倒排序后的数组x是:9,6,5,4,3,2,1,1

 

自定义一个函数，对数组进行排序，要求排序后数组中无重复数据

function check(value,a){//检查数组里是否有相同的值

  for(i in a){

    if(value==a[i])

       return true;

  }

  return false;

}

function removeDuplicate(a){//移除相同的值

var result =new Array();  //新建一个数组result

while(a.l<!--分割-->h!=0){//当数组里有相同的值时，删除它后一个相同的值

   var v = a.pop();

   console.log(v);  //web控制台输出v

   if( !check(v,a) ){ //当数组里没有相同的值时(即check()如果返回false),！号就是"取非"

     result.push(v); //往数组result最后的位置插入数据

   }

}

return result;

}

var x = new Array(1,3,4,5,7,7,4,5,6,7,7);

x = removeDuplicate(x);

x.sort();

document.write("使用sort排序后的无重复数据的数组x是:"+x);  //得到无重复数据的数组x是:1,3,4,5,6,7

 

30.方法 reverse，对数组的内容进行反转

<!--分割-->

var x = new Array(3,1,4,1,5,9,2,6);

x.reverse();

document.write("使用reverse()函数进行反转后的值是:"+x);  //函数进行反转后的值是:6,2,9,5,1,4,1,3

 

31.方法 slice 获取子数组

<!--分割-->

var x = new Array(3,1,4,1,5,9,2,6);

var y = x.slice(1);

document.write("x.slice(1)获取的子数组是:"+y); //1,4,1,5,9,2,6即数组位置为1后面的所有数包括位置1

document.write("<br>");

var z = x.slice(1,3);

document.write("x.slice(1,3)获取的子数组是:"+z);  //获取的子数组是:1,4  

//注意：第二个参数取不到(即取得到数组位置为1至数组位置为3之间的数但不包括位置3)

 

32.方法 splice (不是 slice) 用于删除数组中的元素,奇葩的是 ，它还能用于向数组中插入元素

<!--分割-->

var x = new Array(3,1,4,1,5,9,2,6);

x.splice (3,2);//从位置3开始 ，删除2个元素

document.write("x.splice (3,2) 表示从位置3开始 ，删除2个元素:"+x);  //得到3,1,4,9,2,6

document.write("<br/>");

x.splice(3,0,1,5); //从位置3开始，删除0个元素，但是插入1和5

document.write("x.splice(3,0,1,5) 从位置3开始，删除0个元素，但是插入1和5,最后得到:"+x); //得到3,1,4,1,5,9,2,6

 

33.通过new Date创建一个日期对象，这个对象就表示当前日期(现在)

<!--分割-->

var d = new Date();

document.write('new Date():'+d);

 

34.分别获取年/月/日,需要注意的是，getMonth()返回的月数，是基零的，0代表1月份

<!--分割-->

  var d = new Date();

  document.write('分别获取年月日: ');

  document.write(d.getFullYear());  //获取年份

  document.write("/");

  document.write(d.getMonth()+1);  //获取月份

  document.write("/");

  document.write(d.getDate());  //获取日

 

35.获取时:分:秒:毫秒

<!--分割-->

  var d = new Date();

  document.write("分别获取时:分:秒:毫秒 ");

  document.write(d.getHours());  //时

  document.write(":");

  document.write(d.getMinutes());  //分

  document.write(":");

  document.write(d.getSeconds());  //秒

  document.write(":");

  document.write(d.getMilliseconds());  //毫秒

 

36.通过getDay()获取，今天是本周的第几天,与getMonth()一样，返回值是基0的。

<!--分割-->

var day=new Date().getDay(); //通过日期对象获取数字形式的星期几

var weeks = new Array("星期天","星期一","星期二","星期三","星期四","星期五","星期六");

document.write("今天是 ： "+weeks[day]);

 

37.获取从1970/1/1 08:00:00 至今的毫秒数

<!--分割-->

var time = new Date().getTime();

document.write("从1970/1/1 08:00:00 到今天的毫秒数： "+ time);

 

38.修改日期和时间

<!--分割-->

var d=new Date();  //当前日期

d.setFullYear(2012); //修改年份

d.setMonth(11); //月份时基0的，所以11表示12月

d.setDate(12);   //日

d.setHours(0);   //时

d.setMinutes(0);  //分

d.setSeconds(0); //秒

document.write(d);  //把日期对象设置为2012/12/12 00:00:00

 

39.javascript Math对象详解

a. 自然对数和圆周率

属性E和PI，分别表示自然对数和圆周率PI

<!--分割-->

document.write(Math.E);

document.write("<br>");

document.write(Math.PI);

 

b.方法 abs 取绝对值

<!--分割-->

document.write(Math.abs(-1));

 

c.方法 min和max 分别取最小值，最大值

<!--分割-->

document.write(Math.min(1,100));

document.write("<br>");

document.write(Math.max(1,100));

 

d.方法 pow 求一个数的n次方 (求幂 )

<!--分割-->

document.write(Math.pow(3,3)); //3的立方，即27

 

e.方法 round,小数四舍五入取整

<!--分割-->

document.write(Math.round(3.4));

document.write("<br>");

document.write(Math.round(3.5));

 

f.方法 random 取0-1之间的随机数

<!--分割-->

document.write(Math.random()); //0-1 之间的随机数

document.write(Math.round(Math.random() *5)+5 ); //5-10之间的随机整数，（0~1）*5=0~5，（0~5）+5=5~10

取十个 5-10 之间的随机数

for(i=0;i<10;i++){

document.write(Math.round(Math.random() *5)+5 ); //5-10之间的随机整数

}

40.javascript 设计自定义对象

a.通过new Object()创建一个对象

var hero = new Object();

hero.name = "盖伦"; //定义一个属性name，并且赋值

hero.kill = new function(){

  document.write(hero.name + " 正在杀敌" ); //定义一个函数kill

}

hero.kill(); //调用函数kill

 

b.通过function设计一个对象

通过new Object创建对象有个问题，就是每创建一个对象，都得重新定义属性和函数。这样代码的重用性不好

那么，才用另一种方式，通过function设计一种对象。 然后实例化它 。

这种思路很像Java里的设计一种类，但是 javascript没有类，只有对象，所以我们叫设计一种对象

<!--分割-->

function Hero(name){

  this.name = name;

  this.kill = function(){

     document.write(this.name + "正在杀敌<br>");

  }

}

var gareen = new Hero("盖伦");

gareen.kill();

var teemo = new Hero("提莫");

teemo.kill();

 

c.为已经存在的对象，增加新的方法

对设计好的Hero对象追加一个新的方法k<!--分割-->),需要通过prototype实现这一点

<!--分割-->

function Hero(name){

  this.name = name;

  this.kill = function(){

     document.write(this.name + "正在杀敌<br>");

  }

}

var gareen = new Hero("盖伦");

gareen.kill();  

var teemo = new Hero("提莫");

teemo.kill();

Hero.prototype.k<!--分割-->= function(){

  document.write(this.name + "正在坑队友<br>");

}

gareen.k<!--分割-->);

teemo.k<!--分割-->);

 

41.BOM即 浏览器对象模型(Brower Object Model)

浏览器对象包括:

Window(窗口)

Navigator(浏览器)

Screen (客户端屏幕)

History(访问历史)

Location(浏览器地址)

 

42.Window对象

a.获取文档显示区域的高度和宽度

一旦页面加载，就会自动创建window对象，所以无需手动创建window对象。

通过window对象可以获取文档显示区域的高度和宽度

<!--分割-->

document.write("文档显示区域的宽度"+window.innerWidth);

document.write("<br>");

document.write("文档显示区域的高度"+window.innerH<!--分割-->t);

 

b.获取外部窗体的宽度和高度

所谓的外部窗体即浏览器，可能用的是360，火狐，IE, Chrome等等。

document.write("浏览器的宽度:"+window.outerWidth);

document.write("<br>");

document.write("浏览器的高度:"+window.outerH<!--分割-->t);

 

c.打开一个新的窗口

碰到一些网站会自动打开另一个网站，那么是怎么做到的呢?

就是通过window的open方法做到的

但不建议使用，如果需要打开一个新的网站，应该通过超级链接等方式让用户主动打开，在没有告知用户的前提下就打开一个新的网站会影响用户的体验

<!--分割-->

<script>

function openNewWindow(){

  myWindow=window.open("/");

}

</script>

<button onclick="openNewWindow()">打开一个新的窗口</button>

 

43.Navigator对象(即浏览器对象，提供浏览器相关的信息 )

打印浏览器相关信息

<!--分割-->

document.write("<p>浏览器产品名称：");

document.write(navigator.appName + "</p>");

 

document.write("<p>浏览器版本号：");

document.write(navigator.appVersion + "</p>");

 

document.write("<p>浏览器内部代码：");

document.write(navigator.appCodeName + "</p>");

 

document.write("<p>操作系统：");

document.write(navigator.platform + "</p>");

 

document.write("<p>是否启用Cookies：");

document.write(navigator.cookieEnabled + "</p>");

 

document.write("<p>浏览器的用户代理报头：");

document.write(navigator.userAgent + "</p>");

 

44.Screen对象(表示用户的屏幕相关信息 )

返回用户的屏幕大小，以及可用屏幕大小

如果是在台式电脑上，通常看到的可用区域的高度会比屏幕高度小一点，因为有任务栏的存在。

<!--分割-->

document.write("用户的屏幕分辨率: ")

document.write(screen.width + "*" + screen.h<!--分割-->t);

document.write("<br />");

document.write("可用区域大小: ");

document.write(screen.availWidth + "*" + screen.availH<!--分割-->t);

document.write("<br />");

 

45.History对象(用于记录访问历史 )

a.返回"上一次"的访问

<!--分割-->

function goBack()

  {

     history.back();

  }

 

b.返回"上上次"的访问

<!--分割-->

function goBack()

  {

     history.go(-2); //-1表示上次，-2表示上上次，以次类推

  }

 

46. Location对象(表示浏览器中的地址栏 )

a.reload方法刷新当前页面

<!--分割-->

<span>当前时间:</span>

<script>

  var d = new Date();

  document.write(d.getHours());

  document.write(":");

  document.write(d.getMinutes());

  document.write(":");

  document.write(d.getSeconds());

  document.write(":");

  document.write(d.getMilliseconds());

 

function refresh(){

  location.reload();    //刷新当前页面

}

</script>

<br>

<button onclick="refresh()">刷新当前页面</button>

 

b.跳转到另一个页面

<!--分割-->

<script>

function jump(){

  //方法1

  //location="/";

 

  //方法2

  location.assign("/");

   

}

</script>

<br>

<button onclick="jump()">跳转到首页</button>

 

c.Location的其他属性

<!--分割-->

document.write("协议 location.protocol:"+location.protocol);

document.write("主机名 location.hostname:"+location.hostname);

document.write("端口号 (默认是80，没有即表示80端口)location.port:"+location.port);

document.write("主机加端口号 location.host:"+location.host);

document.write("访问的路径  location.pathname:"+location.pathname);

document.write("锚点 location.hash:"+location.hash);

document.write("参数列表 location.search"+location.search);

 

47.javascript 弹出框

浏览器上常见的弹出框有

警告框，确认框，提示框 这些都是通过调用window的方法实现的。

比如警告框用的是window.alert("警告内容")，因为很常用，所以就把window省略掉，直接使用alert

a.警告框

警告框 alert，常用于消息提示，比如注册成功等等

<!--分割-->

function register(){

   alert("注册成功");

}

 

b.确认框

确认框 confirm，常用于危险性操作的确认提示。 比如删除一条记录的时候，弹出确认框

conform返回基本类型的Boolean true或者false

<!--分割-->

function del(){

var d = confirm("是否要删除");

alert(typeof d + " " + d);

}

 

c. 输入框

输入框 prompt，用于弹出一个输入框，供用户输入相关信息。 因为弹出的界面并不好看，很有可能和网站的风格不一致，所以很少会在实际工作中用到。

function p(){

var name = prompt("请输入用户名:");

alert("您输入的用户名是:" + name);

}

 

48. javascript 计时器

a.计时器只执行一次

函数setTimeout(functionname, 距离开始时间毫秒数 );

通过setTimeout在制定的毫秒数时间后，执行一次 函数functionname

<!--分割-->

<script>

function printTime(){  //打印当前时间

  var d = new Date();

  var h= d.getHours();

  var m= d.getMinutes();

  var s= d.getSeconds();

  document.getElementById("time").innerHTML= h+":"+m+":"+s;  //document.getElementById 获取id=time的div元素 ,.innerHTML 修改该元素的内容

}

function showTimeIn3Seconds(){//在3秒钟后，打印当前时间并且只显示一次

   setTimeout(printTime,3000);  

}

</script>

<div id="time"></div>

<button onclick="showTimeIn3Seconds()">点击后3秒钟后显示当前时间，并且只显示一次</button>

 

b. 计时器不停地重复执行

函数setInterval(函数名, 重复执行的时间间隔毫秒数 );

通过setInterval重复执行同一个函数，重复的时间间隔由第二个参数指定

<!--分割-->

<p>每隔1秒钟，打印当前时间</p>

<div id="time"></div>  

<script>  

function printTime(){

  var d = new Date();

  var h= d.getHours();

  var m= d.getMinutes();

  var s= d.getSeconds();

  document.getElementById("time").innerHTML= h+":"+m+":"+s;

   

}

var t = setInterval(printTime,1000);

</script>

 

c.终止重复执行

通过clearInterval终止一个不断重复的任务

<!--分割-->当秒是5的倍数的时候，就停止执行

<p>每隔1秒钟，打印当前时间</p>   

<div id="time"></div>

<script>

var t = setInterval(printTime,1000);

function printTime(){

  var d = new Date();

  var h= d.getHours();

  var m= d.getMinutes();

  var s= d.getSeconds();

  document.getElementById("time").innerHTML= h+":"+m+":"+s;

  if(s%5==0)

     clearInterval(t);

}

</script>

 

d. 不要在setInterval调用的函数中使用document.write();

注：部分浏览器，比如firefox有这个问题，其他浏览器没这个问题。

假设setInterval调用的函数是printTime, 在printTime中调用document.write();  只能看到一次打印时间的效果。

这是因为document.write，会创建一个新的文档，而新的文档里，只有打印出来的时间字符串，并没有setInterval这些javascript调用，所以只会看到执行一次的效果。

<!--分割-->

<p>每隔1秒钟，通过document.write打印当前时间</p>

<script>

function printTime(){

  var d = new Date();

  document.write(d.getHours());

  document.write(":");

  document.write(d.getMinutes());

  document.write(":");

  document.write(d.getSeconds());

  document.close();

}

var t = setInterval(printTime,1000);

</script>