Javascript in HTML

  • 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 operation -Javascript

String contains:

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

Data Process

  • 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;

useful online scripts for your web development

  • 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
  • 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

jQuery selector functions

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

jQuery event listener functions

to do

Javascript based Technology

  • a headless webkit browser, a command browser that useful for web content related automation and test with javascript

Key Usage

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