首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >JS总结

JS总结

作者头像
用户1112962
发布2018-07-04 13:42:49
1.3K0
发布2018-07-04 13:42:49
举报

1.JavaScript的基本语法

1-1:为什么要学习JavaScript 例如:a.表单验证 b.页面动态效果等等 1-2:什么是JavaScript a.脚本的基本结构 语法: <script language="JavaScript"> <script language="JavaScript"> <!- <!- JavaScript 语句; JavaScript 语句; --!> --!> </script> </script> b.脚本的执行原理 过程:用户录入信息到IE上面,发送请求(包括JavaScript的页面)给服务器,然后从服务器下载含JavaScript的页面返回响应信息 1-3:JavaScript的基本语法 a.变量的声明和赋值 语法: var 合法的变量名; 声明并赋值,例如:var count=10; 同时声明多个变量,例如:var x,y,z=10; 允许不声明变量直接使用,系统自动会声明该变量。例如:x=88;//没有声明变量,直接使用 document.write(x); b.运算符号 算术运算符 + - * / % ++ -- -(求反) 比较运算符< > <= >= == != 逻辑运算符! && || 赋值运算符包括=及其扩展赋值运算符 c.逻辑控制语句 语法: if(表达式){ for(初始化;条件;增量或减量){ while(条件){ JavaScript 语句1; JavaScript 语句; JavaScript 语句; }else{ } } JavaScript 语句2; } switch(表达式){ case 常量1:JavaScript 语句1; case 常量2:JavaScript 语句2; case 常量3:JavaScript 语句3; ... default:javaScript 语句4; } d.注释 例如: 单行注释以//开始,以行末结束 多行注释以/*开始,以*/结束 e.类型转换 两种:转换为整型和转换为浮点型数字parseInt和parseFloat 如果无法转换第一个字符,此函数将返回NaN(Not a Number,非数字) 1-4:JavaScript的高级语法-自定义函数function a.什么是函数 函数就是一个方法、也可以返回 b.如何使用函数 (1)创建函数 语法: function 函数名(参数1,参数2,...){ function 函数名(){ 语句; 语句; } } 函数的定义放在<script>与</script>之间 c.调用函数 语法:事件名="函数名()"; 1-5:常见错误 声明变量,和使用变量的时候不一致。 2.DOM编程-window对象 2-1:DOM模型介绍 DOM(Document Object Model)由万维网联盟(World Wide Web Consortium,W3C)定义的一套操作HTML文档 a.HTML文档的树状结构(和HTML树状结构基本一致,此处就不在列举P31) b.什么是DOM(DOM是以层次结构的节点或信息片段的集合) c.DOM对象模型(Window下面的三个层次:history、document、location下面的层次此处布列出了P34) 2-2:window对象常用的属性、方法、事件介绍 a.常用属性(status、screen、history、location、document) b.常用方法(alert("提示信息")、confirm("提示信息")、open("url","name")、close、showModalDialog()) c.常用事件 注意:要注意的是,当使用层、框架和多窗口时,就不能省略window对象的名称。例如:必须为document.location.. 例如: 语法: open("打开窗口的url","窗口名","窗口特征")[height、width、toolbars、scrollbars、menubar、location、status、resizable] showModalDialog("打开对话框的url","对话框名","对话框特征")[height、width、toolbars、scrollbars、menubars、location、status、statusbars、resizable] 2-3:Date对象和setTimeout()方法做时钟显示 a.时钟特效(使用定时器setTimeout()方法) b.Date对象常用的方法 语法: var 日期对象=new Date(参数); 或者是 var 日期对象=new Date(); 方法组:setXX和getXX 特殊的:日期:1-31 其它的全都是从0开始 c.setTimeout()方法 语法: setTimeout("disptime()",1000) 隔多久执行一次 clearTimeout 停止 setInternal 永远执行 2-4:history和location对象 a.history对象 back()、forward()、go("url or number") b.location对象 (1)属性(host、hostname、href) (2)方法(assign("url")、reload()、replace("url")) 注意:下拉列表选中是selected默认选中 2-5:常见错误 默认选中:selected 3.DOM编程-document对象

3-1:document对象的常用属性和方法介绍 a.属性(getElementById()获得指定的id) b.方法(getElementsByName()获得名称name) 3-2:制作浮动的广告图片 例如: <html> <head> <title>浮动广告</title> <script language="javaScript"> var advInitTop=0;//使层总置于顶端的初始值 function move(){ document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop; } window.onscroll=move;//窗口的滚动事件,当前页面滚动时调用move()函数 <script> </head> <body> <div id="advLayer" style="position:absolute;left:16px;top:129px;width:180px;height:230px;z-index:1;"> <img src="" width="180" height="230" </div> <p> &nbsp; </p> <p> <img src="" width="993" height="1799" </p> <p> &nbsp; </p> </body> </html> 3-3:制作带关闭按钮的浮动窗口 a.带关闭按钮的浮动窗口 <html> <head> <title>浮动广告</title> <script language="javaScript"> var advInitTop=0;//使层总置于顶端的初始值 function inix(){ document.getElementById("advLayer").style.pixelTop; } var advInitTop=0;//使层总置于顶端的初始值 function move(){ document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop; } function closeMe(){ document.getElementById("closeLayer").style.display="none"; document.getElementById("advLayer").style.display="none"; } window.onscroll=move;//窗口的滚动事件,当页面滚动时调用move()函数 <script> </head> <body onload="inix()"> <div id="closeLayer" onclick="closeMe()"style="position:absolute;left:16px;top:129px;width:180px;height:230px;z-index:1;"> <img src="" width="180" height="230" </div> <p> &nbsp; </p> <p> <img src="" width="993" height="1799" </p> <p> &nbsp; </p> </body> </html> b.关闭按钮随滚动条同步滚动的浮动窗口 .... var advInitTop=0;//使层总置于顶端的初始值 function inix(){ advinitTop=document.getElementById("advLayer").style.pixelTop; closeInitTop=document.getElementById("closeLayer").style.pixelTop; } function move(){ document.getElementById("advLayer").style.pixelTop=advInitTop+document.body.scrollTop; document.getElementById("closeLayer").style.pixelTop=closeInitTop+docuemnt.body.scrollTop; } 3-4:制作实现全选效果 例如: <html> <head> <title>全选或不全选</title> <script language="javaScript"> function checkAll(boolValue){ var allCheckBoxs=document.getElementsByName("isBuy"); for(var i=0;i<allCheckBoxs.length;i++){ if(allCheckBoxs[i].type=="checkbox"){//判断是否是复选框 allCheckBoxs[i].checked=boolValue; } } } </script> </head> <body> ..... <a href="javaScript:checkAll(true)">全选</a> <a href="javaScript:checkAll(false)">全不选</a> ..... </body> </html> 注意:input框的名称必须得一致. 3-5:常见错误 例如:if(allCheckBoxs[i].type="checkbox")或者是<a href="javaScript:checkAll('false或true')">全选或不全选 </a> 4.CSS样式特效 4-1:回顾已学的CSS样式表 a.样式表类型 (1)行内样式 <input name="Button" type="button" style="background-image:url(image/back1.jpg);color="#0000ff";border:0px;margin:0px;padding:0px;height:23px;width:82px;font-size:14px;"value="登 录"> (2)内嵌样式 <style type="text/css"> a{/*设置五下划线的超链接样式*/ color:blue; text-decoration:none; } a:hover{/*鼠标在超链接上悬停时变为红色*/ color:red; } .boxBorder{/*设置细边框样式*/ border-width:1px; border-style:solid; } #content{/*ID样式*/ background-color:#e7fbff; } <div id="content"> <input id=txtName class="boxBorder" size=15 name=txtName> ....... <input name=Button type="button" class="pixButton" value="登 录"> <td align=right colspan=2><a href="#">免费注册</a></td> ....... </div> </style> (3)外部样式表 <html> <head> <title>浮动广告</title> <link rel="stylesheet" href="out_file.css" type="text/css"> <script language="javaScript"> <style type="text/css"> a{/*设置五下划线的超链接样式*/ color:blue; text-decoration:none; } a:hover{/*鼠标在超链接上悬停时变为红色*/ color:red; } .boxBorder{/*设置细边框样式*/ border-width:1px; border-style:solid; } #content{/*ID样式*/ background-color:#e7fbff; } </style> </script> </head> <body> ....... </body> </html> b.常用样式 (1)文本框属性(font-size、font-familly、font-style、color、text-align) (2)背景属性(background-color、background-image、background-repeat) (3)组合属性样式a{无下划线 a:hover{ .boxBorder{/*细边框 color:blue; color:red; border-width:1px; text-decoration:none; } border-style:solid; } } .picButton{/*图片按钮样式 background-image:url(image/back2.jpg); border:0px; margin:0px; padding:0px; height:23px; width:82px; font-size:14px; } 4-2:制作改变字体大小的样式特效 例如: <html> <head> <title>全选或不全选</title> <style type="text/css"> a{ color:blue; text-decoration:none; } a:hover{ color:red; } .boxBorder{ border-width:1px; border-style:solid; } .pixButton{ background-image:url(images/back1.jpg); color:0px; border:0px; margin:0px; padding:0px; height:23px; width:82px; font-size:14px; } </style> <script language="javaScript"> ..... </script> </head> <body> ... <input class="boxBorder" id=txtName size=15 name=txtName> ... <a href="#" onMouseOver="this.style.fontSize='24px'" onMouseOut="this.style.fontSize=14px">免费注册</a> ... </body> </html> 4-3:制作改变按钮背景图片的特效 <html> <head> <title>改变按钮背景图</title> <body> <form name="form1" method="post" action=""> <input type="submit" name="Submit" value="提交" style="width:82px;height:23px;background-image:url(images/back1.jpg);"onMouseOver="this.style.backgroundImage='url(images/back2.jpg)' onMouseOut="this.style.backgroundImage='url(images/back1.jpg)'"> </form> </body> </html> 4-4:层的显示/隐藏特效 a.显示属性display 语法:(display属性的语法格式如下) Object.style.display="value"; block换行(添加新行)、none不显示(隐藏)、inline换行(同行显示) b.制作层的显示/隐藏特效 例如: <html> <head> <title>改变按钮背景图</title> <style type="text/css"> #advLayer{ position:absolute; left:62px; top:44px; width:360; height:190px; z-index:2; } </style> <script type="text/javaScript"> function closeMe(){ document.getElementById("closeLayer").style.display="none"; document.getElementById("advLayer").style.display="none"; } function showMe(){ document.getElementById("closeLayer").style.display="block"; document.getElementById("advLayer").style.display="block"; } </script> </head> <body> <p> <input name="placeButton" type="button" onclick="closeMe()" value="关闭层"> <input name="placeButton2" type="button" onClick="showMe()" value="弹出层"> </p> <div id="advLayer"><img src="" width="360" height="190"> </div> <h1>层下方的内容</h1> <h1>层下方的内容</h1> <h1>层下方的内容</h1> <h1>如果修改代码:去掉层DIV的样式</h1> <h1>将出现内容动态隐藏显示的效果。</h1> </form> </body> </html> 4-5:图片的显示/隐藏特效 例如: function showGame(){ document.getElementById("gameTab1").style.display="none"; document.getElementById("mobileTab1").style.display="none"; document.getElementById("gameTab2").style.display="block"; document.getElementById("mobileTab2").style.display="block"; } 注意:visibility:hidden对象任占据着页面的空间,只是该控件看上去是空的。 display:none对象根本就不会显示,在页面中仿佛没有该对象一样。 5.基本的表单验证技术

5-1:为什么需要表单验证 a.避免信息无法更新或出现新错误 b.减轻服务器端的压力 5-2:表单验证的内容 年、月、日、输入长度、中英文、特殊字符、是否为空、是否为数字、邮件是否有效、年月日是否有效。 5-3:表单验证思路 a.String对象简介 (1)字符串对象的属性【length表示字符串中的字符个数,包括所有符合 如:空格】 语法: 字符串对象.属性名或字符串对象.方法名() 第一种:var newstr="这是我写的 脚本"; 第二种:var newstr=new String("这是我写的脚本"); (2)字符串对象的方法 indexOf("子字符串",起始位置)查找字符串的位置,这个位置是要查找文本框出现的第一个位置 charAt(index)获取位于指定索引位置的字符 substring(index1[,index2])返回位于指定索引index1和index2之间的字符串,并且包括索引index1所对应的字符串,不包括索引index2所对应的字符串,即前闭、后开。 toLowerCase()将字符串转换成小写 toUpperCase()将字符串转换成大写 注意:其中最常用的就是indexOf()方法 字符串对象.indexOf("查找的字符或字符串",查找的起始位置)如果找到了,则返回找到的位置,否则返回-1. 例如: <html> <head> <title>方法indexOf()用法</title> </head> <body> <script language="javaScript"> var str="Hello world"; document.write(str.indexOf("Hello",0)+"<br/>"); document.write(str.indexOf("World")+"<br/>"); document.write(str.indexOf("world")); </script> </body> </html> b.电子邮件格式的验证 例如: <html> <head> <title>验证用户名和密码</title> <script language="javaScript"> function checkUserName(){ var fname=document.myform.txtUser.value;//验证用户名是否合法 if(fname.length !=0){ for(i=0;i<fname.length;i++){ var ftext=fname.substring(i,i+1);//获取字符串中单个字符 if(ftext<9||ftext>0){ alert("名字中包含数字\n"+"请删除名字中的数字和特殊字符"); return false; } } }else{ alert("未输入用户名\n"+"请输入用户名"); return false; } return true; } function passCheck(){ var userpass=document.myform.txtPassword.value; if(userpass==""){ alert("未输入密码\n"+"请输入密码"); return false; } if(userpass.length<6){ alert("密码必须多于或等于6个字符。\n"); return false; } } function validateform(){ if(checkUserName()&&passCheck()){ return true; }else{ return false; } } </script> </head> <body> .... <input name="clearButton" type="button" id="clearButton" value="清 空"> <input name="registButton" type="submit" id="registerButton" value="登 录"> .... </body> </html> 5-4:文本框控件 a.文本框对象简介(事件:onBlur、onFocus、onChange 方法:focus()、select() 属性:value) b.电子邮件格式验证的改进 例如: <html> <head> <title>使用文本框控件</title> <script language="javaScript"> function checkEmail(){ var strEmail=document.myform.txtEmail.value; if(strEmail.length==0){ alert("电子邮件不能为空!"); return false; } if(strEmail.indexOf("@",0)==-1){ alert("电子邮件格式不正确\n必须包含@符号!"); document.myform.txtEmail.focus(); document.myform.txtEmail.select(); return false; } if(strEmail.indexOf(".",0)==-1){ alert("电子邮件格式不正确\n必须包含.符号!"); document.myform.txtEmail.focus(); document.myform.txtEmail.select(); return false; } return true; } function clearText(){ if(document.myform.txtEmail.value=="请输入真实的电子邮箱,我们将发送激活密码"){ document.myform.txtEmail.value=""; document.myform.txtEmail.style.color="red";//修改文本框的颜色 } } </script> <style type="text/css"> .textBorder{ border:1px solid; font-size:15px; } </style> </head> <form name="myform" method="post" action="reg_success.html" onSubmit="return checkEmail()"> ................. <td>您的电子邮件:</td> <td colspan="2"> <input name="txtEmail" type="text" class="textBorder" id="txtEmail" value="请输入真实的电子邮箱,我们将发送激活密码" size="40" onFocus="clearText" style="color:#666666;">*必填 </td> ................. <body> </body> </form> </html> 5-5:常见错误 <form name="myform" method="post" action="reg_success.html" onSubmit="return checkEmail()">不在表单中写 未调用函数 6.表单验证的相关事件和辅助特效 6-1:制作图片代替按钮的提交效果 例如: 简略代码: <div align="center"> <img src="images/requick.jpg" width="114" height="27" onclick="checkForm()"> </div> 6-2:制作回车切换输入的效果 例如: 简略代码: function changeFocus(){ if(event.keyCode==13){//判断按键是否是回车键 event.keyCode=9;//设置按键为Tab键 } } ... <input name="sname" type="text" class="borderBox" id="sname" size="24" onKeyDown=""changeFocus()> ... 6-3:制作输入提示的特效 例如: 简略代码: function checkLogin(){ var myDiv=document.getElementById("loginError"); myDiv.innerHTML=""; var strName=document.userfrm.loginName.value; if(strName.length==0){ myDiv.innerHTML="<font color='red'>用户名不能为空!"; return; } } ... <input name="loginName" type="text" class="borderBox" id="loginName" size="24" onblur="checkLogin()"> ... 6-4:制作内容动态改变的层特效 例如: 简略代码: function InitDIV(){ document.getElementById("DIV1").style.display="none"; } ... <body onload="InitDIV()">//页面加载的时候就自动调用函数InitDIV() ... 7.表单验证的高级特效

7-1:实现简单的省市级联功能 a.下拉列表控件select 事件 onChange当选项发生变化时产生 方法 add(new,old)将新的Option插入到old前面,如果old为空,直接插入到末尾 属性 value 下拉列表框中被选选项的值、 options下标从0开始,表示整个选项数组、selectedIndex 从0开始的下标,为选中的下标、length返回下拉菜单中的选项个数 b.实现简单的省市级联的特效 例如: 省略代码: function changeCity(){ var province=document.myform.selProvince.value; var newOption1,newOption2; switch(province){ case "四川省": newOption1=new Option("成都市","chengdu"); newOption2=new Option("泸州","luzhou"); break; case "湖北省": newOption1=new Option("武汉","wuhan"); newOption2=new Option("襄樊","xiangfan"); break; case "山东省": newOption1=new Option("青岛市","qingdaos"); newOption2=new Option("烟台市","yantaishi"); break; } document.myform.selCity.options.length=0; document.myform.selCity.options.add(newOption1); document.myform.selCity.options.add(newOption2); } ... <select name="selProvince" onChange="changeCity()"> <option>--请选择开户账号的省份--</option> <option value="四川省">四川省</option> <option value="山东省">山东省</option> <option value="湖北省">湖北省</option> ... 7-2:使用数组优化省市级联功能 a.数组用法的介绍 (1)创建数组 语法:var arrayObjectName=new Array(size); (2)为数组元素赋值 var temp; temp=new Array("1","2","3"); (3)访问数组元素 var temp=new Array(3); temp[0]=1; temp[1]=2'; temp[2]=3; (4)数组的常用属性和方法 join 分隔符 sor()排序 默认升序 详细请看P188 语法: for(variable in object){ code to be executed; } b.使用数组优化省市级联效果 详细请看P193

7-3:使用文字下标的数组再次优化 请看P196

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2017-03-14 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档