<pre>

day02

第一天的内容：

*html标签里面的表单标签

*html标签里面的表格标签

思维导图

1、JavaScript的简介

* 什么是JavaScript：js是一个基于对象和事件驱动的语言，应用客户端。

**基于对象：在java里面如果使用对象需要创建；在js里面提供一些对象，直接使用

**事件驱动：每次调用事件产生一个新的效果

**客户端：专门指的浏览器

*js可以做什么：js可以实现一些简单的动态的效果

* js三个特点：

**基于事件驱动的

**安全性特点：不能直接访问本地的文件

**跨平台特点：只有平台上面安装了支持js的浏览器可以运行

* JavaScript和java区别（雷锋和雷峰塔）

**JavaScript是网景公司开发的，java是sun公司，现在是oracle产品

**java是强类型语言，JavaScript是弱类型

***比如在java里面定义变量： int a = 10; 这样写就不正确了int aa = "20";

***在js里面没有这些规定，使用一个关键字 var b = 10; var c = "10";var f = true;

**java跨平台性需要依赖虚拟机，但是js只需要有一个支持js的浏览器就可以了

* js的组成：

**包含三部分

***第一部分：ECMAScript

*ECMA：European Computer Manufactures Association 是一个组织，欧洲计算机制造商协会

* 由这个组织执行规范，这个规范是js的语法，语句....

***第二部分：bom对象

*browser object model: 浏览器对象模型

***第三部分：dom对象

*document object model：文档对象模型

2、js和html的结合方式

*js的注释有两种：单行注释// , 多行注释 /* */

*java里面的注释有三种：单行注释// , 多行注释 /* */，文档注释 /**  */

*有两种结合方式

**第一种结合方式：在html里面写标签 <script type="text/javascript"> js代码;</script>

***代码

<scripttype="text/javascript">

alert("haha");

</script>

**第二种结合方式：

*首先，在html里面写一个标签，<script type="text/javascript" src="js文件的路径"></script>

*其次，创建一个js文件，在js文件里面写js代码

***注意一： 当使用了外部引入js文件的方式时候，在script标签里面就不要写js代码了,即使写了也不会执行。

***注意二：script标签不能在标签内结束，不能<script type="text/javascript" src="js文件的路径"/>

只能这样结束 <script type="text/javascript" src="js文件的路径"></script>

3、js的数据类型和变量声明

*java八个基本数据类型和对应的包装类

*在js里面定义变量，都使用一个关键字 var

*js有五个原始类型（注意不要和对象的类型弄混了）

**string：字符串类型

varstr = "abc";

**number：数字类型

varaa = 100;

**boolean：布尔类型

varflag = true;

**null：对象引用为空，空的引用      (？？用typeof怎么体现出来？？)

**在java里面，Date date = new Date();

**var date = null;

**undifined: 定义一个变量，但是没有赋值  var cc;

*运算符：typeof(变量名称)，查看当前变量的类型

**代码

varflag = true;

//alert(flag);

alert(typeof(flag))

*js的引用类型

4、js的语句（和java相似，只是变量声明要用var）

*java里面有哪些语句

**判断语句 if

**switch语句

**循环语句 for  while  do-while

*js的判断语句 if

**=：表示赋值，==：表示判断

**代码

//if判断语句

vara = 50;

if(a== 5) {

alert(a);

}else {

alert("other");

}

*js的switch语句

**java里面的switch语句

**java里面switch语句在jdk1.7开始支持string类型

switch(a){

case10:

break;

case5:

break;

default:

....

}

**代码

//switch语句

varb = 51;

switch(b){

case2:

alert("2");

break;

case5:

alert("5");

break;

default:

alert("other");

}

*js的循环语句

**while语句

***代码

//while循环语句

varc = 5;

while(c<8){

alert(c);

c++;

}

**for循环语句

**代码

//for循环语句

for(vari=0;i<=3;i++) {

alert(i);

}

**知识引入：

可以直接使用dom对象里面的方法实现向页面输出内容的操作

document.write("固定值、变量、html标签")

**代码

//for循环语句

for(vari=0;i<=3;i++) {

//alert(i);

document.write(i);

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

}

5、js的运算符

*算术运算符

+- * / ....

*关系运算符

<> <= >= ==

*逻辑运算符

&&|| !

*&& : 条件同时满足

*|| ： 只要一个满足成立

*三元运算符

?:

a>5? 10 : 0

** number类型的操作（易错点1）

***如果在java里面

inta = 123/1000*1000; 在java里面结果是0

***在js的number里面不区分整数和小数

//number类型的操作

varaa = 123;

document.write(aa/1000*1000);结果是 123（java语法会返回0）

varbb = true;

document.write(bb/2);    结果是0.5

***如果执行算术操作，值不是一个数字，返回NaN

**字符串的相加和相减操作

***在java里面字符串相加，做拼接操作

//string的相加和相减

varstr = "aa";

document.write(str+1);//字符串拼接输出aa1

document.write(str+true);//字符串拼接输出aatrue

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

document.write(str-1);//       真正执行了相减运算,如果结果不是数字则输出NaN

var a = '23';

outln(a- true);          //输出22

outln(a- false);         //输出23

**boolean类型的操作

***会把boolean类型true当做1；会把boolean类型的false当做0

//boolean类型操作

varflag = true;

document.write(flag+1);//会把boolean类型true当做1

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

varflag1 = false;

document.write(flag1+1)//会把boolean类型的false当做0

**a++和++a区别

***a++：先执行再+1

***先+1，再执行

**== ：条件判断

**===和==区别

*** == 比较的是值，与类型无关

*** === 比较是值和类型

例子：

var a = 'true';

varb = true;

outln((a== b);   //返回的是false

vara = '1';

var b = true;

outln((a == b) + "--"+  typeof(a) + "--"+  typeof(b));              //返回true

outln(a === b);                   //返回false

vara = '23';

var b = 23;

outln((a == b));          //返回的是true

outln(a === b);          //返回的是false，因为a和b的类型不一样。

6、练习：99乘法表

*在html中空格需要转义  &nbsp;

*代码

//循环行

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

for(vari=1;i<=9;i++) {

document.write("<tr>");

//循环列

for(varj=1;j<=i;j++) {

document.write("<td>");

document.write(j+"*"+i+"="+i*j);

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

}

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

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

}

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

7、js的数组

*定义一个变量只能存一个值，但是数组里面可以存多个值，并且值的类型可以各不相同。

*java里面数组定义： String[] arr = {"aa","bb"};

**在java里面如果这样写，肯定不行的：String[] arr = {10,"bb"};

*js的定义数组

**第一种： var arr1 = new Array();

**第二种： var arr2 = [10,"aa",true];

**第三种： var arr3 = new Array(5); 表示定义一个数组，数组的长度是5

***赋值，通过下标

arr3[0]= "aaa";

**第四种： var arr4 = new Array(5,6,7);表示定义一个数组，数组里面的元素是 5 67

*数组里面的属性：length，代表数组的长度

*遍历数组

for(vari=0;i<arr.length;i++) {

//获取数组里面的值

vara = arr[i];

}

**代码

//第一种方式

vararr1 = [10,"aa"];

document.write(arr1);

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

document.write(arr1.length);

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

//第二种方式

vararr2 = new Array(3);

arr2[0]= "mary";

arr2[1]= "jack";

arr2[2]= "lucy";

document.write(arr2);

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

document.write(arr2.length);

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

//第三种方式

vararr3 = new Array(5,6,7);

document.write(arr3);

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

document.write(arr3.length);

*js数组长度是可变的

*长度是最大的下标+1

*没有值，显示空字符串 ""

//js数组是可变的

vararr4 = new Array(5);

arr4[0]= "aaa";

arr4[1]= "bbb";

arr4[10]= "ccc";

document.write(arr4);              //arr[2-9]的值是为空。

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

document.write(arr4.length);                   //返回值是11

8、js的String对象

varstr = "abc";

*属性：length 得到字符串的长度

//length属性

varstr = "abcdef";

document.write(str.length);

*方法：

**有两类：

第一类：与html相关的方法（改变字符串的样式的方法），这个比write(标签)要来得

                                     简单多了。

=bold() 使用粗体显示字符串。

==document.write(str.bold());

=fontcolor() 使用指定的颜色来显示字符串。

==document.write(str.fontcolor("red"));

=fontsize() 使用指定的尺寸来显示字符串。

*在html中font标签属性size值 1-7

*在fontsize方法里面值也是1 - 7

==document.write(str2.fontsize(7));

=link() 将字符串显示为链接

==document.write(str3.link("0-html的转义.html"));

=sub()和sup()方法

*在html中有<sub>表示下标和<sup>表示上标

=

第二类：与java相似的方法（在java里面也有类似的方法）

=charAt() 返回在指定位置的字符

==var str = "abcd";

document.write(str.charAt(10));//如果查找的位置不存在，返回空字符串""（在java

语法中会直接抛出越界异常）

=concat() 连接字符串

==var a = "hello";

varb = "world";

document.write(a.concat(b));

=indexOf() 检索字符串或字符，不存在则返回-1-------注意一点：O字母要大写----------

==var str1 = "abcdef";

document.write(str1.indexOf("h"));

=split() 把字符串分割为字符串数组

==var str2 = "a-b-c-d";

vararr = str2.split("-");//分割之后返回的是数组

document.write(arr.length);

=substr() 从起始索引号提取字符串中指定数目的字符。

=substring() 提取字符串中两个指定的索引号之间的字符，不包括后面的索引位置。

==document.write("<hr/>");

vars = "abcdefghytre";

document.write(s.substr(3,5));  //defgh ,

//第一个参数字符的开始位置（从0开始）；第二个参数从开始位置向后获取几个字符

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

document.write(s.substring(3,5));//de  [3,5),

//第一个参数字符的开始位置，第二个参数表示结束位置但是不包含结束位置

10、js的Array对象

*创建数组

*var arr1 = [1,"aa"];

*var arr2 = new Array(3);

*var arr2 = new Array(3,5,6);

*属性：length，获取数组的长度

*方法：

=concat() 连接数组，并返回结果（object对象类型）。

==var arr1 = ["mary","jack","tom"];

vararr2 = ["lucy","zhangsan","wanger"];

document.write(arr1.concat(arr2));

= join() 把数组通过指定的分隔符进行分隔，返回string类型。

==var arr3 = new Array(3);

arr3[0]= "aa";

arr3[1]= "bb";

arr3[2]= "cc";

document.write(arr3);

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

document.write(arr3.join("-"));

=pop() 删除并返回数组的最后一个元素，如果数组为空返回undefined。

==document.write("<hr/>");

vararr4 = ["mary","jack","tom","lucy"];

//输出原始值

document.write("old:"+arr4);

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

//执行pop方法的返回值

document.write("return:"+arr4.pop());

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

//执行pop方法之后的数组的值

document.write("new:"+arr4);

vara = new Array();

outln(a.pop());          //返回undefined

vara = new Array(2);

outln(a.pop());          //返回undefined

=push() 向数组的末尾添加元素，并返回新数组的长度

==document.write("<hr/>");

vararr5 =["mary","jack","tom","lucy","wangwu"];

//输出原始值

document.write("old:"+arr5);

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

//数组原始的长度

document.write("oldlength: "+arr5.length);

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

//执行push方法的返回值

document.write("return:"+arr5.push("zhaoliu"));

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

//执行push方法之后数组的值

document.write("new:"+arr5);

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

//执行push方法之后数组的长度

document.write("newlength: "+arr5.length);

==如果使用push方法添加数组，把数组当做一个整体添加进去,即使添加的数组

有多个元素，新数组的长度也只会加1.

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

vararr6 = ["AAA","BBB","CCC"];

vararr7 = ["TTT","WWW"];

//输出原始值

document.write("old:"+arr6);

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

//数组原始的长度

document.write("oldlength: "+arr6.length);

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

//执行push方法的返回值

document.write("return:"+arr6.push(arr7));

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

//执行push方法之后数组的值

document.write("new:"+arr6);

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

//执行push方法之后数组的长度

document.write("newlength: "+arr6.length);

//遍历

for(vari=0;i<arr6.length;i++) {

alert(arr6[i])

}

=reverse() 颠倒数组中元素的顺序。

==var arr8 = ["AAA","BBB","CCC"];

document.write(arr8);

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

document.write(arr8.reverse());

11、js的Date对象

*在java里面获取当前时间 Date date = new Date();

*在js获取当前时间 var date = new Date();

//获取当前的时间

vardate = new Date();

document.write(date);

//把时间转换成当前格式的时间

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

=toLocaleString() 根据本地时间格式，把Date 对象转换为字符串，注意Locale后面的

e字母容易忘掉写。

==document.write(date.toLocaleString());

*获取当前年，月，星期，日，小时，分，秒，毫秒

=获取当前的年：getFullYear() 从 Date 对象以四位数字返回年份，getYear()是返回两

位(已过时)

==document.write(date.getFullYear());

=获取当前的月：getMonth() 从 Date 对象返回月份 (0 ~ 11)。

==document.write(date.getMonth()+1);

*返回月份 (0 ~ 11)，所有想要得到准确的月份，需要+1

=获取当前的星期：getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。

==document.write(date.getDay());

*获取星期一到星期六返回1-6；但是获取星期日返回 0

=获取当前的日：getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。

==document.write(date.getDate());

=获取当前小时：getHours()

==document.write(date.getHours());

=获取当前分钟：getMinutes()

==document.write(date.getMinutes());

=获取当前的秒：getSeconds()

==document.write(date.getSeconds());

=获取当前毫秒：1970至今的毫秒数getTime() 返回 1970 年 1 月 1 日至今的毫秒数

==document.write(date.getTime());

*应用场景：

**第一种用途：让某个值每次都不相同（把每个用户名添加随机的毫秒数）

**第二种用途：防止请求缓存（在请求的地址后添加一个参数是毫秒数）??????

12、js的Math对象(和java一样，里面的属性和方法都是静

           态的)

*属性：PI，圆周率 3.14

*方法：

=floor(x) 对数进行下（小）舍入       //注意负数

=ceil(x) 对数进行上（大）舍入         //注意负数

=round(x) 把数四舍五入为最接近的整数

==var c = 10.1;

//floor(x)对数进行下舍入

document.write(Math.floor(c));//10

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

//ceil(x)对数进行上舍入

document.write(Math.ceil(c));//11

//round(x)把数四舍五入为最接近的整数

vara = 10.5;

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

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

=random() 返回 0 ~ 1 之间的随机数，包括0不包括1.

==//random() 返回 0 ~ 1 之间的随机数

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

document.write(Math.random());

==得到0-9之间的随机数，结合其它的数字函数和运算可以得到自定义范围的随

机数。

document.write(Math.floor(Math.random()*10));

=max(x,y) 返回 x 和 y 中的最高值

=min(x,y) 返回 x 和 y 中的最低值

=pow(x,y) 返回 x 的 y 次幂

13、js的RegExp对象

*正则表达式：定义字符串出现的规则

*方法：

=test 检索字符串中指定的值。返回 true 或 false

==var reg = new RegExp("[a]");//定义正则表达式

varstr = "zhng";

document.write(reg.test(str));

*调用对象里面的test方法，传递要匹配字符串，如果可以匹配返回true，否则返回false

安装三类浏览器：ie8及其以上版本，火狐浏览器，谷歌浏览器

14、js的bom对象

*浏览器对象模型

*Navigator ：获取浏览器的信息

*screen ：获取当前屏幕的信息

*Location ： URL 的信息，属性href 得到当前请求的 URL地址。

*history ：获取浏览器里面访问的路径的历史

* window对象（重点掌握）

**代表一个窗口对象，顶层对象

=alert()：向页面弹出框  window.alert();window可以省略

=setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。

==表示在一定的时间内，重复执行js代码

*在每一秒以内重复执行 alert("abc");

==//每三秒，执行一次alert操作

window.setInterval("alert('abc');",3000)：第一个参数是js代码(注意要加双引号，如

果js代码中有双引号，应改为单引号)，第二个参数是毫秒数

=setTimeout() 在指定的毫秒数后调用函数或计算表达式。（注意o字母小写）

==表示在一定的时间之后，执行一次js代码

！！而且应注意以上两个方法受浏览器的兼容性影响大，如果出现问题，应多找几

个浏览器调试。

15、js的全局变量和局部变量

*在java里面是成员变量

*全局变量：在script标签里面定义一个变量，这个变量可以在html中的任意script标签里面都可以使用

*局部变量：在某个方法里面定义一个变量，这个变量只能在这个方法里面使用

**js定义方法（函数） function add1() { }

*在ie里面自带了调试工具，点击键盘上面F12，在浏览器下面出现一个条，选择控制台，得到错误信息

16、script标签位置

*一般约定：放到</body>后面

*知识的引入

**在表单标签里面 type="button"

**点击按钮，触发一个事件，鼠标点击事件

*html的解析是从上到下进行解析的，如果在body标签里面写输入项，把script标签放到head里面

，如果在js里面获取输入项的值肯定获取不到的，因为解析到获取操作时候，还没有解析到输入项那部分，所以肯定得不到

===========================================================================================

课程总结：

（1）什么是js？

（2）js的三个特点

（3）js和java的区别

（4）js的组成

（5）js的原始类型和变量声明

*有五个原始类型 string number  boolean  null undifined

*var定义变量

（6）js的语句（与java类似）

*=表示赋值，==判断

（7）js的运算符

*number不区分整数和小数

*string操作+拼接字符串，-真正减法操作

*不是数字返回NaN

*==和===区别：==比较的是值，===比较值和类型

（8）js的数组

*var arr1 = [1,"aa"];

*var arr2 = new Array(3);

*var arr2 = new Array(3,5,6);

*属性：length，获取数组的长度

*数组的长度：最大的下标+1

（9）js的String对象

*属性：length，获取字符串的长度

*第一类与html相关的方法

（10）js的Array对象

*属性：length，获取数组的长度

*push方法：添加元素

（11）js的Date对象

*获取当前年，月，星期，日，小时，分，秒

**获取毫米数 使用 getTime方法

（12）js的Math对象

*方法，直接Math.方法名

（13）js的RegExp对象

*方法 test方法

（14）js的bom对象

*navigator、screen、location、history

**window对象是一个顶层对象，表示一个窗口

**三个方法

***alert()

***setInterval()

***setTimeout()

（15）js的全局变量和局部变量

（16）script标签位置约定放到</body>后面

</pre>