随笔分类 - Web开发
摘要：博客园的皮肤模板虽然有100多套，但我需要的作品却没几套，从布局上看，大多是固定布局，有的使用表格布局，有的将侧边栏在HTML页面的代码顺序放在主内容的前面。这些布局方式不利于页面缩放和不同屏幕尺寸与分辨率的设备浏览，尤其是在当今网页浏览设备屏幕尺寸与分辨率多样化的时代，流体与响应式布局才是最佳的选择。从配色上看，博客园有3款还不错的暗色皮肤，但不符合我布局的要求。 我想要自己的博客皮肤满足以下要求： 模版选择：不能使用表格布局，侧边栏在HTML页面的代码顺序放在主内容 的后面，页面结构和样式简洁。有利于自定义CSS样式。 配色：主背景配色为暗色，文本等颜色为亮色。 布局：...
阅读全文
摘要：1.Objuect 类型 Object 类型是所有对象的基类型，可以用 new 运算符产生一个 Object 类型。开发者可以通过产生 Object 类型的实例并向其动态添加属性和方法来产生自己需要的对象。如： var o = new Object(); ECMAScript 要求仅当构造函数需要参数时才需要括号，如果没有参数，括号可以省略（不推荐这种做法）。如： var o = new Object; //legal, but not recommended 每一个 Object 类型的实例都有如下的属性和方法： constructor-...
阅读全文
摘要：今天查看了百度统计流量研究院发布的最近中国国内浏览器市场和操作系统份额，不禁感觉很是吃惊！对苦逼的国内Web前端开发人员来说尤其是个不好的消息！请看图：（具体请参见：http://tongji.baidu.com/data/browser）图1：中国国内PC浏览器最近三个月市场份额图2：中国国内PC操作系统最近三个月市场份额 百度的这份统计，感觉还是很靠谱的，百度更懂中国，你不得不承认！ 对于浏览器的市场份额，与我想象的差不多。但最不可思议的是，尽管微软宣布Windows XP 操作系统将会在 2014年4月8日完全停止提供补丁和安全更新，但操作系统份额中，WinXP 竟然是那么地坚挺，...
阅读全文
摘要：本文为书籍《Professional JavaScript for Web Developers, 3rd Edition》英文版第 7 章：“Function Expressions” 个人学习总结，主要介绍 JavaScript 中的闭包、局部变量(局部作用域)和私有变量等内容。一.闭包 JavaScript中的闭包，是指一个函数可以访问另一个函数作用域中的变量。这通常通过将一个函数定义在另一个函数内部来完成。如： function createComparisonFunction(propertyName) { return function ...
阅读全文
摘要：本文为书籍《Professional JavaScript for Web Developers, 3rd Edition》英文版第 6 章：“Object-Oriented Programming” 个人学习总结，主要介绍 JavaScript 中自定义类型的产生和类型继承实现的各种模式及其优缺点。一.类和对象的产生 本节介绍在 10 种在 JavaScript 中产生对象的模式及其优缺点。1.Object构造函数模式 var person = new Object(); person.name = "Nicholas"; person.age = 2...
阅读全文
摘要：本文为书籍《Professional JavaScript for Web Developers, 3rd Edition》英文版第 5 章：Reference Types学习笔记，详细介绍对象、数组、日期时间、函数、字符串等基本数据类型及其方法、属性和主要浏览器的支持情况。1.Object 类型 (1)产生对象的几种方式 第一种方式： var person = new Object(); person.name = "Nicholas"; person.age = 29; 第二种方式： var person = {}; // same as new Object...
阅读全文
摘要：1.基本类型与引用类型 (1)JavaScript中的基本类型都是值类型，包括字符串类型也是值类型。 (2)动态属性 引用类型的值(对象)可以动态地添加、修改或删除属性和方法，但基本类型的值却不可以，尽管不会报错。 // 对象动态添加属性 var person = new Object(); person.name = "Nicholas"; // 动态添加属性 name alert(person.name); // Nicholas (3)复制变量的值 如果将一个变量 variable1 的值赋给另一个变量 variable2，如果两者都是基本类型，则其中一个变量值的改变
阅读全文
摘要：1.严格模式（Strict Mode） ECMAScript 5 引入了严格模式（Strict Mode）的概念，对于JavaScript 来说是一种更加严格的解析和执行模式。 要为整个脚本使用严格模式，在脚本的顶部加入下面的语句： "use strict"; 要让一个函数使用严格模式，方法如下： function doSomething(){ "use strict"; //function body }2.变量的声明与作用域 (1)在一个代码块内部，使用 var 关键字声明的变量为局部变量，作用域仅在直接包含该代码块的函数或对象的内部；不使用 var
阅读全文
摘要：1.</script>标签 在一对<script>和</script>标签内部不可以再出现</script>，否则会引发错误。要解决此问题，可以使用转义字符。例如，下面的代码会出现错误: <script type=”text/javascript”> function sayScript(){ alert(“</script>”); } </script> 但是，下面的代码不会出现错误： <script type=”text/javascript”> function sayScript(){ al
阅读全文
摘要：1.概述 WebSocket是一种比HTTP协议更加高效的网络传输协议，它有效地减少了HTTP头中的冗余信息和网络延时，能够提供客户端-服务器和服务器-客户端的双通道实时通信，同时具有很好的安全机制。基于WebSocket的URL通常以WS://...开头，类似于HTTPS，安全的WebSocket连接URL通常以WSS://...开头。要实现WebSocket通信，需要客户端浏览器支持WebSocket，服务器端也必须支持WebSocket。 WebSocket还具有广播功能，当有多个监听者连接时，广播服务器发送的消息都可被接收到。2.浏览器支持检测 function loadD...
阅读全文
摘要：1.概述 HTML5 Web Worker可以使Javascript程序在后台单线程执行大量耗时的计算任务。Web Worker在执行时不能直接访问DOM。Web Worker也会消耗CPU和系统资源。Web Worker与页面间的通信可以通过Web Worker的方法postMessage和message事件。2.浏览器支持检测 function loadDemo() { if (typeof(Worker) !== "undefined") { document.getElementById("support").innerHTML ...
阅读全文
摘要：1.概述 Web Storage是一种在客户端存储数据的方法。比起Cookie，Web Storage更加安全，能够存储更多对象，而不仅仅是字符串；Web Storage能够存储更大的数据，而不是像只能够存储几KB数据的Cookie；Web Storage还可以减少数据在客户端与服务器间的转换，减少带宽。 Web Storage的核心是是window对象的两个子对象sessionStorage和localStorage。数据以键值对的形式通过这两个对象存储，这两个对象都实现了storage接口，拥有名称相同的属性和方法，用法也相同。不同之处是二者的存储时间和共享范围。 sessio...
阅读全文
摘要：1.浏览器支持性检测 if(window.applicationCache) { // this browser supports offline applications } 2.在线、离线的状态检测和事件 // When the page loads, set the status to online or offline function loadDemo() { if (navigator.onLine) { log("Online"); } else { log("Offline"); ...
阅读全文
摘要：1.概述 HTML5 Form提供了一些新的HTML表单元素，这些表单通过input元素的type属性指定。若浏览器不支持这些新的表单元素，则它们通常会显示为文本框。 新的表单元素也具有一些新的属性和方法。它们可以通过HTML元素的属性进行设置，也可通过编程访问，但两种访问方式的属性和方法的名称在大小写上略有不同。 •placeholder：表单提示文本。 •autocomplete：表单自动完成，这个属性在很多浏览器中早已实现。值可以是on，off或uspecified。 •autofocus：自动获得焦点。 •min和max：指定具有数值值的表单的最小值和最大值。 ...
阅读全文
摘要：1.navigator.geolocation HTML5中的地理位置相关的主要对象是navigator.geolocation，它有一些方法和属性，检测浏览器对HTML5地理位置的支持性也就是检测该对象。2.getCurrentPosition、watchPosition和clearWatch方法 这是geolocation的两个核心方法。第一个方法只获取地理位置信息，后一个方法以一定时间间隔获取地理位置信息，它们的参数相同，但返回值不同，后者返回一个watchId，将watchId作为参数传递给clearWatch方法可以终止对地理位置信息的请求。 getCurrentPosi...
阅读全文
摘要：1.防止被iframe if (window != window.top) { window.top.location = location; } 2.允许被信任的网站iframe var framebustTimer; var timeout = 3000; // 3 second framebust timeout if (window != window.top) { framebustTimer = setTimeout( function() { window.top.location = location; }, ti...
阅读全文
摘要：1.概述 XMLHttpRequest Level 2是对XMLHttpRequest增强，具有cross-origin支持性。2.浏览器支持性检测 if (typeof xhr.withCredentials === undefined) { document.getElementById("support").innerHTML = "Your browser <strong>doesnot</strong> support cross-origin XMLHttpRequest"; } ...
阅读全文
摘要：1.概述 HTML5 Cross Document Messaging是为了便于在不同源地址的页面间或是页面、浏览器的窗口、tab、iframe等间传递数据和信息。其核心是window.postMessage(data, origin)方法和message事件。 postMessage的第一个参数是要传递的数据，第二个参数是数据的来源（例如一个URL）。message事件处理程序通常会有一个参数e，e有data和origin两个属性。 捕获messge事件的方法如下： window.addEventListener(“message”, messageHandler, true...
阅读全文
摘要：1.通用函数 load(): Loads the media file and prepares it for playback. Normally does not need to be called unless the element itself is dynamically created. Useful for loading in advance of actual playback. play(): Loads (if necessary) and plays the media file. Plays fromthe ...
阅读全文
摘要：1.只读属性 duration: The duration of the full media clip, in seconds. If the full duration is not known, NaN is returned. paused: Returns true if the media clip is currently paused. Defaults to true if the clip has not started playing. ended: Returns true if the media clip ha...
阅读全文
浙公网安备 33010602011771号