Scripting Week 8

HTTP stands for…

Hyper Text Transfer Protocol

HTTPS stands for…

Hyper Text Transfer Protocol Secure

HTTP was developed by ____________ in _______.

HTTP was developed by Tim Berners-Lee in 1989.

What is HTTP?

• Application-layer protocol used for transmitting hypertext requests (aka hypermedia documents like HTML) & information on the internet

• Backbone of data communication on World Wide Web

• Designed for communication b/w web browsers & web servers

  • But also used for other purposes

• Follows classical client-server model (aka request-response protocol)…

  • Client opens a connection to make a request & waits to receive a response

• HTTP is a stateless protocol meaning that the server doesn’t keep any data (state) b/w two requests

• Operates as a request-response protocol b/w a client & server

  • Example: web browser ——> request a page (client) —> web server responds by loading the page

Describe in a few bullet points how HTTP works.

• The request-response cycle

• Clients sends requests to servers using HTTP methods like GET or POST

• Servers respond with status codes, headers, and the requested content

Why is HTTP so important?

• Facilitates the transfer of data & media across the web

• Enables web application functionality by supporting client & server communication

• Continuously evolving to meet the security & performance needs of the modern web

What is HTTPS?

• Secure version of HTTP

• Incorporates SSL/TLS to encrypt data

• Essential for protecting sensitive data & building trust

Name the latest/current version of HTTP.

HTTP 3

Provide a summarized description of the evolution of HTTP.

Only mention the key aspects of each HTTP version (from HTTP 1.0 to HTTP 3)

HTTP 1.0

• Beginning of HTTP as a standard

• Stateless

• Required a separate TCP connection for each new client-to-server request

• A major limitation was slow webpage loading

HTTP 1.1

• Persistent connections

• Chunked transfers

• More efficient caching

HTTP 2

• Multiplexing

• Server push

• Header compression for performance enhancement

HTTP 3

• Based on QUIC

• Improves security & speed by…

  • Reducing connection latency

  • Reducing transport latency

HTTP 1.0

• Beginning of HTTP as a standard

• Stateless

• Connection handling...

  • each request from a client to a server required a separate TCP connection

    • this meant that for each resource (e.g. HTML file, image, or CSS file) a new connection was opened & closed after the transaction completed

• Had limitations…

  • The need to establish a new connection for each request caused significant overhead due to the lengthy process/time of performing the TCP handshake repeatedly

    • Consequently, this resulted in slower webpage loading times.

HTTP 1.1

Persistent connections

• Introduced concept of persistent connections —> ability for multiple requests & responses to be sent over a single TCP connection

• Reduces overhead resulting from opening new connections

Pipelining (in theory)

• Added possibility of pipelining requests to improve efficiency of HTTP execution

  • Meaning a client could send multiple requests w/o waiting for each response

• Unfortunately actual pipelining had too many limitations in reality

• most significant issue —> head-of-line blocking

Connection reuse

• Improved performance by reusing connections for multiple requests —> significantly reducing time needed to load resources/webpages

HTTP 2

Multiplexing

• Allows multiple requests & responses to occur simultaneously over a single TCP connection

  • Addresses head-of-line block issues experienced in HTTP 1.1 by enabling the server to respond to requests as soon as data is available, not necessarily in the order requested

Server Push

• Enables servers to send resources to the client before they are explicitly requested

  • Can contribute to improved page loading times

Header Compression

• Reduces overhead by compressing header metadata, making web communications more efficient

HTTP 3

QUIC Protocol

• QUIC replaces the traditional TCP with a new protocol called QUIC.

• QUIC is based on UDP, a faster and simpler way to send data over the internet.

• QUIC includes features from TCP (for reliable data transfer), TLS (for security), and parts of HTTP/2 (for efficient web communication).

In other words, QUIC combines the best parts of previous technologies to make internet connections faster, more secure, and more efficient.

Reduced Connection Establishment Time

• QUIC reduces the time it takes to establish a secure connection by combining what would be multiple handshakes in TCP & TLS into a single process

Improved Performance over Lossy Connections

• QUIC handles packet loss (i.e lost data) better than TCP.

• This means it keeps performance high, even when some data packets don't make it through.

• It's especially useful for mobile networks and users with unstable connections.

What does HTML stand for?

HTML: HyperText Markup Language

What does HTTP stand for?

HTTP: HyperText Transmission Protocol

What does QUIC stand for?

QUIC: Quick UDP Internet Connections

What does TCP stand for?

TCP: Transmission Control Protocol

What does URL stand for?

URL: Uniform Resource Locator

Assess the anatomy of the URL below:

http://www.example.com:80/index.html?search=web#content

1. Identify the following:

   (a) Scheme/Protocol

   (b) Authority (Hostname & Port)

   (c) Path

   (d) Query

   (e) Fragment

2. Describe the request the URL is making.

1. Identify the following:

• Scheme/Protocol: http

• Authority:

  • Hostname: www.example.com

  • Port: 80 (often implied for HTTP, so it can be omitted)

• Path: /index.html

• Query: search=web

• Fragment: content

2. Describe the request the URL is making.

• Request the index.html page from www.example.com over HTTP.

• Load the webpage specified in the URL.

• Search within the loaded webpage for the query "web".

• Navigate to the section of the page labeled "content".

There are 6 parts that comprise the anatomy of a URL.

For each part…

• Name

• Define

• Describe its purpose

1. Scheme/Protocol

   • Indicates the protocol used to access the resource (e.g. http)

   • This tells the browser how to communicate w/ the server

2. Hostname

   • The server’s domain name (e.g. www.server.com)

3. Port

   • The port number at the server

   • Differentiates multiple services running on the same server

   • Default for HTTP —> 80

   • Default for HTTPS —> 443

4. Path

   • The specific resource on the server (e.g. /page.html)

   • Specifies the exact resource being requested

5. Query

   • Additional parameters for the server (e.g. ?query=details)

   • Allow for dynamic requests based on user input or specific requirements

6. Fragment

   • An internal page reference (e.g. #fragment)

   • Does NOT get sent to server

   • Used by browser to scroll to a specific part of the webpage

T or F: The fragment in a URL gets sent to the server.

False. The fragment in a URL DOES NOT get sent to the server.

The authority of a URL consists of the ________ and ___.

The authority of a URL consists of the hostname and port.

What is the default port for HTTP?

80

What is the default port for HTTPS?

443

For each of the 5 HTTP Methods:

• Name

• Define

• Describe its intended use

(1) GET: Request data from a specified resource

• Retrieves information

• Data is sent via URL

• Ideal for searching/requesting data

(2) POST: Submit data to be processed by a specified resource

• Sends data to a server to create/update a resource

• Data included in the body of the request

• Used for submitting forms

(3) PUT: Update a specified resource with provided data

• Replaces all current representations of the target resource w/ the request payload

(4) PATCH: Apply partial modifications to a resource

• More efficient for partial updates —> which reduces bandwidth

(5) DELETE: Delete a specified resource

• Removes specified resources

• Essential for managing resources on the server

A server issues status codes in response to ______________.

A server issues status codes in response to a client’s request.

(a) Define and describe the purpose of HTTP status codes.

(b) Name & describe the 5 categories of status codes.

(a) Define and describe the purpose of HTTP status codes.

• 3-digit number that server sends back to client (usually a web browser) in response to a client request

• It indicates the outcome of the client’s request

  • More specifically — whether or not the request was successful, encountered an error, or requires further action

(b) Name & describe the 5 categories of status codes.

1. Informational (1xx) — Request received & being processed

2. Success (2xx) — Request successfully received, understood, and accepted

3. Redirection (3xx) — Further action is needed to complete request

4. Client Errors (4xx) — Request is invalid, and cannot be fulfilled

5. Server Errors (5xx) — Server failed to fulfill a valid request

What is one of the most common reasons why a client error occurs?

Client request has invalid syntax.

Name & Describe 3 of the Common HTTP Status Codes.

200

Which specific HTTP status code means the following…

“The request has succeded”

200 OK

Which specific HTTP status code means the following…

“The server cannot or will not process the request due to something that is perceived to be a client error.”

400 Bad Request

Which specific HTTP status code means the following…

“Indicates that the client request has not been completed because it lacks valid authentication credentials for the requested resource.”

401 Unauthorized

Which specific HTTP status code means the following…

“The server can’t find the requested resource".

404 Not Found

Which specific HTTP status code means the following…

“The server encountered an unexpected condition.”

500 Internal Server Error

(a) Define “HTTP Header”. What is their function/significance?

(b) Define “Request Headers”

(c) Define “Response Headers”

Headers — Provide essential information about the request or response

Request Headers

• Includes info such as…

  • type of web browser being used

  • types of data web browser can accept

  • language preference

Response Headers

• Contains details like…

  • Type of server

  • Content type of returned data

  • Caching policies

Name 2 examples of possible HTTP headers.

• Content-Type

• Content-Length

• Last-Modified

• Set-Cookie

Describe each of the following HTTP headers:

1. Content-Type

2. Content-Length

3. Last-Modified

4. Set-Cookie

(1) Content-Type

Specifies the media type of the resources

For e.g. text/html for html documents

(2) Content-Length

Size of response text in octets (bytes)

(3) Cache-Control

Instructions for caching mechanisms in both requests & responses

(4) Set-Cookie

Sends a cookie from the server to user agent

Define “Web Protocol”.

A web protocol is a standardized set of rules that enable different devices to communicate and exchange data over the internet.

Name 2 examples of web protocols.

1. FTP

2. SMTP

3. IMAP

4. POP3

5. WebSocket

FTP

FTP = File Transfer Protocol

Web protocol used for transferring files between a client & server on a network.

SMTP

Simple Mail Transfer Protocol

Web protocol used for sending emails.

IMAP

IMAP = Internet Message Access Protocol

Web protocol used for retrieving emails from a server.

POP3

Post Office Protocol

Web protocol used for retrieving emails from a server.

WebSocket

Web protocol that enables two-way communication b/w a client & server over a single, long-lived connection.

Which two web protocols are both used for retrieving emails from a server.

IMAP & POP3

Each web protocol is designed for specific types of _____________ and ____________.

Each web protocol is designed for specific types of communication and data transfer.

T or F: HTTP & HTTPS are not always optimal for transferring large files.

True. When HTTP/HTTPS cannot handle transferring large files, FTP is used.

In what situation is FTP used for data transferring instead of HTTP or HTTPS.

For transferring large files, since HTTP & HTTPS cannot always optimally do so.

Name the 3 web protocols that involved handling email services.

1. SMTP

2. IMAP

3. POP3

Why is WebSocket essential for interactive games and live chatting features on applications?

Because WebSocket provides real-time communication, which is necessary for those types of online activity.

JavaScript evaluates values as either ______ or ______.

JavaScript evaluates values as either “truthy” or “falsy”.

Which values are considered “falsy” in JavaScript?

• False

• 0

• “ “ (empty string)

• Null

• Undefined

• NaN

T or F: In JavaScript, any values that are not falsy are considered truthy.

True

Does JavaScript use static or dynamic typing?

Dynamic typing.

How does the use of dynamic typing in JavaScript relate to Truth & Falsy values?

• The categorization of all values in JavaScript as either “Truthy” or “Falsy” is fundamental to JavaScript’s dynamic typing.

• It affects how conditional work.

• Knowing that values are categorized in this way helps you predict & control the flow of your code. Making debugging easier.

In JavaScript, Truthy and Falsy values impacts ______________ in conditionals.

In JavaScript, Truthy and Falsy values impacts decision-making in conditionals.

Truthy and Falsy values are used in ___________.

Truthy and Falsy values are used in conditionals.

Name 2 of the common downfalls of using the truththy/falsy mechanism.

● Unintended behavior when falsy values are not handled properly.

● Over-relying on truthiness can hide bugs.
● Beware of pitfalls in comparisons involving 0, "", or null.
● Always consider explicit checks when needed.

T or F: The only type of values in a conditional that output a True value are non-negative values, non-zero values, and strings.

False. Truthy values include non-negative values, non-zero values, non-empty strings, as well as objects, arrays, functions, and more.

Categorize the following values as “Truthy” or “Falsy”.

(a) An array

(b) The integer 50

(c) An empty string

(d) A function

(e) The integer 0

(e) The integer -10

(f) An object

A

console.log("5" - 2);  // Output: 3 (string "5" converted to number)
console.log("5" + 2);  // Output: "52" (number 2 converted to string)

Is the code above an example of implicit or explicit type conversion?

Implicit type conversion

Name & describe the 4 equality operators.

Operator	Description
==	Abstract equality (coerces types before comparison).
===	Strict equality (compares both value and type).
!=	Abstract inequality.
!==	Strict inequality.

What is the output of the following line of code?

console.log(5 == "5");  // Output: true (coerced comparison)

What is the output of the following line of code?

console.log(5 === "5"); // Output: false (different types)

What is the output of the following line of code?

What is the output of the following line of code?

What is the output of the following line of code?

(a) Define “De-Structuring”

(b) Give an example scenario in which you may use de-structuring.

(a) Define “De-Structuring”. What its purpose/function?

• Practice used to conveniently/easily extract values from arrays/objects/etc into distinct variables.

• Instead of accessing each element or property individually, de-structuring allows you to unpack them in a single step.

• De-structuring is used to make code cleaner & more readable

  • Does this by reducing the need for multiple lines of assignment (assigning variables)

(b) Give an example scenario in which you may use de-structuring.

Example: Array De-Structuring
Imagine you have an array of three items (let's say RGB color values) and you want to assign each item to a separate variable.

javascript
const rgb = [255, 100, 50];
const [red, green, blue] = rgb;

console.log(red);   // 255
console.log(green); // 100
console.log(blue);  // 50
Here, the array [255, 100, 50] is de-structured into three individual variables red, green, and blue.

Example: Object De-Structuring
Now, imagine you have an object with user details, and you want to extract the name and age properties into individual variables.

javascript
const user = {
  name: "Alice",
  age: 30,
  country: "Canada"
};

const { name, age } = user;

console.log(name); // "Alice"
console.log(age);  // 30
In this example, the object user is de-structured, and the name and age properties are assigned to variables with the same names.

const [a, b] = [1, 2];
console.log(a, b); // Output: 1 2

const {name, age} = {name: "Alice", age: 25};
console.log(name, age); // Output: Alice 25

The above code is an example of what concept in JavaScript?

Destructuring

De-structuring is especially useful when working with…

• Function parameters

• Return multiple values from the same function

(a) Define “Spread Operator”. What its purpose/function?

(b) What is it represented as in code?

(c) Give an example scenario in which you may use a spread operator.

(a) Define “Spread Operator”

• Specialized function used in JavaScript

• Allows an iterable (e.g. array or string) to be expanded in places where zero or more arguments/elements are expected

• It’s used to spread out the elements of an array or the characters of a string into individual elements

(b) What is it represented as in code?

Three dots ...

(c) Give an example scenario in which you may use a spread operator.

Imagine you have an array of numbers and you want to create a new array that includes all the elements of the original array, plus some additional numbers.

Example:

javascript

const originalArray = [1, 2, 3];
const newArray = [...originalArray, 4, 5, 6];

console.log(newArray); // Output: [1, 2, 3, 4, 5, 6]

In this example, the spread operator ...originalArray spreads out the elements of originalArray into the newArray. As a result, newArray includes all the elements of originalArray followed by the new elements 4, 5, 6.

const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };

const mergedObj = { ...obj1, ...obj2 };

console.log(mergedObj); 

(a) Describe what is occurring in the code above.

(b) What will the output be?

(a) Describe what is occurring in the code above.

In this example, the spread operator is used to merge the properties of two objects into a new object, mergedObj.

(b) What will the output be?

Output: { a: 1, b: 2, c: 3, d: 4 }

What 3 components are included in a server’s response to a client request.

1. Status Code

2. Headers

3. Content

Define the following and give an example for each:

(a) Implicit Type Conversion

(b) Explicit Type Conversion

Define the following and give an example for each:

(a) Implicit Type Conversion

• AKA Coercion

• Automatic conversion of a JS variable/value into a different data type based on the context in which the value is used

Example:

let num = 42 + true; 
console.log(num) 

(b) Explicit Type Conversion

• You (as the programmer) “tells” the JS when you are intentionally converting a data type into another

Example: ParseInt(“49”)

Provide a general definition for “Type Conversion”.

• Conversion of a variable/value from one data type to another data type

• There are 2 types:

  • Implicit (automatic)

  • Explicit

T or F: Explicit conversion is performed by JS and implicit conversion is performed by the programmer.

False.

Explicit —> performed by the programmer

Implicit = Automatic —> performed by JS

“JavaScript is a dynamically-typed programming language. It is also a weakly-typed programming language.”

Briefly explain the statement above.

JavaScript is dynamically-typed because…

• You don’t explicitly declare variables data types in JS

• The data types of values in your program will be determined at runtime by the JavaScript engine

JavaScript is weakly-typed because…

• It permits implicit conversions

• The JS engine assigns & reassigns types as needed

T or F: JavaScript permits the use of more than one data type in operations.

True.

• JavaScript is a dynamically typed language and allows operations between different data types.

• This behavior is due to type coercion, where JavaScript automatically converts one data type to another when necessary.

T or F: JavaScript does not use a compiler. It only uses the JS engine.

False.

While JS doesn’t required a separate compilation step like some PLs do — it still uses a JIT compiler to optimize performance.

Name one option of JS engine.

V8

Node.js

Chrome

SpiderMonkey

JavaScript Core

In JavaScript, another name for coercion is ________________.

In JavaScript, another name for coercion is implicit type conversion.

//INPUT
console.log("5" + 2);   

What is the output of this code?

//OUTPUT
"52" (number → string)

//INPUT
console.log("Hello" + true);

What is the output of this code?

//OUTPUT
"Hellotrue" (boolean → string)

//INPUT
console.log("Value: " + null);

What is the output of this code?

//OUTPUT
"Value: null" (null → string)

//INPUT
console.log("5" - 2);    
console.log("10" * "2");
console.log("100" / "5"); 

What are the outputs of this code?

//OUTPUT
3 (string --> number)
20 (strings --> numbers) 
20 (strings --> numbers)

//INPUT
console.log(true + 1);  
console.log(null + 10); 
console.log("5px" - 2); What is the output of this code?

What are the outputs of this code?

//OUTPUT
2 (boolean --> number
10 (null --> number) 
NaN (5px is not a pure number)

In what situations does implicit string conversion occur?

When using the + operator with a string value & another value that is not a string.

In what situations does implicit number conversion occur?

When using any arithmetic operator (EXCEPT FOR ADDITION +) or comparison operator in an operation with a numeric value & a non-numeric value.

In what situations does implicit Boolean conversion occur?

Occurs in…

• Logical expressions

• If statements

• While Loops

T or F: The == operator performs type coercion, but the === (strict equality) opereator does not.

True

T or F: Implicit conversion occurs when comparison operators are used to compare two values of different data types.

True