Javascript: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
Line 79: Line 79:
* [http://json.parser.online.fr/ Json Parser Online]
* [http://json.parser.online.fr/ Json Parser Online]
* [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
Browser extensions

Revision as of 13:48, 24 May 2017

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

Online services

Browser extensions

  • JSONView for Chrome Browser chrome.png : beautify the remote JSON file
    • Good.gif Unicode/Chinese issue: the garbled Chinese characters will become human readable!
    • similar extension: JSON Formatter

Editor plugins

standalone

  • JSON Viewer v. 1.2.0.0 解壓縮直接執行 JsonView\JsonView.exe (免安裝即可執行) Win Os windows.png
    • 大檔 (檔案大小 6MB) 測試: 停頓約半分鐘後,即可使用
  • Notepad++ v. 6.8.7 + JSONViewer Notepad++ plugin v.1.22
    • 大檔 (檔案大小 6MB) 測試: 沒有反應超過5分鐘

performance issue: compression tools, using CDN

compression tools

Integration with IDE:


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

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