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.................