JS
一、JavaScript简介
1、JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
2、JavaScript web 开发人员必须学习的 3 门语言中的一门：
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 网页的行为
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
3、
1. ECMAScript(基础语法)
1). 定义变量:
var a = 1; — 局部变量;
a = 2; — 全局变量;
2). 使用的数据结构: (string, number, boolean<true, false>, array, null, undefined)
3). 比较:
== : 不判断数据类型 5 == ‘5’ (返回true) 5 == 5(返回true)
=== ： 判断数据类型 5 === ‘5’ (返回false) 5 === 5(返回true)
4). 如何定义函数?
function 函数名{
函数体;
}
匿名函数: οnlοad=“setInterval(‘changImg()’, 1000);”
5). if . for, while,
2. BOM对象;
Windows: alert(), setInterval(), clearInterval()
location: href() -- 跳转到指定界面
3. DOM对象
事件: onload, onsubmit, onclick, onfocus, onblur, onchange,
警告信息实现的方式:
alert();
document.getElementById(’’).innerHtml = “error”
Document: 整个html文件；
Element: 所有的标签都可以称为Element;
Attribute: 标签里面的属性
Text:
Node: 上面提到的所有名词都可以称为节点;
案例一 动态添加城市
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function addCity() {
// 1). 获取用户在input表单输入框中填写的信息;
var city = document.getElementById('city').value;
if (city) {
// 2. 创建一个城市的文本节点;
var textNode = document.createTextNode(city); // "shanghai"
// 3. 创建一个li的元素节点;
var liEleNode = document.createElement('li'); // <li></li>
// 4. 将文本节点添加到li元素节点里面去;
liEleNode.appendChild(textNode); // <li>Shanghai</li>
// 5. 将li的整体对象添加到ul标签里面去;
var ulEleNode = document.getElementById("ul_city");
ulEleNode.appendChild(liEleNode);
}
}
</script>
</head>
<body>
<!--
1. 需求:
点击一个按钮， 动态实现添加城市;
2. 实现步骤:
1. 确定事件类型onclick
2. 对于事件绑定一个函数addLiElement()
1) 获取到用户在input输入框中填写的信息;
city = document.getElementById("city").value
city = document.getElementsByName("city")[0].value
2). 创建一个城市的文本节点；document.createTextNode('xxxx')
3). 创建一个li的元素节点; document.createElement('xxxx')
4). 将文本节点添加到li元素节点里面去;
5). 将整体添加到ul标签里面去;
使用appendChild()来添加子节点;
-->
<div class="main">
<form>
<!--required表单必须填写内容-->
<input type="text" id='city' placeholder="请输入添加的城市" required>
<input type="button" value="添加城市" onclick="addCity()">
</form>
<ul id="ul_city">
<li>上海</li>
<li>北京</li>
<li>西安</li>
</ul>
</div>
</body>
</html>
案例二 省市信息的二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function changeCity() {
// 1. 如何存储省份与城市之间的关系(数组);
// cites = [["xian", ""], [], []]
var provinces = new Array(3);
provinces[0] = new Array("西安", "咸阳", "宝鸡");
provinces[1] = new Array("成都", "乐山", "绵阳");
provinces[2] = new Array("济南", "青岛", "威海");
// 2. 获取用户选择的省份;
var choiceProvince = document.getElementById('province').value;
// 8. 获取用户选择的城市的select节点;
var selectEleNode = document.getElementById('city');
// 3.遍历用户选择省份对应的城市;
// 0 1 2
// 9. 清空上一次对于城市添加的所有option元素;
selectEleNode.length = 0;
for (var i = 0; i < provinces.length; i++) {
// 4. 判断用户选择的省份;
// alert(type(choiceProvince), type(i));
if (choiceProvince == i) {
// 如果相同， 便利该省份下的所有城市;
for (var j = 0; j < provinces[i].length; j++) {
// 5. 创建城市文本节点;
var textNode = document.createTextNode(provinces[i][j]);
// 6. 创建option的元素节点;
var optionEleNode = document.createElement("option");
// 7. 将城市的文本节点追加到option节点中;
optionEleNode.appendChild(textNode);
// 9. 添加option节点到select城市节点中;
selectEleNode.appendChild(optionEleNode);
}
}
}
}
</script>
</head>
<body>
<!--
1. 需求:
点击一个按钮， 动态实现添加城市;
[root@foundation0 day25]# cat /tmp/hello
## 1. 需求分析
省市的二级联动
## 2. 技术分析
## 3. 步骤实现
- 1). 确定事件类型onchange, 并为其绑定一个函数;
- 2). 修改下拉列表内容;
- 2-1). 获取用户选择的省份;
- 2-2). 创建一个二维数组， 用来存储省份和城市的对应关系;
- 2-3). 遍历二维数组中的省份；
- 2-4). 遍历时省份编号和用户选择的省份编号进行比较，
- 2-5). 如果相同， 遍历该省份下的所有城市;
- 将每一个城市以<option>城市名</option>添加到select里面去;
- 2-6). 如果不相同， 继续循环遍历省份;
-->
<div class="main">
<form>
<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>
<!--<option>"西安"</option>-->
</select>
</form>
</div>
</body>
</html>
案例三 登陆信息的校验
-
需求:
1). 用户登录时， 会填写一些信息, 如果所有的请求都提交给服务器处理， 服务端压力较大;
2). 在前端先校验，
后端也需要校验 -
实现步骤:
- 确定事件类型onsubmit(常见事件类型的网址: http://www.w3school.com.cn/js/js_htmldom_events.asp);
- 对这个事件绑定一个函数(执行的操作写在函数里面);
- 函数的核心功能: 校验用户名是否为空?
1). 获取输入用户名标签提交的内容；
2). if判断用户名是否为空?
3). 如果数据合法， 继续执行， 提交表单；
4). 如果数据不合法， 不让表单提交? (显示弹出框报错) — alert
–>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkForm() {
// # 1. 获取用户名提交的内容;[object HTMLInputElement]
var user = document.getElementById('user').value;
// alert(user);
// 2. 判断用户名是否为6～8个字符;
var userLen = user.length;
// alert(userLen >=6 && userLen<=8);
if (userLen <= 6 || userLen >= 8) {
alert("用户名不合法");
return false;
}
}
</script>
</head>
<body>
<!--
-->
<!--当提交信息的时候， 执行函数checkForm()-->
<form onsubmit="return checkForm()">
<input type="text" name='user' id="user" placeholder="用户名(6~8个字符)">
<input type="password" name='passwd' id="passwd" placeholder="密码(6位)">
<input type="submit" value="登录">
</form>
</body>
</html>
案例四 实现表格的全选和全不选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function checkAll() {
// 1. 获取全选框对象
var checkAllEle = document.getElementById('checkAll');
// 获取当前的状态, 如果返回true， 则代表选中， 否则未选中;
// alert(checkAllEle.checked);
var checkOnes = document.getElementsByName('checkOne');
if (checkAllEle.checked) {
for (var i = 0; i < checkOnes.length; i++) {
checkOnes[i].checked = true;
}
} else {
for (var i = 0; i < checkOnes.length; i++) {
checkOnes[i].checked = false;
}
}
}
</script>
</head>
<body>
<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;" border="1px">
<th style="text-align: center;" colspan="5">
<input type="button" value="添加">
<input type="button" value="删除">
</th>
<tr>
<th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>4</td>
<td>4</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>5</td>
<td>5</td>
<td>1</td>
<td>5</td>
</tr>
</table>
</body>
</html>
案例五 聚焦和离焦事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function showUserTips() {
var usertipsObj = document.getElementById('usertips');
var info ='<span style="color: gray">用户名长度大于2</span>';
// alert(usertipsObj.innerHTML);
usertipsObj.innerHTML = info;
}
function checkUser() {
//获取当前用户提交的用户名,默认情况下getElementsByName返回列表对象, .value获取对象里面的值
var username = document.getElementsByName('username')[0].value;
// 判断用户名是否为空， 如果为空， 报错
var usertipsObj = document.getElementById('usertips');
if (username.length <= 2) {
usertipsObj.innerHTML = '<span style="color: red">用户名长度不大于2</span>'
}else{
usertipsObj.innerHTML = '<span style="color: green;">ok</span>'
}
}
</script>
</head>
<body>
<div class="login">
<h1>用户登录</h1>
<form action="#" method="get">
<!--onfocus聚焦事件， 如果聚焦， 执行函数showUserTips()-->
<input type="text" name="username" placeholder="用户名" id='user' onfocus="showUserTips()" onblur="checkUser()">
<span id="usertips"></span><br/>
<input type="password" name="password" placeholder="密码" id="pwd"><br/>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
扫一扫
6105
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
