【HM】第2课:JavaScript基础

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
简介:

<pre>

 

day02

 

第一天的内容:

         *html标签里面的表单标签

         *html标签里面的表格标签

 

思维导图

wKiom1WPVbLR_T2gAAF_kmafGpw818.jpg

 

1JavaScript的简介

         什么是JavaScriptjs是一个基于对象和事件驱动的语言,应用客户端。

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

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

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

 

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

 

         * js三个特点

         **基于事件驱动的

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

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

 

         * JavaScriptjava区别(雷锋和雷峰塔)

         **JavaScript是网景公司开发的,javasun公司,现在是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

                   *ECMAEuropean Computer Manufactures Association 是一个组织,欧洲计算机制造商协会

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

         ***第二部分:bom对象

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

 

         ***第三部分:dom对象

                   *document object model:文档对象模型

 

2jshtml的结合方式

         *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>

 

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

         *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的引用类型

 

4js的语句(和java相似,只是变量声明要用var

         *java里面有哪些语句

         **判断语句 if

         **switch语句

         **循环语句 for  while  do-while

 

         *js的判断语句 if

         **=:表示赋值,==:表示判断

         **代码

                   //if判断语句

                   vara = 50;

                   if(a== 5) {

                            alert(a);

                   }else {

                            alert("other");

                   }

        

         *jsswitch语句

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

                   }

 

5js的运算符

         *算术运算符

                   +- * / ....

        

         *关系运算符

                   <> <= >= ==

        

         *逻辑运算符

                   &&|| !

                   *&& : 条件同时满足

                   *||  只要一个满足成立

 

         *三元运算符

                   ?:

                   a>5? 10 : 0

        

         ** number类型的操作(易错点1

         ***如果在java里面

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

         ***jsnumber里面不区分整数和小数

                   //number类型的操作

                   varaa = 123;

                   document.write(aa/1000*1000);结果是 123java语法会返回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,因为ab的类型不一样。

 

                  

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

 

7js的数组

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

         *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

 

8jsString对象

         varstr = "abc";

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

                   //length属性

                   varstr = "abcdef";

                   document.write(str.length);

         *方法:

         **有两类:

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

                                     简单多了

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

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

                  

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

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

 

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

                            *htmlfont标签属性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),

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

 

10jsArray对象

         *创建数组

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

 

11jsDate对象

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

                   *应用场景:

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

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

 

12jsMath对象(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 次幂

 

13jsRegExp对象

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

         *方法:

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

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

                            varstr = "zhng";

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

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

 

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

 

14jsbom对象

         *浏览器对象模型

         *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代码

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

                            个浏览器调试

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

         *java里面是成员变量

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

 

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

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

 

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

 

16script标签位置

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

 

         *知识的引入

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

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

 

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

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

 

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

课程总结:

         1)什么是js

         2js的三个特点

         3jsjava的区别

         4js的组成

 

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

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

         *var定义变量

 

         6js的语句(与java类似)

         *=表示赋值,==判断

 

         7js的运算符

         *number不区分整数和小数

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

         *不是数字返回NaN

         *=====区别:==比较的是值,===比较值和类型

 

         8js的数组

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

         *var arr2 = new Array(3);

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

         *属性:length,获取数组的长度

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

 

         9jsString对象

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

         *第一类与html相关的方法

        

         10jsArray对象

         *属性:length,获取数组的长度

         *push方法:添加元素

 

         11jsDate对象

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

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

 

         12jsMath对象

         *方法,直接Math.方法名

 

         13jsRegExp对象

         *方法 test方法

 

         14jsbom对象

         *navigatorscreenlocationhistory

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

         **三个方法

         ***alert()

         ***setInterval()

         ***setTimeout()

 

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

 

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

 

</pre>









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


相关文章
|
JavaScript
JS基础之解构赋值
解构赋值 在js中,我们经常会将对象或者数组里面的一部分数据作为参数传递给函数,如果我们使用传统的.方法会很麻烦。
|
移动开发 JavaScript 前端开发
JavaScript基础知识梳理-上
对JavaScript基础知识梳理-上
221 31
JavaScript基础知识梳理-上
|
存储 JavaScript 前端开发
JavaScript基础(一篇入门)
JavaScript基础(一篇入门)
215 0
JavaScript基础(一篇入门)
|
JavaScript 前端开发
2021琴理工作室JS基础教学(三)
当网页被加载的时候,浏览器就会创建文档对象模型,也就是dom 而dom可以看做一颗树
74 3
2021琴理工作室JS基础教学(三)
|
JavaScript 前端开发
JavaScript 入门基础 - 运算符(三)
文章目录 JavaScript 入门基础 - 运算符(三) 1.什么是运算符 2.表达式和返回值 3.算术运算符概述 4. 赋值运算符 5.递增和递减运算符 5.1 递增和递减运算符概述 5.2 递增运算符 5.2.1 前置递增运算符 5.2.2 后置递增运算符 5.2.3 后置和前置运算符的区别 6. 比较运算符 7. 逻辑运算符 7.1 逻辑运算符概述 7.2 逻辑与 7.3 逻辑或 7.4
149 0
JavaScript 入门基础 - 运算符(三)
|
存储 JSON JavaScript
JavaScript 入门基础 - 变量 / 数据类型(二)
JavaScript 入门基础 - 变量 / 数据类型(二)
100 0
JavaScript 入门基础 - 变量 / 数据类型(二)
|
JavaScript 前端开发 物联网
JavaScript 入门基础 / 概念介绍(一)
JavaScript 入门基础 / 概念介绍(一)
134 0
JavaScript 入门基础 / 概念介绍(一)
|
JavaScript 前端开发 Java
JavaScript的基础使用
JavaScript的基础 一、javascript简介 JavaScript简称js,最初由网景(现在的Mozilla)公司创建,由于商标冲突原因,其标准版本命名为ECMAScript,但是一般人们还是叫JavaScript,只在谈标准的时候说到ECMAScript这个名字。值得注意的是JavaScript与java没有任何关系,就像雷峰塔(神话中镇压白娘子的塔)和雷锋。此外js(JavaScript)和jsp(java servlet pages)也没有关系。   js的工作分为两部分,一部分属于js语言本身的特性,而另一部需要依靠宿主环境(web浏览器)才能完成。 二、javascri
JavaScript的基础使用
|
JavaScript 前端开发
vue js文字跑马灯基础版本
提供两种解决思路
284 1
|
JavaScript 前端开发
原生js制作选项卡详解,适合无基础的人学习
原生js制作选项卡详解,适合无基础的人学习
134 0
原生js制作选项卡详解,适合无基础的人学习