javascript 的组成部分
ECMAScript:它是整个 javascript 的核心，包含(基本语法、变量、关键字、保留字、数据类型、语句、函数等等)
DOM：文档对象模型，包含(整个 html 页面的内容)、
BOM：浏览器对象模型,包含(整个浏览器相关内容)
javascript 语法
区分大小写
变量是弱类型的(String str=”aaa” ,var str=”123”;)
每行结尾的分号可有可无(建议大家写上)
javascript 数据类型
原始数据类型：string、number、boolean、null、undefined
引用数据类型：Array、Boolean、Date、Math、Number、String、ReqExp
表单数据校验
表单提交事件：onsubmit
第一步：确定事件(onsubmit)并为其绑定一个函数
第二步：书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>)
第三步：对用户输入的数据进行判断
第四步：数据合法(让表单提交)
第五步：数据非法(给出错误提示信息，不让表单提交)
问题：如何控制表单提交？
关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个
返回值。 onsubmit = return checkForm()
<script>
function checkForm(){
//alert("aa");
/**校验用户名*/
//1.获取用户输入的数据
var uValue = document.getElementById("user").value;
//alert(uValue);
if(uValue==""){
//2.给出错误提示信息
alert("用户名不能为空!");
return false;
专业 java、php、iOS、C++、网页设计、平面设计、网络营销、游戏开发、前端与移动开发培训机构
传智播客致力打造专业的 IT 高级培训课程——务实、创新、质量、专注、分享、责任
}
/*校验密码*/
var pValue = document.getElementById("password").value;
if(pValue==""){
alert("密码不能为空!");
return false;
}
/**校验确认密码*/
var rpValue =
document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("两次密码输入不一致!");
return false;
}
/*校验邮箱*/
var eValue = document.getElementById("eamil").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-
9_-])+/.test(eValue)){
alert("邮箱格式不正确!");
return false;
}
}
</script>Html 部分：
< form action="#" method="get" name="regForm"
onsubmit="return checkForm()" >
需要在指定位置添加 id
JS实现首页轮播图
获取元素 document.getElementById(“id 名称”)
事件(onload)
定时操作：setInterval(“changeImg()”,3000);
第一步：确定事件(onload)并为其绑定一个函数
第二步：书写绑定的这个函数
第三步：书写定时任务(setInterval)
第四步：书写定时任务里面的函数
第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性)
<script>
function init(){
批注 [ThinkPad2]: 在循环的时候需要注意到了最后一
张图片的时候要重置。
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);
}
//书写函数
var i=0
function changeImg(){
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="../img/small0"+i+".jpg";
if(i==3){
i=0;
}
}
</script>JS定时弹出广告图片
获取图片的位置(document.getElementById(“”))
隐藏图片：display：none
定时操作：setInterval(“显示图片的函数”，3000);
第一步：在页面指定位置隐藏一个广告图片(使用 display 属性的 none 值)
第二步：确定事件(onload)并为其绑定一个函数
第三步：书写这个函数(设置一个显示图片的定时操作)
第四步：书写定时器中的函数(获取广告图片的位置并设置属性style的display值block)
第五步：清除显示图片的定时操作()
第六步：书写隐藏图片的定时操作
第七步：书写定时器中的函数(获取广告图片的位置并设置属性 style 的 display 值 none)
第八步：清除隐藏图片的定时操作()
<script>
function init(){
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);
//1.设置显示广告图片的定时操作
time = setInterval("showAd()",3000);
}
//书写函数
var i=0
function changeImg(){
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
//2.书写显示广告图片的函数
function showAd(){
//3.获取广告图片的位置
var adEle = document.getElementById("img2");
//4.修改广告图片元素里面的属性让其显示
adEle.style.display = "block";
//5.清除显示图片的定时操作
clearInterval(time);
//6.设置隐藏图片的定时操作
time = setInterval("hiddenAd()",3000);
}
//7.书写隐藏广告图片的函数
function hiddenAd(){
//8.获取广告图片并设置其style属性的display值为none
document.getElementById("img2").style.display= "none";
//9.清除隐藏广告图片的定时操作
clearInterval(time);
}
</script>Html 代码：
<body onload="init()">
<!--定时弹出广告图片位置-->
< img src="../img/f001a62f-a49d-4a4d-b56f-
2b6908a0002c_g.jpg" width="100%" style="display: none"
id="img2"/ >BOM 对象
Window 对象
setInterval():它有一个返回值，主要是提供给 clearInterval 使用。
setTimeout():它有一个返回值，主要是提供给 clearTimeout 使用。
clearInterval():该方法只能清除由 setInterval 设置的定时操作
clearTimeout():该方法只能清除由 setTimeout 设置的定时操作
弹出框代码
<script>
//警告框
//alert("aaa");
//确认按钮
//confirm("您确认删除吗？");
//提示输入框
prompt("请输入价格：");
</script>href:该属性可以完成通过 JS 代码控制页面的跳转。
<html>
<head>
<meta charset="UTF-8">
<title>location对象</title>
<script>
function tiao(){
window.location.href="http://www.itcast.cn";
}
</script>
</head>
<body>
<a href="#" onclick="tiao()">跳转到传智播客首页</a>
</body>
</html>History 对象
历史页面：使用 location 页面(把 href 属性值改为当前的 history)
go(参数)
参数：-1 返回上一个历史记录页面；-2 返回上上一个历史记录页面，1 进入下一个历
史记录页面。让按钮点击失效：
onclick=”javascript:volid(0)”
History 页面代码：
<input type="button" value=" 返回上一个页面 "
onclick="javascript:history.back()"/>Navigator 对象
Navigator 对象包含有关浏览器的信息。(该对象开发中不怎么常用)
Screen 对象
Screen 对象包含有关客户端显示屏幕的信息。(该对象开发中不怎么常用)
使用 JS 完成注册页面表单校验
第一步：确定事件(onfocus 聚焦事件)并为其绑定一 个函数
第二步：书写绑定函数(在输入框的后面给出提示信息)
第三步：确定事件(onblur 离焦事件)并为其绑定一个函数
第四步：书写函数(对数据进行校验，分别给出提示)
Html 代码：
<input type="text" name="user" size="34px" id="user"
onfocus="showTips('user',' 用 户 名 必 填 ！ ')"
onblur="check('user',' 用 户 名 不 能 为 空 ！ ')"/><span
id="userspan"></span>JS 代码：
function showTips(id,info){document.getElementById(id+"span").innerHTML="<font
color='gray'>"+info+"</font>";
}
function check(id,info){
//1.获取用户输入的用户名数据
var uValue = document.getElementById(id).value;
//2.进行校验
if(uValue==""){
document.getElementById(id+"span").innerHTML="<font
color='red'>"+info+"</font>";
}else{
document.getElementById(id+"span").innerHTML="";
}
}今日所学总结
ECMAScript
1.语法
2.变量：只能使用var定义，如果在函数的内容使用var定义，那么它是一个局部变量，如果没有使用var它是一个全局的。弱类型！
3.数据类型：原始数据类型(undefined/null/string/number/boolean)
4.语句：
5.运算符：==与===的区别
6.函数：两种写法(有命名称，匿名的)
BOM对象
window:alert(),prompt(),confirm(),setInterval(),clearInterval(),setTimeout(),clearTimeout()
history:go(参数)，back(),forward()
location: href属性
事件：
onsubmit()此事件写在form标签中，必须有返回值。
onload()此事件只能写一次并且放到body标签中
其它事件放到需要操作的元素位置。(onclick、onfocus、onblur)
获取元素：
document.getElementById("id")
获取元素里面的值:
document.getElementById(“id”).value
向页面输出
弹窗：alert();……
向浏览器中写入内容：document.write(内容)；
向页面指定位置写入内容,innerHTML