JavaScript 基础回顾
常量(字面量)
比如:100,“abc”
alert(123)//整数常量;alert:弹出一个(123)的提示信息
alert("123")//字符串常量
alert("3.14")//小数常量
alert("javascript");//字符串常量
var name;//name是空间名称
字符串
变量(一块存储空间)
var name =“名字”;//name是空间名称
var是关键字,是变量的意思
变量名(空间的名称) 房间号(8301)
变量值(空间里面的数据)(房客)
变量类型()
使用js定义变量的语法格式是:
var 变量名;//声明
var 变量名 = 值;//声明的同时进行初始化
数据类型
比如:字符串、数值(整数)(小数)、布尔
布尔类型的值有两个;true,false
var israin = true;//今天下雨了。
var israin = false;//今天没下雨。
算术运算符: +,-,*,/,%
逻辑运算符(逻辑运算的结果是布尔类型)
逻辑或:||
语法格式:表达式||表达式
只要有一个表达式的结果是ture,那么逻辑与运算的结果就是ture,
两个表达式的结果都是flase,那么逻辑与运算的结果就是flase
逻辑与:&&
语法格式:表达式&&表达式
只要有一个表达式的结果是false,name逻辑与运算的结果就是false,
两个表达式的结果都是true,那么逻辑与运算的结果就是true
逻辑非:!
语法格式:!表达式
逻辑异或:^
语法格式:表达式^表达式
比较运算符(比较运算的结果是布尔类型)
(>) 左边是否比右边大
(< ) 左边是否比右边小
(>= )左边是否大于等于右边
(<= )左边是否小于等于右边
( == ) 比较左边和右边是否相等
if else 结构
示例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//统计点击次数
var times = 0;
function show () {
times++;//times = times + 1;
if(times == 1){
document.getElementById("again").innerText="再点一次";
}
else if(times == 2){
document.getElementById("again1").innerText="要不要再点一次?";
}
else if (times == 3) {
document.getElementById("again2").innerText="你需要再点一次";
}
else if(times == 4){
document.getElementById("again3").innerText="你那么想看吗?";
}
else if(times == 5){
document.getElementById("again4").innerText="再见";
document.getElementById("again1").innerText="";
document.getElementById("again2").innerText="";
document.getElementById("again3").innerText="";
document.getElementById("again").innerText="";
}
else if(times == 6){
document.getElementById("div001").style.display="none";
}
else{
alert(times);
}
}
</script>
</head>
<body>
<div id="div001" onclick="show();"
style="width:300px;height: 300px;background-color: green;">
<h3 id="again4" style="color: white;">点击一下</h3>
<h3 id="again" style="color: white;"></h3>
<h3 id="again1" style="color: white;"></h3>
<h3 id="again2" style="color: white;"></h3>
<h3 id="again3" style="color: white;"></h3>
</div>
</body>
</html>
switch case 结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//统计点击次数
var times = 0;
function show () {
times++;//times = times + 1;
switch (times){
case 1:
document.getElementById("again").innerText="请再次点击这里";
break;
case 2:
document.getElementById("third").innerText="你再点一次看看";
break;
case 3:
document.getElementById("first").innerText="谢谢";
document.getElementById("again").innerText="";
document.getElementById("third").innerText="";
break;
case 4:
document.getElementById("first").innerText="再见";
break;
case 5:
var childnode = document.getElementById("div001");
document.getElementById("main").removeChild(childnode);
//document.getElementById("div001").style.display="none";
break;
default:
alert(times);
break;
}
}
</script>
</head>
<body id="main">
<div id="div001"
style="width:30%;height:200px;background-color: green;"
onclick="show();">
<h1 id="first" style="color: white;">点击这里</h1>
<h1 id="again" style="color: white;"></h1>
<h1 id="third" style="color: white;"></h1>
</div>
</body>
</html>
函数
isNaN(n) 检查n是不是一个非数值
比如:
var X = "hello";
var Y = "123";//y这个空间是字符串类型
var Z = 123;
var flag = isNaN("X");//ture
var flag2= isNaN("Y");//flase
var flag3= isNaN("Z");//flase
示例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function checkamount(money){
//var x = parseInt(money);
if(isNaN(money)==true){
document.getElementById("amount_error").innerText="*金额必须是数值"
return false;
}else{
document.getElementById("amount_error").innerText="";
}
}
</script>
</head>
<body>
<h1>这是一个标签</h1>
请输入金额:
<input type="text" name="amount" id="amount" value="0.00" onblur="checkamount(this.value)" />
<span id="amount_error"></span>
</body>
</html>
正则表达式:
基本的正则表达式:
[0-9] 表示0-9之间的一个数字
[0-9]{3} 表示3位数字
[0-9]+ 表示一个数字或者一个以上的数字
[0-9]* 表示0个数字或者多个数字
[0-9]{5,11}表示5-11位的数字
[0-9]? 表示0个或1个数字
[a-zA-Z] 表示a-z的一个字母
[a-zA-Z0-9] 表示一个单词字符(可以是英文字母、数字、下划线)
\d 表示一个数字,等价于[0-9]
\w 表示一个单词字符,等价于[a-zA-Z]
今日练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
function checkgm(gm){
var reg = /^(?=.*[0-9])(?=.*[a-zA-Z])(.{1,10})$/
if(reg.test(gm)==true){
document.getElementById("gm_error").innerText="√";
}else{
document.getElementById("gm_error").innerText="*10位长度以内的数字,字母组合";
}
}
function checktel(tel){
var one = /^0\d{2,3}-?\d{7,8}$/;
if(one.test(tel)==true){
document.getElementById("tel_error").innerText="√";
}else{
document.getElementById("tel_error").innerText="*形如:021-12345678";
}
}
</script>
</head>
<body>
管理员账号:
<input type="text" name="gm" id="gm" value="" onblur="checkgm(this.value)"/>
<span id="gm_error" style="color: red;font-size: 12px;"></span><br /><br />
电话号码:
<input type="text" name="tel" id="tel" value="" onblur="checktel(this.value)"/>
<span id="tel_error" style="color: red;font-size: 12px";> </span> <br />
<input type="submit" name="sbt" id="sbt" value="保存" />
</body>
</html>