客户端JavaScript:客户端就是Web浏览器;

一、 前奏:

Web文档(document):一些呈现静态信息的页面,虽然有的页面是会动的,但信息本身还是静态!

Web应用:可以动态载入信息,相比与文档的文本化,应用看起来更加图形化;

客户端JavaScript的三个重要的对象:Window Document和Element;Window是全局对象,它的属性和方法是全局变量和全局函数,其中里面的属性location指向Location对象,Location对象指定当前窗口的URL;属性document指向对象Document对象,通过document.getElementById('id')能获取到Element对象;

客户端Js被嵌入进HTML文档里面出来有 内联(直接在标签里面写),src引入,直接在html属性里面写,还有一种是,放在URL里面,以javascript:开头,使用的是javascript:协议。

要测试一小段js代码,可以直接在浏览器地址栏输入javascript:js代码;   <a href="javascript:new Date().toLocaleTimeString()">呵呵呵呵</a> 这句话可以替换当前页面文档内容;

客户端js的时间线:

1、Web浏览器创建Document对象,并开始解析Web页面,解析HTML元素和文本内容后添加Element对象和Text节点到文档中,此时document的readystate属性的值是loading;

2、当HTML解析遇到没有async和defer属性的<script>元素时,添加这些元素到文档,然后同步执行脚本,在脚本下载和执行时,解析器会暂停。

3、当解析器遇到设置了async属性的<script>元素是,它开始下载脚本文件,并继续解析文档;解析器不会暂停,脚本下载完会尽快执行;

4、当文档完成解析,document.readystate的值变为interactive;

5、所有有defer属性的脚本,会按照他们在文档里的出现顺序执行;

6、浏览器在Document对象上触发DOMContentLoaded事件。

7、文档解析完成,等待其他内容载入(图片等),当所有内容完成载入且脚本完成执行,document.readystate属性改变为complete;Web浏览器触发Window对象上的load事件;

8、调用异步事件,响应用户操作;

获取浏览器类型和版本的方法:-

    客户端:使用Navigator对象的属性;Window对象的navigator属性引用的是包含浏览器厂商和版本信息的Navigator对象,其中的一些属性如下:

      appName:Wen浏览器的全称,在IE中,值为Microsoft Internet Explorer  其他浏览器中:Netscape ; 这个可以用来简单判断浏览器是否为IE;、

appversion: 浏览器版本,可以表示出是第几代浏览器。对于判断浏览器类型没有帮助;

       userAgent: 浏览器在它的User-Agent Http头部中发送的字符串,这个属性包含大部分信息,通常用此属性来判断浏览器的类型和版本;简单判断方法如下:

var s = navigator.userAgent.toLowerCase();

          判断s字符中的信息来获取浏览器信息: //webkit : Safari或Chrome ;        opera: Opera  ;   mozilla: FireFox或者其他基于gecko内核的浏览器; mise: IE;

      onLine:这个属性如果存在就表示浏览器当前是否连接到网络;

      geolocation: Geolocation对象定义用于确定用户地理位置信息的接口;

JavaEnabled() :当浏览器可以运行Java小程序时返回ture;

cookieEnable(): 如果浏览器可以保存永久的cookie时,放回true; 

服务端可以根据User_Agent头部信息获取;

客户端js框架:JQuery :几乎是基本的框架了; Prototype:可用于动画和各种特效; Dojo :UI组件多; YUI:yahoo的东西,与dojo差不多; Closure与GWT:都是Google的;

二、Window:

     1、 弹出窗口测试代码:javascript:var name=prompt('your name?');if(confirm(name))alert(name);

2、客户端javascript有两个重要的对象,客户端全局对象处于作用域链的顶端,并且是全局变量和函数定义的地方。事实上,没有办法引用到真正的客户端全局对象,全局对象会在窗体载入新内容是被替换,替换的是全局对象的代理对象,HTML5称其为WindowProxy,其与真正的全局Window对象几乎没有区别;客户端的所有引用都是代理对象,即使是this;

JavaScript的理解记录(4)的更多相关文章

  1. JavaScript的理解记录(6)

    ---接上篇: 四.CSS相关: 1.CSS不支持注释// 支持注释/* */ 2. 几种浏览器厂商前缀: Firefox : -moz-;    Chrome:-webkit- ;      IE: ...

  2. JavaScript的理解记录(5)

    ---接上篇: 三.DOM解析: 1.Document Object Model(DOM):是表示和操作HTML和XML文档内容的基础API;其中几个重要的类有:Document和Element,Te ...

  3. JavaScript的理解记录(3)

    ---接上篇 一.函数:    1. 函数定义后直接执行:var f = (function(x){ return x*10}(10)); 2. 函数的调用有四种方式: 作为函数:作为方法:作为构造函 ...

  4. JavaScript的理解记录(2)

    一.表达式与运算符: 1.对于属性访问表达式: var arr = {first:"hh","second":"gg",third:null ...

  5. JavaScript的理解记录(1)

    1.JavaScript的数据类型分为两类:原始类型和对象类型: 原始类型包括:数字,字符串,布尔值,null和undefined; (都是不可变类型,值不可以修改) 对象类型:普通对象和函数: 函数 ...

  6. Javascript中理解发布--订阅模式

    Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 如何实现发布--订阅模式? 发布---订阅模式的代码封装 如何取消订阅事件? 全局--发布订阅对象代码封装 理解模块间通信 回到 ...

  7. 第一百二十九节,JavaScript,理解JavaScript库

    JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...

  8. 《javascript个人理解,个人整理。》

    万事开头难. 本人做前端工程师,已几年,没有特别大的,已文字方式去做总结. 前段时间,早已经想好,但是迟迟没有去下笔!好在现在陆陆续续的写下去. 我知道这是一个很大的工程,但是我还是想做下去,不为别的 ...

  9. 【转】Javascript中理解发布--订阅模式

    Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时 ...

随机推荐

  1. HBase应用开发回顾与总结系列之一:概述HBase设计规范

      概述 笔者本人接触研究HBase也有半年之久了,虽说不上深入和系统,但至少算是比较沉迷.作为部门里大数据技术的探路者,笔者还要承担起技术传播的职责,所以在摸索研究的过程中总是不断地进行总结和测试, ...

  2. iOS实现自定义进度条、拖动条效果,可多个

    项目用到的一个场景,需要设置一个周期内不同时间时的数值 比如要设置10秒内,每一秒的大小,通过10个拖动条来设置实现,只需拖动到想要的数值即可, 这里周期10秒和每个拖动条的最大值都是可以自己定义的. ...

  3. Linux磁盘管理之磁盘结构、概念、原理01

    一.磁盘的分类 磁盘主要有IDE.SATA.SCSI.IDE是比较老的硬盘,数据速度比较慢:SATA是现在用的比较多的,台式机.笔记本大多都用的SATA硬盘:SCSI硬盘速度最快,但是价格相对较高. ...

  4. JavaScript中产生标识符方式的演变

    本文记录下JS中产生标示符方式的演变,从ES5到ES6,ES5及其之前是一种方式,只包含两种声明(var/function),ES6则增加了一些产生标识符的关键字,如 let.const.class. ...

  5. 关于C语言中的位域

    有些信息在存储时,并不需要占用一个完整的字节, 而只需占几个或一个二进制位.例如在存放一个开关量时,只有0和1 两种状态,用一位二进位即可.为了节省存储空间,并使处理简便,C语言提供了一种数据结构,称 ...

  6. [To be translated] Nova:libvirt image 的生命周期

    翻译自:http://www.pixelbeat.org/docs/openstack_libvirt_images/ The main stages of a Virtual Machine dis ...

  7. 【HTML】嵌入图像

    img元素允许我们在HTML文档里嵌入图像. 要嵌入一张图像需要使用src和alt属性,代码如下: <img src="../img/example/img-map.jpg" ...

  8. Vijos1680距离/openjudge2988计算字符串的距离[DP]

    描述 设有字符串X,我们称在X的头尾及中间插入任意多个空格后构成的新字符串为X的扩展串,如字符串X为”abcbcd”,则字符串“abcb_c_”,“_a_bcbcd_”和“abcb_c_”都是X的扩展 ...

  9. [No000057]一个人默默背单词,小心被传染哦

    不日凛冬将至,全国各地,已有多名少侠因季节变化,出现了不同程度的四肢不勤.bd不分的症状.具体表现为—— 包大人在此高能预警:不想背单词,有可能你已经被传染了. 好好的,怎么突然不想背单词了 哈佛医学 ...

  10. [No000023]为何没有更多人从事程序员的工作?程序员常有,优秀程序员不常有!

    成为优秀的程序员是极其困难的,并且这个过程不可能一蹴而就. 我们不可能期待去种一些树,然后一夜间收获有着2000年树龄的红杉树,无论其需求有多大. 人格特点 一个人首先得是自学者来学习编程.仅仅是超过 ...