1.JavaScript的介绍
(1)是什么?
被设计用来向HTML页面添加交互行为,是一种脚本语言(轻量级语言)
(2)什么作用?
HTML是整个网站的骨架
CSS对整个网站的内容进行美化(修饰)
JavaScript能够让整个页面具有动态效果
(3)由什么组成?
ECMAScript(核心):包含基本语法、变量、关键字、保留字、数据类型、语句、函数
DOM(文档对象模型):包含关于整个HTML的内容
BOM(浏览器对象模型):包含整个浏览器的相关内容
2.ECMAScript的语法
区分大小写
变量是弱类型:定义变量时只用var
每行的结尾分号可有可无(最好写上)
3.ECMAScript的变量
变量可以不用声明,变量是弱类型,统一用var来定义,定义变量时不用使用关键字和保留字
3.ECMAScript的数据类型
分为原始数据类型和引用数据类型
原始数据类型(都是小写):string number boolean null(对象不存在) undefined(对象存在,访问属性和方法不存在(未初始化))
4.ECMAScript的运算符
全等号(===)和非全等号(!==)
例:var sNum="66";
var iNum=66;
alert(sNum==iNum) //返回true
alert(sNum===iNum) //返回false
alert(sNum!=iNum) //返回false
alert(sNum!==iNum) //返回true
5.ECMAScript的常用的对象
String Number Boolean Math Date Array Regxp
6.ECMAScript的获取元素内容的两个方法
获取元素:document.getElementById("id名称");
获取元素里面的值:document.getElementById("id名称").value;
7.JavaScript的用法
可放在head中
例:
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" οnclick="myFunction()">尝试一下</button>
</body>
</html>
也可放在body中(不推荐)
也可外连(最好放在body底部)
例:
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
7.JavaScript的输出
- (1)使用 window.alert() 弹出警告框。
- 例:
-
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);//页面加载后,弹出警告框,点击确认以后加载h1标签和p标签
</script>
</body>
</html> - (2)使用 document.write() 方法将内容写到 HTML 文档中。
- 例:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());//在上面h1标签和p标签加载完成后,在页面中写入当前日期和时间
</script>
</body>
</html> -
注意:
请使用 document.write() 向页面写入内容
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖。
例:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button οnclick="myFunction()">点我</button >//触发点击事件后,前面的内容就被覆盖,只显示时间了
<script>
function myFunction() {
document.write(Date());
}
</script>
</body>
</html> - (3)使用 innerHTML 向页面指定位置写入内容
- 例:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
</body>
</html> - (4)使用 console.log() 写入到浏览器的控制台
- 例:
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个 Web 页面</h1>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html
8.JavaScript的事件
表单提交事件:onsubmit 写在form表单里面 有return,如果没有return返回值的话,则如果条件不满足也可以提交页面,这个onsubmit默认返回的是true
例:<form action="#" method="get" οnsubmit="return mySubmit()">
判断表单中的内容是否为空:
if (user=="") {
alert("用户名不能为空");
return false;//如果为空,则不提交页面
}
校验表单中的邮箱是否正确:
邮箱的正则表达式:/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/
需满足的验证逻辑:
@之前必须有内容且只能是字母(大小写)、数字、下划线(_)、减号(-)、点(.)
@和最后一个点(.)之间必须有内容且只能是字母(大小写)、数字、点(.)、减号(-),且两个点不能挨着
最后一个点(.)之后必须有内容且内容只能是字母(大小写)、数字且长度为大于等于2个字节,小于等于6个字节
页面中的轮播图的实现:
举例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图效果</title>
<!-- 步骤分析:
1.确定事件(onload页面加载事件),并绑定函数,注意是在body里绑定onload
2.书写函数ImgChange
3.书写定时任务setinterval(“函数”,时间)
4.书写定时任务里的函数getImg
-->
<style>
#wrapper{
border: 1px solid black;
width:500px;
height:500px;
margin: auto;
}
img{
width: 100%;
height: 100%;
}
</style>
<script type="text/javascript">
function ImgChange(){
setInterval("getImg()",1000);
}
var i=0;
function getImg(){
i++;
document.getElementById("src1").src="img/中秋"+i+".jpg";
if (i==4) {
i=0;
}
}
</script>
</head>
<body onload="ImgChange()">
<div id="wrapper">
<img src="img/中秋1.jpg" id="src1" />
</div>
</body>
</html>
Browser对象包括:Windows对象,Navigator对象,History对象,Location对象,Screen对象
Windows对象(表示浏览器中打开的窗口)方法:
alert()显示带有一段消息和一个确认按钮的警示框
clearInterval()取消由setInterval()设置的定时器
clearTimeout()取消由setTimeout()设置的定时器
confirm()显示带有一段消息以及确认按钮和取消按钮的对话框
prompt()显示可提示用户输入的对话框
History对象包含用户在浏览器窗口访问过的URL
History对象方法:
back()加载history()列表中的前一个URL
forward()加载history()列表中的下一个URL
Location对象:对象包含有关URL的信息
表单注册:
//提交按钮时验证
//聚焦时,信息提示
function onfocusTest(id, info) {
document.getElementById(id + "span").innerHTML = "<font color='red'>*</font>" + "<font color='gray'>" + info + "</font>"
}
//离焦时,进行输入框的判断
function check(id, info) {
if(document.getElementById(id).value == "") {
document.getElementById(id + "span").innerHTML = "<font color='red'>" + info + "</font>"
} else {
document.getElementById(id + "span").innerHTML = ""
}
}
//密码确认
function repwd() {
if(document.getElementById("repassword").value == "") {
document.getElementById("repasswordspan").innerHTML = "<font color='red'>请再次输入密码</font>"
} else {
if(document.getElementById("repassword").value != document.getElementById("password").value) {
document.getElementById("repasswordspan").innerHTML = "<font color='red'>两次密码不一致</font>"
} else {
document.getElementById("repasswordspan").innerHTML = ""
}
}
}
//验证邮箱
function emailCheck() {
if(document.getElementById("email").value == "") {
document.getElementById("emailspan").innerHTML = "<font color='red'>请输入邮箱</font>"
} else {
if(!(/^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/).test(document.getElementById("email").value)) {
document.getElementById("emailspan").innerHTML = "<font color='red'>邮箱格式不正确</font>"
} else {
document.getElementById("emailspan").innerHTML = ""
}
}
}