什么是 JavaScript?
JavaScript被设计用来向HTML页面添加行为。
JavaScript是一种脚本语言（脚本语言是一种轻量级的编程语言）。
JavaScript由数行可执行计算机代码组成。
JavaScript通常被直接嵌入HTML页面。
JavaScript是一种解释性语言（就是说，大妈执行不进行预编译）。
所有的人无需购买许可证均可使用JavaScript。
Java 与 javascript 有什么区别？它们没有关系，雷锋和雷峰塔的关系。
Javascript：它能够让整个页面具有动态效果。
ECMAScript:它是整个 javascript 的核心，包含(基本语法、变量、关键字、保留字、数
据类型、语句、函数等等)
DOM：文档对象模型，包含(整个 html 页面的内容)、
BOM：浏览器对象模型,包含(整个浏览器相关内容)
ECMAScript 语法
区分大小写：变量、函数名、运算符以及其他一切东西都是区分大小写的。
变量是弱类型的：ECMAScript 中的变量无特定的类型，定义变量时只用 var 运算符，可以将它初始化为任意值。因此，可以随时改变变量所存数据的类型（尽量避免这样做）。
每行结尾的分号可有可无：ECMAScript 就把折行代码的结尾看做该语句的结尾（与 Visual Basic 和 VBScript 相似），前提是这样没有破坏代码的语义。最好的代码编写习惯是总加入分号，因为没有分号，有些浏览器就不能正确运行。
注释：有两种类型的注释：1.单行注释以双斜杠开头（//）2.多行注释以单斜杠和星号开头（/*），以星号和单斜杠结尾（*/）
括号表示代码块：代码块表示一系列应该按顺序执行的语句，这些语句被封装在左括号（{）和右括号（}）之间。
ECMAScript 变量
ECMAScript 中的变量是用 var 运算符（variable 的缩写）加变量名定义的。
ECMAScript 中的变量并不一定要初始化（它们是在幕后初始化的，将在后面讨论这一点）。
ECMAScript 另一个有趣的方面（也是与大多数程序设计语言的主要区别），是在使用变量之前不必声明。
ECMAScript 原始类型
ECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。
- undefined - 如果变量是 Undefined 类型的
- boolean - 如果变量是 Boolean 类型的
- number - 如果变量是 Number 类型的
- string - 如果变量是 String 类型的
- object - 如果变量是一种引用类型或 Null 类型的
注释：您也许会问，为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误，然后被ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。
ECMAScript 等性运算符
全等号由三个等号表示（===），只有在无需类型转换运算数就相等的情况下，才返回 true。
获取元素内容
获取元素
document.getElementById(“id 名称”);{如果 id 是一个字符串，那么必须加上引号，如果是一个变量那么不需要。}
获取元素里面的值
document.getElementById(“id 名称”).value;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>获取元素</title>
<script>
window.onload = function(){
//获取页码指定位置的元素
var uEle = document.getElementById("username");
//alert(uEle);
//获取页面指定位置的内容（值）
var uValue = uEle.value;
alert(uValue);
}
</script>
</head>
<body>
用户名：<input type="text" name="username" id="username"/><br />
密码：<input type="password" name="password" />
</body>
</html>
javascript 事件
表单提交事件：onsubmit
关于事件 onsubmit：一般用于表单提交的位置，那么需要在定义函数的时候给出一个返回值。 onsubmit = return checkForm()
JavaScript 通常用于操作 HTML 元素。
操作 HTML 元素：向页面指定位置写入内容：innerHTML(属性)
如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。使用 "id" 属性来标识 HTML 元素，通过指定的 id 来访问 HTML 元素，并改变其内容：
document.getElementById("demo").innerHTML="My First JavaScript";
写到文档输出:向页面写入内容：document.write(“”);
直接把 <p> 元素写到 HTML 文档输出中：
document.write("<p>My First JavaScript</p>");
警告框：alert();
正则表达式：
匹配邮箱：/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
使用 JS 完成注册表单数据校验
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<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("email").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确");
return false;
}
}
</script>
</head>
<body>
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<!--1.logo部分-->
<tr>
<td>
<!--嵌套一个一行三列的表格-->
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img src="../img/logo2.png" height="47px" />
</td>
<td width="33.3%">
<img src="../img/header.png" height="47px" />
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--2.导航栏部分-->
<tr height="50px">
<td bgcolor="black">
<a href="#"><font size="5" color="white">首页</font></a>
<a href="#"><font color="white">手机数码</font></a>
<a href="#"><font color="white">电脑办公</font></a>
<a href="#"><font color="white">鞋靴箱包</font></a>
<a href="#"><font color="white">家用电器</font></a>
</td>
</tr>
<!--3.注册表单-->
<tr>
<td height="600px" background="../img/regist_bg.jpg">
<!--嵌套一个十行二列的表格-->
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
<table border="1px" width="750px" height="360px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">用户注册</font> USER REGISTER
</td>
</tr>
<tr>
<td>
用户名
</td>
<td>
<input type="text" name="user" size="34px" id="user"/>
</td>
</tr>
<tr>
<td>
密码
</td>
<td>
<input type="password" name="password" size="34px" id="password"/>
</td>
</tr>
<tr>
<td>
确认密码
</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"/>
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="text" name="email" size="34px" id="email"/>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<input type="text" name="username" size="34px" />
</td>
</tr>
<tr>
<td>
性别
</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr>
<td>
出生日期
</td>
<td>
<input type="text" name="birthday" size="34px" />
</td>
</tr>
<tr>
<td>
验证码
</td>
<td>
<input type="text" name="yzm" size="34px" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--4.广告图片-->
<tr>
<td>
<img src="../img/footer.jpg" width="100%" />
</td>
</tr>
<!--5.友情链接和版权信息-->
<tr>
<td align="center">
<a href="#">1234</a>
<a href="#">2234</a>
<a href="#">3234</a>
<a href="#">4234</a>
<a href="#">5234</a>
<a href="#">6234</a>
<a href="#">7234</a>
<a href="#">8234</a>
<p>
123456789
</p>
</td>
</tr>
</table>
</body>
</html>
切换图片：
<!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()" />
<img src="../../img/1.jpg" width="100%" height="100%" id="img1"/>
</div>
</body>
</html>
轮播图完成
步骤分析
第一步：确定事件(onload)并为其绑定一个函数
第二步：书写绑定的这个函数
第三步：书写定时任务(setInterval)
第四步：书写定时任务里面的函数
第五步：通过变量的方式，进行循环(获取轮播图的位置，并设置 src 属性)
<script>
function init(){
// 书写轮播图片显示的定时操作
setInterval("changeImg()",3000);
}
// 书写函数
var i=1;
function changeImg(){
i++;
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
</script>
<!--3.轮播图部分-->
<div id="">
<img src="../img/1.jpg" width="100%" id="img1"/>
</div>
浙公网安备 33010602011771号