History, Navigator, Screen and Form Objects

History, Navigator, Screen and Form ObjectsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan1Summary of the previous lectureControlling the background dynamicallyBgcolorTextbackgroundWorking with imagesImage rolloverImage previewImage slide showDate objectDigital clockBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan2OutlineHistory objectNavigator objectScreen objectForm objectBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan31. The History objectBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan4The history object contains the URLs visited by the user (within a browser window)The history object is part of the window object and is accessed through the window.history propertyUsed to move forward and backward through the visitor’s browsing history 1. The History objectBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan5History object properties:Length: Returns the number of URLs in the history listHistory object methods:back(): Loads the previous URL in the history listforward(): Loads the next URL in the history listgo(): Loads a specific URL from the history list1. The History objectBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan6 Writes history length on webpageGo back functionGo forward functions1. The History objectBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan7Body contentsCall to go back Call to goforward2. The Navigator objectThe navigator object contains information about the browserprovides several properties that assist in the detection of various elements of the visitor’s browser and environment Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan82. The Navigator objectNavigator object properties:appCodeName: Returns the code name of the browserappName: Returns the name of the browserappVersion: Returns the version information of the browserNavigator object methods:javaEnabled(): Specifies whether or not the browser has Java enabledBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan92.1 Detecting Users browserUsed to write browser specific codeCan also be used to restrict users to use a specific browserBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan102.1 Detecting Users browserFinding browser nameFinding browser versionWriting browser informationBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan113. The Screen objectThe screen object contains information about the visitor's screenYou might need this information to determine which images to display or how large the page can be Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan123. The Screen objectThe screen object properties:availHeight: Returns the height of the screen (excluding the Windows Taskbar)availWidth: Returns the width of the screen (excluding the Windows Taskbar)colorDepth: Returns the bit depth of the color palette for displaying imagesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan133. The Screen objectheight: Returns the total height of the screenwidth: Returns the total width of the screenBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan143. The Screen objectFinding available heightFinding available heightFinding actual heightFinding actual widthBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan154. Form ObjectThe Form object represents an HTML formFor each tag in an HTML document, a Form object is createdThe browser crates a ‘forms array’ which keeps the number of form objects in the HTML programThe first form object in the HTML file being held as array index [0], the second as index [1] and so onBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan164. Form ObjectThe ‘forms array’ also holds information about each element used within and tagselements array keeps information about form elementsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan174. Form Objectforms0form2form11Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan184.1 Accessing form elementsdocument.forms[0].name.valueordocument.form1.elements[0].valuedocument.forms[0].email.valueordocument.form1.elements[1].valueBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan194.2 Setting form elementsdocument.forms[0].name.value = “ali”ordocument.form1.element[0].value = “ali”document.forms[0].email.value = “ali@gmail.com”ordocument.form1.elements[1].value = “ali@gmail.com”Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan204.2 Setting form elementsPrevious readingCurrent readingConsumed=current - previousBill= consumed*5Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan214.2 Setting form elementsVariables declaredGetting the value of elementsSetting valuesBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan224.2 Setting form elementsCurrent reading fieldCalling the functionBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan234.3 Validating form dataMust fillValid emailBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan244.3 Validating form dataGetting first element valueChecking for emptinessCalling the functionBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan254.3 Validating form dataGetting value of emailFinding position of ‘@’Finding last position of ‘.’Checking conditionsBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan26SummaryThe history objectThe navigator objectThe screen objectThe form objectBasharat Mahmood, Department of Computer Science, CIIT, Islamabad, Pakistan27Chapter 11. Beginning HTML, XHTML,CSS, and JavaScript, by Jon Duckett, Wiley Publishing; 2009, ISBN: 978-0-470-54070-1. Chapter 6,11. Learn JavaScript, by Chuck Easttom, Wordware Publishing; 2002, ISBN 1-55622-856-228Basharat Mahmood, Department of Computer Science, CIIT, Islamabad, PakistanReferences