天天看点

【HM】第2课:JavaScript基础

<pre>

day02

第一天的内容:

         *html标签里面的表单标签

         *html标签里面的表格标签

思维导图

<a href="http://s3.51cto.com/wyfs02/M02/6F/03/wKiom1WPVbLR_T2gAAF_kmafGpw818.jpg" target="_blank"></a>

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里面写标签 &lt;script type="text/javascript"&gt; js代码;&lt;/script&gt;

         ***代码

                   &lt;scripttype="text/javascript"&gt;

                            alert("haha");

                   &lt;/script&gt;

         **第二种结合方式:

         *首先,在html里面写一个标签,&lt;script type="text/javascript" src="js文件的路径"&gt;&lt;/script&gt;

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

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

         ***注意二:script标签不能在标签内结束,不能&lt;script type="text/javascript" src="js文件的路径"/&gt;

          只能这样结束 &lt;script type="text/javascript" src="js文件的路径"&gt;&lt;/script&gt;

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(变量名称),查看当前变量的类型

         **代码

                   //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:

                   default:

                            ....

         }

                   //switch语句

                   varb = 51;

                   switch(b){

                            case2:

                                     alert("2");

                                     break;

                            case5:

                                     alert("5");

                            default:

                                     alert("other");

         *js的循环语句

         **while语句

                   //while循环语句

                   varc = 5;

                   while(c&lt;8){

                            alert(c);

                            c++;

         **for循环语句

                   //for循环语句

                   for(vari=0;i&lt;=3;i++) {

                            alert(i);

         **知识引入:

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

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

                            //alert(i);

                            document.write(i);

                            document.write("&lt;br/&gt;");

5、js的运算符

         *算术运算符

                   +- * / ....

         *关系运算符

                   &lt;&gt; &lt;= &gt;= ==

         *逻辑运算符

                   &amp;&amp;|| !

                   *&amp;&amp; : 条件同时满足

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

         *三元运算符

                   ?:

                   a&gt;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("&lt;hr/&gt;");

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

                   var a = '23';

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

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

         **boolean类型的操作

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

                   //boolean类型操作

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

                   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中空格需要转义  &amp;nbsp;

         *代码

                   //循环行

                   document.write("&lt;tableborder='1'&gt;");

                   for(vari=1;i&lt;=9;i++) {

                            document.write("&lt;tr&gt;");

                            //循环列

                            for(varj=1;j&lt;=i;j++) {

                                     document.write("&lt;td&gt;");

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

                                     document.write("&lt;/td&gt;");

                            }

                            //document.write("&lt;br/&gt;");

                            document.write("&lt;/tr&gt;");

                   document.write("&lt;/table&gt;");

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&lt;arr.length;i++) {

                   //获取数组里面的值

                   vara = arr[i];

                   //第一种方式

                   vararr1 = [10,"aa"];

                   document.write(arr1);

                   document.write("&lt;br/&gt;");

                   document.write(arr1.length);

                   //第二种方式

                   vararr2 = new Array(3);

                   arr2[0]= "mary";

                   arr2[1]= "jack";

                   arr2[2]= "lucy";

                   document.write(arr2);

                   document.write(arr2.length);

                   //第三种方式

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

                   document.write(arr3);

                   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(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中有&lt;sub&gt;表示下标和&lt;sup&gt;表示上标

                            =

         第二类:与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("&lt;hr/&gt;");

                   vars = "abcdefghytre";

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

                            //第一个参数字符的开始位置(从0开始);第二个参数从开始位置向后获取几个字符

                   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.join("-"));

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

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

                   //输出原始值

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

                   //执行pop方法的返回值

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

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

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

                   vara = new Array();

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

                   vara = new Array(2);

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

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

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

                   //数组原始的长度

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

                   //执行push方法的返回值

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                   //遍历

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

                            alert(arr6[i])

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

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

                   document.write(arr8);

                   document.write(arr8.reverse());

11、js的Date对象

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

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

                   //获取当前的时间

                   vardate = new Date();

                   document.write(date);

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

         =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

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

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

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

                   vara = 10.5;

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

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

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

                   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标签位置

         *一般约定:放到&lt;/body&gt;后面

         *知识的引入

         **在表单标签里面 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的数组

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

         (9)js的String对象

         *属性:length,获取字符串的长度

         *第一类与html相关的方法

         (10)js的Array对象

         *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标签位置约定放到&lt;/body&gt;后面

&lt;/pre&gt;

      本文转自屠夫章哥  51CTO博客,原文链接:http://blog.51cto.com/4259297/1665734,如需转载请自行联系原作者