JavaScript基础
JavaScript 是属于网络的脚本语言，被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies，以及更多的应用。
一.JS简介
1.注册表单校验雏形
1. 需求:
1). 用户在注册的时候会输入一些信息， 但是用户输入的内容有可能不合法， 会导致服务器端压力过大;
2). 当用户填写信息之后， 对填写的信息进行校验（前端校验， 只能防君子不能防小人）
-后台校验: 也是需要校验的；
2. 需要掌握的技能:
0). 如何在加载页面时执行指定函数?
1). 如何获取指定元素对象?
2). 如何弹出一个警告框?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<style></style>-->
<!--<link>-->
<script>
window.onload = function () {
// 1. 获取用户输入的用户名的标签对象;
var uEle = document.getElementById('username');
alert(uEle);
// 2. 获取这个对象里面的值；
var uValue = uEle.value;
alert(uValue);
// alert("这是一个用户名!"); 弹出一个警示框
}
</script>
</head>
<body>
<form action="#" method="get">
<!--get: 填写的信息会在url里面显示， 对于重要的数据来说是不安全的；
post: 填写的信息不会在url里面显示
-->
用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
密码: <input type="password" name="passwd" placeholder="密码"><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
2.校验用户名是否为空
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--<style></style>-->
<!--<link>-->
<script>
// *****************************1. 校验用户名是否为空? ***************************
// 需求:
// 1. 判断用户名是否为空?
// 2. 校验密码是否大于6位， 如果不满足则不合法?
// 定义一个函数
function checkForm() {
// 1). 获取输入用户名标签提交的内容；
var user = document.getElementById('username').value;
// 2). if判断用户名是否为空?
// 3). 如果数据合法， 继续执行， 提交表单；
// 4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert
if (user === '') {
alert("用户名不能为空!");
return false;
}
// ******************************2. 校验密码长度是否小于6 **************************
// 难点: 获取密码长度(http://www.w3school.com.cn/js/js_obj_string.asp)
// var passwdlen = document.getElementById('passwd').value.length;
var passwdlen = document.getElementsByName('passwd')[0].value.length;
if (passwdlen < 6){
alert("密码不合法: 长度小于6！");
return false;
}
}
</script>
</head>
<body>
<!--
实现步骤:
1. 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
2. 对这个事件绑定一个函数(执行的操作写在函数里面);
3. 函数的核心功能: 校验用户名是否为空?
1). 获取输入用户名标签提交的内容；
2). if判断用户名是否为空?
3). 如果数据合法， 继续执行， 提交表单；
4). 如果数据不合法， 不让表单提交? (显示弹出框报错) --- alert
-->
<form action="#" method="get" onsubmit="return checkForm()">
<!--get: 填写的信息会在url里面显示， 对于重要的数据来说是不安全的；
post: 填写的信息不会在url里面显示
-->
用户名: <input type="text" name="username" placeholder="用户名" id="username"><br/>
密码: <input type="password" name="passwd" placeholder="密码" id="passwd"><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
3.比较==与===
两个等号做比较时， 会将字符串转换为整形进行比较
三个等号做比较时， 都作为字符串进行比较
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
/*
var x = 5;
var y = '5';
var z = 5;
alert(x == y); // 两个等号做比较时， 会将字符串转换为整形进行比较;
alert(x === y);
*/
var a =(5 === '5')?'ok': 'not ok';
alert(a);
}
</script>
</head>
<body>
</body>
</html>
三个等号时:
两个等号时:
二.实现图片的切换
- 确定事件类型为onclick事件；
- 并跟对应的函数changeImg绑定在一起；
- 实现函数功能；
1). 当点击下一页按钮之后， 修改img标签里面的src属性内容;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
块级元素居中:margin: 0 auto;
行内元素居中: text-align: center;
-->
<style>
#sowing_map{
width: 590px;
height:500px;
margin: 0 auto;
text-align: center;
}
</style>
<script>
// 1. 定义一个变量， 控制图片的循环顺序;
var i = 1;
function changeImg() {
// 2. 当点击下一页时， i+1, 这个时候， 图片变成img2;
i += 1;
// 3. 修改img标签里面的src属性内容;
document.getElementById('img').src = 'img/img' + i + '.jpg';
// 4. 如果图片轮播结束， 从头开始轮播；
if (i === 6){
i = 0;
}
}
</script>
</head>
<body>
<!--思路:
1. 确定事件类型为onclick事件；
2. 并跟对应的函数changeImg绑定在一起；
3. 实现函数功能；
1). 当点击下一页按钮之后， 修改img标签里面的src属性内容;
-->
<div id="sowing_map"><img src="img/img7_ad.jpg" height="80" width="1190"/>
<img src="img/img1.jpg" id="img">
<input type="button" value="下一页" onclick="changeImg()">
</div>
</body>
</html>
点击下一页：
在JS部分加入定时模块，产生轮播图效果,隔1s切换一次图片
window.onload = function () {
// 每隔1s自动执行某一个函数
setInterval('changeImg()', 1000);
};
三.定时弹出广告
目标:
实现网页定时弹出广告， 并定时取消弹出的广告;
步骤:
1. 在页面设置一个隐藏的图片; style="display: none"
2. 确定事件类型为onload， 为其绑定一个函数;
3. 设置定时执行显示图片的函数showAd();
4. 编写定时任务里面的函数showAd()----
- 获取标签的样式display=‘block’;
- 清除显示广告的定时任务;
- 编写隐藏广告图片的定时任务;
5. 实现定时任务里面的函数hiddenAd();
- 获取标签的样式display=‘none’;
- 清除隐藏广告的定时任务;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload = function () {
// 每隔1s自动执行某一个函数
setInterval('changeImg()', 1000);
//每隔1s执行显示广告的函数;
// 由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
//(http://www.w3school.com.cn/jsref/met_win_setinterval.asp)
// 在js的函数里面。 变量名没有var时， 是一个全局变量;
adtime = setInterval('showAd()', 1000);
};
// 1. 定义一个变量， 控制图片的循环顺序;
var i = 1;
function changeImg() {
// 2. 当点击下一页时， i+1, 这个时候， 图片变成img2;
i += 1;
// 3. 修改img标签里面的src属性内容;
document.getElementById('img').src = 'img/img' + i + '.jpg';
// 4. 如果图片轮播结束， 从头开始轮播；
if (i === 6) {
i = 0;
}
}
// 编写显示隐藏图片的函数
function showAd() {
// 获取到广告图片对应的标签对象
var adEle = document.getElementById('ad_img');
//修改广告图片元素里面的style属性里面的display
adEle.style.display = 'block';
// 清除显示图片的定时操作；
clearInterval(adtime);
// 设置隐藏广告图片的定时任务；
hiddentime = setInterval('hiddenAd()', 1000);
}
function hiddenAd() {
// 获取到广告图片对应的标签对象
var adEle = document.getElementById('ad_img');
//修改广告图片元素里面的style属性里面的display
adEle.style.display = 'none';
//清除隐藏图片的定时任务;
clearInterval(hiddentime);
}
</script>
<!--
块级元素居中:margin: 0 auto;
行内元素居中: text-align: center;
Js的引入方式:
- 内部引入: 直接在head标签里面的<script>写的内容;
- 外部引入:<script src="js/main.js" ></script
-->
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div id="sowing_map">
<img src="img/img1.jpg" id="img">
<!--<input type="button" value="下一页" οnclick="changeImg()">-->
</div>
<div id="ad">
<img src="img/img7_ad.jpg" id="ad_img" style="display: none">
</div>
</body>
</html>
1s后执行广告产生函数
四.用户注册提示与提醒
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function showUserTip() {
// 1. 获取标签对象;
document.getElementById('userTip').innerHTML = '<b style="color: lightgray;">用户名不能为空</b>';
}
function showPwdTip() {
// 1. 获取标签对象;
document.getElementById('pwdTip').innerHTML = '<b style="color: lightgray;">密码必须大于6位</b>';
}
function checkUser() {
//1. 离焦时判断用户名是否为空?
var name = document.getElementById('user').value;
// 2. 如果为空， 右边来一个红色的提示;
// 3. 如果不为空， 则取消所有提示;
if (name === ''){
document.getElementById('userTip').innerHTML = '<b style="color: #f10180">用户名不能为空</b>'
return false;
}else{
document.getElementById('userTip').innerHTML = '<b style="color: green"> ok </b>'
return true;
}
}
function checkPwd() {
// alert('离焦');
//1. 离焦时判断用户名是否为空?
var pwdLen = document.getElementById('pwd').value.length;
// 2. 如果为空， 右边来一个红色的提示;
// 3. 如果不为空， 则取消所有提示;
if (pwdLen < 6){
document.getElementById('pwdTip').innerHTML = '<b style="color: #f10180">密码必须大于等于6位</b>'
return false;
}else{
document.getElementById('pwdTip').innerHTML = '<b style="color: green"> ok </b>'
return true;
}
}
</script>
</head>
<body>
<!--
实现目标:
步骤:
1). 确定事件类型(onfocus-聚焦事件)， 并为其绑定一个函数;
2). 确定事件类型(onblur-离焦事件)， 并为其绑定一个函数;
-->
<form action="#" method="get">
<input type="text" id='user' placeholder="输入用户名" name="username" onfocus="showUserTip()"
onblur="checkUser()">
<span id="userTip"></span><br/>
<input type="password" id="pwd" placeholder="密码" name="passwd" onfocus="showPwdTip()"
onblur="checkPwd()">
<span id="pwdTip"></span><br/>
<input type="submit" value="注册">
</form>
</body>
</html>
离焦之后产生以下效果
五.动态添加城市
1.单城市添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态添加城市</title>
<script>
function addCity() {
// 1). 获取到用户在input输入框中填写的信息；
var city = document.getElementById("city").value;
// 2). 创建一个城市的文本节点；
var textNode = document.createTextNode(city);
// 3). 创建一个li的元素节点；
var liEleNode = document.createElement('li');
// 4). 将文本节点添加到li元素节点里面去；
liEleNode.appendChild(textNode);
// 5). 将整体添加到ul标签里面去;
var ulEleNode = document.getElementById('ul_city');
ulEleNode.appendChild(liEleNode);
}
</script>
</head>
<body>
<!--<form action="#" method="get">-->
<input type="text" placeholder="请输入城市" name="city" id="city">
<input type="submit" value="添加城市" onclick="addCity()">
<!--</form>-->
<ul id="ul_city">
<li>北京</li>
<li>上海</li>
</ul>
</body>
</html>
效果如下：
(1).
(2).
(3).
2.省市联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.place{
width: 300px;
height: 100px;
margin: auto;
margin-top: 20%;
}
</style>
<script>
function changeCity() {
// 1. 获取用户选择的省份；
var choiceProvince = document.getElementById('province').value;
// 2. 创建一个二维数组，用来存储省份和城市的对应关系；
var cities=new Array(3);
// 默认的规则 ： 索引为0 ，存储省份的城市
cities[0] = new Array("西安","宝鸡","咸阳","渭南","铜川","安康","商洛","延安","榆林");
cities[1] = new Array("成都","绵阳","乐山","万州","宜宾","攀枝花");
cities[2] = new Array("济南","青岛","烟台","东营","淄博","潍坊","临沂","枣庄","荷泽");
// 8.找出关于城市的下拉列表(根据id="city")
var selectEleNode = document.getElementById('city');
// 9.清空第二个下拉列表里面所有的option标签
selectEleNode.options.length = 1;
for (var i = 0;i < cities.length;i++){
//此处比较的时省份编号
if (choiceProvince == i){
// 4.如果相同，遍历该省份下的所有城市
for (var j = 0; j < cities[i].length;j++){
// 5.创建城市的文本节点
var textNode = document.createTextNode(cities[i][j]);
// 6. 创建option的元素节点
var optionEleNode = document.createElement("option");
// 7.将城市的文本节点追夹道option元素节点里面去
optionEleNode.appendChild(textNode);
// 9.将option节点内容追加到select节点里面去
selectEleNode.appendChild(optionEleNode);
}
}
}
}
</script>
</head>
<body>
<div class="place">
<span>籍贯：</span>
<select id="province" onchange="changeCity()">
<option>--选择省份--</option>
<option value="0">陕西</option>
<option value="1">四川</option>
<option value="2">山东</option>
</select>
<select id="city">
<option>--选择城市--</option>
</select>
</div>
</body>
</html>
首先会选择省份
选择省份之后，选择相应省份对应的城市
扫一扫
1090
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
