Darshan Institute of Engineering & Technology for Diploma Studies Unit 3

Size: px

Start display at page:

Download "Darshan Institute of Engineering & Technology for Diploma Studies Unit 3"

Daniel Burke
5 years ago
Views:

1 Javascript Document Object Model: What is the DOM? DOM stands for Document Object Model. 3 Object Models in JavaScript The W3C is establishing the Document Object Model (DOM) as a standard application programming interface (API) for scripts to access and manipulate HTML and XML documents. Fig 3.1 Document Object Model Tree Structure When a web page is loaded, the browser creates a Document Object Model of the page which gives a logical view of the document where objects represent different parts: windows, documents, elements, attributes, texts, events, stylesheets, style rules, etc. These DOM objects are organized into a tree structure (the DOM tree) to reflect the natural organization of a document. Each Web page has a document node at the root of the tree. The head and body nodes become child nodes of the document node (Figure 3.1). With the object model, JavaScript gets all the power it needs to create dynamic HTML: JavaScript can manage all the HTML elements and attributes, CSS styles in the page. Introducing object in Model Every web page resides inside a browser window which can be considered as an object. A Document object represents the HTML document that is displayed in that window. The Document object has various properties that refer to other objects which allow access to and modification of document content. The Objects are organized in a hierarchy. The below Figure 3.2 represent simple hierarchy of few important objects: 1 Dept: CE DWSL ( ) Ravi G. Shrimali

2 Figure 3.2 hierarchy of important objects Window object: Top of the hierarchy. It is the outmost element of the object hierarchy. Document object: Each HTML document that gets loaded into a window becomes a document object. The document contains the content of the page. Form object: Everything enclosed in the <form>...</form> tags sets the form object. Form control elements: The form object contains all the elements defined for that object such as text fields, buttons, radio buttons, and checkboxes. The Document Object When an HTML document is loaded into a web browser, it becomes a document object. The document object is the root node of the HTML document and the "owner" of all other nodes: element nodes, text nodes, attribute nodes, and comment nodes. The document object provides properties and methods to access all node objects, from within JavaScript. The Document Object is supported in all major browsers. The following are the most common properties and methods that can be used on HTML documents: document.body, document.close(), document.forms, document.open(), document.title, document.getelementbyid(), document.getelementsbytagname() document.getelementsbyname(), document.writeln() and document.write(). Writing to Documents The write() method writes HTML expressions or JavaScript code to a document. Using document.write() after an HTML document is fully loaded, will delete all existing HTML. The document.writeln() method is similar to write(), only it adds a newline character after each statement. <script> document.write("hello Friends..."); 2 Dept: CE DWSL ( ) Ravi G. Shrimali

3 document.write("hi, I'm Peter Parker"); Dynamic Documents The HTML DOM allows JavaScript to change the content of HTML elements. To change the content of an HTML element, use the following syntax: document.getelementbyid(id).innerhtml = new HTML The easiest way to modify the content of an HTML element is by using the innerhtml property. To change the value of an HTML attribute, use the following syntax: document.getelementbyid(id).attribute = new value <html> <head> <title>dynamic Document using DOM</title> <script> function showdata() { document.getelementbyid("p1").innerhtml = document.getelementbyid("data").value; </head> <body> <p id="p1" style="font-weight:bold;">change Me by Entering Data</p> <input type="text" id="data" /> <button onclick="showdata();">click Me</button> </body> </html> In the Above code, when we click on the button, it will change the content of a <p> element with the content of the textbox that we enter. Browser Object The Browser Object Model (BOM) allows JavaScript to "talk to" the browser. There are no official standards for the Browser Object Model (BOM). The browser provides us with a hierarchy of objects which we can use to control and access various information about time, screen, page, elements on a page etc. BOM objects allow to control the browser, e.g change current URL, access frames, do background requests to server with XMLHttpRequest etc. Functions like alert, confirm, prompt also belong BOM, they are provided by the browser. The following table details some of the more interesting JavaScript browser options. History Object: Used for examining and moving between URLs stored in the browser s history. 3 Dept: CE DWSL ( ) Ravi G. Shrimali

4 Location Object: Contains information about the current URL. This object also provides the means to perform tasks such as loading a new page or reloading the current page. Navigator Object: Contains information about the current browser. For example, you can determine the browser type and whether the browser has cookies enabled. Screen Object: Specifies the physical characteristics of the device used to display the page, including page height, width, and color depth. Window Object: Provides access to the browser s window so that you can perform tasks such as displaying message boxes. When working with pages that contain frames, the browser creates a window for the entire HTML document and another window for each frame. Note: The example of this object is same as Navigator Object below or Window Object (Refer page No. 17) Navigator Object The navigator object contains information about the browser. It is useful for customizing your JavaScript based on the user's browser and what they have enabled on that browser. Remember all browsers are different and handle JavaScript differently. For example, the user might not have cookies enabled, but has JavaScript enabled. Properties: appcodename: Returns the code name of the browser. appname: Returns the name of the browser. appversion: Returns the version information of the browser. cookieenabled: Determines whether cookies are enabled in the browser. platform: Returns for which platform the browser is compiled. useragent: Returns the user-agent header sent by the browser to the server. Methods: javaenabled(): Specifies whether or not the browser has Java enabled. taintenabled(): Specifies whether the browser has data tainting enabled. <script type="text/javascript"> document.write(navigator.appcodename + "<br>"); document.write(navigator.appname + "<br>"); document.write(navigator.appversion + "<br>"); document.write(navigator.cookieenabled + "<br>"); document.write(navigator.platform + "<br>"); Output: Mozilla Netscape 4 Dept: CE DWSL ( ) Ravi G. Shrimali

5 5.0 (Windows NT 6.2; WOW64) AppleWebKit/ (KHTML, like Gecko) Chrome/ Safari/ true Win32 The String Objects A string literal is zero or more characters enclosed in single or double quotation marks. A string literal has a primary (primitive) data type of string. A String object is created by using the new Operator, and has a data type of Object. The escape character (\) can also be used to insert other special characters in a string. The Special characters that can be added to a text string with the backslash sign: single quote(\'), double quote(\"), backslash(\\), new line(\n), tab(\t), backspace(\b),etc. Syntax: var val = new String(string); Properties constructor: Returns the function that created the String object's prototype. length: Returns the length of a string. prototype: Allows you to add properties and methods to an object. Methods length: Returns the number of characters in a string. indexof(): Returns the position of the first found occurrence of a specified value in a string. lastindexof(): Returns the position of the last found occurrence of a specified value in a string. match(): Searches a string for a match against a regular expression, and returns the matches. substr(): Extracts a part of a string from a start position through a number of characters. substring(): Extracts a part of a string between two specified positions. tolowercase(): Converts a string to lowercase letters. touppercase(): Converts a string to uppercase letters. trim(): Removes whitespace from both ends of a string. valueof(): Returns the primitive value of a String object. split(): Splits a string into an array of substrings. <script> function myfunction() { var str = " Have a nice day "; alert(str.trim()); The above script remove extra whitespace from both sides of a string. 5 Dept: CE DWSL ( ) Ravi G. Shrimali

6 Understanding built-in object (JavaScript Native Objects) All programming languages have built-in objects that create the essential functionality of the language. Built-in objects are the foundation of the language in which you write custom code that powers custom functionality based on your imagination. JavaScript has several built-in or native objects. These objects are accessible anywhere in your program and will work the same way in any browser running in any operating system. The below is the list of all important JavaScript Native Objects: JavaScript Number Object JavaScript Boolean Object JavaScript String Object JavaScript Array Object JavaScript Date Objec JavaScript Math Object JavaScript RegExp Object User defined object JavaScript is an Object based Programming language. Objects are composed of attributes. If an attribute contains a function, it is considered to be a method of the object otherwise, the attribute is considered a property. All user-defined objects and built-in objects are descendants of an object called Object. The new Operator: The new operator is used to create an instance of an object. var employee = new Object(); The Object() Constructor: A constructor is a function that creates and initializes an object. JavaScript provides a special constructor function called Object() to build the object. The return value of the Object() constructor is assigned to a variable. The with Keyword: The with keyword is used for referencing an object's properties or methods. The object specified as an argument to with becomes the default object for the duration of the block that follows. The properties and methods for the object can be used without naming the object. Syntax: with (object){ properties used without the object name and dot 6 Dept: CE DWSL ( ) Ravi G. Shrimali

7 <html> <head> <title>user-defined objects</title> <script type="text/javascript"> // Define a function which will work as a method function addprice(amount){ with(this){ price = amount; function book(title, author){ this.title = title; // Assign properties to the object this.author = author; this.price = 0; this.addprice = addprice; // Assign that method as property. </head> <body> <script type="text/javascript"> var book = new book("dwsl", "Peter Parker"); // Create the object book.addprice(100); document.write("book title is : " + book.title + "<br>"); document.write("book author is : " + book.author + "<br>"); document.write("book price is : " + book.price + "<br>"); </body> </html> Output: The above script demonstrates how to create an object with a User-Defined Function. Here this keyword is used to refer to the object that has been passed to a function. Form Object The JavaScript Form Object is a property of the document object. A form object is used to take user data as input for processing. A form can be submitted by calling the JavaScript submit method or clicking the form submit button. Form object is created for every html form element. The Form object represents an HTML <form> element. 7 Dept: CE DWSL ( ) Ravi G. Shrimali

8 Form can be accessed by document.form.formname or document.formname, where formname is the name of the form. You can access a <form> element by using getelementbyid(). For Example, var x = document.getelementbyid("myform"); You can create a <form> element by using the document.createelement() method. For Example, var x = document.createelement("form"); Form Object Properties: action: Used to get or set the action attribute of form field. elements: It returns an array containing all the objects (like button, checkbox, etc..) in a form. encoding: Used to get or set the enctype attribute of form field. length: It is used to check the number of elements present in the form. method: It is used get or set the attribute "method" of form field as POST or GET. name: It is used to get or set the name of the form. target It is used get or set the attribute "target" of the form. Form Object Methods: submit() :Used to dynamically submit a form using javascript reset() :Used to dynamically reset the values of the form Working with Form Elements and Their Properties Button Object Button is one of the most commonly used form types. The Button object represents an HTML <button> element. The syntax to access the button object in javascript: document.formname.buttonname or document.getelementbyid("buttonid"); Methods: click(): Used to dynamically make a button click blur(): Used to dynamically make the button blur focus(): Used to dynamically get focus on the button Properties: Name: Used to get button's name Type: Used to get form type Value: Used to set or get button's value Disabled: Sets or returns whether a button is disabled, or not The Basic events of button objects are onmouseover, onclick, onblur, onfocus, etc. Text Object The JavaScript Text Object is a property of the form object that denotes the text field placed in the form. Example code: <input type="text" name="namehere">. The syntax to access the text object in javascript: document.formname.textname or document.getelementbyid("textid"); 8 Dept: CE DWSL ( ) Ravi G. Shrimali

9 Methods: blur: Removes focus from the object. focus: Gives focus to the object. select: Selects the input area of the object. Properties: name: Used to get Text Field name. type: Used to get form type. value: Used to set or get Text Field value readonly: Used to check or change readonly property. Users cannot enter any value if the text field is set as readonly. The Basic events of text objects are onmouseover, onmousedown, onmouseup, onclick, onblur, onfocus, etc. Text Area Objects The Textarea object represents an HTML <textarea> element. textarea is a multiline input field. The syntax to access the text object in javascript: document.getelementbyid("textareaid"); Methods: blur: Removes focus from the object.: focus: Gives focus to the object.: select: Selects the input area of the object. Properties: name: Represents the name attribute. type: Represents that the object is a Textarea object. value: Represents the current value of the Textarea object. The Basic events of textarea objects are onmouseover, onmousedown, onmouseup, onclick, onblur, onfocus, etc. Hidden Objects The Hidden object represents an HTML <input> element with type="hidden" and used to pass data when a form is submitted. The syntax to access the text object in javascript: document.getelementbyid("hiddenfieldname"); properties: name: Reflects the name attribute. type: Reflects the type attribute. value: Reflects the current value of the hidden object. Check Box Objects The Checkbox object represents an HTML <input> element with type="checkbox" and is used to set a value on or off. The syntax to access the text object in javascript: document.getelementbyid("mycheckid"); 9 Dept: CE DWSL ( ) Ravi G. Shrimali

10 Properties: checked: Indicate the current state of the checkbox. name: Indicate the name attribute. type: Indicate the type attribute. value: Indicate the value attribute. Methods: blur: Lost focus from the checkbox. click: Indicates a mouse click on the checkbox. focus: Set focus to the checkbox. The Basic events of checkbox objects are onclick, onblur, onfocus, etc. Radio Box Objects The Radio object represents an HTML <input> element with type="radio" and is used to set a value on or off. The syntax to access the text object in javascript: document.getelementbyid("myradioid"); Properties: checked: Boolean property that reflects the current state of the radio button, "true" if it's checked, and "false" if not. name: Indicate the name attribute. type: Indicate the type attribute. value: Indicate the value attribute. Methods: blur: Removes focus from the radio button. click: Simulates a mouse-click on the radio button. focus: Gives focus to the radio button. The Basic events of radiobutton objects are onmouseover, onmousedown, onmouseup, onclick, onblur, onfocus, etc. Selecting Objects The Select object represents an HTML <select> element. The syntax to access the text object in javascript: document.getelementbyid("myselectid"); Properties: length: Used to get the length (total number of options) in the select object. name: Used to get Select Box name. selectedindex: selectedindex is used to get or set the position of the option selected. text: Returns the text value present in the select box. Disabled: Sets or returns whether the drop-down list is disabled, or not Methods: blur(): Used to dynamically make the Radio Button blur. focus(): Used to dynamically get focus on the Radio Button. 10 Dept: CE DWSL ( ) Ravi G. Shrimali

11 The Basic events of radiobutton objects are onmouseover, onmousedown, onmouseup, onchange, onblur, onfocus, etc. Form Validation Form validation is the process of checking that a form has been filled in correctly before it is processed. For example, if your form has a box for the user to type their address, you might want to check that they've filled in their address before you deal with the rest of the form. There are two main methods for validating forms: server-side (using CGI scripts, ASP, etc), and client-side (usually done using JavaScript). Process: The Server side Form validation used to occur at the server, after the client had entered all necessary data and then pressed the Submit button. If some of the data that had been entered by the client had been in the wrong form or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process and over burdening server. JavaScript, provides a way to validate form's data on the client's computer before sending it to the web server. Form validation generally performs two functions. Basic Validation: In this method, the form must be checked to make sure data was entered into each form field that required it. Data Format Validation: Secondly, the data that is entered must be checked for correct form and value. For example, only numbers may be permitted in a field requesting your phone number, therefore, we can check that only numbers are entered and no other characters. Testing Data: Testing data is the process of ensuring that entered input data is clean, correct, and useful. Typical testing data tasks are to check: All required fields has been entered by user or not. A number format or range (For Example, ZIP code must be a 5-digit integer). Entered data length (For Example, password of 5 or more characters). An entry matches a specific word. Entered two entries matches or not. (For Example, double entry of password). For a specific pattern (For Example, address). Trapping Empty Fields The first step in form validation is to check for null values. The following function can be used to check whether user has entered anything in a given field. Blank fields indicate two kind of values. A zero length string or a NULL value. <script type="text/javascript"> 11 Dept: CE DWSL ( ) Ravi G. Shrimali

12 function validateform() { var Name = document.getelementbyid("txtname").value; // If the length of the element's string is 0 then display alert message if (Name == null Name == "" Name.length == 0) { alert("please Enter your Name."); return false; In above code, if a form field (txtname) is empty, this function alerts a message, and returns false, to prevent the form from being submitted. Finding Invalid Values (Regular expressions) Regular expressions are very powerful tools for performing pattern matches. Regular expressions can be used to perform all types of text search and text replace operations. By using regular expression you can easily validate the entered data by users and give them an appropriate error report related to that errors to the users. There are two ways to implement regular expressions in JavaScript: 1) Using literal syntax. The syntax looks something like: var RegularExpression = /pattern/ 2) When you need to dynamically construct the regular expression, via the RegExp() constructor. var RegularExpression = new RegExp("pattern"); The RegExp() method allows you to dynamically construct the search pattern as a string, and is useful when the pattern is not known ahead of time. <html> <head> <title> Validation</title> <script> function Validate (inputText) { var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3)+$/; //Regular Expression for validation if(inputtext.value == "") { alert("please Enter an "); document.formvalidate. .focus(); return false; 12 Dept: CE DWSL ( ) Ravi G. Shrimali

13 else if(inputtext.value.match(mailformat)) { alert("great!! you entered a right "); document.formvalidate. .focus(); return true; else { alert("you have entered an invalid address!"); document.formvalidate. .focus(); return false; </head> <body> <form name="formvalidate" action="#"> <input type='text' name=' '/> <input type="submit" name="submit" value="submit" onclick="validate (document.formvalidate. );"/> </form> </body> </html> Intercepting the Submit Button In javascript, it is easy to write JavaScript routines to validate form items before the form is submitted. By defining a form tag with a name and an action. The essential think is to add the onsubmit event to call your JavaScript code. Within the validating function, return false if the validation fails. In the below example, when the user clicks the submit button, the onsubmit event calls the JavaScript function "ValidateData()". If the validation fails, the function returns false, and the submission of form is cancelled. <html> <head> <script language="javascript"> function ValidateData(txtname){ if ((txtname.length==0) (txtname.value=="")){ alert("please Enter you Name"); txtname.focus(); 13 Dept: CE DWSL ( ) Ravi G. Shrimali

14 return false; return true; </head> <body> <form name="myform" onsubmit="validatedata(this.txtname);" action="#"> <p>enter Name: <input type="text" name="txtname"> <input type="submit" name="submit"> </form> </body> </html> Validating Non-text Form Objects Non-text Content: All non-text content means that is presented to the user has a text alternative that serves the equivalent purpose. Some examples on non-text content would be: Images, specific sensory experience, Word Art, video/audio files etc. <script language="javascript"> function CheckUpload() { var FileName = document.getelementbyid('fileupload'); var FileNameValue = FileName.value; var ext = FileNameValue.substring(FileNameValue.lastIndexOf('.') + 1); if(ext == "gif" ext == "GIF" ext == "JPEG" ext == "jpeg" ext == "jpg" ext == "JPG") { alert("great!! your file is validate for uploading"); return true; else { alert("only Upload GIF or JPEG images..."); FileName.focus(); return false; The above script is used to validate the file to be upload if its extension is.jpg or.gif. 14 Dept: CE DWSL ( ) Ravi G. Shrimali

15 Windows Object The window object represents an open window in a browser. An object of window is created automatically by the browser. If a document contain frames (<iframe> tags), the browser creates one window object for the HTML document, and one additional window object for each frame. Properties: closed: Returns a Boolean value indicating whether a window has been closed or not. history: Returns the History object for the window status: Sets or returns the text in the statusbar of a window location: Returns the Location object for the window history: Returns the History object for the window name: Sets or returns the name of a window parent: Returns the parent window of the current window Methods: alert(): Displays an alert box with a message and an OK button. blur(): Removes focus from the current window. confirm(): Displays a dialog box with a message and an OK and a Cancel button. open(): Opens a new browser window close(): Closes the current window. prompt(): Displays a dialog box that prompts the visitor for input. Dialog Boxes Javascript supports basic three important types of dialog box. These dialog boxes can be used to display alert, or to get confirmation on any input or to get a kind of input from the users. (1) alert() Dialog Box o The alert() method displays an alert box with a specified message and an OK button. o An alert box is often used if you want to make sure information comes through to the user. <script> function GetAlert() { alert("great! You doing a good job by entering data"); (2) confirm() Dialog Box o The confirm() method displays a dialog box with a specified message, along with an OK and a Cancel button. o A confirm box is often used if you want the user to verify or accept something.the confirm() method returns true if the user clicked "OK", and false otherwise. 15 Dept: CE DWSL ( ) Ravi G. Shrimali

16 <script> function GetConfirm() { var value = confirm("do you want to continue?"); if(value == true) { alert("great! You will redirect to our home page."); return true; else { alert("oppps!!! You do not want to continue."); return false; (3) prompt() Dialog Box o The prompt() method displays a dialog box that prompts the visitor for input. o A prompt box is often used if you want the user to input a value before entering a page. o The prompt() method returns the input value if the user clicks "OK". If the user clicks "cancel" the method returns null. <script> function myfunction() { var person = prompt("please Enter Your Name", "Peter Parker"); if (person!= null) { alert("hi " + person + "! How are you today?"); Status Bar Messages The status property sets the text in the status bar at the bottom of the browser, or returns the previously set text. JavaScript can be used to display messages in the status bar using window.status. For example, you can display a javascript status bar message whenever your users hover over your hyperlinks. <a href="javascriptdemo/index.php" onmouseover="window.status='status Bar Message goes here'; return true;" onmouseout="window.status=''; return true;">hover over me!</a> 16 Dept: CE DWSL ( ) Ravi G. Shrimali

17 The status property does not work in the default configuration of IE, Firefox, Chrome, Safari or Opera 15 and newer. Window Manipulations Using JavaScript, we can manipulate windows in a variety of ways, such as open new one, close it, reload its page, change the attributes of the new window, thumbnail image popups, resizing browser windows, scrolling the window content, frames and more. JavaScript allows you to use commands to decide which parts of the browser window appear. This is done using a third part of the window.open command. This is where you decide the window features: win = window.open("url Here", "The_First_Windows"); win.close(); There are many different things you can include in your new window: // move the screen position of the window to the specified x and y offset window.moveto(ix, iy) // move the screen position of the window by the specified x and y offset window.moveby(ix, iy) // scroll the window to the specified x and y offset window.scrollto(ix, iy) // scroll the window by the specified x and y offset window.scrollby(ix, iy) // set the size of the window to the specified width and length window.resizeto(iwidth, iheight) // change the current size of the window by the specified x and y offset window.resizeby(ix, iy) Examples of Manipulating Windows The below code will open a window with 100 pixels width and 100 pixels height. When you click on 'Resize Window' or 'Move Window' button, it will resize or move the open windows as per given parameters value. <html> <head> <script> var NewWindow; function openwindow() { NewWindow = window.open('','', 'width=100,height=100'); NewWindow.focus(); function resizewindow() { NewWindow.resizeBy(100, 100); 17 Dept: CE DWSL ( ) Ravi G. Shrimali

18 NewWindow.focus(); function movewindow() { NewWindow.moveTo(300, 200); NewWindow.focus(); </head> <body> <div align="center"> <button onclick="openwindow()">create Window</button> <button onclick="resizewindow()">resize Window</button> <button onclick="movewindow()">move Window</button> </div> </body> </html> Dates and Math Objects The Date Object Date is a predefined object in javascript. The Date object is used to work with dates and times. It allow you to get and set the year, month, day, hour, minute, second, and millisecond of objects, using either local time or UTC (universal, or GMT) time. Date objects are created with new Date(). There are four ways to declare a date in javascript: Syntax: var NewDate = new Date(); var NewDate = new Date(milliseconds); var NewDate = new Date(dateString); var NewDate = new Date(year,month,date[,hour,minute,second,millisecond ]) //Parameters in the square brackets is optional. Date Properties: Here is a list of each property and their description. constructor: Specifies the function that creates an object's prototype. prototype: The prototype property allows you to add properties and methods to an object. Date Methods: The following are the lists of important methods of the Date Object: getdate(): Returns the day of the month (from 1-31). getday(): Returns the day of the week (from 0-6). getfullyear(): Returns the year (four digits). gethours(): Returns the hour (from 0-23). getmilliseconds(): Returns the milliseconds (from 0-999). 18 Dept: CE DWSL ( ) Ravi G. Shrimali

19 getminutes(): Returns the minutes (from 0-59). getmonth(): Returns the month (from 0-11). getseconds(): Returns the seconds (from 0-59). gettime(): Returns the number of milliseconds since midnight Jan 1, getutcdate(): Returns the day of the month, according to universal time (from 1-31). getutcfullyear(): Returns the year, according to universal time (four digits). Using and manipulating dates The Date object lets us work with dates. A date consists of a year, a month, a day, an hour, a minute, a second, and milliseconds. <script> //Display current date and time. var DateManipulate = new Date(); document.write("current Date and Time is:" + DateManipulate + "</br>"); //Using new Date(date string), creates a new date object from the specified date and time. var DateManipulate = new Date("March 26, :30:25"); document.write("create a new date object from the specified date:" + DateManipulate + "</br>"); //Using new Date(number), creates a new date object as zero time plus the number. var DateManipulate = new Date( ); document.write("create a new date object as zero time plus the number:" + DateManipulate + "</br>"); //Using new Date(7 numbers), creates a new date object with the specified date and time. var DateManipulate = new Date(2010,5,15,5,40,30); document.write("create a new date object from the specified date:" + DateManipulate + "</br>"); //Return the name of the weekday var d = new Date(); var weekday = new Array( "Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"); document.write(weekday[d.getday()] + "</br>"); Output: Current Date and Time is:mon Apr :48:41 GMT+0530 (India Standard Time) 19 Dept: CE DWSL ( ) Ravi G. Shrimali

20 Create a new date object from the specified date:wed Mar :30:25 GMT+0530 (India Standard Time) Create a new date object as zero time plus the number:wed Sep :30:00 GMT+0530 (India Standard Time) Create a new date object from the specified date:tue Jun :40:30 GMT+0530 (India Standard Time) Monday Displaying the date and time Javascript Date() method returns today's date and time and does not need any object to be called. <script type="text/javascript"> var displaydate = Date(); document.write("date and Time: " + displaydate); Output: Date and Time: Mon Apr :43:15 GMT+0530 (India Standard Time) TimeZones The gettimezoneoffset() method returns the time difference between UTC time and local time, in minutes. For example, If your time zone is GMT+10, -600 will be returned. Daylight savings time prevents this value from being a constant. The Universal Coordinated Time (UTC) is the time set by the World Time Standard. UTC time is the same as GMT (Greenwich Mean Time) time. <script type="text/javascript"> var date = new Date(); var minutes = date.gettimezoneoffset(); if (minutes < 0) document.write(minutes / 60 + " hours after UTC" + "</br>"); else document.write(minutes / 60 + " hours before UTC" + "</br>"); Output: -5.5 hours after UTC Extracting the Date Javascript date getdate() method returns the day of the month for the specified date according to local time. The value returned by getdate is an integer between 1 and Dept: CE DWSL ( ) Ravi G. Shrimali

21 <script type="text/javascript"> var displayday = new Date(); document.write("current day using getdate() : " + displayday.getdate() + "</br>" ); var displayday = new Date("December 25, :15:00"); document.write("current Day using getdate() : " + displayday.getdate() + "</br>" ); Output: Current day using getdate() : 6 Current Day using getdate() : 25 Extracting the Hrs. Javascript Date gethours() method returns the hour in the specified date according to local time. The value returned by gethours is an integer between 0 and 23. <script type="text/javascript"> var displayhour = new Date(); document.write("get current hour using gethours() : " + displayhour.gethours() + "</br>" ); var displayhour = new Date("December 25, :15:00"); document.write("get current hour using gethours gethours() : " + displayhour.gethours() + "</br>" ); Output: Get current hour using gethours() : 12 Get current hour using gethours gethours() : 23 The Math Object and its constants The Math object allows you to perform mathematical tasks on numbers. The math object provides you properties and methods for mathematical constants and functions. Unlike the other global objects, Math is not a constructor. All properties and methods of Math are static and can be called by using Math as an object without creating it. Syntax: Here is the simple syntax to call properties and methods of Math. var pi_val = Math.PI; var sine_val = Math.sin(30); Math Object Properties (Mathematical Constants) JavaScript provides 8 mathematical constants that can be accessed with the Math object: E: Returns Euler's number. LN2: Returns the natural logarithm of 2. LN10: Returns the natural logarithm of 1. LOG2E: Returns the base-2 logarithm of E. 21 Dept: CE DWSL ( ) Ravi G. Shrimali

22 LOG10E: Returns the base-10 logarithm of E. PI: Returns PI. SQRT1_2: Returns the square root of 1/2. SQRT2: Returns the square root of 2. Math Object Methods abs(x): Returns the absolute value of x. ceil(x): Returns x, rounded upwards to the nearest integer. cos(x): Returns the cosine of x (x is in radians). floor(x): Returns x, rounded downwards to the nearest integer. log(x): Returns the natural logarithm (base E) of x. max(x,y,z,...,n): Returns the number with the highest value. min(x,y,z,...,n): Returns the number with the lowest value. pow(x,y): Returns the value of x to the power of y. random(): Returns a random number between 0 and 1. round(x): Rounds x to the nearest integer. sin(x): Returns the sine of x (x is in radians). sqrt(x): Returns the square root of x. tan(x): Returns the tangent of an angle. <script> document.write("value of Math.PI:" + Math.PI + "</br>"); document.write("value of Math.ceil(2.5):" + Math.ceil(2.5) + "</br>"); document.write("value of Math.floor(4.7):" + Math.floor(4.7) + "</br>"); document.write("value of Math.random()*10:" + Math.floor(Math.random()*10) + "</br>"); document.write("value of Math.max(10,10.5,24):" + Math.max(10,10.5,24) + "</br>"); document.write("value of Math.pow(5, 2):" + Math.pow(5,2) + "</br>"); document.write("value of Math.sqrt(81):" + Math.sqrt(81) + "</br>"); Output: Value of Math.PI: Value of Math.ceil(2.5):3 Value of Math.floor(4.7):4 Value of Math.random()*10:9 Value of Math.max(10,10.5,24):24 Value of Math.pow(5, 2):25 Value of Math.sqrt(81):9 22 Dept: CE DWSL ( ) Ravi G. Shrimali

PES DEGREE COLLEGE BANGALORE SOUTH CAMPUS 1 K.M. before Electronic City, Bangalore WEB PROGRAMMING Solution Set II

PES DEGREE COLLEGE BANGALORE SOUTH CAMPUS 1 K.M. before Electronic City, Bangalore 560 100 WEB PROGRAMMING Solution Set II Section A 1. This function evaluates a string as javascript statement or expression