Module 1 Introduction to JavaScript CS346 Module 1 Introduction to JavaScript CS346 - Javascript 1, 2
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, 2
Popular Uses For JavaScript Cookies Rollovers Banners Redirection Form Validation Calculations Reset Form Status Bar Messages User Feedback Popup Windows Browser Detection Random Images, Quotes Display Current Date Display Last Modified Date CS346 - Javascript 1, 2
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, 2
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, 2
The <script> Tag <script>…</script> — 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) <script language=“JavaScript1.2”> type <script type=“javascript”> (NOW) CS346 - Javascript 1, 2
Version Support JavaScript Version Browser Support 1.0 1.1 1.2 1.3 1.4 1.5 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, 2
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, 2
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, 2
Module 2 Placing JavaScript CS346 - Javascript 1, 2
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 <head> or <body> section CS346 - Javascript 1, 2
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 <head> Source files cannot include HTML tags CS346 - Javascript 1, 2
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, 2
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 (<!- - and - - >) not interpreted by browsers that do not support JavaScript CS346 - Javascript 1, 2
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, 2
Hello World Script <pre> <script type=“text/javascript”> < ! - - document.writeln(“Hello World”); document.writeln(“This line is printed below.”); // - - > </script> </pre> CS346 - Javascript 1, 2
Output of the Hello World Script CS346 - Javascript 1, 2
Examples JavaScript examples JS-1 Examples 2-1Precedence.htm 2-2MultipleJavascriptCalls.htm 2-3ExternalJS.htm 2-4ExternalJS.htm CS346 - Javascript 1, 2
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, 2
Hello, world <head> <script type = "text/javascript"> <!-- HIDE // Hide script from lame UA's document.writeln( "<h1>Hello, world</h1>"); // UNHIDE --> </script> </head> CS346 - Javascript 1, 2
Sequence of events Browser interprets script which generates output (XHTML) Browser renders the generated XHTML CS346 - Javascript 1, 2
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, 2
String concatenation: + operator <script type = "text/javascript"> <!-- document.write("<p>The" + " content" + " of this paragraph is" + " the \"concatenation\"" + " of several strings."); document.write("</p>"); // --> </script> CS346 - Javascript 1, 2
JavaScript code format JavaScript statements may contain whitespace (line breaks, tabs, spaces) for readability Except in string literals JavaScript is case sensitive Comments: //… and /* … */ CS346 - Javascript 1, 2