Javascript: Difference between revisions
Jump to navigation
Jump to search
m (Text replacement - "Category:WebDesign" to "Category:Design") Tags: Mobile edit Mobile web edit |
|||
(46 intermediate revisions by one other user not shown) | |||
Line 12: | Line 12: | ||
* Using jQuery [http://api.jquery.com/html/ .html()]<ref>[http://stackoverflow.com/questions/3563107/jquery-html-vs-innerhtml javascript - JQuery html() vs. innerHTML - Stack Overflow]</ref> <nowiki>$("#selected_id").html(htmlStr);</nowiki> | * Using jQuery [http://api.jquery.com/html/ .html()]<ref>[http://stackoverflow.com/questions/3563107/jquery-html-vs-innerhtml javascript - JQuery html() vs. innerHTML - Stack Overflow]</ref> <nowiki>$("#selected_id").html(htmlStr);</nowiki> | ||
* [http://www.w3schools.com/js/js_htmldom_html.asp JavaScript HTML DOM Changing HTML Content] <nowiki>document.getElementById(selected_id).innerHTML = htmlStr;</nowiki> {{exclaim}} I met technical issue to replace the select text in {{IE}} v.8 | * [http://www.w3schools.com/js/js_htmldom_html.asp JavaScript HTML DOM Changing HTML Content] <nowiki>document.getElementById(selected_id).innerHTML = htmlStr;</nowiki> {{exclaim}} I met technical issue to replace the select text in {{IE}} v.8 | ||
== input selector == | |||
* jQuery [http://api.jquery.com/input-selector/ :input Selector] "Selects all input box, textarea, select and button elements" Cited from [http://api.jquery.com/input-selector/ :input Selector] | |||
* jQuery <nowiki>$("form#formID input[type=text]")</nowiki> Selects all input '''Text Fields''' belonging to the form with id: formID<ref>[http://stackoverflow.com/questions/4291005/jquery-get-all-input-from-specific-form javascript - jquery get all input from specific form - Stack Overflow]</ref> | |||
== Create HTML select option == | == Create HTML select option == | ||
Line 32: | Line 36: | ||
** <nowiki>$("#selector_id").css("display", "");</nowiki> or <nowiki>$("#selector_id").css("display", "block");</nowiki> | ** <nowiki>$("#selector_id").css("display", "");</nowiki> or <nowiki>$("#selector_id").css("display", "block");</nowiki> | ||
** <nowiki>$("#selector_id").css("display", "none");</nowiki> | ** <nowiki>$("#selector_id").css("display", "none");</nowiki> | ||
== form submit validation == | |||
* [http://www.w3schools.com/jsref/event_form_onsubmit.asp Form onsubmit Event]. code snippet<ref>[http://www.w3schools.com/js/js_form_validation.asp JavaScript Form Validation]</ref>: | |||
<pre> | |||
<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">... | |||
</pre> | |||
* jQuery .submit()<ref>[http://api.jquery.com/submit/ .submit() | jQuery API Documentation]</ref> | |||
<pre> | |||
$(document).ready(function(){ | |||
$('#form').submit( function(){ | |||
return validateForm(); | |||
}); | |||
}); | |||
function validateForm() | |||
{ | |||
if ( condition ) | |||
{ | |||
alert('form was not validated'); | |||
return false; | |||
} | |||
} | |||
</pre> | |||
* [http://jqueryvalidation.org/ jQuery Validation Plugin | Form validation with jQuery]<ref>[http://brooky.cc/2011/08/04/using-jquery-validation-plugin-for-form-validation/ 好用的表單驗證工具 – jQuery validation plugin | brooky's blog]</ref> | |||
== Count the number of visible table rows == | == Count the number of visible table rows == | ||
Line 40: | Line 69: | ||
* <nowiki>document.getElementById( table_id ).rows.length;</nowiki> | * <nowiki>document.getElementById( table_id ).rows.length;</nowiki> | ||
== compression tools == | |||
* [http://jscompress.com/ Minify Javascript Online / Online JavaScript Packer] | == refresh or redirect the webpage == | ||
* [http://rental.zhupiter.com/postshow_184_1_1.html 轉導、轉向(Redirect)網址的方法. - 諸彼特租屋網] {{access | date=2014-03-18 }} | |||
* alternative: refresh partial content which only required to be updated | |||
== JSON tools == | |||
JSON schema generator | |||
* {{Gd}} [http://www.jsonschema.net/ JSON schema generator] | |||
JSON validator | |||
* [http://jsonlint.com/ JSONLint - The JSON Validator] {{access | date = 2015-09-08}} | |||
JSON viewer 通常也包含 validator 功能 | |||
* {{Gd}} [http://www.jsondata.ninja/ JSON Data Ninja] {{access | date = 2017-05-24}} | |||
*# 輸入: 文字 | |||
*# 可以把 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> | |||
*# 會將編碼後的中文還原成可讀 | |||
* [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}} | |||
** 大檔 (檔案大小 6MB) 測試: 停頓約半分鐘後,即可使用 | |||
* [https://notepad-plus-plus.org/ Notepad++] v. 6.8.7 + [https://sourceforge.net/projects/nppjsonviewer/ JSONViewer Notepad++ plugin] v.1.22 | |||
** 大檔 (檔案大小 6MB) 測試: 沒有反應超過5分鐘 | |||
* [http://youknowone.github.io/VisualJSON/ VisualJSON by youknowone] v. 1.6.0 on {{Mac}} | |||
*# 輸入: 網址或文字 | |||
*# 顯示成 Tree 結構 | |||
*# 有標示某節點下的資料筆數 | |||
*# 會將編碼後的中文還原成可讀 | |||
* ''$'' [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://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]) | |||
* [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}} | |||
* [https://unpkg.com/#/ UNPKG] {{access | date = 2018-10-18}} | |||
<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 == | ||
# Using the javascript library? | # Using the javascript library? | ||
#* Is the function was supported by the version of javascript library? Deprecated? | #* 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: [http://jsfiddle.net/ JSFiddle] or [http://jsbin.com/welcome/1/edit JS Bin] | ||
# [[Check Browser Compatibility | Checking browser compatibility]] | # [[Check Browser Compatibility | Checking browser compatibility]] | ||
# Javascript location: (1)JavaScript in <head> or <body> [http://api.jquery.com/click/ ex: .click()], (2)JavaScript in <input> tag or other DOM elements' tag ex: <button type="button" onclick="myFunction()" id="buttonId">Try it</button><ref>[http://www.w3schools.com/js/js_howto.asp JavaScript How To]</ref> | |||
=== 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 == | == references == | ||
Line 55: | Line 189: | ||
[[Category:Web_Dev]] | [[Category:Web_Dev]] | ||
[[Category:Javascript]] | [[Category:Javascript]] | ||
[[Category: | [[Category:Design]] | ||
further reading | |||
# [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
- Using jQuery .html()[1] $("#selected_id").html(htmlStr);
- JavaScript HTML DOM Changing HTML Content document.getElementById(selected_id).innerHTML = htmlStr; I met technical issue to replace the select text in IE v.8
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
- from JSON hash: javascript - How to create HTML select option from JSON hash? - Stack Overflow
- from javascript array: JavaScript - populate drop down list with array - Stack Overflow
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 onsubmit Event. code snippet[6]:
<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; jQuery v.1.9.1 + IE 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
- 轉導、轉向(Redirect)網址的方法. - 諸彼特租屋網 [Last visited: 2014-03-18]
- alternative: refresh partial content which only required to be updated
JSON tools
JSON schema generator
JSON validator
- JSONLint - The JSON Validator [Last visited: 2015-09-08]
JSON viewer 通常也包含 validator 功能
- JSON Data Ninja [Last visited: 2017-05-24]
- 輸入: 文字
- 可以把 JSON 多筆資料轉成表格格式
- 有標示某節點下的資料筆數
- 會將編碼後的中文還原成可讀
- Json Parser Online [Last visited: 2017-05-24]
- 輸入: 文字
- 沒有顯示成 Tree 結構,但有美化語法方便閱讀
- 有標示某節點下的資料筆數
- 會將編碼後的中文還原成可讀
- Best Online JSON Viewer, Beautifier, Formatter, Analyser, Minify, Converter [Last visited: 2017-05-24]
- 輸入: 文字
- Tree Viewer 顯示結構
- 有標示某節點下的資料筆數
- 不會將編碼後的中文還原成可讀
- JSONView for Chrome : beautify the remote JSON file
- 輸入: 網址
- 沒有顯示成 Tree 結構,但有美化語法方便閱讀
- 沒有標示某節點下的資料筆數
- 會將編碼後的中文還原成可讀 Unicode/Chinese issue: the garbled Chinese characters will become human readable!
- Postman for Chrome . HTTP request and response data tool [Last visited: 2017-06-09]
- 輸入: 網址
- 沒有顯示成 Tree 結構,但有美化語法方便閱讀
- 沒有標示某節點下的資料筆數
- 會將編碼後的中文還原成可讀
- JSON Viewer v. 1.2.0.0 解壓縮直接執行 JsonView\JsonView.exe (免安裝即可執行) Win
- 大檔 (檔案大小 6MB) 測試: 停頓約半分鐘後,即可使用
- Notepad++ v. 6.8.7 + JSONViewer Notepad++ plugin v.1.22
- 大檔 (檔案大小 6MB) 測試: 沒有反應超過5分鐘
- VisualJSON by youknowone v. 1.6.0 on Mac
- 輸入: 網址或文字
- 顯示成 Tree 結構
- 有標示某節點下的資料筆數
- 會將編碼後的中文還原成可讀
- $ Cocoa JSON Editor - Powerful JSON String Editor for Developers, API, Endpoints, Rest client v. 1.2.5 on Mac
- 輸入: 文字或檔案
- Tree Viewer 顯示結構
- 有標示某節點下的資料筆數
- 會將編碼後的中文還原成可讀
- $ TextLab v. 1.3.4 on Mac
- 輸入: 文字或檔案
- 沒有顯示成 Tree 結構,但有美化語法方便閱讀
- 沒有標示某節點下的資料筆數
- 會將編碼後的中文還原成可讀
Other tools
Editor plugins
- JSON Viewer [1] for Notepad++
- Sublime Text 套件介紹(四):Pretty JSON[Last visited: 2014-03-11]
Performance issue: compression tools, using CDN
Compression tools to reduce the file size of javascript
- Minify Javascript Online / Online JavaScript Packer[10]
- Sublime Text 2 YUI-Compressor plugin
- $ PhpStorm IDE Minifying JavaScript
Using CDN (Content Delivery Network)
- Google Hosted Libraries - Developer's Guide - Make the Web Faster — Google Developers[11]
- Microsoft Ajax Content Delivery Network - ASP.NET Ajax Library
- cdnjs.com - the missing cdn for javascript and css & 中文版: cdnjs.com - 遺失的CDN的JavaScript和CSS [Last visited: 2014-09-10]
- UNPKG [Last visited: 2018-10-18]
//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
- Using the javascript library?
- Checking browser compatibility
- 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
- ↑ javascript - JQuery html() vs. innerHTML - Stack Overflow
- ↑ javascript - jquery get all input from specific form - Stack Overflow
- ↑ HTML option selected Attribute
- ↑ select - jQuery Set Selected Option Using Next - Stack Overflow
- ↑ javascript - jQuery - setting the selected value of a select control via its text description - Stack Overflow
- ↑ JavaScript Form Validation
- ↑ .submit() | jQuery API Documentation
- ↑ 好用的表單驗證工具 – jQuery validation plugin | brooky's blog
- ↑ jquery selector to count the number of visible table rows? - Stack Overflow
- ↑ JSCompress線上JS壓縮器,一鍵將多隻JS合併並壓縮|梅問題.教學網
- ↑ 使用 Google CDN Host 的 Javascript Library - jQuery - Tsung's Blog, javascript - jquery ui - how to use google CDN - Stack Overflow
- ↑ JavaScript How To
further reading