檢視 JavaScript 的原始碼

'''JavaScript'''
*{{wikipedia|JavaScript|lang=en}}
*{{wikipedia|JavaScript_syntax|lang=en}}
*{{wikipedia|Comparison_of_JavaScript_engines|lang=en}}

==技術文件==
===基本===
* [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference JavaScript Reference] - Mozilla FireFox
* [http://msdn.microsoft.com/en-us/library/hbxc2t98.aspx JScript] - IE
* [http://www.w3.org/standards/webdesign/script JavaScript Web APIs] - W3C
* [http://www.w3schools.com/js/default.asp JavaScript Tutorial] - w3schools
* [https://ithelp.ithome.com.tw/questions/10098361 JavaScript 教學系列整理] - ithelp
* [http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 深入理解JavaScript系列] - 汤姆大叔的博客
* [https://dorey.github.io/JavaScript-Equality-Table/ JavaScript Equality Table]

===Strict mode===
* [https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope/Strict_mode Strict mode]

===OOP===
* [http://java.sun.com/javascript/ajaxinaction/Ajax_in_Action_ApB.html JavaScript for Object-Oriented Programmers]
* [http://msdn.microsoft.com/zh-tw/scriptjunkie/ff728622.aspx 建構與維護大型 JavaScript 應用程式]

===相關===
{{main|JSON}}
* [http://www.codeproject.com/jscript/UsingVSToDebugJavascript.asp Using Visual Studio to Debug JavaScript in IE]
* [http://blog.darkthread.net/blogs/darkthreadtw/archive/2007/02/02/tips-javascript-css.aspx TIPS-如何動態載入Javascript或CSS?] （在JS檔中載入其他的JS檔）

===跨遊覽器的解決方式===
* [http://www.52css.com/article.asp?id=578 JS的IE和FF兼容性问题的汇总小结]

===其他===
* [http://aymanh.com/9-javascript-tips-you-may-not-know 9 JavaScript Tips You May Not Know]
* [http://bonsaiden.github.com/JavaScript-Garden/zhtw/ JavaScript 庭院]（整理了許多 JavaScript 的語言特性與一些常見的謬誤與壞習慣）
* [https://github.com/AllJointTW/clean-code-javascript 無瑕的程式碼 JavaScript]

==引用方法==
===script區塊定義型===
* 可放在頁面的任何地方，但通常會放在Head的區塊之間。
<source lang="html4strict">
<script type= "text/javascript">
/*<![CDATA[*/
alert('test'); 
/*]]>*/
</script>
</source>

===外部Src型===
<source lang="html4strict">
<script type='text/javascript' src="test.js"></script>
</source>

===Include File型===
* 例如用於[[ASP]]
<source lang="html4strict">
<script type='text/javascript'>
<!--#include file="test.js" -->
</script>
</source>

===動態型1===
<source lang="html4strict">
<script type='text/javascript'>
      (function () {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = "//tset.js";
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
</script>
</source>

===動態型2===
{{main|IncludeFile.js}}

===其他===
*[http://requirejs.org/ require.js]

==Tools==
===JavaScript格式化工具===
*[http://jsbeautifier.org/ Online JavaScript beautifier]
*[http://www.prettyprinter.de/ 	prettyprinter.de] - ''Pretty Printer for PHP, Java, C++, C, Perl, JavaScript, CSS ''
*[http://www.jsnice.org/ JS Nice]（可能會轉錯，只能參考而已）

===JavaScript壓縮工具===
{{main|PHP#JavaScript壓縮工具}}

===其他===
*[http://jshint.com/ JSHint], a JavaScript Code Quality Tool
*[http://diary.tw/tim/7 很好用的javascript除錯工具FireBug (firefox)]
*[http://www.aptana.com/ Aptana: The Web IDE] (JavaScript的IDE工具)

==OpenSource==
*[https://locutus.io/ Locutus is a project that seeks to assimilate other languages’ standard libraries to JavaScript]

===自定函式===
*[[JavaScript自定函式]]
*[[JavaScript小技巧]]

===Animation(動畫)===
*[https://github.com/AriaMinaei/theatre Theatre.js] is an animation library for high-fidelity motion graphics.

===Auto-complete===
*[https://www.codeproject.com/Articles/8020/Auto-complete-Control Auto-complete Control - CodeProject]

===AJAX===
{{main|AJAX}}

===Canvas(繪圖)===
*[https://p5js.org/ p5.js]
*[https://konvajs.org/ Konva - JavaScript 2d canvas library]
*[http://fabricjs.com/ Fabric.js Javascript Canvas Library]

===Calendar(日曆)===
*[http://www.dynarch.com/projects/calendar/ The DHTML / JavaScript Calendar]
*[http://www.ajaxdaddy.com/swazzcalendar-javascript.html Swazz Javascript Calendar]
*[http://sourceforge.net/projects/jscalendar/ The Coolest DHTML Calendar]

===Checkbox & Radio===
*[http://chriserwin.com/scripts/crir/ CRIR: Checkbox & Radio Input Replacement]（疑似倒站？待查）
*[http://lipidity.com/fancy-form/ FancyForm]

===Clock===
* [http://www.pageresource.com/jscript/jclock2.htm JavaScript Clock 2]

===Data===
* [[JavaScript:StringBuilder|JavaScript StringBuilder]]
* [http://www.webtoolkit.info/javascript-sprintf.html sprintf]
* [http://www.webtoolkit.info/javascript-trim.html trim, ltrim, rltrim]
* [http://www.webtoolkit.info/javascript-md5.html md5]
* [http://www.webtoolkit.info/javascript-sha1.html sha-1]
* [http://www.webtoolkit.info/javascript-crc32.html crc32]

===DOM===
* [http://dean.edwards.name/weblog/2007/03/yet-another/ base2.DOM]……Yet Another JavaScript Library Without Documentation
:* [http://blog.othree.net/log/2007/03/27/base2-dom/ base2.DOM中文簡介]

===Flash Player===
{{main|swfobject.js}}
* [http://www.adobe.com/products/flashplayer/download/detection_kit/ The Flash® Player Detection Kit]

===Grid===
*[http://www.sigmawidgets.com/products/sigma_grid2/index.html Sigma Grid -- Ajax editable data grid - DHTML grid control with flexibility and user API.]
*[http://dhtmlx.com/docs/products/dhtmlxGrid/ dhtmlxGrid - Ajax-enabled DHTML grid with rich Javascript API]
*[http://jsfiddle.net/ondras/hYfN3/ Tiny Excel-like app in vanilla JS - JSFiddle]（30行JavaScript寫出類似Excel的試算表介面）

===HTML===
* [http://code.google.com/p/syntaxhighlighter/ SyntaxHighlighter]

===HTML Editor===
{{main|WYSIWYG HTML Editor}}

===Images===
;lightbox
* [http://planetozh.com/projects/lightbox-clones/ The Lightbox Clones Matrix]（各種Lightbox套件列表）

===Tables===
* [http://www.joostdevalk.nl/code/sortable-table/ sortable-table]……以定義Table的Class方式, 接上JavaScript的靜態表格排序功能
* [http://www.millstream.com.au/view/code/tablekit/ TableKit]……使用Prototype.js

===Menu===
* [http://www.dynarch.com/products/dhtml-menu/ DynarchMenu]

===Slideshow Viewer===
* [http://slideshow.triptracker.net/ The TripTracker slideshow] is a lightweight JavaScript image viewer with an animated slideshow feature.

===Tabs===
* [http://calendar.swazz.org/ Swazz Javascript Calendar]
* [http://www.dynamicdrive.com/dynamicindex17/ajaxtabscontent/ Ajax Tabs Content script]

===TreeView===
* [http://www.treeview.net/ TreeView: JavaScript DHTML Tree Menu]
* [http://www.jstree.com/ jsTree :: javascript treeview component]

===Video Player===
*[http://www.videojs.com/ video.js]
*[http://mediaelementjs.com/ MediaElement.js]
*[http://msdn.microsoft.com/en-us/library/ie/hh924823%28v=vs.85%29.aspx Using JavaScript to control the HTML5 video player]

===Web-UI===
* [http://www.codeproject.com/Ajax/awui.asp AWUI - a simple web user interface library with AJAX support]

===Wave圖形化===
*[https://wavesurfer-js.org/ wavesurfer.js]
**[https://github.com/katspaugh/wavesurfer.js GitHub - katspaugh/wavesurfer.js: Navigable waveform built on Web Audio and Canvas]
===其它套件===
* [http://www.greywyvern.com/javascript JavaScript by GreyWyvern]
*# HTML Block Scroller & Marquee JavaScript 
*# Buffered Text-fade Effect
*# Graphical / Virtual Keyboard Interface
* [http://www.xs4all.nl/~peterned/csshover.html Whatever:hover]
* [http://www.hscripts.com/index.php HIOX INDIA FREE SCRIPT, Tutorial, Images and Web master Tool]
* [http://www.cdpa.nsysu.edu.tw/~laudean/ LauDean的程式]
* [http://www.javascriptkit.com/ JavaScript Kit]
* [http://www.dynamicdrive.com/ Dynamic Drive DHTML(dynamic html) & JavaScript code library]
* [http://www.openjs.com/ Open-js]
* [http://www.javascriptoo.com/ JavaScriptOO]
* [https://fusejs.io fuse.js]（模糊搜尋？）

==FAQ==
===IE6防止記憶体洩漏的小技巧===
* [http://chuiwenchiu.spaces.live.com/Blog/cns!CA5D9227DF9E78E8!2109.entry try...finally 的一個用途]

===URL編碼===
* 原因：當使用AJAX時，如果使用GET模式以URL傳遞參數時，在IE下使用，需先進行URL編碼，不然當參數傳遞到Web-Sevrer端時，會變亂碼。
*# [http://www.w3schools.com/jsref/jsref_encodeURI.asp JavaScript encodeURI() Function]（IE7確定支援）
*# [http://www.wujianrong.com/archives/2006/11/javascripturlencodeurldecode.html 用JavaScript实现UrlEncode和UrlDecode]

===DHTML控制項取值===
<source lang="javascript">
//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;
</source>

===09 is not a legal ECMA-262 octal constant===
* 這是FireFox3才有的JavaScript錯誤訊息（IE無此錯誤），例如陣列的索引值使用 09 之類前面多1個數字0，改成 9 就OK了。
* [http://www.ecma-international.org/publications/standards/Ecma-262.htm ECMA-262] 是一種JavaScript標準。

===document.appendChild無法正常插入Html物件===
<source lang="javascript">
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);
</source>

===如何從Javascript的Array中篩選出唯一的元素?===
* 原始出處：[http://dalada.blogspot.com/2009/08/javascriptarray.html 如何從Javascript的Array中篩選出唯一的元素?]
* 改良版
<source lang="javascript">
    //資料來源
    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("|"));
</source>

===抑制遊覽器的上一頁功能===
*參照：[http://viralpatel.net/blogs/2009/11/disable-back-button-browser-javascript.html Disable Back Button in Browser using JavaScript]
<source lang="javascript">
<script type="text/javascript">
	window.history.forward();
	function noBack(){ window.history.forward(); }
</script>
</head>
<body onload="noBack();" onpageshow="if (event.persisted) noBack();" onunload="">
</source>

===Call外部的DLL來使用===
*[https://developer.mozilla.org/en/js-ctypes/Using_js-ctypes Using js-ctypes]（FireFox4）

===JavaScript多執行緒在HTML5===
*[http://blogs.msdn.com/b/davrous/archive/2011/07/15/introduction-to-the-html5-web-workers-the-javascript-multithreading-approach.aspx Introduction to the HTML5 Web Workers: the JavaScript multithreading approach Introduction to the HTML5 Web Workers: the JavaScript multithreading approach]

===防止ASP.NET的表單TextBox在輸入Enter鍵時觸發到表單發送===
*[http://www.coolsun.idv.tw/modules/xhnewbb/viewtopic.php?topic_id=1372 如何讓Form不要因為Enter就自動Submit？]
*在TextBox裡多加上 onkeypress="return FormEnterKey(event)"
<source lang="javascript">
function FormEnterKey(e) {
     var key;
     if(window.event)
          key = window.event.keyCode;
     else
          key = e.which;
     return (key != 13);
}
</source>
===多行字串常數===
*[https://blog.darkthread.net/blog/js-multi-line-string-literals/ 【笨問題】JavaScript 的多行字串常數寫法-黑暗執行緒]
===其他===
*[https://blog.huli.tw/2020/04/18/javascript-function-is-awesome/ 覺得 JavaScript function 很有趣的我是不是很奇怪 - Huli]

==跨語言整合==
*[https://github.com/jashkenas/coffeescript/wiki/List-of-languages-that-compile-to-JS List of languages that compile to JS · jashkenas/coffeescript Wiki · GitHub]

*[[TypeScript]]
*與PHP
**[http://jsphp.org/ JsPHP]，{{wikipedia|JsPHP|lang=en}}
*與Python
**[https://brython.info/ Brython]
***[https://softnshare.com/opensource-brython Brython – 可以在瀏覽器中執行 Python 語言的 javascript 模組 - Soft & Share 線上課程資訊分享]

[[Category:Script語言]]
[[Category:JavaScript]]