CS346 - Javascript 1, 21 Module 1 Introduction to JavaScript CS346

CS346 - Javascript 1, 22 JavaScript’s Role  HTML/CSS tells a browser how to render a document  JavaScript brings HTML to life by making Web pages dynamic  Use JavaScript to change the contents of a Web page after it has been rendered by a browser

CS346 - Javascript 1, 23 Popular Uses For JavaScript  Status Bar Messages  User Feedback  Popup Windows  Browser Detection  Random Images, Quotes  Display Current Date  Display Last Modified Date  Cookies  Rollovers  Banners  Redirection  Form Validation  Calculations  Reset Form

CS346 - Javascript 1, 24 The JavaScript Language  JavaScript is a scripting language executed by an interpreter from within a Web browser  Interpreter — translates programming code into executable format each time the program is run  Scripting engine — interpreter that is part of the Web browser

CS346 - Javascript 1, 25 The JavaScript Language  Introduced by Netscape and Sun in 1995 Originally called LiveScript  JavaScript is an object-oriented language  JavaScript is available in two formats: Client-side — available to HTML/XHTML pages displayed in Web browsers Server-side — proprietary and vendor- specific

CS346 - Javascript 1, 26 The Tag  … — contains statements that make up a JavaScript program in an HTML document Notifies browser that following commands need to be interpreted by a scripting engine  Attributes Language — specifies which scripting language and version is being used (OLD) type (NOW)

CS346 - Javascript 1, 27 Version Support JavaScript Version Browser Support Ns 2+, IE 3+, Op 3+ Ns 3+, IE 3.5+, Op 3.5+ Ns 4+, IE 4+, Op 3.5+ Ns 4.5+, IE 4+, Op 4+ Ns 5+, IE 4+, Op 5+ Ns 6+, IE 4+, Op 5+

CS346 - Javascript 1, 28 Objects & Methods  Object — programming code and data treated as an individual unit or component  Statements — individual lines of code Statements and are concluded with a semicolon  Methods — groups of related statements associated with an object  To execute, or call, an object’s methods, append the method to the object with a period

CS346 - Javascript 1, 29 Arguments  Argument — information that can be passed to a method The write( ) and writeIn( ) methods require a text string or variable as an argument Text string, or literal, is text that is contained within quotes document.write(“This is a test.”);  Case sensitivity

CS346 - Javascript 1, 210 Placing JavaScript Module 2

CS346 - Javascript 1, 211 JavaScript Placement  Browsers render tags in an HTML document in the order in which they are encountered  When there are multiple JavaScript code sections, each section is also executed in the order in which it appears  The order in which a browser executes JavaScript code also depends on if it is placed in the or section

CS346 - Javascript 1, 212 JavaScript Source Files  Often incorporated directly into an HTML document  Can also be saved in an external file called a source file with file extension.js May use a combination of embedded JavaScript and source files in your web pages  The src attribute accepts a text string to specify the location of a JS source file Should only be declared once, in the  Source files cannot include HTML tags

CS346 - Javascript 1, 213 JavaScript Source Files  Reasons for using source files instead of adding code to HTML: HTML document will be neater JavaScript code sharable among multiple HTML documents JavaScript source files are not as likely to be “borrowed”

CS346 - Javascript 1, 214 JavaScript Comments  Comments are various types of remarks that you place in code that do not render notes to yourself instructions for future programmers  JavaScript is included in HTML comments ( ) not interpreted by browsers that do not support JavaScript

CS346 - Javascript 1, 215 JavaScript Comments  One-line comments — add two slashes // before the text document.write("This is cool!"); // this is a comment  Block comments — add /* to the first line in the block and */ to the last line of the block /* My script writes some text into my document! All of this text is ignored by the browser. */

CS346 - Javascript 1, 216 Hello World Script < ! - - document.writeln(“Hello World”); document.writeln(“This line is printed below.”); // - - >

CS346 - Javascript 1, 217 Output of the Hello World Script

CS346 - Javascript 1, 218 Examples  JavaScript examples JS-1 Examples  2-1Precedence.htm 2-1Precedence.htm  2-2MultipleJavascriptCalls.htm 2-2MultipleJavascriptCalls.htm  2-3ExternalJS.htm 2-3ExternalJS.htm  2-4ExternalJS.htm 2-4ExternalJS.htm

CS346 - Javascript 1, 219 Summary JS-1, JS-2  A client-side scripting language  Script (code) is downloaded by UA  UA interprets (runs) the script  Script can generate XHTML  Script can change element attributes, including style  Script can interact w/ user

CS346 - Javascript 1, 220 Hello, world <!-- HIDE // Hide script from lame UA's document.writeln( " Hello, world "); // UNHIDE -->

CS346 - Javascript 1, 221 Sequence of events  Browser interprets script which generates output (XHTML)  Browser renders the generated XHTML

CS346 - Javascript 1, 222 write and writeln  write and writeln are methods of document object  Both take a string argument String literals are enclosed in double or single quotes Use \" and \' to embed quotes in a string literal Use \n \t \\ as in Java, C++  writeln puts a newline into generated XHTML  write does not put in a newline

CS346 - Javascript 1, 223 String concatenation: + operator <!-- document.write(" The" + " content" + " of this paragraph is" + " the \"concatenation\"" + " of several strings."); document.write(" "); // -->

CS346 - Javascript 1, 224 JavaScript code format  JavaScript statements may contain whitespace (line breaks, tabs, spaces) for readability  Except in string literals  JavaScript is case sensitive  Comments: //… and /* … */