JavaScript_在javascripe语句执行中有几种结构，并解释-CSDN博客

本文链接：https://blog.csdn.net/yloveyzcl/article/details/82529196

1.1 语言基础

1.1.1 Hello JavaScript

通过javascript向文档中输出文本

document.write("Hello Javascript");

</script>

javascript和DOM结合的一个简单例子

οnclick="..." 表示点击button之后做的事情
document.getElementById 根据id获取指定的元素
.style.display='none' 隐藏
.style.display='block' 显示(准确的讲，以block的形式显示)

<p id="text"> 这个是一段可以被javascript隐藏的文本</p>

语言基础，BOM和DOM

完整的javascript由语言基础，BOM和DOM组成。

1.1.2 script标签

javascript代码必须放在script标签中
script标签可以放在html的任何地方，一般建议放在head标签里

使用外部js文件

Hello.js

document.write("hello JavaScript");

html文件里

1.1.3 注释

单行注释

// 单行注释

多行注释

进行

多行注释

1.1.4 变量

使用var声明一个变量

var i=10;

document.write(i);

</script>

变量类型判断

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

var x;

document.write('声明了但是未赋值的时候，类型是： '+typeof x);

document.write("<br>");

x=5;

document.write('赋值为5之后，类型是： '+typeof x);

document.write("<br>");

x=5.1;

document.write('赋值为5.1之后，类型是： '+typeof x);

document.write("<br>");

x=true;

document.write('赋值为true之后，类型是： '+typeof x);

document.write("<br>");

x="hello";

document.write('赋值为hello之后，类型是： '+typeof x);

</script>

1.1.5 类型转换

伪对象

伪对象概念：javascript是一门很有意思的语言，即便是基本类型，也是伪对象，所以他们都有属性和方法。
变量a的类型是字符串，通过调用其为伪对象的属性length获取其长度

var a="hello javascript";

document.write("变量a的类型是:"+(typeof a));

document.write("<br>");

document.write("变量a的长度是:"+a.length);

</script>

转换为字符串

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

var a=10;

document.write("数字 "+a+" 转换为字符串"+a.toString());

document.write("<br>");

var b=true;

document.write("布尔 "+b+" 转换为字符串"+b.toString());

document.write("<br>");

var c="hello javascript";

document.write("字符串 "+c+" 转换为字符串 "+c.toString());

document.write("<br>");

</script>

转换为数字

javascript分别提供内置函数 parseInt()和parseFloat()，转换为数字
注：如果被转换的字符串，同时由数字和字符构成，那么parseInt会一直定位数字，直到出现非字符。所以"10abc" 会被转换为 10
思考题: 字符串"10abc8" 又会被转换为多少呢？

document.write("字符串的\"10\"转换为数字的:"+parseInt("10")); //转换整数

document.write("<br>");

document.write("字符串的\"3.14\"转换为数字的:"+parseFloat("3.14"));//转换浮点数

document.write("<br>");

document.write("字符串的\"10abc\"转换为数字的:"+parseInt("10abc")); //判断每一位，直到发现不是数字的那一位

document.write("<br>");

document.write("字符串的\"hello javascript\"转换为数字的:"+parseInt("hello javascript")); //如果完全不包含数字，则返回NaN - Not a Number

document.write("<br>");

</script>

转换为Boolean

使用内置函数Boolean() 转换为Boolean值
当转换字符串时：
非空即为true
当转换数字时：
非0即为true
当转换对象时：
非null即为true

document.write("空字符串''转换为布尔后的值:"+Boolean("")); //空字符串

document.write("<br>");

document.write("非空字符'hello javascript '串转换为布尔后的值:"+Boolean("hello javascript")); //非空字符串

document.write("<br>");

document.write("数字 0 转换为布尔后的值:"+Boolean(0)); //0

document.write("<br>");

document.write("数字 3.14 转换为布尔后的值:"+Boolean(3.14)); //非0

document.write("<br>");

document.write("空对象 null 转换为布尔后的值:"+Boolean(null)); //null

document.write("<br>");

document.write("非空对象 new Object() 转换为布尔后的值:"+Boolean(new Object())); //对象存在

document.write("<br>");

</script>

Number()和parseInt()的区别

Number()和parseInt()一样，都可以用来进行数字的转换
区别在于，当转换的内容包含非数字的时候，Number() 会返回NaN(Not a Number)
parseInt() 要看情况，如果以数字开头，就会返回开头的合法数字部分，如果以非数字开头，则返回NaN

document.write("通过Number() 函数转换字符串'123' 后得到的数字："+Number("123")); //正常的

document.write("<br>");

document.write("通过Number() 函数转换字符串'123abc' 后得到的数字："+Number("123abc")); //包含非数字

document.write("<br>");

document.write("通过Number() 函数转换字符串'abc123' 后得到的数字："+Number("abc123")); //包含非数字

document.write("<br>");

document.write("通过parseInt() 函数转换字符串'123' 后得到的数字："+parseInt("123")); //正常的

document.write("<br>");

document.write("通过parseInt() 函数转换字符串'123abc' 后得到的数字："+parseInt("123abc")); //包含非数字,返回开头的合法数字部分

document.write("<br>");

document.write("通过parseInt() 函数转换字符串'abc123' 后得到的数字："+parseInt("abc123")); //包含非数字,以非数字开头，返回NaN

document.write("<br>");

</script>

String()和toString()的区别

String()和toString()一样都会返回字符串，区别在于对null的处理
String()会返回字符串"null"
toString() 就会报错，无法执行

var a = null;

document.write('String(null) 把空对象转换为字符串：'+String(a));

document.write("<br>");

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

document.write(a.toString());

document.write("因为第5行报错，所以这一段文字不会显示");

</script>

1.1.6 函数

function关键字用于定义一个函数
print即函数的名称
()表示参数列表，像这样就指没有参数
{ 表示函数开始
} 表示函数结束
光有函数的定义，还不够，它不会自动执行，还需要进行第5行的调用

function print(){

document.write("这一句话是由一个自定义函数打印");

}

print();

</script>

带参数的函数

function print(message){

document.write(message);

}

print("第一句话");

print("<br>");

print("第二句话");

</script>

带返回值的函数

自定义一个calc函数，用于计算两个参数的和，并通过return 返回计算结果

function print(message){

document.write(message);

}

function calc(x,y){

return x+y;

}

var sum = calc(500,20);

print(sum);

</script>

练习-计算器

<style>

input{

width:50px;

}

</style>

function calc(){

var num1= document.getElementById("num1").value;

var num2= document.getElementById("num2").value;

num1 = parseFloat(num1);

num2 = parseFloat(num2);

var result = num1+num2;

document.getElementById("result").value=result;

}

</script>

<input type="text" id="num1"> +

1.1.7 作用域

参数的作用域

一个参数的作用域就在这个函数内部，超出函数就看不见该参数了

function f1(a){

document.write('参数的作用域在函数以内，其值是 '+a);//参数a的作用范围，所以打印出来是5；

}

function f2(){

document.write('在函数里不能访问其他函数的参数'+a); //不在参数a的作用范围，是一个未声明的变量，无法打印

}

f1(5);

f2();

document.write('在函数外也不能访问'+a);//也不在参数a的作用范围，是一个未声明的变量，无法打印

</script>

全局变量的作用域

var a = 0; //定义在函数前面，即全局变量，所有函数都可以访问

function f1(){

document.write('通过函数f1 设置全局变量a的值为 5');

a = 5; //能够访问

}

function f2(){

document.write('通过函数f2 访问并打印全局变量a的值 '+a); //能够访问

}

f1(); //通过f1，设置a的值

document.write('<br>');

f2(); //通过f2, 打印a的值

</script>

1.1.8 事件

事件是javascript允许html与用户交互的行为。用户任何对网页的操作，都会产生一个事件。
事件有很多种，比如鼠标移动，鼠标点击，键盘点击等等。
本例演示当一个按钮被点击的时候，弹出一个对话框

鼠标点击事件

首先定义一个函数 showHello，被调用的时候，弹出一个对话框"Hello JavaScript";
接着准备一个button元素,在button元素上增加一个属性
property是onclick,表示点击的时候触发
value是showHello()，调用showHello()函数

function showHello(){

alert("Hello JavaScript");

}

</script>

1.1.9 算数运算符

基本算数运算符

基本算数运算符和小学中学习的没有任何区别
+ - * / %（取余数）

function p(s){

document.write(s);

document.write("<br>");

}

p("1+2="+ (1+2));

p("5-3="+ (5-3));

p("3*2="+ (3*2));

p("9/3="+ (9/3));

p("10%3="+ (10%3));

</script>

自增，自减运算符

自增++在原来的基础上，增加 1.
需要注意的是
如果 ++放在前面，就是 先运算，后取值 。
如果 ++放在后面，就是 先取值，后运算。
自减 -- 是一个道理。

var a = 5;

document.write('a++ 是先取值，再运算，所以打印出来是：'+a++); //先取值，即5

document.write("<br>");

var b = 5;

document.write('++b 是先运算，再取值，所以打印出来是：'+ ++b); //先运算，再取值，即6

</script>

赋值运算符

=，+=，-=，*=，/=，%=
x=5 是最基本的赋值运算符，即把右边的值，赋给左边的变量x。
x+=y, 表示 x=x+y。
其他都是一个道理。

x = 5;

x+= 6;

document.write('x+=6就是 x=x+6的意思，所以最后的值就等于: '+x);

</script>

+运算符的多态

+ 具备多态特征
当两边都是数字的时候，表现为算数运算符
当任意一边是字符串的时候，表现为字符串连接符

document.write('当+两边都是数字的时候，+就是加法运算符，所以1+2='+(1+2));

document.write("<br>");

document.write('当+任意一边是字符串的时候，+就是字符串连接符，所以1+\"2\"='+ (1+"2"));

</script>

1.1.10 逻辑运算符

基本逻辑运算符

基本逻辑运算符包含如下：
==
!=
>
>=
返回一个Boolean类型的值，true或者false

function p(s){

document.write(s);

document.write("<br>");

}

p("1==2: "+(1==2));

p("1!=2: "+(1!=2));

p("1>2: "+(1>2));

p("1<2: "+(1<2));

p("1>=2: "+(1>=2));

</script>

绝对等，绝对不等于

与==进行值是否相等的判断不同，绝对等 ===还会进行类型的判断
比如数字1和字符串'1'比较，值是相等的，但是类型不同
所以==会返回true,但是===会返回false
绝对不等于!== 与上是一个道理

function p(s){

document.write(s);

document.write("<br>");

}

p("1=='1': "+(1=='1'));

p("1==='1': "+(1==='1'));

</script>

三目运算符

三目运算符 ?: 有三个操作数
如果第一个返回true,就返回第二个操作符
否则就返回第三个操作符。

var age = 15;

var movie = age<18?"卡通":"你懂的";

document.write('使用?: 三相运算法进行判断。 <br>');

document.write('age<18?"卡通":"你懂的" <br>表示当年纪小于18的时候，就看卡通，否则就看你懂得<br>');

document.write('而age变量的值是15，所以返回 '+movie);

</script>

1.1.11 条件语句

条件成立时执行

if条件一定是一个Boolean类型的值，当为true时，执行对应的语句

var age = 15;

if(age<18){

document.write("如果年纪小于18，就看卡通");

}

</script>

多条件判断 - else if

else if 用于多条件判断
在本例中
小于 18是一个条件
19-21 是一个条件
大于21是一个条件

var age = 20;

if(age<18){

document.write("小于18就看卡通");

}

else if(age<22){

document.write("大于等于18，并且小于22，就看你懂的");

}

else{

document.write("大于等于22就看新闻联播");

}

</script>

多条件判断 – switch

switch 语句与else if一样，也是进行多条件判断的
需要注意的是，每个判断结束，都要加上break;

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

var today;

switch (day)

{

case 0:

today="星期天";

break;

case 1:

today="星期一";

break;

case 2:

today="星期二";

break;

case 3:

today="星期三";

break;

case 4:

today="星期四";

break;

case 5:

today="星期五";

break;

case 6:

today="星期六";

break;

}

document.write("今天是： "+today);

</script>

1.1.12 循环语句

循环语句

使用 for打印0-4
注意：进行循环的时候，一定要设置好自增和结束条件，否则会导致无限循环，浏览器直接挂掉。我已经被坑了很多次了。

function p(s){

document.write(s);

document.write("<br>");

}

document.write("使用for循环打印 0 到 4<br>");

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

p(i);

}

</script>

循环语句

其实 while就是另一种形式的for
使用while打印0-4
注意：进行循环的时候，一定要设置好自增和结束条件，否则会导致无限循环，浏览器直接挂掉。我已经被坑了很多次了。

document.write("使用while循环打印 0 到 4<br>");

function p(s){

document.write(s);

document.write("<br>");

}

var i = 0;

while(i<5){

p(i);

i++;

}

</script>

循环语句，至少执行一次

其实do-while与while的区别在于，至少会执行一次
使用do-while打印0-4

function p(s){

document.write(s);

document.write("<br>");

}

document.write("使用do-while循环打印 0 到 4<br>");

var i = 0;

do{

p(i);

i++;

} while(i<5);

</script>

增强型循环语句

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

继续下一次循环

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

function p(s){

document.write(s);

document.write("<br>");

}

document.write("使用for循环打印 0 到 4<br>如果发现是3，就<span style='color:red'>放弃本次循环，并且进入下一次</span>循环<br>");

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

if(i==3)

continue;

p(i);

}

</script>

终止循环

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

function p(s){

document.write(s);

document.write("<br>");

}

document.write("使用for循环打印 0 到 4<br>如果发现是3，就<span style='color:red'>终止循环，循环体结束 </span><br>");

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

if(i==3)

break;

p(i);

}

</script>

1.1.13 错误处理

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

调用不存在的函数

在本例中故意调用不存在的函数f2, 因为函数f2不存在，所以会出错，并且会中断执行。导致后面的代码也不会执行了。

document.write("试图调用不存在的函数f2()就会报错，并且导致javascript中止执行，后面的代码也不会执行了");

function f1(){

//函数f1是存在的

}

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

document.write("剩下的代码");

</script>

try catch

对f2()调用进行try catch的处理。捕捉到了该方法未定义的错误。并打印出来。
后续的代码，也就可以继续执行了。

function f1(){

//函数f1是存在的

}

try{

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

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

}

catch(err){

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

document.write(err.message);

}

document.write("<p>因为错误被捕捉了，所以后续的代码能够继续执行</p>");

</script>

1.1.14 阶段性练习

复利公式

复利公式：
F = p* ( (1+r)^n );
F 最终收入
p 本金
r 年利率
n 存了多少年
假设情景一：
p = 10000
r = 0.05
n = 1
解读：
本金是10000
年利率是5%
存了一年 1次
复利收入 10000*( (1+0.05)^1 ) = 10500
假设情景二：
p = 10000
r = 0.05
n = 2
解读：
本金是10000
年利率是5%
存了两年
复利收入 10000*( (1+0.05)^2 ) = 11025

<style>

table{

border-collapse:collapse;

}

td{

border:1px silver solid;

padding: 5px;

font-size:12px;

}

input{

width:180px;

}

</style>

/*取幂函数*/

function p(base, power){

if(1==power)

return base

if(0==power)

return 1;

var result = base;

for(var i = 0; i<power-1; i++){

result = result*base;

}

return result;

}

/*取复利*/

function fuli(rate, year){

var result = 0;

for(var i=year;i>0;i--){

result+=p(rate,i);

}

return result;

}

function calc(){

var initMoney= getIntValue("initMoney");

var rate= getIntValue("rate");

var year= getIntValue("year");

var each= getIntValue("each");

var sum1 = (year-1)*each+initMoney;

var sum3=each* fuli( (1+rate/100),(year-1)) + initMoney*p( (1+rate/100) ,year);

var sum2 = sum3-sum1;

setValue("sum1",sum1);

setValue("sum2",sum2);

setValue("sum3",sum3);

}

function setValue(id,value){

document.getElementById(id).value=value;

}

function getIntValue(id){

return parseInt(document.getElementById(id).value);

}

</script>

<table>

<tr>

<tr>

</tr>

<tr>

</tr>

<tr>

<td>每年追加资金</td>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

1.2 对象

1.2.1 数字

JavaScript中的对象是有着属性和方法的一种特殊数据类型。
常见的对象有数字Number，字符串String，日期Date，数组Array等。
本章节从数字对象开始讲起
注: 这里讲的Number是对象Number,和基本数据类型中的基本类型Number是不一样的Number。

创建一个数字对象

可以通过new Number()创建一个数字对象
与基本类型的数字不同，对象类型的数字，拥有更多的属性和方法
接下来就会讲解各种属性和方法

var x = new Number(123);

document.write('数字对象x的值:'+x);

document.write("<br>");

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

document.write("<br>");

var y = 123;

document.write('基本类型y的值:'+y);

document.write("<br>");

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

</script>

最小值最大值

Number对象能够取到的最大和最小边界

document.write('Number对象的最小值:'+Number.MIN_VALUE);

document.write("<br>");

document.write('Number对象的最大值:'+Number.MAX_VALUE);

</script>

表示不是数字

NaN(Not a Number),表示不是一个数字
当通过非数字创建Number的时候，就会得到NaN.
注意：不能通过是否等于Number.NaN来判断是否 “不是一个数字”，应该使用函数 isNaN()

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返回一个数字的小数表达

function p(s){

document.write(s);

document.write("<br>");

}

var a = new Number("123");

p("数字对象123通过toFixed(2) 保留两位小数:"+a.toFixed(2)); //保留两位小数点

var b = new Number("3.1415926");

p("PI 通过toFixed(3) 保留三位小数:"+b.toFixed(3));//保留三位小数点

</script>

返回一个数字的科学计数法表达

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

function p(s){

document.write(s);

document.write("<br>");

}

var a = new Number("123");

p("数字对象123通过toExponential 返回计数法表达 "+a.toExponential ());

var b = new Number("3.1415926");

p("数字对象3.1415926通过toExponential 返回计数法表达 "+b.toExponential ());

</script>

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

方法 valueOf() 返回一个基本类型的数字
通过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>

1.2.2 字符串

创建字符串对象

与Number类似的，可以通过new String()创建一个String对象

var x = "5";

var y = new String(x);

document.write("变量x的值是:"+x);

document.write("<br>");

document.write("变量x的类型是:"+(typeof x));

document.write("<br>");

document.write("变量y的值是:"+y);

document.write("<br>");

document.write("变量y的类型是:"+(typeof y));

document.write("<br>");

</script>

字符串长度

属性 length 返回字符串的长度

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

document.write("通过.length属性获取字符串'Hello JavaScript'的长度"+y.length);

</script>

返回指定位置的字符

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

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

document.write("字符串y的值:"+y);

document.write("<br>");

document.write('通过 charAt(0)获取位置0的字符串： '+y.charAt(0)); //返回H

document.write("<br>");

document.write('通过 charCodeAt(0)获取位置0的字符的 Unicode码：'+y.charCodeAt(0)); //返回H对应的Unicode码 72

</script>

字符串拼接

concat用于进行字符串拼接

var x = new String("Hello ");

var y = new String("Javascript");

document.write( '字符串x的值: '+x);

document.write('<br>');

document.write( '字符串y的值: '+y);

document.write('<br>');

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

</script>

子字符串出现的位置

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

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

document.write( '字符串y的值: '+y);

document.write('<br>');

document.write('通过 indexOf ("a")获取子字符"a" 第一次出现的位置 '+y.indexOf ("a"));

document.write('<br>');

document.write('通过 lastIndexOf ("a")获取子字符"a" 最后出现的位置 '+y.lastIndexOf ("a"));

</script>

比较两段字符串是否相同

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

var x = new String("Hello");

var y = new String("Hello");

var z = new String("aloha");

document.write( '字符串x的值: '+x);

document.write('<br>');

document.write( '字符串y的值: '+y);

document.write('<br>');

document.write( '字符串z的值: '+z);

document.write('<br>');

document.write('通过 localeCompare()判断 x和y是否相等 '+x.localeCompare(y));

document.write('<br>');

document.write('通过 localeCompare()判断 x和z是否相等 '+x.localeCompare(z));

document.write('<br>');

document.write('0 表示相等<br>');

document.write('1 表示字母顺序靠后<br>');

document.write('-1 表示字母顺序靠前<br>');

</script>

截取一段子字符串

substring 截取一段子字符串
注：第二个参数，取不到

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

document.write( '字符串x的值: '+x);

document.write('<br>');

document.write('x.substring (0,3) 获取位0到3的字符串： '+x.substring (0,3) );

document.write('<br>');

document.write('左闭右开，取得到0，取不到3');

</script>

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

split 根据分隔符，把字符串转换为数组。
注：第二个参数可选，表示返回数组得长度

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

document.write( '字符串x的值: '+x);

document.write('<br>');

var y = x.split(" ");

document.write('通过空格分隔split(" "),得到数组'+y);

document.write("<br>");

var z = x.split(" ",2);

document.write('通过空格分隔split(" ",2),得到数组，并且只保留前两个'+z);

</script>

替换子字符串

replace(search,replacement)
找到满足条件的子字符串search，替换为replacement
注: 默认情况下只替换找到的第一个子字符串，如果要所有都替换，需要写成：

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

或者

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

x.replace(regS, "o");

function p(s){

document.write(s);

document.write("<br>");

}

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

p('这个是原字符串: '+x);

var y = x.replace("a","o");

p('只替换第一个 a: '+y);

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

var z = x.replace(regS, "o");

p('替换掉所有的 a: '+z);

</script>

返回基本类型

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

function p(s){

document.write(s);

document.write("<br>");

}

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

var temp = x.charAt(0);

p('charAt返回的值'+temp);

p('其类型是'+ typeof temp );

var temp = x.concat("!!!");

p('concat返回的值'+temp);

p('其类型是'+ typeof temp );

var temp = x.substring(0,5);

p('substring返回的值'+temp);

p('其类型是'+ typeof temp );

</script>

1.2.3 数组

javascript中的数组是动态的，即长度是可以发生变化的。

创建数组对象

创建一个数组对象
创建数组对象的3种方式：
1. new Array() 创建长度是0的数组
2. new Array(5); 创建长度是5的数组,，但是其每一个元素都是undefine
3. new Array(3,1,4,1,5,9,2,6); 根据参数创建数组

function p(s,v){

document.write(s+' '+v);

document.write("<br>");

}

var x = new Array(); //创建长度是0的数组

p('通过 new Array()创建一个空数组:',x);

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

p('通过 new Array(5)创建一个长度是5的数组:',x);

p('像new Array(5) 这样没有赋初值的方式创建的数组，每个元素的值都是:',x[0]);

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

p('创建有初值的数组new Array(3,1,4,1,5,9,2,6) :',x);

</script>
数组长度

属性length 获取一个数组的长度

function p(s){

document.write(s);

document.write("<br>");

}

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

p('当前数组是:'+x);

p('通过.length获取当前数组的长度:'+x.length);

</script>

遍历一个数组

遍历有两种方式
1.结合for循环，通过下标遍历
2.使用增强for in循环遍历
需要注意的是，在增强for in中，i是下标的意思。

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

p(x[i]);

}

function p(s){

document.write(s);

document.write("<br>");

}

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

p('当前数组是:'+x);

p("使用普通的for循环遍历数组");

for(i=0;i<x.length;i++){ //普通for循环

p(x[i]);

}

p("使用增强for循环遍历数组");

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

p(x[i]);

}

</script>

连接数组

方法 concat 连接两个数组

function p(s){

document.write(s);

document.write("<br>");

}

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

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

p('数组x是:'+x);

p('数组y是:'+y);

var z = x.concat(y);

p('使用concat连接数组x和y');

p('数组z是:'+z);

</script>

通过指定分隔符，返回一个数组的字符串表达

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

function p(s){

document.write(s);

document.write("<br>");

}

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

p('数组x是:'+x);

var y = x.join();

p('y = x.join() 得到的是数组x的字符串表达，其值是'+y+" 其类型是 :" +(typeof y));

var z = x.join("@");

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

</script>

分别在最后的位置插入数据和获取数据(获取后删除)

方法 push pop,分别在最后的位置插入数据和获取数据(获取后删除)
就像先入后出的栈一样

function p(s){

document.write(s);

document.write("<br>");

}

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

p('数组x是:'+x);

x.push(5);

p('向x中push 5,得到 ' + x);

var e = x.pop();

p('从x中pop一个值出来，其值是 ' + e);

p('pop之后，x数组的值是:'+x);

</script>

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

方法 unshift shift ,分别在最开始的位置插入数据和获取数据(获取后删除)

function p(s){

document.write(s);

document.write("<br>");

}

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

p('数组x是:'+x);

x.unshift (5);

p('对数组 unshift 值5(在最前面加)，数组变为:' + x);

var e = x.shift ();

p('从数组中 shift 一个数(从最前面取)，其值是:' + e);

p('shift之后，数组变为:' + x);

</script>

对数组的内容进行排序

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

function p(s){

document.write(s);

document.write("<br>");

}

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

p('数组x是:'+x);

x.sort();

p('使用sort排序后的数组x是:'+x);

</script>

自定义排序算法

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

function comparator(v1,v2){

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

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

x.sort(comparator);

function p(s){

document.write(s);

document.write("<br>");

}

function comparator(v1,v2){

return v2-v1;

}

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

p('数组x是:'+x);

x.sort(comparator);

p('使用sort 进行自定义倒排序后的数组x是:'+x);

</script>

对数组的内容进行反转

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

function p(s){

document.write(s);

document.write("<br>");

}

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

p('数组x是:'+x);

x.reverse();

p('使用reverse()函数进行反转后的值是:'+x);

</script>

获取子数组

方法 slice 获取子数组
注意：第二个参数取不到

function p(s){

document.write(s);

document.write("<br>");

}

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

p('数组x是:'+x);

var y = x.slice(1);

p('x.slice(1)获取的子数组是:'+y);

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

p('x.slice(1,3)获取的子数组是:'+z);

p('第二个参数取不到');

</script>

删除和插入元素

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

function p(s){

document.write(s);

document.write("<br>");

}

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

p('数组x是:'+x);

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

p('x.splice (3,2) 表示从位置3开始，删除2个元素:'+x);

x.splice(3,0,1,5);

p('x.splice(3,0,1,5) 从位置3开始，删除0个元素，但是插入1和5,最后得到:'+x);

</script>

1.2.4 日期

创建日期对象

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

var d = new Date();

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

</script>

年/月/日

分别获取年/月/日
需要注意的是，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());

</script>

时:分:秒:毫秒

分别获取时:分:秒:毫秒

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

</script>

一周的第几天

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

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

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

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

</script>

经历的毫秒数

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

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

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

</script>

修改日期和时间

把日期对象设置为2012/12/12 00:00:00

var d=new Date();

document.write("修改日期对象的值为世界末日:<br>");

d.setFullYear(2012);

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

d.setDate(12);

d.setHours(0);

d.setMinutes(0);

d.setSeconds(0);

document.write(d);

</script>

1.2.5 Math

Math是JavaScript的工具对象，用于常见的数学运算

自然对数和圆周率

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

document.write(Math.E);

document.write("<br>");

document.write(Math.PI);

</script>

绝对值

方法 abs 取绝对值

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

</script>

最小最大

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

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

document.write("<br>");

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

</script>

求幂

方法 pow 求一个数的n次方

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

</script>

四舍五入

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

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

document.write("<br>");

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

</script>

随机数

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

document.write("一个 0-1 之间的随机数 : Math.random():");

document.write("<br>");

document.write(Math.random());

document.write("<br>");

document.write("十个 5-10 之间的随机数 : Math.round(Math.random() *5)+5 ");

document.write("<br>");

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

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

document.write("<br>");

}

</script>

1.2.6 自定义对象

在JavaScript中可以自定义对象，添加新的属性，添加新的方法

通过new Object创建对象

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

var hero = new Object();

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

hero.kill = function(){

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

}

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

</script>

通过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();

</script>

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

现在Hero对象已经设计好了，但是我们发现需要追加一个新的方法keng(),那么就需要通过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.keng = function(){

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

}

gareen.keng();

teemo.keng();

</script>

1.3 BOM

1.3.1 Window

BOM即浏览器对象模型(Brower Object Model)
浏览器对象包括
Window(窗口)
Navigator(浏览器)
Screen (客户端屏幕)
History(访问历史)
Location(浏览器地址)
本章节从 Window(窗口)开始讲起

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

一旦页面加载，就会自动创建window对象，所以无需手动创建window对象。
通过window对象可以获取文档显示区域的高度和宽度

document.write("文档内容");

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

document.write("<br>");

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

</script>

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

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

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

document.write("<br>");

document.write("浏览器的高度:"+window.outerHeight);

</script>

打开一个新的窗口

有的时候，你碰到一些网站会自动打开另一个网站，那么是怎么做到的呢?
就是通过window的open方法做到的
不建议使用，如果需要打开一个新的网站，应该通过超级链接等方式让用户主动打开，在没有告知用户的前提下就打开一个新的网站会影响用户的体验

function openNewWindow(){

myWindow=window.open("/");

}

</script>

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

1.3.2 Navigator

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

</script>

1.3.3 Screen

Screen对象表示用户的屏幕相关信息

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

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

<html>

<body>

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

document.write(screen.width + "*" + screen.height)

document.write("<br />")

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

document.write(screen.availWidth + "*" + screen.availHeight)

document.write("<br />")

</script>

</body>

</html>

1.3.4 History

History用于记录访问历史

返回上一次的访问

function goBack()

{

history.back();

}

</script>

返回上上次的访问

function goBack()

{

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

}

</script>

<button οnclick="goBack()">返回上上次</button>

1.3.5 Location

Location表示浏览器中的地址栏

刷新当前页面

reload方法刷新当前页面

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 οnclick="refresh()">刷新当前页面</button>

跳转到另一个页面

function jump(){

//方法1

//location="/";

//方法2

location.assign("/");

}

</script>

<br>

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

Location的其他属性

function p(s){

document.write(s);

document.write("<br>");

}

p("协议 location.protocol:"+location.protocol);

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

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

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

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

p("锚点 location.hash:"+location.hash);

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

</script>

1.3.6 弹出框

警告框

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

function register(){

alert("注册成功");

}

</script>

<br>

确认框

确认框 confirm，常用于危险性操作的确认提示。比如删除一条记录的时候，弹出确认框
confirm返回基本类型的Boolean true或者false

function del(){

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

alert(typeof d + " " + d);

}

</script>

<br>

输入框

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

function p(){

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

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

}

</script>

<br>

<button οnclick="p()">请输入用户名</button>

1.3.7 计时器

只执行一次

函数setTimeout(functionname, 距离开始时间毫秒数 );
通过setTimeout在制定的毫秒数时间后，执行一次 函数functionname
本例在3秒钟后，打印当前时间。
解释:
document.getElementById 获取id=time的div元素
.innerHTML 修改该元素的内容

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;

}

function showTimeIn3Seconds(){

setTimeout(printTime,3000);

}

</script>

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

不停地重复执行

函数setInterval(函数名, 重复执行的时间间隔毫秒数 );
通过setInterval重复执行同一个函数，重复的时间间隔由第二个参数指定

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

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>

终止重复执行

通过clearInterval终止一个不断重复的任务
本例，当秒是5的倍数的时候，就停止执行

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

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>

<br>

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

注：部分浏览器，比如firefox有这个问题，其他浏览器没这个问题。
假设setInterval调用的函数是printTime, 在printTime中调用document.write();
只能看到一次打印时间的效果。
这是因为document.write，会创建一个新的文档，而新的文档里，只有打印出来的时间字符串，并没有setInterval这些javascript调用，所以只会看到执行一次的效果。

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

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>