一、元素获取：
相关知识：
- javascript代码在<javascript></javascript>标签中书写，然后放在<head></head>标签中；
- window.onload()方法表示html只要一加载，就立马触发的事件
- function（）函数，也可以表示一个方法，分为'有方法名'的和'无方法名'的.
- 用document.getElementById(id)获取指定元素，然后 用 .value获取值
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素+++</title>
<script>
//window可要可不要
window.onload=function(){
var uEle=document.getElementById("username");
var uValue=uEle.value;
alert(uValue);
}
</script>
</head>
<body>
用户名：<input type="text" name="username"/ id="username"><br />
密码：<input type="password" name="password"/>
</body>
</html>
效果图如下：
元素获取.png
二、表单页面校验
相关知识：
- onsubmit事件表示点击提交按钮后触发；
- 邮箱校验用正则表达式 .test()；
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册页面+++</title>
<script>
function checkForm(){
//校验用户名
var uValue=document.getElementById("user").value;
if(uValue==""){
alert("用户名不能为空");
return false;
}
//校验密码
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>
</head>
<body>
<form onsubmit="return checkForm()">
用户名<input type="text" name="user" id="user"/>
密码<input type="password" name="password" id="password"/>
确认密码<input type="password" name="repassword" id="repassword" />
Emaile<input type="text" name="email" id="eamil"/>
</form>
</body>
</html>
三、JS实现轮播图：
1、轮播图初识：
相关知识：
- onclick事件表示点击普通按钮后会触发一个函数；
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>切换图片+++</title>
<style>
div{
border: 1px solid white;
width:500px ;
height: 350px;
margin: auto;
text-align: center;
}
</style>
<script>
var i=1;
function changeImg(){
i++;
document.getElementById("img1").src="../../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
</head>
<body>
<div>
<input type="button" value="下一张" onclick="changeImg()"/>
</div>
</body>
</html>
效果图如下：
点击“下一张”，更换图片
轮播图.png
2、轮播图定时播放：
相关知识：
- 在<body></body>标签中写入onload事件，调用一个函数；
<body onload="init()">
</body>
- 然后init()函数调用setInterval（）方法。
function init(){
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);
}
四、 JS实现广告弹窗（持续三秒自动关闭）
相关知识：
- confirm("弹窗内容")方法表示弹出一个窗口；
- prompt("请输入价格")弹出一个窗口，供输入价格；
- time = setInterval("showAd()",3000);
- clearInterval(time);
- 外部引入JavaScript文件
<script type="text/javascript" src="1.js" ></script>
代码如下：
01_Window对象.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Window对象</title>
<script>
//确认弹出框
//confirm("您确定是否删除吗？");
//输入框
//prompt("请输入价格");
</script>
</head>
<body>
<a href="02_History对象.html">点我！</a>
</body>
</html>
02_History对象.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>History对象</title>
<script>
function fanhui(){
history.go(1);
//history.back();
}
</script>
</head>
<body>
<input type="button" value="返回上一页" onclick="fanhui()"/><br />
<a href="03_Location对象.html">下一页</a>
</body>
</html>
03_Location对象.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Location对象</title>
</head>
<body>
<input type="button" value="跳转到history页面" onclick="javascript:location.href='02_History对象.html'"/>
</body>
</html>
五、 注册页面校验完善
相关知识：
- onfocus聚焦事件，将鼠标指针指向输入框就触发；
- onblur离焦事件，将鼠标指针移出输入框就触发；
代码实现如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
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="";
}
}
</script>
</head>
<body>
用户名<input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空！')"/><span id="userspan"></span>
密码<input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码必填')" onblur="check('password','密码不能为空!')"/><span id="passwordspan"></span>
</body>
</html>
六、总结：
javascript简单介绍
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
