zoukankan      html  css  js  c++  java
  • 浏览器上的javascript

       在谈及javascript的基本语法的时候我们看到的只是我们拿javascript编写脚本时的语法,那么现在我们来看看javascript在实际操作时的一些应用,这里不会谈到javascript的特效示例,只会谈到基本和核心。

       在html中嵌入javascript脚本,需要使用<script></script标签>,标签的放置位置在<head>标签内,这样在显示页面主体后代码就能完全被装载进浏览器以便使用,在以前,我们需要加上language="javascript"属性,如果省略了language属性,浏览器会使用最新版本的javascript。在XHTML之后,language属性不在使用,而改用type属性,后面跟上mime类型,就是text/javascript,完整的就是<script type="text/javascript">...</script>这是在内部嵌入html文件嵌入javascript的方法,但是如果要嵌入外部文件,只需要加上src属性,比如src="JS文件路径"。如果在一个<script>标签中既有javascript代码又有文件链接,则文件链接优先。外部链接的JS文件没有太多约束,文件的扩展名为.js。文件里面可以写函数,比如function.

       一般来说,更提倡使用外部文件

       1,外部文件更利于维护

       2,如果多个页面都使用一个外部文件,则外部文件只需要缓存一次,性能更佳

       3,外部文件更能隐藏JS代码,不容易被查看

       还有一个问题,html是由上往下解析,如果在使用一个函数之前未定义这个函数,或者在使用之后定义,则会引发错误。

      <noscript></noscript>标签用来表示当浏览器不支持javascript时应显示的内容,标签内可以是任何html代码,script标签除外。

      我们还有个问题要注意,比如我们编写脚本的时候要使用<或者>符号来比较两个数,但是如果我们这样用了就会出问题,因为<跟>会被浏览器解释为标签。那怎么解决呢

      1,外部文件

      2,CDATA段,就是XML的处理方式,CDATA表示不应被解析为标签的文本。代码如下

    <script type="text/javascript">   

    <![CDATA[       

     function Cdata() {         

        var a = 1, b = 2;          

       if (a < b) {                

     alert("a小于b");           

      } else {    

      alert("a大于b");         

        }     

        }    ]] </script>

     我在IE9里测试可以不用加,实际上加了出错,因为我只有IE9,所以在别的浏览器里读者可以自己尝试,IE6或者别的浏览器可能会出问题。

    BOM即浏览器,BOM由一系列相关的对象组成,下面有一幅图,展示了BOM的体系结构

      

     Window对象是整个BOM的核心

     Window对象表示整个浏览器窗口,但不必表示里面包含的内容。如果页面使用框架,则每个框架都它自己的window对象表示。存放在frames集合中,可以用索引寻找他们。比如frames[0],或者使用框架名称frames["topframe"].

      我们在这里有几种访问方法

      1,window.frames[0]

      2,top.frames[0]  //top表示最外层框架,也就是window

       3,frames[0]  //由于 window是整个BOM的核心,所以在调用window的任何对象,属性,函数时,window都可以省略,这是一种特权。

    现在开始解释window的一些对象和属性。

     1, parent。顾名思义,parent就是框架的承载 window。

     2,self  指向本window

     3,moveBy(dx,dy)  //把浏览器窗口相对当前位置水平移动dx个像素,垂直移动dy个像素,dx为负数,窗口向左移动,dy为负数,窗口向上移动

      4,moveTo(x,y)  //把浏览器的左上角移动到屏幕的(x,y)处,可以为负数,这样窗口的某些部分会不可见

     5,resizeBy(dw,dh)  //相对浏览器的当前窗口大小,宽度调整dx个像素,高度调整dy个像素。为负数则减小对象的dx,dy

     6,resiezeTo(x,y)  //把窗口调整为x,高度调整为y。不能为负数

     7,window.screenLeft和window.screenTop来判断窗口的位置。(IE)

     8,document.body.offsetWidth和document.body.offsetHeight用来获取窗口的可视化大小(IE)

     Mozilla提供的方法,Window.screenX和Window.screenY用来判断窗口的位置,window.innerWidth和window.innerHeight判断可视化的大小,window,outerWidth和 window.outerHeight判断窗口的自身的大小。

    opera同Mozilla一样。

    需要着重介绍的一个方法是window.open()方法,这个方法打开一个新窗口,它包含4个参数

    window.open("窗口的url","窗口名称","特性字符串","是否利用新页替换当前"),下面来解释每一个参数

    参数1,即要打开的新窗口的url

    参数2,如果参数2为一个框架的名称,则窗口会载入到框架中,如果框架名无效,则打开新的窗口

    参数3,新打开的窗口的一系列属性

    left //新窗口的左坐标,不能为负

    top //新窗口的上坐标,不能为负

    height  // 新窗口高度

    width  // 新窗口宽度

    resizeable  //是否能调整大小

    scrollable  //是否允许滚动

    toolbar  //是否显示工具栏

    statas  //是否显示状态栏

    lacation  //判断新窗口是否显示地址栏

    参数4,是否覆盖打开的页面。

    示例代码:

    window.open("http://www.baidu.com","Edrick","left=0,top=0,height=300,width=300,resizeable=no,scrollable=no,toolbar=no,status=no,location=no",false);

    实际上,window.open()方法返回对打开的window对象,我们可以操作这个返回的window对象,比如

    var newWindow=window.open("http://www.baidu.com","Edrick","left=0,top=0,height=300,width=300,resizeable=no,scrollable=no,toolbar=no,status=no,location=no",false);
    newWindow.moveTo(300,300);
    newWindow.resizeTo(300,300);
    newWindow.close();
    

    window.close()是关闭本窗口

    window.opener属性表示的是对打开它的窗口的引用,一般新窗口的最外层window才有opener属性。

    系统对话框

    系统对话框就是向用户弹出消息,一共有3种

    alert()是最简单的也是最基本的,显示指定文本。alert("hello world");

    confirm()指示用户是否完成指定的操作,对话框有两个button,一个是OK,一个是cancel

     if (confirm("are you sure?")) {
                alert("you check the ok button ");
            } else {
                alert("you check the cancel button");
            }
    

    最后一个对话框是prompt(),提示用户输入信息,然户得到信息。

        function promptWindow() {
            var result = prompt("What's you name?", "");
            alert(typeof result);
            if (result != null) {
                alert("welcome:"+result);
            }
        }
    

     result的类型为string.以上的3种对话框都属于window对象的方法,它们都是模态对话框,就是用户如果不操作对话框,就不能操作window.以控制用户的行为。

    状态栏

    状态栏是底部边界内的区域,用于向用户显示信息,状态栏告诉用户何时载入页面,何时完成页面的载入

    window.status //使状态栏的文本暂时改变

    window.defaultStatus  //一直改变状态栏的文本

        function FDefaultStatus() {
            window.defaultStatus = "www.Edrick.com";
        }
        function FStatus() {
            window.status = "goes to www.baidu.com";
        }
    

    下面介绍的是javascript里面比较有用的两个函数,一个是时间暂停,就是在指定的时间内暂停代码

    setTimeout(),它包含两个参数,一个是要执行的脚本,一个是暂停的时间

        function FSetTimeOut() {
            setTimeout("alert('hello')", 2000);
            setTimeout(function () { alert("hello"); }, 3000)
            setTimeout(SayHello,4000);
        }
    

    以上3种写法都行,但是还是比较倾向于最后一种写法

    setTimeout会返回一个数字暂停ID,我们可以利用这个ID做一些操作,比如取消暂停  

        function FSetTimeOut() {
            var numberID = setTimeout(SayHello, 4000);
            clearTimeout(numberID);
        }
    

     setInterval()跟setTimeout()执行的功能差不多,只不过setInterval()是重复的执行一段代码,参数跟setTimeout()一样,它也会创建时间ID,用于我们操作

     

        function FSetInterval() {
            setInterval(SayHello,2000);
        }
    

    我们也可以取消

        function FSetInterval() {
            var numberID = setInterval(SayHello, 2000);
            clearInterval(numberID);
        }
    

    历史

    历史就是浏览器窗口的历史,我们可以访问上一页,下一页

    window.history.go(-1)表示上一页

    window.history.go(1)表示下一页

    也可以使用history.back()上一页,和history.forward()下一页。

    history.length表示历史中的页数

    document对象

    document对象既属于与BOM又属于DOM。在BOM中,document由一系列的集合构成,这些集合可以访问文档的各个部分,并提供页面的自身信息

    document对象的一些通用属性(由于BOM没有指导实现的标准,各个浏览器都不一样,所以这里说都是最通用的) 

    alinkColor  //激活的链接颜色

    bgColor   //页面的背景色

    fgColor  //页面的文本颜色

    lastModified  //最后修改页面的日期,是字符串

    linkColor  //链接的颜色

    referrer  //浏览器历史中后退一个页面的url

    title   //<title></title>标签中显示的文本

    url  //当前载入页面的url

    vlinkColor  //访问过的页面的颜色

    document对象的集合

    anchors   //页面中所有锚的集合

    applets //页面中所有applet的集合

    embeds  //页面中所有嵌入式对象的集合

    forms  //页面中所有表单的集合

    images  //页面中所有图像的集合

    links  //页面中所有链接的集合

    可以只用索引或名称访问集合,如document.Images["image_name"].src

    document对象还有几个方法,最常用的方法之一是write()或兄弟方法writeln()

    他们都是接受一个参数,唯一的区别是writeln()会在末尾加一个换行符

    要插入内容属性必须在完全载入页面前调用write()和writeln()方法,如果任何一个方法是在页面后调用的,它讲抹去页面的内容,显示指定的内容。

    与 write()和writeln()紧密相关的方法是open()和close(),open()用于打开文档用于编写内容,close()关闭打开的文档

    Location对象,BOM中最有用的一个对象

    hash()   //如果该url包含#,则该方法返回#之后的内容

    host  // 服务器的名字

    hostname  //等于host,但是通常会省略www

    href  //当前载入页面的完整url

    pathname  //url主机名后的部分

    port //url的端口

    protocol  //url使用的协议

    search  //执行get请求的url ?号后的部分,查询字符串

    assign()  //导航到新页面,跟href一样,他们都会在历史中记录

    replace()  //导航到新页,但是于href跟assign()不同,它不会在历史中记录

    reload() //重载当前页面,有一个参数,true表示从服务器重新载入,false表示从缓存载入

    toString()  //显示当前的url

    Screen对象  

    availHeight  //窗口可以使用的屏幕高度(像素计)

    availWidth  //窗口可以使用的屏幕宽度(像素计)

    Width  //屏幕的宽度

    Height  //屏幕的高度

    colorDepth  //用户表示颜色的位数,大多数采用32位

    如果要确定新窗口的大小,可以使用availHeight和availWidth

    window.moveTo(0,0);

    window.resize(screen.availWidth,screen.availHeight);

    浏览器中的javascript差不多就介绍完了,下一篇介绍 javascript中的事件

  • 相关阅读:
    使用 JavaScript 将 Silverlight 添加到网页
    网络和通信 Silverlight 中的 HTTP 通信和安全
    在Silverlight中访问Web服务 为 Silverlight 客户端生成服务
    图形三维效果
    关键帧动画
    ajax.dll 与 ajaxpro.dll的用法[摘自网络]
    FlashObject.js去虚框、传参数、获取URL参数
    WEB标准之CSS: 打造自己的重置样式reset.css[转]
    jquery.cookie.js[保存]
    FCKeditor在.net中详细配置[摘自网络]
  • 原文地址:https://www.cnblogs.com/ColeLiu/p/2226474.html
Copyright © 2011-2022 走看看