JAVASCRIPT：页面交互

JavaScript：一门客户端脚本语言。

概念：

  • JavaScript是运行在客户端浏览器中的，每一个浏览器都有JavaScript的解析引擎。
  • 脚本语言，不需要编译，直接就可以被浏览器解析执行了。

功能：

  • 增强用户和html页面的交互，控制html元素，让页面有一些动态的效果，增强用户体验
    客户端脚本语言出现的契机是：在以前网速慢的情况下，需要一门语言可以直接在客户端进行表单校验而不用等待缓慢的服务端返回结果。

组成：

  • JavaScript = ECMAScript（客户端脚本语言的标准，由ECMA组织提出，目的是对市场上种类众多的客户端脚本语言做一个规范） + JavaScript特有的东西（BOM+DOM）

ECMAScript

1、基本的语法：
（1）与html页面的结合方式：
【1】内部JS：在<script>标签中直接写
【2】外部JS：<script src="..."></script>

（2）注释：拥有和Java一样的单行注释和多行注释

（3）数据类型
【1】原始数据类型（基本数据类型）分为：
number：整数、小数、NaN（Not a number 一个不是数字的数字类型）
string：字符串
boolean：布尔值
null：一个对象为空的占位符（typeof null是object是一个bug，其实是null，在转boolean时按照null计算）
undefined：未定义。如果一个变量没有赋予初始化值，则会被默认赋予undefined

【2】引用数据类型：对象

（4）变量：一小块存储数据的内存空间
JavaScript是一种弱类型的语言，在开辟变量存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
语法：var 变量名 = 初始化值。如果不给初始化值，变量为undefined

（5）运算符
【1】一元运算符：运算数只有一个的运算符
++、--、+（正号）、-（负号）

【2】算数运算符：
+、-、*、/、%...

【3】赋值运算符：
=、+=、-=...

【4】比较运算符：
>、<、>=、<=、==、===（全等于）

【5】逻辑运算符
&&、||、！

【6】三元运算符
? :

正负号加在变量前面，会自动转为number类型。

  • string转number：按照字面值转换，如果字面值无法转换为数字（带有非数字字符），那么转换结果为NaN，NaN和任何数字运算结果都是NaN
  • boolean转number：true转为1，false转为0
  • 其它类型都是NaN

全等于表示：如果比较的变量类型不一致，不会象比较运算符那样进行类型转换后比较，而是直接返回false
比如：
"123" == 123 true
"123" === 123 false

!加在变量前面或者变量在if()括号中，如果变量不是boolean类型，会自动转换为boolean类型。

  • number转boolean：0或NaN为false，其它为true
  • string转boolean：除了空字符串”“，其它都是true
  • null和undefined转boolean：都是false
  • 对象转boolean：所有对象都为true

if(Object){}，判断当对象不为null执行
if(string){}，判断当字符串不为null且不为空字符串时执行

（6）流程控制语句：和java一模一样
【1】if。。。else
【2】switch（JS中的switch可以接收任意类型）
【3】while
【4】do。。。while
【5】for

（7）特殊语法：
【1】如果一行只有一句，那么分号；可以省略（不建议）
【2】变量的定义使用var关键字，也可以省略关键字（不建议）
带关键字：定义的变量是局部变量
不带关键字：定义的变量是全局变量

案例：九九乘法表
最终实现效果：


image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九九乘法表</title>
    <style>
        td{
            border: 1px solid goldenrod;
        }
    </style>
    <script>
        var s = "<table align='center'>";
        for (var a = 1;a <= 9;a++){
            s += "<tr>";

            for (var b = 1;b <= a;b++){
                s += "<td>";

                s += a + " * " + b + " = " + (a*b) + "&nbsp;&nbsp;&nbsp;";

                s += "</td>";
            }

            s += "</tr>";
        }

        s += "</table>";
        document.write(s);
    </script>
</head>
<body>
</body>
</html>

2、基本对象:
（0）Function：函数对象
【1】创建：
第一种：var fun = new Function(形参列表，方法体)；(了解即可，这种不需要掌握)
如：

    var fun = new Function("a","b","alert(a + b);");

    fun(1,"哈哈");

第二种：function 方法名（形参列表）{方法体}
如：

  function fun2(a){
        alert(a);
    }
    fun2(true);

第三种：var 方法名 = function 方法名（形参列表）{方法体}
和二基本一样，就不演示了

【2】方法
【3】属性：length代表形参的个数
如：

    function fun3(a,b,c){
        alert("asdasdasdqq");
    }

    alert(fun3.length);//3

【4】特点：
第一：形参的类型不用写；
第二：如果定义名称相同的方法，会覆盖前一个方法，因为方法是一个对象；
第三：实际传参的个数可以不和形参相匹配，没传的为undefined
第四：方法中封装了一个默认对象arguments数组对象，用来接收参数。（可以利用它来获取到所有参数，而不用定义形参）
例如：

    function fun4() {
        a = 0
        for (var i = 0;i < arguments.length;i++){
            a += arguments[i]
        }
        alert(a)
    }
    fun4(1,2,6,4,8,9,5,7);

【5】调用：方法对象(实际参数)

（1）Array：数组对象
【1】创建：
第一种：var arr = new Array（元素列表）；
如：

var arr = new Array(1,2,3)

第二种：var arr = new Array（默认长度）；
如：

 var arr2 = new Array(3);
    arr2[0] = 1;
    arr2[1] = 2;
    arr2[2] = 3;

第三种：var arr = [元素列表]；
如：

var arr3 = [1,2,3];

【2】方法：
join(参数)：将数组的元素按照指定的分隔符拼接为字符串返回，什么都不传默认使用逗号分隔
push(参数)：向数组的末尾添加一个或多个元素，并返回新的长度

【3】属性：length表示数组中的元素个数
【4】特点：
第一：JS中，数组可以同时存储不同类型的元素
第二：JS中，数组长度是随时可以变化的

（2）Boolean：boolean类型的包装类
（3）Date：日期对象
【1】创建：var date = new Date()；
【2】方法：
toLocaleString()：根据本地时间格式，把Date对象转为字符串
toLocaleDateString()：和上面一样，返回的是日期段
toLocaleTimeString()：和上面一样，返回的是时间段
getTime()：返回1970年1月1日零点至今的毫秒值

（4）Math：数学对象
【1】创建：Math对象不用创建，直接使用
【2】方法：
random()：产生一个0到1之间的随机数，包含0不包含1
cell(num)：向上取整
floor(num)：向下取整
round(num)：四舍五入
取一个1到100的整数：
（1）random取0到1的小数
（2）乘以100获得0到99.9999小数
（3）floor向下取整
（4）加1
【3】属性：
PI：圆周率，document.write(Math.PI);//输出圆周率

（5）Number：number的包装类
（6）String：string的包装类

（7）RegExp：正则表达式对象
【1】正则表达式：定义字符串的组成规则
单个字符：[]，如[a]、[ab]、[a-z]
特殊符号：
\d：单个数字[0-9]
\w：数字、单词和下划线[0-9a-zA-Z_]
量词符号：
*：任意次
?：零或一次
+：一次或多次
{m,n}：m <= 次数 <= n
{m,}：最少m次
{,n}：最多n次
开始结束符号：
^：开始
$：结束
【2】创建：
第一种：var reg = new RegExp("正则表达式");
如：var reg = new RegExp("/d*");
如果使用第一种，字符串中单个\代表转义，要注意一下。推荐使用第二种方式。

第二种：var reg = /正则表达式/;
如：var reg2 = //w+/;

【3】方法：
test(str)：验证字符串是否符合规范

（8）Global：全局对象，在Global中封装的方法不需要对象就可以直接调用，如：方法名();
【1】方法：
decodeURI（）：解码某个编码的URI
encodeURI（）：把字符串编码为URI

注：URI编码是为了避免在url中可能存在的字符歧义而出现的，对于中文以及一些特殊符号进行编码传输。
中文编码格式为：% + 2个十六进制数字（1个代表4位二进制数字，2个就是一个字节）

比如：encodeURI（”你好“） = %E4%BD%A0%E5%A5%BD

decodeURIComponent（）：解码某个编码的URI组件
encodeURIComponent（）：把字符串编码为URI组件
这两个和上面的方法一模一样，只不过，支持进行URI编码的字符范围更多，比如//在encodeURI中不会进行编码，而在encodeURIComponent会进行编码

parseInt（）：将字符串转为数字，逐一判断每一个字符是否是数字，直到不是数字为止，将前面数字部分转为number类型
比如：
var str = "123abcd";
var num = parseInt(str);
num为123

var str = "a123";
var num = parseInt(str);
num为NaN，因为第一个字符已经解析不为数字了

isNan（）：判断一个数字是否为NaN
为什么需要这个方法呢？因为任何数字直接 == NaN，结果都是false

eval（）：将JS字符串作为脚本代码来运行
比如：
var jscode = "alert(123);';
eval(jscode);

BOM：将浏览器的各个组成部分封装成对象

BOM对象有：
（1）Window：窗口对象
（2）Navigator：浏览器对象
（3）Screen：显示器对象
（4）History：历史记录对象
（5）Location：地址栏对象

浏览器对象和显示器对象很少用到，因此只学习其他三个对象。
Window对象：
特点：
（1）Window对象不需要创建可以直接使用 window.方法名()来调用方法
（2）window引用可以省略，可以直接写方法名()调用方法

方法：
（1）alert()（了解即可）：弹出警告窗口
（2）confirm()（用得较多）：弹出确认窗口，用户点击确定返回true，点击取消返回false
（3）prompt()（了解即可）：弹出对话框，用户可输入内容，返回值为用户输入的内容，当用户点击取消时，返回值为null
（4）close()：关闭浏览器窗口，哪个window对象调用该方法，就把谁关了
（5）open(url)：打开一个新的浏览器窗口，可选择输入url，返回值为一个window对象

属性：
（1）获取其他BOM对象：history、location、Navigator、Screen
由于window引用可以省略，所以直接写var location = location;即可
（2）获取DOM对象：document
我们一直写的document.getElementById，其实document就是window对象的属性

例子：

var newWindow = null;

        var openBtn = document.getElementById("openUrl");
        openBtn.onclick = function(){
           newWindow = open("https://www.jd.com");
        };

        var closeBtn = document.getElementById("closeUrl");
        closeBtn.onclick = function () {
            newWindow.close();
        }

（6）setTimeout()：在指定的毫秒数后调用函数或计算表达式，只执行一次，返回一个id
（7）clearTimeout()：清除由setTimeout()设置的指定id的定时器
（8）setInterval()：按照指定的周期（以毫秒计）来调用函数或计算表达式，返回一个id
（9）clearInterval()：清除由setInterval()设置的指定id的定时器
参数
【1】调用方法或直接传入方法对象
【2】毫秒数
如：

var id1 = setTimeout("fun();",4000);
//也可以写成setTimeout(fun,4000);直接传入方法对象
function fun(){
      alert("崩、撤、卖、溜");
}
clearTimeout(id1);

案例2：轮播图
实现效果如下：




图片文件为1.jpg、2.jpg、3.jpg

<img src="img/1.jpg" id="img" width="500px" height="500px"/>
    <script>
        var i = 3;
        var img = document.getElementById("img");
        setInterval(checkPhoto,4000);
        function checkPhoto(){
            img.setAttribute("src","img/" + ((i%3)+1) + ".jpg");
            i++;
        }
    </script>

Location对象
创建：通过window对象的属性获取，var location = location;
属性：
href：设置或返回完整的URL
var href = location.href;//获取
location.href = "xxx.xxx.xx";//设置
方法：
reload()：重新加载当前文档，即刷新页面

案例：5秒之后自动跳转到百度页面
效果如下：



<div id="msg"></div>
<script>
    var i = 5;
    var msg = document.getElementById("msg");
    var timeId = setInterval(checkTime,1000);
    function checkTime(){
        if(i > 0){
            msg.innerHTML = "<font size='5' color='#ffd700'>" + i + "秒之后，自动跳转页面</font>";
            i--;
        }else{
            clearInterval(timeId);
            location.href = "http://www.baidu.com";
        }

    }
</script>

History对象
创建：通过window引用获取
方法：
（1）back()：加载history列表的前一个url
（2）forward()：加载history列表的后一个url
（3）go(参数)：加载history列表的某个具体页面，参数，正数表示前进几个历史记录，负数表示后退几个历史记录
属性：
length：返回历史记录的URL数量

DOM：控制html文档的内容

将标记语言文档（不止html）的各个组成部分封装成对象，通过使用这些对象，可以对标记语言文档进行CRUD的动态操作

W3C DOM标准分为3个不同的部分：

  • （1）核心DOM：针对任何结构化文档的标准模型
    Doucment（重要）：文档对象
    Element（重要）：元素对象
    Attribute（了解即可）：属性对象
    TextNode（了解即可）：文本对象
    Comment（了解即可）：注释对象
    Node：节点对象，是其它五个对象的父对象

  • （2）XML DOM：针对XML文档的标准模型

  • （3）HTML DOM：针对HTML文档的标准模型

核心DOM模型：
（1）Document：文档对象
创建：通过window引用来获取（仅限HTML DOM）
获取Element对象方法：
【1】getElementById，通过id获取元素，返回一个Element对象
【2】getElementsByTagName，通过标签名获取元素，返回一个数组
【3】getElementsByClassName，通过class属性值获取元素，返回一个数组
【4】getElementsByName，通过name属性值获取元素，返回一个数组

创建DOM对象方法：
【1】createAttribute(name)
【2】createComment()
【3】createElement()
【4】createTextNode()

（2）Element：元素对象
创建：通过Document来创建和获取
方法：
【1】removeAttribute()：删除属性
【2】setAttribute()：设置属性

（3）Node：节点对象
方法：
【1】添加：appendChild()，向节点的子节点列表尾部添加新的子节点
【2】删除：removeChild()，删除当前节点的指定子节点
【3】修改：replaceChild()，用新节点替换一个子节点
【4】查询：即Document的get系列方法
小案例：动态添加、删除子元素


image.png
<head>
    <meta charset="UTF-8">
    <title>Node</title>
    <style>
        div{
            background-color: goldenrod;
        }

        span{
            background-color: palegreen;
        }
    </style>
</head>
<body>
    <div id="fa">fa</div>
    <input type="button" value="添加子节点" id="addChild">
    <input type="button" value="删除子节点" id="removeChild">
<script>
    index = 1;
    var addBtn = document.getElementById("addChild");
    var removeBtn = document.getElementById("removeChild");
    var faDiv = document.getElementById("fa");

    //添加子节点
    addBtn.onclick = function(){
        var spanNode = document.createElement("span");
        var textNode = document.createTextNode("子节点" + index++);
        spanNode.appendChild(textNode);
        faDiv.appendChild(spanNode);
    };

    //删除子节点
    removeBtn.onclick = function(){
        var spanChild = document.getElementsByTagName("span")[0];
        if(spanChild){
            faDiv.removeChild(spanChild);
        }
    }
</script>
</body>

属性：
parentNode：返回当前节点的父节点

案例：具备动态添加和删除功能的表格
（注意：获取输入项的value，直接element.value，用getAttribute获取不到 ）
实现效果如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        .form{
            padding-left: 25%;
            padding-top: 50px;
        }

        .table{
            padding-top: 100px;
        }

        table{
            width: 600px;
            border: 1px solid darkgreen;
            margin: auto;
        }

        td,th{
            border: 1px solid purple;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="form">
        <input type="text" placeholder="请输入编号" id="code">
        <input type="text" placeholder="请输入姓名" id="name">
        <input type="text" placeholder="请输入性别" id="sex">
        <input type="text" placeholder="请输入武功" id="gongfu">
        <input type="button" value="添加" id="addBtn">
    </div>

    <div class="table">
        <table id="table">
            <caption>武林人士表</caption>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>性别</th>
                <th>武功</th>
                <th>操作</th>
            </tr>
        </table>
    </div>

    <script>
        //获取表格
        var table = document.getElementById("table");
        //给添加按钮绑定事件
        var addBtn = document.getElementById("addBtn");
        addBtn.onclick = function(){
            //获取输入项目
            var code =  document.getElementById("code").value;
            var name =  document.getElementById("name").value;
            var sex =  document.getElementById("sex").value;
            var gongfu =  document.getElementById("gongfu").value;
            //创建一行
            var tr_new = document.createElement("tr");
            //创建单元格
            var td_code = document.createElement("td");
            var td_name = document.createElement("td");
            var td_sex = document.createElement("td");
            var td_gongfu = document.createElement("td");
            var td_cz = document.createElement("td");
            //创建文本
            var text_code = document.createTextNode(code);
            var text_name = document.createTextNode(name);
            var text_sex = document.createTextNode(sex);
            var text_gongfu = document.createTextNode(gongfu);
            //创建超链接
            var a_cz = document.createElement("a");
            a_cz.setAttribute("href","javascript:void(0)");
            /*
            * 给超链接绑定点击事件
            * */
            a_cz.onclick = function(){
                table.removeChild(tr_new);
                //可以顺便去除输入项的值，这里赶时间就不写了
            }

            //创建超连接文本
            var text_cz = document.createTextNode("删除");

            //拼接单元格与文本
            td_code.appendChild(text_code);
            td_name.appendChild(text_name);
            td_sex.appendChild(text_sex);
            td_gongfu.appendChild(text_gongfu);
            //拼接超链接单元格与文本
            a_cz.appendChild(text_cz);
            td_cz.appendChild(a_cz);
            //拼接行与单元格
            tr_new.appendChild(td_code);
            tr_new.appendChild(td_name);
            tr_new.appendChild(td_sex);
            tr_new.appendChild(td_gongfu);
            tr_new.appendChild(td_cz);
            //拼接表格与行
            table.appendChild(tr_new);
        };
    </script>
</body>
</html>

HTML DOM模型：
（1）标签体的设置和获取：innerHTML，相比核心DOM的节点，就省去了创建对象的麻烦
（2）使用html元素的属性
（3）控制样式
【1】使用元素的style实属性来控制样式，如：
div1.style.border = "1px solid red";
div1.style.width = "200px";
div1.style.fontSize = "20px";
【2】提前定义好样式，然后通过元素的className属性来改变其class值，达到切换样式的效果

事件：当某些组件被执行了某些操作后，触发某些代码的执行

绑定事件的方法：
（1）直接在html标签上，指定事件属性，属性值为js代码。
注意：在onclick事件属性中，值和在script代码中调用方法一样，是 方法名称(参数)；

开关灯案例：


image.png

image.png
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
</head>
<body>
<img src="img/off.PNG" id="light" onclick="check();"/>
<script>
    i = 1;
    function check(){
        var light = document.getElementById("light");
        if(i % 2 != 0){
            light.setAttribute("src","img/on.PNG");
            i++;
        }else{
            light.setAttribute("src","img/off.PNG");
            i++;
        }
    }
</script>
</body>
</html>

（2）通过js获取对象，指定事件属性值为某个js函数
注意，此时写法为 light.onclick = check; check后面没有()

常见事件有：
（1）onclick：单击事件
（2）ondblclick：双击事件
（3）onblur：失去焦点
（4）onfocus：获得焦点
（5）onload：一个页面或一张图片被加载完成
（6）onkeyup：键盘松开
（7）onchange：域的内容被改变
（8）onselect：文本被选中
（9）onsubmit：确认按钮被点击

注意：onload一般用在body标签或window对象，如window.onload = function(){}

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,684评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,143评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,214评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,788评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,796评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,665评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,027评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,679评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,346评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1赞 331
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,412评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,015评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2赞 343