Test2
- 1. Outline IS400: Development of Business Applications on the Internet Fall 2004 Instructor: Dr. Boris Jukic JavaScript: Introduction to Scripting
- 2. Topics Covered Writing simple JavaScript programs. Using input and output statements Basic memory concepts. Arithmetic operators. Decision-making statements. Relational and equality operators.
- 3. Introduction JavaScript scripting language – Client-side scripting enhances functionality and appearance Makes pages more dynamic and interactive Pages can produce immediate response without contacting a server Customization is possible on the basis of users’ explicit and implicit input Browser has to have a built-in (JavaScript) interpreter – Foundation for complex server-side scripting
- 4. JavaScript: Object-Based Language There are three object categories in JavaScript: Native Objects, Host Objects, and User-Defined Objects. – Native objects: defined by JavaScript. String, Number, Array, Image, Date, Math, etc. – Host objects : supplied and always available to JavaScript by the browser environment. window, document, forms, etc. – User-defined objects : defined by the author/programmer Initially, we will use host objects created by the browser and their methods and properties
- 5. Scripting Two approaches to client side scripting: – Inline scripting Written in the <body> section of a document – JavaScript code embedded in the <head> section
- 6. Scripting <script> tag Indicate that the text is part of a script type attribute – Specifies the type of file and the scripting language use: Value: “text/javascript” – IE and Netscape use JavaScript as default scripting language writeln method of the document object – Write a line in the document and position the cursor in the next line – Does not affect the actual rendering of the HTML document What is being written by JavaScript is the set of html instructions that in turn determine the rendering of the html document
- 7. Outline welcome.html (1 of 1) 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 7.1: welcome.html --> 6 <!-- Displaying a line of text --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>A First Program in JavaScript</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 document.writeln( 15 "<h1>Welcome to JavaScript Programming!</h1>" ); 16 // --> 17 </script> 18 19 </head><body></body> 20 </html> HTML comment tags will result in skipping of the script by those browsers that do not support scripting
- 8. Outline welcome2.html (1 of 1) 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 7.2: welcome2.html --> 6 <!-- Printing a Line with Multiple Statements --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head> 10 <title>Printing a Line with Multiple Statements</title> 11 12 <script type = "text/javascript"> 13 <!-- 14 document.write( "<h1 style = "color: magenta">" ); 15 document.write( "Welcome to JavaScript " + 16 "Programming!</h1>" ); 17 // --> 18 </script> 19 20 </head><body></body> 21 </html> Escape character in combination with quotation mark: ” will result in insertion of a quotation mark in the string that is actually written by JavaScript
- 9. Outline welcome3.html 1 of 1 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 7.3: welcome3.html --> 6 <!-- Printing Multiple Lines --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head><title>Printing Multiple Lines</title> 10 11 <script type = "text/javascript"> 12 <!-- 13 document.writeln( "<h1>Welcome to<br />JavaScript" + 14 "<br />Programming!</h1>" ); 15 // --> 16 </script> 17 18 </head><body></body> 19 </html> New line of the html document in a browser is determined by an html <br /> element
- 10. Outline welcome3.html 1 of 1 1 <?xml version = "1.0"?> 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 3 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 4 5 <!-- Fig. 7.3: welcome3.html --> 6 <!-- Printing Multiple Lines --> 7 8 <html xmlns = "http://www.w3.org/1999/xhtml"> 9 <head><title>Printing Multiple Lines</title> 10 11 <script type = "text/javascript"> 12 <!-- 13 document.writeln( "<h1>Welcome to<br />JavaScript" + 14 "<br />Programming!</h1>" ); 15 // --> 16 </script> 17 18 </head><body></body> 19 </html> New line of the html document in a browser is determined by an html <br /> element