JS1-1 Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu [email protected]

JS 1-1

Introduction to JavaScript(JavaScript 1)

Xingquan (Hill) [email protected]

JS 1-2

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-3

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-4

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-5

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-6

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-7

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-8

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 thereReturnX;

JS 1-9





JS 1-10

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"> </script>

</head><body></body></html>

Example

JS 1-11

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?MozillaScript Tracer http://www.netamo.com/tracer

http://www.netamo.com/tracer

JS 1-12

JS 1-13

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-14

Number

parseInt(variable); parseFloat(variable);

Example

JS 1-15





JS 1-16

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-17

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-18


Numeric operators - ++, --, +, -, *, /, % All operations are in double precisionA++ - A=A+1;

A++ vs ++A; Example The Math Object

Provides floor, round, max, min, trig functions, etc.

• e.g., Math.cos(x) ExampleMath functions supported by JS

http://www.javascripter.net/faq/mathfunc.htm




JS 1-19


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-20


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-21

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-22





JS 1-23

Control Statements Compound statements are delimited by

braces, but compound statements are not blocks NO local variables

Control expressions – three kinds Primitive values 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-24

Selection Statements

The usual if-then-else (clauses can be either single statements or compound statements)

Switchswitch (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-25

Loop Statements for (init; control; increment) {

statement or cmpnd ExampleContinue

} while (control_expression)

Example { statement or cmpnd }

do { Example statement or compound }while (control_expression)

JS 1-26

JS 1-27

Documents

JS1-1 Introduction to JavaScript (JavaScript 1) Xingquan (Hill) Zhu [email protected]