zoukankan      html  css  js  c++  java
  • 对象方法JavaScript脚本语言初解

    这两天一直在查找对象方法之类的问题,当初正好有机会和大家共享一下.

        JavaScript脚本语言

               JavaScript是一种基于对象(Object)和件事驱动(Event Driven)并拥有安全性能的脚本语言,它是通过嵌入或调入在准标的HTML语言中现实的。

        1、JavaScript的基本绍介

               HTML语言能现实文字、表格、音声、图像和动画等多媒体信息的检索,但是它缺乏动态的客户端与服务器端的互交。JavaScript的涌现可以使得信息和用户之间不只是一种表现和浏览的系关,而是现实了一种实时的、动态的、可互交的表达能力。在当初的网络中,静态网络经已面对淘汰,动态网络的用应越来越泛广。

               1)、JavaScript语言括概

               JavaScript是一种脚本语言,是以小代码的式方现实编程。它是一种基于对象的语言,不想Java一样是面向对象的语言。它比Java单简的多,最主要的是它是弱量变型语言。JavaScript是动态的,可以直接响用应户输入,须无经过Web服务程序。它对用户的请求应响时用采件事驱动停止的。JavaScript也是一种平台关无性的语言,它依赖于浏览器本身,与操纵环境关无,只要算计性能运行浏览器,并持支JavaScript就能够准确行执。

               2)、JavaScript代码结构

               JavaScript代码是嵌入在HTML中的,面下是一个单简的JavaScript程序:

        

    <html>
        <head>
            <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
            <scriptLanguage="JavaScript">
                //面下添加JavaScript代码
                alert("这是第一个JavaScript例子!");
        </script>
        </head>
    </html>

        

               另外,还有另一种JavaScript程序编写方法,就是将HTML和JavaScript语句分为两个问津啊。如面下的程序所示:

        

    <html>
        <head>
            <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
            <scriptLanguage="JavaScript" src="js01.js">
        </script>
        </head>
    </html>

        

               在本程序件文的统一录目下有一个js01.js件文,其代码为:

               alert("这是第一个JavaScript例子!");

               JavaScript代码不但可以位于<head>...</head>标记中,也可以位于<body>...</body>标记中,如面下的JavaScript程序所示:

        

    <html>
        <head>
    <meta http-equiv="Content-Type"content="text/html; charset=UTF-8">
            <scriptLanguage="JavaScript">
                alert("这是放在<head>...</heand>标记中的代码。");
        </script>
        </head>
        <body>
            <scriptLanguage="JavaScript">
                alert("这是放在<body>...</body>标记中的代码")
            </script>
        </body>
    </html>

        

              3)、JavaScript数据类型

               在JavaScript中有4中基本的数据类型:数字、符字串、布尔型和空值。基本类型中的数据可以使常量,也可是以量变。因为JavaScript用采弱类型的情势,所以一个数据的量变或常量不必首先停止明声,而是在用使或赋值时肯定其数据的类型。

               4)、JavaScript运算符与表达式

               表达式是对量变、常量停止赋值、算计等的程过。在JavaScript中,表达式可以分为算术表达式、字串表达式、赋值表达式以及布尔表达式等。运算符是成完操纵的一系列符号。在JavaScript中有算术运算符、比拟运算符、位运算符、字串运算符等。

               5)、JavaScript常量和量变

               JavaScript中的常量包含数字、布尔值、符字型常量、空值和特殊符字。其中数字包含整型常量和浮点常量,符字型常量指的是用引号括起来的符字,特殊符字指的是以“/”头开的弗成表现的特殊符字。

               这和Java很相似,而且也是严厉区分巨细写的。面下供提了一个综合用运常量和量变的程序,绍介如何用使JavaScript常量和量变。

        

    <html>
        <head>
            <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
            <scriptLanguage="JavaScript">
                var r;
                var PI = 3.1415926;
                var s;
                r = 2;
                s = PI*r*r;
                //表现输出
                document.writeln(s);
        </script>
        </head>
        <body>
            <br>JavaScript常量和量变
        </body>
    </html>

        

        量变是通过令命var成名的。可以先明声,也可以不作明声,在用使时可根据数据的类型来肯定量变的类型。根据作用域分划,JavaScript量变也可分为全局量变和局部量变。

        2、JavaScript件事

               JavaScript是基于对象(object-based)的语言,而基于对象的基本特征就是用采件事驱动。它是在形有界面的环境下,使得一切输入变更单简化。常通鼠标或热键的动作称之为件事(Event),由鼠标或热键发引的一连串程序的动作称之为件事驱动(EventDriver)。而对件事停止梳理的程序或函数称之为件事处理程序(Event Handler)。除了面下要细详讲授的OnClick件事和OnChange件事外,还有OnSelect件事、OnFocus件事、OnBlur件事、OnLoad件事和OnUnload件事等。

               1)、OnClick件事

               此件事由单击鼠标按钮发引。生产此件事的对象有button、checkBox、radioButton、selectList。面下是一个OnClick件事的例实:

        

    <html>
        <head>
            <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
            <script Language="JavaScript">
                function click1() {
                    alert("肯定");
                }
                function click2() {
                    alert("消取");
                }
        </script>
        </head>
        <body>
        <center>
            <form name="myform">
                <input type="button"value="肯定" name="test1" onclick="click1()" />
                <input type="button"value="消取" name="test2" onclick="click2()" />
            </form>
        </center>
        </body>
    </html>

        

               2)、OnChange件事

               当text或textarea中输入的符字值变改时会发触该件事,当在select表格项中一个选项态状变改后也会发触该件事。OnChange件事生产的对象也只有3个。

        

    <html>
        <head>
            <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
            <scriptLanguage="JavaScript">
                function dispmdg() {
                    alert("TextBox值发生了变更!");
                }
        </script>
        </head>
        <body>
        <center>
            <form name="myform">
                <input type="text"value="TextBox值发生了变更" name="Text" onchange="dispmdg()"/>
            </form>
        </center>
        </body>
    </html>

        

        3.JavaScript对象

               JavaScript中的对象是由属性(properties)和方法(methods)两个基本元素成构的。引用对象的主要门路有3种:用应JavaScript内部对象、由浏览器环境中供提和创立新对象。在JavaScript中经常使用的对象有String、Math、Date和组数,面下分离停止绍介。

              1)、String符字串

               String对象只有一个属性,及length属性。面下是一个用使符字串的例实:

        <scriptLanguage="JavaScript">

                    var myTest;

                    var myStringLenght;

                    myTest = "This is aJavaScript";

                    myStringLenght = myTest.length;

                    document.write("符字串为:");

                    document.write(myTest);

                   document.write("<br>");//在JavaScript中用使HTML标记

                    document.write("符字串长度为:");

                    document.writeln(myStringLenght);

            </script>

               String的主要方法如下:

               >锚点anchor():该方法创立犹如HTML档文中的anchor标记,用使anchor如用(A NAME=””)一样,通过列下各式拜访:string.anchor(anchorName);

               >符字表现的控制方法:big()为大体字表现,Italics()为斜体表现,bold()为粗体字表现,blink()为符字闪烁表现,small()为符字用小体字表现,fixed()为定固高亮字表现,fontsize(size)为控制字体巨细等;

               >字体颜色方法:fontcolor(color);

               >符字串巨细写转换:toLowerCase()为小写转换,toUpperCase()为大写转换。把一个给定的符字串分离转换成大写和小写的格式:string-stringValue.toUpperCas和string-stringValue.toLowerCase;

               >符字索搜:indexOf[charactor, fromIndex],从指定fromIndex位置开始索搜charactor第一次涌现的位置;

               >返回符字串的一部分符字串:substring(start, end),从start开始到end的符字串全体返回。

               面下是一个关于用使String方法的程序:

        

    <scriptLanguage="JavaScript">
                var str;
                str = "This is aJavaScript";
                document.write("符字串:");
                document.write(str);
                document.write("<br><br>");
                document.write("substring()方法:");
                document.write(str.substring(4 ,10));
        </script>

        

               接下来再看一个对符字停止索搜的程序:

        

    <html>
        <head>
            <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
            <scriptLanguage="JavaScript">
                function check(){
                    var temp , str;
                    str =document.myform1.text1.value;
                    temp = str.indexOf('@');
                    if (temp < 0) alert("请输入正当Email地址");
                    else alert(temp);
                }
        </script>
        </head>
        <body>
        <center>
            <form name="myform1">
                请输入Enail地址:<br>
                <input type="text"name="text1" value="" />
                <p><inputtype="button" name="btn" value="提交" onclick="check()"/>
            </form>
        </center>
        </body>
    </html>

        

               面上用到了String类的一个对象调用它的indexOf()方法,String对象的方法很多,它们大多是对符字串的表现、巨细、颜色的设定和对符字串的索搜。

               2)、Math对象

               Math对象的经常使用属性有PI、自然对数E,它们就是Java中的常量。Math对象的方法也很多,它们都很单简。例如绝对值abs()、正弦余弦值sin(),cos()、横竖弦反余弦asin(),acos()、正切横竖切tan(),atan()、四舍五入round()、平方根aqrt()、基于几次方的值Pow(base , exponent)。由于它们都很单简,这里不再讲授。

               3)、Date对象

               对Date对象的用使式方为:myDate = new Date();,它用get()方法返回Date,用set()方法来置设Date,其中独一的不同就是toGMTstring()方法,它用于返回格林威治格式的时光符字串。面下是一个关于Date对象的例实:

        

        每日一道理
    如果人类不好好保护我们这个赖以生存的地球,终有一天,风沙的肆虐与垃圾的堆积会吞没我们美丽的家园。我向全世界的人们呼吁:让我们从当初开始,从我做起,手挽手,肩并肩共同保护建设我们的家园吧!
    <body>
            <form name="myform">
                您的在线时光为:
                <input name="clock"size="18" value="在线时光" />
            </form>
            <scriptlang="JavaScript">
            var id , iM = 0 , iS = 1;
            start = new Date();
            function go(){
                now = new Date();
                time = (now.getTime() -start.getTime())/1000;
                time = Math.floor(time);
                iS = time % 60;
                iM = Math.floor(time / 60);
                if(iS < 10)
                    document.myform.clock.value ="" + iM + " 分 0" + iS + " 秒";
                else
                    document.myform.clock.value ="" + iM + " 分 " + iS + " 秒";
                id = setTimeout("go()" ,1000);
            }
            go();
            </script>
        </body>

        

        4、浏览器置内对象

               浏览器中供提了navigator对象、Window对象、History对象、Location对象、Document对象和form对象等置内对象。面下主要讲授History对象和Document对象。

               1)、History对象

               History对象的length属性,指出在本口窗中经已打开了多少个页网。还有back()方法示表打开后一个页网,foward()方法示表打开前一个页网,go()方法示表打开指定的页网。面下是一个用应例实:

           

    <body>
            <form name="myform">
                <input type="button"name="back" value="退后" onclick="history.back()" />
                <input type="button"name="forward" value="前进" onclick="history.forward()" />
                <input type="button"name="button1" value="表现length属性"onclick="alert(history.length)" />
                <ahref="javascript:history.back()">单击这里返回</a>
            </form>
        </body>

        

               2)、Document对象

               在浏览器中,Document对象是核心,同时也是最主要的。在Document中主要有links、anchor、form3个最主要的对象。在Document对象中,有write()、writelin()、close()和clear()4中方法。

               在HTML页网中可以用两种模式拜访页网中的全体点节,第一种是前以的方法,语法为:

               >document.all[“<要拜访的点节id>”]

               >document.all.<要拜访的点节id>

               第二种是通过DOM树停止拜访,导航方法主要有childNodes[n]、firstChild、lastChild、nextSibling。通过DOM树不但可以停止导航拜访,而且可以动态添加点节,主要方法有createElement(“<标记称名>”)/createTextNode(“<本文容内>”)、appendChild(<点节柄句>)、removeNode(true)。

        5、窗体对象

               窗体对象可以使计设员人能用窗体中不同的元素与客户机用户互交,不必再之前首先停止数据输入,可即现实动态变改Web档文的行为。

              1)、窗体对象简述

               窗体(form)成构了Web页面的基本元素。常通一个Web页面有一个窗体或几个窗体,用使Forms[]组数来现实不同窗体的拜访。窗体对象的属性如下:

               >Name = “表单的称名”。

               >Target = “指定信息的提交口窗”

               >Action = “收接窗体程序对应的URL”

               >Method = “信息数据送传式方(get/post)”

               >enctype = “窗体码编式方”

               >[onSubmit = “javascript代码”]

               在JavaScript中拜访窗体对象可由两种方法现实:第一种是通过form对象名停止拜访,如document.myform;第二种是通过口窗对象组数停止拜访,如document.forms[0]。窗体对象的方法只有一个submit()方法,该方法的主要功能就是现实窗体信息的提交。

               窗体中的基本元素由按钮、单选按钮、复选框、提交框、重置按钮、本文框等组成。在JavaScript中要拜访这些基本元素,必须通过对应特定的窗体元素的组数下标或窗体元素称名来现实。

               2)、button按钮

               button有name和value属性。用name设定提交信息时表现的信息称名,对应档文中button的Name;用value设定涌当初口窗中对应HTML档文中的Value信息。

        

    <head>
            <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
            <scriptlang="JavaScript">
                function check(){
                    alert("按钮名是:" +document.myform.button1.value);
                }
            </script>
        </head>
        <body>
            <form name="myform">
                <input type="button"name="button1" value="肯定" onclick="check()" />
            </form>
        </body>

        

               3)、text单行本文框

               name属性用来设定提交信息时的信息称名及对应于HTML档文中的Name;value属性用来设定涌当初口窗中对应HTML档文中的Value信息。

          

    <head>
            <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
            <scriptlang="JavaScript">
                function check(){
                    document.myform.text1.value ="text";
                }
            </script>
        </head>
        <body>
            <form name="myform"method="POST" action="">
                <input type="text"name="text1" size="25" /> <br>
                <input type="button"name="button1" value="提交" onclick="check()" />
                <input type="reset"name="button2" value="重置" />
            </form>
        </body>

        

               text的方法有:blur()方法用来将当前焦点移到后台;select()方法用来高亮文字。Text有4个主要件事:onFocus()在获取焦点时生产;OnBlur()在失去焦点时生产;OnSelect()在文字被高亮表现后生产;OnChange()在text元素值变改时生产。

               4)、select选择本文框

               Select的作用是对滚动选择容内停止控制。它有很多属性:用name设定提交信息时的信息称名;用length对应档文中的length;用options组成多个选项的组数。面下是一个关于select选择本文框的例实,用使这个下拉菜单可以表现多个值:

        

    <head>
            <metahttp-equiv="Content-Type" content="text/html;charset=UTF-8">
            <scriptlang="JavaScript">
            function func(){
                alert("您的所在地是" +st.value);
            }
        </script>
        </head>
       <body>
                <select type="select"name="st" size="3" onchange="func()" >
                    <optionselected="true" value="北京">北京</option>
                    <option value="天津">天津</option>
                    <option value="唐山">唐山</option>
                </select>
        </body>

        

               再来看以个带有options属性的程序,这个程序与面上的例实有点类似

        

    <body>
            <form method="POST"action="" name="myform">
                <select name="D1"size="4" multiple="true">
                    <option>长城</option>
                    <option>故宫</option>
                    <optionselected="true">北戴河</option>
                    <option>漓江</option>
                    <option>西湖</option>
                </select>
                <input type="button"name="B1" value="你想去的是" onclick="test(myform.D1)" />
            </form>
            <scriptlang="JavaScript">
            function test(a){
                var mystr = ""
                for(var i = 0 ; i <a.options.length ; i++){
                    if(a.options[i].selected)
                        mystr += a.options[i].text+ "\n"
                }
                alert(mystr)
            }
        </script>
        </body>

        

               用selectIndex属性指明该下标指明一个选项。Select的每一个选项都有他们的属性:用text刷属性对应选项对应的文字;用selected属性指明当前选项是否被选中,用Index属性指明当前选项的位置,用defaultselected属性来说明默认选项。Select的件事由OnBlur、OnChange和OnFocus。

               5)、checkBox复选框

               作用是对一个复选框中的容内停止控制。来看一个用使checkBox复选框的程序,它经经常使用应到下载时选择下载项的时候:

        

    <body>
            <form name="myform">
                <input type="checkbox"name="cb1" />长城<br/>
                <input type="checkbox"name="cb2" />故宫<br/>
                <input type="checkbox"name="cb3" />北戴河<br/>
                <input type="checkbox"name="cb4" />西湖<br/>
                <input type="checkbox"name="cb5" value="全体反选" onclick="test()" />全体反选
                <input type="checkbox"name="cb6" value="全选" onclick="checkAll()" />全选
            </form>
            <scriptlang="JavaScript">
                function test(){
                    document.myform.cb1.click();
                    document.myform.cb2.click();
                    document.myform.cb3.click();
                    document.myform.cb4.click();
                }
                function checkAll(){
                    if(document.myform.cb6.checked== true){
                        document.myform.cb1.checked= true;
                        document.myform.cb2.checked= true;
                        document.myform.cb3.checked= true;
                        document.myform.cb4.checked= true;
                    }
                    else{
                        document.myform.cb1.checked= false;
                        document.myform.cb2.checked= false;
                        document.myform.cb3.checked= false;
                        document.myform.cb4.checked= false;
                    }
                }
        </script>
        </body>

        

               面上用了click()方法和OnClick件事,它们的含义和前面的一样。

               6)、radio单选按钮

               radio有5种属性,除了name、value和ckecked属性在checkbox中讲授过以外,还有length属性和index属性。用使单选按钮的代码如下:

        

    <body>
            <form name="myform">
                <input type="radio"name="myradio" value="长城"/>长城<br/>
                <input type="radio"name="myradio" value="故宫"/>故宫<br/>
                <input type="radio"name="myradio" value="北戴河"/>北戴河<br/>
                <input type="radio"name="myradio" value="西湖"/>西湖<br/>
                <input type="radio"name="myradio" value="漓江" />漓江<br/>
            </form>
            <form name="btnForm">
                <input type="button"name="displayBtn" value="表现长度" onclick="alert(myform.myradio.length)"/><br/><br/>
                <input type="button"name="whickBtn" value="谁被选中" onclick="alert(whichRadio())" /><br/>
            </form>
            <script lang="JavaScript">
                function whichRadio(){
                    for(var i = 0 ; i < 5 ;i++){
                       if(document.myform.myradio[i].checked == true)
                            returndocument.myform.myradio[i].value;
                    }
                    return "没有想去的地方";
                }
        </script>
        </body>

        

        

               用length属性来说明单选按钮中的按钮数目;用index属性说明选中的按钮的位置。Radio的方法和件事与checkBox中的一样。

         

         

    文章结束给大家分享下程序员的一些笑话语录: Borland说我很有前途,Sun笑了;Sun说我很有钱,IBM笑了;IBM说我很专业,Sybase笑了;Sybase说我数据库很牛,Oracle笑了;Oracle说我是开放的,Linux笑了;Linux说我要打败Unix,微软笑了;微软说我的系统很稳定,我们都笑了。

  • 相关阅读:
    alpha版、beta版、rc版的意思
    回车符(CR)与换行符(LF), ' '和' '的区别
    html 图像映射(一个图像多个连接)
    前端工程师需要明白的「像素」
    通过设置Ionic-Cli代理解决ionic serve跨域调试问题
    Bootstrap Table使用方法详解
    写给移动开发者的 React Native 指南
    Mac中搭建 iOS 的 React Native 环境
    Windows版本搭建安装React Native环境配置及相关问题
    javascript获取wx.config内部字段解决微信分享
  • 原文地址:https://www.cnblogs.com/xinyuyuanm/p/3033720.html
Copyright © 2011-2022 走看看