Web学习历程记录(六)——JS
JS基本概念
JavaScript时运行在浏览器前端的脚本语言,它不需要编译,通过浏览器解释就可以执行,它的解释被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言
HTML与用户没有交互功能,网页只能看,不能操作。JavaScript用来制作web页面交互效果,提升用户体验
web前端三层:
结构层 HTML:描述页面结构
样式层 CSS:美化页面
行为层 JavaScript:从交互的角度,提升用户体验
JS组成部分:
ECMAScript,描述了该语言的语法和基本对象
文档对象模型(DOM),描述处理网页内容的方法和接口
浏览器对象模型(BOM),描述与浏览器进行交互的方法和接口
JS和HTML整合
内嵌式
通过script标签即可,可以放任意位置
<script>
</script>
外联式
定义一个js文件
通过script标签引入
<script type = "text /javascript" src = "">
</script>
JS基本语法
JavaScript 是一种弱类型语言,JavaScript的变量类型有它的值来决定,定义变量需要用关键字 ‘var’
var 变量名 = 值;
var可以省略
最后一个分号可以省略
同时定义多个变量可以使用,隔开
数据类型
number 数值型:整数,浮点
boolean:布尔类型
String:包含字符和字符串,单双引号可以混用
object:对象类型
undefined:未定义类型
typeof
用来判断变量是什么类型
typeof(变量名)
typeof 变量名
字符串转换成数字类型
parseInt():将一个字符串转成整数,如果一个字符串包含非数字字符,那么parseInt函数会从首字母开始取数字字符,一旦发现非数字字符,马上停止获取字符并输出已经得到的数字,如果没有,则转换失败。如果转换失败,则返回NaN
parseFloat:将一个字符串转换成小数
isNaN:转换前判断是否是数字,如果是返回false
运算符
关系运算符:>,>=,<,<=,
number类型和字符串做 -*+/的时候,字符串会自动的进行类型转换,签体字符串里面的数值满足number类型
==比较数值
===比较数值和类型
语句
跟Java一样
函数
重复执行的代码
function 函数名(参数列表){
函数体
}
获取元素(标签)方法
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素,获取到的是一个html对象,然后将它赋值给一个变量
点击事件
通过标签的事件属性绑定
<input type = "button" onclick = "函数名(参数列表)"/>
派发事件
元素对象.onclick = function(){};
练习
使用js完成简单的数据校验**
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>验证注册页面</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
font-size: 12px;
line-height: 20px;
}
.main {
width: 525px;
margin-left: auto;
margin-right: auto;
}
.hr_1 {
font-size: 14px;
font-weight: bold;
color: #3275c3;
height: 35px;
border-bottom-width: 2px;
border-bottom-style: solid;
border-bottom-color: #3275c3;
vertical-align: bottom;
padding-left: 12px;
}
.left {
text-align: right;
width: 80px;
height: 25px;
padding-right: 5px;
}
.center {
width: 280px;
}
.in {
width: 130px;
height: 16px;
border: solid 1px #79abea;
}
.red {
color: #cc0000;
font-weight: bold;
}
div {
color: #F00;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<form action="https://www.baidu.com" method="get" id="myform" onsubmit="return checkData()">
<table class="main" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="hr_1">新用户注册</td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="left">用户名:</td>
<td class="center">
<input id="username" name="user" type="text" class="in" />
<span id="usernamespan"></span>
</td>
</tr>
<tr>
<td class="left">密码:</td>
<td class="center">
<input id="pwd" name="pwd" type="password" class="in" />
</td>
</tr>
<tr>
<td class="left">确认密码:</td>
<td class="center">
<input id="repwd" name="repwd" type="password" class="in"/>
</td>
</tr>
<tr>
<td class="left">电子邮箱:</td>
<td class="center">
<input id="email" name="email" type="text" class="in"/>
</td>
</tr>
<tr>
<!-- 以1开头, 第二为是3,4,5,7,8的11位数字-->
<td class="left">手机号码:</td>
<td class="center">
<input id="mobile" name="mobile" type="text" class="in" />
<span id="mobilespan"></span>
</td>
</tr>
<tr>
<td class="left">生日:</td>
<td class="center">
<input id="birth" name="birth" type="text" class="in"/>
</td>
</tr>
<tr>
<td class="left"> </td>
<td class="center">
<input name="" type="image" src="img/register.jpg" />
</td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
<script>
function checkData() {
var username = document.getElementById("username").value;
if(username == null || username ==""){
alert("Error");
return false;
}
return true;
}
</script>
</html>
获得失去焦点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="inputid" οnfοcus="_onfocus()" onblur = "_onblur()" value="haha">
</body>
<script>
function _onfocus() {
var i = document.getElementById("inputid").value;
console .log("get" + i)
}
function _onblur() {
console.log("lost")
}
</script>
</html>
内容改变
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select id="id" onchange="change(this)">
<option value="1">11111</option>
<option value="3">33333</option>
<option value="2">22222</option>
</select>
</body>
<script>
function change(obj) {
console.log(obj.value)
}
</script>
</html>
等页面加载完成onload
鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div class="box" id="id" onmousedown="_onmousedown(this)" onmouseleave="_onmouseleave(this)" onmouseout="_onmouseout(this)" onmousemove="_onmousemove(this)">
</div>
</body>
<script>
function _onmousedown(obj) {
obj.style.backgroundColor = "red";
}
function _onmouseleave(obj){
obj.style.backgroundColor = "blue";
}
function _onmouseout(obj) {
obj.style.backgroundColor = "black";
}
function _onmousemove(obj) {
obj.style.backgroundColor = "green";
}
</script>
</html>
键盘事件
onkeydown() 键盘按下
onkeyup() 键盘抬起
完成图片轮播效果
定时任务
setInterval(code,time) 按照指定的周期来调用函数或计算表达式
方式一:函数名 setInterval(show,3000);
方式二:函数字符串 setInterval(“show()”,3000);
代码实现
<script>
var i = 1;
setInterval("changeImg()",3000);
function changeImg() {
i++;
if (i == 4){
i = 1;
}
var imgEle = document.getElementById("imgId");
imgEle.src = "../img/banner_"+i+".jpg";
}
</script>
BOM
Browser Object Model
为了便于对浏览器的操作,js封装了对浏览器中各个对象,使得开发者可以方便的操作浏览器中的各个对象
BOM中的五个对象
window 窗体对象
navigator 浏览器对象
screen 屏幕对象
history 历史对象
location 当前路径信息
正则表达式
方式一:
var reg = new RegExp(“正则”);
方式二:
var reg = /正则/;
innerHTML
向一块标签区插入html
支持html标签
会把之前的内容覆盖
练习
聚焦表单框中出现字体
<script>
function showTips() {
var userspan = document.getElementById("usernamespan");
userspan.innerText = "输入内容"
}
function checkData() {
var username = document.getElementById("username").value;
if (username == null || username == "") {
alert("Error");
return false;
}
else {
var userspan = document.getElementById("usernamespan");
userspan.innerText = "";
return true;
}
}
function usertips(obj) {
var username = obj.value;
var reg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
var flag = reg.test(username);
if (flag){
document.getElementById("usernamespan").innerText = "";
}
else {
document.getElementById("usernamespan").innerText = "重新输入";
}
}
function telTips() {
var userspan = document.getElementById("mobilespan");
userspan.innerText = "输入内容"
}
function telips(obj) {
var tel = obj.value;
var reg = /[1]\d{10}$/;
var flag = reg.test(tel);
if (flag){
document.getElementById("mobilespan").innerText = "";
}
else {
document.getElementById("mobilespan").innerText = "重新输入";
}
}
</script>
DOM
文档对象模型,可以让用户对网页中的元素进行操作
整个文档是一个文档节点
每个HTML元素是元素节点
HTML元素内的文本是文本节点
每个标签属性是属性节点
注释是注释节点
练习
复选框一个选中下面全选中,设置全选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1px" width="500px" align="center">
<tr>
<td>
<input type="checkbox" id="all" onclick="selectAll(this)"/>
</td>
<td>
商品名称
</td>
<td>
商品价格
</td>
<td>
商品数量
</td>
<td>
商品操作
</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "one"/>
</td>
<td>
Mac
</td>
<td>
18000
</td>
<td>
20
</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "one"/>
</td>
<td>
Mac
</td>
<td>
18000
</td>
<td>
20
</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "one"/>
</td>
<td>
Mac
</td>
<td>
18000
</td>
<td>
20
</td>
<td>
<a href="#">删除</a>
<a href="#">修改</a>
</td>
</table>
</body>
<script>
function selectAll(obj) {
var ones = document.getElementsByClassName("one");
var a = obj.checked;
for (var i = 0; i < ones.length; i++) {
ones[i].checked = a
}
}
</script>
</html>
利用JS操作CSS样式
在JS中如果有多个单词拼接,使用驼峰命名法
方式一:
标签对象。style。样式名 = “样式值”
JS控制二级联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
籍贯:<select id = "provinceId" οnchange="refreshCity(this)">
<option value="-1">-请选择-</option>
<option value="0">广东</option>
<option value="1">湖北</option>
<option value="2">山东</option>
</select>
<select id="cityId">
<option>-请选择-</option>
</select>
</body>
<script>
var city = new Array(3);
city[0] = ["深圳","惠州","东莞","广州"];
city[1] = ["武汉","黄冈","鄂州","黄石"];
city[2] = ["济南","青岛","威海","日照","烟台"];
function refreshCity(obj){
var cityselect = document.getElementById("cityId");
cityselect.innerText = "<option>-请选择-</option>"
var pValue = obj.value;
if(pValue > -1){
var cityArray = city[pValue];
}
for(var i = 0 ;i<cityArray.length;i++){
var cityValue = cityArray[i];
var opEle = document.createElement("option");
var textNode = document.createTextNode(cityValue);
opEle.appendChild(textNode);
cityselect.appendChild(opEle);
}
}
</script>
</html>
电子时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<span id="id"></span>
</body>
<script>
setInterval("showTime()",1000);
function showTime() {
var myData = new Date();
var dateStr = myData.toLocaleString();
document.getElementById("id").innerHTML = dateStr;
}
</script>
</html>