Web Programming Study Guide - Organized Q&A

Table of Contents
1. Fundamentals of Web

2. Internet Security

3. Web Programmer's Toolbox

Fundamentals of Web

1. What is the fundamental difference between the Internet and the World Wide Web
(WWW)?
World Wide Web (WWW)

A vast collection of interconnected computers and other A collection of software and protocols
devices, connected by equipment that allows them to that has been installed on most, if not
communicate with each other, forming a global network all, of the computers on the Internet

System of interlinked documents and

Function Physical network infrastructure services that runs on top of that
infrastructure

The Internet was useful before the Web was developed Runs on top of the Internet
Independence
and remains useful without it infrastructure

Essentially: The Internet is the physical network infrastructure, while the Web is a system of interlinked
documents and services that runs on top of that infrastructure.

2. Explain the role of web browsers in the context of the World Wide Web.
Web browsers are software applications used to access information on the World Wide Web. They act as
clients on the Web, initiating communication with web servers. When a user requests information, the
web browser fetches the data from a web server and then displays the webpage on the user's screen.

Key Functions:

Browsers request documents from servers and display them to users

They can transmit user input to the server, which may then perform computations and return new
documents

They can directly request the execution of programs stored on the server, displaying the output to
the user
3. How do web servers work, and what is their primary function in the web ecosystem?
Web servers are programs that provide documents to requesting browsers. They function as "slave
programs," acting only when requests are made to them by browsers.

Primary Functions:

Listen on a communication port

Accept HTTP commands

Execute specified operations

Translate the Uniform Resource Locator (URL) into a file or program name

Begin by informing the operating system and run as background processes

After locating the requested document, send it to the browser for display

File Structure: Web servers have a specific file structure, including:

Document root: for web documents served to clients via URLs

Server root: housing the server and its support software

Virtual document trees: areas outside the document root

Virtual hosts: support multiple websites on a single computer

4. Describe the structure and components of a typical URL (Uniform Resource Locator).
A URL (Uniform Resource Locator) is a web address that identifies and locates resources on the Internet.
All URLs follow a common format: scheme:object-address

Components:

Scheme: This typically represents a communication protocol, such as:

HTTP (for the Web)

FTP (File Transfer Protocol)

Gopher, Telnet, File, Mailto, or News

Object-address: The format varies depending on the scheme:

 For HTTP: //fully-qualified-domain-name/path-to-document
The fully qualified domain name specifies the server computer where a document is stored

The default port for web server processes is 80, but a different port number can be appended
(e.g., :800)

For File protocol: file://path-to-document , omitting the domain name (indicates a document on the
local machine)

URL Paths:

Resemble file or directory paths in an operating system

Use forward slashes for UNIX servers and backward slashes for Windows servers

Can be complete (including all directories) or partial (relative to a base path)

If a document is a directory, it's indicated by a trailing slash (e.g., HTTP://WWW.GUMBOCO.COM/

DEPARTMENTS/ )

The server typically looks for a file named 'index.html' as the home page

If no home page is found, a directory listing is generated

Character Limitations:

URLs cannot contain embedded spaces

Certain special characters (like semicolons, colons, and ampersands) are not allowed

These must be encoded as % followed by their two-digit hexadecimal ASCII code

5. What is MIME, and why is it essential in the context of web content?

MIME (Multipurpose Internet Mail Extensions) specifies the format of different kinds of documents to be
sent via Internet mail, including various kinds of text, video data, or sound data.

Why Essential: MIME is essential because a browser needs to determine the format of a document it
receives from a Web server to render it correctly, as different document formats require different
rendering tools.

How it Works:

A web server attaches a MIME format specification to the beginning of the document before sending
it to a browser

When the browser receives the document, it uses this MIME specification to understand how to
handle it

MIME specifications have the form: type/subtype

Common Examples:
 Types: text, image, video

Subtypes: plain, html (for text), gif, jpeg (for image), mpeg, quicktime (for video)

Examples: text/html, image/gif, video/mpeg

Process:

Servers determine the document's type using the filename's extension as a key into a table of types
(e.g., .html tells the server to attach text/html)

Browsers also have conversion tables for file extensions, but they primarily rely on the MIME header
provided by the server

Internet Security

6. What are some common threats to internet security, and how can they be mitigated?
Common Threats:

Denial-of-Service (DoS) Attacks:

These attacks overwhelm servers with requests, rendering them ineffective

They often use networks of infected computers (zombies) without the owners' knowledge

Viruses:

These malicious programs attach to files, replicate, and destroy data

Worms:

These spread independently and damage memory

Mitigation Strategies:

Antivirus Software:

Provides protection against viruses and worms

Needs frequent updates to effectively detect new threats

Additional Security Focus: The sources note that ensuring secure data transmission is vital, focusing on:

Privacy: Preventing the stealing of sensitive data during transmission

Integrity: Ensuring that data is not tampered with during transmission

Authentication: Confirming the identities of both parties involved

Nonrepudiation: Providing legal proof of message sending and receiving

7. Explain the importance of using secure connections (HTTPS) on the web. How does
it work?
Importance of Secure Connections: Using secure connections on the web is vital for ensuring secure
data transmission. Such connections provide:

Privacy: Preventing the stealing of sensitive data during transmission

Integrity: Ensuring that data is not tampered with during transmission

Authentication: Confirming the identities of both parties involved

Nonrepudiation: Providing legal proof of message sending and receiving

How it Works: The core mechanism is Encryption, which transforms data into an unreadable format
using a key. A popular algorithm like RSA is widely used for e-commerce to encrypt and decrypt data.

Note: The source explains "Encryption" as the core mechanism but does not delve into the specific
handshake process or protocols like TLS/SSL that HTTPS uses beyond general encryption.

8. Discuss the role of cookies in web security and privacy.

Based on the provided source material, there is no information available about the role of cookies in web
security and privacy.

Web Programmer's Toolbox

9. What is the purpose of JavaScript in web development, and how does it differ from
HTML and CSS?
JavaScript Purpose: JavaScript is a client-side HTML-embedded scripting language. Its purpose in web
development is to provide a way to access elements of HTML documents and dynamically change them.

How JavaScript differs from HTML and CSS:

Language Type Purpose Capabilities

Describes the general Not a programming language - cannot be used to describe

Markup
HTML form and layout of computations. Documents are a mix of content and
Language
documents controls (tags and attributes)

Scripting Adds dynamic behavior Can access elements of HTML documents and dynamically
JavaScript
Language and interactivity change them, perform computations

Note: The source does not explicitly detail CSS, but by definition, JavaScript adds dynamic behaviour and
interactivity, which goes beyond the structural (HTML) and presentational (CSS) aspects of web pages.

10. How can you include external JavaScript libraries or files in an HTML document?
You can include external JavaScript libraries or files in an HTML document using the <script> tag with the
src attribute, which specifies the URL of the JavaScript file.

Example:

html

<script src="path/to/javascript/file.js"></script>

This script tag can be placed in the <head> or <body> section of the HTML document.

11. Explain the concept of the Document Object Model (DOM) and its significance in
web development.
Definition: The Document Object Model (DOM) is an Application Programming Interface (API) that
defines an interface between HTML (or XHTML) documents and application programs.

Background:

It has been developed by the W3C since the mid-1990s

The initial motivation was to create a standardized specification allowing Java and JavaScript
programs to work with XHTML documents consistently across various web browsers

Significance in Web Development:

It provides a tree-like structure for documents

Consists of a collection of interfaces, one for each document tree node type

These interfaces define objects, methods, and properties for their respective node types

Enables users to manipulate document structures dynamically using programming languages like
JavaScript

Allows for dynamic changes to the document's structure, style, and content

12. How can you access and manipulate HTML elements using JavaScript? Provide
examples.
The elements of an HTML document have corresponding objects visible to an embedded JavaScript
script, and their addresses are required for dynamic changes.

Accessing HTML Elements: There are several approaches to access the object associated with an HTML
form element:

Approach 1: Using Forms and Elements Arrays (DOM 0 method)

 Example: var dom = document.forms.elements;

Problem: Vulnerable to changes in the document structure

Approach 2: Using Element Names

Elements must have name attributes

Example: var dom = document.myForm.turnItOn;

Note: Valid in HTML5, but not XHTML 1.1

Approach 3: Using getElementById (Introduced in DOM 1)

Requires elements to have unique id attributes

Example: var dom = document.getElementById("turnItOn");

Implicit Arrays for Checkbox and Radio Button Groups:

These arrays store DOM addresses of group elements, accessed through the form object

Example: document.getElementById("vehicleGroup").vehicles[index]

Manipulating HTML Elements: JavaScript provides several methods to modify the structure of an
existing DOM tree:

appendChild(newChild): Adds a new child node to the end of the list of siblings of the node
through which it is called

removeChild(oldChild): Removes a specified node from the DOM tree

replaceChild(newChild, oldChild): Replaces an existing child node with a new node

insertBefore(newChild, refChild): Inserts the newChild node before the refChild node

These methods, along with properties like nodeValue (for text nodes), allow for dynamic manipulation.

13. Describe the use of events and event handling in web development. Give examples
of commonly used events.
Definition: Events are notifications that something specific has occurred, either with the browser (e.g.,
completion of document loading) or due to a user action (e.g., a mouse click on a form button).

Event Handling:
 An event is an object implicitly created by the browser and JavaScript system in response to
something happening

Event handlers are scripts implicitly executed in response to the appearance of an event

Event handlers make a Web document responsive to browser and user activities

A common use is to check for errors in user input to form elements

The process of connecting an event handler to an event is called registration

Examples of Commonly Used Events:

click: Occurs when a user clicks an element like a radio button or an anchor tag link

load: Occurs when the body of the document has been loaded

unload: Occurs before a document is unloaded, useful for cleanup

blur: Occurs when an element loses focus

focus: Occurs when an element gains focus

change: Occurs when an element's value is changed

select: Occurs when text within an input element is selected

14. Differentiate between inline event handling and event listeners in JavaScript.
The source describes two main approaches to event handler registration:

Approach Method Description Example

Involves assigning the

event handler script
Inline Assigning tag
directly as the literal <input type="button" id="myButton"
Event attributes (DOM 0
string value to an onclick="alert('You clicked my button!');" />
Handling event model)
event's associated
HTML tag attribute

Promotes clean
Assigning handler
separation of HTML
Event addresses to object document.getElementById("myButton").onclick =
and JavaScript,
Listeners properties or using myButtonHandler;
enabling
addEventListener
modularization

Inline Event Handling Details:

If the handler is more than a single statement, a function call is used as the attribute's value

Event Listeners - Property Assignment (DOM 0):

 Example: document.getElementById("myButton").onclick = myButtonHandler;

Disadvantage: Cannot specify parameters to the handler function when registering it this way

Advantages: Promotes clean separation of HTML and JavaScript, enabling modularization and
leading to a cleaner, more maintainable design. Allows for dynamically changing the function during
runtime

Event Listeners - addEventListener (DOM 2 event model):

This is the preferred modern approach for event listener registration

Syntax: element.addEventListener(eventName, handlerFunction, useCapture)

The useCapture boolean parameter determines whether the handler is registered for the capturing
phase (true) or bubbling phase (false) of event propagation

Example: customerNode.addEventListener("change", chkName, false);

Allows for multiple handlers for the same event on the same element

Event handlers registered this way are passed an event object

15. How can you handle events from various HTML elements, such as the Body, Button,
Text box, and Password elements?
Events can be handled from various HTML elements by attaching event handlers or listeners to them.

Body Elements: The most common events are load and unload.

load event: Triggered when the document's body has finished loading. Handled using the onload
attribute in the <body> tag or by assigning to the window.onload property

unload event: Used for cleanup before a document is unloaded, for example, closing a second
browser window. Handled via the onunload attribute

Button Elements (e.g., regular buttons, radio buttons): The primary event is the click event.

Can be handled by calling a JavaScript function directly in the onclick attribute of the <input
type="button"> or <input type="radio"> tag

Alternatively, the event handler function can be registered by assigning its name to the onclick
property of the button element's DOM object

Text Box and Password Elements: These elements generate four events: blur, focus, change, and
select.
 blur event: Occurs when the element loses focus. Can be used for validation or to prevent user
alteration (e.g., onfocus="this.blur();" to prevent focus)

focus event: Occurs when the element gains focus

change event: Occurs when the value of the text box or password field changes and the element
loses focus. Commonly used for validating user input, like name or phone number formats

select event: Occurs when text within the input field is selected

Handlers can be registered using the onblur, onfocus, onchange attributes in the HTML, or by assigning
to the corresponding properties of the DOM object (e.g., document.getElementById("initial").onblur =
chkPasswords; ).

16. What is the DOM 2 event model, and how does it enhance event handling in web
development?
Definition: The DOM 2 event model is a more advanced and comprehensive event model compared to
DOM 0. It was issued in November 2000 and introduced a style-sheet object model, an event model, and
document traversals.

Enhancements in Event Handling:

Modularized Interface: It provides a modularized interface with different modules like "Events" and
submodules such as HTMLEvents and MouseEvents.

Event Object: When an event occurs, an object implementing the event interface is passed to the
handler, containing event-related information.

Event Propagation (Three Phases): Unlike DOM 0's simple connection, DOM 2 defines a three-phase
process when an event is created at a target node:

1. Capturing Phase: The event propagates from the document root down to the target node

2. Target Node Phase: Handlers specifically registered at the target node are executed

3. Bubbling Phase: The event then "bubbles" back up the tree from the target node to the document
root, executing handlers along the way

Centralized Event Handling: Event bubbling allows for central event handling, which can reduce
redundant code.

Control over Propagation: Handlers can stop event propagation using the stopPropagation() method.

Preventing Default Actions: The preventDefault() method allows handlers to prevent the browser's
default actions triggered by an event.
addEventListener: Event handler registration is primarily done using the addEventListener method,
which takes the event name, the handler function, and a boolean value to enable the capturing phase
(true) or bubbling phase (false). This allows for more structured registration and the possibility of
attaching multiple handlers to a single event on an element.

this and currentTarget/target: In DOM 2, this in event handlers might refer to the target node, but
event.currentTarget always refers to the object where the handler is being executed, ensuring portability,
while event.target references the target node.

Browser Support: While more advanced, DOM 2 is not supported by older versions of Internet Explorer
(before IE9).

17. Explain the purpose and capabilities of the navigator object in JavaScript.
Purpose: The navigator object indicates which browser is being used to view the HTML document. Its
primary purpose is to allow scripts to determine the browser being used and to employ processes
appropriate to that specific browser.

Key Capabilities: Its key capabilities are provided through its properties:

appName: Stores the name of the browser

appVersion: Stores the version of the browser

These properties enable web developers to adapt their website's behaviour or display based on the user's
browser environment.

18. How can you traverse and modify the DOM tree in a web document using
JavaScript?
JavaScript provides various properties and methods to traverse and modify the Document Object Model
(DOM) tree in a web document. These are supported by browsers like IE9 and FX3.

Traversing the DOM Tree:

 parentNode: Returns the DOM address of the parent node of the referenced node, useful for
moving up the tree

childNodes: Returns a NodeList (an array) of child nodes of the referenced node, enabling access to
all child elements and counting them
Example: var listitems = nod.childNodes.length; to count list items

firstChild and lastChild: Provide access to the first and last child nodes, respectively

nextSibling and previousSibling: Allow navigation to the next and previous sibling nodes, moving
horizontally within the tree

nodeType: Represents the type of the referenced node (e.g., element, text, comment), useful for
determining node type

Modifying the DOM Tree:

appendChild(newChild): Adds a new child node to the end of the list of siblings of the node
through which it is called

removeChild(oldChild): Removes a specified child node from a parent node

replaceChild(newNode, oldNode): Replaces an existing child node with a new node

cloneNode(deep): Creates a copy of a node; if deep is true, it also copies all descendants

nodeValue: Property representing the value of a node, particularly useful for text nodes, which can
be modified

These methods allow for dynamic manipulation, insertion, replacement, or removal of nodes, creating
interactive web applications.