Popup alerts

-Alerts:

• Most of the times while you are using the internet and moving between the website some of them shows up a Popup boxes to tell you something maybe an error in the signup registration or a wrong value of any field 
• Its very good to use them but remember it might be annoying for some users so i prefer you just use it to get your errors not to show it to the user because the user wont get the language of the browser but you can handle it
• the Popup boxes model change from a browser to browser.
• all these functions are all methods of the Window object 

-window.alert("TEXT"):

• First you should know that you can use it without the window prefix
• it get a parameter for the text you want to show 

-lets see this example:

• remember you can use it without the "window." part.

and it'll show like this:

-Confirm Box:

• You can use this box to ask your user and get the answer for example ask him to leave the page or not
• To get the user answer we should have a value and this one is a boolean so if the user click ok it'll return "True" if the user click cancel this method will return "False"

-lets see this example:

it'll show this:

if you press ok it'll redirect you page to Google put if you press Cancel you'll get another Popup box but its an alert that you pressed Cancel

-Prompt Box:

• If you want to ask the user about username or email before going the his destination you should prompt his username and check if its true for example we want the user have a username "Basel"
• this method get to parameters one of them is the text you want to show in our example is"please enter your username" and the second parameter is the default text in the text box and you can leave it empty

-lets see this example:

it'll show you this:

 if you enter Basel it'll show "Successful" if you didn't obviously it'll show "Failed" 

-Related to this post:

• Objects in JavaScript
• If Statements
• Variables Data Type

Browsers Object Model (BOM) Location

-Window and screen objects:

• in the last article we talked about the these two objects where each of them has its unique methods and properties
• you can check out the previous article to get more information JavaScript Browsers Object Model (BOM) Screen and Window

-Location object:

• its one of the objects of our browsers just the Window and Screen objects 
• this object is used to get the URL of the current page you are running on your browser and redirect the browser to another new page

-Location object properties:

• location.href: this return the (URL) of the current page 

• location.hostname:it'll give you the host name of your page for example www.google.com thats a host name but http://images.google.com this is an URL
• location.pathname: it'll return the path name of the URL for example our page URL is :

          URL:http://www.basel.com/computer/downloads/blogger.exe

          Host Name:www.basel.com

          Path Name:computer/downloads/blogger.exe

• location.protocol: protocol is the way your browser connect to the web sites and for most web pages the protocol is HTTP and lets see some of them

1. HTTP: For web pages
2. SMTP:For mail sending
3. FTP:Transfer files
4. VOIP: For video calling just like Skype
5. DNS: All websites on the internet have addresses so this protocol is used by the browsers to get the Ip of the page you wanted and give it back to your browser
6. POP3:Mail sending
7. UDP and TCP : these are connections protocol
8. All these protocol aren't very important for web developing you don't have to learn a lot about them just read some information about what they do.

-Location methods:

• location.assign(URL): this method is used to load a new document(Page)  in your page you can pass the URL by putting it as a parameter

-Related to this post:

• JavaScript Browsers Object Model (BOM) Screen and Window
• Objects in JavaScript
• Functions in JavaScript

JavaScript Browsers Object Model (BOM) Screen and Window

-Objects:

• we know that Objects are special type of variables that have a special methods and properties and you can check out our article about it Objects in JavaScript 

-BOM:

• Browsers objects model it makes the JavaScript code connect with the browser and talk with it
• since most of the browsers have been implemented almost the same of JavaScript code 

-Window Object:

• supported by all browsers:Google Chrome,Firefox,Safari......etc
• All Global variables and functions has been written in the JavaScript code are methods and properties for the Window object lets see this example:

here x is a global variable that can be seen and used from all functions in the script and as we said before the Window object will see x as a property so we can use it when ever we want.

• even the Document object is a property of the Window Object

-Window Object Properties:

• Width: if you want to get the width or our window browser you can use this property of the window Object .
• Height: gives you the value of window height
• lets see this example:

-Window Object Methods:

• window.open(): it opens a new window "tab" for browsers and you can make this new window open any url you want just pass it by a parameter to this method:

window.close(): this method is used to close the current widow you are opening:

this is the most important things for the Window Object.

-Screen Object:

• there's a bit difference between the Window and Screen because for Screen object you can open a new tab or close a one you can just get the color depths and the pixels and that's what the Window object cant do.
• the common thing between Window and Screen objects that they both can give you the width and height.
• if you do this: this will give you the same value

Screen Object properties :

• screen.width: gives us the screen width 
• screen.height: what do you think :) it'll show us the value of the screen height 
• screen.pixelDepth: it'll return the pixel depths value
• screen,colorDepth: gives you the color depths of the screen

-Related to this post:

• Objects in JavaScript
• Variables LifeTime
• JavaScript Functions

Thank you all guys

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