前言:笔记整理,主要用于自我复习
1.使用JS完成注册页面的校验
1.1相关知识点
1.1.1 JavaScript的概述
JavaScript是web上⼀种功能强大的编程语言,用于开发交互式的web页面。它不需要进行编译,而是直接嵌入在HTML页面中,由浏览器执行。
- JavaScript被设计用来向HTML页面添加交互行为。
- JavaScript是⼀种脚本语言(脚本语言是⼀种轻量级的编程语言)。
- JavaScript由数行可执行计算机代码组成。
- JavaScript通常被直接嵌入HTML页面。
- JavaScript是⼀种解释性语言(就是说,代码执行不进行预编译)。
- JavaScript的组成:
- 核心(ECMAScript)
- 文档对象模型(DOM)
- 浏览器对象模型(BOM)
- ECMAScript:语法,语句
- BOM:浏览器对象
- DOM:Document Object Mode,操作文档中的元素和内容
JavaScript的作用:
使用JavaScript添加页面动画效果,提供用户操作体验。主要应用有:嵌入动态文本于HTML页面、对浏览器事件做出相应、读写HTML元素、验证提交数据、检测访客的浏览器信息等。
JavaScript的引入:
在HTML文件中引入JavaScript有两种方式,⼀种是在HTML文档直接嵌入JavaScript脚本,称为内嵌式,另⼀种是链接外部JavaScript脚本文件,称为外联式。
- 内嵌式:在HTML文档中,通过
<script>
标签引入
<script type="text/javascript">
arr1=new Array(5);
console.log(arr1);
</script>
- 外联式:在HTML文档中,通过
<script src="">
标签引入 .js 文件
<script>
console.log("hello js");
alert("这是一个弹窗");
</script>
<script src="js/myjs.js"></script>
1.1.2基本语法
- 变量
在使用JavaScript时,需要遵循以下命名规范:- 必须以字母或下划线开头,中间可以是数字、字符或下划线
- 变量名不能包含空格等符号
- 不能使用JavaScript关键字作为变量名,如:function
- JavaScript严格区分大小写
变量的声明:
var 变量名;
变量的赋值:
var 变量名 = 值;
- 数据类型
- 基本类型
- Undefined,Undefined类型只有⼀个值,即undefined。当声明的变量未初始化时,该变量的默认值是undefined。
- Null,只有⼀个专用值null,表示空,⼀个占位符。值undefined实际上是从值null派生来的,因此ECMAScript把他们定义为相等的。
alert(null == undefined); // 输出“true”,尽管这两个值相等,但它们的含义不同。 - Boolean,有两个值true和false
- Number,表示任意数字
- String,字符串由双引号(")或单引号(’)声明的。JavaScript没有字符类型
- 引用类型
- 引用类型通常叫做类(class),也就是说,遇到引用值,所处理的就是对象。
- JavaScript是基于对象而不是面向对象。对象类型的默认值是null。
- JavaScript提供众多预定义引用类型(内置对象)。
- 基本类型
- 运算符
JavaScript运算符与Java运算符基本⼀致。
1.2 案例实现
部分代码
<script>
window.onload=function(){
usernameInput=document.getElementById("username");
usernameInput.onblur=checkUsername;
passwordInput=document.getElementById("password");
passwordInput.onblur=checkPassword;
confPasswordInput=document.getElementById("confPassword");
confPasswordInput.onblur=checkConfPassword;
}
function checkUsername(){
username=usernameInput.value;
reg=/^[a-zA-Z]\w{7,17}$/;
spanMsg1=document.getElementById("spanMsg1");
if(!reg.test(username)){
spanMsg1.innerHTML="<font color='red'>用户名应该是长度为8-16位,由下字母,数字,下划线组成.</font>";
return false;
}else{
spanMsg1.innerHTML="";
return true;
}
}
·
·
·
function check(){
return checkUsername()&&checkPassword()&&checkConfPassword();
}
</script>
<body>
<form onsubmit="return check();" aciton="#" method="get" enctype="multipart/form-data">
<table border="0" cellspacing=0 cellpadding=10
align="center" width="600" height="300">
<tr>
<td align="center" width="30%"><font color="blue" size="4">会员注册</font></td>
<td colspan="2"><font><b>USER_REGISTER</b></font></td>
</tr>
·
·
·
<tr>
<td colspan="3" align="center"><input type="submit" name="" id="submit"/></td>
</tr>
</table>
</form>
</body>
实现效果
2.定时广告
2.1相关知识点
2.1.1 JavaScript定时器:setTimeout
- setTimeout(code, millisec) :在指定的毫秒数后调用函数或执行代码片段。
- 参数1:code必须。要调用的函数或要执行的代码字符串。
- 参数2:millisec必须。在执行代码前需等待的毫秒数。
- setInterval() :以指定周期执行函数或代码片段。
- clearInterval() :取消由setInterval() 设置的timeout。
- clearTimeout() :取消由setTimeout() 设置的timeout。
2.1.2 JavaScript样式获得或修改
obj.style.属性,获得指定“属性”的值。
obj.style.属性 = 值,给指定“属性”设置内容。
2.2 案例实现
<head>
<meta charset="utf-8">
<title>首页</title>
<style>
#header{
height: 53px;
}
·
·
·
</style>
<script>
onload=function(){
setTimeout("showAd()",1000);
}
function showAd(){
var ad=document.getElementById("ad");
ad.style.display="block";
setTimeout("hideAd()",5000);
}
function hideAd(){
var ad=document.getElementById("ad");
ad.style.display="none";
}
</script>
</head>
<body>
<form>
·
·
·
</form>
</body>
实现效果
广告出现一秒后消失
3. 省市⼆级联动
3.1相关知识点
3.1.1数组:Array
new Array();
new Array(size); // size 数组元素个数,数组成员默认值 undefined
new Array(element0, element1, ..., elementn); // 参数列表,为数组初始化数据
数组中的每⼀个成员没有类型限制,即可以存放任意类型
数组的长度可以自动修改,类似Java中的List集合等。
3.1.2 元素操作:createElement、appendChild
document.createElement(); // 创建元素节点
ele.appendChild(); // 向标签体末尾添加新的⼦节点
3.2案例实现
<head>
<meta charset="utf-8">
<title>省份</title>
<script>
var cities=[
["杭州市","宁波市","温州市","嘉兴市"],
["福州市","厦门市","莆田市","泉州市","漳州市"],
["南京市","无锡市","徐州市"]
];
function selectCity(obj){
var citySelect=document.getElementById("city");
var cityList=cities[obj.value];
citySelect.innerHTML="<option>---请选择---</option>";
if(cityList){
for(i=0;i<cityList.length;i++){
var option=document.createElement("option");
option.innerHTML=cityList[i];
console.log(option);
citySelect.appendChild(option);
}
}
}
</script>
</head>
<body>
<select onchange="selectCity(this)">
<option>---请选择---</option>
<option value="0">浙江省</option>
<option value="1">福建省</option>
<option value="2">江苏省</option>
</select>
<select name="city" id="city">
<option >---请选择---</option>
</select>
</body>
效果展示