目录
一、JavaScript概述
1.什么是JS：
JavaScript一种直译式脚本语言， 什么是脚本语言？
java源代码 ----> 编译成.class文件 -----> java虚拟机中才能执行
脚本语言: 源码 -------- > 解释执行
js由我们的浏览器来解释执行
2.JS的作用：
HTML: 决定了页面的框架
CSS: 用来美化我们的页面
JS: 提供用户的交互的
3.JS的组成:
ECMAScript : 核心部分 ,定义js的语法规范
DOM: document Object Model 文档对象模型 , 主要是用来管理页面的
BOM : Browser Object Model 浏览器对象模型, 前进,后退,页面刷新, 地址栏, 历史记录, 屏幕宽高
4.JS的语法:
- 变量弱类型: var i = true
- 区分大小写
- 语句结束之后的分号 ,可以有,也可以没有
- 写在script标签中
JS声明变量:
var 变量的名称 = 变量的值
JS声明函数:
var 函数的名称 = function(){
}
function 函数的名称(){
}5.JS的数据类型:
-
基本类型
-
string
-
number
-
boolean
-
undefine
-
null
-
-
引用类型
-
对象, 内置对象
-
-
类型转换
-
js内部自动转换
-
6.JS的运算符和语句:
-
运算符和java 一样
-
"===" 全等号: 值和类型都必须相等
-
== 值相等就可以了
-
-
语句和java 一样
7.JS的输出
-
alert() 直接弹框
-
document.write() 向页面输出
-
console.log() 向控制台输出
-
innerHTML: 向页面输出
-
获取页面元素: document.getElementById("id的名称");
8.JS的开发步骤
1. 确定事件
2. 通常事件都会出发一个函数
3. 函数里面通常都会去操作页面元素,做一些交互动作
二、JS入门开发
1.JS实现点击替换文本
- 需求：
点击按钮后，替换div标签中的文本内容
- 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 确定事件 点击事件
2. 通常事件都会出发一个函数
3. 函数里面通常都会去操作页面元素,做一些交互动作
-->
<script>
function dianwo(){
//alert("我被点击了");
//1.首先要获得这个div
var div = document.getElementById("div1")
div.innerHTML = "<font color='red'>内容被替换掉了</font>";
// div.innerText = "<font color='red'>内容被替换掉了</font>";
}
</script>
</head>
<body>
<input type="button" value="点我,修改DIV中的内容" onclick="dianwo()" />
<div id="div1">
这里的内容被替换掉
</div>
</body>
</html>2.JS实现表单验证
- 需求：
用JS实现表单验证。
1.校验用户名，用户名不能为空且长度不能小于6位
2.校验两次密码是否输入一致
3.校验手机号码是否有效
4.校验邮箱是否有效
- 表单：
<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>- JS：
确认事件: 表单提交事件 onsubmit事件
事件所要触发的函数: checkForm
函数中要干的事情： 1. 校验用户名, 用户不能为空, 长度不能小于6位 2.获取到用户输入的值
<head>
<meta charset="UTF-8">
<title></title>
<script>
function checkForm(){
//获取用户名输入项
var inputObj = document.getElementById("username");
//获取输入项的值
var uValue = inputObj.value;
//用户名长度不能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>3.JS实现轮播图
- 需求：
一组图片, 每隔3秒钟自动切换
- 分析：
1. 确定事件: 文档加载完成的事件 onload
2. 事件要触发 : init()
3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
1. 开启定时器: 执行切换图片的函数 changeImg()
4. changeImg()
1. 获得要切换图片的那个元素
- 代码：
定时器：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//window 对象是一个最顶层对象
//window.setInterval("alert('123');",2000);
function test(){
console.log("setInterval 调用了");
}
//setInterval("test()",2000);
//setTimeout("test()",2000);
var timerID;
function startDinshiqi(){
//timerID = setInterval("test()",2000);
timerID = setTimeout("test()",3000);
}
function stopDingshiqi(){
//clearInterval(timerID);
clearTimeout(timerID);
}
</script>
</head>
<body>
<input type="button" value="开启定时器" onclick="startDinshiqi()" /><br />
<input type="button" value="取消定时器" onclick="stopDingshiqi()"/><br />
</body>
</html>图片的切换：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
1. 事件: 点击事件 onclick
2. 事件要触发函数: changeImg
3. 在函数中
*/
function changeImg(){
var img = document.getElementById("img1");
img.src = "../img/2.gif";
}
</script>
</head>
<body>
<input type="button" value="点击切换图片" onclick="changeImg()" />
<br />
<img src="../img/1.jpg" id="img1" />
</body>
</html>图片的自动轮播：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 确定事件: 文档加载完成的事件 onload
2. 事件要触发 : init()
3. 函数里面要做一些事情:(通常会去操作元素,提供交互)
1. 开启定时器: 执行切换图片的函数 changeImg()
4. changeImg()
1. 获得要切换图片的那个元素
-->
<script>
var index = 0;
function changeImg(){
//1. 获得要切换图片的那个元素
var img = document.getElementById("img1");
//计算出当前要切换到第几张图片
var curIndex = index%3 + 1; //0,1,2
img.src="../img/"+curIndex+".jpg"; //1,2,3
//每切换完,索引加1
index = index + 1;
}
function init(){
setInterval("changeImg()",1000);
}
</script>
</head>
<body onload="init()">
<img src="../img/1.jpg" width="100%" id="img1"/>
</body>
</html>4.JS实现页面定时弹出广告
- 需求：
打开网页5s之后弹出广告，广告在弹出后5s消失。
- 需要的技术：
定时器
setInterval : 每隔多少毫秒执行一次函数
setTimeout: 多少毫秒之后执行一次函数
clearInterval
clearTimeout
显示广告 img.style.display = "block"
隐藏广告 img.style.display = "none"
- 步骤分析：
确定事件: 页面加载完成的事件 onload
事件要触发函数: init()
init函数里面做一件事:
启动一个定时器 : setTimeout()
显示一个广告
再去开启一个定时5秒钟之后,关闭广告
- 代码：
<script>
function init(){
setTimeout("showAD()",3000);
}
function showAD(){
//首先要获取要操作的img
var img = document.getElementById("img1");
//显示广告
img.style.display = "block";
//再开启定时器,关闭广告
setTimeout("hideAD()",3000);
}
function hideAD(){
//首先要获取要操作的img
var img = document.getElementById("img1");
//隐藏广告
img.style.display = "none";
}
</script>- 注：文档加载顺序为从上至下
5.JS实现有友好提示的表单校验
- 需求：
当用户输入信息有问题的时候，在输入框的后面给出一个友好提示 ，而非例2中的弹出式提醒。
- 技术分析：
HTML中innerHTML属性
JS中的常用事件：
onfocus 事件: 获得焦点事件
onblur : 失去焦点
onkeyup : 按键抬起事件
- 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
引入外部的js文件
-->
<script type="text/javascript" src="../js/regutils.js" ></script>
<script>
/*
1. 确定事件 : onfocus
2. 事件要驱动函数
3. 函数要干一些事情: 修改span的内容
*/
function showTips(spanID,msg){
//首先要获得要操作元素 span
var span = document.getElementById(spanID);
span.innerHTML = msg;
}
/*
校验用户名:
1.事件: onblur 失去焦点
2.函数: checkUsername()
3.函数去显示校验结果
*/
function checkUsername(){
//获取用户输入的内容
var uValue = document.getElementById("username").value;
//对输入的内容进行校验
//获得要显示结果的span
var span = document.getElementById("span_username");
if(uValue.length < 6){
//显示校验结果
span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}
}
/*
密码校验
*/
function checkPassword(){
//获取密码输入
var uPass = document.getElementById("password").value;
var span = document.getElementById("span_password");
//对密码输入进行校验
if(uPass.length < 6){
span.innerHTML = "<font color='red' size='2'>对不起,太短</font>";
return false;
}else{
span.innerHTML = "<font color='red' size='2'>恭喜您,够用</font>";
return true;
}
}
/*
确认密码校验
* */
function checkRePassword(){
//获取密码输入
var uPass = document.getElementById("password").value;
//获取确认密码输入
var uRePass = document.getElementById("repassword").value;
var span = document.getElementById("span_repassword");
//对密码输入进行校验
if(uPass != uRePass){
span.innerHTML = "<font color='red' size='2'>对不起,两次密码不一致</font>";
return false;
}else{
span.innerHTML = "";
return true;
}
}
/*
校验邮箱
* */
function checkMail(){
var umail = document.getElementById("email").value;
var flag = checkEmail(umail);
var span = document.getElementById("span_email");
//对邮箱输入进行校验
if(flag){
span.innerHTML = "<font color='red' size='2'>恭喜您,可用</font>";
return true;
}else{
span.innerHTML = "<font color='red' size='2'>对不起,邮箱格式貌似有问题</font>";
return false;
}
}
function checkForm(){
var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();
return flag;
}
</script>
</head>
<body>
<form action="../01/register.html" onsubmit="return checkForm()" >
用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br />
手机号:<input type="text" id="text" /><br />
<input type="submit" value="提交" />
</form>
</body>
</html>6.JS实现表格隔行换色
- 需求：
某些情况下表格信息太多，如果每一行都显示同一个颜色的话会让人看的眼花，为了提高用户体验，减少用户看错的情况，需要对表格进行隔行换色
- 分析：
确定事件: 文档加载完成 onload
事件要触发函数: init()
函数:操作页面的元素 要操作表格中每一行 动态的修改行的背景颜色
表格隔行换色,鼠标移入和移除要变色:
onmouseenter: 鼠标移入
onmouseout: 鼠标移出
onload: 文档加载完成事件
onsubmit: 提交
onchange: 下拉列表内容改变
- 代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
1. 确定事件: 文档加载完成 onload
2. 事件要触发函数: init()
3. 函数:操作页面的元素
要操作表格中每一行
动态的修改行的背景颜色
-->
<script >
function init(){
//得到表格
var tab = document.getElementById("tab");
//得到表格中每一行
var rows = tab.rows;
//便利所有的行,然后根据奇数 偶数
for(var i=1; i < rows.length; i++){
var row = rows[i]; //得到其中的某一行
if(i%2==0){
row.bgColor = "yellow";
}else{
row.bgColor = "red"
}
}
}
</script>
</head>
<body onload="init()">
<table border="1px" width="600px" id="tab">
<tr >
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>
<a href="#">修改</a>|<a href="#">删除</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>2</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>5</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td><a href="#">修改</a>|<a href="#">删除</a></td>
</tr>
</table>
</body>
</html>7.JS实现复选框的全选和全不选
- 需求：
点击全选按钮，全选所有复选框，点击全不选按钮，取消所有选择。
- 分析：
事件： onclick点击事件
全选和全不选步骤分析:
1.确定事件: onclick 单机事件
2.事件触发函数: checkAll()
3.函数要做的事情: 获得当前第一个checkbox的状态 获得所有分类项的checkbox 修改每一个checkbox的状态
- 代码：
<script>
function checkAll(){
//获得当前第一个checkbox的状态
var check1 = document.getElementById("check1");
//得到当前checked状态
var checked = check1.checked;
//获得所有分类项的checkbox
//var checks = document.getElementsByTagName("input");
var checks = document.getElementsByName("checkone");
//alert(checks.length);
for(var i = 0; i < checks.length; i++){
//修改每一个checkbox的状态
var checkone = checks[i];
checkone.checked = checked;
}
}
</script>8.JS实现下拉列表联动
- 需求：
1. 确定事件: 点击事件 :onclick事件
2. 事件要触发函数 selectOne
3. selectOne要做一些操作(将左边选中的元素移动到右边的select中)
1. 获取左边Select中被选中的元素
2. 将选中的元素添加到右边的Select中就可以
- 分析：
一些常用的 HTML DOM 方法：
getElementById(id) - 获取带有指定 id 的节点（元素）
appendChild(node) - 插入新的子节点（元素）
removeChild(node) - 删除子节点（元素）一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
查找节点：
getElementById() 返回带有指定 ID 的元素。
getElementsByTagName() 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。
getElementsByClassName() 返回包含带有指定类名的所有元素的节点列表。增加节点：
createAttribute() 创建属性节点。
createElement() 创建元素节点。
createTextNode() 创建文本节点。
insertBefore() 在指定的子节点前面插入新的子节点。
appendChild() 把新的子节点添加到指定节点。删除节点：
removeChild() 删除子节点。
replaceChild() 替换子节点。修改节点：
setAttribute() 修改属性
setAttributeNode() 修改属性节点
- DOM操作demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*动态添加 : <p>文本</p> */
function dianwo(){
var div = document.getElementById("div1");
//创建元素节点
var p = document.createElement("p"); // <p></p>
//创建文本节点
var textNode = document.createTextNode("文本内容");// 文本内容
//将p 和文本内容关联起来
p.appendChild(textNode); // <p>文本</p>
//将P添加到目标div中
div.appendChild(p);
}
</script>
</head>
<body>
<input type="button" value="点我,添加P" onclick="dianwo()" />
<!-- 动态的往这个Div中添加节点 -->
<div id="div1"></div>
</body>
</html>- 实现省市下拉列表联动：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
准备工作 : 准备数据
*/
var provinces = [
["深圳市","东莞市","惠州市","广州市"],
["长沙市","岳阳市","株洲市","湘潭市"],
["厦门市","福州市","漳州市","泉州市"]
];
/*
1. 确定事件: onchange
2. 函数: selectProvince()
3. 函数里面要搞事情了
得到当前操作元素
得到当前选中的是那一个省份
从数组中取出对应的城市信息
动态创建城市元素节点
添加到城市select中
*/
function selectProvince(){
var province = document.getElementById("province");
//得到当前选中的是哪个省份
//alert(province.value);
var value = province.value;
//从数组中取出对应的城市信息
var cities = provinces[value];
var citySelect = document.getElementById("city");
//清空select中的option
citySelect.options.length = 0;
for (var i=0; i < cities.length; i++) {
var cityText = cities[i];
//动态创建城市元素节点 <option>东莞市</option>
//创建option节点
var option1 = document.createElement("option"); // <option></option>
//创建城市文本节点
var textNode = document.createTextNode(cityText) ;// 东莞市
//将option节点和文本内容关联起来
option1.appendChild(textNode); //<option>东莞市</option>
//添加到城市select中
citySelect.appendChild(option1);
}
}
</script>
</head>
<body>
<!--选择省份-->
<select onchange="selectProvince()" id="province">
<option value="-1">--请选择--</option>
<option value="0">广东省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--选择城市-->
<select id="city"></select>
</body>
</html>
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
