javascript —— js

案例1-校验表单

需求:

表单提交的时候需要校验数据是否完整,若不满足条件,则使用弹出框提示.

技术分析: js

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，
内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言

组成部分:

ECMAScript:js基础语法(规定关键字运算符语句函数等等…)
BOM:浏览器对象模型
DOM:文档对象模型

作用:

修改html页面的内容
修改html的样式
完成表单的验证

注意:

js可以在页面上直接写,也可以单独出去
js的文件的后缀名 .js

js和html整合

方式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);

js中变量声明:

var 变量名=初始化值;
var 变量名;
变量名=初始化值;

注意:

var可以省略建议不要省略
一行要以分号结尾,最后一个分号可以省略,建议不要省略

js的数据类型:

原始类型:(5种)

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>

js:事件驱动函数

函数定义格式:

方式1:

function 函数名(参数){
函数体;
}
注意:函数不用声明返回值类型
参数不需要加类型
函数调用的时候——函数名(参数)

方式2:

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>
js中的事件:

常见的事件:

*单击: onclick

*表单提交: onsubmit 加在form表单上的 οnsubmit=“return 函数名()” 注意函数返回值

为boolean类型

*页面加载: onload

js事件和函数的绑定:

方式1:

通过标签的事件属性

方式2:

给元素派发事件

document.getElementById(“id值”).οnclick=function(参数){…}

document.getElementById(“id值”).οnclick=函数名

注意:

内存中应该存在该元素才可以派发事件

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>
js获取元素:

方式1:

``var obj=documnet.getElementById(“id值”);`

获取元素的value值

``obj.value;`

获取元素的标签体中的内容

``obj.innerHTML;`

案例2-步骤分析:

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-轮播图片

需求:

每隔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是一个为对象可以直接调用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 &copy 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

javascript —— js相关推荐

JavaScript(js)/上
JavaScript(js) ECMA-----定义的基础语法 DOM------document object model BOM------Browser object model Jav ...
ie6 javascript js 缺少标识符总结(转载)
转载http://blog.csdn.net/qingyundys/article/details/6218280 ie6 javascript js 缺少标识符总结 1. ie6下,javascri ...
asp.net 用户注册怎么判断用户名是否重复 ajax,AJAX_asp.net结合Ajax验证用户名是否存在的代码，1，使用JavaScript js文件，验证 - phpStudy...
asp.net结合Ajax验证用户名是否存在的代码 1, 使用JavaScript js文件,验证用户名是否存在复制代码代码如下: var ajax = function(option) { va ...
JavaScript JS 如何定义多行文本
JavaScript JS 如何定义多行文本 JavaScript JS 定义多行文本最优雅的方式 var lines = function () { 你的文本内容开始 asd ccac文本结束}; ...
JavaScript(JS) date.getDay()
Date对象是JavaScript语言内建的数据类型.使用新的Date()创建日期对象.本文主要介绍JavaScript(JS) date.getDay() 方法. 原文地址:JavaScript(J ...
JavaScript js如何代码加密绑定域名
(function(){for(var c=location.host,a="",b=0;b<c.length;b++)a+=c[b].charCodeAt(0);if(&q ...
java web之javascript(js)解析
java web javascript(js): javascript(js): js嵌入在html中,在浏览器中运行的脚本语言 js跟java没有任何关系,只是语法相似是一 ...
JavaScript(JS) 浏览器中设置启用或禁用
所有的现代浏览器都内置了对JavaScript的支持.通常,可能需要手动启用或禁用此支持.本章介绍在浏览器中启用和禁用JavaScript支持的过程:Internet Explorer.Firefox ...
JavaScript(JS) string.italics( )
String对象允许你处理一系列字符;它用许多辅助方法包装Javascript的字符串原始数据类型.当JavaScript在字符串原语和字符串对象之间自动转换时,可以在字符串原语上调用string对象 ...
JavaScript(JS) Number.NaN
Number对象表示数字日期,可以是整数也可以是浮点数.通常,不需要担心Number对象,因为浏览器会自动将Number字面量转换为Number类的实例.本文主要介绍JavaScript(JS) Nu ...

javascript —— js

javascript —— js

案例1-校验表单

需求:

技术分析: js

组成部分:

作用:

注意:

js和html整合

js中变量声明:

注意:

js的数据类型:

原始类型:(5种)

引用类型:

js:事件驱动函数

函数定义格式:

方式1:

方式2:

js中的事件:

常见的事件:

*单击: onclick

*页面加载: onload

js事件和函数的绑定:

方式1:

方式2:

document.getElementById(“id值”).οnclick=function(参数){…}

document.getElementById(“id值”).οnclick=函数名

注意:

内存中应该存在该元素才可以派发事件

js获取元素:

方式1:

获取元素的value值

获取元素的标签体中的内容

案例2-步骤分析:

案例3-轮播图片

需求:

技术分析:

定时器:

清除定时器:

String对象

步骤分析:

补充:

运算符:

比较运算符: > >= < <=

等性运算符: ==和 ===

语句:

总结:掌握

javascript —— js相关推荐

最新文章

热门文章