【HM】第3课:JavaScript高级-阿里云开发者社区

开发者社区> 开发与运维> 正文

【HM】第3课:JavaScript高级

简介:

<pre>

 

day03

 

昨天内容回顾

         *js的组成:ECMAScript bom dom

 

         *jshtml的结合方式:两种

 

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

 

         *js的运算符

                   **字符串相减操作,真正减法运算

                   **不是一个数字,返回NaN

                   **布尔类型可以向加相减

        

         *js的语句

                   for(vari=0;i<10;i++){ }

        

         *jsbom对象

                   **navigatorscreenlocationhistory

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

                   ***alertsetIntervalsetTimeout

 

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

 

         *script标签约定放到</body>后面

                  

 思维导图   

wKiom1WPVrCDOTf5AAEo2vowT30584.jpg

1js的函数的创建和使用

         *java里面定义方法格式:

                   publicvoid/int 方法名称(参数列表) {

                            方法体;

                            返回值;

                   }

        

         *js里面定义函数有三种方式

         **第一种定义:使用一个关键字 function 方法名称(参数列表) { 方法体和返回值}

                   =function add1(a,b) { 方法体;返回值可以有也没有没有; }

                   ==function test1() {

                        alert("hello function");

                   }

 

                   //调用函数

                   //test1();

 

                   //实现两个数的相加

                   functiontest2(a,b) {

                            varsum = a+b;

                            //alert(sum);

                            returnsum;

                   }

                   //调用有参数的函数

                   //test2(1,2);

                   alert(test2(2,3));

        

         **第二种定义(匿名函数):使用关键字 function , function() {方法体;返回值; }

                   =var aa = function(m,n) {

                            returnm*n;

                   }

                   typeof(aa)返回function

 

                   /*

                            functionaa(m,n){.....}

                            typeof(aa)返回function

                   */

                   //调用方法

                   alert(aa(4,5));

 

         **第三种定义(了解):(动态函数,函数里面的参数和方法体或者返回值都是通过参数传递进去的)

                   =使用到js里面的内置对象 Function ,直接 new Funtion("函数的参数列表","方法体和返回值")

                   ==var param = "a,b";

                   varmethod = "var sum;sum = a+b;return sum;";

                   varbb = new Function(param,method)

                   /*

                            functionbb(a,b) { ......}

                   */

                   //调用

                   alert(bb(5,6));

 

         ***定义函数之后,一定要调用函数,不然不会执行的

         ***参数列表是不用指定参数类型var的,直接写参数名即可。

2js的函数重载

         *重载:方法名称相同,参数列表不同

         **java里面肯定有重载

        

         *js里面不存在重载

         *js的函数里面有一个数组是arguments,这个数组用来保存传递到函数里面的所有的参数

 

         *java

         publicstatic void main(String[] args)

 

         *js里面模拟重载的效果

                   =function add1() {

                            //alert(arguments.length);

                            varsum = 0;

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

                                     sum+=  arguments[i];

                            }

                            returnsum;

                   }

                   alert(add1(1,2));    

                   alert(add1(1,2,3));  

                   alert(add1(1,2,3,4));

        

         *JS里面存在重载吗?

         **js里面不存在重载

         **但是可以使用函数里面数组arguments模拟重载的效果

 

3js的全局函数

         *这些函数不属于任何的一个对象,使用不需要写任何的对象,直接写函数名称

         =eval():把字符串当成js代码来执行

                   ==var str = "alert('aaaa');";

                   //alert(str);

                   eval(str);

         //其实这个函数在很多处已经被调用了,如在标签中的事件属性中添加响应,就是用字

         符串包裹起来的js代码

         =encodeURI():对字符串编码

         =decodeURI():对编码之后的字符串进行解码

         **在传递参数的过程中,如果参数中包含中文,中文会有乱码问题

         ***解决方式:首先对中文进行编码,获取数据时候在对编码之后的内容进行解码

                   ==var encode1 = "abc123东方不败";

                   vare1 = encodeURI(encode1);

                   document.write(e1);

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

                   //decodeURI():对编码之后的字符串进行解码

                   vard1 = decodeURI(e1);

                   document.write(d1);

         当然了,javascript还提供了一些其它的编解码全局函数。   

 

         = isNaN():判断是否是一个数字(NaN表示非数字,isNaN表示问是非数字吗

                             这个数字是通过检测它的值是不是数字,如果boolean类型的也当作是一个

                             数字。

                   ==var s = "aa";

                   //如果是数字返回 false;如果不是数字返回true

                   alert(isNaN(s));  //返回true

                  

                  

        

         =parseInt():把字符串转化成number类型

                   ==var a1 = "10";

                   document.write(a1+1);

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

                   document.write(parseInt(a1)+1);

        

4js的事件

         1html绑定事件

         **有三种绑定方式

         **第一种:在标签里面写事件的属性(注意函数名加括号

                   =比如: <input type="button" value="button"onclick="js函数"/>

                   ==<input type="button" value="buttontest"onclick="test1();"/>

        

         **第二种:首先得到要绑定事件的标签,在标签对象上面.事件属性名称 = 要调用方法的名称注意不要加括号,否则可能按钮还没有点击就发生这个事件了。

                   **使用document.getElementById();

                   =比如:<input type="text" id="id1" />

                   =js里面得到这个标签 document.getElementById("id1").onclick = add1;

                   ==document.getElementById("id1").onclick = test1;

         &&&&&

                   假如上面不小心将test1写成了test1(),会出现按钮还没有点击就执行了test1这个

                   方法,因为写了test1()前面的onclick就不会产生绑定效果,相当于直接在script

                   调用了test()方法。

         &&&&&&

         **第三种:首先得到要绑定事件的标签,在标签对象上面.事件属性名称=function(){ js代码}

                   =document.getElementById("id1"). {

                            alert("qq");

                   }

 

         2js常用的事件

         =onloadonclick

                   *onload:在html加载时候执行事件

                   ==一般把这个事件绑定到body标签里面

                   ==<body onload="load1();">

 

                   * 鼠标点击事件

 

         =onfocusonblur

                   *onfocus:获取到焦点

                   *onblur:失去焦点

 

                   *无缓存刷新 ctrl  f5

 

                   *onfocus事件问题:在一些低版本的浏览器里面不能用

 

         3onkeypress:键盘事件,点击键盘上面的某个键,会触发这个事件

                                               事件绑定,一定要在标签里面调用函数并传递event参数。在script

                                               里面定义一个带有参数的这个函数。

                   *<input type="text" id="keyid" name="keyname"onkeypress="key1(event);"/>

                   =function key1(obj) {

                            //得到当前点击键盘上面的键的值

                            //alert(obj.keyCode);

                            //如果点击回车,执行alert操作

                            if(obj.keyCode== 13) {

                                     alert("keyload...");

                            }

 

                   }

 

 

         4onmouseoveronmouseout

                   = 鼠标移动到标签上面

                   =onmouseout:鼠标移出标签

                   ==function over1() {

                            document.getElementById("mouseid").value="onmouseoverload...";

                   }

 

                   functionout1() {

                            document.getElementById("mouseid").value="onmouseoutload...";

                   }

 

 

         5onsubmit

                   =专门使用在表单提交里面,写在<form>标签中。

                   ==onsubmit="return check1();"               //注意有个return

                   ==function check1() {

                            //alert("111");

                            returntrue;

                   }

                   *如果方法里面return false,不会提交表单,只有值是true时候才会提交表单

 

5dom的简介

         1documentobject model:文档对象模型

         **文档:标记型文档,有htmlxml

         **对象:有属性和方法

         ***使用dom里面提供的对象,使用这些对象里面的属性和方法,对标记型文档进行操作

         ***可以对标记型文档里面标签、属性、文本

 

         *如果想要对标记型文件进行操作,首先解析标记型文档,使用dom方式进行解析

 

         *dom解析html的过程

         **树形结构:只能有一个根节点,有多个子节点,没有子节点的节点是叶子节点

         **根据html的层级结构在内存中分配一个树形结构

         ***document对象代表整个文档

         ***element对象代表标签对象

         ***属性对象和文本对象

         ***node节点对象,这个对象是上面那些对象的父对象,如果在对象里面找不到想要的方法可以到node里面去找

        

         2DHTML的简介

         **不是一种技术,而是很多的技术的简称

         *html:封装数据

         *css:使用属性和属性值修改数据的样式

         *js里面的ECMAScript:提供js的语句语法

         *dom:使用dom里面的对象对标记型文件进行操作

        

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

         上午内容的总结

         1js创建函数的两种方式

         2js函数的重载

         3js的全局函数(会用)

 

         4html绑定事件三种方式

         5js里面的常用的事件(会用)

                   **重点  onsubmit

        

         6dom是什么

         7dom解析标记型文档的过程

         8dom里面的对象documentelement、属性、文本node

         9DHTML 是很多技术的简称

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

 

6document对象的简介

         *代表整个文档,得到整个文档,就可以得到文档里面的内容

 

         *document对象里面的四个方法

 

         =write() 向页面输出内容,同时输出html代码<如动态生成表格>

 

         =getElementById() 根据标签的id的值获取标签的对象。 

                   ==functionget1() {

                            //得到idtextid的标签对象

                            varinput1 = document.getElementById("textid"); //标签对象

                            //得到input里面的value

                            alert(input1.value);

                   }

 

         = getElementsByName()根据标签的name属性的值获取标签对象,返回对象数组。

                   ==function get2() {

                            //得到多个input标签的数组

                            varinputs1 = document.getElementsByName("textname");

                            //alert(inputs1.length);

                            //遍历数组

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

                                     //得到每一个input标签对象

                                     varinput1 = inputs1[i];

                                     alert(input1.value);

                            }

                   }

 

                   ==如果通过这个方法得到只是一个标签,返回也是一个对象的数组

                   可以直接使用数组的下标获取标签的对象(数组的下标从0开始)

                   functionget3() {

                            varinput2 = document.getElementsByName("username")[0];

                            alert(input2.value);

                   }

        

         = getElementsByTagName()根据标签名称得到标签对象的数组。

                   ==functionget4() {

                            varinputs3 = document.getElementsByTagName("input");

                            alert(inputs3.length);

                   }

 

                   ==如果通过这个方法得到只是一个标签,返回也是一个对象的数组

                   可以直接使用数组的下标获取标签的对象(数组的下标从0开始)

 

7innerHTML属性

         1)这个属性不是dom里面的组成部分

 

         *这个属性可以做两件事情

 

         第一个:获取标签里面的文本内容

                   =//获取div标签里面的文本内容

                   functiongetText1() {

                            //得到div标签对象

                            vardiv1 = document.getElementById("div1");

                            alert(div1.innerHTML);

                   }

                   *如果想要得到标签里面的文本内容,首先得到标签对象,之后通过标签对象上面使用innerHTML属性,可以得到文本内容

 

         第二个:向标签里面设置内容(可以是普通文本,也可以是html代码)

 

         2)练习:动态生成表格

         *实现步骤:

         **首先,创建一个页面,在页面上有两个输入项和一个按钮(有事件)

         **其次,在事件里面编写js方法,在方法里面首先得到输入的行和列

         **第三,根据行和列生成表格

                   ***使用for循环生成表格

                  **** 首先循环行

                   ****其次在行里面循环列

         **使用innerHTML属性把表格的代码显示到div里面

 

         **代码

         functionadd1() {

                   /*

                   **其次,在事件里面编写js方法,在方法里面首先得到输入的行和列

                   **第三,根据行和列生成表格

                            ***使用for循环生成表格

                            ****首先循环行

                            ****其次在行里面循环列

                   **使用innerHTML属性把表格的代码显示到div里面

                   */

                   //得到输入的行和列

                   varhang = document.getElementById("hang").value;

                   varlie = document.getElementById("lie").value;

                   //alert(hang+":: "+lie);

                   //根据行和列生成表格<table> <tr><td>aaa</td></tr> </table>

                   vartab = "<table border='1'>";

                   //循环生成行和列

                   for(vari=1;i<=hang;i++) {//先循环tr

                            tab+= "<tr>";

                            //循环列

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

                                     tab+= "<td>aaaaa</td>"

                            }

                            tab+= "</tr>";

                   }

                   tab+= "</table>";

 

                   //alert(tab);

                   //把生成的tablehtml代码显示到页面上

                   vardiv11 = document.getElementById("div11");

                   div11.innerHTML= tab;

         }

 

8、表单的提交方式

         1)第一种:submit

         ==<input type="submit"/>

 

         2)第二种:使用button提交表单

         ==首先得到form标签,在标签上执行submit()方法,可以提交表单

         //使用button提交表单

         functionform1() {

                   //获取form标签

                   varform1 = document.getElementById("form1");

                   //提交表单,调用方法

                   form1.submit();

         }

 

         3)使用超链接提交数据

         ==类似与表单get提交,<ahref="hello.html?username=ddd&test=aa">超链接提交数据</a>

 

 

9、练习:表单的验证

         1)使用submit提交表单的验证方法

                   =使用一个事件 onsubmit事件:当有submit按钮,点击这个submit时候,触发onsubmit事件,只有这个事件返回true

                   才会提交表单。

 

                   *首先在form标签上面写事件 onsubmit事件

                   ==<form action="hello.html" onsubmit="returncheckform();">

                   ==function checkform(){

                            //非空的校验

                            //得到输入项里面的值

                            varusername = document.getElementById("usernameid").value;

                            varpassword = document.getElementById("passwordid").value;

                            varemail = document.getElementById("emailid").value;

                            //alert(username+""+password+" "+email );

                            if(username== "") {

                                     alert("用户名为空");

                                     returnfalse;

                            }

 

                            if(password== "") {

                                     alert("密码不能为空");

                                     returnfalse;

                            }

 

                            if(email== "") {

                                     alert("邮箱不能为空");

                                     returnfalse;

                            }

                            return true;

                   }

 

         2)使用button提交表单的验证方法

                   =首先在button按钮上面绑定一个事件 <input type="button" value="提交"onclick="form2();"/>

                   =function form2() {

                            //非空校验

                            //得到输入项里面的值

                            varusername = document.getElementById("usernameid").value;

                            var password =document.getElementById("passwordid").value;

                            varemail = document.getElementById("emailid").value;

                            if(username== "") {

                                     alert("用户名不能为空");

                            }else if(password == "") {

                                     alert("密码不能为空");

                            }else if(email == "") {

                                     alert("邮箱不能为空");

                            }else {

                                     //提交表单

                                     varform2 = document.getElementById("form2");

                                     form2.submit();

                            }

                   }

 

10json数据介绍

         *JSONJavaScript Object  NotationJavaScript 对象表示法

         *json是一个数据格式,用于数据交换(数据的传输格式)格式

         *xml:也是数据的格式,用于数据的传输,因为xml结构很复杂,xml解析特别麻烦

 

         *js里面解析json十分方便,json就是js的一部分

 

         *json的数据格式:

 

         第一种格式:json对象格式 {"名称1":"1","名称2":"2"}

                   ={"name":"zhangsan","age":30}

                   =key:类型是string类型,如果不是string类型js会自动转成string类型。

                   =valueobject类型

 

         第二种格式:json的数组的格式(很多json对象) [json对象1,json对象2]

                   =[{"name":"zhangsan","age":30},{"name":"lisi","age":40}]

        

         *把这两种形式混合使用,形成一个更复杂的json

 

         **  var people ={

           "programmers": [

                {"firstName":"Brett", "email": "brett@newInstance.com" },

                {"firstName":"Jason", "email": "jason@servlets.com" }

              ]

         };

 

11js解析json

         1js解析json对象,json对象.键名

         **//定义json数据

         varpeople ={"firstName": "zhangsan","lastName":"王五", "addr": "shanghai" };

         //得到firstName的值

         //alert(people.firstName);

         //alert(people.addr);

 

         2js解析json数组的格式

         **  //定义数组形式的json

                   varperson =[

                     {"firstName":"Brett","email": "brett@newInstance.com"},

                     {"firstName":"Mary","email": "mary@newInstance.com"}

                ];

                   //获取数组里面第二个firstName的值

                   alert(person[1].firstName);

        

12json练习:人员列表展示

         *有一个json数据,里面包含人员的信息(姓名、年龄),把这些数据显示到表格里面

         **var person =

                   [

                     {"name":"zhangsan","addr": "beijing","age":20},

                     {"name":"lisi","addr": "tianjin","age":30},

                        {"name":"wangwu","addr": "nanjing","age":40}

                ];

         **代码

                   varperson = [

                                      {"name":"zhangsan","addr": "beijing","age":20},

                                      {"name":"lisi","addr": "tianjin","age":30},

                                      {"name":"wangwu","addr": "nanjing","age":40}

                              ];

                  

                   /*

                            1、遍历数组

                            2、依次得到对象里面的值

                            3、把得到的值放到表格里面

                   */

                   functionshow1() {

                            vartab = "<table border='1'>";

                            //遍历数组

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

                                     //得到每一行的json对象

                                     varper = person[i]

                                     varname = per.name;

                                     varaddr = per.addr;

                                     varage = per.age;

                                     tab+="<tr><td>"+name+"</td><td>"+addr+"</td><td>"+age+"</td></tr>";

                            }

                            tab+= "</table>";

 

                            //alert(tab);

                            //得到div的标签对象

                            vardivv = document.getElementById("divv");

                            divv.innerHTML= tab;

                   }

 

13dom里面对象补充

         1)获取标签下面子标签方法是getElementsByTagName()

         2)获取节点父节点:使用属性parentNode

         3)删除标签 ,标签不能自己删除自己,要通过父节点删除 使用在父节点上面执行方法removeChild(要删除标签)

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

         今天内容的总结

         1js创建函数的两种方式

         2js函数的重载

         3js的全局函数(会用)

 

         4html绑定事件三种方式

         5js里面的常用的事件(会用)

                   **重点  onsubmit

        

         6dom是什么

         7dom解析标记型文档的过程(**

         8dom里面的对象documentelement、属性、文本node

         9DTHML 是很多技术的简称

 

         10document对象四个方法

         11innerHTML属性 做两件事情

 

         12)表单的提交方式

         13)表单的验证

                   *按钮是submit,使用onsubmit事件

                  * button按钮验证

 

         14json数据(*********

                   *json格式

                   *js解析json数据

                   *json数据显示人员信息练习

</pre>







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


版权声明:本文首发在云栖社区,遵循云栖社区版权声明:本文内容由互联网用户自发贡献,版权归用户作者所有,云栖社区不为本文内容承担相关法律责任。云栖社区已升级为阿里云开发者社区。如果您发现本文中有涉嫌抄袭的内容,欢迎发送邮件至:developer2020@service.aliyun.com 进行举报,并提供相关证据,一经查实,阿里云开发者社区将协助删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章