Inner HTML

-First of all:

• you should know the relationship between  JavaScript and HTML where JavaScript is a way to make the events in the HTML page turn it to actions.
• get elements from HTML page you can see this article: JavaScript and HTML
• Now,after we get our element from the HTML page we want to use it and change it for example we'll have text box and label and button after clicking a button we should get the value of our text box and see if its equal to zero and then if it was zero we should write zero in the label

-Document.getElementById("Id"):

• Document is an object and it has a special method getElementById(id_String) this will get the element from HTML page and every element in HTML page has a unique ID we declare it there's no defaults here we should give every element we want to use a special ID.

-InnerHTML:

• if we write var x=document.getElementById("text"); this will store an object in the variable x and since its an object so it has special properties and methods one of the is InnerHTML this will get the HTML inside that element if it was a tag or a text
• x.innerHTML: this will take the HTML inside the element of ID text so if we write y=x.innerHTML; so for example if the element of ID has a text "hello" then y will have a value "hello"
• if we want to change whats inside that HTML element of Id "text" we can easily do this:

•  as you can see in this code first we get the HTML element which is an Object and have a special methods and properties  just like x.value and y.innerHTML the first one is used to get the value of text boxes and the second is to change the html inside that tag of the ID "text" 
• lets see how does it look like :

 

lets put 1 in the text box then click the button:

• innerHTML will delete everything in that tag if it was text or any other tag so BE AWARE .

-Related to this post:

• Objects in JavaScript
• Input in HTML

Javascript Errors exceptions and handling

-Error:

• There might be alot of errors in your code which you cant see or know what is it maybe you'll put a double into integer variable and this is an error maybe the browser console"compiler" wont see this an error but it might cause a problem for your project

-Try statement:

• this statements is used to check the code from errors but it wont show that error it'll just find it and throw it to another statements which called "Catch"

-Catch statement:

• it'll handle the error from the try block and catch it and then you can print it to show your error 
• so Try statements wont work by itself and catch statement doesn't have a value without the Try so there isnt a Try statement without a catch statement.

-Finally:

• its an extra component which has code into it that will run after the try is clean of errors and the catch didn't get any error 
•  we all know what the function "alert" do it shows up a message text box into your screen and it has a  text 
• lets see this example:

why this is an error because there isn't a function called "alerttt" so this will produce an error and it'll be like this:

thats the error.

• the catch parameter "err" is the error the the try statement could find it  so it'll pass it to the catch function by a parameter

-Related to this post:

• Javascript Functions

Break and continue statements

-For and while loops:

• we talked in previous lesson about for and while loops and we now know what is it used for and you can check it again here For and while loops
• sometimes we want to make a condtion if it happens then we dont want our for or while loop to continue just break that loop and execute the code out of that loop

-Break:

• its a javascript Keyword which used to stop the executing of the code running inside the for or while loop 
• you can use it for different purpose we wont make a specific example here :

Comparison and Logical operations

as you can see this will lead to add 1 to the first and second elements of the array but when it'll come to x[3]=55 this will break the loop so the third and fourth elements wont be added to one.

• its the same for the while loops 

-Continue:

• its has a opposite job this will check the condition and see if its true then go and execute the code in the for or while loops but if its not true then it wont execute it but it wont get out the for loop it wont break it thats very important to know so after it continue it'll start a new counter.

this example shows that when the array value is 55 it wont add one to this element it'll increment the "i" counter and start a new loop.

-Related to this post:

• For and While statements
• Arrays
• If statements
• Comparison and Logical operations

For and While loops

-Array elements access:
in our article about arrays here Arrays we talked that its a special type of object and its a variable that can store more than one value so the best way is to write something that can call a code more than one time and for different values.
-For loops:

• If you want to execute the same code over and over again and with different values you can do it like this: let see this array elements

what if our array has 1000 elements sure we wont do it like this so lets use our for loops

-For loops syntax:

• for(initialize a counter;stop condition;increment counter)

-initializing a counter:

• its the counter of our loop where it should start since the counter is a variable so it can be zero or 10 it can be any NUMBER
• stop condition: we don't want our loop to get into an infinite loop because it wont stop executing and it might cause a system freezing if out program was big "for java,c++,c# programs"
• increment counter: since we want to access different values in arrays for example this is the way to go through the elements indexes we can go one by one or maybe ten by ten 
• lets see this example which will make everything clear:

-lets explain this code:

• "int i=0": our counter is the variable is "i" which start with the value of zero
• "ilt;4": the stop condition is when the "i" is still smaller then 4 and you can check this article about comparisons Comparison and logic operations so while the "i" is still smaller the code "x[i]+1" will keep executing
• "i=i+1" it'll increase the "i" by 1 so each loop "i" will be added to 1 so let see this :

          loop 1:

          i=0;

          x[0]+1;

          loop 2:

          i=1;

          x[1]+2;

          loop 3:

          i=2;

          x[2]+1;

          loop 4:

          i=3;

          x[3]+1

          loop 4:

          i=4;

          it'll break the for loop since it doesn't satisfy the loop condition that the i should be smaller than 4 so              every time the loop finish it'll check if the another loop can run or not by checking the loop condition  

• here we can access all the array elements since we can get to the i=3 and its the last index of our array
• we can change the increment so it can be i=i+2 so it'll go through every two elements 

-While loops:

• it has the same job of the For loops but in different syntax and in different way 

-While loops syntax:

• while(condition){........code.......}
• as you can see its just in a different way but its the same main idea
• initialize counter since we only have a place for the stop condition we should declare the counter out of the while loop
• counter increment it should be inside the while body so every time the code execute it increase the counter by 1 for example and the go again the the while condition and check it and decide if the code will run again or not according the the counter value if its valid or not.
• let see this example:

-BE AWARE:

• you should be aware about the stop condition because for example if you have an array of 100 element and your stop condition was "ilt;120" the for loop will go though 20 elements which aren't defined and will get a very strange a random variables and maybe will cause an error and your code will stop executing .
• Note: it has a lot of explanation but this is the easiest for beginners :).

Comparison and Logical Operations

-Comparison operations:

• they are used to compare between two values in the logical statements just like "if statements"
• this operators return a boolean value True or False
• lets assume the we have a value x=10 lets see this table :

Operator	Description	Example	Returned value
==	compare the equality of value to x=1-	1)x==10 2)x==8	1)True 2)False
===	compare the equality of value and type to x=10	1)x===10 2)x==="10"	1)True 2)False
!=	check if the value isnt equal to x=10	1)x!=4 2)x!=10	1)True 2)False
!==	not equality of value and type of x=10	1)x!==4 2)x!==10 3)x!=="4"	1)False 2)False 3)True
>	check if a value is greater than x=10	1)x>100 2)x>9	1)False 2)True
<	check if a value is smaller than x=10	1)x<9 2)x<100	1)False 2)True
>=	if a value is greater than or equal to x=10	1)x>=10 2)x>=5	1)True 2)False
<=	if a value is smaller than or equal to x=10	1)x<=5 2)x<=100 3)x<=10	1)False 2)False 3)True

-How to use these operators:

• we said that these operators are used in the logical statements just like if statement lets see an example to check if the student is failed or not by comparing his mark if its smaller than 50:

if you dont know much about if and else statements you can check out this article If statements

-Logical operators:

x=10

Operator	Description	Example	Returned Value
&&	And two comparison must return true	if(x>8 &&x==10)	true
||	at least one comparison must return true	if(x!=10 !=x>5)	true

Arrays

-The difference between objects and arrays ?

• objects are variables with multiply properties and methods 
• Arrays are also special kind of objects because it has its own methods and properties 
• arrays are variables that can store more than one value in one variable so there can be an array of objects and the arrays looks like this: 

        this is an imaginary pic of how the array stored in the computer memory and if you don't know much               about variables you can check this Variables in Javascript and Variables life time 

here its an array x of 12 elements 

-Facts about Arrays

• each element in the arrays has its index 
• by default the first element in the array is indexed by 0 so if we have array of 10 elements the index of the last element will be 9
• your array elements are the same as the array data type so you cant put an integer into a string array expect the data type is var so you can put anything you want
• facts is a very good choice for programmers to reduce the using of the limited resources for example if we have a school which have 1000 students we can make object of student which have the name,address,tel....etc and then make one or two arrays of object student its much better than building 1000 object for each student/

-Creating Arrays:

•   whats the syntax to create an array lets :

                 variable DataType array_name=[value1,value2,value3.........];

               example:

              another example for string array:

• Another way to create an array which is be the keyword "new" this will create an array in the memory:

-How to access any element in the Array:

we said that each element has its own index so simply we can use that index to get the value in that index 

y=beginners why?

because we said that the index starts with 0 so if we want to get the "Blog" we should get it using the x[2] because its 0,1,2 thats very important 

Note: this is not an advanced way to get values from indexes 

and here's another example:

-Arrays methods and and properties:

• array_name.length: this will return the number of array elements
• array_name.sort(): it'll sort the array elements according to alphabetical order

------as always this was the most important things about arrays remember guys its a beginners blog so i just have to make things simple and clear for you and then you should go on with it----------------------------

Math Object

-Remember:

• Objects are like variables but they have properties and methods and we know how to use them and if you didnt read that article Go here: Objects in Javascipts

-Math object:

• its a speical object with has a few methods about Mathematical things these methods and functions are already been written by the Javascript founders and they make it in an object just to make it easy for you to get access for this

-Math methods
         
     1.min(x1,x2,x3..........xn): its a method"function" that returns the minimum number from a group of numbers

    2.max(x1,x2,x3,.........xn): it returns the maximum number from a group of numbers

    

    3.random():this will generate a radnom number

    

    4.sqrt(x): this method will give you the square root of the number

    5.sin(x) and cos(x): this will return the sine and cosine of x

    6.pow(x,y):the value of x power y 

 this will give you 25

-this was the most used Math methods and sure there's more but they arent that important just like these methods 

                           ......................thank you for coming here.................

Variables lifetime

- You should know that after declaring the variable it wont stay in the Ram forever it'll be delete it after you close your program or webpage  and it wont be always available wherever we want in our webpage to know more about this let see this article:
-Local variables:

• when you declare a varaible into a function then it'll be local
• that means you wont be able it use it out of the function braces {} and its value will be radnom since that what memory do after you finish that task you want to do with your variable the memory will use it for another thing and you should know that every varibale you make it'll have its own address in the memory but its not so important to know more about these stuff but another thing to know thats after the functon finish using this varaible it'll use it for another thing.
• let see this example:

y wont have a value of 2 it'll have a random value or it'll show you an error in some compilers

-Global variables:

• this kind of variables can be use in all the script why ? because we declare it out of any braces so all other function will be able to see it and use it since we know that the functions delete the local variables inside it:

now y and z will be 2 as you can see we declare x out of any function

Javascript Functions

-Why functions?

• its a block of code which execute when something call it 

-What the benfits of useing functions?

• if we want to find the max between 10 numbers we should make the comparison 10 times by writing 

• instead of writing a code more than one time we can write a function and then call it any time we want so for the previous example we can call the function anytime we want to get the max number 

-Functions syntax:

• to define a function we should start with "function" keyword then the name of the function then "()" and the blocks braces "{}"
• name of the functions can include :letters,digits,signs,underscore BUT it can have a space 

-Functions parameters:

• since we want to call our functions and use it to do a special task we'll want to get some data from other parts of the code but how can we use them in our function its simply by passing them through parameters lets see this example:

-Function Return Statements:

• after calling our functions and after getting the code executed where the value of that function will go it'll be usefulness if the function called and then finished without getting data from it thats why we should use the Return statements

          what do Return do?

• first of all since just like every programming language the compiler "which execute the code and change it from data to inforamtions" it reads line by line so when it reach the "return" statemnts it stop compling and the return value will return to the caller of that function :

• now x have the value of x+y which is 13

-Functions and objects:

• you should know that functions are objects because they have their own properties and methods

------------------------------------------------The End----------------------------------------------------

--------------------------------------------hope you like it-------------------------------------------------

Objects in javascript

lets imagine we have a student what does this student have

1. First name
2. Last name
3. address
4. tel
5. ......etc

all this each student have them so if you want to make a web page for school which has 100 students if we want to store the students varaibles we'll need for example 5 varaibles for each students so in total we'll have for example 500 varaible......
is that a good number of varabiles ?
cant we reduce this because this will make a problem for the memory or for the database but sure not for 500 varaibles but assume we have a big school of 2000 students!!! thats not acceptable at all
thats why they created Object.
What are Object?
objects is a variable with mutli properties and methods "functions" so for our school we can have one object but it'll have more than one section "just saying" so the student object will be like this:

where the normal variable only have one value 

in this way we'll have only 100 objects and this is more advanced way and more creative since we wont write the 500 variables 

so first name ,last name,.....etc are properties of that object and it has it own value.

Objects can have its own function so for example we can here put an fuction that calculate the Gpa of student so our object will be like this :

how to call or use one proprity of our object:

first of all we should know how to make a new object .

and you should know you can easily use the "var" to make an object lets see this example:

so our object have 3 proprites which is 

1. first name
2. last name
3. address

Note: we didnt make a space in naming our variable because it'll be a syntax error but we can make it like this "first_name"

how to use it:

this will alert "Basel"....

or you can store it in another variable let see this:

and as we said objects can have methods "functions"

and dont worry we'll make an article of function in javascript so the object student will call the function name which will alert "Name".

 i hope i didnt make it long article 

Javascript and HTML

we see before how to call function in javascript using the HTML elements by the events handlers but how can we use the HTML elements in our javascript code for example if you want to make a simple example of validation for text box

• the text box shouldnt have a zero value but how can we get the value in our text box 

• getElementById:
• this will get the HTML element by its Id we knew that every HTML elements has id,name,value.....etc so its time to use the ID and its very easy the most important thing is there shouldnt be two Id's for two different HTML elements so each element will have its own Id and we'll use that id but we should do it like this 

        Document.getElementById("Element_id");

        and the Document here means our HTML page and all its contents.

• lets see this example the text box shouldnt have a zero value:

what is "x.value" since HTML elements has more than one attribute so it has id,name,value.....etc we should write what we actually want but that doesnt mean there's "x.id" its only another function that get the value of our HTML elements 

and after we click the button this will happen:

Actions and Events 2

• onmouemove: when the pointer of the mouse move this will occur 
• onmouseout: this will happen when the mouse pointer is out of the element 
• onmouseup:when a user releases a mouse button over an element
• onunload: this is just like the onload function but its opposite because this will occur when the page didnt load for some reasons 
• onerror: if something was wrong with your code this function will be called or if image didnt load for example because of losing internet or any other reason
• onselect: the event occurs when the user select some text (for and textarea)
• onfocus: just by its name when the elements get focused the event will happen
• onscroll: when you scroll your page down or up a function or even will be called 

• this is the most used events handlers that you can use in our page there are some others but we'll see them only when we will need them.

Actions and Events

When we click on the button we need something to happen and some code to execute we have some special functions we can use them when a button clicked or a key pressed lets see some of them now

•  OnClick function: this function can be used when you click on your mouse on Button,text,link.....kinda all HTML elements lets see this example:

• Onkeypress: this will call out function everytime we press a key on the keyboard and we usually use this in the Text Boxes for example if we wont a immediate validation lets see this :

• onload: this can be used only in the <body> tag this will call the function only when the page finish loading of all its contents 

• onblur: this is a good way for validation this will call the function when we click on the text box and then click out of the text box i mean it calls when the text box lose focus 

• onmouseover: you can know this by its name this will call the function when the mouse is over our HTML element we can use this on images when the user move the mouse over the image we can make it bigger and we'll see this later.
• onkeydown: the events will occurs while the user is pressing a key 
• ondbclick: this will call function when you click double click on the element 
• onmouseenter: the events will occurs when the mouse enter the element 

there's much more events which we'll see in the next article ,Have a nice day guys 

variables Arithmetic operations

as we said before variables are containers of values and data so we can use this data and store them and do some operations to them just like the arithmetic operations

• Add:

the value of z is the sum of x and y

• Subtract:

Note if z was integer this will be Error because it can store negative value so be Aware

• Multiply:

• Division:

Note : this wont be Error if z where Integer but it wont get only the Integer part what does that mean the output of 1/5 is 0.2 this means Z will be 0 only and if the output was 2.2 the value will be 2 only so be AWARE

If statements

• If statements is very important in our job how? you can use this when we want to make a speical action to happen only when our condition of that thing happen for example you want to delete what in  the text box only when its empty for this we use if(statements){............} 
• you should know that everything you write our of these braces of the if condition it'll happen no matter if the condition occurred or not 
• lets see a few example and show the output of it:

the alert wont happen unless the value of x is zero 

• what if we wont do to an action if our condition didnt valid i mean if x wasn't zero we
   should show something we can easly write:

         but this alert(1); will happen even if the condition happened or not so how to stop this from happening           unless if the condition didnt happen this can happen if we use else statements this will happen only and           only if the first if didnt happen and we cant use it without previous if lets see this
 

alert(1) wont happen unless x is not 0

Variables Data Type

we know what are variables but we use the "var" to initialize a variable without making it for specific type since we know we have numbers,text,alphabet and Boolean   the "var" is like a general container which can store anything we want but we cant store text in number variable for sure lets see the variables data type :

1. Integers: are then numbers without negative value its from zero to the last number in the world but its all positive and it'll be an programming Error which might stop the page from doing some stuff because of that error how to declare this kind of variables :
   
2. Strings: strings used to store and save text or an array of letters or just one letter as you wish 
   
   
   
    3.  Boolean: it has one two values "true" or "false" its just like the "on" and "off" in the electronic stuff        we usually use this in the conditions we want to happen before the action should start 
        
   
   these are the most common used data type of variables there's float for number and its between -36,000 and +36,000 and double for numbers too but has more numbers than float 
   
   
   NOTE: if you dont want to get stuck with all these types just use the General form of it "var" but you must know all this 
   
   

Javascript

we know now what does javascript means and how to use it now we should know some of programming things to get used about the javascript

• variables : its container for data and informations just like text ,numbers,and maybe true or values data how to use variables and how to save them and store them in the computer memory but you should know that its temporary storage that means when we close our webpage the variable will delete the value inside it and we can store it in an advanced way later and to 

          lets see this example :

                      

\

now x have a value of 1

         here's another example : 

         Note :if we want to store a text in a variable we should use a "Text" 

        

i hope you like it