Java Script to Print current date Print Screen
- Slides: 19
Java. Script to: Print current date Print Screen Include Java. Script files (Head & Body) Forms
How Java. Script fits into the client/server architecture
Java. Script that gets the current date and year <p> </p> <script> var today = new Date(); document. write("Current date: "); document. write(today. to. Date. String()); </script> <script> var today = new Date(); document. write("© "); document. write(today. get. Full. Year()); document. write(", San Joaquin Valley Town Hall") </script>
The Java. Script for current date and year in a web browser
A script element in the head section that loads an external Java. Script file <script src="set_date. js"></script>
Java. Script embedded in the head section <head>. . . <script> var $ = function (id) { return document. get. Element. By. Id(id); } window. onload = function() { var today = new Date(); $("date"). first. Child. node. Value = "Current date: " + today. to. Date. String(); } </script> </head>
Java. Script embedded in the body <p> </p> <script> var today = new Date(); document. write("Current date: "); document. write(today. to. Date. String()); </script>
The code for a web page <!DOCTYPE html> <head> <title>Join Email List</title> </head> <body> <h 1>Please join our email list</h 1> <form id="email_form" name="email_form" action="join. php" method="get"> <label for="email_address">Email Address: </label> <input type="text" id="email_address"> <span id="email_error">*</span> </form> </body> </html>
The DOM for the web page
DOM nodes commonly used in DOM scripting Element Attr Text
The document object Methods of the document object get. Element. By. Id(id) write(string) Examples of document methods // returns the object for the HTML element var rate. Box = document. get. Element. By. Id("rate"); // writes a string into the document. write("Today is " + today. to. Date. String()); A standard $ function that gets the object for an element by using its id var $ = function (id) { return document. get. Element. By. Id(id); }
Scripting the DOM Three properties for scripting the DOM value first. Child node. Value How to get the text of an HTML element var email. Address = $("email_address"). value; How to set the text of an HTML element $("email_error"). first. Child. node. Value = "Entry is invalid. ";
The DOM event cycle
The HTML file for the Email List application <!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Join Email List</title> <link rel="stylesheet" href="email_list. css"> <script src="email_list. js"></script> </head> <body> <main> <h 1>Please join our email list</h 1> <form id="email_form" name="email_form" action="join. php" method="get"> <label for="email_address 1"> Email Address: </label> <input type="text" id="email_address 1" name="email_address 1"> <span id="email_address 1_error">*</span>
The HTML file for the Email List app (continued) <label for="email_address 2"> Re-enter Email Address: </label> <input type="text" id="email_address 2" name="email_address 2"> <span id="email_address 2_error">*</span> <label for="first_name">First Name</label> <input type="text" id="first_name" name="first_name"> <span id="first_name_error">*</span> <label> </label> <input type="button" id="join_list" value="Join our List"> </form> </main> </body> </html>
The Email List application with Java. Script
The code for the Java. Script file (email_list. js) var $ = function (id) { return document. get. Element. By. Id(id); } var join. List = function () { var email. Address 1 = $("email_address 1"). value; var email. Address 2 = $("email_address 2"). value; var is. Valid = true; if (email. Address 1 == "") { $("email_address 1_error"). first. Child. node. Value = "This field is required. "; is. Valid = false; } else { $("email_address 1_error"). first. Child. node. Value = ""; }
The code for the email_list. js file (continued) if (email. Address 1 !== email. Address 2) { $("email_address 2_error"). first. Child. node. Value = "This entry must equal first entry. "; is. Valid = false; } else { $("email_address 2_error"). first. Child. node. Value = ""; }. . . if (is. Valid) { // submit the form if all entries are valid $("email_form"). submit(); } } window. onload = function () { $("join_list"). onclick = join. List; }
The Java. Script in a file named print. Page. js var $ = function (id) { // this function returns the object for the element return document. get. Element. By. Id(id); } var print. Page = function() { // this is the event handler // for the click event of the button window. print(); } window. onload = function() { // this is the event handler for the onload event $("print. Button"). onclick = print. Page; } HTML that includes the Java. Script file <script src="print. Page. js"></script> HTML for the Print the Page button <input type="button" id="print. Button" value="Print the Page">