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

Pengantar Teknologi Web 3
Teknologi Web Client
• Web browser
• HTML / XML / XHTML
• Javascript / VBScript
• CSS
• Flash player
• Java Applet
• ActiveX / Plugin: program yg terintegrasi dgn browser
• Helper: program yg terinstall di client
Pengembangan sisi client
• Local environment (prosesor, browser, memory, vga, dll)
• Tidak ada kontrol oleh web developer
• Memberikan saran kepada user
– Cth: resolusi 1024 x 768
• Memberi pilihan kepada user
– Cth: javascript harus aktif
• Client / user profiling
Pengembangan sisi client
Pilihan client
Pertimbangan Client
• Kebutuhan dan keinginan user berbeda satu dengan yang lain.
• Pengaruh gender, umur, pendidikan, hobi, pengalaman, latarbelakang, budaya, dll.
• User memiliki tujuan, tugas web developer adalah membantu user mencapai tujuannya (download program, akses jadwal, mencetak daftar harga, dll)
Pertimbangan jaringan
• Bandwidth
– Modem = 56KBps; T1 = 1.5MBps
• Latency: waktu yang diperlukan sebuah paket data untuk menempuh jarak yang menghubungkan dua buah sistem
• Utilization, lalu lintas data pada suatu jaringan.
Web Browser
• MS Internet Explorer (Windows)
• Netscape Navigator/Communicator (Windows & Linux)
• Mozila Firefox (Windows & Linux)
• Opera (Windows & Linux)
• Konqueror (Linux)
• lynx, berbasis teks (Linux)
HTML
• Hypertext Markup Language
• Text based
• Menggunakan tag (tanda) <>
• Tujuannya: untuk tampilan di halaman web
• Bahasanya baku
• Ekstensi : .html , .htm
HTML tag

Judul Halaman

Tags vs. elements
• HTML specifies a set of tags that identify structure and content type
– tags are enclosed in < >

•

specifies an image

– most tags come in pairs, marking a beginning and ending

• and enclose the title of a page
HTML
Aligning text
• can specify how elements should be aligned (default is left-justified)
– utilize STYLE attribute of tag

• to justify more than one element as a group, use DIV tags
– ell elements enclosed in DIV are formatted similarly

Text styles
• can specify styles for fonts

– … specify bold
– … specify italics
– … specify typewriter-like (fixed-width) font

– … increase the size of the font
– … decrease the size of the font

– _… specify a subscript
– ^… a superscript

–

…

for paragraphs
–
… for inline text

• Note: if elements are nested, the order of opening/closing is important! (LIFO)
Font
Lists

• there are 3 different types of list elements

–

… specifies an ordered list (using numbers or letters to label each list item)
•

identifies each list item

• can set type of ordering, start index

–

… specifies unordered list (using a bullet for each)
•

identifies each list item

–

… specifies a definition list
•

identifies each term
•

identifies its definition
Tabel 1 baris 2 kolom
Tabel 2 baris 2 kolom
URL
Hyperlinks
• perhaps the most important HTML element is the hyperlink, or ANCHOR

– …

• where URL is the Web address of the page to be displayed when the user clicks on the link

• if the page is accessed over the Web, must start with http://

• if not there, the browser will assume it is the name of a local file

– …

• causes the page to be loaded in a new window

Hyperlinks - anchor
• for long documents, you can even have links to other locations in that document

– …

• where ident is a variable for identifying this location

– …

• will then jump to that location within the file

– …

• can jump into the middle of another file just as easily

Images
• can include images using IMG
– by default, browsers can display GIF and JPEG files
– other image formats may require plug-in applications for display

• alternate text

• again, if file is to be accessed over the Web, must start with http:// (if not, will assume local file)
Frames
• frames provide the ability to split the screen into independent pages
– must define a FRAMESET that specifies the layout of the pages
– actual pages to be displayed must be in separate files
Frame controversy
• frames are probably the most controversial HTML feature
– some people love them, some people hate them

• 2 reasonable uses for frames
– as a navigational aid:
• can divide the screen into a static menu frame and the main frame for navigating a site
• e.g., www.creighton.edu/~davereed

– as a means of separating program input from output:
• can divide the screen into a static man input form frame and the main frame for displaying output
• e.g., www.creighton.edu/~davereed/csc551/JavaScript/story.html

Menu frame
• to create a menu, need to be able to direct links to the main frame
– name the frames in the FRAMESET
– specify the frame name as TARGET in the link
– specify _top as target to return to top level of browser
Content vs. presentation
• most HTML tags define content type, independent of presentation
– exceptions?

• style sheets associate presentation formats with HTML elements
– CSS1: developed in 1996 by W3C
– CSS2: released in 1998, but not fully supported by browsers

– HTML style sheets are known as Cascading Style Sheets, since can be defined at three different levels
• inline style sheets apply to the content of a single HTML element
• document style sheets apply to the whole BODY of a document
• external style sheets can be linked and applied to numerous documents

lower-level style sheets can override higher-level style sheets

Inline style sheets
• Using the style attribute, can specify presentation style for a single HTML element

– within tag, list sequence of property:value pairs

font-family:Courier,monospace
font-style:italic
font-weight:bold
font-size:12pt font-size:large font-size:larger

color:red color:#000080
background-color:white

text-decoration:underline
text-decoration:none
text-align:left text-align:center
text-align:right text-align:justify
vertical-align:top vertical-align:middle
vertical-align:bottom

text-indent:5em text-indent:0.2in
Inline style sheets (cont.)
• more style properties & values

margin-left:0.1in margin-right:5%
margin:3em
padding-top:0.1in padding-bottom:5%
padding:3em

border-width:thin border-width:thick
border-width:5
border-color:red
border-style:dashed border-style:dotted
border-style:double border-style:none

whitespace:pre

list-style-type:square
list-style-type:decimal
list-style-type:lower-alpha
list-style-type:upper-roman
Document style sheets
• inline style sheets apply to individual elements in the page
– can lead to inconsistencies as similar elements are formatted differently
• e.g., might like for all H1 elements to be centered

– inline definitions mix content & presentation
•  violates the general philosophy of HTML
Document style sheets
• document style sheets ensure that similar elements are formatted similarly
– can even define subclasses of elements and specify formatting

p.indented defines subclass of paragraphs
• inherits all defaults of

• adds new features

to specify this newly defined class, place class="ID" attribute in tag

• note how "clean" the BODY is

External style sheets
• modularity is key to the development and reuse of software
– design/implement/test useful routines and classes
– package and make available for reuse

– saves in development cost & time
– central libraries make it possible to make a single change and propogate
Modularity & style sheets
• ideally, the developer(s) of a Web site would place all formatting options in an external style sheet

• all Web pages link to that same style sheet for a uniform look

– simplifies Web pages since only need to specify structure/content tags

Web rules of thumb
• HTML provides for lots of neat features,
but just because you can add a feature doesn't mean you should!
– don't add features that distract from the content of the page

 use color & fonts sparingly and be careful how elements fit together
e.g, no purple text on a pink background, no weird fonts

 use images only where appropriate
e.g., bright background images can make text hard to read
e.g., the use of clickable images instead of buttons or links can slow access

 don't rely on window or font size for layout
e.g., font size may be adjusted by viewer, window constrained

 don’t be annoying
e.g., no pop-up windows, excessive advertising, silly music

 break large document into smaller or provide a menu (either internal or frame)

 stick to standard features and test using both IE and Netscape

 utilize style sheets to make changes easy & ensure consistency

trird

Pengantar Teknologi Web 2

Web Architectures & Technologies

WWW

• Software

• Kumpulan service Internet, yaitu web-web yang berada di layer aplikasi

• Ditemukan oleh Tim Berners-Lee dkk di CERN

• Didesain untuk membantu para ilmuwan di CERN untuk memperoleh informasi dari dokumen-dokumen di Internet

• Tujuannya: membuat software (browser) untuk menampilkan informasi tersebut

– Idenya: hyperlink

WWW

• The world wide web consortium (W3C) definition of the web: "The World Wide Web is the universe of network-accessible information, an embodiment of human knowledge"

• Provides information access in ways not previously possible

– Hyperlinked (Hypertext)

– Graphical user interface

– Pictorial and non-text information

– Information that changes rapidly

– Immediate access

– Anyone can author a web site

– Multi-user access to the same information (try that with a book)

– Easily searchable information

WWW Components

• Structural Components

– Clients/browsers – to dominant implementations

– Servers – run on sophisticated hardware

– Caches – many interesting implementations

– Internet – the global infrastructure which facilitates data transfer

• Semantic Components

– Hyper Text Transfer Protocol (HTTP)

– Hyper Text Markup Language (HTML)

• eXtensible Markup Language (XML)

– Uniform Resource Identifiers (URIs)

Web Server survey (netcraft)

Growth of World Wide Web

A brief history of the web

Web Architecture

• Layering Aspect

– “Separation of concerns”

– How many concurrent users are you serving?

– Shared needs among multiple applications? (e.g., security)

• Data Aspect

– What kind(s) of data are you delivering?

• Structured vs non structured

• On-demand vs. real-time

– What are the bandwidth requirements?

• Size & nature of data

• Again, audience concerns

Tiers…?

• A “tier” can be hardware, software, or logical. The last is the most sensible option from an architectural viewpoint.

• Therefore:

– A non-application-specific client (such as a web browser) is not a tier

– A database with no overlying data access layer is not really considered a tier either

N-tier web architectures

How to build a 2-tier web app…

Physical architecture

Conceptual architecture

the three roles

• the Model contains data that represents the problem

• the Controller responds to user actions by telling the Model how to change

• the View displays the current state of the Model to the user

how do we design it?

• the Model is a class that represents the actual problem being solved

– it has private fields, and provides accessor (getter and setter) methods

– the Model should always be a separate class

• if using a GUI

– the listeners collectively are the Controller

– the displayed components are the View

– the Controller and View are thus a little bit interdependent

Combining Controller and View

• Sometimes the Controller and View are combined, especially in small programs

• Combining the Controller and View is appropriate if they are very interdependent

• The Model should always be independent

• Never mix Model code with GUI code!

– why?

• ANSWER: you may be required to change the View

• if you keep View and Model separate, changing the View will be relatively simple

second

Sabtu, 24 April 2010

fiveth

Pengantar Teknologi Web 4JavaScript

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

Pengantar Teknologi Web 4
JavaScript