cs346 - javascript 1, 21 module 1 introduction to javascript cs346
Post on 26-Dec-2015
236 Views
Preview:
TRANSCRIPT
CS346 - Javascript 1, 2 1
Module 1Introduction to JavaScript
CS346
CS346 - Javascript 1, 2 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 3
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, 2 4
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 5
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 6
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 7
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+
CS346 - Javascript 1, 2 8
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 9
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 10
Placing JavaScript
Module 2
CS346 - Javascript 1, 2 11
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 12
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 13
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 14
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 15
JavaScript Comments
One-line comments — add two slashes // before the textdocument.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 16
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 17
Output of the Hello World Script
CS346 - Javascript 1, 2 18
Examples
JavaScript examples JS-1 Examples
2-1Precedence.htm 2-2MultipleJavascriptCalls.htm 2-3ExternalJS.htm 2-4ExternalJS.htm
CS346 - Javascript 1, 2 19
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 20
Hello, world
<head><script type = "text/javascript"><!-- HIDE
// Hide script from lame UA'sdocument.writeln(
"<h1>Hello, world</h1>"); // UNHIDE --></script>
</head>
CS346 - Javascript 1, 2 21
Sequence of events
Browser interprets script which generates output (XHTML)
Browser renders the generated XHTML
CS346 - Javascript 1, 2 22
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 23
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 24
JavaScript code format
JavaScript statements may contain whitespace (line breaks, tabs, spaces) for readability
Except in string literals JavaScript is case sensitive Comments: //… and /* … */
top related