一、JavaScript
1.含义:
1)JavaScript是一种脚本语言(即轻量级的编程语言)
2)是一种解释性语言(代码执行不进行预编译)
2.作用:
HTML:整个网站的骨架。
CSS: 对整个网站骨架的内容进行美化(修饰)
Javascript: 让整个页面具有动态效果。
3.组成部分:
1)ECMAScript:它是整个 javascript 的核心,包含(基本语法、变量、关键字、保留字、数据类型、语句、函数等等)
2)DOM(Document Object Mode): 文档对象模型, 包含(整个 html 页面的内容)
3)BOM: 浏览器对象模型,包含(整个浏览器相关内容)
4.获取元素内容:
1)获取元素
document.getElementById(“id 名称”);
2)获取元素里面的值
document.getElementById(“id 名称”).value;
5.javascript 事件:
表单提交事件: onsubmit
8. javascripte 的输出:
1)警告框: alert();
2)向页面指定位置写入内容: innerHTML(属性)
3)向页面写入内容: document.write(“”)
9.引入方式:
1)内部引入方式
直接将 javascript 代码写到<script type=”text/javascript”></script>
2)外部引入方式
需要创建一个.js文件,在里面书写 javascript代码,然后在 html文件中通过 script标签的 src 属性引入该外部的 js 文件
<script>
function checkForm(){
//alert("aa");
/**校验用户名*/
//1.获取用户输入的数据
var uValue = document.getElementById("user").value;
//alert(uValue);
if(uValue==""){
//2.给出错误提示信息
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>
二、BOM 对象
BOM 对象:浏览器对象模型(操作与浏览器相关的内容)
1.Window对象(表示浏览器中打开的窗口)
1)setInterval():它有一个返回值,主要是提供给 clearInterval 使用
2)setTimeout():它有一个返回值,主要是提供给 clearTimeout 使用
3)clearInterval():该方法只能清除由 setInterval 设置的定时操作
4)clearTimeout():该方法只能清除由 setTimeout 设置的定时操作
<!--<script type="text/javascript">
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>-->
<div id="">
<img src="../img/1.jpg" width="100%" id="img1"/>
</div>
<!--定时弹出广告图片位置-->
<img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%" style="display: none" id="img2"/>
<!--3.轮播图部分-->
<div id="">
<img src="../img/1.jpg" width="100%" id="img1"/>
</div>