Javascript

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() $("#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

Create HTML select option

HTML select form Attribute

• 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
• jQuery: .prop()
• jQuery .attr() ex: $("#myDropDown option:text=" + myText +"").attr("selected", "selected");

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:

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">... 

• jQuery .submit()

$(document).ready(function(){
    $('#form').submit( function(){
        return validateForm();
    });
});

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

• jQuery Validation Plugin | Form validation with jQuery

Count the number of visible table rows

• $('#selector_id:visible').length; jQuery v.1.9.1
• $('#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 schema generator

JSON validator

• JSON Formatter & Validator 會標示語法錯誤的地方 [Last visited: 2024-05-15]
• JSONLint - The JSON Validator [Last visited: 2015-09-08]
• Online JSON Viewer and Formatter 語法錯誤只會顯示錯誤訊息「JSON error: Invalid JSON variable」[Last visited: 2024-05-15]

JSON viewer 通常也包含 validator 功能

• 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. 會將編碼後的中文還原成可讀

• Best Online JSON Viewer, Beautifier, Formatter, Analyser, Minify, Converter [Last visited: 2017-05-24]
  1. 輸入: 文字
  2. Tree Viewer 顯示結構
  3. 有標示某節點下的資料筆數
  4. 不會將編碼後的中文還原成可讀

• JSONView for Chrome : beautify the remote JSON file
  1. 輸入: 網址
  2. 沒有顯示成 Tree 結構，但有美化語法方便閱讀
  3. 沒有標示某節點下的資料筆數
  4. 會將編碼後的中文還原成可讀 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]
  1. 輸入: 網址
  2. 沒有顯示成 Tree 結構，但有美化語法方便閱讀
  3. 沒有標示某節點下的資料筆數
  4. 會將編碼後的中文還原成可讀

• JSON Formatter

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

• $ Cocoa JSON Editor - Powerful JSON String Editor for Developers, API, Endpoints, Rest client v. 1.2.5 on macOS
  1. 輸入: 文字或檔案
  2. Tree Viewer 顯示結構
  3. 有標示某節點下的資料筆數
  4. 會將編碼後的中文還原成可讀

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

Other tools

• Convert JavaScript Array to PHP Array

Editor plugins

• JSON Viewer [1] for Notepad++
• Sublime Text 套件介紹（四）：Pretty JSON[Last visited: 2014-03-11]

Performance issue: compression tools, using CDN

Speed up websites#JavaScript part

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>

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

Further reading

1. Microsoft - Scripting Guidelines