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