Javascript: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
m (Text replacement - "Category:WebDesign" to "Category:Design")
Tags: Mobile edit Mobile web edit
(13 intermediate revisions by one other user not shown)
Line 75: Line 75:


== JSON tools ==
== JSON tools ==
Online services
JSON schema generator
* {{Gd}} [http://www.jsonschema.net/ JSON schema generator]
* {{Gd}} [http://www.jsonschema.net/ JSON schema generator]
* {{Gd}} [http://www.jsondata.ninja/ JSON Data Ninja] 可以把 JSON 多筆資料轉成表格格式 {{access | date = 2017-05-24}}
 
* [http://json.parser.online.fr/ Json Parser Online]
JSON validator
* [http://jsonlint.com/ JSONLint - The JSON Validator] {{access | date = 2015-09-08}}
* [http://jsonlint.com/ JSONLint - The JSON Validator] {{access | date = 2015-09-08}}
* [http://codebeautify.org/jsonviewer Best Online JSON Viewer, Beautifier, Formatter, Analyser, Minify, Converter] {{access | date = 2017-05-24}}


Browser extensions
JSON viewer 通常也包含 validator 功能
* [https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc JSONView] for {{Chrome}}: beautify the remote JSON file
* {{Gd}} [http://www.jsondata.ninja/ JSON Data Ninja] {{access | date = 2017-05-24}}
** {{Gd}} Unicode/Chinese issue: the garbled Chinese characters will become human readable!
*# 輸入:  文字
** similar extension: [https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa JSON Formatter]
*# 可以把 JSON 多筆資料轉成表格格式
*# 有標示某節點下的資料筆數
*# 會將編碼後的中文還原成可讀
 
* [http://json.parser.online.fr/ Json Parser Online] {{access | date = 2017-05-24}}
*# 輸入:  文字
*# 沒有顯示成 Tree 結構,但有美化語法方便閱讀
*# 有標示某節點下的資料筆數
*# 會將編碼後的中文還原成可讀
 
* [http://codebeautify.org/jsonviewer Best Online JSON Viewer, Beautifier, Formatter, Analyser, Minify, Converter] {{access | date = 2017-05-24}}
*# 輸入:  文字
*# Tree Viewer 顯示結構
*# 有標示某節點下的資料筆數
*# <span style="color: #999;">不會將編碼後的中文還原成可讀</span>
 
* [https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc JSONView] for {{Chrome}}: beautify the remote JSON file  
*# 輸入: 網址
*# 沒有顯示成 Tree 結構,但有美化語法方便閱讀
*# <span style="color: #999;">沒有標示某節點下的資料筆數</span>
*# 會將編碼後的中文還原成可讀 Unicode/Chinese issue: the garbled Chinese characters will become human readable!  
 
* [https://chrome.google.com/webstore/detail/postman/fhbjgbiflinjbdggehcddcbncdddomop Postman] for {{Chrome}}. [[HTTP request and response data tool]] {{access | date = 2017-06-09}}
*# 輸入: 網址
*# 沒有顯示成 Tree 結構,但有美化語法方便閱讀
*# <span style="color: #999;">沒有標示某節點下的資料筆數</span>
*# 會將編碼後的中文還原成可讀


Editor plugins
* [https://chrome.google.com/webstore/detail/json-formatter/bcjindcccaagfpapjjmafapmmgkkhgoa JSON Formatter]
* [http://sourceforge.net/apps/mediawiki/notepad-plus/index.php?title=Plugin_Central#J JSON Viewer] [http://nppjsonviewer.sourceforge.net/] for Notepad++
* [http://www.camdemy.com/media/7427 Sublime Text 套件介紹(四):Pretty JSON]{{access | date=2014-03-11}}


standalone
* [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分鐘


== performance issue: compression tools, using CDN ==
* [http://youknowone.github.io/VisualJSON/ VisualJSON by youknowone] v. 1.6.0 on {{Mac}}
compression tools
*# 輸入: 網址或文字
* [http://jscompress.com/ Minify Javascript Online / Online JavaScript Packer]
*# 顯示成 Tree 結構
Integration with IDE:
*# 有標示某節點下的資料筆數
* [https://www.jetbrains.com/phpstorm/ PhpStorm IDE] [https://www.jetbrains.com/help/phpstorm/2016.1/minifying-javascript.html Minifying JavaScript]
*# 會將編碼後的中文還原成可讀
 
 
* ''$'' [http://www.cocoajsoneditor.com/ Cocoa JSON Editor - Powerful JSON String Editor for Developers, API, Endpoints, Rest client] v. 1.2.5 on {{Mac}}
*# 輸入: 文字或檔案
*# Tree Viewer 顯示結構
*# 有標示某節點下的資料筆數
*# 會將編碼後的中文還原成可讀
 
* ''$'' [http://textlab-app.com/ TextLab] v. 1.3.4 on {{Mac}}
*# 輸入: 文字或檔案
*# 沒有顯示成 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
* [http://sourceforge.net/apps/mediawiki/notepad-plus/index.php?title=Plugin_Central#J JSON Viewer] [http://nppjsonviewer.sourceforge.net/] for Notepad++
* [http://www.camdemy.com/media/7427 Sublime Text 套件介紹(四):Pretty JSON]{{access | date=2014-03-11}}
 
== Performance issue: compression tools, using CDN ==
Compression tools to reduce the file size of javascript
* [http://jscompress.com/ Minify Javascript Online / Online JavaScript Packer]<ref>[https://www.minwt.com/webdesign-dev/html/18639.html JSCompress線上JS壓縮器,一鍵將多隻JS合併並壓縮|梅問題.教學網]</ref>
* [https://packagecontrol.io/packages/YUI%20Compressor Sublime Text 2 YUI-Compressor plugin]
* [https://packagecontrol.io/packages/YUI%20Compressor Sublime Text 2 YUI-Compressor plugin]
* ''$'' [https://www.jetbrains.com/phpstorm/ PhpStorm IDE] [https://www.jetbrains.com/help/phpstorm/2017.1/minifying-javascript.html Minifying JavaScript]


 
Using CDN ([https://en.wikipedia.org/wiki/Content_delivery_network Content Delivery Network])
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>
* [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://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}}
* [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}}
* [https://unpkg.com/#/ UNPKG] {{access | date = 2018-10-18}}


<pre>
<pre>
Line 141: Line 189:
[[Category:Web_Dev]]
[[Category:Web_Dev]]
[[Category:Javascript]]
[[Category:Javascript]]
[[Category:WebDesign]]
[[Category:Design]]


further reading
further reading
# [http://technet.microsoft.com/library/ee198686.aspx Microsoft - Scripting Guidelines]
# [http://technet.microsoft.com/library/ee198686.aspx Microsoft - Scripting Guidelines]

Revision as of 10:31, 16 May 2022

Javascript approaches to do the same task

Get the document by id

  • document.getElementById('abcId')
  • alternative: (1) Get the id attribute by using jQuery .attr(): $("selector").attr("id"); (example) and (2) go to the first step
  • parallel naming rules for html elemnt tags ex: (1)<input id='checkbox_id1' > & <select id="select_id1"> (2)Replace the input id to select id. Code snippet as follows:
var selectId = inputId.replace("checkbox_", "select_");

Changing HTML Content

input selector

  • jQuery :input Selector "Selects all input box, textarea, select and button elements" Cited from :input Selector
  • jQuery $("form#formID input[type=text]") Selects all input Text Fields belonging to the form with id: formID[2]

Create HTML select option

HTML select form Attribute

HTML DOM selected

  • HTML[3]
  • jQuery: .prop()[4]
  • jQuery .attr() ex: $("#myDropDown option:text=" + myText +"").attr("selected", "selected"); [5]

Display or hide the element by id

  • HTML DOM Style object
    • document.getElementById( selector_id ).style.display = "none";
  • Using jQuery .show() or .hide():
    • $("#selector_id").show(); or
    • $("#selector_id").hide();
  • Using jQuery .css():
    • $("#selector_id").css("display", ""); or $("#selector_id").css("display", "block");
    • $("#selector_id").css("display", "none");

form submit validation

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">... 
  • jQuery .submit()[7]
$(document).ready(function(){
    $('#form').submit( function(){
        return validateForm();
    });
});

function validateForm()
{
    if ( condition )
    {
        alert('form was not validated');
        return false;
    }
 
}

Count the number of visible table rows

  • $('#selector_id:visible').length; jQuery v.1.9.1[9]
  • $('#selector_id:not([style*="display: none"])').length; Icon_exclaim.gif jQuery v.1.9.1 + IE Browser msie.png v.8 not work

count the number of all table rows (includes visible and invisible rows)

  • document.getElementById( table_id ).rows.length;


refresh or redirect the webpage

JSON tools

JSON schema generator

JSON validator

JSON viewer 通常也包含 validator 功能

  • Good.gif JSON Data Ninja [Last visited: 2017-05-24]
    1. 輸入: 文字
    2. 可以把 JSON 多筆資料轉成表格格式
    3. 有標示某節點下的資料筆數
    4. 會將編碼後的中文還原成可讀
  • Json Parser Online [Last visited: 2017-05-24]
    1. 輸入: 文字
    2. 沒有顯示成 Tree 結構,但有美化語法方便閱讀
    3. 有標示某節點下的資料筆數
    4. 會將編碼後的中文還原成可讀
  • JSONView for Chrome Browser chrome.png : beautify the remote JSON file
    1. 輸入: 網址
    2. 沒有顯示成 Tree 結構,但有美化語法方便閱讀
    3. 沒有標示某節點下的資料筆數
    4. 會將編碼後的中文還原成可讀 Unicode/Chinese issue: the garbled Chinese characters will become human readable!
  • Postman for Chrome Browser chrome.png . HTTP request and response data tool [Last visited: 2017-06-09]
    1. 輸入: 網址
    2. 沒有顯示成 Tree 結構,但有美化語法方便閱讀
    3. 沒有標示某節點下的資料筆數
    4. 會將編碼後的中文還原成可讀
  • JSON Viewer v. 1.2.0.0 解壓縮直接執行 JsonView\JsonView.exe (免安裝即可執行) Win Os windows.png
    • 大檔 (檔案大小 6MB) 測試: 停頓約半分鐘後,即可使用
  • VisualJSON by youknowone v. 1.6.0 on Mac icon_os_mac.png
    1. 輸入: 網址或文字
    2. 顯示成 Tree 結構
    3. 有標示某節點下的資料筆數
    4. 會將編碼後的中文還原成可讀


  • $ TextLab v. 1.3.4 on Mac icon_os_mac.png
    1. 輸入: 文字或檔案
    2. 沒有顯示成 Tree 結構,但有美化語法方便閱讀
    3. 沒有標示某節點下的資料筆數
    4. 會將編碼後的中文還原成可讀

Other tools

Editor plugins

Performance issue: compression tools, using CDN

Compression tools to reduce the file size of javascript

Using CDN (Content Delivery Network)

//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>
	

troubleshooting steps

  1. Using the javascript library?
    • Is the function was supported by the version of javascript library? Deprecated?
    • Try to upgrade or downgrade the version of javascript library. Easy to switch the version: JSFiddle or JS Bin
  2. Checking browser compatibility
  3. Javascript location: (1)JavaScript in <head> or <body> ex: .click(), (2)JavaScript in <input> tag or other DOM elements' tag ex: <button type="button" onclick="myFunction()" id="buttonId">Try it</button>[12]

jsfiddle:Uncaught ReferenceError: function_name is not defined

message: Uncaught ReferenceError: function_name is not defined

  • possibile solution: settings - No wrap - in <body> or No wrap - in <head>


more on Javascript debug

references

further reading

  1. Microsoft - Scripting Guidelines