Web前端开发JavaScript提升(4)

时间 2019-11-12

原文原文链接

JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型,它的解释器被称为JavaScript引擎,是浏览器的一部分,而且是被普遍用于客户端的脚本语言,JavaScript最先是在HTML网页上使用,它是属于网络的脚本语言,如今已经被普遍用于Web应用开发,经常使用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果,一般JavaScript脚本是经过嵌入在HTML中来实现自身的功能的,如今随着node.js引擎的出现,使得JavaScript逐步成为了一种全栈开发语言了.javascript

JavaScript 面向对象

JS是基于对象的(Object-Based)脚本语言,而不是面向对象(Object-Oriented)中所使用的那个对象,之因此说JS是一门基于对象的编程语言,是由于它没有提供抽象,继承,封装等面向对象语言的不少功能,而是把其余语言所建立的复杂对象统一块儿来,从而造成一个很是强大的对象系统.css

对象是编程语言中很重要的特征之一,JS是基于对象的编程语言,因此支持面向对象的全部特性,灵活使用这些对象可以实现丰富而强大的功能,下面咱们首先来看如何建立一个自定义类,代码以下:html

<body>
    <script type="text/javascript">
        function MyClass(name,age){                  //定义类,类名MyClass
            this.name = name;
            this.age = age;

            this.print = function(name,age){         //定义的一个函数体
                document.write("姓名: " + this.name + "年龄: " + this.age);
            }
        }

        var temp = new MyClass("lyshark",22);        //实例化一个对象
        temp.print()                                 //调用对象中的函数体
    </script>
</body>

上述代码执行后会打印出姓名和年龄,可是这种写法在实例化对象时,系统会为每一个对象中均保存了一个相同的print()函数,从而浪费内存,使用原型写法能够解决该问题,改进代码以下:前端

<body>
    <script type="text/javascript">
        function MyClass(name,age){
            this.name = name;
            this.age = age;
        }
        MyClass.prototype = {
            print:function(){
                document.write("姓名: " + this.name + "年龄: " + this.age);
            }
        }

        var temp = new MyClass("lyshark",22);        //实例化一个对象
        temp.print()                                 //调用对象中的函数体
    </script>
</body>

◆Date 对象◆

Date对象用于处理日期和时间,提供了不少高级的处理方法,能够用来帮助网站制做人员读取和设置日期和时间以及定义日期和时间的显示格式等,在JS中使用Date对象前须要先建立对象实例,而后才可使用.java

读取日期方法: 下面是几个经常使用的日期获取方法和说明信息,设置日期通常不会用到.node

<body>
    <script type="text/javascript">
        var now = new Date();

        document.write("当前年份: " + now.getFullYear() + "<br>");
        document.write("当前月份: " + now.getMonth() + "<br>");
        document.write("当前日期: " + now.getDate() + "<br>");
        document.write("当前周几: " + now.getDay() + "<br>");

        document.write("当前小时: " + now.getHours() + "<br>");
        document.write("当前分钟: " + now.getMinutes() + "<br>");
        document.write("当前秒数: " + now.getSeconds() + "<br>");
        document.write("当前时间戳: " + now.getTime() + "<br>");
    </script>
</body>

data对象转换: 将获取到的日期时间戳,经过不一样的方式展现出来.正则表达式

<body>
    <script type="text/javascript">
        var now = new Date();

        document.write("采用UTC时区表示: " + now.toUTCString(now.getTime()) + "<br>");
        document.write("采用本地时区表示: " + now.toLocaleString(now.getTime()) + "<br>");
        document.write("采用本地时区表示日期: " + now.toDateString(now.getTime()) + "<br>");
        document.write("采用本地中国标准时间: " + now.toTimeString(now.getTime()) + "<br>");
        document.write("采用本地时区表示2019/02/21: " + now.toLocaleDateString(now.getTime()) +"<br>");
        document.write("采用本地时区表示4:01:55 : " + now.toLocaleTimeString(now.getTime()) +"<br>");
    </script>
</body>

◆Math 对象◆

Math对象的方法是编程过程当中常用的数学函数,如三角函数、平方根、四舍五入等,对象的方法同Math对象的属性同样,属于Math对象自己,在引用这些方法时,直接使用Math而不用使用Math对象的实例名称.编程

Math经常使用方法: 一些经常使用的Math数值计算方法.数组

<body>
    <script type="text/javascript">
        document.write("产生随机数[0-9]: " + parseInt(10 * Math.random())  + "<br>");
        document.write("产生随机数[任意数字]: " + String.fromCharCode(97 * Math.random())  + "<br>");
        document.write("返回数值的绝对值: " + Math.abs(3.161592654)  + "<br>");
        document.write("返回x和y中较大的一个数: " + Math.max(10,87)  + "<br>");
        document.write("返回x和y中较小的一个数: " + Math.min(10,87)  + "<br>");
        document.write("返回x的y次方根: " + Math.pow(10,87)  + "<br>");
        document.write("对x进行四舍五入: " + Math.round(12.425)  + "<br>");
        document.write("返回x的平方根: " + Math.sqrt(10)  + "<br>");
    </script>
</body>

◆RegExp 对象◆

正则表达式并不是一门专用语言,但也能够看做是一种语言,它可让用户经过使用一系列普通字符和特殊字符构建能明确描述文本字符串的匹配模式.除了简单描述这些模式以外,正则表达式解释引擎一般可用于遍历匹配,并使用模式做为分隔符来将字符串解析为子字符串,或以智能方式替换文本或从新设置文本格式.正则表达式为解决与文本处理有关的许多常见任务提供了有效而简捷的方式.浏览器

正则匹配: 一些经常使用的正则匹配函数,正则表达式是通用的,请自行百度.

<body>
    <script type="text/javascript">

        var string = "hello123world567mynames;"
        document.write("Match全局匹配: " + string.match(/\d+/g)  + "<br>");
        document.write("Search取出第一个结果的索引值: " + string.search(/\d+/g)  + "<br>");
        document.write("Split取出第一个结果的索引值: " + string.split(/\d+/g)  + "<br>");

        var reg = RegExp("\d+",g);
        document.write("测试字符是否存在: " + reg.test("names123123lyshark456,789")  + "<br>");
    </script>
</body>

◆Window 对象◆

Window 对象称之为窗口对象,位于浏览器对象模型的最顶层,表明整个浏览器窗口,是Web浏览全部内容的主容器,只要打开一个浏览器窗口,就建立了一个Window对象,即便没有在窗口上显示任何内容.

打开关闭窗口: 利用window.open()打开网页,window.close()关闭打开的网页.

msg.html

<body bgcolor="#bc8f8f">
    <table width="300" height="200" border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td valign="top"> 网页通知
                <p> 这是一个通知信息,您能够忽略掉</p>
            </td>
        </tr>
    </table>
</body>

index.html

<body>
    <input type="button" value="弹出通知" onclick="msg()">
    <input type="button" value="关闭通知" onclick="msg_close()">
    <script type="text/javascript">
        function msg(){
            open("msg.html","通知",height=50,width=30,top=20,left=10);
        }
        function msg_close() {
            close()
        }
    </script>
</body>

弹出提示框: 点击按钮自动弹出Window.alert()提示消息框.

<body>

    <input type="button" value="点击弹窗" onclick="msg()">
    <script type="text/javascript">
        function msg(){
            alert("这是一个提示框...")
        }
    </script>
</body>

弹出选择框: Window.confirm()弹出一条信息让用户确认,包括确认和取消按钮.

<body>
    <input type="button" value="弹窗口" onclick="msg()">
    <script type="text/javascript">
        function msg(){
            if(confirm("请输入你的选项..")){
                alert("感谢您的参与..")       //确认按钮执行语句
            }else{
                alert("取消语句..")           //取消按钮执行语句
            }
        }
    </script>
</body>

弹出输入框: window.prompt()用于弹出一个输入框,可让用户输入一些信息.

<body>
    <script type="text/javascript">
        var passwd = prompt("请输入密码(密码是123): ","");
        while(passwd !="123"){
            passwd = prompt("密码错误,请从新输入: ");
        }
        if(passwd =="123"){alert("密码正确...")}
    </script>
</body>

设置单次定时器: 如下案例,实现当点击删除按钮时,屏幕提示删除成功,在5秒后自动的隐藏标签.

<body>
    <div id="status" style="color: red;"> </div>
    <input type="button" value="删除定时" onclick="DeleteStatus()">

    <script type="text/javascript">
        function DeleteStatus(){
            var temp = document.getElementById("status");
            temp.innerText = "删除成功了...";
            setTimeout(function(){
                temp.innerText = "";
            },50000);                     //设置5秒后执行清空标签
        }
    </script>
</body>

设置循环定时器: setIntercal()设置定时器,clearInterval()清除定时器,定时器用于周期性执行.

<body>
    <input type="text" id="clock">
    <input type="button" value="开始执行" onclick="begin_func()">
    <input type="button" value="取消执行" onclick="end_func()">

    <script type="text/javascript">
        function begin(){
            var now = new Date();
            var stime = now.getTime()
            var ret = document.getElementById("clock");
            ret.value=stime;
        }

        var ID;                                //定义全局变量,后期用于清楚定时器
        function begin_func(){
             ID =setInterval(begin,1000);     //每隔1秒执行一次,设置定时器
        }
        function end_func(){
            clearInterval(ID);                //取消一秒内执行,清除定时器
            ID = undefined;
        }
    </script>
</body>

JavaScript DOM编程

文档对象模型 (Document Object Model,DOM) 是一种W3C标准全部的现代浏览器都支持DOM,DOM用于HTML和XML文档的编程接口,它给文档提供了一种结构化的表示方法,能够改变文档的内容和呈现方式.最为关心的是,DOM把网页和脚本以及其余的编程语言联系了起来,DOM属于浏览器,而不是JavaScript语言规范里的规定的核心内容.Dom+JavaScript就能使网页动起来,通常使用JQuery来作这事,JQuery封装了JavaScript+Dom变得更为简单,这里咱们只须要了解一些基本内容.

◆DOM 查找元素◆

GetElementById: 根据ID号获取一个标签,这种方式是最经常使用的.

<body>
    <div id="MyDiv"> hello world </div>

    <script type="text/javascript">
        var temp = document.getElementById("MyDiv");
        document.write("获取到的结果: " + temp.innerText);
    </script>
</body>

getElementsByName: 根据自定义标签alex=MyDiv属性获取标签集合.

<body>
    <div alex="MyDiv"> <b> hello lyshark </b> </div>

    <script type="text/javascript">
        var names = document.getElementsByName("alex");      //经过自定义的名称找标签
        names.innerText = "www.baidu.com";                   //改变元素标签名称
        document.write("修改后的内容:" + names.innerText);
    </script>
</body>

getElementsByClassName: 根据class类名称属性获取标签集合.

<body>
    <div clas="MyClass"> <b> hello lyshark </b> </div>

    <script type="text/javascript">
        var names = document.getElementsByClassName("MyClass");  //经过类名称找出标签
        names.innerText = "www.baidu.com";                       //改变元素标签名称
        document.write("修改后的内容:" + names.innerText);
    </script>
</body>

getElementsByTagName: 根据标签名name="MyDiv"来获取标签集合.

<body>
    <div name="MyDiv"> <b> hello lyshark </b> </div>

    <script type="text/javascript">
        var names = document.getElementsByName("MyDiv");      //经过标签名称找出标签
        names.innerText = "www.baidu.com";                    //改变元素标签名称
        document.write("修改后的内容:" + names.innerText);
    </script>
</body>

◆DOM 标签操做◆

innerText: 该方式只能对单纯的标签进行操做,若是标签中嵌入了其余标签,那么该方式会自动过滤掉标签格式.

<body>
    <div id="lyshark">hello world</div>

    <script type="text/javascript">
        var temp = document.getElementById("lyshark");                 //经过标签ID获取标签句柄
        document.write("原来的内容: " + temp.innerText + "<br>");      //获取标签中原始的内容
        temp.innerText = "alex"                                       //修改标签中的内容为alex
        document.write("修改后的内容: " + temp.innerText + "<br>");    //获取修改后的标签内容
    </script>
</body>

innerHTML: 该方式不但能够修改文本,还能够同时修改HTML的嵌套标签,修改时应加上标签格式.

<body>
    <div id="lyshark"> <b> hello lyshark </b> </div>

    <script type="text/javascript">
        var temp = document.getElementById("lyshark");                //经过标签ID获取标签句柄
        document.write("原来的内容: " + temp.innerHTML + "<br>");      //获取标签中原始的内容
        temp.innerHTML = '<b> hello alex </b>'                        //修改标签中的内容为alex
        document.write("修改后的内容: " + temp.innerHTML + "<br>");    //获取修改后的标签内容
    </script>
</body>

inner 循环修改: 经过使用数组的形式,能够实现循环修改元素,好比如下循环修改name="MyDiv"的全部标签内容.

<body>
    <div name="MyDiv"> <b> hello lyshark </b> </div>
    <div name="MyDiv"> <b> hello lyshark </b> </div>
    <div name="MyDiv"> <b> hello lyshark </b> </div>
    <div name="MyDiv"> <b> hello lyshark </b> </div>

    <script type="text/javascript">
        var names = document.getElementsByName("MyDiv");      //经过标签名称找出标签
        //id.innerText = "www.mkdirs.com";       不生效:缘由是标签名称重复,须要使用数组
        names[0].innerText = "www.mkdirs.com";                //改变第1个元素标签名称
        names[1].innerText = "www.mkdirs.com";                //改变第2个元素标签名称
        
        //------------------------------------------------
        //经过循环修改多个标签
        document.write("总共有标签数: " + names.length);       //能够统计总共标签数量
        for(var item in names){
            names[item].innerText = "www.mkdirs.com";         //这里写批量修改的内容
        }
    </script>
</body>

CreateElement 建立标签: 使用最原始的方式建立标签,实如今父容器div id=tags中,动态的添加a标签.

< -------------------------[方式1]------------------------- >
<body>
    <div id="MyDiv"> </div>                          <!--指定一个父容器-->

    <script type="text/javascript">
        var tag = document.createElement("a");      //指定标签格式:这里是a标签
        tag.innerText = "点我跳转";                 //设置标签名称
        tag.href = "http://www.baidu.com";          //设置跳转地址

        var id1 = document.getElementById("MyDiv");  //获取标签的对象
        id1.appendChild(tag)                         //放到标签里面
    </script>
</body>

< -------------------------[方式2]------------------------- >
<body>
    <div id="MyDiv"> </div>                          <!--指定一个父容器-->

    <script type="text/javascript">
        var tag = "<a class='c1' href='http://www.baidu.com'>点我啊</a>";
        var id1 =document.getElementById("MyDiv");     //加到这个标签的里面
        id1.innerHTML = tag;                          //直接经过inner追加进去
    </script>
</body>

◆DOM 属性操做◆

修改类属性: 分别新建两个CSS属性,并经过className方法,实现后期对类属性的修改.

<head>
    <style type="text/css">
        .show_table{
            display: block;
            background-color: red;
        }
        .hide_table{
            display: none;
        }
    </style>
</head>

<body>
    <div id="MyDiv" class="show_table"> hello world </div>   <!--指定修改的标签-->
    <script type="text/javascript">
        var ids = document.getElementById("MyDiv");          //经过ID找到标签
        ids.className = "hide_table";                        //指定使用hid_table的CSS属性
    </script>
</body>

修改标签属性: 修改DIV标签id=MyDiv的标签属性,将name=lyshark修改成name=hello.

<body>
    <div id="MyDiv" name="lyshark"> hello world </div>                <!--准备修改的标签-->

    <script type="text/javascript">
        var ids = document.getElementById("MyDiv");                  //找到DIV标签

        document.write("当前 Name= " + ids.getAttribute('name'));    //找到div1标签里面的name属性
        ids.setAttribute('name','hello');                           //将name属性修改成name=hello
        document.write("修改后 Name= " + ids.getAttribute('name'));  //修改后,再次打印出结果
    </script>
</body>

修改标签样式: 修改标签的CSS代码的格式,能够修改多个,可是标签中必须存在该字段,不然没法修改.

<body>
    <div id="MyDiv" name="lyshark" style="background-color: red "> hello world </div>

    <script type="text/javascript">
        var ids = document.getElementById("MyDiv");                  //找到DIV标签
        ids.style.backgroundColor = "green";                         //将背景色改为绿色
    </script>
</body>

伪造表单提交: 本身实现一个submit的表单提交功能,本身定义提交按钮的功能.

<body>
    <form id="MyForm">
        <input type="text">
        <input type="submit" value="submit提交">
        <a onclick="Submit()">自定义提交</a>
    </form>
    
    <script type="text/javascript">
        function Submit(){
            var form = document.getElementById("MyForm");
            form.submit();
        }
    </script>
</body>

JavaScript 事件绑定

JavaScript 的事件和事件驱动为网页增添了丰富的交互性,事件是用户在操做浏览器的过程当中,由用户触发或由浏览器自身触发的动做,浏览器捕获这些动做,并根据用户编程时设置的对应这些动做的事件处理程序,触发相应的处理过程,从而实现交互过程,浏览器在程序运行的大部分时间都等待交互事件的发生,并在发生时,自动的调用事件处理函数,完成整个处理过程.

◆键盘事件◆

keyDown: 当键盘按下某个键时会触发KeyDown事件,用于浏览器窗体,图像,超连接,文本区域.

<body>
    <input type="text" name="text" onkeydown="func_keydown()">
    
    <script type="text/javascript">
        function func_keydown() {
            alert("你按下了一个键..")
        }
    </script>
</body>

keyUp: 当键盘松开某个键时会触发Keyup事件,用于浏览器窗体,图像,超连接,文本区域.

<body>
    <input type="text" name="text" onkeyup="func_keyup()">

    <script type="text/javascript">
        function func_keyup() {
            alert("你按松开了一个键..")
        }
    </script>
</body>

KeyPress: 当键盘上同时按下一个键而且同时弹出,则执行指定的函数.

<body>
    <input type="text" name="text" onkeypress="func_keypress()">

    <script type="text/javascript">
        function func_keypress() {
            alert("同时按下并弹出..")
        }
    </script>
</body>

Resize: 当浏览器窗口或帧的大小发生变化时触发Resize事件.

<body onresize="mesg()">

    <script type="text/javascript">
        function mesg() {
            document.write("窗口大小已被改变了..." + "<br>")
        }
    </script>
</body>

keycode: 用户在body区域中按下空格键,触发弹出信息框.

<body onkeypress="keycode()">

    <script type="text/javascript">
        function keycode() {
            if(window.event.keyCode == 32){
                alert("您按下了空格...");
            }
        }
    </script>
</body>

◆鼠标事件◆

Click: 鼠标在一个对象上左键点击触发Click事件,对象包括button,document,checkbox,link,radio,submit.

<body>

    <input type="button" id="button1" value="按钮1" onclick="alert('按钮1被按下了...')">
    <input type="button" id="button2" value="按钮2" onclick="alert('按钮2被按下了...')">
    
    <script type="text/javascript">
    </script>
</body>

MouseDown&MouseUP: 当咱们按下鼠标,系统触发MouseDown事件,释放鼠标时自动触发MouseUP事件.

<body>
    <input type="button" value="点我" onmousedown="down()">
    <input type="button" value="点我" onmouseup="up()">
    
    <script type="text/javascript">
        function down() {
            document.write("你按下了按键...")
        }
        function up() {
            document.write("你释放了按键...")
        }
    </script>
</body>

MouseOver&MouseOut: 鼠标指针到达一个对象之上时,触发MouseOver事件,鼠标离开时触发MouseOut事件.

<body>
    <input type="submit" value="鼠标在按钮上" onmouseover="in_over()"></input>
    <input type="submit" value="鼠标离开按钮" onmouseout="out_over()"></input>

    <script type="text/javascript">
        function in_over() {
            alert("鼠标在按钮上...")
        }
        function out_over(){
            alert("鼠标离开按钮...")
        }
    </script>
</body>

◆其余事件◆

OnClick: 通用事件,能够绑定到任何能够操做的标签中,当事件触发后,执行对应的函数体.

<body>
    <input type="button" value="弹窗" onclick="show()">

    <script type="text/javascript">
        function show(){
            alert("触发弹窗一个窗口提示...")
        }
    </script>
</body>

Focus&Blur: 当屏幕上的光标进入对象区域内时触发focus事件,反之当光标离开时触发blur事件.

<body>
    <input onfocus="Focus(this);" onblur="Blur(this);"
           id="search" value="请输入关键字" style="color: gray;" />

    <script type="text/javascript">
       function Focus(ths){             //光标来到执行
            ths.style.color = "black";
            if(ths.value == '请输入关键字' || ths.value.trim() == ""){

                ths.value = "";
            }
        }
        function Blur(ths){            //光标离开执行
            if(ths.value.trim() == ""){
                ths.value = '请输入关键字';
                ths.style.color = 'gray';
            }else{
                ths.style.color = "black";
            }
        }
    </script>
</body>

Submit(1): 一般和form标记配合使用,其做用是用于送出数据,用户在form中输入数据后,点击Sumbit触发自定义函数.

<body>
    <form name="forms" method="post" onsubmit="return check()">
        <input type="text" name="texts" size="20">
        <input type="submit" value="提交">
    </form>

    <script type="text/javascript">
        function check() {
            if(document.forms.texts.value == ""){
                document.forms.focus()
                alert("用户没有输入任何内容...")
                return false
            }else
            {
                alert("用户输入了内容...")
                return true
            }
        }
    </script>
</body>

Submit(2): 一般和form标记配合使用,其做用是用于送出数据,用户在form中输入数据后,点击Sumbit触发自定义函数.

<body>
    <form action="https://www.baidu.com">
        <input type="text" id="username">
        <input type="submit" value="提交" onclick="return MySub()">
    </form>

    <script type="text/javascript">
        function MySub(){
            var user = document.getElementById("username");
            if(user.value.length > 0){
                alert("编辑框内有数据,容许提交数据..")
                return true;
            }else
            {
                alert("用户名输入不能为空...")
                return false;
            }
        }
    </script>
</body>

Reset: 一般状况下和form标记配合使用,其起到的做用是,当用户完成信息输入后,按下按钮自动清空已经输入的数据.

<body>
    <form name="forms" method="post" >
        <input type="text">
        <input type="password">
        <input type="reset" value="重置" onreset="reset()">
    </form>

    <!--<script type="text/javascript">-->
        <!--function reset(){-->
            <!--alert("内容已经清空了...")-->
            <!--return 1-->
        <!--}-->
    <!--</script>-->
</body>

Change: 当文本区域中的鼠标指针移离该对象时,若对象内容与原来内容不一样,则就会触发Change事件.

<body>
    <textarea name="text" rows="3" cols="30" value=""
              onchange="show()"></textarea>

    <script type="text/javascript">
        function show(){
            alert("您在文本框中添加了新的内容...")
        }
    </script>
</body>

Select: 当一个文本框,文本区域对象中的文本被选中时就会触发Select事件,未被选择则不会出现提示框.

<body>
    <input type="text" value="hello lyshark" onselect="show()">

    <script type="text/javascript">
        function show(){
            alert("您选中了文本框中的文本内容...")
        }
    </script>
</body>

Error: 当网页由于某种缘由出现错误时就会触发,在错误处理程序中能够绑定操做,该标签经常使用与<body>,<img>配合.

<body>
    <img src="temp.jpg" onerror="error_msg()">

    <script type="text/javascript">
        function error_msg(){
            alert("图片加载失败了...")
        }
    </script>
</body>