03-JS
脚本语言javascript
- 什么是脚本语言?
java源代码 ----> 编译成.class文件 -----> java虚拟机中才能执行
脚本语言: 源码 -------- > 解释执行
js由我们的浏览器来解释执行
HTML: 决定了页面的框架
CSS: 用来美化我们的页面
JS: 提供用户的交互的
- 组成：ECMAScript：核心部分 语法、类型、关键字
DOM 文档对象模型、管理页面
BOM 浏览器对象模型 前进、后退、刷新
* 语法特征：
变量弱类型 var i = …;
区分大小写
语法结束后的分号，可有可无
写在script标签
JS的数据类型:
-
基本类型
- string
- number
- boolean
- undefine
- null
-
引用类型
- 对象, 内置对象
-
类型转换
- js内部自动转换
JS的运算符和语句:
-
运算符和java 一样
- “===” 全等号: 值和类型都必须相等
- == 值相等就可以了
-
语句和java 一样
输出：
alert() 直接弹窗
document.write() 向页面输出
console.log() 向控制台输出
innerHTML 向页面输出
- 获取页面元素 document.getElementById(“td”)
函数声明
var 函数名=function(){
}
function 函数(){
}
开发步骤
1、确定事件
2、通常事件都会触发一个函数
3、函数里面通常都会操作页面元素，做一些交互动作
注册代码示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
1. 确认事件: 表单提交事件 onsubmit事件
2. 事件所要触发的函数: checkForm
3. 函数中要干点事情
1. 校验用户名, 用户不能为空, 长度不能小于6位
1.获取到用户输入的值
*/
function checkForm(){
//获取用户名输入项
var inputObj = document.getElementById("username");
//获取输入项的值
var uValue = inputObj.value;
// alert(uValue);
//用户名长度不能6位 ""
if(uValue.length < 6 ){
alert("对不起,您的长度太短!");
return false;
}
//密码长度大于6 和确认必须一致
//获取密码框输入的值
var input_password = document.getElementById("password");
var uPass = input_password.value;
if(uPass.length < 6){
alert("对不起,您还是太短啦!");
return false;
}
//获取确认密码框的值
var input_repassword = document.getElementById("repassword");
var uRePass = input_repassword.value;
if(uPass != uRePass){
alert("对不起,两次密码不一致!");
return false;
}
//校验手机号
var input_mobile = document.getElementById("mobile");
var uMobile = input_mobile.value;
//
if(!/^[1][3578][0-9]{9}$/.test(uMobile)){
alert("对不起,您的手机号无法识别!");
return false;
}
//校验邮箱: /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/
var inputEmail = document.getElementById("email");
var uEmail = inputEmail.value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/.test(uEmail)){
alert("对不起,邮箱不合法");
return false;
}
return true;
}
</script>
</head>
<body>
<form action="JS开发步骤.html" onsubmit="return checkForm()">
<div>用户名:<input id="username" type="text" /></div>
<div>密码:<input id="password" type="password" /></div>
<div>确认密码:<input id="repassword" type="password" /></div>
<div>手机号码:<input id="mobile" type="number" /></div>
<div>邮箱:<input id="email" type="text" /></div>
<div><input type="submit" value="注册" /></div>
</form>
</body>
</html>
使用JS完成图片的轮播效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/* 当页面加载完成的时候, 动态切换图片
1.确定事件:
2.事件所要触发的函数
*/
var index = 1;
//切换图片的函数
function changeAd(){
//获取要操作的img
var img = document.getElementById("imgAd");
img.src = "../img/"+(index%3+1)+".jpg"; //0,1,2 //1,2,3
index++;
}
function init(){
//启动定时器
setInterval("changeAd()",3000);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" id="imgAd"/>
</body>
</html>
提交事件必须格外注意
cοnsubmit="return checkForm()"
计时，周期显示
window.setTimout("待执行函数",时间（ms）) 计时显示
.cleartimout() 取消计时
.setInterval("待执行函数"，时间（ms）)周期显示
.clearInterval() 取消
使用：在body标签中
onload=" "
文档加载完成事件
文件加载顺序：顺序加载执行
显示图片：
img.style.display="block"
隐藏图片：
img.style.display="none"
常用事件：
获得焦点：onfocus
失去焦点：onblur
持续触发：onkeyup
引入js外部文件
<script src="js文档路径" type="text/javaScript"/>
隔行换色
表格拥有id
1.得到表格
2.得到表格的每一行
table.rows -> row[]
getElementByName(“checkone”)
getElementByTagName(“input”)
<script type="text/javascript">
window.onload = function(){
//1、获取表格
var tab = document.getElementById("tal");
//2、获取表格中tbody的行数
var len = tab.tBodies[0].rows.length
//3、开始循环，设置颜色
for(var i = 0;i<len;i++){
if(i%2==0){
tab.tBodies[0].rows[i].style.backgroundColor= "red";
}else{
tab.tBodies[0].rows[i].style.backgroundColor = "green";
}
}
}
</script>
JS中没有int等基本类型，只有var
省市联动
DOM Document Object Mode 管理文档（增删改查规则）
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<script type="text/javascript">
var provinces = ['请选择省份','北京市','上海市'];
var citys = [['请选择城市'],
["东城区", "西城区", "崇文区"],
["黄浦区", "卢湾区", "徐汇区", "长宁区"]];
function init(){
// 注意这里是要通过 id 获取元素，而不是通过 class 获取
var province = document.getElementById('param_province');
//给选择框一个高度，可直接写进数据，不然要先创建dom元素option再录值
province.length=provinces.length;
for(var i=0;i<provinces.length;i++){
province.options[i].text=provinces[i];
province.options[i].value=provinces[i];
}
}
function provincechange(){
var province = document.getElementById("param_province");
var num = province.selectedIndex; // 选中option索引
var city = document.getElementById('param_city');
var citystemp=citys[num];
city.length=citystemp.length;
for(var i=0;i<citystemp.length;i++){
city.options[i].text=citystemp[i];
city.options[i].value=citystemp[i];
}
city.options[0].selected=true;
}
</script>
<body onload="init()">
<div>
<label>所在地区：</label>
<select class="province" name="province"
id="param_province" onchange="provincechange()">
<option>请选择省份</option>
</select>
</div>
<div>
<label>城市：</label><select class="city" name="city" id="param_city"><option>请选择城市</option></select>
</div>
</body>
</html>
添加节点
// 1.创建节点
var P =document.createElement("p");
// 2.添加节点，关联
var textNode = document.createTextNode("文本")
// 3.将p添加到document树中
p.appendChild(textNode)
清空select中的option信息
select.options.length=0
<select multiple> 显示多行
</select>
在<></>中使用>>或<<时使用
>>
<<
扫一扫
706
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
