Scribd
Upload
13 views77 pages

Lec 14

The document provides an introduction to JavaScript, covering topics like dynamic HTML, the JavaScript language, the document object model, and a first JavaScript program. It discusses using the <script> tag, creating JavaScript source files, adding comments, and hiding JavaScript from incompatible browsers.

Uploaded by

BHAGYA M PATIL
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
13 views77 pages

Lec 14

The document provides an introduction to JavaScript, covering topics like dynamic HTML, the JavaScript language, the document object model, and a first JavaScript program. It discusses using the <script> tag, creating JavaScript source files, adding comments, and hiding JavaScript from incompatible browsers.

Uploaded by

BHAGYA M PATIL
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 77

Introduction to Programming

the WWW I
CMSC 10100-1
Winter 2004
Lecture 14

Introduction to JavaScript 1 1
Today’s Topics

• Intro to JavaScript
• A first JavaScript
• Working with variables, functions, objects

Introduction to JavaScript 1 2
Dynamic HTML (DHTML)
• Dynamic HTML can be viewed as the
combination of HTML 4 ,CSS , and JavaScript
 HTML 4 represents the static structure
 CSS represents the appearance details
 JavaScript works on the dynamic behaviors of the
content!
• Document Object Model (DOM) provides a programming
interface between HTML/CSS and JavaScript
• DHTML isn’t really about HTML
 An abstract concept of breaking up a page into
manipulable elements, and exposing them to script

Introduction to JavaScript 1 3
Why DHTML?
• Web evolves
 static displays of data interactive applications
• Allows a Web page to change after loaded into
the browser
 No need to communicate with server for an update
 More efficient than Common Gateway Interface (CGI)
solution in certain situations
• Form validation

Introduction to JavaScript 1 4
JavaScript Language
• The JavaScript Programming Language
 Scripting Languages
• Executed by an interpreter contained within the web browser
(scripting host)
• Interpreter uses a scripting engine
 Converts code to executable format each time it runs
 Converted when browser loads web document
 Issues
• Scripting vs. Programming
• Interpreted vs. Compiled languages
• Reference:
http://www.classes.cs.uchicago.edu/classes/archive/2004/wi
nter/10100-1/02/javascript/javascript01.html
Introduction to JavaScript 1 5
JavaScript Language

• The JavaScript Programming Language


 JavaScript
• Originally called LiveScript when introduced in
Netscape Navigator
• In Navigator 2.0, name changed to JavaScript
• Current version 1.5
 JScript
• MS version of JavaScript
 Current version 5.5

Introduction to JavaScript 1 6
JavaScript Language

• The JavaScript Programming Language


 ECMAScript
• International, standardized version (Edition 3)
• Both versions (JavaScript and JScript) conform to
the standard
 Although both have proprietary extensions
• Focus of this text

Introduction to JavaScript 1 7
JavaScript Language

• The JavaScript Programming Language


 JavaScript
• Two formats:
 Client-side
• Program runs on client (browser)
 Server-side
• Program runs on server
• Proprietary to web server platform

Introduction to JavaScript 1 8
Introduction to JavaScript 1 9
JavaScript Language

• JavaScript’s role on the Web


 JavaScript Programming Language
• Developed by Netscape for use in Navigator Web
Browsers
• Purpose  make web pages (documents) more
dynamic and interactive
 Change contents of document, provide forms and
controls, animation, control web browser window, etc.

Introduction to JavaScript 1 10
http://www.jsworkshop.com/js3e/list13-1.html
Introduction to JavaScript 1 11
http://www.motionnet.com/calculator/
Introduction to JavaScript 1 12
http://javascript.about.com/library/scripts/blformvalidate.htm

Introduction to JavaScript 1 13
A First JavaScript Program

• Section B – A First JavaScript Program


 About the <script> tag
 How to create a JavaScript source file
 How to add comments to a JavaScript Program
 How to hide JavaScript from incompatible browsers
 About placing JavaScript in <head> or <body>
sections of HTML documents

Introduction to JavaScript 1 14
A First JavaScript Program

• The <script> Tag


 JavaScript programs are run from within an
HTML document
 <script> and </script>
• Used to notify the browser that JavaScript
statements are contained within

Introduction to JavaScript 1 15
A First JavaScript Program

• The <script> Tag


 language attribute
• Denotes the scripting language being used
 Default  JavaScript
 Other languages (e.g., VBScript) may be used
 Can also specify script language version
• No space between name and version
• Checked by browser, scripts ignored if browser
doesn’t support version
 For ECMAScript compatible browsers, omit version

Introduction to JavaScript 1 16
http://devedge.netscape.com/library/manuals/2000/
javascript/1.5/reference/preface.html#1003515
Introduction to JavaScript 1 17
A First JavaScript Program

• The <script> Tag


 JavaScript
• Object-based language (not Object-Oriented
language)
 Object
• Programming code and data that can be treated
as an individual unit or component
 Statements
• Individual lines in a programming language
 Methods
• Groups of statements related to a particular object

Introduction to JavaScript 1 18
A First JavaScript Program

• The <script> Tag


 Document object
• Represents the content of a browser’s window
 write() & writeln() methods of Document object
• Creates new text on a web page
• Called by appending method to object with a period
• Methods accept arguments
 Information passed to a method

Introduction to JavaScript 1 19
A First JavaScript Program

• The <script> Tag


 Preformatted text
• <pre> and </pre> tags
 Tag set known as a container element because it
contains text and other HTML tags
• Translates literal text to presentation area
• Required to get carriage return in writeln() method
to be sent to presentation area

Introduction to JavaScript 1 20
Introduction to JavaScript 1 21
Introduction to JavaScript 1 22
A First JavaScript Program

• The <script> Tag


 Document object
• Considered a top-level object
• Naming convention
 Capitalize first letter of object
 Unlike HTML, JavaScript is case sensitive

Introduction to JavaScript 1 23
http://old.jccc.net/~srao/JavaScript/Tutorial01/MyFirstJavaScript.html

Introduction to JavaScript 1 24
A First JavaScript Program

• Creating a JavaScript Source File


 JavaScript programs can be used in two
ways:
• Incorporated directly into an HTML file
 Using <script> tag
• Placed in an external (source) file
 Has file extension .js
 Contains only JavaScript statements

Introduction to JavaScript 1 25
A First JavaScript Program

• Creating a JavaScript Source File


 JavaScript source files
• Use src attribute of <script> tag to denote source
of JavaScript statements
 Browser will ignore any JavaScript statements inside
<script> and </script> if src attribute is used
• Cannot include HTML tags in source file

<script language=“JavaScript” src=“/home/hai/source.js”>


</script>

Introduction to JavaScript 1 26
A First JavaScript Program

• Creating a JavaScript Source File


 Advantages of JavaScript source files
• Makes HTML document neater (less confusing)
• JavaScript can be shared among multiple HTML
files
• Hides JavaScript code from incompatible browsers

Introduction to JavaScript 1 27
A First JavaScript Program

• Creating a JavaScript Source File


 Can use a combination of embedded and
non–embedded code
• Allows finer granularity in coding functionality
• JavaScript sections executed in order of location
within HTML document

Introduction to JavaScript 1 28
http://old.jccc.net/~srao/JavaScript/Tutorial01/
MultipleJavaScriptCalls.html

Introduction to JavaScript 1 29
A First JavaScript Program

• Adding comments to a JavaScript Program


 Comments
• Non-printing lines that are placed in the code to
contain various remarks about the code
 Makes it easier to understand the code operation
• Two types
 Line comments
• // ignore all text to the end of the line
 Block comments
• /* ignore all text between these symbols */

Introduction to JavaScript 1 30
Introduction to JavaScript 1 31
A First JavaScript Program

• Hiding JavaScript from Incompatible


Browsers
 Two methods
• Place JavaScript in external source file
• Enclose the code within HTML comments

<!-- beginning of HTML block comment


end of HTML block comments -->

Introduction to JavaScript 1 32
Introduction to JavaScript 1 33
A First JavaScript Program

• Hiding JavaScript from Incompatible


Browsers
 Alternate message display
• If browser doesn’t support JavaScript
 Use <noscript> & </noscript> to place alternate
message to users of back-level browsers

Introduction to JavaScript 1 34
Introduction to JavaScript 1 35
A First JavaScript Program

• Placing JavaScript in <head> or <body>


sections
 Script statements interpreted in order of
document rendering
 <head> section rendered before <body>
section
• Good practice to place as much code as
possible in <head> section

Introduction to JavaScript 1 36
Working with Variables,
Functions, and Objects
• How to declare and use variables
• How to define and call functions
• About built-in JavaScript functions
• How to use JavaScript objects
• How to use object inheritance and prototypes
• How to use object methods
• About built-in JavaScript objects
• About variable scope
Introduction to JavaScript 1 37
Working with Variables

• Variables (or identifiers)


 Values stored in computer memory locations
 Value can vary over time
 Cannot use reserved words as variables
• Reserved Words or Keywords are part of the
JavaScript language syntax
 Variable Example:
• employeeName

Introduction to JavaScript 1 38
Introduction to JavaScript 1 39
Introduction to JavaScript 1 40
Working with Variables

• Variables
 To create:
• Use keyword var to declare the variable
• Use the assignment operator to assign the variable a value
 Declare, then assign value (initialize)
• var employeeName;
• employeeName = “Ric”;
 Declare and assign variable in a single statement
• var employeeName = “Ric”;

Introduction to JavaScript 1 41
Working with Variables

• Variables
 Once created:
• May be changed at any point in the program
 Use variable name and assignment operator
• employeeName = “Althea”;

Introduction to JavaScript 1 42
Working with Variables

• Variables
 Syntax rules
• Cannot use:
 Reserved words & spaces
• Must begin with one of the following:
 Uppercase or lowercase ASCII letter
 Dollar sign ($) or underscore (_)
• Can use numbers, but not as first character
• Variables are case-sensitive

Introduction to JavaScript 1 43
Working with Variables

• Variables
 Conventions
• Use underscore or capitalization to separate
words of an identifier
 employee_first_name
 employeeFirstName

Introduction to JavaScript 1 44
Introduction to JavaScript 1 45
Introduction to JavaScript 1 46
Working with Variables

• Can write the value contained in a variable


to a web page:

var myName = “john”;


document.writeln(“Hello “);
document.writeln(myName);

Introduction to JavaScript 1 47
Working with Variables

• Can use the + concatenation operator:

var myName = “john”;


document.writeln(“Hello “ + myName);

Introduction to JavaScript 1 48
Working with Functions

• Defining Custom Functions


 Function:
• Individual statements grouped together to form a
specific procedure
• Allows you to treat the group of statements as a
single unit
• Must be contained between <script> and
</script> tags
• Must be formally composed (function definition)

Introduction to JavaScript 1 49
Working with Functions

• Defining Custom Functions


 A function definition consists of three parts:
• Reserved word function followed by the function
name (identifier)
• Parameters required by the function, contained
within parentheses following the name
 Parameters  variables used within the function
 Zero or more may be used
• Function statements, delimited by curly braces { }

Introduction to JavaScript 1 50
Introduction to JavaScript 1 51
Working with Functions

• Calling Functions
 Function invocation or call
• Statement including function name followed by a
list of arguments in parentheses
• Parameter of function definition takes on value of
argument passed to function in function call

Introduction to JavaScript 1 52
Working with Functions

• Calling Functions
 Code placement
• Functions must be created (defined) before called
 <head> rendered by browser before <body>
• Function definition
 Place in <head> section
• Function call
 Place in <body> section

Introduction to JavaScript 1 53
Working with Functions

• Variable Scope
 Defines where in the program a declared variable
can be used
• Global variable
 Declared outside a function and is available to all parts of the
program
 var keyword optional
• Local variable
 Declared inside a function and is only available within the
function it is declared
• Global and local variables can use same identifier

Introduction to JavaScript 1 54
Working with Functions

<head>
<script language=“JavaScript”>
function putStuff(myName, myNum){
document.writeln(“Hello “ + myName + “, how are you?”);
var rslt = myNum * 2;
document.writeln (myNum + “ * 2 = “, rslt);
}
</script>
</head>
<body>
<script>
putStuff(“John”, 5);
</script>
</body>

Introduction to JavaScript 1 55
Working with Functions

• Returning a value from a Function


 A function can return nothing
• Just performing some task
 A function can return a value
• Perform a calculation and return the result
 Var returnValue = functionCall(opOne, opTwo);
• A return statement must be added to function
definition

Introduction to JavaScript 1 56
Examples

• TwoFunctionsProgram.html

• CompanyName.html

• SingleCompanyName.html

Introduction to JavaScript 1 57
Working with Functions

• Built-in JavaScript Functions


 Functions defined as part of the JavaScript
language
 Function call identical to the custom functions

Introduction to JavaScript 1 58
Built-in JavaScript Functions
alert(“some string”);
var rslt = prompt(“question”, “default”);
var rslt = confirm(“some string”);

alert displays an alert box with the message.

prompt displays the “question” and allows the user to


input a response. The “default” value shows up in the
response area of the prompt box.

Returns the value the user enters.

confirm displays the string in a box and then has “ok” and
“cancel” buttons.

Returns TRUE if the user hits the “ok” button and returns FALSE if the user hits the
“cancel” button.

Introduction to JavaScript 1 59
Built-in JavaScript Functions

• To create multiple line messages: use the ‘\n’ character.

• No html formatting (or other types of formatting) can be done on the


message that is displayed in these boxes.

• prompt always returns a string, even if the user enters a number


into the response area of the box.
 If you want to use the response as a number you must use the
parseInt method to change the string into a number.

Introduction to JavaScript 1 60
Built-in JavaScript Functions
<head>
<title>Prompt Box</title>

<script type = "text/javascript">


<!--
function putWelcome()
{
var myName=prompt("What's your name?");
confirm("Is your name really " + myName + "?");
document.writeln(“Hello “ + myName);
alert(“Hello” + myName);
}
// -->
</script>
</head>
<body>
<script> http://www.ithaca.edu/barr/Student/CS205/Examples/
putWelcome( ); Tutorial02/prompt2.html
</script>
</body>

Introduction to JavaScript 1 61
Built-in JavaScript Functions

• There are other built-in functions that


extend the capabilities of javascript.

Introduction to JavaScript 1 62
Introduction to JavaScript 1 63
Working with Objects

• Objects are similar to built-in programs


that contain their own functions and
variables.
• You access a function or variable that
belongs to an object using the dot syntax:
document.writeln(``my message’’);

Introduction to JavaScript 1 64
Objects

• There are built-in objects that relate to the


browser and its contents:
 Document
 Window
 Navigator
 Screen
 Element
 Event
 Form

Introduction to JavaScript 1 65
Working with Objects

• There are also built-in JavaScript objects


that extend the functionality of the
language:
• JavaScript includes 11 built-in objects that relate
to the language itself
• Each object contains various methods and
properties for performing a particular task
• Can be used directly in program without
instantiating a new object

Introduction to JavaScript 1 66
Introduction to JavaScript 1 67
Working with Objects

• Understanding JavaScript Objects


 In OO languages (Java, C++)
• Class structures contain associated variables,
methods (functions) and statements
• Objects are instances of classes
 (i.e., objects are instantiated from classes)
• Classes can be inherited from other classes
 JavaScript is not truly object-oriented
• Cannot create classes
Introduction to JavaScript 1 68
Advanced: Working with Objects
(not required since this slide)

• Understanding JavaScript Objects


 Custom JavaScript objects
• Based on constructor functions
 Instantiate a new object or extending an old object
 Objects inherit all variables and statements of
constructor function
• Any JavaScript function can serve as a
constructor

Introduction to JavaScript 1 69
Advanced: Working with Objects

• Understanding JavaScript Objects


 Constructor function
• Has two types of elements
 Property (field)
• Variable within a constructor function
• Data of the object
 Method
• Function called from within an object
• Can be custom or built-in function

Introduction to JavaScript 1 70
Advanced: Working with Objects

• Understanding JavaScript Objects


 Constructor function
• Identifier naming convention
 First word uppercase to differentiate from non-
constructor functions
• BankEmployee
• The this keyword
 Used in constructor functions to refer to the current
object that called the constructor function

Introduction to JavaScript 1 71
Advanced: Working with Objects

• Understanding JavaScript Objects


 Constructor function
• The new keyword
 Used to create new objects from constructor functions
 Example:
• Achmed = new BankEmployee(name, empNum);

Introduction to JavaScript 1 72
Advanced: Working with Objects

• Understanding JavaScript Objects


 Custom object inheritance and prototypes
• Objects inherit the properties and methods of their
constructor function
• Constructor functions:
 Do not require parameters
 Do not require passed arguments
• Properties may set the value at a later time
• If used before set, will return an undefined value

Introduction to JavaScript 1 73
Advanced: Working with Objects

• Understanding JavaScript Objects


 Custom object inheritance and prototypes
• Adding properties after object is instantiated
 Properties can be added to objects using dot operator (.)
 These properties available only to that specific object
• Prototype properties
 Properties added using prototype keyword
 Available to all objects that extend the constructor
function
• BankEmployee.prototype.department = “”;

Introduction to JavaScript 1 74
Advanced: Working with Objects

• Understanding JavaScript Objects


 Custom object inheritance and prototypes
• Object definitions can extend other object
definitions
 Extend original definition and add new properties or
function calls

Introduction to JavaScript 1 75
Introduction to JavaScript 1 76
Advanced: Working with Objects

• Understanding JavaScript Objects


 Custom object methods
• Functions associated with a particular object
 Define the function
 Use the this reference to refer to object properties
 Add it to the constructor function
• this.methodName = functionName
• Call the method using the dot operator (.)

Introduction to JavaScript 1 77

You might also like