Javascript

From LemonWiki共筆
Jump to: navigation, search

Javascript approaches to do the same task

Get the document by id[edit]

  • 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[edit]

input selector[edit]

  • 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[edit]

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[edit]

  • 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[edit]

<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[edit]

  • $('#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[edit]

JSON tools[edit]

JSON schema generator

JSON validator

JSON viewer 通常也包含 validator 功能

  • Good! 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 Os mac.png
    1. 輸入: 網址或文字
    2. 顯示成 Tree 結構
    3. 有標示某節點下的資料筆數
    4. 會將編碼後的中文還原成可讀


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

Other tools

Editor plugins

Performance issue: compression tools, using CDN[edit]

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[edit]

  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[edit]

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[edit]

further reading

  1. Microsoft - Scripting Guidelines