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">&nbsp;</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>