我的ASP.NET学习笔记06javascript基础知识02

javascript分支结构

分支结构

根据不同的条件去执行不同的代码。

if语句

语法：

if(逻辑表达式)

{

条件成立时所需执行的代码

}

示例：

var cj = prompt("你本次考试的成绩");

if(cj<60)

{

alert("你还需要加油");

}

alert("继续努力");

简化写法

当if的{ }之中只有一条语句的时候，则可以省略大括号。

if…else语句

语法：

if(逻辑表达式)

{

条件成立时所需执行的代码

}

else

{

条件不成立时所需执行的代码

}

示例：

var cj = prompt("你本次考试的成绩");

if(cj<60)

{

alert("回家吃皮带");

}

else

{

alert("吃大餐");

}

alert("继续努力");

两段分支代码必然执行一个，也只能执行一个

if…else if…else语句

可以实现多条件的判断，但是if…else if中的代码段，只会被执行一个。从if开始到与其相连接的最后一个else或else if，我们都将其被为一组判断。在一组判断中，只有一个代码会被执行。也就是第一个满足条件的代码段。

示例：

var cj = prompt("你本次考试的成绩");

if(cj>95 && cj<=100)

{

alert("带你们去买新手机");

}

else if(cj>75 && cj<=95)

{

alert("下馆子，吃大餐");

}

else if(cj>=60 && cj<=75)

{

alert("老实家里蹲");

}

else if(cj>=0 && cj<60)

{

alert("吃皮带");

}

else

{

alert("你输入的成绩有误");

}

注意：else选项可以省略不写，其意义是执行所有条件都不成立时所需要执行的代码

小练习：

根据一个家庭的收入情况判断生活水平。从输入框输入月收入水平，0-1300低保户，1300-2500挣扎中生存线上，2500-4000温饱，4000-7000小康之家，7000-15000小资，15000以上 大户人家。如果是负数显示破产。

If语句中的嵌套

在一个if语句中的{ }代码段中，还可以再包含一层或多层if语句。

示例：

var sex = confirm("请选择性别，男左女右");

var job = prompt("请输入您的职业");

if(sex)

{

if(job=="医生")

alert("你好，医生先生");

else if(job=="警察")

alert("你好，警官先生");

else

alert("你好,"+job+"先生")

}

else

{

if(job=="医生")

{

alert("你好，白医天使");

}

else if(job=="警察")

alert("你好，警花");

else

alert("你好,"+job+"女士")

}

 

switch语句 单值判断

以一个单一的值来匹配不同代码段，如果case之后的值与switch括号后的值相等的话，就执行这个case与break之间的代码。

语法：

switch(变量或表达式)

{

case 值1 :

单值与值1相等时要执行的代码

break;

case 值2 :

单值与值2相等时要执行的代码

break;

…..

default :

以上所有值都不匹配时执行的代码

}

示例：

var answer = prompt("在html中，代表段落的标签是：A、<table> B、<hr> C、<div> D、<p>");

switch(answer)

{

case "a":

alert("回答错误，<table>表格");

break;

case "b":

alert("回答错误，<hr>横线");

break;

case "c":

alert("回答错误，<div>块级元素");

break;

case "d":

alert("回答正确，<p>段落");

break;

}

switch语句可以完成的工作，if完全可以完成。

小练习：

提示：Math.floor()取整

1、 输入任意一个整数，得到该数字的最后一位。

2、 输入任意两位以上的整数，得到该数字的十位上的数。

3、 输入一五位以内的数字，输出该数字是几位数。

4、 输入三条边长，判断给定的三条边是否能组成三角形，如果能，再判断是否是等边三角形、等腰三角形还是普通三角形。

number() , parseInt()

5、 输入任意的一个五位数，分别取出个位上的数、十位上的数、百位上的数、千位上的数、万位上的数，分别输出这五个数字。

6、 输入一个整数，判断它是否能被3,5,7整除，并输出以下信息之一：

a) 能同时被3,5,7整除

b) 能被其中两个数整除（显示出是哪两个数）

c) 只能被其中一个数整除（指出是哪一个）

d) 不能被3,5,7整除

7、 输入5个数字，判断这5个数字是否存在重复的数字，如果存在则显示yes，否则显示no

8、 输入1个正整数，判断这个数字是否既是5又是7的整倍数，如果是则显示yes，否则显示no

循环结构

什么是循环结构

简单的说，就是让程序能够重复的执行一段代码。

while循环

每次执行while语句时，程序会对while之后的循环条件进行判断，当循环条件成立时，就会执行包含在while语句的{ }之间的循环体的代码。循环体执行完毕之后，当前代码所执行的顺序，会再次返回循环条件进行判断。成立则继续执行循环体，不成立则跳过循环体去执行之后的语句。

语法：

while(循环条件)

{

循环体 //循环体就是指要被循环执行的代码

}

示例：

var temp = 26;

while(temp<100)

{

alert("继续加热，当前温度是"+temp);

temp=temp+5;

//通常在循环中都要设置退出的条件，否则就会造成死循环

}

alert("进入保温模式");

说明：

while与if语句有一个相似之处就是，循环条件不成立的话，循环体里的代码一次都不会执行。

死循环

就是循环没有办法退出，无限循环导致计算机cpu运算性能的浪费。

小练习：

1、循环显示出1到10的数字。

var temp = 1;

while(temp<=10)

{

alert(temp);

temp=temp+1;

//通常在循环中都要设置退出的条件，否则就会造成死循环

}

do while循环

与while循环类似，但不同之在于。它循环条件是在循环体后面的，也就是说，do while的循环体至少会被执行一次，因为第一次的判断是在循环体执行完之后。

语法：

do

{

循环体

}while(循环条件)

示例：

var temp = 11;

do

{

alert(temp);

temp=temp+1;

//无论如何，它先执行一遍再说

}while(temp<=10)

小练习：

1、 循环打印出从10到1的数字，按递减的顺序显示。

2、 循环弹出输入框要求“输入用户名”，直到用户输入”管理员”时，结束循环并提示“欢迎登陆”。

3、 模拟银行提款机的取钱和存钱过程，假设帐户初始存款1000元，每次都要询问用户“存钱点确认，取钱点取消”，然后输入存或取的金额，存取之后显示当前账户金额，不允许透支。当帐户金额小于等于0时，循环结束。只要帐户还有钱，就一直循环下去。

附加：

存取之前要求输入密码，如果密码不是123456就始终提示密码错误。

不是帐号金额为0再退出，而是每次存取一次之后就询问“您是否还要办理其他业务”，点击是继续循环，点击否就退出循环。

for循环

循环变量：定义了一个整数类型的变量，用来统计循环的次数。

for循环的执行步骤：

1、 第一次循环的时候，初始化循环变量。

2、 每次循环的时候，执行for循环括号()中的最后一个部分，来改变循环变量的值。

3、 判断for循环括号()中的第二个部分，也就是逻辑表达式，值为true成立则继续循环，值为false不成立则退出循环。

示例1：

var total = 0;

for(var i=0; i<=10;i+=3)

{

total+=i;

// total= total+i;

alert(total);

}

示例2：

for循环括号()中的第一和第三个部分是允许省略的。

var total = 0;

for(; total>=0;)

{

total++;

alert(total);

}

概念：

一般来说，for循环能做到的事，while循环一样可以。

for循环通常用在你明确的知道循环次数的情况下。

while循环常用在循环次数不明确的情况下。

语法：

for(定义循环变量 ; 循环条件 ; 每次修改值)

{

循环体

}

循环嵌套

在循环之中，可以再包含循环。

for(var i = 1; i<=2;i++)

{

for(var j = 1;j<=2;j++)

{

alert("i="+i+"j="+j);

}

}

对于双层来说，外侧执行一次，内侧则整个循环一遍。

向网页的正文中加入字符串

document.write("<font style='color:red;font-size:30px;'>今天的天空很晴朗!!!!</font>");

document.write()的作用，就是在<body></body>之间添加指定的字符串，字符中包含的html与css也能够同时被浏览器显示出来。

小练习：

用for循环在网页的正文中打印出20到30之间的整数。

break中断循环

在循环语句的循环体中，只要执行到break语句，当前循环就结束，去执行循环之后的语句。

示例1：

for(var i =20; i<=30;i++)

{

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

if(i==25)

break;

}

alert("循环已退出");

示例2：

while(true)

{

if(prompt("输入指令")=="exit")

break;

}

continue跳过本次循环

示例1：

while(true)

{

if(confirm("你今天感冒了么"))

continue;

alert("起床");

alert("洗脸");

alert("上班");

 

}

跳过本次循环中continue之后的语句，而直接开始下一次循环，每次执行到continue仅仅是跳过循环中剩下的语句，而整个循环还是在继续。

小练习

1、 显示出1-100之间的所有整数之合。

var total = 0;

for(var i = 0; i<=100;i++)

{

total+=i;

}

alert(total);

2、 显示出1-100之间的所有奇数。

for(var i = 1; i<=100;i+=2)

document.write(i+" ");

 

3、 显示出1-100之间的所有偶数之合。

var total = 0;

for(var i = 0; i<=100;i+=2)

{

total+=i;

}

alert(total);

4、 显示出1-100之间所有能被3整除的数。

5、在页面上用doucment.write()输入1到100之间的数字，要求每10个数字排一横行，如：

1 2 3 4 5 6 7 8 9 10

11 12 13 14 15 16 17 18 19 20

21 22 23 24 25 26 27 28 29 30

……

6、用循环在页面上显示一个三行三列的表格。提示：循环之中还可以嵌套循环。类似如下效果。

1行1列	1行2列	1行3列
2行1列	2行2列	2行3列
3行1列	3行2列	3行3列

document.write("<table border=1>");

for(var i = 1; i<=2;i++){

document.write("<tr>");

for(var j = 1;j<=2;j++) {

document.write("<td>"+i+"行"+j+"列</td>");

}

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

}

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

7、显示出1-100之间的所有数字，与上题不同的是，要求将它们放在一个10行10列的表格中，每个数字占一个表格。

8、输入1-1000之间，其个位为3的数字。

9、输出1-1000之间，每一位之和为8的三位数（如：107、116、134等）

循环练习：

一、 输出个位为6且能被3整除的五位数有多少个

二、 abcd=(ab+cd)²性质的所有四位数：例如：3025=(30+25)²

三、 由1、2、3、4能组合成哪些互不相同且无重复数字的三位数？并编写程序输出这些数字

四、 输入十个数字，要求输出最大值、最小值、去掉最大值和最小值之后的平均值

五、 猴子吃桃问题：猴子第一天摘下若干个桃子，当即吃了一半，还不过瘾，又多吃了一个；第二天早上又将剩下的桃子吃掉一半，又多吃了一个；以后每天早上都吃了前一天剩下的一半多一个。到第10天早上想再吃了，见只剩下一个桃子了，求第一天共摘了多少个桃子

六、 输出所有的回龙数；回龙数就是一个五位数，第一位和最后一位相同，第二位和倒数第二位相同，例如：12821、56965……

爱因斯坦出了一道数学题：有一条长阶，若每步跨2阶，则最后剩1阶，若每步跨3阶，则最后剩2阶，若每步跨4阶，则最后剩3阶，若每步跨5阶，最后剩4阶，每步跨6阶，最后剩5阶，每步跨7阶，刚好跨完；求一共最少有多少阶

函数function

Javascript中的自定义函数

系统函数与自定义函数

系统内置的已经写好的函数，可以直接使用。比如：Math.floor()。

自定义函数，是我们自己编写的函数。

封装

就是将一系列代码包装在一个函数、方法或类之中，这样以来，当使用这代码的时候，就不需要再去了解其代码的执行原理和过程，只要调用它并让其返回结果就可以了。

函数function

函数的定义

无参无返回值的函数

function 函数名()

{

函数中的代码

}

注意：用function定义的函数是不会自动执行的，它只是一个封装的(或者)制造的过程，要想让这个函数运行起来，必须要执行它。

无参无返回值的函数的执行，在页面的<script></script>或者事件中直接调用函数名后跟括号即可。

执行语句：函数名();

示例：

function getMianji()


{


var r = 5;


var m = Math.PI*(r*r);


alert("半径为"+r+"圆面积是"+m);


}


getMianji();


<input type="button" value="按钮" onclick="getMianji();" />


 

小练习：

1、 封装一个函数，作用是进行减法操作，在函数内定义两个变量，然后document.write() 显示出第一数减第二数的差。

2、 封装一个函数用于计算长方体的表面积，在函数内定义三个变量代表长宽高，然后document.write() 显示出表面积的值。

有参无返回值的函数

function 函数名(参数1,参数2,参数3 …….)

{

函数中的代码

}

注意：这参数相当于定义了一个变量，用于接收向函数中传入的参数值。

示例1：

function getMianji(r) //在函数名后面的括号中的参数，就是一个局部变量，这个变量用来接收我们传入的参数。


{


var m = Math.PI*(r*r);


document.write("半径为"+r+"圆面积是"+m+"<br />");


}


getMianji(10);


getMianji(5);


getMianji(2);

示例2，多个传入参数：

function add(num1,num2,num3)
{
document.write(num1+num2+num3);
}
add(5,5,1);
add(1,2,3);

小练习：

1、封装一个函数，作用是进行减法操作，向函数内传入两个参数，然后document.write() 显示出第一数减第二数的差。重复三次调用该函数传入不同的值来显示结果。

2、 封装一个函数用于计算长方体的表面积，向函数传入三个参数代表长宽高，然后document.write() 显示出表面积的值。重复三次调用该函数传入不同的值来显示结果。

有参有返回值的函数

function 函数名(参数1,参数2,参数3)

{

函数中的代码

return 表达式;

}

注意：返回值只能有一个

示例1：

function add(num1,num2,num3)
{
var sum = num1+num2+num3;
return sum;
}
var result = add(1,2,3);
alert(result);

示例2：

function getMianji(r)
{
var m = Math.PI*(r*r);
return m;
}
var zmj = getMianji(5)+getMianji(10)+getMianji(7);
alert("需要材料"+zmj+"平米");

小练习：

1、封装一个函数，作用是进行减法操作，向函数内传入两个参数，然后用return返回第一数减第二数的差。重复三次调用该函数传入不同的值，并将三个结果相加并显示。。

2、 封装一个函数用于计算长方体的表面积，向函数传入三个参数代表长宽高，然后用return返回表面积的值。重复三次调用该函数传入不同的值，并将三个结果相加并显示。

return返回

返回有两层意思，一个是反馈结果给调用者，一个是中断函数的执行。

在函数的任何位置只要执行到return，就立刻中断函数的执行。

语法

function 函数(参数)

{

函数代码

return

或

return 表达式;

}

注意：返回值只能有一个

示例：

function get()
{
document.write(1);
document.write(2);
document.write(3);
if(prompt("继续")=="88")
return;
document.write(4);
document.write(5);
document.write(6);
document.write(7);
}
get();

变量的作用域

作用域就是指变量能够起作用的范围，就是指这个变量它在什么范围之内有效。

示例：

var a = 111; //全局变量
function show()
{
var a = 222; //局部变量
}
show();
alert(a);

全局变量

在页面上定义之后，任何位置都可以使用的变量。

在函数之外用var定义的变量。

局部变量

仅仅可以在函数、方法中使用的变量。

在函数之内用var定义的变量，就称为局部变量。

当全局变量与局部变量两者同名的情况下

在函数内部 调用局部变量。

在函数外部 调用全局变量。

小练习：

1、 封装一个求长方形面积的有参有返回值的函数，有长、宽两个传入参数，用document.write()在页面上输出函数的返回值。（附加：通过单击一个按钮来执行这个函数。）

2、 将工资的计算方法封装到一个函数中，传入参数有：基本工资、本月工作天数、迟到次数(迟到扣30)、旷工次数(旷工扣三天工资)、请假次数（请一天扣一天），返回本月实际工资。
调用这个方法，计算三个人的工资，并将结果显示在一个表格中。

3、 封装一个函数，作用是在网页中显示表格，函数接收行与列数两个参数，然后在页面上打印出指定行数与列数的表格，每个单元格中都显“2行3列”这样的文字。

附加题： 用函数来打印空心棱型，函数接收高度参数， 按指定的高度打印出棱型。

单词表：

function

return

系统函数_数组_事件

基本概念

什么是系统函数

系统函数就是javascript内部自带的已经完成了的函数与功能。

用户可以直接拿来使用。

什么是类和对象

类是拥有共同特征的一个种类，是一类事物的统称。

对象是指一个类中的具体的成员。

javascript中的常见系统类

比如字符串String、数值Math\Number、布尔boolean、日期date、数组array

字符串String

长度length

统计一个字符串中包含多少个字符

示例：

var myString = "everybody";

alert(myString.length);

改变文本样式

改变字体的字号大小big()与small()

var myString = "Hello Every Body";

document.write(myString.big()+"<br />");

document.write(myString.small());

加粗与斜体

var myString = "Hello Every Body";

document.write(myString.bold()+"<br />");

document.write(myString.italics());

字体颜色

格式： 字符串.fontcolor(“颜色”)

var myString = "Hello Every Body";

document.write(myString.fontcolor("red")+"<br />");

字体大小

格式： 字符串.fontsize(50);

var myString = "Hello Every Body";

document.write(myString.fontsize(50)+"<br />");

删除线

格式： 字符串.strike();

var myString = "Hello Every Body";

document.write(myString.strike()+"<br />");

indexOf()

查找一个字符串在另一个字符串中的位置，如果没有找到则返回-1 。

比如：

var myString = "Hello Every Body";

alert( myString.indexOf("Body") );

match()

用于检测一个字符串是否包含在另一个字符串之中。如果包含则返回字符串本身，不包含则返回null 。

var myString = "Hello Every Body";

alert( myString.match("baby") );

replace()

用字符串中的指定内容，替换另一段内容。

var myString = "Hello EveryBody , I miss U , EveryBody";

alert( myString.replace("EveryBody","EveryOne"));

alert( myString.replace("EveryBody","EveryOne").replace

( "EveryBody","EveryOne"));

注意：它一次只替换一个匹配的字符串。

CharAt()

得到一个字符串中的某一个位置的字符，记住。字符位置的序号是从0开始的，也就是第一个字符序号为0。

var myString = "Hello EveryBody , I miss U , EveryBody";

alert( myString.charAt(6));

lastIndexOf()

从后向前查找一个字符串在另一个字符串中的位置，如果没有找到则返回-1 。

var myString = "Hello EveryBody , I miss U , EveryBody";

alert( myString.lastIndexOf("Every"));

结果：29

split()

分隔字符串，以某个字符作为分隔符，分隔后的数据会被存放在一个数组中。简单点说，就是把一个字符串变量分隔为多个字符串变量后放在一个集合中。

var myString="张三,李四,王五,赵六";

var arr = myString.split(",");

alert(arr[0]);

substr()

在一个字符串中截取一部分。

语法：字符串.substr(开始位置,截取长度)

var myString = "Hello EveryBody , I miss U , EveryBody";

var newString = myString.substr(5,11);

alert(newString);

字母的大小写转换

var myString = "Hello EveryBody , I miss U , EveryBody";

document.write(myString.toLowerCase()+"<br />");

document.write(myString.toUpperCase());

小练习：

1、 现有字符串”今天是个好日子，明天也是一个好日子。”要求判断逗号的位置，然后从逗号开始，截取并得到逗号后面所有的字符内容。

2、 现有字符串”小明今天吃了两碗豆花。”，要求将”豆花”替换为”豆腐脑”。

日期Date

就是专门用于存放时间信息的一种字符串。

得到现在的时间与日期

var dTime= new Date();

document.write(dTime);

或

document.write(Date());

得到时间中的日期

比如我需要知道今天是几号。getDate()

var dTime= new Date();

document.write(dTime.getDate());

得到时间中的星期

比如我需要知道今天是星期几。getDay()

var dTime= new Date();

document.write(dTime.getDay());

得到时间中的其他部分

getMonth() //得到月份，注意：一月份从0开始

getFullYear() //得到年份

getHours() //得到几点钟

getMinutes() //得到分钟数

getSeconds() //得到秒数

getMilliseconds() //得到毫秒，1000毫秒=1秒

getTime()

返回 1970 年 1 月 1 日至今的毫秒数。

设置时间

setDate(日期数) //修改时间中的日期

setMonth(月份) //修改时间中的月(0是一月)

setFullYear(年份) //修改时间中的年

示例：

var dTime= new Date();

//dTime.setDate(30);

//dTime.setMonth(0);

//dTime.setMonth(0,1);

//dTime.setFullYear(2000);

dTime.setFullYear(2000,1,2);

document.write(dTime);

 

setHour(小时) //修改时间中的小时，几点，也可以用来修改分秒、毫秒

setMinutes(分钟) //修改时间中的分钟

示例：

var dTime= new Date();

dTime.setHours(22,22,22,22);

dTime.setMinutes(22,22,22);

dTime.setFullYear(2000,1,2);

document.write(dTime);

小练习

在网页中得到当前时间，然后修改时间数值并打印出如下时间信息：“现在是2015年11月11日 11点11分11秒”。

var dTime= new Date();

dTime.setHours(11,11,11);

dTime.setFullYear(2015,10,11);

document.write("今天是"+dTime.getFullYear()+"年"+(dTime.getMonth()+1)+"月"+dTime.getDate()+"日"+dTime.getHours()+"点"+dTime.getMinutes()+"分"+dTime.getSeconds()+"秒");

数学函数Math

圆周率

Math.PI

比如求半径的3的圆面积

Math.PI*3*3

2的平方根

Math.SQRT2

求绝对值abs()

比如：

var i = -123.456789;

document.write(Math.abs(i));

正弦余弦正切sin()cos()tan()

document.write(Math.sin(90));

document.write(Math.cos(90));

document.write(Math.tan(90));

向下取整Math.floor()

舍弃小数部分

var ii = 34.9999;

document.write(Math.floor(ii));

向上取整ceil()

只要有小数就进一位

var ii = 34.000001;

document.write(Math.ceil(ii));

四舍五入round()

var ii = 34.500001;

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

指数exp()

Math.exp(2)

得到一组数字中的最大值、最小值

Math.max(1,2,3,4,5)

Math.min(1,2,3,4,5)

运算指定的数字的多少次方

Math.pow(2,5) //运算2的5次方

为一个数开平方根

Math.sqrt(9) //结果为3

随机数

Math.random() //得到一个0到1之间的小数，这个数字是随机产生的，没有规律，几乎不会重复。

如果我们需要随机产生指定上限和下限的数字，我们可以用random()生成的这个0-1的小数去乘以(上限-下限)，然后再加上下限。就是把这个随机小数当成百分比来使用。

比如：我需要随机获取2000-6000之间整数

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

{

document.write(Math.floor( Math.random()*4000+2000)+"<br />")

}

小练习：

1、假设福利彩票是八位，在一个输入框中输入你要购买的彩票的号码，然后无限循环开始生成彩票号，一直到中奖为至，最后显示循环了多少次，需要多少元来买彩票(每张两元)。

2、计算-15987.12的3次方的平方根的绝对值。

单词表

length

bold

数组

概念

我们可以把它理解成是若干数据组成的有限的集合，但不同之处在于，数学中的集合只能存储数字，而javascript中的数组可以存储所有数据类型，包含Number、String、Boolean、Date，甚至是另外若干个数组。

数组也是一个变量，但是这个变量中存放的不只是一条数据。

定义数组

var arrayA = new Array(); //定义一个不确定长度的数组

var arrayB = new Array(6); //定义一个长度为6的数组

数组中的元素

就是指数组中的每一项数据，每个成员。

var arrayA = new Array();

arrayA[1] = 123;

arrayA[1]+=10;

alert(arrayA[1]);

数组元素与变量的使用方法没有区别，唯一不同之处，就是名字的表现方式不同。我们可以形象的想象成每个学生都有一个学号。

下标

就是指数组元素在数组中的序号。数组的下标(序号)是从零开始的。

arrayA[0] = 111;

arrayA[1] = 123;

arrayA[2] = false;

arrayA[3] = "元素";

document.writeln(arrayA[0] );

document.writeln(arrayA[1] );

document.writeln(arrayA[2] );

document.writeln(arrayA[3] );

数组长度

一个数组中包含多少条数据。

数组的长度可以用length属性来获取。

写法：数组名.length

alert(arrayA.length);

遍历

就是通过循环将集合中的每一项一个个全部查找出来，并一个个进行相应的操作。

for(var i=0; i<arrayA.length ; i++)

{

//数组的下标可以用变量来表示

document.write( arrayA[i]*10 +"<br />");

}

for in 循环

这是专门用于从集合（比如：数组）中遍历其中每一项的一种循环，for in 循环的循环次数是由集合的成员数决定的，集合中有多少个元素，for in 就循环多少次。

语法：

for(数组下标 in 数组)

{

循环体

}

其中，数组下标是一个临时变量，这个临时变量，它用来存储每一个数组的下标。

示例：

for(i in arrayA)

{

document.write( arrayA[i] +"<br />");

}

小练习：

1、 定义一个长度为7的数组， 其中存放班上任意7位同学的姓名，然后用for in 循环将他们的名字打印出来。

2、 再定义一个长度为7的数组，用来存放之前7位同学的成绩，然后打印一个7行2列的表格，每行第一单元是姓名，第二个单元格是成绩。

3、 再定义一个长度为7的数组，用来存放之前7位同学的学号，学号为4位的数字，要求随机生成。

4、 在循环中再给表格添加一列，用于显示每个同学的姓氏，提示：姓氏用字符串截取函数获得。

5、 最后打印出这7位同学的平均分。

6、 用循环与数组打印出如下图形：

    a

   b c

  d e f

 g h i j

k l m n o

 p q r s

  t u v

   w x

    y

晚间作业：

1、 定义一个长度为10的数组，用循环生成10个0到100之间的数字并将其存入数组之中，并一一显示出来。在另一个循环中得到这10个数字中所有的偶数。

2、 定义一个长度为10的数组，用循环生成10个0到100之间的数字并将其存入数组之中，并一一显示出来。在另一个循环中得到这10个数字的最大值、最小值与合。

3、 将一到十的汉字存入一个数组，然后将“十、百、千、万”存入另一个数组。要求实现将任意五位整数转换为汉字写法。比如：将12345转换为”一万两千三百四十五”

定义数组的同时添加数据元素

var 数组名 = new Array(数据1,数据2 …… );

在定义的时候就直接添加数据，不再需要一一赋值，数据与数据之间逗号分隔，比如：

var wei = new Array("万","仟","佰","拾");

var aa = new Array(2,6,"小明",true,3.14);

多维数组

二维数组就相当于是一个二维的表格

示例：

var student = new Array();

student[0] = new Array(); //相当于定义了表格中的一行

student[1] = new Array();

student[2] = new Array();

student[0][0] = "王小宝"; //相当于第一行的第一列

student[0][1] = 18;

student[0][2] = "男";

//添加第二行数据

student[1][0] = "李小英";

student[1][1] = 19;

student[1][2] = "女";

//添加第三行数据

student[2][0] = "张小强";

student[2][1] = 20;

student[2][2] = "男";

document.write("<table border='1'>");

for(i in student){

document.write("<tr>");

for(j in student[i])

{

document.write("<td>"+student[i][j]+"</td>");

}

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

}

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

 

小练习：

定义一个二维数组来存储本周课程表的信息（没有课就显示无），然后在一个表格中将单元格打印出来。

数组的常用函数

concat(值或数组,…..)

将两个数组合并为一个新的数组

示例：

var aArr= new Array(1,3,"小红",true,333);

var bArr = new Array(111,222,333,444);

aArr = aArr.concat(777,888,999);

aArr = aArr.concat(bArr);

for(i in aArr)

document.writeln(aArr[i]);

join(分隔符)

使用指定的分隔符将数组元素拼接起来。返回的是一个字符串。

示例：

var aArr= new Array(1,3,"小红",true,333);

var sStr = aArr.join("</td><td>");

document.write("<table border='1' ><tr><td>");

document.write(sStr);

document.write("</td></tr></table>");

pop()

返回并删除数组的最后一个元素。

示例：

var aArr= new Array(1,3,"小红",true,333);

document.write(aArr.pop());

document.write(aArr.pop());

document.write(aArr.pop());

push(值1,值2，…..)

在数组的未尾追加一个或多个数组元素，并返回增加后的数组长度。

var aArr= new Array(11,22,33,44);

aArr.push(55,66,77,88)

//document.write( aArr.push(55,66,77,88));

document.write(aArr);

reverse()

颠倒反转数组中元素的次序。

var aArr= new Array(11,22,33,44);

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

aArr.reverse();

document.write(aArr);

slice(开始下标，结束下标)

从数组中指定开始和结束位置，提取一个新的数组。

var aArr= new Array(11,22,33,44,55,66,77,88);

var bArr = aArr.slice(2,7);

document.write(bArr);

sort()

对数组元素进行排序

var aArr= new Array("tom","jerry","aTom","billy","john","b","c");

document.write(aArr.sort());

unshift(值1,值2……)

向数组的开始处增加一个或多个元素。

var aArr= new Array("tom","jerry","aTom","billy","john","b","c");

aArr.unshift(111,222,333);

for(i in aArr)

document.write(aArr[i]+"<br />");

splice()

用于在数组中删除、替换数据元素。

语法：

数组.splice(开始位置、长度、数据1，数据2, 数据3……)

var aArr= new Array(111, 222, 333, "tom", "jerry", "aTom", "billy", "john", "b", "c");

//aArr.splice(2); //删除第二个元素之后的所有数据。

//aArr.splice(2,2); //删除下标为2的元素开始的2个元素。//aArr.splice(2,1,888); //替换下标为2的元素值为888

aArr.splice(2,3,888,999,000) //分别替换下标为2的元素之后的3个元素为888,999,000

for(i in aArr)

document.write(aArr[i]+"<br />");

练习：

1、 定义一个七行五列有二维数组，这个二维数组列为：学生姓名、年龄、性别、语文成绩、数学成绩。并添加7条学生数据。

2、 将数据打印在一个7行5列的表格中。

3、 再打印一个表格，只显示女生。

4、 删除数组中语文或数学成绩不及格的同学并再打印一个表格。

附加：打印一个表格，将数组中的同学按照年龄排序。

冒泡排序

在很多时候，我们需要对若干个无序的数字进行排序，排序有很多方法，其中比较出名的一种就是冒泡排序法。

它的原理就是，先找到最小的数放在第一位，再在余下的数字中找最小的放在第二个位置。

var aArr= new Array(8,4,9,3,7,2,1,5,6);

for(var i = 0 ; i<aArr.length ; i++){

for(var j=i;j<aArr.length;j++){

if(aArr[i]>aArr[j]) //两数相比，如果小的话就互换位置

{

var temp = aArr[i];

aArr[i] = aArr[j];

aArr[j] = temp;

}

}

}

document.write(aArr);

小练习：

实现倒序（从大到小）的冒泡排序。

事件

我们可以理解为，是由什么事件的什么动作引发了什么样的后果。

注意： js的事件本质上是html元素的属性，在其中可以直接调用javascript代码。

Javascript中的常用事件

onclick单击事件

当某个html元素被鼠标点击一次时触发。（几乎适用于所有的html元素）

示例1：

<input type="button" value="按钮" onclick="var a=10*435/7; alert(a)" />

示例2：

通常我们将js代码写在函数中，然后在事件中去调用函数。

<script type="text/javascript">

function showName(name){

alert("我是"+name+"，刚被点了一下");

}

</script>

<input type="button" value="按钮" onclick="showName('按钮');" />

<input type="text" value="" onclick="showName('文本框');" />

<div style="width:200px ; height:40px;" onclick="showName('div');">11122233444</div>

<table border="1"><tr><td onclick="showName('表格');">fdsafdas</td></tr></table>

onDblClick双击事件

当用户双击html元素时触发。

<script type="text/javascript">

function showName(name)

{

alert("我是"+name+"，刚被双击了一下");

}

</script>

<input type="button" value="按钮" ondblclick="showName('按钮');" />

<input type="text" value="" ondblclick="showName('文本框');" />

<div style="width:200px ; height:40px;" ondblclick="showName('div');">11122233444</div>

<table border="1"><tr><td ondblclick="showName('表格');">fdsafdas</td></tr></table>

 

onmouseover当鼠标移动到元素上方时

当鼠标移动到上方时触发。（适用于表单元素、图片等）

<img src="aa.jpg" width="300"  onmouseover="showName('图片');" />

当鼠标移动元素上方但没有移出元素范围时，onmouseover只会被触发一次。

onmouseup当鼠标键抬起时

当鼠标键抬起的一瞬间，如果鼠标在元素内时触发

onmousedown当鼠标键按下时

当鼠标键按下的一瞬间，如果鼠标在元素内时触发

onSelect选中事件

onSelect当选中指定元素中的文本或其他内容时触发。

<input type="text" value="" onSelect="showName('文本框');" />

注意：该事件通常仅适用于文本框与文本域之中。

onChange内容改变时触发

当指定元素中的文本或其他内容发生改变时触发。

<input type="text" value="" onChange="showName('文本框');" />

<textarea onChange="showName('文本域');"></textarea>

注意：该事件通常仅适用于文本框与文本域。

什么是焦点：

在一个网页的所有表单元素之中(比如：input、select、textarea等)，当我们按tab键时，始终会有一个控件处在被选中的状态，被选中的控件之上会有虚线或者蓝底白字的样式。这个被选中的控件我们就称它获得了焦点。(按tab键可以切换焦点，鼠标单击某元素也可以获得焦点。)

onfocus当元素获得焦点时触发

onblur当元素失去焦点时触发

<input type="text" value="" onfocus="showName('文本框');" onblur="show2('文本框')" />

onLoad页面加载事件

当读取内容加载读取完毕时触发（适用于body、框架、图片）。

<body onload="alert('页面读取完毕');">

onSubmit表单提交事件

<form onsubmit="alert('正在提交信息')">

    <input type="text" value=""/>

    <input type="submit" value="提交" />

</form>

当表单提交的时候触发（适用于form表单），将表单中的数据提交给服务器端。

其他事件

onAbort 当图像加载过程中中断时触发

onUnload 当关闭或离开时激活

onKeydown 按下键盘上的任一按键的时候（确保该事件所在元素，获取到了焦点）

onKeyup 抬起键盘上的按键的时候

onKeypress 点击键盘上的按键时。

onresize 当页面大小被改变时。

onReset 当表单中的内容被重置（清空）时激活（适用于<form>）

补充内容

eval( )函数

执行字符串中的javascript代码。

示例：

var cmd = "alert(100%3+123)";

eval(cmd);

document.getElementById(“元素id”)  获取指定元素

通过ID来获取一个Html元素。示例：

<input type="text" value="今天太热了" id="tt1" name="tt1" />

<script type="text/javascript">

var iv = document.getElementById("tt1").value;

alert(iv);

document.getElementById("tt1").value = "听说明天会更热";

</script>

html元素的ID = 变量名

在IE中有时是无效的。

<input type="text" value="今天太热了" id="tt1" />

<input type="button" value="按钮" id="bb1" />

<script type="text/javascript">

//相当于我把整个文本框都变成了一个变量tt1

var iv = tt1.value;

alert(iv);

tt1.value = "听说明天会更热";

bb1.value = "小呀小按钮";

</script>

this关键字

是指this所在代码调用位置的当前对象。通常应用在事件之后，也就是指触发事件的元素本身。

比如：

<input type="text" value="" id="resultBox" name="resultBox" onclick="alert(this.value);"  />

这里的this.value就代表当前文本框的value属性。

<input type="button" value="1" onclick="this.value= parseInt(this.value)+1;" />

这里的this.value就代表当前按钮的value属性。

小练习：

1、 在页面上添加一个文本框和一个按钮，文本框中的初始值为1，要求每次点击按钮，文本框中的值加一。

2、 在页面上添加三个文本框，当焦点处于哪个文本框，哪个文本框就显示“焦点在此”，当失去焦点时，文本框的内容全部都是“无焦点”。

3、 小游戏：猜数字，在页面上添加一个文本框，一个按钮“我猜”，一个按钮“重新生成随机数”，随机生成一个1到100之间的数字，但是不要显示出来，由用户在文本框中手动输入数字，如果大于随机数alert(“高了”)，如果小于随机数alert(“低了”)，猜对了就是显示“恭喜你答对了”，猜测7次没猜中，显示Game Over 。

4、 小游戏：人物 地点 事件，在页 面上添加三个文本框，三个数组，一个按钮，数组分别存放十个人名、十个地点、十个事件。然后生成三个随机数来随机选择三个数组中的任意一项，将三个值分别显示在三个文本框中，使用其拼接为一句话，也就是：“小王在皇宫大内写代码”。

"产房", "皇宫大内", "重大楼顶", "老师办公师", "月球表面", "网吧WC", "宝宝强家", "三峡广场", "荒郊野外", "歌乐山疗养院"

"吃臭豆腐", "扣脚丫", "转圈圈", "做俯卧撑", "傻笑", "耍朋友", "表白", "种白菜", "唱山歌", "抽风"

5、 在页面上模仿windows计算器，制作一个可以实现加减乘除的网页计算器。

实例

在网页上动态的显示时间

function showtime(){

var myDate = new Date();

var year = myDate.getFullYear();

var month = myDate.getMonth()+1;

var date = myDate.getDate();

var day =myDate.getDay();

var hour = myDate.getHours();

var minute = myDate.getMinutes();

var second =myDate.getSeconds();

 

var timeText = year+"年"+month+"月"+date+"日  "+hour+":"+minute+":"+second;

timeBox.value=timeText;

}

setInterval("showtime()",1000);

setInterval函数

它的作用就是每隔指定的毫秒数，执行一次字符串（第一个参数）中的代码。

setInterval( "被执行的代码" , 间隔毫秒数 );

限制文本输入的长度

1、 利用字符串的length属性，来得到字符串中的长度。

2、 我们要实现，如果文本框的内容超出限制的话，就不能提交。

<form name="myForm" onsubmit="return isLengthRight();" action="111.html">

<textarea id="tta" rows="10" cols="30"

    onchange="wrodsCount(this.value);"></textarea>

<br />您还可以输入

    <input id="wCount" name="wCount" type="text" style="width:30px; border:1px solid #999;" value="30" >个字符

    <input type="submit" value="提交留言" />

</form>

 

<script type="text/javascript">

function wrodsCount(tt){

var len = 30-tt.length;

if(len<0){

alert("您输入的内容长度超出限制");

}

wCount.value=len;

return len;

}

function isLengthRight(){

var len = wrodsCount(tta.value);

if(len<0)

return false;

else

return true;

}

</script>

禁止表单提交

在表单的onSubmit事件中，执行return false。示例：

<form name="myForm" onsubmit="return false;" >

这样，这个表单就无法被提交了。

上传并显示图片

通过修改img元素的src属性，来实现图片的动态更换。

注意：

1、firefox和IE的file控件是有差异的，前者得到的只是文件名，而后者得到的是完整路径。

2、在IE中，有时直接使用元素的ID名称，在js中像变量一样来调用元素会报错，必须要用document.getElementById()来得到元素。

小练习：

1、 用数组存储十张图片的路径，通过点击一个按钮来切换这10张图片。

2、 在上题的基础上，实现每隔3秒钟自动切换一张图片。

3、 中秋节倒计时器，显示从现在到中秋节，有多少天多少小时多少分多少秒。而且每秒钟时间变换一次。

4、 判断身份证号的位数是否正确，当文本框失去焦点的时候，判断里边的数字长度是否正确，并在另一个文本框中显示结果。

5、 制作一个闹钟功能，在三个文本框中分别输入时分秒，然后当系统时间到达之后，就弹出一个提示框显示“时间到”。

6、 模拟订飞机票，假设小型飞机上有6个vip座位，用6个文本框来表示。下方又有一个小文本框和按钮，在小文本框中输入座位号并点击按钮，则弹出一个输入框要求输入用户姓名（同时对应文本框显示：已由用户XXX预订），如果该座位已被预订，则提示不能被预订。

7、 在页面上添加三个文本框，用于输入三个数字，和一个按钮，当点击按钮之后，则将三个数字以从大到小的顺序排列并alert显示出来。

8、 在页面上添加三个按钮，分别写上”红” ，”黄”，”兰”，当点击按钮时，页面背景切换为相应的颜色。

9、 在页面上添加一个<from>表单，表单中有两个文本框（分别代表输入的用户名与密码）和一个按钮，当点击按钮时，如果用户名为：admin、密码为123456则显示“登陆信息正确”，并且打开（将表单提交到）另一个网页,如果用户名密码不对，则显示“用户名密码错误。”（并且阻止表单提交）

附加题：炸金花：添加两排三个（共六个）文本框，上方为对方点数，下方为我方点数，随机生成1-13的数字出现在六个文本框中，如果三个数字不一样，则比较最大的数，如果我方两个数字一样而对方三个数字不一样则我方胜，如果我方三个数字一样而对方三个数字不一样则我方胜，如果我方三个数字相连（如7、8、9）而对方三个数字不相连则我方胜，如果双方都有两个数字是一样的则比较其大小，等等规则与炸金花一样。

Dom文档对象模型与浏览器对象模型

浏览器对象模型

在浏览器中包含很多我们可以调用的功能，这些功能是浏览器提供的。

Window对象

一个网页占据一个浏览器的窗体，window对象就是指当前网页所在的窗体。

属性

document 代表当前窗体中的文档，只读。

history 浏览器中打开过的网页的历史记录

location 当前窗口中的网页的地址

opener 打开本窗口的上一级父窗口

self 当前窗口本身

方法

close() 关闭一个窗口

window.close(); //关闭当前窗口 ( IE )

alert()、confirm()、prompt()

open() 打开一个新窗口，弹窗。

<input type="button" value="打开新窗口" onclick="window.open('a2.html','a2')"  />

print() 弹出打印窗口，以便打印当前网页的内容。

setInterval(代码,间隔时间) 每过指定的毫秒，就执行第一个字符参数中包含的代码。

setTimeout(代码,间隔时间) 只在指定的毫秒之后执行一次第一个字符参数中包含的代码。

location 对象

就是指当前窗体中的网页的网址。

属性：

href 获取或指定当前浏览器窗体中的网页的网址。

<input type="button" value="跳转" onclick=" alert(window.location.href) ;   window.location.href='file:///D:/a2.html' "  />

方法：

reload() 刷新网页，相当于按F5。

<input type="button" value="刷新" onclick=" window.location.reload(); "  />

history打开的网页的历史记录

属性

length 当前浏览器历史记录的条数

alert(window.history.length);

　　

方法

go(n) 跳转到当前网页的上一个页面或下一个页面，参数n代表前进或后退的页面个数，正值表示前进：比如1代表下一个页面，-1代表退回到一个页面。

<input type="button" value="退回到上一个页面" onclick="window.history.go(-1)" />

小练习

1、 创建三个网页

2、 第一个网页中只有一个超链接，点击超链接之后会修改location.href以打开第二个网页。

3、 第二个网页中加入一个表格，表格中是一个新闻列表，每条新闻标题都是一个超链接，点击超链接以打开第三个网页。

4、 第三个网页是新闻详细页，在新闻详细页的下面有一个按钮，点击这个按钮执行history.go() 以退回到新闻列表页。

DOM文档对象模型

Document object Model

DOM并不是指一个单一的对象，没它是指一个网页中所有html元素的集合，这个集合以Html元素相互包含的关系来排列，形成了一个树状结构的模型。

document对象

document对应的就是一个网页的dom模型的根节点。

document属性

anchors[] 包含了当前网页中所有锚点元素的集合。

bgColor 网页的背景色（要写在网页的最后面）

cookie 记录网页中的缓存，主要用于缓存表单中的信息。

domain 域名网址

fgColor 前景色，也就是文字的颜色

示例：

document.bgColor="red";

document.fgColor = "#FFFFFF";

alert(document.domain);

forms[] 当前网页中所有表单元素的集合，数组中的每项对应一个<form>元素。

images[] 网页中的所有图片的集合。

lastModfied 当前网页最后一次修改的时间。

links[] 当前网页中所有超链接元素数组。

title 网页的标题，也就是<title>标签定义的内容

document.title="网页DOM对象模型";

URL 当前网页的网址

alert(document.URL);

vlink 已访问链接的颜色

document.body.scrollHeight 网页中的实际内容的高度

document.body.offsetHeight 网页中的实际内容的高度

示例：

alert(document.body.scrollHeight);

alert(document.body.offsetHeight);

doucment对象的常用方法(函数)

write() 在当前网页中的指定位置输出字符串，也可以说是通过文档输出流向document对象中添加内容。

writeln() 与doucment.write()类似，但是输出结束后会自动添加一个换行符。（在某些浏览器是空格）

getElementById(“ID名”) 通过ID名称得到指定的html元素

getElementByClassName(“样式类名”) 通过class样式类名来获得元素。但是这种方式有可能得到是多个元素形成的一个集合，因此我们需要在这个集合中用类似数组下标的方式来依次获得每个元素，示例：

/

/length代表一共有多少个使用tx1样式类的元素

var Length = document.getElementsByClassName("tx1").length;

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

document.getElementsByClassName("tx1").item(i).value = "第"+i+"个文本框";

}

 

getElementsByName(“name值”) 通过name属性值来获取网页中的html元素，其得到的是一个集合，示例：

var Length = document.getElementsByName("ttttttt1").length;

for(var i=0 ; i<Length;i++)

{

document.getElementsByName("ttttttt1").item(i).value = "第"+i+"个框框";

}

 

innerHtml属性

所有容器类html元素都具备这个属性，innerHtml就代表这个容器中所包含的内容。（开始标记和结束标记之间包含的内容）

我们可以通过这个属性来获取和修改一个容器类元素中间所包含的内容。

示例：

var str = document.getElementById("box1").innerHTML;

alert(str);

document.getElementById("box1").innerHTML = "明天也下雨";

//用+=追加内容，等同于字符串加等操作

document.getElementById("box1").innerHTML +="后天还下雨";

//将document.getElementById得到的元素存入到一个变量中

var box1 = document.getElementById("box1");

//追加一个文本框

box1.innerHTML  +="<input type='text' />"

outerHTML属性

与innerHTML类似，但不同之处是，它不但包含容器类元素的内容，还包含了容器元素本身的开始与结束标记。

var box1 = document.getElementById("box1");

box1.outerHTML ="<p>明天也下雨</p>";

DOM级事件处理

是在js中对元素添加事件的一种方式，步骤如下：

1、 获取元素对象

2、 元素对象的指定事件属性，比如：btn1.onclick

3、 定义一个函数，并将其“赋值”给（onclick）元素的事件属性。

示例：

var btn1 = document.getElementById("btn1");

//将function函数像变量一样赋值给onclick属性

btn1.onclick = function(){

alert(111);

}

获取鼠标点击的位置坐标

//整个网页的单击事件

document.onclick = function(e){

var eve = e|| window.event; //哪个不为空就用哪一个

//获取单击事件的参数

var x = eve.clientX, //相对于网页内容的左上角的x坐标

y=eve.clientY, //纵坐标

x1 = eve.screenX, //相对于计算机屏幕的x坐标

y1 = eve.screenY; //相对于计算机屏幕纵坐标

 

alert("网页内坐标X:"+x+"Y:"+y+"屏幕位置X:"+x1+"Y:"+y1);

}

其中：function(e)中的e是事件参数，是浏览器传递给我们的单击时的一些信息，这个信息中就包含了所单击的位置坐标。

获取键盘按下的键

//按下键盘上的任一键，都会触发这个事件

document.onkeydown = function(e){

var keynum,keychar;

keynum = window.event ? e.keyCode : e.which;

//获取所按下的键的编码（进行了浏览器兼容性的判断）

keychar = String.fromCharCode(keynum);

//将所按下的键的编码轮换为字符

alert(keynum+"----"+keychar);

}

小练习：

1、 创建一个网页，通过js代码修改网页的<title>标题为“DOM文档对象模型”

2、 创建一个网页，网页之中存入一个有边框的<P>标签和一个按钮，要求每单击一下按钮，<P>标签内部就多追加一个文本框。

3、 在网页中添加一个高200px宽300px的div，通过点击鼠标显示alert提示框，显示点击位置在div的内部、还是外部。

4、 当按下键盘的上下左右键时，alert显示“您当前按下的是方向上（或下、左、右）”，键盘上其他键按下不需要有有任何反应。

打靶游戏

1、 将图片插入网页中。

2、 得到圆心的坐标。

3、 得到当前点击位置的坐标

4、 通过点击位置的坐标与圆心坐标相减，得到横、纵坐标的差值的绝对值作为三角形的两个边。

5、 去求三角形的第三边，公式：Math.sqrt(a²+b²)

6、 根据边长的长度去判断你当前打中了几环

小测试

下面的表格是网页上用来浏览图片所用，效果是鼠标移到表格左边的小图片上时，在右边显示该图片原始尺寸的图片 。假设表格左边的小图片网页ID依次为pic1,pic2,pic3,pic4，表格左边的小图片的name值与其ID相同。表格左边的小图片从上向下所对应的原始尺寸图片文件名依次image1,image2,image3,image4,与网页保存在相同位置。假设显示图片原始尺寸的单元格中插入的图片标记ID是fd，请用JavaScript语言编写适当的子函数。

	放大的原始 尺寸图片显 示在此单元

通过DOM获取或修改元素的属性

在元素名之后用一个圆点用调用对象的属性参数，可以对其属性参数进行调用或修改。

格式：dom对象.属性名

示例：

var tBox = document.getElementById("tBox");

tBox.value ="秋天";

alert(1);

document.getElementById("myImg").src ="bb.jpg";

修改或获取元素的css属性

示例：

var dBox = document.getElementById("dBox");

dBox.style.backgroundColor ="red";

dBox.style.height = "300px";

dBox.style.width ="200px";

style属性就代表html元素的样式，可用来修改或获取元素的CSS样式的值。

小练习：

1、 在网页中加入一个按钮，点击按钮时改变按钮上的文字，在“石头，剪刀，布”之间切换。

2、 在网页中加入一个单行文本框，当打开这个网页时，这个文本框中有一段灰色的文字“请输入”,点击这个文本框之后这三个字消失，之后在这个文本框中输入的文字变为红色。

3、 4张图片切换(下面有4个数字跟着切换，鼠标移动到数字上显示对应的图片停止，离开后4秒继续从当前图片开始切换图片)

提示：定义计时器：var timer = setInterval(….);  取消计时器：clearInterval(timer)

DOM层级关系

按标签类型获取元素集合

//根据html元素的标签名，来得到页面上所有div元素的集合。

var divs = document.getElementsByTagName("div");

for(var i in divs){

divs.item(i).innerHTML ="这是被修改的div";

}

节点node与nodeName、id

节点是指在DOM集合中的一个元素。相对于集合整体而言，它是一个点。

节点也有相应的属性，比如：nodeName和id

nodeName：是指html元素的标签名，比如：input、div。

id : 就是元素的标识名称。

.hasAttribute()

该方法用于检测某个元素是否包含某个属性。不但可以检测一个元素是否能够使用某个属性，还可以检测元素是否定义了一个属性。

示例：

alert( sp.hasAttribute("value"));

.getAttribute(属性名)

示例：

txt.getAttribute("value")

childNodes子节点集合

代表一个元素中包含的所有的子元素的集合

var sp=document.getElementById("sp");

//得到子节点集合

var spChildren = sp.childNodes;

for(var i in spChildren){

spChildren.item(i).innerHTML ="我是子节点";

}

parentNode父节点

获取元素的上一层节点

var sp=document.getElementById("sp");

var father = sp.parentNode;

alert(father.outerHTML);

js之面向对象

能够用程序来描述的事物，我们都可以把它看作是一个对象。

函数的参数化

在javascript中，函数也可以看作是一个对象，只要是对象，就可以被放在变量中赋值和传递。

变量化

var fun = function(){

alert("这是一个函数");

};

fun(); //在变量名的后面添加一个括号，就是调用变量中的函数

参数化

function fnDo(fnQuery){

fnQuery(); //传入的参数，是一个可以执行的方法。

}

//直接把函数作为参数传递到fnDo的参数fnQuery中。

fnDo(function(){  alert("这是一个作为参数传递的函数！") });

在javascript中定义对象：方法一

定义一个student对象

var student = {};

为对象定义参数属性

student.name = "小强";

student.age = 19;

student.sex ="男";

alert(student.name + "今年" + student.age +"岁，是"+student.sex+"生");

为对象定义函数方法

student.introduce = function(){

//this就代表调用这个函数的对象，也就是当前对象

alert("大家好，我叫"+this.name + "今年" + this.age +"岁，是"+this.sex+"生");

};

方法就是对象所执行的动作。

执行对象的方法

格式：对象名.方法();

比如：student.introduce();

在javascript中定义对象：方法二

在定义对象的同时，就向对象中添加属性和方法。

var student ={

name:"小明",

age:15,

sex:"男",

introduce:function(){alert("大家好，我叫"+this.name + "今年" + this.age +"岁，是"+this.sex+"生");}

}

student.introduce();

用方法批量生成对象

可以用一个函数来构造并返回存储的对象的变量。

function createStudent(sName,sAge,sSex,sFn){

var student ={};

student.name = sName;

student.age = sAge;

student.sex = sSex;

student.introduce = sFn;

return student;

}

//第四个参数是一个函数function

var  myFun = function(){

//this不管放在哪里，都只显示当前对象的信息

alert(this.name+"今年"+this.age+"岁"+this.sex+"生");

}

var 小强 = createStudent("小强",1,"男",myFun);

var 小明 = createStudent("小明",12,"男",myFun);

var 小红 = createStudent("小红",19,"女",myFun);

var 小芳 = createStudent("小芳",22,"女",myFun);

小强.introduce();

小明.introduce();

小红.introduce();

小芳.introduce();

 

小练习：

1、创建一个员工对象employee，他有几个属性：姓名、入职时间、基本工资、本月迟到次数（每次扣30）、旷工次数（扣3天，假设本月22个工作日），然后定义一个方法：显示本月实现工资。

2、修改上述代码，写一个可以批量创建员工对象的函数。并用这个函数创建5名员工，依次显示出他们的实际工资。

在javascript中创建类

类可以理解为是一种类的事物的共同的特征或模版。

我们可以用类来创建这个种类的一个具体的成员，也就是对象。

方法一prototype：

prototype是在javascript中专门用于辅助实现类与对象的创建一个参数。

示例：

//构造函数

function student(name,age){

this.name = name;

this.age = age;

}

student.prototype.share =[];

student.prototype.talkSelf = function(){

alert("大家好，我叫"+this.name +"今年"+this.age+"岁");

}

var std1 = new student("小明",17);

var std2 = new student("小强",18);

std1.talkSelf();

std2.talkSelf();

方法二：更简化的方法

function student(name,age){

this.name = name;

this.age = age;

this.talkself = function(){

alert("我叫"+this.name+"今年"+this.age+"岁");

}

}

var s1 = new student("小明",17);

var s2 = new student("小张",18);

s1.talkself();

s2.talkself();

小练习：

定义一个产品类，其属性包括：产品名、型号、价格、简介。该产品还有一个方法：优惠价（原价格的8.5折），执行该函数后会显示提示框“某型号的某产品的优惠价是多少”。用这个类创建三个具体的产品，并调用其方法优惠价。

JSON

json就是用一段字符串来描述一个对象的一种格式，它源自于javascript中定义对象的语法格式。也就是说json是一种数据传递与存储格式，同时它也是javascript中的对象。

示例，假设获取一段天气信息：

var wStr = "{

'date':'20161024',

'maxT':25,

'minT':10,

'wind':2,'

rain':'多云转阴'}";

eval("var weather = "+wStr);

alert("今天是"+weather.date+"日，风力"+weather.wind+"级，最高气温"+weather.maxT+"最低气温"+weather.minT+weather.rain);

 

//说明：属性与属性之间用逗号分隔，属性名与属性值之间用：冒号分隔（左边是包含在双引号中的属性名，右属性值），属性值可以是：字符串、数值、数组，甚至是另一段json。

JSON中的数组

在javascript中我们可以用方括号[]来代表一个数组，它与new Array()的作用是一样，都是定义一个数组。

var arr = [1,2,3,4,5,67,7,"tom","jerry"];

或

var arr = [];

arr.unshift(1);

arr.unshift(2);

arr.unshift("tom");

arr[3]="jerry";

将数组作为json的属性值

var weather={

"tempByTime":[9,10,15,21,21,19,17,11]

}

for(i= 0 ;i<weather.tempByTime.length;i++){

document.write(i*3+"点到"+((i+1)*3)+"点的温度是"+weather.tempByTime[i]+"摄氏度<br />");

}

在数组中包含多个json

在数组中可以包含多个json，也就是多个javascript对象。

var weather=[

{"date":"20161024","maxT":15,'minT':10,'wind':2,'rain':'多云转阴'},

{"date":"20161025","maxT":18,'minT':12,'wind':1,'rain':'阴'},

{"date":"20161026","maxT":12,'minT':5,'wind':2,'rain':'多云'},

{"date":"20161027","maxT":8,'minT':4,'wind':1,'rain':'多云转阴'}

];

for(var i =0; i<weather.length ;i++){

document.write("今天是"+weather[i].date+"日，风力"+weather[i].wind+"级，最高气温"+weather[i].maxT+"最低气温"+weather[i].minT+weather[i].rain+"<br />");

}

复杂的例子：

比如：我们现在去获取服务端的一个产品列表

var products = {

"kind":"上衣",

"orderBy":"价格",

"list":[

{"pName":"美特斯帮维","price":998,"img":"image/1.jpg"},

{"pName":"真维斯","price":588,"img":"image/2.jpg"},

{"pName":"李宁","price":388,"img":"image/3.jpg"},

{"pName":"七匹狼","price":1198,"img":"image/4.jpg"},

{"pName":"D&G","price":88,"img":"image/5.jpg"},

]

};

 

document.write("<table border='1'>");

for(i=0;i<products.list.length;i++){

document.write("<tr>");

document.write("<td>产品名："+products.list[i].pName+"</td>");

document.write("<td>价格："+products.list[i].price+"元</td>");

document.write("<td>产品图片：<img src="+products.list[i].img+" width='300px' /></td>");

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

}

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

 

小练习：

1、 定义一个javasripct产品对象，product，这个产品对象有产品名称：”pName”，型号：pMode，价格pPrice，包含一个函数方法showProduct()，用户弹出一个对话框，显示产品的名称、型号、价格。

2、 定义一个javasripct学生对象，这个学生对象有姓名：pname、成绩pScore，成绩中包含一个数组，数组中包含三个js对象，分别是语文成绩 ”yw”：及分类，数学成绩 ”sx”：及分数，英语成绩“en”：及分数。

3、 用一段json来存储第一题中的产品对象，要求在[]数组中包含5个产品对象(不包含showProduct()函数，只有属性)，用循环依次alert()显示出5个产品信息。

4、 用一段json来存储第二题中的学生对象，并为每个学生添加一个头像：”img/01.jpg”属性，要求在数组中包含15个学生对象，然后以表格的形式，显示出所有学生的信息、头像和各科成绩，最终统计出全班各科的总分。

机器人聊天程序

实现与机器人一问一答的功能，每次都会弹出一个输入框要求用户输入一句话。
如果这句话中包含"你好"的话，机器人回答：你好，我是机器人。
如果这句话中包含"吃饭"或"吃了么"的话，机器人回答：我充电不吃饭。
如果这句话中包含"几岁"的话，机器人回答：我age岁了，其中age是一个变量。
如果这句话中包含"过生日"的话，机器人的年龄加一，并回答：我又大了一岁，其中age是一个变量。
如果这句话中包含"谈恋爱"的话，机器人回答：年龄小，不考虑。

等等，自行添加对话内容。

参考，桌面电子文件w3cSchool中的indexof()函数的用法。