1. CNIT 133 Interactive Web Pags – JavaScript and AJAX Course Overview

2. Agenda My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes).http://fog.ccsf.edu/~hyip 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.

3. Computer Basics

4. A Single Computer

5. 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.

6. Client/Server

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

8. 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.

9. 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.

10. 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)

11. 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.

12. How does Internet work?

13. 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. www.mywebpage.com 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)http://www.mywebpage.com/index.htm 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.

14. 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.

15. The Internet

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

19. 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

20. 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

21. 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. (,,,, 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).

22. 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

23. 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)

24. 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.asphttp://www.w3schools.com/htmldom/default.asp – Core JavaScript Objects, Properties, and Methods (such as Strings, Dates, and Arrays) http://www.w3schools.com/js/default.asphttp://www.w3schools.com/js/default.asp Event handler reference page http://www.w3schools.com/dhtml/dhtml_events.asp http://www.w3schools.com/dhtml/dhtml_events.asp Stylesheet reference page http://www.w3schools.com/css/css_reference.asphttp://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/