JavaScript

出自ProgWiki

JavaScript

• 參照：『維基百科～JavaScript』
• 參照：『維基百科～JavaScript_syntax』

目錄 1 技術文件 1.1 基本 1.2 Strict mode 1.3 OOP 1.4 相關 1.5 跨遊覽器的解決方式 1.6 其他 2 引用方法 2.1 script區塊定義型 2.2 外部Src型 2.3 Include File型 2.4 動態Src型 3 Tools 3.1 JavaScript壓縮工具 4 OpenSource 4.1 自定函式 4.2 Auto-complete 4.3 AJAX 4.4 Calendar 4.5 Checkbox & Radio 4.6 Clock 4.7 Data 4.8 DOM 4.9 Flash Player 4.10 Grid 4.11 HTML 4.12 HTML Editor 4.13 Images 4.14 Tables 4.15 Menu 4.16 Slideshow Viewer 4.17 Tabs 4.18 TreeView 4.19 Web-UI 4.20 其它 5 FAQ 5.1 IE6防止記憶体洩漏的小技巧 5.2 URL編碼 5.3 DHTML控制項取值 5.4 09 is not a legal ECMA-262 octal constant 5.5 document.appendChild無法正常插入Html物件 5.6 如何從Javascript的Array中篩選出唯一的元素? 5.7 抑制遊覽器的上一頁功能 5.8 Call外部的DLL來使用 5.9 JavaScript多執行緒在HTML5

技術文件

基本

• JavaScript Reference
• JScript
• JavaScript Tutorial

Strict mode

• Strict mode

OOP

• JavaScript for Object-Oriented Programmers
• 建構與維護大型 JavaScript 應用程式

相關

主條目：JSON

• Using Visual Studio to Debug JavaScript in IE
• TIPS-如何動態載入Javascript或CSS? （在JS檔中載入其他的JS檔）

跨遊覽器的解決方式

• JS的IE和FF兼容性问题的汇总小结

其他

• 9 JavaScript Tips You May Not Know

引用方法

script區塊定義型

• 可放在頁面的任何地方，但通常會放在Head的區塊之間。

<script type= "text/javascript">
/*<![CDATA[*/
alert('test'); 
/*]]>*/
</script>

外部Src型

<script type='text/javascript' src="test.js"></script>

Include File型

• 例如用於ASP

<script type='text/javascript'>
<!--#include file="test.js" -->
</script>

動態Src型

主條目：IncludeFile.js

Tools

• 很好用的javascript除錯工具FireBug (firefox)
• Aptana: The Web IDE (JavaScript的IDE工具)

JavaScript壓縮工具

主條目：PHP#JavaScript壓縮工具

OpenSource

自定函式

• JavaScript自定函式
• JavaScript小技巧
• php.js - Use PHP functions in JavaScript

Auto-complete

• Auto-complete Control

AJAX

主條目：AJAX

Calendar

• The DHTML / JavaScript Calendar
• Swazz Javascript Calendar

Checkbox & Radio

• CRIR: Checkbox & Radio Input Replacement（疑似倒站？待查）
• FancyForm

Clock

• JavaScript Clock 2

Data

• JavaScript StringBuilder
• sprintf
• trim, ltrim, rltrim
• md5
• sha-1
• crc32

DOM

• base2.DOM……Yet Another JavaScript Library Without Documentation

• base2.DOM中文簡介

Flash Player

主條目：swfobject.js

• The Flash® Player Detection Kit

Grid

• Sigma Grid -- Ajax editable data grid - DHTML grid control with flexibility and user API.
• dhtmlxGrid - Ajax-enabled DHTML grid with rich Javascript API

HTML

• SyntaxHighlighter

HTML Editor

主條目：WYSIWYG HTML Editor

Images

lightbox

• The Lightbox Clones Matrix（各種Lightbox套件列表）

Tables

• sortable-table……以定義Table的Class方式, 接上JavaScript的靜態表格排序功能
• TableKit……使用Prototype.js

Menu

• DynarchMenu

Slideshow Viewer

• The TripTracker slideshow is a lightweight JavaScript image viewer with an animated slideshow feature.

Tabs

• Swazz Javascript Calendar
• Ajax Tabs Content script

TreeView

• TreeView: JavaScript DHTML Tree Menu
• jsTree :: javascript treeview component

Web-UI

• AWUI - a simple web user interface library with AJAX support

其它

• JavaScript by GreyWyvern
  1. HTML Block Scroller & Marquee JavaScript
  2. Buffered Text-fade Effect
  3. Graphical / Virtual Keyboard Interface
• Whatever:hover
• HIOX INDIA FREE SCRIPT, Tutorial, Images and Web master Tool
• LauDean的程式
• JavaScript Kit
• Dynamic Drive DHTML(dynamic html) & JavaScript code library
• Open-js

FAQ

IE6防止記憶体洩漏的小技巧

• try...finally 的一個用途

URL編碼

• 原因：當使用AJAX時，如果使用GET模式以URL傳遞參數時，在IE下使用，需先進行URL編碼，不然當參數傳遞到Web-Sevrer端時，會變亂碼。
  1. JavaScript encodeURI() Function（IE7確定支援）
  2. 用JavaScript实现UrlEncode和UrlDecode

DHTML控制項取值

//ASP.NET的DropDownList用(用ClientID_1當變數傳入ClientID)
var x = document.getElementById(ClientID_1).options[document.getElementById(ClientID_1).selectedIndex].value;
 
//ASP.NET的TextBox用(用ClientID_2當變數傳入ClientID)
var y = document.getElementById(ClientID_2).value;

09 is not a legal ECMA-262 octal constant

• 這是FireFox3才有的JavaScript錯誤訊息（IE無此錯誤），例如陣列的索引值使用 09 之類前面多1個數字0，改成 9 就OK了。
• ECMA-262 是一種JavaScript標準。

document.appendChild無法正常插入Html物件

var newDiv = document.createElement('div');
newDiv.setAttribute("id", "idTestInsertDiv");
newDiv.setAttribute("height", "400");
newDiv.setAttribute("width", "500");
 
var code = '<h1>測試新增div區塊</h1>';
newDiv.innerHTML = code;
 
//不能用, 原因不明
//document.appendChild(newDiv);
 
//改用
document.getElementsByTagName("body")[0].appendChild(newDiv);

如何從Javascript的Array中篩選出唯一的元素?

• 原始出處：如何從Javascript的Array中篩選出唯一的元素?
• 改良版

//資料來源
    var ss = [123,789,123,123,789,789,456,123,789,789,456];
 
    //唯一值篩選(以陣列的key方式)
    var uniqueArray = [];
    for (var key in ss) { uniqueArray[ss[key]]=1; }
 
    //將篩選結果存回原陣列
    ss = [];
    for (var key in uniqueArray) {ss.push(key)}
 
    //輸出
    alert(ss.sort().join("|"));

抑制遊覽器的上一頁功能

• 參照：Disable Back Button in Browser using JavaScript

<script type="text/javascript">
	window.history.forward();
	function noBack(){ window.history.forward(); }
</script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">

Call外部的DLL來使用

• Using js-ctypes（FireFox4）

JavaScript多執行緒在HTML5

• Introduction to the HTML5 Web Workers: the JavaScript multithreading approach Introduction to the HTML5 Web Workers: the JavaScript multithreading approach