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

CS346 - Javascript 1, 2 1

Module 1Introduction to JavaScript

CS346


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


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


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


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


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)


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+


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


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


Placing JavaScript

Module 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


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


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”


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


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.*/


Hello World Script

<pre>

<script type=“text/javascript”>

< ! - -

document.writeln(“Hello World”);

document.writeln(“This line is printed below.”);

// - - >

</script>

</pre>


Output of the Hello World Script


Examples

JavaScript examples JS-1 Examples

2-1Precedence.htm 2-2MultipleJavascriptCalls.htm 2-3ExternalJS.htm 2-4ExternalJS.htm


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

Hello, world

<head><script type = "text/javascript"></script>

</head>


Sequence of events

Browser interprets script which generates output (XHTML)

Browser renders the generated XHTML


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

String concatenation: + operator

<script type = "text/javascript"></script>


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, 21 Module 1 Introduction to JavaScript CS346.

Documents

Transcript of CS346 - Javascript 1, 21 Module 1 Introduction to JavaScript CS346.