Javascript: Difference between revisions

Jump to navigation Jump to search

Javascript (edit)

Revision as of 18:16, 15 May 2024

1,068 bytes removed ,  15 May 2024
m
→‎JSON tools
 
(15 intermediate revisions by the same user not shown)
Line 79: Line 79:


JSON validator
JSON validator
* {{Gd}} [https://jsonformatter.curiousconcept.com/ JSON Formatter & Validator] 會標示語法錯誤的地方 {{access | date = 2024-05-15}}
* [http://jsonlint.com/ JSONLint - The JSON Validator] {{access | date = 2015-09-08}}
* [http://jsonlint.com/ JSONLint - The JSON Validator] {{access | date = 2015-09-08}}
* [https://jsonviewer.stack.hu/ Online JSON Viewer and Formatter] 語法錯誤只會顯示錯誤訊息「JSON error: Invalid JSON variable」{{access | date = 2024-05-15}}


JSON viewer 通常也包含 validator 功能
JSON viewer 通常也包含 validator 功能
Line 98: Line 100:
*# Tree Viewer 顯示結構
*# Tree Viewer 顯示結構
*# 有標示某節點下的資料筆數
*# 有標示某節點下的資料筆數
*# 不會將編碼後的中文還原成可讀
*# <span style="color: #999;">不會將編碼後的中文還原成可讀</span>


* [https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc JSONView] for {{Chrome}}: beautify the remote JSON file  
* [https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc JSONView] for {{Chrome}}: beautify the remote JSON file  
*# 輸入: 網址
*# 輸入: 網址
*# 沒有顯示成 Tree 結構，但有美化語法方便閱讀
*# 沒有顯示成 Tree 結構，但有美化語法方便閱讀
*# 沒有標示某節點下的資料筆數
*# <span style="color: #999;">沒有標示某節點下的資料筆數</span>
*# 會將編碼後的中文還原成可讀 Unicode/Chinese issue: the garbled Chinese characters will become human readable!  
*# 會將編碼後的中文還原成可讀 Unicode/Chinese issue: the garbled Chinese characters will become human readable!  


* [https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop Postman] for {{Chrome}}
* [https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop Postman] for {{Chrome}}. [[HTTP request and response data tool]] {{access | date = 2017-06-09}}  
*# 輸入: 網址
*# 輸入: 網址
*# 沒有顯示成 Tree 結構，但有美化語法方便閱讀
*# 沒有顯示成 Tree 結構，但有美化語法方便閱讀
*# 沒有標示某節點下的資料筆數
*# <span style="color: #999;">沒有標示某節點下的資料筆數</span>
*# 會將編碼後的中文還原成可讀  
*# 會將編碼後的中文還原成可讀  


* [https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa JSON Formatter]
* [https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa JSON Formatter]
* [http://jsonviewer.codeplex.com/ JSON Viewer]  v. 1.2.0.0 解壓縮直接執行 JsonView\JsonView.exe (免安裝即可執行) {{Win}}
* [http://jsonviewer.codeplex.com/ JSON Viewer]  v. 1.2.0.0 解壓縮直接執行 JsonView\JsonView.exe (免安裝即可執行) {{Win}}
** 大檔 (檔案大小 6MB) 測試: 停頓約半分鐘後，即可使用
** 大檔 (檔案大小 6MB) 測試: 停頓約半分鐘後，即可使用
* [https://notepad-plus-plus.org/ Notepad++] v. 6.8.7 + [https://sourceforge.net/projects/nppjsonviewer/ JSONViewer Notepad++ plugin] v.1.22
* [https://notepad-plus-plus.org/ Notepad++] v. 6.8.7 + [https://sourceforge.net/projects/nppjsonviewer/ JSONViewer Notepad++ plugin] v.1.22
** 大檔 (檔案大小 6MB) 測試: 沒有反應超過5分鐘
** 大檔 (檔案大小 6MB) 測試: 沒有反應超過5分鐘


[http://youknowone.github.io/VisualJSON/ VisualJSON by youknowone] v. 1.6.0 on {{Mac}}
* [http://youknowone.github.io/VisualJSON/ VisualJSON by youknowone] v. 1.6.0 on {{Mac}}
*# 輸入: 網址或文字
*# 輸入: 網址或文字
*# 顯示成 Tree 結構
*# 顯示成 Tree 結構
*# 有標示某節點下的資料筆數
*# 有標示某節點下的資料筆數
*# 會將編碼後的中文還原成可讀
*# 會將編碼後的中文還原成可讀


* ''$'' [http://www.cocoajsoneditor.com/ Cocoa JSON Editor - Powerful JSON String Editor for Developers, API, Endpoints, Rest client] v. 1.2.5 on {{Mac}}  
* ''$'' [http://www.cocoajsoneditor.com/ Cocoa JSON Editor - Powerful JSON String Editor for Developers, API, Endpoints, Rest client] v. 1.2.5 on {{Mac}}  
Line 133: Line 138:
*# 輸入: 文字或檔案
*# 輸入: 文字或檔案
*# 沒有顯示成 Tree 結構，但有美化語法方便閱讀
*# 沒有顯示成 Tree 結構，但有美化語法方便閱讀
*# 沒有標示某節點下的資料筆數
*# <span style="color: #999;">沒有標示某節點下的資料筆數</span>
*# 會將編碼後的中文還原成可讀
*# 會將編碼後的中文還原成可讀
Other tools
* [https://www.planetoid.info/tools/convert_javascript_array_to_php_array/ Convert JavaScript Array to PHP Array]


Editor plugins
Editor plugins
Line 140: Line 148:
* [http://www.camdemy.com/media/7427 Sublime Text 套件介紹（四）：Pretty JSON]{{access | date=2014-03-11}}
* [http://www.camdemy.com/media/7427 Sublime Text 套件介紹（四）：Pretty JSON]{{access | date=2014-03-11}}


== performance issue: compression tools, using CDN ==
== Performance issue: compression tools, using CDN ==
compression tools
[[Speed up websites#JavaScript part]]
* [http://jscompress.com/ Minify Javascript Online / Online JavaScript Packer]
Integration with IDE:
* [https://www.jetbrains.com/phpstorm/ PhpStorm IDE] [https://www.jetbrains.com/help/phpstorm/2016.1/minifying-javascript.html Minifying JavaScript]
* [https://packagecontrol.io/packages/YUI%20Compressor Sublime Text 2 YUI-Compressor plugin]
 
 
Using CDN(Content Delivery Network)
* [https://developers.google.com/speed/libraries/devguide?hl=zh-tw Google Hosted Libraries - Developer's Guide - Make the Web Faster — Google Developers]<ref>[http://blog.longwin.com.tw/2008/11/google-cdn-host-ajax-library-jquery-2008/ 使用 Google CDN Host 的 Javascript Library - jQuery - Tsung's Blog], [http://stackoverflow.com/questions/5206666/jquery-ui-how-to-use-google-cdn javascript - jquery ui - how to use google CDN - Stack Overflow]</ref>
* [http://www.asp.net/ajaxlibrary/cdn.ashx Microsoft Ajax Content Delivery Network - ASP.NET Ajax Library]
* [http://cdnjs.com/ cdnjs.com - the missing cdn for javascript and css] & 中文版: [http://zh-tw.cdnjs.com/ cdnjs.com - 遺失的CDN的JavaScript和CSS] {{access | date = 2014-09-10}}
 
<pre>
//If the javascript library hosted at CDN was failed to connect, it will switch to local javascript file automatically.
 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script>
<script>!window.jQuery && document.write('<script src="local-js-path/jquery-1.12.4.min.js"><\/script>');</script>
 
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script>
<script>!window.jQuery.ui && document.write('<script src="local-js-path/jquery-ui-effects.custom-1.9.2.min.js"><\/script>');</script>
</pre>


== troubleshooting steps ==
== troubleshooting steps ==
Line 178: Line 165:
more on [[Javascript debug]]
more on [[Javascript debug]]


== references ==
== References ==
<references/>
<references/>
== Further reading ==
# [http://technet.microsoft.com/library/ee198686.aspx Microsoft - Scripting Guidelines]


[[Category:Programming]]
[[Category:Programming]]
[[Category:Web_Dev]]
[[Category:Web_Dev]]
[[Category:Javascript]]
[[Category:Javascript]]
[[Category:WebDesign]]
[[Category:Design]]
 
further reading
# [http://technet.microsoft.com/library/ee198686.aspx Microsoft - Scripting Guidelines]
Retrieved from "https://wiki.planetoid.info/index.php/Special:MobileDiff/18156...24799"

Navigation menu