Web Technologies and Programming Lecture 20

1Web Technologies and ProgrammingLecture 202History, Navigator, Screen and Form Objects3Summary of Previous LectureControlling the background dynamicallyBgcolorSET For a documentSET For a specific SET the Text Color Return background color of a specific elementReturn background color of a document:Backgroundbackground color for a documentbackground image for a documentSet a background-image to no-repeatSet the background-image to be fixedChange the position of a background-image4Summary of Previous LectureWorking with imagesAccess an Image ObjectOn MouseOutOn MouseOverImage RolloverImage PreviewImage Slide ShowDate objectDigital Clock5Today’s Lecture OutlineHistory objectNavigator objectScreen objectForm object61. The History object7The 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 historyAll major browsers support it.1. The History object8History 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 listThe window.history object can be written without the window prefix.1. The History object9 Writes History Length on WebpageGo Back FunctionGo Forward Function1. The History object10Body ContentsCall to Go Back Function Call to Go Forward Function1. The History object112. The Navigator objectThe navigator object contains information about the visitor's browserIt also provides several properties that assist in the detection of various elements of the visitor’s browser and environment122. 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 browserThe properties appName and appCodeName return the name of the browseNavigator object methods:javaEnabled(): Specifies whether or not the browser has Java enabled132.1 Detecting Users browserUsed to write browser specific codeCan also be used to restrict users to use a specific browser142.1 Detecting Users browserFinding Browser NameFinding Browser VersionWriting Browser Information152.1 Detecting Users browser162.2 The Browser Engine17The property product returns the engine name of the browser:Exampledocument.getElementById("demo").innerHTML = navigator.product;2.3 The Browser Platform18The property platform returns the browser platform (operating system):Exampledocument.getElementById("demo").innerHTML = navigator.platform;2.3 The Browser Language19The property language returns the browser's language:Exampledocument.getElementById("demo").innerHTML = navigator.language;3. 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 be203. The Screen objectThe screen object properties:availHeightReturns the height of the screen (excluding the Windows Taskbar)availWidthReturns the width of the screen (excluding the Windows Taskbar)colorDepthReturns the bit depth of the color palette for displaying images213. The Screen objectHeightReturns the total height of the screenWidthReturns the total width of the screen223. The Screen objectFinding Available HeightFinding Available WidthFinding Actual HeightFinding Actual Width233. The Screen object244. 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 on254. Form ObjectThe ‘forms array’ also holds information about each element used within and tagselements array keeps information about form elements264. Form ObjectCreate a Form ObjectYou can create a element by using the document.createElement() method:var x = document.createElement("FORM");274. Form Object forms0form2form11284.1 Accessing Form ElementsLet’s see, how to access the elements of the following form: 294.1 Accessing Form ElementsAccessing Name Elementdocument.forms[0].name.valuedocument.form1.elements[0].valueAccessing Email Elementdocument.forms[0].email.valuedocument.form1.elements[1].value304.2 Setting Form ElementsLet’s see, how to set the elements of the following form 314.2 Setting Form ElementsSetting Name Elementdocument.forms[0].name.value = “Ali”document.form1.elements[0].value = “Ali”Setting Email Elementdocument.forms[0].email.value = “ali@gmail.com”document.form1.elements[1].value = “ali@gmail.com”324.2 Setting Form ElementsNo User Name EnteredLet’s Write The User Name By Pressing Login Button, not by Actually Writing It334.2 Setting Form ElementsSet Form Function Call344.2 Setting Form ElementsGetting Form ElementsChecking The Null Condition35Alert of User Name Replacement4.2 Setting Form Elements364.3 Validating Form Data37JavaScript can be useful in validating the form submission that is:All required fields are filled with data?For Example: If name is required, the textbox should not be empty on the time of submission.All fields have valid data?For Example: If email is required, it should not have invalid data like tra731, it must contain “@” and “.”4.3 Validating Form DataValidate Form Function Call384.3 Validating Form DataGetting Form ElementsChecking For EmptinessAlerts When The Field is Empty394.3 Validating Form Data405.0 Data Validation41Data validation is the process of ensuring that computer input is clean, correct, and useful.Typical validation tasks are:has the user filled in all required fields?has the user entered a valid date?has the user entered text in a numeric field?5.0 Data Validation42Most often, the purpose of data validation is to ensure correct input to a computer application.Validation can be defined by many different methods, and deployed in many different ways.Server side validation is performed by a web server, after input has been sent to the server.Client side validation is performed by a web browser, before input is sent to a web server.Summary of Today’s LectureThe history objectThe navigator objectThe user browserThe browser EngineThe browser platformThe browser languageThe screen objectThe form objectAccessing from elementSetting form element43Summary of Today’s LectureValidating form dataDATA Validation 44THANK YOU45