表单提交的时候需要校验数据是否完整,若不满足条件,则使用弹出框提示.
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言， 内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言
ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等…) BOM:浏览器对象模型 DOM:文档对象模型
修改html页面的内容 修改html的样式 完成表单的验证
js可以在页面上直接写,也可以单独出去 js的文件的后缀名 .js
方式1:在页面上直接写 将js代码放在 标签中,一般放在head标签中 方式2:独立的js文件 通过script标签的src属性导入
html文件代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> alert(12); </script> <script type="text/javascript" src="js/01.js"></script> </head> <body> </body> </html>js文件
alert(34); var 变量名=初始化值; var 变量名; 变量名=初始化值;
var可以省略 建议不要省略 一行要以分号结尾,最后一个分号可以省略,建议不要省略
Null String Number Boolean Undefined 通过 typeof运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,他还可以判断 出属于那种原始类型 typeof 变量|值;
若变量为null,使用typeof弹出的值 object
使用typeof的返回值 undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
变量和数据类型代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> //var age = 18; var age =true alert(age); alert(typeof age); var abcde; alert(typeof abcdef); var username = null; alert(typeof username); var s = new String(); alert(typeof s) </script> </head> <body> </body> </html> function 函数名(参数){ 函数体; } 注意:函数不用声明返回值类型 参数不需要加类型 函数调用的时候——函数名(参数)
var 函数名=function(参数){ 函数体; }
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function add(a,b){ alert(a+b) } add(30,20) </script> </head> <body> </body> </html> *表单提交: onsubmit 加在form表单上的 οnsubmit=“return 函数名()” 注意函数返回值
为boolean类型
通过标签的事件属性
给元素派发事件
a.将方式2的js代码放在html页面的最下面 b.在页面加载成功之后在运行方式2的js代码 onload事件.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function btnCli(){ alert(44944); //document.getElementById("btn2").onclick=btn2cli; } function init(){ alert("页面加载成功"); } var btn2cli=function(){ alert("233333"); } </script> </head> <body onload="init()"> <input type="button" value="点击我试试1" onclick="btnCli()"/> <input type="button" value="点击试试2" id="btn2"/> </body> <script> document.getElementById("btn2").onclick=btn2cli; </script> </html> ``var obj=documnet.getElementById(“id值”);`
``obj.value;`
``obj.innerHTML;`
1.先有一个表单 2.在form上添加一个事件 οnsubmit=“return checkForm()” 3.编写checkForm这个方法 4.获取每个表单子标签的内容 5.判断是否满足要求, 若满足,不用管他 若不满足,表单不能提交,返回false,且提示信息.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> function checkForm(){ //获取用户名及其内容 var usernameObj = document.getElementById> > ("username"); var username = usernameObj.value //判断value是否为空，若不为空不能提交表单 if(username==null || username == ""){ alert("用户名不能为空"); return false; } //获取密码及其内容 //1.获取密码元素 var pwdObj=document.getElementById("password"); //2.获取密码的值 var pwdValue=pwdObj.value; //3判断 if (pwdValue==null || pwdValue=="") { alert("密码不能为空"); return false } return true; } </script> </head> <body> <form action="#" method="get" onsubmit="checkForm()"> 姓名：<input name="username" id="username"/><br> 密码：<input type="password" name="password" id="password" /><br> <input type="submit" value="保存"/> <input type="reset" /> </form> </body> </html> 每隔3秒图片更新一下
bom中window对象的定时器方法
var id=setInterVal(code,毫秒数):每隔指定的毫秒数执行一次函数 周期 var id=setTimeout(code,毫秒数):延迟指定的毫秒数之后 只执行一次函数
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script> var s="我们的明天更加美好!"; var i=0; var divObj; function init(){ divObj= document.getElementById("divId"); setInterval(show,200); } //往div中写内容 function show(){ i++; var s_=s.substring(0,i); //往div中设置内容 divObj.innerHTML=s_; //当字符串写完的时候 重新开始 if(i==s.length){ i=0; } } </script> </head> <body onload="init()"> <div id="divId"> </div> </body> </html> clearInterval(id); claerTimeout(id);
原始类型的String是一个为对象可以直接调用String类对象的方法 substring(0,endIndex);
1.在首页上面绑定一个onload事件 2.事件绑定的函数中编写一个定时器 3.定时器每隔3秒更换图片 imgObj.src=""；
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> a{ text-decoration: none; } .cle{ clear: both; } /*logo部分地div*/ .header{ width: 100%; } .header div{ float: left; width: 33.33%; height: 60px; line-height: 50px; } .header a{ padding: 15px; } /*菜单部分*/ .menu{ width: 100%; background-color: black; height: 50px; padding-top: 0.25px; } .menu ul li{ list-style-type: none; display: inline; padding-right: 20px; } .menu a{ font-size: 18px; color: white; } /*轮播图*/ .lunbo{ width: 100%; } .lunbo img{ width: 100%; } /*热门商品*/ /*.left,.right{ float: left; }*/ .left{ float: left; width: 16%; height: 500px; } .right{ float: left; width: 84%; text-align: center; height: 500px; } .middle{ float: left; width: 50%; height: 250px; } .item{ float: left; width: 16.66%; height: 250px; } /*广告*/ .ad1 img{ width: 100%; } .ad2 img{ width: 100%; } /*版权foot*/ .foot{ width: 100%; } .foot p{ text-align: center; } </style> </head> <!--页面加载成功后轮播图片--> <body onload="init()"> <!-- 一个大div中放置8个div --> <div> <!--logo 嵌套三个div --> <div class="header"> <div> <img src="../img/img/商城.jpg"/> </div> <div> <img src="../img/img/header.jpg" /> </div> <div > <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> <div class="cle"></div> <!--菜单--> <div class="menu"> <ul> <li><a href="#">首页</a></li> <li><a href="#">手机数码</a></li> <li><a href="#">电脑办公</a></li> <li><a href="#">其他商品</a></li> </ul> </div> <!--轮播图--> <div class="lunbo"> <img id="lunbo" src="../img/img/1.jpg" width="100%"> </div> <!--热门商品--> <div class="hot"> <!--存放热门商品和一张图片--> <div> <h2 style="display: inline;">热门商品</h2> <img src="../img/img/title2.jpg" /> </div> <div> <!--存放左边的图片--> <div class="left"> <img src="../img/img/big01.jpg"/> </div> <!--存放右边的图商品--> <div class="right"> <div class="middle"> <img src="../img/img/middle01.jpg"/> </div> <div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div> <div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div> <div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div> <div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div> <div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div> <div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div> <div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div><div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div><div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div> </div> </div> <div class="cle"></div> </div> <!--广告--> <div class="ad1"> <img src="../img/img/ad.jpg" /> </div> <!--最新商品--> <div> <div> <h2 style="display: inline;">热门商品</h2> <img src="../img/img/title2.jpg" /> </div> <div> <!--存放左边的图片--> <div class="left"> <img src="../img/img/big01.jpg"/> </div> <!--存放右边的图商品--> <div class="right"> <div class="middle"> <img src="../img/img/middle01.jpg"/> </div> <div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div> <div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div> <div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div> <div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div> <div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div> <div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div> <div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div><div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div><div class="item"> <img src="../img/img/small08.jpg"/> <p align="center"><a href="#"><font color="black">电饭煲</font></a></p> <p align="center"><font color="red">200￥</font> </p> </div> </div> </div> <div class="cle"></div> </div> <!--广告--> <div class="ad2"> <img src="../img/img/footer.jpg" /> </div> <!--版权foot--> <div class="foot"> <p> <a href="#">关于我们</a> <a href="#">联系我们</a> <a href="#">招贤纳士</a> <a href="#">法律声明</a> <a href="#">友情链接</a> <a href="#">支付方式</a> <a href="#">配送方式</a> <a href="#">服务声明</a> <a href="#">广告声明</a> </p> <p align="center"> Copyright © 2017-2018 幸运商城 版权所有 </p> </div> </div> </body> <script type="text/javascript"> var i=1; function init(){ //创建一个定时器 setInterval(changeImage,2000); } //更改图片 //<img id="lunbo" src="../img/img/1.jpg" width="100%"> function changeImage(){ //获取图片 var imgObj=document.getElementById("lunbo") i++; //修改图片元素的src属性 imgObj.src="../img/img/"+i+".jpg" //当i大于3时候重置一下 if(i>=3){ i=0; } } </script> </html> 若两边都是数字 和java一样 若一边为数字,另一边为字符串形式的数字,将字符串形式的数字转换成数字在进行比较 3>“2” 若一边为数字,另一边为字符串,返回一个false 3>“hello” 两边都是字符串的时候,比较ascii
== :只判断值是否相同 ===:不仅判断是否相同,还要判断类型是否相同
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script type="text/javascript"> var a=66; var b="66" var c="88" var d="拜拜" alert(a==b); alert(a===b); alert(c>a) alert(d>a) </script> <body> </body> </html> if语句 和java一样 for while 语句和java一样 switch 和java一样(区别,switch 后面跟字符串. 还可以跟变量)
1.css和html整合 方式3种 2.css中选择器: id class 元素 属性 后代 3.js js和html整合 方式两种 4.变量定义 5.函数定义 2种格式 6.事件 onclick onload onsubmit 7.事件和函数的绑定 2中方式 8.定时器 2种 9.for while if
