PENGANTAR TEKNOLOGI WEB 4

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


JavaScript


Mencetak di halaman Web





Hasil













Contoh Alert



Hasil



“Dynamic” Client Side






Hasil


JavaScript data types & variables






JavaScript Math routines


Aritmatika






Operator Kontrol



Persamaan









User-Defined Functions










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


Persamaan





User-defined functions






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



Document Object


Navigator Object