KembaraXtra-Computer Science - The Internet Protocol Suite

Overview

The internet protocol suite standardizes communication on the internet.

Key protocols: Transmission Control Protocol (TCP) and Internet Protocol (IP), collectively known as TCP/IP.

Network protocols operate in a layered model called a network stack.

Layered Model (TCP/IP Model)

Four-layer model (TCP/IP model):

• Link
• Internet
• Transport
• Application

Protocols at each layer interact with adjacent layers only (encapsulation).

Each layer has specific responsibilities handled by protocols within that layer.

OSI Model

Another network model with seven layers.

Less relevant as the internet is based on the TCP/IP model.

Table of Layers and Protocols

Data Transmission Flow

Outgoing Transmission: Travels down the network layers (Application → Transport → Internet → Link).

Incoming Transmission: Travels up the network layers (Link → Internet → Transport → Application).

Network hosts (clients, servers) use all four layers.

Networking hardware (switches, routers) often use only lower layers.

Detailed Layer Breakdown

1. Link Layer

Connects devices on the same local network.

Uses Media Access Control (MAC) addresses to uniquely identify devices.

Data is divided into frames (header, payload, footer).

Frame Header: Contains source and destination MAC addresses, data type descriptor.

Payload: Contains the data being transmitted.

Frame Footer: Used for error detection.

Examples:

• Wi-Fi (IEEE 802.11): Wireless communication.
• Ethernet (IEEE 802.3): Wired communication using RJ45 connectors.

Networking devices:

• Hub: Retransmits frames to all ports.
• Switch: Examines MAC addresses and sends frames to the correct port.

2. Internet Layer

Allows data to travel beyond the local network (routing).

Uses Internet Protocol (IP) for addressing and routing.

Every host has an IP address.

Data is sent in packets (enclosed in a link layer frame).

IP Packet Header: Contains source and destination IP addresses, IP version, header length.

Data Section: Payload.

IP Versions:

• IPv4: 32-bit addresses (dominant). Displayed in dotted decimal notation (e.g., 192.168.1.23).
• IPv6: 128-bit addresses.

Subnets:

• Devices on the same local network have IP addresses with the same leading bits.
• Devices on different subnets communicate through a router.
• IP address divided into: network prefix (shared by subnet) and host identifier (unique to host).
• CIDR Notation: IP address/prefix length (e.g., 192.168.1.23/24).
• Subnet Mask: 32-bit number indicating the network prefix (e.g., 255.255.255.0 for a 24-bit prefix).
• Network ID: Result of a bitwise AND between an IP address and subnet mask. Identifies the subnet.
• To determine if two computers are on the same subnet: perform a bitwise AND on both IPs with the subnet mask. If the result is the same, they are on the same subnet.
• Range of usable addresses: First and last address are reserved; others can be used by hosts.

3. Transport Layer

Provides a communication channel for applications.

Protocols:

• TCP (Transmission Control Protocol): Reliable, connection-oriented. Data is sent in segments.
• UDP (User Datagram Protocol): Unreliable, "best effort." Data is sent in datagrams.

TCP segment fits within an IP packet's data section.

Network Port Numbers: Identify specific services/processes on a host.

• Well-known ports: 0–1023
• Registered ports: 1024–49151
• Dynamic ports: 49152+

Servers listen on well-known ports. Clients use ephemeral ports.

Socket: An IP address plus a port number. Represents a network endpoint.

4. Application Layer

Focuses on specific application tasks.

Examples:

• HTTP (web content)
• SMTP (email)
• FTP (file transfer)

Application data is contained in the transport layer segment's data section.

Frame Structure

A frame contains:

• Link layer header and footer
• IP packet (header and data)
• TCP segment (header and data)
• Application data

Transmission Process Summary

Sending: Application data → Segment → Packet → Frame

Receiving: Frame → Packet → Segment → Application data

KembaraXtra – Computer Science – Web Languages

I. Core Web Languages

A. HTML (HyperText Markup Language)

• Purpose: Defines the structure of a web page. It determines what is on the page.
• Key Concepts:
• Tags: Enclosed in < and > (e.g., <p>, <h1>).
• Elements: Consist of a start tag, content, and an end tag (e.g., <p>This is a cat.</p>). Some elements don't require end tags (e.g., <img>).
• Structure: HTML documents have a tree-like structure with parent and child elements.
• <!DOCTYPE html>: Declares the document as HTML.
• <html>: The root element, containing everything else.
• <head>: Contains document metadata (e.g., title, character set).
• <body>: Contains the content of the web page.
• <h1> to <h6>: Heading tags, with <h1> being the highest level.
• <p>: Paragraph tag.
• <img>: Image tag; src specifies image URL, alt gives alternative text.
• Whitespace: Browsers ignore extra whitespace. Use indentation for readability.
• HTML Living Standard: Maintained by WHATWG.
• Example:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>A Cat</title>
  </head>
  <body>
    <h1>Thoughts on a Cat</h1>
    <p>This is a cat.</p>
    <img src="cat.jpg" alt="cat photo">
  </body>
</html>
    

B. CSS (Cascading Style Sheets)

• Purpose: Defines the appearance/style of a web page.
• Key Concepts:
• Rules: Define styles for specific elements.
• Selectors: Indicate which elements are affected.
• Cascading: Multiple rules can apply to the same element.
• Font-family: Defines fallback fonts.
• Methods of Application:
• Inline: Within a <style> element – not recommended.
• External: In a separate .css file and linked using <link> in <head>.
• Example:

p {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11pt;
  margin-left: 10px;
  color: DimGray;
}
h1 {
  font-family: 'Courier New', Courier, monospace;
  font-size: 18pt;
  font-weight: bold;
}
    

C. JavaScript

• Purpose: Defines behavior/functionality of a web page.
• Key Concepts:
• Interpreted Language: Executed at runtime by browser.
• Minification: Reduces file size by removing whitespace/comments.
• DOM: JavaScript can access and modify the page structure.
• Event Handlers: Respond to user actions.
• Integration: Embedded in HTML or linked via <script src="cat.js"></script>.
• Example:

document.getElementById('cat-photo').onclick = function() {
  document.getElementById('cat-para').innerHTML += ' Meow!';
};
    

• Selects element by ID.
• Assigns a function on click.
• Appends "Meow!" to the paragraph.

II. Data Structuring Languages

A. XML (Extensible Markup Language)

• Purpose: Text-based language for data exchange.
• Key Concepts:
• Custom tags defined by the user.
• Requires producer-consumer agreement.
• Example:

<band name="The Highbury Musical Club">
  <bandMembers>
    <member name="Jane Fairfax" instrument="Piano" />
    <member name="Emma Woodhouse" instrument="Guitar" />
  </bandMembers>
</band>
    

B. JSON (JavaScript Object Notation)

• Purpose: Lightweight data format.
• Key Concepts:
• JavaScript-like syntax with {} and [].
• Compact and readable.
• Example:

{
  "name": "The Highbury Musical Club",
  "bandMembers": [
    {
      "name": "Jane Fairfax",
      "instrument": "Piano"
    },
    {
      "name": "Emma Woodhouse",
      "instrument": "Guitar"
    }
  ]
}
    

KembaraXtra – Computer Science – Web Browsers

I. Introduction

• Definition: Software applications for accessing web pages.
• Key Functions: Requesting, receiving, and displaying web content.

II. History of Web Browsers

• WorldWideWeb: First browser, by Tim Berners-Lee (1990).
• Mosaic: Brought the web to the masses.
• Netscape Navigator: Popular in early web history.
• Internet Explorer: Dominated the late 1990s and 2000s.
• Modern Browsers: Chrome, Safari, Firefox.

III. Rendering a Web Page: The Process

1. Request: Browser sends URL request.
2. HTML Response: Server returns HTML content.
3. DOM Creation: Browser parses HTML into a DOM tree.
4. Resource Requests: Additional resources (images, JS, CSS) are loaded.
5. Rendering:
   • Displays HTML.
   • Applies CSS.
   • Executes JavaScript.
   • Updates dynamically via JS if needed.

IV. Web Browser Architecture

• Rendering Engine: Handles HTML/CSS layout.
• JavaScript Engine: Runs JS code.
• User Interface: Provides controls like the address bar.

V. Rendering Engine Landscape

• Key Point: Engines affect how pages look.
• WebKit: Safari and iOS apps.
• Blink: Chrome, Edge, Opera (Chromium-based).
• Gecko: Firefox (with SpiderMonkey JS engine).

VI. Understanding the User Agent String

• Definition: The technical term for a browser is a "user agent."
• User-Agent Header: Identifies browser during requests.
• Example: Mozilla/5.0 (Windows NT 10.0; Win64; x64)...
• Components Explained:
• Mozilla/5.0: Compatibility prefix.
• (Windows NT 10.0; Win64; x64): Platform.
• AppleWebKit/537.36: Rendering engine.
• (KHTML, like Gecko): History artifact.
• Chrome/71.0.3578.98: Browser version.
• Safari/537.36: Ensures Safari compatibility.
• Reason for Complexity: Historical compatibility tricks.

KembaraXtra – Computer Science – Web Servers

I. Client-Side vs. Server-Side Technologies

• Client-Side: Primarily deals with what the user sees and interacts with in the web browser. Uses HTML, CSS, and JavaScript.
• Server-Side: Deals with the logic and data processing behind the website. Any programming language or technology can be used, as long as it communicates over HTTP and returns data in a format the client understands.

II. Static vs. Dynamic Websites

Important Note: The terms "static" and "dynamic" refer to how the content is generated on the server, not whether the website is interactive or has updated content. User experience (interactivity, content updates) is often handled with JavaScript on the client-side, regardless of whether the site is static or dynamic from the server's perspective.

III. How Static Websites Handle Requests

1. Browser requests a specific URL.
2. Web server receives the request.
3. Web server finds the corresponding static file (e.g., /images/cat.jpg) in its directory.
4. Web server returns the content of that file to the browser.
5. The server does not modify the content.

IV. How Dynamic Websites Handle Requests

1. Browser requests a specific URL.
2. Web server receives the request and determines that it needs to generate HTML.
3. The server executes code.
4. The code queries a database and retrieves the relevant data.
5. The server formats the data as HTML.
6. The server responds to the client with the generated HTML.

V. The Trend Toward Static Sites

• In recent years, there has been a shift back towards static sites where possible.
• Static sites offer simplicity, speed, and security benefits.

VI. Hosting Static Sites

• You need a web server software that can serve static files.
• The software is configured to point to a directory containing the website files.
• When a request comes in, the server returns the contents of the matching file.

VII. Building Dynamic Websites/Web Services

• You can use existing software or write custom code to generate dynamic pages.
• Server-side development offers a wide range of technology choices (programming languages, operating systems, databases, etc.).
• The client doesn't care what technologies are used on the server-side; it only needs a response in a format it can handle.

VIII. Server-Side Technology Choices

• Programming Languages: Python, C#, JavaScript (Node.js), Java, Ruby, PHP, etc.
• Databases: Any type of database can be used.

Study Guide: Logic in Programming

I. Introduction

• Processors excel at logical operations, which are fundamental to digital circuits.

• Programming languages provide operators for handling logic.

• Two main types of logical operators:

• Bitwise Operators: Operate on individual bits of integers.
• Boolean Operators: Operate on Boolean (true/false) values.

• Terminology varies across languages (e.g., C uses "logical" instead of "Boolean"). This guide will use "bitwise" and "Boolean."

II. Bitwise Operators

• Act on individual bits of integers.

• Result: an integer value.

• Perform logical operations (AND, OR, XOR, NOT) on the bits of integers in parallel.

• Operators (common in C and Python):

• AND: &
• OR: |
• XOR: ^
• NOT (complement): ~

Example (Python):

x = 5  # Binary: 0101
y = 3  # Binary: 0011
a = x & y  # Bitwise AND
b = x | y  # Bitwise OR

# a is 1 (0001 in binary)
# b is 7 (0111 in binary)

Explanation of Example

• AND: The result is 1 only when both corresponding bits are 1.

• 5 & 3:

0101
0011
----
0001 (1 in decimal)

• OR: The result is 1 if either corresponding bit (or both) is 1.

• 5 | 3:

0101
0011
----
0111 (7 in decimal)

III. Boolean Operators

• Work on Boolean values (true or false).

• Result: a Boolean value.

• Boolean values: represented differently in different languages (e.g., True or False in Python).

• Boolean variable: a named memory address holding a true or false value.

• Expressions can evaluate to true or false (e.g., item_cost > 5).

Boolean Operators:

• Perform logical operations (AND, OR, NOT) on Boolean values.

• Example: item_on_sale and item_cost > 5 (checks if both conditions are true).

Comparison Operators:

• Compare two values and evaluate to true or false.

Important:

• == (double equals) is for equality comparison (returns true/false).
• = (single equals) is for assignment (sets a variable's value).
• Example: x == 5 (is x equal to 5?) vs. x = 5 (set x to 5).

Program Flow: Controlling What Your Code Does

Core Idea: Program flow (or control flow) lets your program make decisions and repeat actions based on conditions.

1. If Statements: Doing Something Based on a Condition

Purpose: Executes a block of code only if a specified condition is true. Optionally includes else to execute a different block if the condition is false.

Basic Structure:

Python:

if condition:
    # Code to execute if condition is true
else:
    # Code to execute if condition is false

C:

if (condition) {
    // Code to execute if condition is true
} else {
    // Code to execute if condition is false
}

Key Differences (Python vs. C):

• Code Blocks:
• Python: Uses indentation to define code blocks (lines with the same indentation level belong to the same block).
• C: Uses curly braces {} to define code blocks. Braces can be omitted for single-line blocks.
• elif (Python) / else if (C): Used to check multiple conditions in sequence. The elif/else if condition is only evaluated if the preceding if or elif/else if condition was false.

Python:

if condition1:
    # Code for condition1
elif condition2:
    # Code for condition2
else:
    # Code if neither condition1 nor condition2 is true

C:

if (condition1) {
    // Code for condition1
} else if (condition2) {
    // Code for condition2
} else {
    // Code if neither condition1 nor condition2 is true
}

2. Looping: Repeating Actions

Purpose: Executes a block of code repeatedly.

Types:

• while loop: Repeats as long as a condition is true.

Python:

while condition:
    # Code to repeat

C:

while (condition) {
    // Code to repeat
}

Important: Make sure the condition eventually becomes false to avoid an infinite loop!

• for loop: Iterates over a sequence of values (numbers, items in a list, etc.).

C Style (for with numeric range):

for (initialization; condition; increment/decrement) {
    // Code to execute in each iteration
}

• initialization: Executed once at the beginning of the loop (e.g., int x = 1;).
• condition: Checked before each iteration. The loop continues as long as the condition is true (e.g., x <= 10;).
• increment/decrement: Executed after each iteration (e.g., x++;).

Python Style (for with collection):

for item in collection:
    # Code to execute for each item in the collection

• collection: A list, tuple, string, or other iterable object.
• item: A variable that takes on the value of each item in the collection during each loop iteration.

KembaraXtra-Computer Science - Functions

1. What are Functions?

Definition: A function is a reusable block of code that performs a specific task.

Purpose:

• Avoid code duplication.
• Promote code reusability.
• Improve code organization and readability.

Terminology: Functions may also be called subroutines, procedures, or methods (slight differences in meaning may exist depending on the language).

DRY Principle: Functions adhere to the "Don't Repeat Yourself" (DRY) principle by reducing duplicative code.

Encapsulation: Functions encapsulate internal details, providing an interface (inputs and outputs) for usage. Users don't need to know the inner workings.

2. Defining Functions

Definition: Creating a function and specifying its behavior.

Elements of a Function Definition:

• Name: A unique identifier for the function.
• Parameters (Inputs): Values passed to the function when it is called.
• Body: The code block containing the instructions the function executes.
• Return Value (Output): The value the function sends back to the caller (optional).

Example (C):

double areaOfCircle(double radius) {
    double area = 3.14 * radius * radius;
    return area;
}

• double: Return type (floating-point number).
• areaOfCircle: Function name.
• double radius: Input parameter (radius of the circle).
• { ... }: Function body.
• return area: Returns the calculated area.

Example (Python):

def area_of_circle(radius):
    area = 3.14 * radius * radius
    return area

• def: Keyword to define a function.
• Type declarations are not required in Python.

3. Calling Functions

Definition: Executing a defined function.

Process:

1. The calling code invokes the function.
2. Parameters are passed (if any).
3. Control is transferred to the function.
4. The function executes its code.
5. The function returns control (and a return value, if any) to the caller.

Example (C):

double area1 = areaOfCircle(2.0);
double area2 = areaOfCircle(38.6);

Example (Python):

area1 = area_of_circle(2.0)
area2 = area_of_circle(38.6)

The returned value can be stored in a variable or ignored (though ignoring the return value might not be useful, depending on the function).

4. Using Libraries

Definition: Leveraging pre-written functions provided by programming languages or third-party developers.

Standard Library: A set of functions included with a programming language.

Examples: Printing to the console, file operations, text processing.

C and Python both have standard libraries. Python's is known to be extensive.

Additional Libraries: Libraries created by developers and shared for others to use.

Package Managers: Tools for managing and distributing libraries (packages).

• Python: pip (widely used).
• C: Multiple package managers exist, but none are universally adopted.