[SAOUDI] Learn JavaScript

JS

JavaScript Tutorial

Created By: Abderrahmane SAOUDI

variables

var Name = value;

Numbers 1, 2,3, 4, 12.54 ....

Strings Hello World!

Booleans [TRUE/FALSE], [ON/OFF], [YES/NO]

Arrays Notes (15, 13, 9, 20, ...)

Objects person { Name, Age, Country, .... }

Operators

Arithmetic Operators

+ [Addition]1 + 2 = 3

- [Substraction]5 - 2 = 3

* [Multiplication]3 * 2 = 6

/ [Division]10 / 5 = 2

% [Modulus]38 % 5 = 3

( ) [Parentheses](38 % 5) + 2 = 5

Increment & Decrement

[Post Increment] ++var a = 2; var b = 5; a = b++; [a = 5] [b = 6]

++ [Pre Increment]var a = 2; var b = 5; a = ++b; [a = 6] [b = 6]

[Post Decrement] --var a = 2; var b = 5; a = b--; [a = 5] [b = 4]

-- [Pre Decrement]var a = 2; var b = 5; a = --b; [a = 4] [b = 4]

Assignment Operators

+ =a = b [a = b]

+=a =+ b [a = a + b]

-=a -= b [a = a - b]

=a = b [a = a * b]

/=a /= b [a = a / b]

%=a %= b [a = a % b]

Comparison Operators

== [Equal to]5 == 4 [False]

=== [Identical = Equal and same Type]5 === "5" [False]

!= [Not equal to]5 != 4 [true]

!== [Not identical]"3" !== 3 [True]

> [Greater than]3 > 4 [False]

>= [Greater than or equal to] 1 >= 1 [True]

< [Less than]2 < 5 [False]

<= [Less than or equal] 3 <= 6 [True]

Logical Operators

&& [AND]True && True [True]

|| [OR] True || False [True]

! [Reverse]!True [False]

Arrays

Creating Array

var arrayName = new Array( value1, value2, ....);

var arrayName = [ value1, value2, ....];

var arrayName = new Array ();

arrayName[0] = value1;//Note that counting arrays start by 0.
arrayName[1] = value2;
arrayName[n] = valueN;//you can choose any place in the Array to store value.

var arrayName = new Array (number of elements);

arrayName[0] = value1;
arrayName[1] = value2;//you can't store values outside of it's range.
arrayName[n] = valueN;//Number in [] counted by (number of elements - 1).

Combining Arrays

var array1 = [ Values1 ];
var array2 = [ Values2 ];
var sum = array1.concat(array2);

//Concat: take Values1 and Values2 then put them in new array called 'sum'.

Conditions

if stetement

if ( Condition )
{
// Code work when condition is True.
}

else if ( Condition )
{
// Code work when the previous if (else if) condition is False.
}

else
{
// Code work when NO of the previous if (else if) conditions is True.
}

switch stetement

switch ( expression )
{
case value1 :
// This code work when expression is equal to value1.
break;
// break out of the switch stetement.

case value2 :
// This code work when value1=false and expression is equal to value2.
break;
// break out of the switch stetement.

default :
// This work when NO of case match.
break;
// break out of the switch stetement.
}

Loops

for loop

for (stetement1; Stetement2; Stetement3)
{
//This code work when condition is True.
//When this code finish it will check again.

//Stetement1 : Declaration number that loop start with.
//Stetement2 : Condition that check every time for running the loop.
//Stetement3 : this work every time loop is finished.
}

while loop

while ( Condition )
{
//Code repeat as long as Condition is true.
}

do while loop

do
{
//Code executed at least once then check for Condition.
//Code start repeating as long as Condition is true.
}
while ( Condition );

Functions

function Name ()
{
//Code to be executed when the function called.
}

//To call the function.
Name ();
//You can call the function as many times you need.

Function's Parameters

function Name (paremeter1, paremeter2, paremeter3)
{
//Code to be executed when the function called.

return;//Stop here and exit function.

return value;//Stop here and exit function.
//The function become a vaiable and take returned value
}

//To call the function.
Name (value1, value2, value3);
//To call the function.
//You can call the function as many times you need.

Exaples of some functions

Alert function

alert ( stetement );
//This will show a box has the result of stetement as text.
//User must click [OK] to continue using website.

Prompt function

prompt ( stetement1 , stetement2 );
//This function show box that take input from User.
//stetement1: text that will apear above of input label.
//stetement2: (Optional) text that will apear inside the input label.

Confirm function

Confirm ( stetement );
//This function ask question (stetement) and return [True/False] from User.

Objects

//Object is type of variables that take many values.
var objectName =
{
Name1: value1,//Every value called Property.
Name2: value2,
... ,//You can add any number of properties you need.
NameX: valueX//Note that we don't add anything after last property ( , ; ).
} ; //See that object end by semicolen (;).

//To call and access to object's properties.
objectName.propertyName;
// OR
objectName["propertyName"];

Methods

//Method is function stored as object proberty.
var objectName =
{
methodName: function(Parameters) { /* Code here */ }
};

objectName.methodName(Values);//To call a Method.

Examples of Methods

document.write(Stetement);

var1.concat(var2);

DOM

Document Object Model:
is the way to access any tag from JavaScript and control its content and attributes.

Select elements

document.body.innerHTML = "Some TEXT here";
//document:..... it used to access and control the page existing in (or called from).
//The point(.):. it used to enter in the item and return its content.
//body(any TAG): it used to choose any tag from page.
//innerHTML:.... it used to write a text inside the tag.

//Find TAG using its own id [#].
document.getElementById ("id");
//Don't use hashtag (#) when calling by ID.

//Find TAG (TAGs) using class name [.].
document.getElementByClassName ("class");
//Don't use point (.) when writing the CLASS name.

//Find TAG (TAGs) using the tag name.
document.getElementByTagName ("tagName");

When you choose many tags (class or tag name), They will store as an Array.

document.getElementBy.......("Name").childNodes;
//Get all children of that TAG (TAGs).

document.getElementBy.......("Name").firstChild;
//Get first children of the element.

document.getElementBy.......("Name").lastChild;
//Take the last children of the TAG.

document.getElementBy.......("Name").hasChildNodes;
//Return if element has children or not [TRUE/FALSE].

document.getElementBy.......("Name").parentNode;
//get the parent of the element.

document.getElementBy.......("Name").nextSibling;
//Find the next child of the same parent of an element.

document.getElementBy.......("Name").previousChild;
//Go to the previous TAG at the same tree level of the TAG.

Modify elements

document.getElementBy.......("Name").createElement ("....");
//This will add new element.

document.getElementBy.......("Name").createTextNode ("Some Text");
//This will show new text.

document.getElementBy.......("Name").cloneNode ("....");
//This will deblicate the element.

document.getElementBy.......("Name").appendChild ("....");
//This will create new element inside the choosed element.

document.getElementBy.......("Name").removeChild ("....");
//This will delete the element.

document.getElementBy.......("Name").remplaceChild (element1, element2);
//This will remplace the (element1) to the (element2).

Change Attributes

document.getElementBy.......("Name").src = "....";
document.getElementBy.......("Name").class = "....";
//This change the source attribute.
//Same with other attributes.

Events

Call event

< tagName event="code JavaScript here" >...< / tagName>

document.getElementBy.......("Name").event = function() { .... };

Some Events

< tagName onclick="some JavaScript code" > ... < / tagName >
//This event work when element is clicked.

< tagName ondblclick="some JS" > ... < / tagName >
//This event start when element is double-clicked.

< tagName onload="JS code here" > ... < / tagName >
//This event work when element has loaded.

< tagName onchange="some JavaScript here" > ... < / tagName >
//This event used with inputs to do some code when value changed.

< tagName onmouseenter="JavaScript code here" > ... < / tagName >
//This event work when pointer get into the element.

< tagName onmouseleave="some JS code here" > ... < / tagName >
//This event start when mouse get outside the element.

< tagName onblur="some JavaScript code" > ... < / tagName >
//This event work when element losts focus (when click outside the element).

< tagName onfocus="some JS code here" > ... < / tagName >
//This event work when element gets focus (when click on the element).

JS

leave comment if you like the page.

Any wrong stetement, wrong code, write line number and i'll correct it

learnJS