JavaScript

本页主题是JavaScript 在网页中的使用，关于JavaScript 语言本身，见 JavaScript 语言。

位置相关

获取窗口的高度/宽度，对火狐/Chrome有效

window.innerHeight
window.innerWidth

参见A tale of two viewports — part one。

元素的位置

offsetTop 和 offsetLeft 是相对于 offsetParent （如果支持的话）的位置。

元素的大小：

el.offsetWidth
el.offsetHeight

滚动条

当前高度（两者可能相差小于 1）

window.scrollY
document.documentElement.scrollTop

最大高度

document.documentElement.scrollHeight

将页面滚动条移动到结尾：

window.scrollTo(0, document.documentElement.scrollHeight - document.documentElement.clientHeight)

DOM

document 对象

关于 document.referrer :: oldj.net，不同浏览器的支持情况。

select 和 option

设置一个下拉菜单的值的方法：

selectEl.value = "corresponding value";
optionEl.selected = true;

在火狐（20）中，使用 el.setAttribute('selected', 'selected') 也可以设置下拉菜单的选中项。在 Google Chrome（28）中，此方法无效，并且会导致其 selected 属性变为 true 。

检测 document.title 的更新

const observer = new MutationObserver(function(_mutationList, _observer) {
  // do sth
})

observer.observe(
  document.querySelector('head > title'),
  { subtree: true, characterData: true, childList: true })

库

UI

• DHTMLX - JavaScript Ajax Library - Components for Rich Web UI - Complete Suite of Ajax Controls, File Uploader, Scheduler, Gantt
• Chosen - a JavaScript plugin for jQuery and Prototype - makes select boxes better
• Hide your header on scroll - Headroom.js

图形

• Raphaël，SVG 矢量库
• Cubism.js, a D3 plugin for visualizing time series.

跨浏览器相关

• Modernizr，HTML5支持检测。前端观察上的介绍
• Respond.js，让CSS媒体查询在IE下可用
• has.js，特性检测

测试

• Jasmine: BDD for your JavaScript

其它

• google-code-prettify，代码高亮工具
• zeroclipboard
• Highcharts - Interactive JavaScript charts for your webpage
• MathJax，支持TeX（使用HTML、CSS以及可能来源于网络的字体）和MathML的公式显示
• mass:werk termlib
• In.js，模块加载器。前端观察上的介绍
• RequireJS，另一个模块加载器, Javascript文件加载：LABjs和RequireJS - 阮一峰的网络日志
• yepnope.js，根据条件载入不同的脚本，CSS Tricks 上的介绍
• Datejs - An open-source JavaScript Date Library
• AnythingZoomer
• List.js - Add search, sort and flexibility to plain HTML lists with cross-browser native JavaScript by @javve
• jmpress.js | a jQuery plugin to build a website on the infinite canvas
• javascript-bcrypt, jsBCrypt is an implementation of BCrypt written in JavaScript.
• jsPDF, PDF 生成库
• Word-Color, Color your words! Similar words have Similar color.

参见

• Javascript代码片断
• Vim Modeline
• JSON
• XML
• How to Use Closure Linter - Closure Linter - Google Code，代码检查

外部链接

• 八月下沙: 获得滚动条位置的 Javascript 函数
• Detecting keystrokes
• JavaScript Madness: Keyboard Events
• Perfection kills » What’s wrong with extending the DOM
• JavaScript仿淘宝智能浮动-月光博客
• 用JavaScript读取和保存文件
• Why are there so many array-like objects in the DOM? 「because in Javascript 1.0, there were no arrays.」
• 关于 document.referrer | oldj's blog document.referrer 的有效性

文档

• JavaScript Reference - MDC Docs
• JavaScript and HTML DOM Reference - w3schools
• Eloquent JavaScript: A Modern Introduction to Programming
• JavaScript 二十年: JavaScript 语言的历史

工具

• JavaScript console - for debugging JavaScript and remote debugging mobile web apps
• Closure Compiler Service
• Online JavaScript beautifier
• JS NICE: Statistical renaming, Type inference and Deobfuscation