JavaWeb - JavaScript

Posted 五号世界

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaWeb - JavaScript相关的知识,希望对你有一定的参考价值。

1.javascript入门知识

  *概念:一门客户端脚本语言

    *运行在客户端浏览器中。每一个浏览器都有JavaScript的解析引擎

    *脚本语言:不需要编译,直接就可以被浏览器解析执行了

  *功能:

    *可以来增强用户和html页面的交互过程,可以来控制html元素,让页面有一些动态的效果,增强用户的体验

  *JavaScript发展史:

    1.1992年,Nombase公司,开发出第一门客户端脚本语言,专门用于表单的校验。命名为:C - -,后来更名为ScriptEase

    2.1995年,Netscape(网景)公司,开发了一门客户端脚本语言:LiveScript。后来,请来SUN公司的专家,修改LiveScript,命名为JavaScript

    3.1996年,微软抄袭JavaScript开发出JScript语言

    4.1997年,ECMA(欧洲计算机制造协会),ECMAScript,就是所有客户端脚本语言的标准

    *JavaScript = ECMAScript + JavaScript自己特有的东西(BOM+DOM)

2.ECMAScript:客户端脚本语言的标准

  1.基本语法:

 

    1.与html结合的方式

      1.内部JS

        *定义<script>标签,标签体内容就是js代码

      2.外部JS

        *定义<script>标签,通过src属性引入外部的js文件 

    2.注释

      1.单行注释://注释内容

      2.多行注释/*注释内容*/

    3.数据类型

      1.原始数据类型(基本数据类型):

        1.number:数字。整数/小数/NaN(not a number 一个不是数字的数字类型)

        2.string:字符串

        3.boolean:true或false

        4.null:一个对象为空的占位符

        5.undefined:未定义。如果一个变量没有给初始化值,则会被默认赋值为undefined

      2.引用数据类型:对象

    4.变量

      *变量:一小块存储数据的内存空间

      *Java语言是强类型语言,而JavaScript是弱类型语言

      *语法:

        * var 变量名 = 初始化值;

    5.运算符

      1.一元运算符:只有一个运算数的运算符

        ++ - -  , + (正号)

        注意:在js中,如果运算数不是运算符所要求的类型,那么js引擎会自动的将运算数进行类型转换

          *string转number:按照字面值转换。如果字面值不是数字,则转为NaN(不是数字的数字)

          *boolean转number:true为1,false为0

      2.算术运算符

        + - * /  %  。。。

      3.赋值运算符

        = += -= 。。。

      4.比较运算符

        > < >= <=  ==   ===(全等于)

        *类型相同:直接比较 

          *字符串:按照字典顺序比较,按位逐一比较,直到得出大小为止

        *类型不同:先进行类型转换,再比较

          *===,全等于,在比较之前,先判断类型,如果类型不一样,直接返回false

      5.逻辑运算符 

        &&  | |  !

        *对于 ! 非: 其他类型转boolean,之后进行if判断时,可以简化书写

          1.number:0或NaN为假,其他为真

          2.string:除了空字符串(" "),其他都是true

          3.null&undefined:都是false

          4.对象:所有对象都是true

      6.三元运算符

        ? :表达式  如: a >  b ? 1 : 3 ; 如果a大于b则取1,否则就是3

    6.流程控制语句

      1.if...else...

      2.switch

        *在java中,switch语句可以接受的数据类型:

          *switch(变量):byte int short char,枚举(1.5),String(1.7)

            case 值:

        *在JS中,switch语句可以接收任意的原始数据类型

      3.while

      4.do...while

      5.for

    7.JS特殊语法

      *如果一行只有一条语句,可以省略分号(不建议)

      *变量的定义使用var关键字,也可以不使用

        *用var定义的变量是局部变量

        *不用var定义的变量是全局变量

  2.基本对象

    1.Function:函数对象

      1.创建

        1. var fun = new Function(形参列表,方法体);

        2. function  方法名称(形参列表){ 方法体 }

        3. var  方法名称 = function(形参列表){ 方法体 }

      2.方法

      3.属性

        length:代表形参的个数

      4.特点

        1.方法定义时,形参的类型不用写,返回值类型也可以不写

        2.方法是一个对象,如果定义名称相同的方法,会覆盖

        3.在JS中,方法的调用只与方法的名称有关,和参数列表无关

        4.在方法声明中,有一个隐藏的内置对象(数组),arguments,封装所有的实际参数 

      5.调用

        方法名称(实参列表);

 

<script>

        function fun1(a,b) {
            alert(a);
        }
        fun1(3);
        
        var fun2 = function (a,b) {
            alert(b);
        }
        document.write(fun1.length);

        //求任意个数的和
        function add() {
            var sum = 0;
            for(var i = 0; i < arguments.length; i++){
                sum += arguments[i];
            }
            return sum;
        }

    </script>

 

     2.Array:数组对象

      1.创建

        1. var arr = new Array(元素列表);

        2. var arr = new Array(默认长度);

        3. var arr = 【元素列表】;

      2.方法

        join(参数):将数组中的元素按照指定的分隔符拼接为字符串

        push():向数组的尾部添加一个或更多元素,并返回新的长度

      3.属性

      4.特点

          1.JS中,数组元素的类型是可变的

        2.JS中,数组的长度是可变的

    

    3.Date:日期对象

      1.创建  var date = new Date();

      2.方法:

        toLocalString():返回当前date对象对应的本地字符串格式

        getTime():获取1970年1月1日零点至今的毫秒值   

    4.Math:数学对象

      1.创建:

        *特点:Math对象不用创建,直接使用。Math.方法名();

      2.方法:

        random():返回0-1之间的随机数。含0不含1

        ceil(x):对数进行向上取整

        floor(x):对数进行向下取整

        round(x):进行四舍五入

      3.属性:

        PI:圆周率

 

  <script>
        //取1-100之间的整数
        var number = Math.random();
        number = number * 100;
        var num = Math.floor(number);
        num += 1;
        document.write(num);
    </script>

 

    5.RegExp:正则表达式对象

      1.正则表达式:定义字符串的组成规则

        1.单个字符:【】

          如:【a】  【ab】 【a - z】 【a - z A - Z 0 - 9_】

          *特殊符号代表特殊含义的单个字符:

            \\d : 单个数字字符【0-9】

            \\w : 单个单词字符 【a - z A - Z 0 - 9_】

        2.量词符号:

          ? : 表示出现0次到1次

          *  : 表示0到无穷次 贪婪匹配

          + : 出现1到无穷次 贪婪匹配

          {m,n} : 表示大于等于m,小于等于n

            * m如果缺省: {,n}:最多n次

            * n如果缺省 :{m,}:最少m次

        3.开始结束符号

          *  ^ : 开始

          * $ : 结束

      2.正则对象

        1.创建

          1. var reg = new RegExp("正则表达式");

            2. var reg = /正则表达式/;

        2.方法

          test(参数):验证指定的字符串是否符合正则定义的规范          

 

    <script>
        var reg = new RegExp("\\\\w{6,12}");
        var reg2 = /\\w{6,12}/;
        var username = "zhangsan";
        var flag = reg.test(username);
        // document.write(flag);
        alert(flag);
    </script>

 

    6.Global:全局对象

      1.特点:全局对象,这个Global中封装的方法不需要对象就可以直接调用

      2.方法

        1.encodeURI():url编码

        2.decodeURI():url解码

        3.encodeURIComponent():url编码,编码的字符更多

        4.decodeURIComponent():url解码

        5.parseInt():将字符串转为数字

          *逐一判断每一个字符是否是数字,直到不是数字为止,将前面数字部分转为number

        6.isNaN():判断一个值是否是NaN

          *NaN六亲不认,连自己都不认。NaN参与的==比较全部为false

        7.eval():将JavaScript字符串,并把它做为脚本代码来执行

      3.URL编码 GBK:一个字符两个字节 UTF-8:一个字符三个字节 一个字节8个二进制位

 

2.DOM简单学习

  *功能:控制html文档的内容

  *代码:获取页面标签(元素)对象 Element

    * document.getElemetnById("id值"):通过元素的id获取元素对象

  *操作Element对象:

    1.修改其属性值:

      1.明确获取的对象是哪一个?

      2.查看API文档,找其中哪些属性可以设置

    2.修改标签体内容

      *属性:innerHTML,修改便签内的内容

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部JS
    外部JS-->

</head>
<body>
    <img src="../HTMLandCSS/img/logo.jpg" id="p1">
    <h1 id="title">悔创阿里杰克马</h1>
    <script>
        var e1 = document.getElementById("p1");
        var title = document.getElementById("title");
        alert("我要换内容了");
        title.innerHTML = "还是京东好";
    </script>
</body>
</html>

 

 

 

4.事件简单学习

  *功能:某些组件被执行了某些操作后,触发了某些代码的执行

 

  *如何绑定事件

    1.直接在html标签上,指定事件的属性(操作),属性值就是js代码

      1.事件:onclick  - - - 单击事件 <img src="../HTMLandCSS/img/logo.jpg" id="p1" onclick="f1();">

    2.通过js获取元素对象,指定事件属性,设置一个函数

案例:开关灯

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <img src="img/off.gif" id="p1">
    <script>

        //1.获取图片对象
        var p1 = document.getElementById("p1");
        var flag = false; //代表灯是灭的
        function f1() {
            if(flag){ //如果灯开着就灭掉
                p1.src = "img/off.gif";
                flag = false;
            }else {
                p1.src = "img/on.gif";
                flag = true;
            }
                }
        p1.onclick = f1;

    </script>
</body>
</html>

 

5.BOM

  1.概念:Browser Object Model 浏览器对象模型

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

  2.组成:

    1.window:窗口对象

    2.Navigator:浏览器对象

    3.Screen:显示器屏幕对象

    4.History:历史记录对象

    5.Location:地址栏对象

 

   3.window对象

    1.创建

    2.方法

      1.与弹出框有关的方法:

        alert()显示带有一段消息和一个确认按钮的警告框

        confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框

          *如果用户点击确定按钮,则方法返回true,如果点击取消按钮,则方法返回false

        prompt()显示可提示用户输入的对话框

          *返回值,获取用户输入的值

      2.与打开关闭有关的方法

        open()打开一个新的浏览器窗口

          *返回一个新的window对象

        close()关闭浏览器窗口

          *谁调用我,我关谁

 

<body>
    <input type="button" value="前往网页" id="tag_id1">
    <input type="button" value="关闭网页" id="tag_id2">
    <script>
        var tag1 = document.getElementById("tag_id1");
        var tag2 = document.getElementById("tag_id2");
        var obj;
        tag1.onclick = function () {
            obj = open("https://www.baidu.com");
        };
        tag2.onclick = function () {
            obj.close();
        }


    </script>
</body>

 

       3.与定时器有关的方法

        setTimeout() 在指定的毫秒数后调用函数或计算表达式  一次性

          *参数:

            1.js代码或者方法  函数对象

            2.毫秒值

          *返回值:唯一标识,用于取消定时器

        clearTimeout() 取消由setTimeout()方法设置的Timeout

        setInterval() 按照指定的周期(以毫秒计)来调用函数或计算表达式 循环

          clearInterval()取消由setInterval()方法设置的Timeout

        var id = setInterval("alert(\'boom\')",3000);
        clearInterval(id);    

 

 轮播图案例:

<body>

    <img src="../img/off.gif" id="pp">

    <script>
        var pid = document.getElementById("pp");
        var num = 1;
        function switchPicture() {
            num ++;
            if(num % 2==0){
                pid.src = "../img/off.gif";
            }else if(num % 2 == 1){
                pid.src = "../img/on.gif";
            }
        }
        setInterval(switchPicture,2000);

    </script>
</body>

 

    3.属性

      1.获取其他BOM对象

        History

        Location

        Navigator

        Screen

      2.获取DOM对象

        document

    4.特点

      *Window对象不需要创建可以直接使用 window使用。 window.方法名();

      *window引用可以省略。 方法名();

   4.Location:地址栏对象

    1.创建(获取):window.location 或 location

    2.方法

      *reload():重新加载当前文档

    3.属性

      *href:设置或返回完整的URL  Location.href = "https://www.baidu.com"

 

 自动跳转首页案例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            text-align: center;
        }
        span{
            color: red;
        }

    </style>
</head>
<body>
    <p>
        <span id="time">5</span>秒后跳转至首页
    </p>

    <script>
        //通过定时器实现倒计时
        var second = 5;
        var time = document.getElementById("time");
        function showtime() {
            //时间如果小于0,则跳转
            second --;
            if(second <= 0){
                location.href = "https://www.baidu.com";
            }
            time.innerHTML = second + "";
        }
        setInterval(showtime,1000);

    </script>
</body>
</html>
自动跳转首页案例

   5.History

    1.创建:window.history

    2.方法

      1.back() 加载history列表中的前一个URL 和网页箭头一样

      2.forward()加载history列表中的下一个URL

      3.go(参数)加载history列表中的某个具体页面

        *参数:

          正数:前进几个历史记录

          负数:后退几个历史记录

    3.属性:

      *length 返回当前窗口历史列表中的URL数量

 

6.DOM

  *概念:Document Object Model 文档对象模型

    *将标记语言文档的各个组成部分,封装成对象。可以使用这些对象,对标记语言文档进行CRUD的动态操作  

  *W3C DOM 标准被分为3个不同的部分:

    *核心 DOM - 针对任何结构化文档的标准模型

      *Document:文档对象

      *Element:元素对象

      *Attribute:属性对象

      *Text:文本对象

      *Comment:注释对象

      *Node:节点对象,其他5个的父对象

    *XML DOM - 针对 XML 文档的标准模型

    *HTML DOM - 针对 HTML 文档的标准模型

  

  *核心 DOM - 针对任何结构化文档的标准模型

 

      *Document:文档对象

 

        1.创建(获取):在html dom模型中可以使用window对象来获取

        2.方法:

          1.获取Element对象

            1.getElementById(): 根据ID属性值获取元素对象。ID属性值一般唯一

            2.getElementsByTagName():根据元素的名称获取元素对象们。返回值是一个数组  如a,p,div等标签

            3.getElementsByClassNmae(): 根据Class的属性值来获取元素对象们。返回值是一个数组  如相同的class值

            4.getElementsByName():根据Name属性值获取元素对象们。返回值是一个数组  如name值

          2.创建其他的DOM对象 

            createAttribute(name)

            createComment()

            createElement()

            createTextNode()

 

      *Element:元素对象

          1.获取:通过document对象来获取和创建

          2.方法:

            1.removeAttribute():删除属性

            2.setAttribute():设置属性

 

<body>
    <a>点我试试</a>
    <input type="button" id="tag_button" value="给超链接设置网页">

    <script>
        //获取这个a标签元素
        var ele_a = document.getElementsByTagName("a")[0];
        //拿到按钮
        var ele_button = document.getElementById("tag_button");
        //给按钮绑定事件
        ele_button.onclick = function () {
            ele_a.setAttribute("href","https://www.baidu.com");
        };

    </script>
</body>

 

      *Node:节点对象,其他5个的父对象

        *特点:所有DOM对象都可以被认为是一个节点

        *方法:

          *CRUD dom树:

            *appendChild():向节点的子节点列表的结尾添加新的子节点

            *removeChild():删除(并返回)当前节点的指定子节点

            *replaceChild():用新节点替换一个子节点

            注意:

              超链接功能:
                1.可以被点击;有样式
                2.点击后跳转到href指定的url
              需求:保留功能1,去掉功能2
              实现:href="javascript:void(0);"

案例:删除子节点

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node</title>
    <style>
        div{
            border: 1px solid red;
        }
        #div1{
            height: 200px;
            width: 200px;
        }
        #div2{
            height: 100px;
            width: 100px;
        }

    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">div2</div>
        div1
    </div>
        超链接功能:
            1.可以被点击;有样式
            2.点击后跳转到href指定的url
        需求:保留功能1,去掉功能2
        实现:href="javascript:void(0);"
    <a href="javascript:void(0);">删除子节点</a>
    <script>
        var ele_a = document.getElementsByTagName("a")[0];
        //给超链接对象绑定点击事件
        ele_a.onclick = function () {
            //获取div1这个父节点对象
            var ele_div1 = document.getElementById("div1");
            var ele_div2 = document.getElementById("div2");
            ele_div1.removeChild(ele_div2);
        }

    </script>
</body>
</html>

删除子节

        *属性:

          *parentNode:返回节点的父节点

 案例:动态增删表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        div{
            text-align: center;
            margin: 50px;
        }
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="gender" placeholder="请输入性别">
        <input type="button" value="添加" id="btn_add">
    </div>

    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>小龙女</td>
            <td>女</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>

<script>
    /*
        添加:
            1.给添加按钮绑定单击事件
            2.获取文本框的内容
            3.创建td,去设置td的文本为文本框的内容
            4.创建tr
            5.将td添加到tr中
            6.获取table,将tr添加到table 中
        删除:
            1.确定删除的是哪一个超链接
                <a href="javascript:void (0);" onclick="del_tr(this)">
            2.怎么删除
     */
    //1.获取按钮
    document.getElementById("btn_add").onclick = function () {
        //获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        //创建td,赋值td的标签体
        var td_id = document.createElement("td");
        //文本节点才能放入
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        //a标签的td
        var td_a = document.createElement("td");
        var a = document.createElement("a");
        var text_a = document.createTextNode("删除");
        a.appendChild(text_a);
        a.setAttribute("href","javascript:void(0);");
        a.setAttribute("onclick","delTr(this);");
        td_a.appendChild(a);


        //创建tr
        var tr = document.createElement("tr");

        //添加td到tr中
        tr.appendChild(td_id);
        tr.appendChild(td_name);
        tr.appendChild(td_gender);
        tr.appendChild(td_a);
        //获取table
        var table = document.getElementsByTagName("table")[0];
        table.appendChild(tr);
        
        //删除方法
        function delTr(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            //获取tr对象
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
            alert(obj);
        }
    }
</script>
</body>
</html>
动态增删表格

 

  *HTML DOM

    1.标签体的设置和获取:innerHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>
    <style>
        div{
            text-align: center;
            margin: 50px;
        }
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }
        td,th{
            text-align: center;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <div>
        <input type="text" id="id" placeholder="请输入编号">
        <input type="text" id="name" placeholder="请输入姓名">
        <input type="text" id="gender" placeholder="请输入性别">
        <input type="button" value="添加" id="btn_add">
    </div>

    <table>
        <caption>学生信息表</caption>
        <tr>
            <th>编号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>操作</th>
        </tr>
        <tr>
            <td>1</td>
            <td>令狐冲</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>2</td>
            <td>任我行</td>
            <td>男</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>

        <tr>
            <td>3</td>
            <td>小龙女</td>
            <td>女</td>
            <td><a href="javascript:void (0);" onclick="delTr(this);">删除</a></td>
        </tr>
    </table>

<script>
    /*
        添加:
            1.给添加按钮绑定单击事件
            2.获取文本框的内容
            3.创建td,去设置td的文本为文本框的内容
            4.创建tr
            5.将td添加到tr中
            6.获取table,将tr添加到table 中
        删除:
            1.确定删除的是哪一个超链接
                <a href="javascript:void (0);" onclick="del_tr(this)">
            2.怎么删除
     */
    //1.获取按钮
    document.getElementById("btn_add").onclick = function () {
        //获取文本框的内容
        var id = document.getElementById("id").value;
        var name = document.getElementById("name").value;
        var gender = document.getElementById("gender").value;

        var ele_table = document.getElementsByTagName("table")[0];
        //向table里添加
        ele_table.innerHTML += "<tr>\\n" +
            "            <td>"+id+"</td>\\n" +
            "            <td>"+name+"</td>\\n" +
            "            <td>"+gender+"</td>\\n" +
            "            <td><a href=\\"javascript:void (0);\\" onclick=\\"delTr(this);\\">删除</a></td>\\n" +
            "        </tr>";
        //删除方法
        function delTr(obj) {
            var table = obj.parentNode.parentNode.parentNode;
            //获取tr对象
            var tr = obj.parentNode.parentNode;
            table.removeChild(tr);
            alert(obj);
        }
    }
</script>
</body>
</html>

使用HTMLDOM实现动态表格案例

    2.使用html元素对象的属性

    3.控制样式

      1.使用元素的style属性来设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div1"> div </div>

<script>
    var ele_div1 = document.getElementById("div1");
    ele_div1.onclick = function () {
        ele_div1.style.border = "1px solid red";
        //font-size --> fontSize
    }
</script>
</body>
</html>

style来控制

      2.提前定义好类选择器的样式,通过元素的className属性来设置其class属性值