<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中空格需要转义
*代码
//循环行
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>
本文转自屠夫章哥 51CTO博客,原文链接:http://blog.51cto.com/4259297/1665734,如需转载请自行联系原作者