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" onclick="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 onclick="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" onsubmit="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 = ""
}
}
}