JavaScript是一门客户端脚本语言。运行在客户端浏览器中,每个浏览器都有JavaScript的解析引擎。
JavaScript可以增强用户和html页面的交互过程,来控制html元素,让页面有一些动态效果。
(1)1992,Nombase公司开发出一门客户端脚本语言,专门用于表单的校验。命名为:C–,后来更名为SciptEase。
(2)1995,NetScape(网景)公司开发了一门客户端脚本语言:LiveScript。后来请SUN公司专家,修改LiveScript,命名为JavaScript。
(3)1996,微软抄袭JavaScript开发出JScript语言。
(4)1997,ECMA(欧洲计算机制造商协会),指定出客户端脚本语言的标准:ECMAScript,就是统一了所有客户端脚本语言的编码方式。
因此:JavaScript = ECMAScript + JavaScript自己特有的东西(BOM + DOM)
(1)内部JS
定义标签,标签体就是js代码。
(2)外部JS
定义标签,通过src属性引入外部js文件。
标签可以写在html页面的任意位置,位置会影响js代码和html代码的执行先后顺序。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--内部JS-->
<script>
alert("Hello World");
</script>
<!--外部JS-->
<script src = "js/a.js"></script>
</head>
<body>
</body>
</html>
a.js
alert("我是外部的JS文件");
(1)单行注释://注释内容
(2)多行注释:/* 注释内容 */
(1)原始数据类型(基本数据类型)
(2)引用数据类型:对象
(1)Java语言是强类型语言,而JavaScript是弱类型语言。
(2)变量定义的语法
(1)一元运算符:只有一个运算数的运算符。
(2)算术运算符
(3)赋值运算符
(4)比较运算符
(5)逻辑运算符
(6)三元运算符
(1)if…else…
(2)switch
在Java中switch语句可以接受的数据类型:byte int short char 枚举 String
在JS中,switch语句可以接受任意的数据类型。
(3)while
(4)do…while
(5)for
(1)创建
创建方式1:
function 方法名称(形式参数列表){
方法体;
}
创建方式2:
var 方法名 = function(形式参数列表){
方法体;
}
(2)属性
(3)特点
(4)调用
(1)创建
(2)方法
(3)属性
(4)特点
(1)创建
(2)方法
(1)创建
(2)方法
(3)属性
(1)正则表达式:定义字符串的组成规则。
① 单个字符:[ ]
(2)正则对象
//创建方法1
var reg = new RegExp("^\\w{6,12}$");
//创建方法2
var reg2 = /^\w{6,12}$/;//表达的含义为:字符串要以单个单词字符[a-zA-Z0-9_]开始和结束,并且字符串内容是[a-zA-Z0-9_]中的任意字符,以及字符串长度最小为6,最大为12.
//验证:用test(参数)方法验证指定的字符串是否符合正则定义的规范。
var username = "zhangsan";
var flag = reg2.test(username);
alert(flag);
(1)特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用。
(2)方法:
var jscode = "alert(123)";
eval(jscode);//用eval会将字符串jscode进行解析,并起将其当做脚本来执行,即执行alert("123");
BOM(Browser Object Model)浏览器对象模型,也就是将浏览器的各个组成部分封装成对象,主要包括:Window窗口对象、Location浏览器对象、History历史记录对象、Navigator浏览器对象、Screen显示器屏幕对象。
(1)对象主要方法
① 与弹出框有关的方法
② 与打开关闭浏览器有关的方法
③ 与定时器有关的方法
(3)属性
(4)特点
(1)创建(本质上是用window获取其属性location)
(2)方法
(3)属性
(1)创建
(2)方法
(3)属性
DOM(Document Object Model)文档对象模型,也就是将标记语言文档的各个组成部分,封装成对象。可是使用这些对象,对HTML文档进行CRUD的动态操作。
DOM可以将HTML文档表达为树结构。如下图,DOM可以将左图中的HTML文档,解析成右图的DOM树对象。
W3C(万维网联盟)定义了访问HTML和XML文档的标准:W3C文档对象模型(DOM)允许程序和脚本动态地访问和更新文档内容、结构和样式。W3C DOM标准被分为3个不同组成部分:
(1)创建(获取):在HTML DOM模型中可以使用BOM模型中的window对象来获取
(2)方法
(1)创建(获取):通过document文档对象中的方法获取或创建。
(2)方法
(1)特点:所有DOM对象都可以被认为是一个节点。
(2)方法(CURD DOM树)
(3)属性
HTML DOM定义了所有HTML元素的对象和属性,以及访问他们的方法。换言之,HTML DOM是关于如何获取、修改、添加或者删除HTML元素的标准。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>innerHTML</title>
</head>
<body>
<div id = "div1">
div
</div>
<script>
var div = document.getElementById("div1");
//获取div标签中的内容
var div_inner = div.innerHTML;
//div标签中替换一个文本输入框
//div.innerHTML = "";
//div标签中追加一个文本输入框
div.innerHTML += "";
</script>
</body>
</html>
(1)第一种方式是:使用元素的style属性来设置。
(2)第二种方式是:提前定义好类选择器的样式,通过元素的className属性设置其class属性值,从而达到改变样式的目的。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制样式</title>
<style>
//类选择器
.d1{
border: 1px solid red;
width: 100px;
height: 100px;
}
.d2{
border: 1px solid blue;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id = "div1">
div1
</div>
<div id = "div2">
div2
</div>
<script>
var div1 = document.getElementById("div1");
div1.onclick = function () {
//修改样式方式1
div1.style.border = "1px solid red";
div1.style.width = "200px";
div1.style.fontSize = "20px";
}
//提前定义好类选择器的样式,通过元素的className属性来设置其Class属性值,达到样式的控制。
var div2 = document.getElementById("div2");
div2.onclick = function () {
div2.className = "d2";
}
</script>
</body>
</html>
HTML中某些组件被执行了某些操作后,出发某些代码的执行。其中:
(1)点击事件
(2)焦点事件
(3)加载事件
(4)鼠标事件
(5)键盘事件
(6)选中和改变
(7)表单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选</title>
<style>
table{
border-collapse: collapse;
border: 2px solid;
width: 500px;
margin-left: 30%;
}
td,th{
text-align: center;
border: 2px solid;
}
div{
margin-top: 10px;
margin-left: 30%;
}
.out{
background-color: white;
}
.over{
background-color: pink;
}
</style>
<script>
/*
* 分析:
* 1.全选
* * 获取所有的checkbox
* * 遍历checkbox,设置每个checkbox的状态为选中。(利用checked属性)
* */
//1.设置在页面加载完后绑定事件
window.onload =function () {
//2.给全选按钮绑定单击事件
document.getElementById("selectAll").onclick = function () {
//获取所有的checkbox
var cbs = document.getElementsByName("cb");
for(var i = 0;i<cbs.length;i++){
cbs[i].checked = true;
}
}
//3.给全不选按钮绑定单击事件
document.getElementById("unSelectAll").onclick = function () {
var cbs = document.getElementsByName("cb");
for(var i = 0;i<cbs.length;i++){
cbs[i].checked = false;
}
}
//4.给反选按钮绑定单击事件
document.getElementById("selectRev").onclick = function () {
var cbs = document.getElementsByName("cb");
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = !cbs[i].checked;
}
}
//5.给第一个checkbox设置单击事件
document.getElementById("firstCb").onclick = function () {
var cbs = document.getElementsByName("cb");
for(var i = 0;i<cbs.length;i++){
cbs[i].checked = this.checked;//this为当前事件源对象,也就是document.getElementById("firstCb")得到的对象
}
}
//6.给所有tr绑定鼠标移到元素之上和移出元素事件
var trs = document.getElementsByTagName("tr");
for(var i = 0;i<trs.length;i++){
trs[i].onmouseout = function () {
//通过className改变样式
this.className = "out";
}
trs[i].onmouseover = function () {
this.className = "over";
}
}
}
</script>
</head>
<body>
<table>
<caption>学生信息表</caption>
<tr>
<th><input type="checkbox" name="cb" id = "firstCb"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>1</td>
<td>令狐冲</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" name="cb"></td>
<td>3</td>
<td>任盈盈</td>
<td>女</td>
<td><a href="javascript:void(0);">删除</a></td>
</tr>
</table>
<div>
<input type="button" id = "selectAll" value = "全选">
<input type="button" id = "unSelectAll" value="全不选">
<input type="button" id = "selectRev" value="反选">
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单验证</title>
<style>
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
body{
background: url("img/register_bg.png") no-repeat center;
padding-top: 25px;
}
.rg_layout{
width: 900px;
height: 500px;
border: 8px solid #EEEEEE;
background-color: white;
/*让div水平居中*/
margin: auto;
}
.rg_left{
/*border: 1px solid red;*/
float: left;
margin: 15px;
}
.rg_left > p:first-child{
color:#FFD026;
font-size: 20px;
}
.rg_left > p:last-child{
color:#A6A6A6;
font-size: 20px;
}
.rg_center{
float: left;
/* border: 1px solid red;*/
}
.rg_right{
/*border: 1px solid red;*/
float: right;
margin: 15px;
}
.rg_right > p:first-child{
font-size: 15px;
}
.rg_right p a {
color:pink;
}
.td_left{
width: 100px;
text-align: right;
height: 45px;
}
.td_right{
padding-left: 50px ;
}
#username,#password,#email,#name,#tel,#birthday,#checkcode{
width: 251px;
height: 32px;
border: 1px solid #A6A6A6 ;
/*设置边框圆角*/
border-radius: 5px;
padding-left: 10px;
}
#checkcode{
width: 110px;
}
#img_check{
height: 32px;
vertical-align: middle;
}
#btn_sub{
width: 150px;
height: 40px;
background-color: #FFD026;
border: 1px solid #FFD026 ;
}
.error{
color:red;
}
#td_sub{
padding-left: 150px;
}
</style>
<script>
window.onload = function () {
document.getElementById("form").onsubmit = function () {
return checkUsername() && checkPassword();
}
document.getElementById("username").onblur = checkUsername;
document.getElementById("password").onblur = checkPassword;
}
//检验用户名
function checkUsername(){
var username = document.getElementById("username").value;
var reg_username = /^\w{6,12}$/;
var flag = reg_username.test(username);
var s_username = document.getElementById("s_username");
if(flag){
s_username.innerHTML = "";
}else{
s_username.innerHTML = "用户名格式错误";
}
}
//建议密码
function checkPassword(){
var password = document.getElementById("password").value;
var reg_password = /^\w{6,12}$/;
var flag = reg_password.test(password);
var s_password = document.getElementById("s_password");
if(flag){
s_password.innerHTML = "";
}else{
s_password.innerHTML = "密码格式错误";
}
}
</script>
</head>
<body>
<div class="rg_layout">
<div class="rg_left">
<p>新用户注册</p>
<p>USER REGISTER</p>
</div>
<div class="rg_center">
<div class="rg_form">
<!--定义表单 form-->
<form action="#" id="form" method="get">
<table>
<tr>
<td class="td_left"><label for="username">用户名</label></td>
<td class="td_right">
<input type="text" name="username" id="username" placeholder="请输入用户名">
<span id="s_username" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="password">密码</label></td>
<td class="td_right">
<input type="password" name="password" id="password" placeholder="请输入密码">
<span id="s_password" class="error"></span>
</td>
</tr>
<tr>
<td class="td_left"><label for="email">Email</label></td>
<td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
</tr>
<tr>
<td class="td_left"><label for="name">姓名</label></td>
<td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td class="td_left"><label for="tel">手机号</label></td>
<td class="td_right"><input type="text" name="tel" id="tel" placeholder="请输入手机号"></td>
</tr>
<tr>
<td class="td_left"><label>性别</label></td>
<td class="td_right">
<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female"> 女
</td>
</tr>
<tr>
<td class="td_left"><label for="birthday">出生日期</label></td>
<td class="td_right"><input type="date" name="birthday" id="birthday" placeholder="请输入出生日期"></td>
</tr>
<tr>
<td class="td_left"><label for="checkcode" >验证码</label></td>
<td class="td_right"><input type="text" name="checkcode" id="checkcode" placeholder="请输入验证码">
<img id="img_check" src="img/verify_code.jpg">
</td>
</tr>
<tr>
<td colspan="2" id="td_sub"><input type="submit" id="btn_sub" value="注册"></td>
</tr>
</table>
</form>
</div>
</div>
<div class="rg_right">
<p>已有账号?<a href="#">立即登录</a></p>
</div>
</div>
</body>
</html>