fiveth

Pengantar Teknologi Web 4
JavaScript

Client-side programming

• recall: HTML is good for developing static pages

– can specify text/image layout, presentation, links, …

– Web page looks the same each time it is accessed

– in order to develop interactive/reactive pages, must integrate programming

Scripts vs. programs

• a scripting language is a simple, interpreted programming language

– scripts are embedded as plain text, interpreted by application

– simpler execution model: don't need compiler or development environment

– saves bandwidth: source code is downloaded, not compiled executable

– platform-independence: code interpreted by any script-enabled browser

– but: slower than compiled code, not as powerful/full-featured

Common scripting tasks

• adding dynamic features to Web pages

– validation of form data

– image rollovers

– time-sensitive or random page elements

– handling cookies

• defining programs with Web interfaces

– utilize buttons, text boxes, clickable images, prompts, frames

JavaScript

• JavaScript code can be embedded in a Web page using SCRIPT tags

– the output of JavaScript code is displayed as if directly entered in HTML

Mencetak di halaman Web

Hasil

Contoh Alert

Hasil

“Dynamic” Client Side

Hasil

JavaScript data types & variables

• JavaScript has only three primitive data types

strings : "foo" 'howdy do' "I said 'hi'." ""

numbers : 12 3.14159 1.5E6

booleans : true false

JavaScript Math routines

Aritmatika

Operator kontrol

Persamaan

User-defined functions

• function definitions are similar to C++/Java, except:

– no return type for the function (since variables are loosely typed)

– no types for parameters (since variables are loosely typed)

– by-value parameter passing only (parameter gets copy of argument)

Function example

JavaScript Strings

• a class defines a new type (formally, Abstract Data Type)

– encapsulates data (properties) and operations on that data (methods)

• a String encapsulates a sequence of characters, enclosed in quotes

properties include

• length : stores the number of characters in the string

methods include

• charAt(index) : returns the character stored at the given index

• (as in C++/Java, indices start at 0)

• substring(start, end) : returns the part of the string between the start

• (inclusive) and end (exclusive) indices

• toUpperCase() : returns copy of string with letters uppercase

• toLowerCase() : returns copy of string with letters lowercase

to create a string, assign using new or just make a direct assignment (new is implicit)

word = new String("foo"); word = "foo";

properties/methods are called exactly as in C++/Java

• word.length word.charAt(0)

String example: palindromes

Date class

• String & Array are the most commonly used classes in JavaScript

– other, special purpose classes & objects also exist

• the Date class can be used to access the date and time

– to create a Date object, use new & supply year/month/day/… as desired

• today = new Date(); // sets to current date & time

• newYear = new Date(2002,0,1); //sets to Jan 1, 2002 12:00AM

– methods include:

• newYear.getYear() can access individual components of a date

• newYear.getMonth()

• newYear.getDay()

• newYear.getHours()

• newYear.getMinutes()

• newYear.getSeconds()

• newYear.getMilliseconds()