Download presentation
Presentation is loading. Please wait.
Published byWinifred Rich Modified over 9 years ago
1
CS346 - Javascript 1, 21 Module 1 Introduction to JavaScript CS346
2
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
3
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
4
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
5
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
6
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)
7
CS346 - Javascript 1, 27 Version Support JavaScript Version 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+
8
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
9
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
10
CS346 - Javascript 1, 210 Placing JavaScript Module 2
11
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
12
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
13
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”
14
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
15
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. */
16
CS346 - Javascript 1, 216 Hello World Script < ! - - document.writeln(“Hello World”); document.writeln(“This line is printed below.”); // - - >
17
CS346 - Javascript 1, 217 Output of the Hello World Script
18
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
19
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
20
CS346 - Javascript 1, 220 Hello, world <!-- HIDE // Hide script from lame UA's document.writeln( " Hello, world "); // UNHIDE -->
21
CS346 - Javascript 1, 221 Sequence of events Browser interprets script which generates output (XHTML) Browser renders the generated XHTML
22
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
23
CS346 - Javascript 1, 223 String concatenation: + operator <!-- document.write(" The" + " content" + " of this paragraph is" + " the \"concatenation\"" + " of several strings."); document.write(" "); // -->
24
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 /* … */
Similar presentations
© 2024 SlidePlayer.com Inc.
All rights reserved.