Javascript Related Language in modern web

CoffeeScript, TypeScript and similar language

  • javascript is an old language since start of internet, years pass and thing change in programming world and method
  • these new javascript written method is a re-implementation of javascript in a object oriented fashion (beautiful code in existing programmer eye from other language), which as a intermedia, outputs plain javascript (which works for tens of years and known to starting beginner and oldies); same relation as “sass” for CSS
  • since modern language appear to write better look code in modern days for old language in old days, like pymel in Maya world when you can use python in mel manner.
  • like all new language, if not used often by most people, it just goes forgotten.

Vanilla JS (Javascript), React JS, AngularJS, vue.js

  • Vanilla Javascript: new name for pure javascript after so many new JS framework invented to clear confuse.
  • AngularJS (v1,v2,v4) is a framework for building single page heavy use application, all-in-one html page with interaction for fast content updating; so the browser use code to build page, in contrast of php based server side page build. also anguarJS is from Google
  • React (ReactJS) is a javascript framework for building interactive/dynamic interfaces for those web elements and components, and it allows use html tag (jsx format) in javascript, also it use states and also can be used in server side. (originally from facebook development and inspired by angularJS), then React Native extends to make app in javascript
  • Vue.js is a new javascript framework for adding page interaction (data interactive, view interactive with its logic tags, and function to tag association, like php works in javascript fashion in real time, with concept like app design), mostly for front end. also vue.js is made by a single guy

Javascript Related Language for Mobile App

  • node.js
  • Iconic (v3, v4), Angular,
  • Dart
  • React Native
  • Cordova
  • App build option: Native App, Hybrid App, UI frameworks
  • ….

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 Library

  • 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

PhantomJS

  • 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