Javascript: Difference between revisions

From LemonWiki共筆
Jump to navigation Jump to search
Line 79: Line 79:
Editor plugins
Editor plugins
* [http://sourceforge.net/apps/mediawiki/notepad-plus/index.php?title=Plugin_Central#J JSON Viewer] [http://nppjsonviewer.sourceforge.net/] for Notepad++
* [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
standalone

Revision as of 10:43, 11 March 2014

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;

JSON tools

Online services

Browser extensions

Editor plugins

standalone

  • JSON Viewer 解壓縮直接執行 JsonView\JsonView.exe (免安裝即可執行) Win Os windows.png

compression tools

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


more on Javascript debug

references

further reading

  1. Microsoft - Scripting Guidelines