Javascript and jQuery
Summary
Javascript ( ecmascript 3 - 1999 )
Javascript is a scripting language that works in the browser
Javascript is interpreted, not compiled
Javascript is CASE - SENSITIVE !
how to insert: <script src="myScript.js" type="text/javascript"></script> ( best before closing body-tag )
Variables
ex. var myNumber = 789;
Conditional code
if ( condition ) {
//code
} else {
// different code
}
== (equality) or === ( strict equality)
!= (not equal)
< >
Operators and Expressions
+ - * / = ( assignment )
logical and : && ex. if (x==y) && (a==b)
logical or : || ex. if (x==y) || (a==b)
modulus ( remainder) : ex. var year = 2011;
var remainder = year % 4;
prefix / postfix : ++a <--> a++
ternary : condition ? true : false ( mini if else )
alert box ----> firebug : console.log ( .info, .error, .warning )
Loops
While loop
while ( condition ) {
//code
//a++
}
Do while loop
do {
//code
//a++
} while ( condition );
For loop
ex. for ( var i=1; i<100; i++ ) {
//code
//code
}
! break; ----> jumps out of the loop ( bottom )
! continue; ----> done with this iteration ( back to the top)
Functions
ex. function name ( x,y ) {
var value = x + y;
// code;
return value;
}
x and y -----> parameters passed to function
value -----> result returned from function
! variable scope ( var in function = local )
! global scope ( var outside function = global )
Arrays
arrays are zero-based !
ex. var multipleValues = [50,60,"me"];
var multipleValues = new Array(); ----> objects
METHODS are functions that belong to an object!
ex. var multiValues = [10,20,30,40,50];
var other = multiValues.reverse();
var other = multiValues.join();
var other = multiValues.sort();
Numbers
All javascript numbers are 64-bit floating point numbers !
NaN = not a number ex. 5* "b"
var myNumber = Number(foo); ----> make it a number
or isNaN(myNumber) ----> checks if it's not a number
or !isNaN(myNumber) ----> checks it it's a number
math object
ex. Math.round(x);
Math.max(a,b,c);
Math.min(a,b,c);
Math.PI;
Math.random();
Math.sqrt();
Math.log();
Strings
" ...... "
! escape the quotes /" .... /"
string property
string.length
string methods
.toUpperCase();
.split("...");
.indexOf("..."); ---> not found returns -1
.lastIndexOf("...");
phrase.slice(x,y); ---> x = start position ; y = length
! in a condition ---> ABCD ...less than... abcd
Dates
Dates are objects !
When comparing dates ---> use getTime() !
ex. var today = new Date(); ---> current date and time.
Date methods
var today = new Date();
get methods
today.getMonth();
today.getFullYear();
today.getYear(); ---> deprecated!
today.getDate(); ---> = day of month (1-31)
today.getDay(); ---> = 0 ... 6 ; 0 = sunday
today.getHours(); ---> = 0 ... 23
today.getTime(); ---> = milliseconds since 1/1/1970
set methods
today.setMonth(7);
today.setFullYear(2014);
today.setDay(0);
Objects
ex. arrays, dates, ....
create object ---> ex. var player = new Object();
properties
player1.name = "Fred";
player1.score = 10000;
player1.rank = 100;
methods
function playerDetails () {
// display info about each player
console.log(this.name + "...." + .... );
}
player1.logDetails = playerDetails;
player2.logDetails = playerDetails;
player1.logDetails(); ---> Call
player2.logDetails(); ---> Call
DOM
DOM = document (webpage) + object (pieces) + model (set of terms)
node types (most important)
1. element node
2. attribute node
3. text node
ex. var myElement = document.getElementById("someId");
var myListItems = document.getElementsTagName("a"); ---> array
methods
myElement.nodeType;
myElement.innerHTML;
myElement.childNodes;
myListItems.length;
myElement.getAttribute("align");
myElement.setAttribute("align", "left");
create
var myNewElement = document.createElement("li");
myElement.appenChild(myNewElement);
var myText = document.createTextNode("newtext");
myNewElement.appendChild(myText);
Events and Event Listeners
ex. event names : onload, onclick, onmouseover, onblur, onfocus, ...
handling events ( 3 methods )
1. directly in html
ex. <button onclick = "alert('Hello World');">javascript button onclick</button>
2. anonymous function
ex. myElement.onclick = function() {
// event handler code
// ...
};
3. adding and removing event listeners
ex. document.addEventListener('click', myFunction, false);
ex. document.removeEventListener('click', myFunction, false);
!! difference in IE8 and older ---> document.attachEvent('onclick', myFunction);
!! to be cross-browser safe ---> use jQuery ( or another lib.)
!! everything must be loaded before you run your javascript !!
solution ---> window.onload = function() {
// call any function you need
}
Timers
methods for timers
setTimeout(myFunction, 3000); ! in milliseconds and just once
setInterval(myFunction, 3000); ! in milliseconds and repeating
how to stop :
var timeoutHandle = setTimeout(myFunction, 3000);
var intervalHandle = setInterval(myFunction, 3000);
clearInterval(intervalHandle); ---> make use of the value returned by setInterval and setTimeout
clearTimeout(timeoutHandle);
Forms with javascript
* field values
* field events
* form events
Text fields
main property ---> myTextField.value
main events ---> onfocus, onblur, onchange, onkeypress, onkeyup, onkeydown
Checkboxes and radio buttons
main property ---> myCheckBox.checked ( true or false )
main events ---> onclick, onchange
Select lists
main properties ---> mySelect.type ( select-one or select-multiple)
select-one : mySelect.selectedIndex
select-multiple : mySelect.options[x].selected ( true or false )
main events ---> onchange