Transcript Course Overview

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
Scanner
Printer
Keyboard
Flat screen
A Single Computer
Flat screen
Scanner
Tape drive
Printer
CD burner
Tower box
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
Workstation Laptop computer
Scanner
Desktop PC
CD burner
Floppy drive
Network
Tape drive
File/DB Server
Database
Printer
Print Server
Printer
Printer
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 highspeed 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 fiberoptic 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/