JS的概述
JavaScript：运行在浏览器端的脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
JavaScript的组成：JavaScript 包括 ECMAScript、DOM 和 BOM
ECMAScript：JavaScript的基本的语法
BOM：Browser Object Model ：文档对象模型
DOM：Document Object Model ： 浏览器对象模型
其他的脚本语言：
JavaScript,ActionScript,Flex
JS的基本语法
区分大小写。
弱变量类型语言：（与Java不同）。
* Java
* int i = 3;
* String s = “abc”;
* JavaScript:
* var i = 3;
* var s = “abc”;
分号可有可无。
变量命名：
第一个字符必须是字母、下划线（_）或美元符号（$）
余下的字符可以是下划线、美元符号或任何字母或数字字符
JS的数据类型
JS将数据类型分成两类：
* 原始类型：
* undefined：未定义类型
* boolean:布尔类型
* number:数字类型
* string:字符或字符串.
* null：空
* 引用类型：
* 对象类型.对象类型默认值是null.
JS的运算符
JS中的运算符与Java中基本一致！
JS中有一个 === 全等于.全等于是类型和值都一致的情况下才为true.
JS的语句
JS中的语句与Java的语句一致！
JS的通常开发的步骤
JS通常都由一个事件触发.
触发一个函数,定义一个函数.
获得操作对象的控制权.
修改要操作的对象的属性或值.
定义函数:
* function 函数名称(){
// 函数体
}
* window.onload = function(){
}
常用事件：onclick,ondblclick,onmouseover,onmouseout,onload...
JS的引入方式
通常两种方式：
一种：页面内直接编写JS代码,JS代码需要使用<script></script>.
二种：将JS的代码编写到一个.js的文件中,在HTML中引入该JS代码即可.
将JS的代码定义成一个文件引入:
<script src="../js/check.js"></script>
JS中的DOM对象
DOM的概述
什么是DOM
DOM：Document Object Model：文档对象模型.
将一个HTML的文档加载到内存形成一个树形结构,从而操作树形结构就可以改变HTML的样子.
DOM的使用：
知道document，element，attribute中的属性和方法
DOM的常用的操作
获得元素：
* document.getElementById(); -- 通过ID获得元素.
* document.getElementsByName(); -- 通过name属性获得元素.
* document.getElementsByTagName(); -- 通过标签名获得元素.
创建元素：
* document.createElement(); -- 创建元素
* document.createTextNode(); -- 创建文本
添加节点：
* element.appendChild(); -- 在最后添加一个节点.
* element.insertBefore(); -- 在某个元素之前插入.
删除节点：
* element.removeChild(); -- 删除元素
使用DOM完成对ul中添加一个li元素
function addElement(){
var city = document.getElementById("city");
// 创建一个元素:
var liEl = document.createElement("li");
// 创建一个文本节点:
var text = document.createTextNode("深圳");
// 添加子节点:
liEl.appendChild(text);
city.appendChild(liEl);
}
tips：
获得页面中的元素
* document.getElementById(“”);
正则的匹配
JS中有两种匹配正则的方式:
* 使用String对象中的match方法.
* 使用正则对象中的test方法.
HTML的window对象
* setInterval(); :每隔多少毫秒执行某个表达式.
* setInterval(“change()”,5000);
* setTimeout(); :隔多少毫秒执行一个该表达式.
* setTimeout(“change()”,5000);
null 和 undefined区别
在JavaScript中存在两种原始类型:Null与Undefined。这两种类型常使开发人员产生疑惑，在什么时候是Null，什么时候又undefined?
Undefined类型只有一个值，即undefined。当声明的变量还未被初始化时，变量的默认值为undefined。
Null类型也只有一个值，即null。null用来表示尚未存在的对象，常用来表示函数企图返回一个不存在的对象。
js 代码
alert(typeof undefined); //output "undefined"
alert(typeof null); //output "object"
第一行代码很容易理解，undefined的类型为Undefined；第二行代码却让人疑惑，为什么null的类型又是Object了呢？其实这是JavaScript最初实现的一个错误，后来被ECMAScript沿用下来。在今天我们可以解释为，null即是一个不存在的对象的占位符，但是在实际编码时还是要注意这一特性。
js 代码
alert(null == undefined); //output "true"
ECMAScript认为undefined是从null派生出来的，所以把它们定义为相等的。但是，如果在一些情况下，我们一定要区分这两个值，那应该怎么办呢？可以使用下面的两种方法。
js 代码
alert(null === undefined); //output "false"
alert(typeof null == typeof undefined); //output "false"
使用typeof方法在前面已经讲过，null与undefined的类型是不一样的，所以输出"false"。而===代表绝对等于，在这里null === undefined输出false。
邮箱正则
/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/
// JS校验正则表达式就有两个方法:String对象中的match方法,一个是正则对象中的test方法.
// str.match(/正则表达式/);
if(!eValue.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+.([a-zA-Z0-9_-])+/)){
alert("邮箱格式不正确！");
return false;
}
//正则.test("字符串");
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+.([a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确！");
return false;
}
//比较两种写法.
var i = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+.([a-zA-Z0-9_-])+/; //aa@aa.com
// /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ aa@aa
注册from的简单校验
<html> <head> <meta charset="UTF-8"> <title></title> <link href="../css/main.css" rel="stylesheet" type="text/css" /> <style> .content{ border:1px solid blue; height: 600px; background: url(../img/regist_bg.jpg); margin: 10px 0px; } </style> <script> // 第一步确定事件：onsubmit // 第二步编写触发函数： function checkForm(){ // 第三步：通过ID获得元素 var uValue = document.getElementById("username").value; // alert(uValue); 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("email").value; var i = //; var i = // JS校验正则表达式就有两个方法:String对象中的match方法,一个是正则对象中的test方法. // str.match(/正则表达式/); 正则.test("字符串"); /*if(!eValue.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+.([a-zA-Z0-9_-])+/)){ alert("邮箱格式不正确！"); return false; }*/ // /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/ aa@aa -->老师错误写法 if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+.([a-zA-Z0-9_-])+/.test(eValue)){ alert("邮箱格式不正确！"); return false; } } </script> </head> <body> <!-- 创建一个整体的DIV --> <div> <div> <div class="top"> <img src="../img/logo2.png" height="48"/> </div> <div class="top"> <img src="../img/header.png" height="48"/> </div> <div class="top" style="padding-top: 10px;height: 40px;"> <a href="#">登录</a> <a href="#">注册</a> <a href="#">购物车</a> </div> </div> <!--清除浮动--> <div class="clear"></div> <!-- 菜单部分的DIV--> <div class="menu"> <ul> <li style="display: inline;">首页</li> <li style="display: inline;">电脑</li> <li style="display: inline;">手机</li> <li style="display: inline;">汽车</li> </ul> </div> <div class="content"> <div style="position: absolute;left:400px;top:150px;background-color: white;border:5px solid gray; 700px;height: 500px;"> <h3>用户注册</h3> <form action="../案例一：使用CSS布局首页/index.html" method="post" onsubmit="return checkForm();"> <table width="100%" height="100%" border="0" align="center" cellspacing="10"> <tr> <td>用户名</td> <td><input type="text" id="username" name="username" placeholder="请输入用户名"/></td> </tr> <tr> <td>密码</td> <td><input type="password" id="password" name="password"/></td> </tr> <tr> <td>确认密码</td> <td><input type="password" id="repassword" name="repassword"/></td> </tr> <tr> <td>性别</td> <td><input type="radio" name="sex" value="男" checked="checked"/>男<input type="radio" name="sex" value="女"/>女</td> </tr> <tr> <td>Email</td> <td><input type="text" id="email" name="email"/></td> </tr> <tr> <td>姓名</td> <td><input type="text" name="name"/></td> </tr> <tr> <td>生日</td> <td><input type="text" name="birthday"/></td> </tr> <tr> <td>验证码</td> <td><input type="text" name="checkcode" size="10"/></td> </tr> <tr> <td colspan="2"><input type="submit" value="注册" style="background: url(../img/register.gif);"/></td> </tr> </table> </form> </div> </div > <div> <img src="../img/footer.jpg" /> </div> <div align="center"> <a href="../案例一：网站信息页面显示/网站信息页面显示.html">关于我们</a> <a href="">联系我们</a> <a href="">招贤纳士</a> <a href="">法律声明</a> <a href="link.html">友情链接</a> <a href="">支付方式</a> <a href="">配送方式</a> <a href="">服务声明</a> <a href="">广告声明</a> <br/> Copyright © 2009-2019 博客园 版权所有 </div> </div> </body> </html>
<html> <head> <meta charset="UTF-8"> <title>注册页面</title> <script> /*function tips(){ // 获得span元素: document.getElementById("usernameSpan").innerHTML="<font color='red'>用户名需要是字母或数字组成！</font>"; }*/ /*function checkUsername(){ document.getElementById("usernameSpan").innerHTML="<font color='green'>用户名可以使用</font>"; }*/ function tips(id,content){ document.getElementById(id+"Span").innerHTML = "<font color='red'>"+content+"</font>"; } function checkForm(){ // 判断用户名不能为空: var username = document.getElementById("username").value; if(username == ""){ document.getElementById("usernameSpan").innerHTML = "<font color='red'>用户名不能为空！</font>"; return false; } var password = document.getElementById("password").value; if(password == ""){ document.getElementById("passwordSpan").innerHTML = "<font color='red'>密码不能为空！</font>"; return false; } } </script> </head> <body> <!--整体DIV--> <div class="bodyDiv"> <div> <div class="logoDiv"> <img src="../img/logo2.png" height="50"/> </div> <div class="logoDiv"> <img src="../img/header.png" height="50"/> </div> <div class="logoDiv" style="margin-top:0px;padding-top:10px;height:40px;"> <a href="#">登录</a> <a href="#" id="reg">注册</a> <a href="#">购物车</a> </div> <div class="clear"></div> </div> <div style="height:50px;background-color: black;color:white;font-size: 20px;"> <ul > <li>首页</li> <li>首页</li> <li>首页</li> <li>首页</li> </ul> </div> <div style="height:500px;background-image: url(../img/regist_bg.jpg);"> <div style="border:5px solid gray;background-color:white;position:absolute;left:350px;top:160px;600px;"> <form action="../案例二：使用JS定时弹出广告/案例二：使用JS实定时弹出广告.html" method="post" onsubmit="return checkForm();"> <table border="0" width="100%" cellspacing="15"> <tr> <td>用户名</td> <td><input type="text" id="username" name="username" onfocus="tips('username','用户名需要是字母或数字组成！')"><span id="usernameSpan"></span></td> </tr> <tr> <td>密码</td> <td><input type="password" id="password" name="password" onfocus="tips('password','密码至少六位!')"><span id="passwordSpan"></span></td> </tr> <tr> <td>确认密码</td> <td><input type="password" id="repassword" name="repassword"></td> </tr> <tr> <td>性别</td> <td><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女</td> </tr> <tr> <td>籍贯</td> <td> <select name="province"> <option>-请选择-</option> </select> <select name="city"> <option>-请选择-</option> </select> </td> </tr> <tr> <td>爱好</td> <td> <input type="checkbox" name="hobby" value="篮球" />篮球 <input type="checkbox" name="hobby" value="足球" />足球 <input type="checkbox" name="hobby" value="排球" />排球 <input type="checkbox" name="hobby" value="羽毛球" />羽毛球 </td> </tr> <tr> <td>邮箱</td> <td><input type="text" id="email" name="email"></td> </tr> <tr> <td colspan="2"><input type="submit" value="注册"></td> </tr> </table> </form> </div> </div> <div> <img src="../img/footer.jpg" width="100%"/> </div> <div> //省略.... </div> </div> </body> </html>
JS完成图片轮播
<script> window.onload = function(){ // 设置定时： window.setInterval("changeImg()",5000); } var i = 1; function changeImg(){ i++; // 获得图片的控制权： if(i > 3){ i=1; } var img1 = document.getElementById("img1"); img1.src="../img/"+i+".jpg"; } </script>
JS实现定时弹出广告
1.在body的标签里面添加一个广告的div <div id="bodyDiv"> <div id="adDiv" style="100%;display:none;"> <img src="../img/f001a62f-a49d-4a4d-b56f-2b6908a0002c_g.jpg" width="100%"> </div> //省略代码.... </div> 2.添加js代码控制广告 var time; window.onload = function(){ time = window.setInterval("show()",5000); } // 显示广告的方法 function show(){ // 获得广告的div元素: var adDiv = document.getElementById("adDiv"); adDiv.style.display = "block"; window.clearInterval(time); time = window.setInterval("hide()",5000); } // 隐藏广告的方法: function hide(){ // 获得广告的div元素: var adDiv = document.getElementById("adDiv"); adDiv.style.display="none"; window.clearInterval(time); }
JS完成表格隔行换色
<html> <head> <meta charset="UTF-8"> <title></title> <script> function changeColor(){ // 获得要操作的对象的控制权： var tab1 = document.getElementById("tab1"); // 获得表格的所有的行数: var count = tab1.rows.length; // 遍历每行: for(var i = 0;i<count;i++){ if(i % 2 == 0){ // 偶数行 tab1.rows[i].style.backgroundColor = "#00FF00"; }else{ // 奇数行 tab1.rows[i].style.backgroundColor = "#00FFFF"; } } } </script> </head> <body onload="changeColor()"> <table id="tab1" border="1" width="80%" align="center"> <thead> <tr> <th>分类的ID</th> <th>分类的名称</th> <th>分类的描述</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>手机</td> <td>手机</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td>2</td> <td>电脑</td> <td>电脑</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td>3</td> <td>车子</td> <td>车子</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td>4</td> <td>房子</td> <td>房子</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td>5</td> <td>票子</td> <td>票子</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> </tbody> </table> </body> </html>
JS完成复选框的全选和全不选
<html> <head> <meta charset="UTF-8"> <title></title> <script> function changeColor(){ // 获得操作的表格的控制权: var tab1 = document.getElementById("tab1"); // 获得tbody中的所有的行. var len = tab1.tBodies[0].rows.length; for(var i = 0;i< len ;i++){ if(i % 2 == 0){ tab1.tBodies[0].rows[i].style.backgroundColor = "green"; }else{ tab1.tBodies[0].rows[i].style.backgroundColor = "gold"; } } } function checkAll(){ // 获得上面的复选框 var selectAll = document.getElementById("selectAll"); // 判断这个复选框是否被选中. var ids = document.getElementsByName("ids"); if(selectAll.checked == true){ // 上面复选框被选中：获得下面所有的复选框,修改checked属性 for(var i = 0 ;i<ids.length;i++){ ids[i].checked = true; } }else{ // 上面复选框没有被选中：获得下面所有的复选框,修改checked属性 for(var i = 0 ;i<ids.length;i++){ ids[i].checked = false; } } } </script> </head> <body onload="changeColor()"> <table id="tab1" border="1" width="80%" align="center"> <thead> <tr> <td colspan="5"><input type="button" value="添加"><input type="button" value="删除"></td> </tr> <tr> <th><input type="checkbox" id="selectAll" name="seleclAll" onclick="checkAll()"></th> <th>分类的ID</th> <th>分类的名称</th> <th>分类的描述</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox" name="ids"></td> <td>1</td> <td>手机</td> <td>手机</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" name="ids"></td> <td>2</td> <td>电脑</td> <td>电脑</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" name="ids"></td> <td>3</td> <td>车子</td> <td>车子</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" name="ids"></td> <td>4</td> <td>房子</td> <td>房子</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> <tr> <td><input type="checkbox" name="ids"></td> <td>5</td> <td>票子</td> <td>票子</td> <td><a href="">修改</a>|<a href="">删除</a></td> </tr> </tbody> </table> </body> </html>
JS完成省市联动
<html> <head> <meta charset="UTF-8"> <title>注册页面</title> <script> // 定义数组：二维数组： var arrs = new Array(5); arrs[0] = new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市"); arrs[1] = new Array("南京市","苏州市","扬州市","无锡市"); arrs[2] = new Array("武汉市","襄阳市","荆州市","宜昌市","恩施"); arrs[3] = new Array("石家庄市","唐山市","保定市","邢台市","廊坊市"); arrs[4] = new Array("长春市","吉林市","四平市","延边市"); function changeCity(value){ // 获得到选中的省份的信息. var city = document.getElementById("city"); // 清除第二个列表中的内容: for(var i=city.options.length-1;i>0;i--){ city.options[i] = null; } // city.options.length = 0; // alert(value); for(var i= 0 ;i< arrs.length;i++){ if(value == i){// value = 1 // 获得所有的市的信息. for(var j=0;j<arrs[i].length;j++){ // alert(arrs[i][j]); alert(arr[1][1]) // 创建元素： var opEl = document.createElement("option");// <option></option> // 创建文本节点: var textNode = document.createTextNode(arrs[i][j]); // 将文本的内容添加到option元素中. opEl.appendChild(textNode); // 将option的元素添加到第二个列表中. city.appendChild(opEl); } } } } </script> </head> <body> <!--整体DIV--> <div class="bodyDiv"> <div> <div class="logoDiv"> <img src="../img/logo2.png" height="50"/> </div> <div class="logoDiv"> <img src="../img/header.png" height="50"/> </div> <div class="logoDiv" style="margin-top:0px;padding-top:10px;height:40px;"> <a href="#">登录</a> <a href="#" id="reg">注册</a> <a href="#">购物车</a> </div> <div class="clear"></div> </div> <div style="height:50px;background-color: black;color:white;font-size: 20px;"> <ul > <li>首页</li> <li>首页</li> <li>首页</li> <li>首页</li> </ul> </div> <div style="height:500px;background-image: url(../img/regist_bg.jpg);"> <div style="border:5px solid gray;background-color:white;position:absolute;left:350px;top:160px;600px;"> <form action="../案例二：使用JS定时弹出广告/案例二：使用JS实定时弹出广告.html" method="post" onsubmit="return checkForm();"> <table border="0" width="100%" cellspacing="15"> <tr> <td>用户名</td> <td><input type="text" id="username" name="username" onfocus="tips('username','用户名需要是字母或数字组成！')"><span id="usernameSpan"></span></td> </tr> <tr> <td>密码</td> <td><input type="password" id="password" name="password" onfocus="tips('password','密码至少六位!')"><span id="passwordSpan"></span></td> </tr> <tr> <td>确认密码</td> <td><input type="password" id="repassword" name="repassword"></td> </tr> <tr> <td>性别</td> <td><input type="radio" name="sex" value="男">男<input type="radio" name="sex" value="女">女</td> </tr> <tr> <td>籍贯</td> <td> <select id="province" name="province" onchange="changeCity(this.value)"> <option value="">-请选择-</option> <option value="0">浙江省</option> <option value="1">江苏省</option> <option value="2">湖北省</option> <option value="3">河北省</option> <option value="4">吉林省</option> </select> <select id="city" name="city"> <option>-请选择-</option> </select> </td> </tr> <tr> <td>爱好</td> <td> <input type="checkbox" name="hobby" value="篮球" />篮球 <input type="checkbox" name="hobby" value="足球" />足球 <input type="checkbox" name="hobby" value="排球" />排球 <input type="checkbox" name="hobby" value="羽毛球" />羽毛球 </td> </tr> <tr> <td>邮箱</td> <td><input type="text" id="email" name="email"></td> </tr> <tr> <td colspan="2"><input type="submit" value="注册"></td> </tr> </table> </form> </div> </div> <div> <img src="../img/footer.jpg" width="100%"/> </div> <div> <center> 关于我们 联系我们 招贤纳士 法律声明 友情链接 支付方式 配送方式 服务声明 广告声明 <br/> Copyright © 2005-2016 波波商城 版权所有 </center> </div> </div> </body> </html>