Lecture Notes

Lecture Notes: Systems and Web Development Workshop

其实是个 cheatsheet，从来没去听过课

COMP1033 Systems and Web Development Workshop

Dr. Xiao DONG

HTML

Structure of an HTML Document

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Common HTML Tags

Tag Description
<h1> - <h6> Headings (h1 is the largest, h6 is the smallest)
<p> Paragraph
<a href="URL"> Hyperlink
<img src="image.jpg" alt="description"> Image
<ul>, <ol>, <li> Lists (unordered & ordered)
<table>, <tr>, <td> Table structure
<div> Container for grouping elements
<span> Inline container for styling

Forms and Inputs

1
2
3
4
5
6
7
8
9
10
11
12
<form action="submit.php" method="post">
    <label for="name">Name:</label>
    <input type="text" id="name" name="name">
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password">

    <input type="submit" value="Submit">
</form>

Form Input Types

Type Description
text Single-line text field
password Password field
email Email input
checkbox Checkbox selection
radio Radio button
submit Submit button
reset Reset button

CSS

Ways to Apply CSS

  1. Inline CSS (applied directly in an HTML element)
    1
    <p style="color: red;">This is red text.</p>
  2. Internal CSS (inside <style> in the <head>)
    1
    2
    3
    <style>
        p { color: blue; }
    </style>
  3. External CSS (in a .css file)
    1
    p { color: green; }
    1
    <link rel="stylesheet" href="styles.css">

Selectors

Selector Description
* Selects all elements
element Selects all <p> or <h1> tags
#id Selects an element with a specific ID
.class Selects all elements with a class
element, element Selects multiple elements
element > element Selects direct children

Box Model

1
2
3
4
5
6
7
div {
    width: 200px;
    height: 100px;
    padding: 10px;
    border: 5px solid black;
    margin: 20px;
}

Text Styling

1
2
h1 { color: red; text-align: center; text-transform: uppercase; }
p { font-size: 16px; line-height: 1.5; }

Positioning

Property Description
static Default positioning
relative Relative to normal position
absolute Positioned relative to the nearest positioned ancestor
fixed Fixed relative to the viewport
sticky Sticks to a position when scrolling 
1
2
3
4
5
div {
    position: absolute;
    top: 50px;
    left: 100px;
}

CSS Flexbox

1
2
3
4
5
.container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

CSS Grid

1
2
3
4
.container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

JavaScript

1. Introduction & Basics

  • JavaScript is a programming language used to add interactivity to web pages.
  • Invented by Brendan Eich in 1995, standardized as ECMAScript (ES6).
  • JavaScript runs client-side (browser) and server-side (Node.js).

Ways to Include JavaScript

  • Inline: <button onclick="myFunction()">Click me</button>
  • Internal: Inside <script> tags in an HTML file.
  • External: <script src="script.js"></script>

2. JavaScript Output Methods

  1. document.write("Hello World"); – Only for testing; overwrites content.
  2. document.getElementById("demo").innerHTML = "Hello World"; – Best practice.
  3. console.log("Debugging message"); – Logs to developer console.
  4. alert("This is an alert!"); – Popup alert box.

3. Variables & Data Types

Declaring Variables

1
2
3
var name = "John";   // Old way (Global)
let age = 25;        // Modern, Block-scoped
const PI = 3.14;     // Constant, cannot be reassigned

Data Types

  • Numbers: let num = 10;
  • Strings: let text = "Hello";
  • Booleans: let isTrue = true;
  • Arrays: let colors = ["red", "green", "blue"];
  • Objects: 
    1
    let person = { firstName: "John", lastName: "Doe", age: 30 };
  • Null & Undefined: let x = null; let y;

4. Operators

Arithmetic Operators

Operator Description
+ Addition
- Subtraction
* Multiplication
/ Division
% Modulus (Remainder)
** Exponentiation (Power)

Comparison Operators

Operator Description
== Equal (checks value only)
=== Strict equal (checks value & type)
!= Not equal
!== Strict not equal
> Greater than
< Less than
>= Greater than or equal to
<= Less than or equal to

Logical Operators

Operator Description
&& Logical AND
`
! Logical NOT

5. Conditional Statements

If-Else

1
2
3
4
5
if (age >= 18) {
    console.log("You are an adult");
} else {
    console.log("You are a minor");
}

Else-If

1
2
3
4
5
6
7
if (age >= 21) {
    console.log("You can drink & drive (not together!)");
} else if (age >= 18) {
    console.log("You can drive but not drink");
} else {
    console.log("You can't drink or drive");
}

Switch Statement

1
2
3
4
5
6
7
let day = 3;
switch (day) {
    case 1: console.log("Monday"); break;
    case 2: console.log("Tuesday"); break;
    case 3: console.log("Wednesday"); break;
    default: console.log("Invalid day");
}

6. Loops

For Loop

1
2
3
for (let i = 0; i < 5; i++) {
    console.log("Iteration " + i);
}

For-In Loop (Objects)

1
2
3
4
let person = { name: "Alice", age: 25 };
for (let key in person) {
    console.log(key + ": " + person[key]);
}

For-Of Loop (Arrays)

1
2
3
4
let colors = ["red", "green", "blue"];
for (let color of colors) {
    console.log(color);
}

While Loop

1
2
3
4
5
let i = 0;
while (i < 5) {
    console.log("Number: " + i);
    i++;
}

Do-While Loop

1
2
3
4
5
let i = 0;
do {
    console.log("Executed once before checking condition");
    i++;
} while (i < 5);

7. Functions

Function Declaration

1
2
3
4
function greet(name) {
    return "Hello " + name;
}
console.log(greet("Alice"));

Function Expression

1
2
3
4
const add = function(x, y) {
    return x + y;
};
console.log(add(5, 3));

Arrow Function (ES6)

1
2
const multiply = (x, y) => x * y;
console.log(multiply(3, 4));

8. Events

  • JavaScript can react to events such as button clicks, form submissions, etc.
    1
    2
    3
    document.getElementById("myBtn").addEventListener("click", function() {
        alert("Button Clicked!");
    });

9. DOM Manipulation

Selecting Elements

1
2
3
4
5
document.getElementById("id");      // By ID
document.getElementsByClassName("class"); // By Class
document.getElementsByTagName("p"); // By Tag
document.querySelector(".class");   // First Match
document.querySelectorAll(".class");// All Matches

Changing Content

1
2
3
document.getElementById("demo").innerHTML = "New Content";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").classList.add("newClass");

Creating Elements

1
2
3
let newElement = document.createElement("p");
newElement.innerText = "This is a paragraph";
document.body.appendChild(newElement);

10. Working with Forms

1
2
3
4
5
6
7
function validateForm() {
    let name = document.forms["myForm"]["name"].value;
    if (name == "") {
        alert("Name must be filled out");
        return false;
    }
}

11. Arrays

Array Methods

1
2
3
4
5
6
7
let arr = ["Apple", "Banana", "Cherry"];
arr.push("Orange");   // Add to end
arr.pop();            // Remove last
arr.unshift("Grapes"); // Add to beginning
arr.shift();          // Remove first
console.log(arr.length); // Array length
console.log(arr.indexOf("Banana")); // Find index

12. Objects

Object Declaration

1
2
3
4
5
6
7
8
9
let person = {
    firstName: "John",
    lastName: "Doe",
    age: 30,
    fullName: function() {
        return this.firstName + " " + this.lastName;
    }
};
console.log(person.fullName());

13. JSON (JavaScript Object Notation)

1
2
3
4
5
6
let jsonString = '{"name": "Alice", "age": 25}';
let jsonObject = JSON.parse(jsonString); // Convert JSON to Object
console.log(jsonObject.name);

let newJsonString = JSON.stringify(jsonObject); // Convert Object to JSON
console.log(newJsonString);

Lecture Notes: Systems and Web Development Workshop

https://tosakaucw.github.io/lecture-notes-systems-and-web-development-workshop/

Author

TosakaUCW

Posted on

2025-03-20

Updated on

2025-03-24

Licensed under

Comments

×