本文深入浅出地介绍了JavaScript的基础知识，包括其特性、用途及如何嵌入网页。并通过实例演示了表单交互、事件处理、全选功能、下拉框联动及表单验证等常见应用场景。
JavaScript
8月13日
JavaScript 是属于网络的脚本语言！
JavaScript是基于对象和事件驱动的客户端脚本语言。
JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
JavaScript不会产生中介代码，嵌入在网页中解释运行的语言。（代码执行不进行预编译）
JavaScript 是因特网上最流行的脚本语言（脚本语言是一种轻量级的编程语言）。
JAVA和JavaScript没有关系！
原名LiveScript，为了蹭热度改名balabala。
一个是开发语言，一个是脚本语言。
Java是强类型，JS是弱类型语言。
4.4 JS的使用方法
1、内嵌JS代码
可以多个放在任意位置，会从上到下按顺序输出
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS测试</title>
<script type="text/javascript">
document.write("HelLo JS<br />") /*JS的内置文档，定义了方法*/
</script>
</head>
<body>
</body>
</html>
2、外部JS文件
document.write("hellohello");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS测试</title>
<script type="text/javascript" src="new_file.js">
document.write("HelLo JS<br />") /*JS的内置文档，定义了方法*/
</script> /*在同一个Script中，如果同时使用了内部和外部的Script，只会输出外部的，如果需要使用内部的，需要重新定义一个script*/
</head>
<body>
</body>
</html>
4.5 声明类型
<script type="text/javascript" >
var num = 1341;
document.write("HelLo JS<br />"+num) /*JS的内置文档，定义了方法*/
</script>
输出数据类型
document.write(typeof(num))
4.6 常用的输入/输出
- alert()
alert(“提示信息”); - document.write(“xx”); 输出内容到文档中
- prompt()提示
prompt(“提示信息”, “输入框的默认信息”);
prompt(“请输入姓名”, “张三”);
prompt(“请输入姓名”);
var name = prompt(“请输入你的姓名:”);
document.write(“姓名:”+name); - confirm() 确认消息框 返回boolean
var result = confirm(“你确定吗?”);
document.write(“您选择的是:”+ (result?“确定”:“取消”));
在这里插入代码片
15号回顾。不知道我写的都是啥，直接上作业吧。
task1 用JS实现表单交互
在两个输入框中分别输入价格和数量，通过选择折扣方案，输出最后的总价。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS-1</title>
<script type="text/javascript">
function calc(){
//获取两个操作数
var number1=document.calcForm.num1.value;
var number2=document.calcForm.num2.value;
if(number1==""||number2==""){
alert("购买数量或竞拍价格没有填写 请重新输入！")
}
else{
var num1 = parseFloat(document.calcForm.num1.value);
var num2 = parseFloat(document.calcForm.num2.value);
var c = parseInt(document.calcForm.c.value);
switch(c){
case 1:
var result=num1*num2*0.6
break
case 2:
var result=num1*num2*0.7
break
case 3:
var result=num1*num2*0.8;
break
case 4:
var result=num1*num2*0.9
break
case 0:
alert("请重新选择支付方式！")
break
}
document.calcForm.result.value=result;
}
}
</script>
</head>
<body>
<form name="calcForm">
<img src="img/logo.gif"><br />
<h2 style="font-family: '宋体';">会说话的QQ竞拍喽！</h2>
<img src="img/qie.jpg" style="size=30;" /><br />
竞拍价格: <input type="text" name="num1" value=""><br>
购买数量: <input type="text" name="num2"><br>
支付方式： <select name="c" >
<option value=0>--请选择支付方式--</option>
<option value=1>银行转账——打6折</option>
<option value=2>电话支付——打7折</option>
<option value=3>邮政支付——打8折</option>
<option value=4>Q币支付——打9折</option>
</select><br>
预计总价： <input type="text" name="result"><br />
<input type="button" value="计算看看" onclick="calc()">
</form>
</body>
</html>
task2 失去焦点事件的应用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS02</title>
<script type="text/javascript">
function userLostFocus(){
var username = document.getElementById("username").value;
if(username==""){
document.getElementById("nameMsg").innerHTML="<font color='red'>用户名不能为空!</font>"
}else if(!/^\w{4,16}$/.test(username)){
document.getElementById("nameMsg").innerHTML="<font color='red'>用户名格式不正确!</font>"
}else{
document.getElementById("nameMsg").innerHTML="<img src='img/timg.jpg' width='40px'/>";
}
}
function passLostFocus(){
var passowrd = document.getElementById("password").value;
if(passowrd==""){
document.getElementById("passMsg").innerHTML="<font color='red'>密码不能为空!</font>"
}else if(!/^\w{6,12}$/.test(passowrd)){
document.getElementById("passMsg").innerHTML="<font color='red'>密码格式不正确!</font>"
}else{
document.getElementById("passMsg").innerHTML="<img src='img/timg.jpg' width='40px'/>";
}
}
function verifyLostFocus(){
var pass= document.getElementById("password").value;
var vertify = document.getElementById("verify").value;
if(vertify==""){
document.getElementById("veriMsg").innerHTML="<font color='red'>确认密码不能为空!</font>"
}else if(pass!=vertify){
document.getElementById("veriMsg").innerHTML="<font color='red'>两次输入密码不一致！</font>"
}else{
document.getElementById("passMsg").innerHTML="<img src='img/timg.jpg' width='40px'/>";
}
}
</script>
</head>
<body>
<img src="img/top.jpg">
<form name="regForm" action="" method="post">
<table>
<tr>
<td>用户名:</td><td><input type="text" id="username" name="username" onblur="userLostFocus()"/></td>
<td><div id="nameMsg" style="display: inline;font-size:15px;">只能输入字母或数字，4~16个字符</div></td>
<tr />
<tr>
<td>密码:</td><td> <input type="password" id="password" name="password" onblur="passLostFocus()"/></td>
<td><div id="passMsg" style="display: inline;font-size:15px;">密码长度6-12位</div></td>
<tr />
<tr>
<td>确认密码:</td><td> <input type="password" id="verify" name="verify" onblur="verifyLostFocus()"/></td>
<td><div id="veriMsg" style="display: inline;font-size:15px;"> </div></td>
<tr />
<td colspan="3" align="center"><input type="reset" name="reset" value="重填"> <input type="submit" name="submit" value="注册"></td>"
</form>
</body>
</html>
task3 实现全选和取消全选，单个复选框取消选择时取消全选，所有单复选框选择时全选被选上
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS</title>
<script type="text/javascript">
function selectAll(){
var selectAll = document.getElementById("selectAll");
var choose = document.getElementsByName("choose");
for(var i=0;i<choose.length;i++){
choose[i].checked = selectAll.checked;
}
}
function selectOne(){
var choose = document.getElementsByName("choose");
var selectAll = document.getElementById("selectAll");
var selCount = 0;
for(var i=0;i<choose.length;i++){
if(choose[i].checked==true){
selCount++;
}
if(selCount==choose.length){
selectAll.cheaked=true;
}
else{
selectAll.checked=false;
}
}
}
</script>
</head>
<body>
<table>
<img src="img/head.jpg" /><br>
<td><input type="checkbox" id="selectAll" onclick="selectAll()">全选</td>
<td><img src="img/top1.jpg"></td>
<form >
<tr>
<td><input type="checkbox" name="choose" id="one" onclick="selectOne()"/></td>
<td><img src="img/one.jpg"></td>
</tr>
<tr>
<td><input type="checkbox" name="choose" id="two" onclick="selectOne()"/></td>
</tr>
<tr>
<td><input type="checkbox" name="choose" id="three" onclick="selectOne()"/></td>
<td><img src="img/three.jpg"></td>
</tr>
<tr>
<td><input type="checkbox" name="choose" id="four" onclick="selectOne()"/></td>
<td><img src="img/four.jpg"></td>
</tr>
</table>
</form>
</body>
</html>
task4 二级下拉框联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS</title>
<script type="text/javascript">
var citys = new Array();
citys['北京'] = ["朝阳区", "东城区", "西城区", "海淀区", "宣武区", "丰台区", "怀柔", "延庆", "房山"];
citys['上海'] = ["宝山区", "长宁区", "丰贤区", "虹口区", "青浦区", "南汇区", "徐汇区", "卢湾区"];
citys['广州'] = ["天河区", "海珠区", "南沙区", "白云区", "嘉湾区", "越秀区", "黄埔区", "罗岗区", "番寓区", "花都区"];
citys['深圳'] = ["福田区", "罗湖区", "盐田区", "宝安区", "龙岗区", "南山区", "深圳周边"];
citys['重庆'] = ["俞中区", "南岸区", "江北区", "沙坪坝区", "九龙坡区", "渝北区", "大渡口区", "北碚区", "巴南区", "万盛区", "涪凌", "江津"];
citys['天津'] = ["和平区", "河西区", "南开区", "河北区", "河东区", "红桥区", "塘古区", "罗岗区", "开发区", "西青区","东丽区"];
function loadCitys(){
var ops = document.getElementById("city").options;
ops.add(new Option("--请选择城市--",""));
for(var i in citys){
ops.add(new Option(i,i));
}
}
function loadDistrict(){
var ops = document.getElementById("district").options;
var selectCity = document.getElementById("city").value;
ops.length = 0;
for(var j in citys[selectCity]){
ops.add(new Option(citys[selectCity][j],citys[selectCity][j]));
}
}
</script>
</head>
<body onload="loadCitys()">
<img src="img/option-top.jpg" /><br>
<form style="background-color: royalblue;align:center;">
<font color="white" > 房源查询：</font>
<select id="city" onchange="loadDistrict()"></select>
<select id="district"></select>
<select name="living">
<option value=0>物业类型</option>
<option value=1>普通住宅</option>
<option value=2>公寓</option>
<option value=3>别墅</option>
<option value=4>经济适用房</option>
<option value=5>商住楼</option>
<option value=6>写字楼</option>
</select>
<input type="submit" value="查询"/>
</form>
</body>
</html>
task5 表单验证
实现对各项输入框的验证，用户名是否为空，是否在相应长度内，对电子邮箱格式进行验证，等等。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JS05</title>
<style type="text/css">
*{text-align: center;
}
div{
margin: 50px;
}
.td{width:200px;}
</style>
<script>
function validateForm(){
var username = document.register.userName.value;
var password = document.register.password.value;
var email = document.register.email.value;
var age = document.register.age.value;
if(username==""){
alert("用户名不能为空！");
return false;
}
if(!/^\w{4,16}$/.test(username)){
alert("用户名格式不正确！")
return false;
}
if(password==""){
alert("密码不能为空！");
return false;
}
if(!/^\w{6,}$/.test(password)){
alert("请输入至少6位密码！")
return false;
}
if(email==""){
alert("电子邮箱不能为空！");
return false;
}
if(!/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(email)){
alert("电子邮箱格式错误！")
return false;
}
if(age==""){
alert("年龄不能为空！");
return false;
}
if(!/^\w{1,2}$/.test(age)){
alert("请输入正确的年龄！")
return false;
}
}
</script>
</head>
<body>
<div>
<img src="img/logo.gif" />
<img src="img/reg.gif">
<br>
<form name="register"action="form_test.html" method="post" οnsubmit="return validateForm()">
<table align="center">
<tr>
<td class="td">会员名：</td>
<td><input type="text" name="userName" /></td>
</tr>
<tr>
<td class="td">性别：</td>
<td>
<input type="radio" name="sex" checked="checked" value="male">男
<input type="radio" name="sex" value="female"> 女
</td>
</tr>
<tr>
<td class="td">密码：</td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td class="td">电子邮件地址：</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td class="td">年龄：</td>
<td><input type="text" name="age" /></td>
</tr>
<tr>
<td colspan="2" align="right"><input type="submit" value="注册" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
扫一扫
856
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
