Pengantar Teknologi Web 4

.
JavaScript
Antonius Rachmat C
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
• client-side programming
– programs are written in a separate programming language
e.g., JavaScript, JScript, VBScript
? programs are embedded in the HTML of a Web page, with tags to identify the program component
e.g.,
? the browser executes the program as it loads the page, integrating the dynamic output of the program with the static content of HTML
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
JavaScript: the first Web scripting language, developed by Netscape in 1995
• syntactic similarities to Java/C++, but simpler & more flexible
– (loose typing, dynamic variables, simple objects)
JScript: Microsoft version of JavaScript, introduced in 1996
• same core language, but some browser-specific differences
• fortunately, IE & Netscape can (mostly) handle both JavaScript & JScript
• JavaScript 1.5 & JScript 5.0 cores conform to ECMAScript standard
VBScript: client-side scripting version of Microsoft Visual Basic
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
• limitations of client-side scripting
– since script code is embedded in the page, viewable to the world
– for security reasons, scripts are limited in what they can do
e.g., can't access the client's hard drive
? since designed to run on any machine platform, scripts do not contain platform specific commands
? script languages are not full-featured
e.g., JavaScript objects are crude, not good for large project development



Mencetak di halaman Web






























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)



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



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