JavaScript的理解记录(4)
客户端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)的更多相关文章
- JavaScript的理解记录(6)
---接上篇: 四.CSS相关: 1.CSS不支持注释// 支持注释/* */ 2. 几种浏览器厂商前缀: Firefox : -moz-; Chrome:-webkit- ; IE: ...
- JavaScript的理解记录(5)
---接上篇: 三.DOM解析: 1.Document Object Model(DOM):是表示和操作HTML和XML文档内容的基础API;其中几个重要的类有:Document和Element,Te ...
- JavaScript的理解记录(3)
---接上篇 一.函数: 1. 函数定义后直接执行:var f = (function(x){ return x*10}(10)); 2. 函数的调用有四种方式: 作为函数:作为方法:作为构造函 ...
- JavaScript的理解记录(2)
一.表达式与运算符: 1.对于属性访问表达式: var arr = {first:"hh","second":"gg",third:null ...
- JavaScript的理解记录(1)
1.JavaScript的数据类型分为两类:原始类型和对象类型: 原始类型包括:数字,字符串,布尔值,null和undefined; (都是不可变类型,值不可以修改) 对象类型:普通对象和函数: 函数 ...
- Javascript中理解发布--订阅模式
Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 如何实现发布--订阅模式? 发布---订阅模式的代码封装 如何取消订阅事件? 全局--发布订阅对象代码封装 理解模块间通信 回到 ...
- 第一百二十九节,JavaScript,理解JavaScript库
JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...
- 《javascript个人理解,个人整理。》
万事开头难. 本人做前端工程师,已几年,没有特别大的,已文字方式去做总结. 前段时间,早已经想好,但是迟迟没有去下笔!好在现在陆陆续续的写下去. 我知道这是一个很大的工程,但是我还是想做下去,不为别的 ...
- 【转】Javascript中理解发布--订阅模式
Javascript中理解发布--订阅模式 阅读目录 发布订阅模式介绍 发布---订阅模式又叫观察者模式,它定义了对象间的一种一对多的关系,让多个观察者对象同时监听某一个主题对象,当一个对象发生改变时 ...
随机推荐
- 省级联动(使用ajax实现)
在博客园学习了很多实用的东西,现在该慢慢开始自己写写博客文章, 由于本人水平有限,刚走出校园的小菜鸟,另外,文章在表述和代码方面如有不妥之处,欢迎批评指正.留下你 的脚印,欢迎评论! 有什么问题,可以 ...
- Hadoop环境常用命令
用户可以通过dfsadmin -safemode value 来操作安全模式,参数value的说明如下: enter - 进入安全模式 leave - 强制NameNode离开安全模式 get - ...
- jQuery 3.0 的变化
时隔 3 个月,jQuery 团队终于发布了 3.0 Alpha 版本.有两个版本 jQuery compat 3.0 和 jQuery 3.0. jQuery compat 3.0 对应之前的 1. ...
- Qt回忆录之配置开发环境
光阴荏苒,用Qt开发已经一年多了.在Windows上开发GUI,最常用的莫过于MFC,WinForm,WPF以及Qt.MFC和Qt是基于C++,而WinForm和WPF一般是基于C#,当然在PC上基于 ...
- 上一周,小白的我试着搭建了两个个人博客:在github和openshift上
上一周,突发奇想,想搭建个自己的博客. 由于是突发奇想,自然想先找免费的试试手.仔细搜索下,选定了目标Openshift和Github. Openshift 安装WordPress OpenShift ...
- hdu-5127------hdu5137
hdu-5127 思路: 本来正解好像是动态凸包,暴力10000+ms可以搞过去; hdu-5128 思路: 枚举两个长方形的对角线,然后判断是否不相交,更新答案就好; hdu-5130 思路: 将题 ...
- 微软极品工具箱-Sysinternals Suite
工具包由来 Sysinternals Suite是微软发布的一套非常强大的免费工具程序集,一共包括74个windows工具.Sysinternals是Winternals公司提供的免费工具,Winte ...
- 转:设置Eclipse中的tab键为4个空格的完整方法
from: https://my.oschina.net/xunxun10/blog/110074 设置Eclipse中的tab键为4个空格的完整方法 收藏 XunXun10 发表于 4年前 阅读 ...
- jquery noConflict详解
noConflict是防止其他库也用了$作为全局变量而引起的冲突,我们看看jquery是怎么做的 首先jquery在代码的开始部分定义了2个私有变量: _jQuery = window.jQuery ...
- AIO 简介
from:http://blog.chinaunix.net/uid-11572501-id-2868654.html Linux的I/O机制经历了一下几个阶段的演进: 1. 同步阻塞I/O: 用 ...