• local and global variable,
  • all variable are global, except those defined inside functions
  • you can directly access global variable inside functions, without “global variable” declare like python

• move browser

   self.moveTo(245,400)

• get user input

   prompt("Hey there, good looking stranger!  What's your name?", "") 

• display dialog

  alert(document.getElementById('Passwd').value);

• get html info

  var cururl=location.href;
  var words=cururl.split("/label/");
  var curpage=words[1];
  alert(curpage);
  alert(location.href);

• date and time

  // dd-mm-yyyy
  var today = new Date();
  var dd = today.getDate();
  var mm = today.getMonth()+1; //January is 0!
  var yyyy = today.getFullYear();
  if(dd<10){dd='0'+dd}
  if(mm<10){mm='0'+mm}
  dateValue = yyyy+""+mm+""+dd;
   
  // hhmm format 1230
  var date = new Date();
  var hours = date.getHours();
  var mins=date.getMinutes();
  hours=(hours)*100+mins;
  //alert("now (hh.mm) : "+hours);

• interactive on user end

  <form>
  <input type="text" id="alphanumeric" size="25"></textarea>
  </form>
   
  <script type="text/javascript">
  document.getElementById("alphanumeric").onkeypress=function(e){
  var e=window.event || e
  var keyunicode=e.charCode || e.keyCode
  //Allow alphabetical keys, plus BACKSPACE and SPACE
  if (keyunicode=97) then return "AppleScript is launched."
  if (keyunicode=88) then return "Xcode is launched."
  return ;
  }
  </script>

• get window inner width and height (ref)

  var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
  //alert(x+" "+y);

String contains:

var s = "foo";
alert(s.indexOf("oo") != -1);

• 2D array in Javascript

  var items = [[1,2],[3,4],[5,6]];
  alert(items[0][0]); // 1
   
  var x = new Array(10);
  for (var i = 0; i < 10; i++) {
  x[i] = new Array(20);
  }
  x[5][12] = 3.0;

• Vanilla JS: the plain Javascript without additional library, a cool name just to say you don't use extra js library like jQuery.

• javascript image viewer and gallery script
  • various kind of image pop-ups and slide effect: http://highslide.com/
• jQuery, a feature rich javascript library.
• more library to be added later

• jQuery is a extremely useful JavaScript library that widely used in almost all modern website, and it can speedup a lot on code writing by using its built-in coding format and functions.

• before DOM are loaded, check script compared

  // regular js
  window.onload=function(){ alert("Hello World");} // ensure all assets (image, code) loaded before script
  // jQuery
  $(document).ready(function(){alert("Hello World");}) // ensure html code loaded before script

• code

  document.getElementById("mainTitle"); // Element
   
  document.getElementsByClassName("navBtns"); // Element-s
   
  document.getElementsByTagName("h1"); // Element-s
   
  document.querySelector("#mainTitle"); // return first element
   
  document.querySelectorAll(".navBtns");

to do

• a headless webkit browser, a command browser that useful for web content related automation and test with javascript
  • download: http://phantomjs.org/

• CasperJS: navigation script for PhantomJS
  • http://casperjs.org/

Key Usage

1. web data scraping
2. page rendering
3. network monitoring