CNIT 133 Interactive Web Pags –JavaScript and AJAX

Course Overview

Agenda

• My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes).

• Computer Background (Computer Basics, Network Architecture, Client/Server, Web Browser, Web Server, LAN, WAN).

• Internet (History, Technologies, World Wide Web, How does it work?).

• JavaScript Course Topics.• JavaScript References.

Computer Basics

Laptop computer Desktop PC

Server

Flat screen

PrinterScanner

Keyboard

A Single Computer

Tower box

Flat screen

Scanner

Printer

Tape drive

CD burner

Keyboard Mouse

Network Architecture• Client/Server Architecture (two-tier architecture): each

computer on the network is either a client or a server (some computers can be both client and server but not at the same time).– Dedicated Servers: such as file servers (managing disk drives),

print servers (managing printers), network servers (managing network traffic).

– A client is defined as a requester of services.– A server is defined as the provider of services.

• Peer-to-peer Architecture (P2P): each computer on the network has equivalent capabilities and responsibilities.

Client/Server

File/DB Server

Desktop PC

Workstation Laptop computer

Print Server

Floppy drive

Tape drive

Database

Printer

Printer

Printer

CD burner

Scanner

Network

Local Area Network (LAN)

• A Local Area Network (LAN) is a group of computers and devices that share a common communications line or wireless link and typically share the resources of a server within a small geographic area (for example, within an office building).

Wide Area Network (WAN)

• A Wide Area Network (WAN) is a computer network covering a wide geographical area, involving a lot more computers. This is different from Local Area Network (LAN) that is usually limited to a room, building or campus. The most well-known example of a WAN is the Internet.

• WANs are used to connect Local Area Networks (LANs) together.

History of Internet

• In the late 1950s, the US government formed the Advanced Research Projects Agency (ARPA).

• During the 1960s, the agency created a decentralized computer network known as ARPAnet.

• This network linked four computers located at the UCLA, Stanford Research Institute, the UC Santa Barbara, and the University of Utah.

New Technologies

• Packet switching (communication still function even if some nodes would be destroyed by a nuclear attack).

• Email was implemented in 1972• Telnet Protocol for logging on to remote computers• File Transfer Protocol (FTP)• In 1989, Tim Berners-Lee and his colleagues at the European

particle physics laboratory CERN proposed the concept of linking documents with hypertext. (World Wide Web)

• In 1993, the introduction of Mosaic, the first graphical web browser (Netscape Navigator)

The World Wide Web

• The WWW operates using a client/server networking principle.

• When you enter the URL (the web address) of a web page into your browser and click “Go”.

• You ask the browser (client) to make an HTTP request to the particular computer having that address.

• That computer (server) returns the required page to you in a form that your browser can interpret and display.

How does Internet work?

http://www.mywebpage.com/index.html

• The browser broke the URL (Uniform Resource Locator) into three parts:– The protocol (“http”)– The server name (‘WWW.mywebpage.com”)– The file name (“index.htm”)

• The browser communicated with a name server to translate the server name www.mywebpage.com into an IP address, which it uses to connect to the server machine.

• The browser then formed a connection to the server at that IP address on port 80.• Following the HTTP protocol, the browser sent a GET request to the server, asking for

the file http://www.mywebpage.com/index.htm (cookies may be sent from browser to server with the GET request)

• The server then sent the HTML text for the web page to the browser (cookies may also be sent from server to browser in the header for the page)

• The browser read the HTML tags and formatted the page onto your screen.

The Internet• The Internet is a gigantic collection of millions of computers, all

linked together on a computer network. • A home computer may be linked to the internet using a phone-line

modem, DSL or cable modem that talks to an Internet service provider (ISP).

• A computer in a business or university will usually have a network interface card (NIC) that directly connects it to a local area network (LAN) inside the business.

• The business can then connect its LAN to an ISP using a high-speed phone line such as a T1 line.

• ISPs then connect to larger ISPs, and the largest ISPs maintain fiber-optic “backbones” for an entire nation or region.

• Backbones around the world are connected through fiber-optic lines, undersea cables or satellite links.

The Internet

The Internet

The Internet

A map of domain name ownership at street level for downtown San Francisco

The Web Server

• The Web server is not simply “looking up a file”.• It is actually processing information and generating a

page based on the specifics of the query. • Dynamic web pages are generated by software such

as CGI (Common Gateway Interface) scripts.• Web server

– Microsoft IIS (Internet Information Services)– Apache

The Browser

• There are different web browsers in the market.

• Mozilla – Firefox for Windows & Linux• Microsoft - Internet Explorer for Windows • Netscape for Windows• Opera for mobile phones• Safari for Apple

What is?• Web Pages: contain HTML coding.• Web Site: a collection of web pages.• Web servers: Program that interpret HTTP requests and deliver the appropriate web page to your

browser.• Server-Side Programming: Programs that run on the server computer.• Web Browsers: Program on the client computer that use to interpret and display web pages.• Client-Side Programming: Programs that run on the client side.• DNS (Domain Name Service): Convert Domain name into IP address.• HTTP Requests: transmit from browser to server with method information (GET/POST) to request a

web page.• HTTP Responses: return from server to browser with status codes (200 – ok, 204 – no content, 401 –

not authorized, 403 – forbidden, 404 – not found, etc…)• HTML Forms: web page contain fields where you can enter information. (<form></form>, <input />,

<select></select>, <option></option>, etc…)• GET and POST Requests:

– GET: encodes the message it sends into a query string, which is appended to the URL .– POST: sends its message in the message body of the request. (data is encoded and sent via an

HTTP request).

JavaScript Course Overview• Core JavaScript

– Lexical Structure• Character Set, Case Sensitivity, Whitespace and Line Breaks, Optional

Semicolons• Comments, Literals, Identifiers, Reserved Words

– Datatypes and Values• Numbers, Strings, Boolean Values, Functions, Objects, Arrays

– Variables– Expressions and Operators– Statements

• Expression Statements, Compound Statements, if, else if, switch, while, do/while,

• for, for/in, Labels, break, continue, var, function, return, throw, try/catch/finally

– Objects and Arrays– Functions

JavaScript Course Overview (continue…)

• Client-Side JavaScript– JavaScript in Web Browsers

• The Web Browser Environment, Embedding Scripts in HTML, Event Handlers in HTML, JavaScript in URLs

– Scripting Browser Windows• Window object – Location and History, Opening and Manipulating

Windows– Scripting Documents

• Document Object Model (DOM)– Cascading Style Sheets (CSS) and Dynamic HTML (DHTML)– Events and Event Handling– Forms and Form Elements– Scripting HTTP

• Asynchronous JavaScript And XML (AJAX)

JavaScript References• There are two basic types of objects in JavaScript – those in the Document

Object Model, and Core Objects:– Objects, Properties, and Methods of the Document Object Model (such as images

and various form fields) http://www.w3schools.com/htmldom/default.asp– Core JavaScript Objects, Properties, and Methods (such as Strings, Dates, and

Arrays) http://www.w3schools.com/js/default.asp• Event handler reference page

http://www.w3schools.com/dhtml/dhtml_events.asp• Stylesheet reference page http://www.w3schools.com/css/css_reference.asp• General JavaScript reference

http://www.w3schools.com/js/default.asp• HTML reference

http://www.w3.org/TR/html401/• Web-based tutorials at W3Schools

http://www.w3schools.com/