Transcript JavaScript

Introduction to JavaScript
(JavaScript 1)
Xingquan (Hill) Zhu
[email protected]
JS
1-1
JS
 Introduction
 General Syntactic Characteristics
 JS write to the XHTML document
 Write vs Writeln
 Typical JS dialogs
 Primitives, Operations, & Expressions
 Primitives: Number, String, Boolean, Undefined, Null
 Numeric operators
 String catenation
 Coercions
 Control Statements
 Selection statements
 Loop statements
JS
1-2
Introduction
 JavaScript scripting language
Enhance functionality and appearance
 Client-side scripting

• Make pages more dynamic and interactive
Foundation for complex server-side scripting
 Program development
 Program control

JavaScript Examples
JS
1-3
Things you should know about JS
 JavaScript can be used to replace some of what is
typically done with applets (except graphics)
 JavaScript can be used to replace some of what is
done with CGI (but no file operations or
networking)
 User interactions through forms are easy
 The Document Object Model (DOM) makes it
possible to support dynamic HTML documents with
JavaScript

Event-Driven Computation


User interactions with HTML documents in JavaScript
use the event-driven model of computation
User interactions with form elements can be used to
trigger execution of scripts
JS
1-4
Things you should know about JS
 JavaScript is NOT an object-oriented
programming language

Does not support class-based inheritance
• Cannot support polymorphism

Has prototype-based inheritance, which is much
different
 JavaScript Objects
 JavaScript objects are collections of properties, which
are like the members of classes in Java and C++
• Date.getTime()


JavaScript has primitives for simple types
All JavaScript objects are accessed through references
JS
1-5
General Syntactic Characteristics
 For this book, all JavaScript scripts will be embedded
in HTML documents

Either directly, as in
<script type = “text/javaScript">
-- JavaScript script –
</script>

Or indirectly, as a file specified in the src attribute of
<script>, as in
<script type = "text/javaScript"
src = "myScript.js">
</script>
Example
JS
1-6
General Syntactic Characteristics

Identifier form: begin with a letter or underscore,
followed by any number of letters, underscores, and
digits
 Case sensitive
 variable1 and Variable1 are different
 25 reserved words, plus future reserved words
 - Comments: both // and /* … */
JS
1-7
General Syntactic Characteristics
 Scripts are usually hidden from browsers that do not
include JavaScript interpreters by putting them in
special comments
<!—
-- JavaScript script –
//-->
 Semicolons can be a problem
 They are “somewhat” optional
 Problem: When the end of the line CAN be the end of a
statement – JavaScript puts a semicolon there
Return
X;
JS
1-8
JS
 Introduction
 General Syntactic Characteristics
 JS write to the XHTML document
 Write vs Writeln
 Typical JS dialogs
 Primitives, Operations, & Expressions
 Primitives: Number, String, Boolean, Undefined, Null
 Numeric operators
 String catenation
 Coercions
 Control Statements
 Selection statements
 Loop statements
JS
1-9
Simple Program: Printing a line of
text in a web page
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>A First Program in JavaScript</title>
<script type = "text/javascript">
<!-document.writeln("<h1>Welcome to JavaScript
Programming!</h1>" );
// -->
</script>
</head><body></body>
</html>
Example
JS
1-10
Write vs Writeln
 Document.writeln(“This is the end!”)
 Document.write(“This is the end!\r\n”);
Example2
Example 3
Want to know what was written to the browser?
Mozilla
Script Tracer http://www.netamo.com/tracer
JS
1-11
JS
1-12
Typical JS dialogs
 “Window” object
JavaScript model for the browser window
 Three methods: Prompt, confirm, alert

• Cause the browser to wait for a user response
Example alert, confirm, prompt
JS
1-13
Number
 parseInt(variable);
 parseFloat(variable);
Example
JS
1-14
JS
 Introduction
 General Syntactic Characteristics
 JS write to the XHTML document
 Write vs Writeln
 Typical JS dialogs
 Primitives, Operations, & Expressions
 Primitives: Number, String, Boolean, Undefined, Null
 Numeric operators
 String catenation
 Coercions
 Control Statements
 Selection statements
 Loop statements
JS
1-15
Primitives, Operations, & Expressions
 Five primitive types
Example
 Number, String, Boolean, Undefined, or Null
 JavaScript is dynamically typed – any variable can be
used for anything (primitive value or reference to any
object)

The interpreter determines the type of a particular
occurrence of a variable
• complication
 Variables can be either implicitly or explicitly declared
var sum = 0,
today = "Monday",
flag = false;
JS
1-16
Primitives, Operations, & Expressions
 Number, String, and Boolean have wrapper objects
(Number, String, and Boolean)





All numeric values are stored in double-precision floating
point
String literals are delimited by either ' or “
• Can include escape sequences (e.g., \t)
Boolean values are true and false
The only Null value is null
The only Undefined value is undefined
 In the cases of Number and String, primitive values
and objects are coerced back and forth so that
primitive values can be treated essentially as if they
were objects



Var num_v=Number(str_v);
Var str_v=String(num_v);
Var str_v=num_v.toString();
str_v=num_v.toString(2);
JS
1-17
Primitives, Operations, & Expressions
 Numeric operators - ++, --, +, -, *, /, %
 All operations are in double precision
A++ - A=A+1;
A++ vs ++A;
Example
 The Math Object
 Provides floor, round, max, min, trig functions, etc.
Example
Math functions supported by JS
• e.g., Math.cos(x)
http://www.javascripter.net/faq/
mathfunc.htm
JS
1-18
Primitives, Operations, & Expressions
 The Number Object

Example
Some useful properties:
• MAX_VALUE, MIN_VALUE, NaN,
POSITIVE_INFINITY, NEGATIVE_INFINITY, PI
– e.g., Number.MAX_VALUE
• An arithmetic operation that creates overflow
returns NaN
• NaN is not == to any number, not even itself
• Test for it with isNaN(x)
• Number object has several methods
– toString toFixed toExponential
toPrecision valueOf
JS
1-19
Primitives, Operations, & Expressions
 String catenation operator: + Example
 Coercions
 Catenation coerces numbers to strings
• Numeric operators (other than +) coerce strings to numbers (if
either operand of + is a string, it is assumed to be catenation
• Conversions from strings to numbers that do not work return NaN

Explicit conversions
• Use the String and Number constructors
• Use toString method of numbers
• Use parseInt and parseFloat on strings
 String properties & methods
 length e.g., var len = str1.length; (a property)
 charAt(position) e.g., str.charAt(3)
 indexOf(string) e.g., str.indexOf('B')
 substring(from, to) e.g., str.substring(1, 3)
 toLowerCase() e.g., str.toLowerCase()
JS
1-20
Primitives, Operations, & Expressions
 The typeof operator
Example
 Returns "number", "string", or "boolean" for primitives;
returns "object" for objects and null
 The Data Object
 Create one with the Date constructor (no params)
 Local time methods of Date:
•
•
•
•
•
•
toLocaleString – returns a string of the date
getDate – returns the day of the month
getMonth – returns the month of the year (0 – 11)
getDay – returns the day of the week (0 – 6)
getFullYear – returns the year
getTime – returns the number of milliseconds since January 1,
1970
• getHours – returns the hour (0 – 23)
• getMinutes – returns the minutes (0 – 59)
• getMilliseconds – returns the millisecond (0 – 999)
Example
JS
1-21
JS
 Introduction
 General Syntactic Characteristics
 JS write to the XHTML document
 Write vs Writeln
 Typical JS dialogs
 Primitives, Operations, & Expressions
 Primitives: Number, String, Boolean, Undefined, Null
 Numeric operators
 String catenation
 Coercions
 Control Statements
 Selection statements
 Loop statements
JS
1-22
Control Statements
 Compound statements are delimited by braces, but
compound statements are not blocks


NO local variables

Primitive values
Control expressions – three kinds
Example
• If it is a string, it is true unless it is empty or "0"
• If it is a number, it is true unless it is zero

Relational Expressions Example
• ==, !=, <, >, <=, >=
• Operands are coerced if necessary
(ASCII)
– string vs number, it attempts to convert the string to a number
– Boolean vs non-boolean, the Boolean operand is coerced to a
number (1 or 0)

Compound Expressions
• && || !
Example
JS
1-23
Selection Statements
 The usual if-then-else (clauses can be either single statements or




compound statements)
Switch
switch (expression) {
case value_1:
// value_1 statements
case value_2:
// value_2 statements
…
[default:
// default statements]
}
The statements can be either statement sequences or compound
statements
The control expression can be a number, a string, or a Boolean
Different cases can have values of different types
Example
More
Complex Example
JS
1-24
Loop Statements
 for (init; control; increment)
{
}
statement or cmpnd
 while (control_expression)
{
Example Continue
Example
statement or cmpnd
}
 do {
statement or compound
}while (control_expression)
Example
JS
1-25
JS
1-26
JS
 Introduction
 General Syntactic Characteristics
 JS write to the XHTML document
 Write vs Writeln
 Typical JS dialogs
 Primitives, Operations, & Expressions
 Primitives: Number, String, Boolean, Undefined, Null
 Numeric operators
 String catenation
 Coercions
 Control Statements
 Selection statements
 Loop statements
JS
1-27