javascript快速入门6--Script标签与访问HTML页面

时间 2019-11-13

标签 javascript 快速入门 script 标签访问 html 页面栏目 JavaScript 繁體版

原文原文链接

Script标签

script标签用于在HTML页面中嵌入一些可执的脚本javascript

    <script>
        //some script goes here
    </script>

script标签有三个特殊的属性(固然,像id,class这样的属性它也是有的,HTML页面中几乎每一个元素均可以有class,id属性)java

    <script language="JavaScript">//language属性指明标签里包含的脚本所使用的语言
        //它有三个常见的取值JavaScript,JScript,VBScript
        //some script goes here
    </script>
    //对于JScript只有IE可以识别,其它浏览器会忽略这个标签其里面的内容
    //而对于VBScript,只有Windows上的IE可以识别,运行
    //然而language属性后来在XHTML中被type属性替代了
    <script type="text/javascript">//取值也变了,text/javascript,text/jscript,text/vbscript
        //some script goes here
    </script>

在Web浏览器中,咱们只会使用JavaScript,type属性设置为text/javascript.事实上,因为JavaScript十分流行,它几乎成了脚本的代名词,而在Web浏览器中,即便script标签不加任何属性,浏览器也会把它当成JavaScript数组

    <script>
        alert("Hello!");
    </script>
    //上面的那段代码将会按JavaScript的方式运行
    //即便有IE中,不加声明的script块也会当成JavaScript执行,而不是VBScript
    <script>
        msgbox "Hello!"
    </script>
    //上面的代码在IE中也会报错,IE也会将其当成JavaScript执行

之前在HTML页面中,一些标签常会加一些诸如onclick,onmouseover这样的属性,这是一种事件绑定(关于事件,咱们以后会详细讲解的,不要急).用于指定当HTML页面某个元素上发生了什么事的时候去执行的JavaScript代码(固然也能够是其它客户端脚本)浏览器

   <img src="../images/stack_heap.jpg" alt="内存堆栈" onclick="alert('你把我点疼了!')"  />

上面的代码将在HTML页面上显示一个图像,当你用鼠标点击一下时,会出现一个弹窗,显示'你把我点疼了!',onclick属性的值实际上是一段JavaScript代码;这就是事件,下面是其它一些简单的事件函数

onclick ,当鼠标点击一下时执行一次
onmouseover ,当鼠标放上去时执行一次
onmouseout ,当鼠标移出去时执行一次
onmousedown ,当鼠标按下时执行一次
onmouseup ,当鼠标在上面松开(弹起)时执行一次
onmousedblclick ,当鼠标双击时执行一次
onload ,当对象加载完成时执行一次

之前网上十分流行的称之为RollverImages(翻转图像)的效果其实就是组合onmouseover,onmouseout这样的事件和简单的JavaScript代码实现的测试

<img src="../images/stack_heap.jpg" alt="内存堆栈"
     onmouseover="this.src='../images/over.jpg'" 
     onmouseout="this.src='../images/out.jpg'"  />

你可能知道,onmouseover这类的属性中的字符串将会在事件发生时当成脚原本执行,但上面的那些代码看上去十分模糊this

     //为了便于查看,咱们将它们提取出来放在下面
     this.src='../images/over.jpg'
     this.src='../images/out.jpg'

分析上面的代码,咱们发现,这实际上是在给一个对象this的属性src赋值,但问题是咱们并无声明过一个叫this的对象!其实this对象是一个一直存在的一个对象,它不能被声明(this是关键字).这里,this就是指"这个",指这个标签!对于HTML中的元素,JavaScript会自动将其解析成一个对象.对于下面的img标签,会解析成下面一个对象:编码

     <img src="../images/stack_heap.jpg" alt="内存堆栈" onclick="alert('Hello!')"  />
     //注意,实际上this是不能手动赋值,也不能手动声明的,这里仅仅是演示
     this = {
         src:"../images/stack_heap.jpg",
         alt:"内存堆栈",
         onclick:"alert('Hello!')",
         tagName:"IMG"
     };
     //其实不止这些属性

上面,img标签会被解析成一个对象,具备src,alt等属性,src,alt属性是咱们写在HTML里面的,而tagName则是系统自动生成的,它表示标签的标签名!咱们能够用下面的代码进行测试:spa

 <img src="../images/stack_heap.jpg" alt="内存堆栈" onclick="alert(this.src);alert(this.tagName);"  />

天然,咱们也能够修改它的值,因而翻转图象的效果就这样成功了调试

对于这样的行内事件绑定,有一些注意点.

    <head>
         <script>
            function myFn() {
                alert("图象加载完成了!");
            }
        </script>
    </head>
    //.............若干若干代码以后
     <img src="../images/stack_heap.jpg" alt="内存堆栈" onload="myFn()"  />//当图象加载成功时执行一个函数

上面的代码执行是没问题的,然而将顺序翻转一下(script能够放在任何合法的地方)

    <img src="../images/stack_heap.jpg" alt="内存堆栈" onload="myFn()"  />//当图象加载成功时执行一个函数
    //.............若干若干代码以后
    <script>
        function myFn() {
            alert("图象加载完成了!");
        }
    </script>

HTML页面按照从上往下的顺序加载执行,当图象加载成功后,就去执行onload里的内容(一个自定义函数),但因为script标签在下面若干代码以后,因此还没被加载,所以会出错"myFn is undefined";这就是为何要将script标签放在head部分的缘由,由于head在body前面,当body里的元素加载完成时,head中的script确定加载完成了

但后来有了XHTML,有了"三层分离",W3C推出了DOM2,咱们须要使用另外一种方式绑定事件,获取HTML页面元素.再以上面的图像为例:

      <head>
         <script>
             var img = document.getElementById("myImg");//咱们经过ID来获取它
             //document.getElementById方法有个参数,一个字符串ID
             //而后,img就表示了那个图像标签对象
             img.onclick = myFn;
             /*咱们不是把JavaScript代码以字符串符值给它的onclick属性
             而是直接赋值给它一个函数名
             你也会说,为何不是img.onclick=myFn();
             由于如今是在JavaScript代码区域中
             加"()"表示执行这个函数,而后将这个函数的返回值赋给了img.onclick*/
            function myFn() {
                alert("图象加载完成了!");
            }
        </script>
    </head>
    //.......
    <img src="../images/stack_heap.jpg" id="myImg" alt="内存堆栈" />
    //咱们再也不加onclick属性了,而是给它起了个ID

但上面的代码执行了仍会出错,由于HTML从上往下加载,当加载到script时,body部分在下面,尚未被加载,而JavaScript在浏览加载到时就会自动执行.这时,页面上的ID为myImg的img还没被加载到,因此会出错;document.getElementById方法须要一个字符串形式的ID,而若是页面上没有ID为这个的元素,它则会返回null(空对象);而在下面一行,img.onclick这一句使用了一个空对象,因此会在这里出错!至于解决方法,其实只是将传统的行内事件绑定的script位置反过来放.将script放在因此HTML元素后面!

    <img src="../images/stack_heap.jpg" id="myImg" alt="内存堆栈" />
    //..................若干代码以后
    <script>
         var img = document.getElementById("myImg");
         //这个时候,因为script标签放置的位置处在img标签以后,加载到script时img标签确定加载完成了
         img.onclick = myFn;
        function myFn() {
            alert("图象加载完成了!");
        }
    </script>

但标准仍然推荐将script放在head部分!那么,这就要用到另外一个事件onload

    window.onload = initAll;//将全部代码写在一个函数之中,而后注册到window对象的onload事件属性上
    //window表示窗口对象,只要窗口打开,它就始终存在,当页面加载完成后,会触发window对象上的onload事件
    function initAll() {
        var img = document.getElementById("myImg");
         img.onclick = myFn;
        function myFn() {
            alert("图象加载完成了!");
        }
    }

这样,代码就不出错了,无论将脚本放在什么位置,initAll只有当页面加载完成后才会被执行

访问HTML页面:HTML DOM

HTML DOM将整个页面当成一个document对象,HTML里的标签都要经过document对象来访问.而文档中的每一个标签,又会转换成一个对象

<p class="demo" title="第一个段落:DOM树" id="p1">咱们用一个p标签来演示</p>

它又会被转换成下面这个对象

    //总该记得对象字面量语法吧
    {
        tagName:"p",
        className:"demo",
        title:"第一个段落:DOM树",
        id:"p1",
        innerHTML:"咱们用一个p标签来演示"
    }
    //你也许会奇怪,为何标签的class属性会变成对象的className属性而不是class.
    //class是JavaScript保留字!!!
    //tagName表示它的标签名,而innerHTML表示它里面的HTML代码

浏览将HTML标签转换成这样的对象后,在JavaScript中访问该标签的属性或里面的内容就简单多了,但问题是如何访问到这个对象!!

    //首先要给该标签加个ID,而后使用document.getElementById方法就可以访问到它了
    window.onload = initAll;//注意,要将所要访问HTML页面的代码都放在window的onload事件处理上!
    function initAll() {
        var p = document.getElementById("p1");
        alert(p.className);
        alert(p.tagName);
        alert(p.title);
        alert(p.id);
        alert(p.innerHTML);
    }

访问HTML页面就这么简单!获取一个元素以后,不但能够读取它的属性值,还能够设置它的属性值!

    window.onload = initAll;
    function initAll() {
        var p = document.getElementById("p1");
        p.title="JavaScript";
        p.className="load";//咱们能够更改它的样式
    }

利用这些,咱们已经能作出一些激动人心的事了!

    //一些CSS
    .over {
        color:red;
        background:blue;
        font-size:larger;
    }
    .out {
        color:black;
        background:white;
        font-size:smaller;
    }
    .click {
        color:yellow;
        background:yellow;
        font-size:12px;
    }

    //HTML代码
    <p id="p1" class="out">一大行文字,它们都是普通的文字!</p>

    //JavaScript代码
    window.onload = initAll;
    function initAll() {
        var p = document.getElementById("p1");
        p.onclick=clickFn;//这里的事件注册方式除了比行内注册方式少了括号,其它的是同样的
        p.onmouseover = overFn;
        p.onmouseout = outFn;
    }
    function clickFn() {
        this.className="click";//这里,this也是可用的
        //注意是className,而不是class
    }
    function overFn() {
        this.className="over";
    }
    function outFn() {
        this.className="out";
    }

固然,获取页面元素不止这一种方法.document.getElementsByTagName方法也能获取页面元素,顾名思意,它是经过HTML的标签来获取元素的,而不是ID. 由于一张HTML页面,一个ID名称是惟一的,而标签名则大多数是相同的,因此,getElementsByTagName方法只有一个参数,即一个字符串形式的标签名(tagName),而返回值则是一个相似数组的HTML元素列表

　　 window.onload = initAll;//仍然要写在window.onload事件处理函数中
    function initAll() {
        var pList = document.getElementsByTagName("P");
        //为何要用大写的P?其实用小写p也能够,不区分大小写,但因为对象的tagName总报告的是大写的,就....
        alert(pList.length);//与数组类似,length报告有多少个元素,页面上有多少个p标签,就报告多少
        alert(pList[0].innerHTML);//这样来访问第一个p元素
    }

另外,对于document.getElementsByTagName方法,还能够传一个"*"号做为参数,以获取页面的全部元素,相似于CSS里面的通配符

　　 window.onload = initAll;
    function initAll() {
    　　var allThings = document.body.getElementsByTagName("*");
    　　//可在任何DOM元素上调用getElementsByTagName方法,在body上调用此方法时,body外的标签不会获取到
    　　alert(allThings.length);//页面上有多少个标签,就报告多少(包含DOCTYPE)
    　　alert(allThings[3].innerHTML);//这样来访问第四个元素
    }

其它-javascript:伪协议

伪协议不一样于因特网上所真实存在的如http://,https://,ftp://,而是为关联应用程序而使用的.如:tencent://(关联QQ),data:(用base64编码来在浏览器端输出二进制文件),还有就是javascript:

咱们能够在浏览地址栏里输入"javascript:alert('JS!');",点转到后会发现,其实是把javascript:后面的代码当JavaScript来执行,并将结果值返回给当前页面

相似,咱们能够在a标签的href属性中使用javascript伪协议

　　 <a href="javascript:alert('JS!');"></a>
    //点击这面的连接,浏览器并不会跳转到任何页面,而是显示一个弹窗

但javascript:伪协议有个问题,它会将执行结果返回给固然的页面

　　 <a href="javascript:window.prompt('输入内容将替换当前页面!','');">A</a>

解决方法很简单

　　 <a href="javascript:window.prompt('输入内容将替换当前页面!','');undefined;">A</a>
    //将undefined加到最后

尽管javascript伪协议提供了必定的灵活性,但在页面中尽可能不要使用!而对于调试JavaScript,javascript伪协议则显得十分有用!

1. JavaScript快速入门
2. HTML入门（三）后台系统显示页面_框架标签
3. html页面入门
4. SSM 访问HTML页面
5. android访问html页面
6. HTML快速入门3
7. javascript快速入门26--XPath
8. JavaScript快速入门（六）——DOM
9. JavaScript简单快速入门
10. html页面标签转义解决
更多相关文章...
• SVG 在 HTML 页面 - SVG 教程
• ASP.NET Web Forms - HTML 页面 - ASP.NET 教程
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• YAML 入门教程