Sunday, August 3, 2014

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:


Browsers Object Model (BOM) Location

-Window and screen objects:
-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:







Saturday, August 2, 2014

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:


Thank you all guys