http://www.lynda.com/JavaScript-tutorials/What-you-should-know/81266/87514-4.html
Javascript Reference Guide
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
[Chapter 01]
software: aptana ide, firefox and firebug(http://getfirebug.com/)
to install aptana on ubuntu 14.04
[1]
sudo add-apt-repository ppa:webupd8team/java
sudo apt-get update
sudo apt-get install oracle-java7-installer
sudo apt-get install libjpeg62 libwebkitgtk-1.0-0 git-core
[2]
sudo unzip Aptana_Studio_3_Setup_Linux_x86_64_3.6.1.zip -d /opt
[3]
save the following to aptana3.desktop, sand move it to /usr/share/applications
[Desktop Entry]
Version=1.0
Encoding=UTF-8
Name=Aptana Studio 3
GenericName=Integrated Development Environment
Comment=Aptana Strudio 3 Integrated Development Environment
Exec=/opt/Aptana_Studio_3/AptanaStudio3 %F
TryExec=/opt/Aptana_Studio_3/AptanaStudio3
Icon=/opt/Aptana_Studio_3/icon.xpm
StartupNotify=true
StartupWMClass="Aptana Studio 3"
Terminal=false
Type=Application
MimeType=text/xml;application/xhtml+xml;application/x-javascript;application/x-php;application/x-java;text/x-javascript;text/html;text/plain
Categories=GNOME;Development;IDE;
js is a scripting language
it working in the web browser
can’t access the local files
cannot’ directly access the database
can’t access the hardware
it is developed to manipulate the web pages
use web browser as the host program
[Chapter 2]
(1) where to put javascript
<script>
put your scripts here!
</script>
you can put it in head section or body section
but it is recommended to save it in a separate js file for better management
if you use separate js file, in the main html file, you need to specify the source for script section, like
<script src="myscript.js"></script>
then in the myscript.js,
you only need to add the script function or statements
in html5, you need to add script type
<script src="myscript.js" type="text/javascript"></script>
if you need to lay out the page format using js, put the scripts in the head section.
otherwise, it is recommended to put it at the bottom of body section to avoid delaying page rendering.
(2) where to put comments
<script>// your comments
/* or this style*/
alert("Hello, world!");
</script>
(3) create variables
var xxx = 100;
var x,y,z;
var x =10, y = 20;
js supports variable data types
in mac, you can bring out the console window in chrome by using "option + command + J".
Then, you will see the console log.
(4) display data
window.alert()
document.write()
innerHTML
console.log(), such as console.log(a, b, c)
(5) conditions
if-else, just like C
(6) operators
like C, but "=" usage is interesting
=
==, check only the value
===, strict equal check, check both the value and data type
js also support ternary operation, like
condition ? true : false;
(7) console usage
console.debug/info/warn/log/error/...
(8) loops / iterations
do-while, for, break, continue, their usages are like C
(9) create functions
variables inside the js function are local
--------------------------------------------------------------------------------------------------------
Chapter 3 : types and objects
--------------------------------------------------------------------------------------------------------(1) array
var multiplevar= [];
multiplevar[0] = 1;
multiplevar[1] = "hello";
or var array = [10, 200, "my name"];
use array property:
array.length
use array methods:
array.reverse()/join()/sort()
(2) working with numbers
js numbers are double type
to convert and check whether the data is a number
math object is neat
you can directly call it use Math.xxx().
(3) working with strings
string properties
split, touppercase, indexof, slice,substring, substr,
string comparison is case sensitive
(4) working with date
var today = new Date();
// year, month, day
var yr2k = new Date(2000, 0, 1);
compare date using gettime() method, instead of comparing two dates directly
(5) working with objects
var player = new Object();
player.name = "xiaoming";
player.id = 1001;
player.score = 999;
var player1 = {name: 'Fred', score: 80, rank: 2}; var player2 = {name: 'Sam', score: 77, rank: 3};
use this as self reference object inside the function, to facilitate accessing the data
// attach methods (functions) function playerDetails() { console.log(this.name, this.score, this.rank); } player.logDetails = playerDetails; player1.logDetails = playerDetails; player2.logDetails = playerDetails; // show properties using method player.logDetails(); player1.logDetails(); player2.logDetails();
--------------------------------------------------------------------------------------------------------
Chapter 4 : Document Objects
--------------------------------------------------------------------------------------------------------
working with nodes and elements
element node
text node
use getElementById or getElementsByTagName to find the element node
use innerHTML to extract the text
--------------------------------------------------------------------------------------------------------
Chapter 5 : Working with Element Nodes
--------------------------------------------------------------------------------------------------------access
change
create dom element
var myElement = document.querySelector('#list') var myNewElement = document.createElement('li'); myElement.appendChild(myNewElement);
var myText = document.createTextNode('New list item text');
myNewElement.appendChild(myText);
var anotherNewElement = document.createElement('li');
var secondItem = myElement.querySelectorAll('li')[0];
myElement.insertBefore(anotherNewElement, secondItem);
--------------------------------------------------------------------------------------------------------
Chapter 6 : events and event listeners
--------------------------------------------------------------------------------------------------------
some of the events:
onload
onclick
onmouseover
onblur
onfocus
method 1:
<button onclick="alert('hello, world');">
onload
onclick
onmouseover
onblur
onfocus
method 1:
<button onclick="alert('hello, world');">
run some javascript
</button>
</button>
myelement.onclick= function()
{
// put your code here
}
window.onload = function() { ... code ... };
nameField.onblur = function() { ... code ... };
myElement.onclick = function() { ... code ... };
method 3:
document.addEventListener('click', myFunction, false);
document.addEventListener('click', anotherFunction, false); document.removeEventListener('click', anotherFunction, false);
use JQuery (or another library) instead of writing your own cross-browser code
// anonymous function document.onclick = function() { alert('You clicked somewhere in the document'); };
//listener var myImg = document.querySelector('img'); function myFunction() { alert('You clicked the image'); } myImg.addEventListener('click', myFunction, false);
when you put the js file in the head section of a html file, it is recommended to use window.onload() to make sure the script runs after contents are loaded.
onfocus and onblurr
var emailField = document.querySelector('#email'); emailField.onfocus = function() { emailField.value = 'onfocussss'; } emailField.onblur = function() { emailField.value = 'onblurrrrr'; }
working with timers
--------------------------------------------------------------------------------------------------------
Chapter 7 : Debugging the javascript
--------------------------------------------------------------------------------------------------------firebug in firefox
--------------------------------------------------------------------------------------------------------
Chapter 8 : Building Smart Forms
--------------------------------------------------------------------------------------------------------