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
- angularJS v1 is written in ES, while angularJS v2 is written in TypeScript
- 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
- what is react (LevelUpTuts): https://www.youtube.com/watch?v=0KlRgFEEz0g
- 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
- what is vue.js: https://www.youtube.com/watch?v=FtXd_qQJgfI
- Why 43% of Front-End Developers want to learn Vue.js: https://www.youtube.com/watch?v=p1iLqZnZPdo
- Angular vs React.js vs Vue.js (Academind): https://www.youtube.com/watch?v=KMX1mFEmM3E
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
- 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 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
- download: http://phantomjs.org/
- CasperJS: navigation script for PhantomJS
Key Usage
- web data scraping
- page rendering
- network monitoring