COMP5347 Web Application Development Introduction – How The Web Works
JavaScript (Intro.)
Dr. Basem Suleiman
School of Computer Science
The University of Sydney
Page 1

COMMONWEALTH OF Copyright Regulations 1969 WARNING
This material has been reproduced and communicated to
you by or on behalf of the University of Sydney pursuant to Part VB of the Copyright Act 1968 (the
Act).
The material in this communication may be subject
to copyright under the Act. Any further reproduction or communication of this material by you may be the subject of copyright protection under the Act.
Do not remove this notice.
The University of Sydney
Page 2
COMP5347 Web Application Development

Agenda
– Web Application architecture in general
– Web application architecture
– What is covered in this course
– Courseresources
– Basic concepts behind web browsers
– Web page
– HTTP protocol
– JavaScript(Intro.)
– Location and Basic Syntax
• Variables, Control Structure, Function, Object, Array, Function
The University of Sydney
Page 3
COMP5347 Web Application Development

World Wide Web
– The hypertext system proposal in 1990 led to WWW
– Jointly published by Tim Berners-Lee and Robert Cailliau at CERN in
Switzerland
– Core Features of the Web:
– A URL to uniquely identify a resource on the WWW
– The HTTP protocol to describe how requests and responses operate
– A software program (later called web server software) that can
respond to HTTP requests
– HTML to publish documents
– A program (later called a browser) to make HTTP requests from URLs and that can display the HTML it receives.
– Berners-Lee founded the World Wide Web Consortium (W3C) https://www.w3.org/Proposal.html
The University of Sydney
Page 4
COMP5347 Web Application Development

Web Application Architecture
Simple web app with three principle tier/layers
Amazon.com started 10 years ago as a monolithic application, running on a Web server, talking to a database on the back end…. Over time, this grew into hundreds of services and a number of application servers that aggregate the information from the services…. If you hit the Amazon.com gateway page, the application calls more than 100 services to collect data and construct the page for you. A Conversation with Werner Vogels, ACM Queue, May, 2006 [3]
The University of Sydney
Page 5
COMP5347 Web Application Development
[2]

Web Application Technology Stack (Facebook)
Aditya Agarwal, Facebook: Science and the Social Graph, Qcon San Francisco 2008 [http://www.infoq.com/presentations/Facebook-Software-Stack]
Other technology stacks:
• WISA: Windows, IIS Web Server, SQL server and ASP.NET
• MEAN: MongoDB, Express.js, Angular and Node.js
The University of Sydney
Page 6
COMP5347 Web Application Development

Web Application Technology Stack (Facebook)
Facebook Architecture: Breaking it Open, Slide 21 [https://www.slideshare.net/AditiTechnologies/facebook-architecture-breaking-it-open]
The University of Sydney
Page 7
COMP5347 Web Application Development

What is covered in this course
– Three-tiered web application
– Client-Side Technology
– Server-Side Technology
– Communication between the Client and the Server
– Performance and security
– Integrating services from various components
– web services
– Assumed Knowledge
– Competency in a programming
– Basic understanding of data model and storage systems
Presentation tier
Client Side: Browser
Presentation tier
Application logic tier
Web/application server
Data source tier
Data Storage
The University of Sydney
Page 8
COMP5347 Web Application Development

Topics Covered – Course Schedule
Week
Topic
Week 01
Unit Introduction, How the web works, JavaScript (introduction)
Week 02
Introduction to HTML and CSS
Week 03
JavaScript: client side scripting
Week 04
Browser and rendering process
Week 05
Server-side development with node.js and express.js
Week 06
Sessions and routes – MVC implementation
Week 07
Connecting to database
Week 08
Client-side frameworks
Week 09
Client-side frameworks (cont.)
Week 10
Web services
Week 11
Web application security
Week 12
Industry speakers
Week 13
Review, exam structure
COMP5347 Web Application Development
The University of Sydney
Page 10
COMP5347 Web Application Development

Fundamentals of Web Application
– It is of Client/Server architecture
– Client-Side Basics
– Displaying content: HTML
– Displaying content with desirable styles: CSS
– Interacting with content: JavaScript
– A central point of contact: the browser
– Server-Side Basics
– A web application written in
• Python, PHP, Java, C#, Ruby, JavaScript,…
– Some system that stores the content/data: file system, database system, …
– Some system that listens/handles common network activities: web/application
server
– In between
– A way to locate the server given a name: DNS services
– A way to send Instruction/Content between client and server: protocols
– A way to secure the content: security mechanism
The University of Sydney
Page 11
COMP5347 Web Application Development

Ever Changing Fields
– Both HTML and CSS have evolved rapidly
– JavaScript is getting more powerful
– Lots of libraries
– It can be used on server-side as well
– Browsers become more complicated
– New programming languages/frameworks for writing server applications
– New architecture/programming style to cater for scalability and cloud
hosting
– Eg. Flux vs. MVC as proposed by Facebook
– When Netflix migrated to AWS in 2010, they have to re-implement many services
– The communication core, e.g. protocols are relatively stable COMP5347 Web Application Development
The University of Sydney
Page 12

Agenda
– Course Information
– Web application architecture in general
– What are covered in this course
– Courseresources
– Basic concepts of web (from end user perspective)
– Web page
– HTTP protocol
– JavaScript(Intro.)
– Location and Basic Syntax
• Variables, Control Structure, Function, Object, Array, Function
Based on Chapter 1 of Fundamentals of Web Development
The University of Sydney
Page 13
COMP5347 Web Application Development

Web Browser
– Main responsibility of browser
– Generate and submit requests to web servers – Acceptresponseandrenderresults
– More specifically
– Caching
– Authentication and authorization
– Statemaintenance
– Requesting support data items
– Taking actions in response to other headers and status codes
– Renderingcomplexobjects
– Dealingwitherrorconditions
COMP5347 Web Application Development
The University of Sydney
Page 14

When you send a request from a browser
HTTP waterfall chart
Start sending the response
Finishing building up the DOM tree, start rending
Finishing rendering the elements, objects are ready to receive events
The University of Sydney
Page 15
COMP5347 Web Application Development

A Web Page
– Jargons everyone is familiar with
– Web page consists of objects
– Object can be HTML file, scripts, JPEG image, video/audio file,…
– Web page consists of a base HTML-file which includes several
referenced objects
– Each object is addressable by a URL (Uniform Resource Locator)
– ExampleURL:
http://www.someschool.edu/someDept/pic.gif
protocol domain name path name
The University of Sydney
Page 16
COMP5347 Web Application Development

A Web Page – Resources
The University of Sydney
Page 17
Average Web Page Breaks 1600K
http://www.websiteoptimization.com/speed/tweak/average-web-page/
COMP5347 Web Application Development

A web page consists of many objects
53 requests to show the English wikipedia page on your browser
A request
The University of Sydney
Page 18
COMP5347 Web Application Development

Support for content types
– To view content on the web, your browser might do
– Render the content as a text page or an HTML page
– Present content inline
– Run scripts
– Launch a helper application capable of presenting non-HTML content
– Get confused into showing the content of an HTML file (or a server-side
script) as plain text without attempting to render it or execute it
– Browser determines the content type and performs actions appropriate for that type
– HTTP borrows its content typing system from Multipurpose Internet Mail Extension(MIME)
• Content-encoding • Content-type
The University of Sydney
Page 19
COMP5347 Web Application Development

What is a Protocol?
– A protocol is a set of rules that partners in communication use when they communicate.
– The internet exists today because of a suite of interrelated communications protocols
– The research network ARPANET created in the 1960s and was used exclusively for academic and scientific purposes
– Grew from a handful of connected campuses (1969) to a few hundred (early 1980s)
– To promote the growth and unification of the disparate networks a suite of protocols was invented to unify the networks together
– By 1981, new networks built in the US began to adopt the TCP/IP communication model, while older networks were transitioned over to it.
The University of Sydney
Page 20
COMP5347 Web Application Development

A Layered Architecture
– The TCP/IP Internet protocols were originally abstracted as a four-layer stack.
– Later abstractions subdivide it further into five or seven layers.
– Since we are focused on the top layer anyhow, we will use the earliest and simplest four-layer network model.
The University of Sydney
Page 21
COMP5347 Web Application Development

Internet Protocol
– The Internet uses the Internet Protocol (IP) addresses to identify destinations on the Internet.
– Every device connected to the Internet has an IP address, which is a numeric code that is meant to uniquely identify it.
The University of Sydney
Page 22
COMP5347 Web Application Development

Transport Layer and Application Layer
– Internet layer protocol (e.g. IP) provides logical communication between hosts identified by IP address
– Transport layer protocol (e.g. TCP) provides logical communication between processes running on the hosts identified by ip:port
– TCP ensures that transmissions arrive, in order, and without error
– Application layer protocol (e.g. HTTP) defines the syntax and semantics of
the message send between processes
The University of Sydney
Page 23
COMP5347 Web Application Development

HTTP
HTTP: hypertext transfer protocol
– Web’s application layer protocol – RFC 2616 (specifications)
– Request-Response paradigm
– client: browser that requests, receives,
“displays” Web objects
– server: Web server sends objects in response to requests
PC running Chrome
The University of Sydney
Page 24
COMP5347 Web Application Development
Server running Apache Web server
Mac running Safari

Request-response paradigm
The University of Sydney
Page 25
COMP5347 Web Application Development

Intermediate proxies
The University of Sydney
Page 26
COMP5347 Web Application Development
Intermediate proxies

Domain Name System
– Instead of IP addresses, we use the Domain Name System (DNS) to identify hosts on Internet
The University of Sydney
Page 27
COMP5347 Web Application Development

Domain Levels
Third-Level Domain
Top Level Domain (TLD)
server1.www.funwebdev.com
Fourth-Level Domain Second-Level Domain (SLD)
Top-Level Domain (TLD) com
Generic top-level domains (gTLD) Country code top-level domain (ccTLD)
Most general
Most specific
Fourth-Level Domain
server1
The University of Sydney
Page 28
Second-Level Domain (SLD)
funwebdev
Third-Level Domain www
COMP5347 Web Application Development

HTTP (cont’d)
Uses TCP:
– client initiates TCP connection (creates socket) to server, port 80
– server accepts TCP connection from client
– HTTP messages (application-layer protocol messages) exchanged between browser (HTTP client) and Web server (HTTP server)
– TCP connection closed
HTTP is “stateless”
– server maintains no information about past client requests
– In contrast to protocols like FTP, SMTP aside
The University of Sydney
Page 29
COMP5347 Web Application Development
Protocols that maintain “state” are complex!
▪ past history (state) must be maintained
▪ if server/client crashes, their views of “state” may be inconsistent, must be reconciled

Request/Response message
HTTP request line
HTTP response status
The University of Sydney
Page 30
COMP5347 Web Application Development

Request Methods
HTTP/1.0
– GET
– POST
– HEAD
– asks server to leave requested
HTTP/1.1
– GET, POST, HEAD – PUT
– uploads file in entity body to path specified in URL field
– DELETE
– deletes file specified in the URL field
–…
The University of Sydney
Page 31
object out of response
COMP5347 Web Application Development

HTTP Response Status Code
– 3-digit response code
– 1XX–informational
– 2XX–success
• 200OK
– 3XX–redirection
• 301 Moved Permanently
• 302 Found/Moved temporary • 303 Moved Temporarily
• 304 Not Modified
– 4XX – client error • 404 Not Found
– 5XX–servererror
• 505 HTTP Version Not Supported
The University of Sydney
Page 32
COMP5347 Web Application Development

Redirection status code
– 301 Moved Permanently: try www.it.usyd.edu.au/~comp5347/
– Details of the request response can also be investigated
The University of Sydney
Page 33
COMP5347 Web Application Development

.
HTTP Performance
– Response Time Modeling
– Round Trip Time (RTT): time to send a small packet to travel from client to server and back.
– Response time:
– one RTT to initiate TCP
connection
– one RTT for HTTP request and first few bytes of HTTP response to return
– file transmission time
– total = 2RTT+transmit time
initiate TCP connection
RTT
request file
RTT
file received
time time
time to transmit file
The University of Sydney
Page 34

HTTP performance
Time to set up or wait for TCP connection, time for negotiation with proxy
The University of Sydney
Page 35
COMP5347 Web Application Development
Time To First Byte: one RTT plus server processing time

Nonpersistent HTTP v. Persistent HTTP
– Nonpersistent HTTP
– At most one object is sent over a TCP connection. – HTTP/1.0usesnonpersistentHTTP
– Persistent HTTP
– Multiple objects can be sent over single TCP connection between client
and server.
– HTTP/1.1 uses persistent connections in default mode
The University of Sydney
Page 36
COMP5347 Web Application Development

Individual Exercise/Question
– Suppose user enters URL www.someSchool.edu/someDepartment/home.index
– Assume home.index contains text, and references to 10 jpeg images
– Ignoring server processing time, the approximate response time for HTTP 1.0?
– Ignoring server processing time, the approximate response time for HTTP1.1 are?
The University of Sydney
Page 37
COMP5347 Web Application Development

Nonpersistent HTTP
– Suppose user enters URL www.someSchool.edu/someDepartment/home.index
1a. HTTP client initiates TCP connection to HTTP server (process) at www.someSchool.edu on port 80
2. HTTP client sends HTTP request message into TCP connection socket. Message indicates that client wants object someDepartment/home.index
time
(contains text, references to 10 jpeg images)
1b. HTTP server at host www.someSchool.edu waiting for TCP connection at port 80. “accepts” connection, notifying client
3. HTTP server receives request message, forms response message containing requested object, and sends message into its socket
The University of Sydney
Page 38
COMP5347 Web Application Development

Nonpersistent HTTP (cont)
5. HTTP client receives response message containing html file, displays html. Parsing html file, finds 10 referenced jpeg objects
6. Steps 1-5 repeated for each of 10 jpeg objects
4. HTTP server closes TCP connection.
time
Ignoring server processing time, the approximate response time for HTTP/1.0 is 22 RTT + 11 transmit time
The approximate response time for HTTP/1.1 is
12 RTT + 11 transmit time
The University of Sydney
Page 39
COMP5347 Web Application Development

Outline
– Course Information
– Web application architecture in general
– What are covered in this course
– Courseresources
– Basic concepts of web (from end user perspective)
– Web page
– HTTP protocol
– JavaScript (introduction)
– Location and Basic Syntax
• Variables, Control Structure, Function, Object, Array, Function
The University of Sydney
Page 44

JavaScript
– Object-based, dynamically typed scripting language
– Client-sidescriptinglanguageforHTMLandCSS
– Has server-side implementation
– “the most popular programming language in the world” – W3C school
– As a client-side scripting language
– It runs inside the browser
– Able to interact with many browser managed resources: DOM, Browser’s object (BOM) such as windows, screen, history, cookies and more
– It can be written as inline (discouraged!), embedded or as external file
The University of Sydney
COMP5347 Web Application Development
Page 45

Brief History
– Created in 10 days in May 1995 by Brendan Erich, then working at Netscape and now of Mozilla
– Considered as not properly defined and targeting amateurs
– Integral part of web development in the mid 2000s with AJAX
– Initial effort from Microsoft late 1999, get adopted by other browsers
– Made very popular by Gmail and Google maps
– Receives a lot more professional programming attention
– Many JavaScript frameworks have since created: jQuery, Prototype, AngularJS, etc.
– Server-side JavaScript also gaining popularity
The University of Sydney
COMP5347 Web Application Development
Page 46

JavaScript Code – Location
more info
Inline
Embedded

External



The University of Sydney
COMP5347 Web Application Development
Page 47

JavaScript Variables
– Declaring a variable – var name;
– Does not require specifying data types
– Can contain a value of any data type
– JavaScript automatically converts between values of different types (in many cases)
– Variable has various scopes
The University of Sydney
COMP5347 Web Application Development
Page 48

Conditionals
The University of Sydney
COMP5347 Web Application Development
Page 49

Conditionals
switch (artType) { case “PT”:
output = “Painting”;
break; case “SC”:
output = “Sculpture”;
break;
default:
output = “Other”;
}
The University of Sydney
Page 50

Loops
var i=0; // initialise the Loop Control Variable while(i < 10){ //test the loop control variable i++; //increment the loop control variable } The University of Sydney COMP5347 Web Application Development Page 51 Variable types – Primitive types: represent simple forms of data – Boolean,stringandnumber – Null, undefined – Complex/reference types – Object(referencetypes) – Array – Function The University of Sydney COMP5347 Web Application Development Page 52 Primitive Types vs. Reference Types What is the difference between primitive types and reference types? Use the following examples to expain it to your classmate. var abc = 27; var def = ”hello”; var foo = [45, 35, 25] var xyz = def; var bar = foo; bar[0] = 200; The University of Sydney Page 53 Primitive Types vs. Reference Types The University of Sydney Page 54 JavaScript – Objects – JavaScript is different to classic OOP, which is class-based – It has a clear concept of Object similar to object in other OOP – The concept of Class is the source of confusion – We usually start by introducing Object – An object is a collection of related data and/or functionality – The “data” part is referred to as “property” – The “functionality” part is referred to as “method” – In JavaScript, almost “everything” is an object • Most data types • Functions – The easiest way of creating an object is to use Object Literal The University of Sydney COMP5347 Web Application Development Page 55 Object Creation using Literal var objName = { name1: value1, name2: value2, // ... nameN: valueN }; – Access using either of: • objName.name1 • objName["name1"] The University of Sydney COMP5347 Web Application Development Page 56 Object Creation using Literal var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue“ }; var person = { firstName:"John", lastName:"Doe", age:50, eyeColor:"blue“, fullName : function() { return this.firstName + " " + this.lastName; } }; The University of Sydney COMP5347 Web Application Development Page 57 JavaScripts – Arrays – Arrays are used to store multiple values in a single variable – Object literal notation – var greetings = ["Good Morning", "Good Afternoon"]; – Array() constructor – Var greetings = new Array("Good Morning", "Good Afternoon"); – Array element is accessible with index, starting from 0, greetings[0] = “Good Morning” – Useful methods length(), push(), reverse(), sort(), The University of Sydney COMP5347 Web Application Development Page 58 JavaScript Functions • Functions are the building blocks for modular code • Defined by using the reserved word function followed by function name and (optional) parameters Example: function subtotal (price,quantity) { return price * quantity; } • Call/invoke function: var result = subtotal(10,2); The University of Sydney Page 59 Functions – Function Expression A function can be defined using an anonymous function expression var calculateSubtotal = function (price,quantity) { return price * quantity; }; // invokes the function var result = calculateSubtotal(10,2); The University of Sydney Page 61 Variable Scope – Each variable in a program has a scope – The scope of a variable is the portion of the program in which the variable can be used – JavaScript has function scope – The scope changes inside functions – A variable declared outside a function has global scope – In the HTML context, all scripts and functions on a webpage can access it. – Variables declared inside a function has local scope – They can only be accessed within in the function The University of Sydney COMP5347 Web Application Development Page 62 JavaScript – Variable Scope The University of Sydney Page 63 Variable Scope - Examples The University of Sydney COMP5347 Web Application Development Page 64 JavaScript Output • alert() displays content within a pop-up box • alert("Hello world"); • console.log() displays content in the Browser’s JavaScript console • document.write() outputs the content (as mark-up) directly to the HTML document var name = “COMP5347"; document.write("

Title

“);
// this uses the concatenate operator (+) document.write(“Hello ” + name + ” and welcome”);
The University of Sydney
COMP5347 Web Application Development
Page 65

JavaScript Output
The University of Sydney
COMP5347 Web Application Development
Page 66

Week 1 Tutorial:
JavaScript (introduction)
Next week …
HTML and CSS lecture and tutorial
The University of Sydney
Page 67

References
1.
2. 3.
4. 5.
6. 7.
Leon Shklar and Rich Rosen, Web application architecture. 2nd edition, Wiley, Chapter 3&7
Randy Connolly and Ricardo Hoar, Fundamentals of Web Development, Ch. 1 & 6
Giuseppe DeCandia, Deniz Hastorun, Madan Jampani, Gunavardhan Kakulapati,Avinash Lakshman, Alex Pilchin, Swaminathan Sivasubramanian, Peter Vosshall and Werner Vogels, Dynamo: Amazon’s Highly Available Key-Value Store, In Proceedings of the 21st ACM Symposium on Operating Systems Principles (SOSP’07), October 2007, Stevenson, Washington, USA.
A Conversation with Werner Vogels, ACM Queue, May, 2006 [http://queue.acm.org/detail.cfm?id=1142065]
Facebook Architecture: Breaking it Open, Slide 21 [https://www.slideshare.net/AditiTechnologies/facebook-architecture-breaking-it- open]
Aditya Agarwal, Facebook: Science and the Social Graph, Qcon San Francisco 2008 [http://www.infoq.com/presentations/Facebook-Software-Stack]
Abel Avram, Facebook: MVC Does Not Scale, Use Flux Instead [Updated], May 15, 2014, InfoQ [http://www.infoq.com/news/2014/05/facebook-mvc-flux]
The University of Sydney
Page 68
COMP5347 Web Application Development