Firefly

1
[vite] connected.
2
[types] Generated 0ms
3
[vite] connected.
4
[content] Syncing content
5
[content] Synced content
6
[vite] Re-optimizing dependencies because vite config has changed
7
 astro ready in 1608 ms
8
┃ Local    http://localhost:4321/
9
┃ Network  use --host to expose
10
watching for file changes...

在浏览器打开即可看到渲染效果

提交翻译#

向我们的仓库开启Pull request即可

已完成的翻译#

文章	翻译官	相关PR
DSA Week2: Binary search, Sorting and Linked list	bertyuan (Bertrand Yuan)	Translate dsa/week2/lecture #1
A Linked List Class to Represent Polynomials	bertyuan (Bertrand Yuan)	Translation for DSA week 2 5 6 #2
Sorting	bertyuan (Bertrand Yuan)	Translation for DSA week 2 5 6 #2
Data Structures and Algorithms Week5: Tree	bertyuan (Bertrand Yuan)	Translation for DSA week 2 5 6 #2
Binary Trees and Cross-referencing (Binary search tree)	bertyuan (Bertrand Yuan)	Translation for DSA week 2 5 6 #2
Data Structures and Algorithms Week6: AVL Tree	bertyuan (Bertrand Yuan)	Translation for DSA week 2 5 6 #2
Exercises AVL Tree	bertyuan (Bertrand Yuan)	Translation for DSA week 2 5 6 #2
Data Structures and Algorithms Coursework2	bertyuan (Bertrand Yuan)	add translation for DSA coursework 2 #5

Foundations of Security Week11 Lecture

Tue, 19 May 2026 00:00:00 GMT

Lecture Outline#

Review of AES encryption structure
ShiftRows transformation in AES
MixColumns transformation in AES
AddRoundKey transformation

Learning Outcomes#

By the end of this lecture, students should be able to:

Describe how rows in the AES state matrix are shifted
Describe how columns are transformed using matrix multiplication
Understand how AES operations are performed in GF(28)GF(2^8)GF(28)
Perform basic MixColumns calculations using polynomial operations

Advanced Encryption Standard (AES)#

Main Rounds - ShiftRows

It shifts the bytes in each row of the subbytes result to the left by a specific number of positions.

Main Rounds - Mix Columns

It transforms each column using matrix multiplication in Galois Field (GF(28)\textcolor{blue}{GF(2^8)}GF(28)) to ensure that changes to one byte affect all four bytes in the column.
This multiplication is not traditional matrix multiplication.
Each column of the state matrix (consisting of 4 bytes) is treated as a 4-byte vector and is multiplied by a fixed 4 ×\times× 4 matrix
This is done in GF(28)GF(2^8)GF(28) using modulo operations with the irreducible polynomial x8+x4+x3+x+1x^8+x^4+x^3+x+1x8+x4+x3+x+1

Fixed 4 × 4(02030101010203010101020303010102)\begin{array}{c} \text{\textcolor{purple}{Fixed 4 $\times$ 4}} \\[0.6em] \begin{pmatrix} \textcolor{red}{02} & \textcolor{red}{03} & \textcolor{red}{01} & \textcolor{red}{01} \\ \textcolor{red}{01} & \textcolor{red}{02} & \textcolor{red}{03} & \textcolor{red}{01} \\ \textcolor{red}{01} & \textcolor{red}{01} & \textcolor{red}{02} & \textcolor{red}{03} \\ \textcolor{red}{03} & \textcolor{red}{01} & \textcolor{red}{01} & \textcolor{red}{02} \end{pmatrix} \end{array}Fixed 4 × 402010103030201010103020101010302

Convert to binary and Reduce using the irreducible polynomial x8+x4+x3+x+1\textcolor{blue}{x^8+x^4+x^3+x+1}x8+x4+x3+x+1

Compute for all, cross out and Reduce using the irreducible polynomial x8+x4+x3+x+1\textcolor{blue}{x^8+x^4+x^3+x+1}x8+x4+x3+x+1

Convert to binary and Reduce using the irreducible polynomial x8+x4+x3+x+1\textcolor{blue}{x^8+x^4+x^3+x+1}x8+x4+x3+x+1

(02 × FE)⊕(03 × 7C)⊕(01 × 6F)⊕(01 × 63)=r1(02\,\textcolor{purple}{\times}\,\textcolor{green}{FE}) \oplus (03\,\textcolor{purple}{\times}\,\textcolor{green}{7C}) \oplus (01\,\textcolor{purple}{\times}\,\textcolor{green}{6F}) \oplus (01\,\textcolor{purple}{\times}\,\textcolor{green}{63}) = \textcolor{green}{r1}(02×FE)⊕(03×7C)⊕(01×6F)⊕(01×63)=r1GF(28)x7+x6+x5+x4+x3+x2+x+1\begin{equation} \textcolor{blue}{GF(2^8)} \hspace{1em} x^7+x^6+x^5+x^4+x^3+x^2+x+1 \end{equation}GF(28)x7+x6+x5+x4+x3+x2+x+1x8+x6+x5+x4+x2 = 1011110100\colorbox{#FFE8D6}{$x^8 + x^6 + x^5 + x^4 + x^2$} \; \textcolor{purple}{=} \; \colorbox{#FFE8D6}{$1011110100$}x8+x6+x5+x4+x2=1011110100x8+x4+x3+x+1 = 1000111011\colorbox{#FFF3CD}{$x^8 + x^4 + x^3 + x + 1$} \; \textcolor{purple}{=} \; \colorbox{#FFF3CD}{$1000111011$}x8+x4+x3+x+1=1000111011

Main Rounds – AddRoundKey

Web Application Development - Responsive Design

Tue, 19 May 2026 00:00:00 GMT

Designing Web Sites for Mobile Devices (Responsive Design)#

Mobile Web Access#

Since 2018, most surveys have shown the majority of web traffic (by a small margin) was generated by mobile devices, in particular mobile phones.

In some countries and areas, mobile devices are much easier to connect to the Internet than desktop ones.

In the UK in 2019, a majority of people surveyed identified smartphones as their most important method for accessing the internet.

Mobile users were originally thought to be only interested in “quick access” to websites while “on the go”, but this is not the case any more. Just because a user is using a mobile doesn’t mean they’re not browsing your site while simply sat at home.

Mobile User Interface Restrictions#

Small Screen

Harder to display large amounts of information at once, Greater dependence on icons to save space compared to text

Unusual aspect ratio

Most desktop screens are landscape and do not change, Mobile phones are portrait by default but can be changed by the user

No feedback

Clicking a mouse or touchpad gives automatic tactile feedback, Touching a screen does not - although in the future it may do

Fingers are not transparent

User may have to interrupt a series of touches to see the screen, Items that are dragged or touched continuously are invisible at the time

Typing isn’t a separate channel and has a tradeoff

Can’t type to do one thing while using mouse for another - both are touch, Soft keyboard covers up part of the user interface

Mobile User Interface Advantages#

Higher quality display
Most mobile displays are now higher quality and DPI than computer ones

Greater range of gestures
Tap, drag, hold, swipe, double/triple gesture, pinch, antipinch, rotate, hardware buttons

More obvious direct manipulation
Touching an object to move it is more intuitive than using a mouse

Greater overall experience control
Have control over the entire screen with less interference from other apps

Better OS support
OSs and browsers built from scratch for modern UIs and the web, with less legacy code hanging on

Adaptive and Responsive Design#

Adaptive web design: start from a “standard” appearance and design for a site (probably based on a desktop view), and adapt to provide different versions for mobile devices
Problem: mobile devices and their capabilities constantly changing and offering new functionality in different combinations, and differing user preferences
Responsive web design: designing with no standard appearance, only a general set of rules for creating a suitable site design on a device of any size or capability
Easily allows for new devices or altered software or preferences, but a paradigm shift in web design

Viewport Tag#

All mobile browsers support “zooming” of web pages. This means that pixel measurements on mobile devices are not exact, as zooming a web page changes all scales it uses.
By default, mobile browsers assume pages are not designed for them, and will attempt to scale the page to fit on a mobile screen - effectively starting with the page “zoomed out” compared to the actual pixels on the screen.
While helpful for sites that are not designed for mobile, this is problematic for other sites because the site will not be able to detect or work with the actual size of the mobile device
To disable this, add the following to the head element:

1
<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width tells the mobile device not to simulate a wider screen. You can also specify an exact width in pixels, but if the device is wider than this, it will ignore it. (If it is narrower, it will zoom the page out.)
initial-scale=1.0 disables any initial zooming. You can also specify minimum-scale and maximum-scale to limit zooming applied at any time, including by the user (watch out for accessibility!)
Be careful with orientation changes which may abruptly change the width of the device. Different phones deal with this is different ways; some repeat the layout of the whole page, some retain the old layout but zoom in.

CSS media query#

An additional syntax, part of CSS selectors, allowing a CSS style sheet to customise the page based on the displaying media.
Written as the keyword @media followed by a series of media feature or media type specifications.
Media types are Booleans and are simply written on their own.
Media features are attributes and can be checked for equality. Some media features are integers, and can be compared using and =. These also have “min-” and “max-” variations which can be tested for equality.

Media types: print, speech, screen or all (although “all” is the default and doesn’t usually need to be specified).
Media features (not exhaustive):

aspect-ratio: aspect ratio of the screen as a pair of numbers. color: number of bits of color the screen offers, or 0 for monochrome. monochrome: number of greys the screen offers, or 0 for color. height, width: height and width of the display viewport (including scrollbar) pointer: “none”, “coarse” or “fine” based on availability and accuracy of pointer hover: “none” or “hover” based on whether hovering an element is convenient (it is easily done with a mouse but awkward with a finger) resolution: pixel density of the device (usually higher on mobiles) prefers-color-scheme: “none”, “light”, or “dark” based on OS preference

CSS media query example#

If screen is wide (probably a desktop), then make navigation area a smaller part of the page.

1
@media (min-width: 70rem) {
2
  nav { width: 70%; }
3
}

If screen is narrower, make navigation area fill the screen and remove section that was previously on the right; also adjust the font size of the navigation area.

1
@media (max-width: 70rem) {
2
    nav { width: 100%; font-size: 1rem; }
3
    div.extra { display: none; }
4
}

Rem?#

1 em is the width of the letter M in the currently selected font.
Because the currently selected font can vary and be resized across an HTML page, browsers also support the rem or “root em”, which is the width of the letter M in the font at the root of the page CSS tree (and is thus the same for all parts of the page)
This has benefits over pixel measurements in that it potentially allows the user or device to adjust the font size of a page and have the design respond to that adjustment.
However, some older browser may have difficulties with media queries specified in rems

Another example#

1
nav { border: 1px solid black; } %% Use borders on all devices %%
2
aside { border: 1px solid red; } %% Use borders on all devices %%
3
@media (min-width: 70rem) {
4
    nav { width: 68%; float: left; }    %% On wide devices, %%
5
    aside { width: 30%; float: right; } %% place nav and aside side-by-side. %%
6
}
7
@media (max-width: 70rem) {
8
    nav { width: 100%; float: none; }   %% On narrow devices, %%
9
    aside { width: 100%; float: none; } %% widen them and place one above the other %%
10
}
11
body {
12
    max-width: 100rem; %% Limit maximum width of the entire page to prevent strange blank spaces in the layout on very wide configurations. %%
13
}

You can just resize your browser window, but both browsers offer a more convenient option
In Firefox: Web Developer > Responsive Design Mode
In Chrome: Open developer tools and click the mobile icon.
This will allow you to restrict and scale the desktop view of the web page to simulate its appearance on a mobile.
Don’t forget the viewport meta tag or the page will be incorrectly scaled!

Images#

Images can be problematic for responsive design because of their fixed pixel sizes.
All images will need to be resized in CSS to particular proportional sizes (ems, percentages, etc). Otherwise, their default pixel sizes will look wildly different on different resolution screens, and will knock other parts of the design out of whack.
This can create problems: an image that looks fine on a desktop screen may look less sharp than text on a mobile device because although the mobile screen is smaller, it is higher resolution. You can use a very high resolution image, but then that image will have to be sent to all browsers, even desktops; and worse yet, mobiles may have high resolution screens, but they pay by the mb!

Distinguish decorative images from those that are essential to operate your web site.
Try to use vector formats (like SVG or icon fonts) for essential images. They can automatically be scaled to any size.
To load appropriate images based on device size, two techniques are used: the srcset attribute and the picture element. The srcset attribute (on the img tag) allows several different sources to be listed for the browser to choose from based on the resolution of image needed. The picture element does the same but allows more detailed matching of images to media queries.
Don’t forget the alt text either way!

Designing a responsive site#

Don’t start with a page layout. Start with knowing what the content and functionality of your page is going to be and decide how the user will most easily gain access to it.
You can write up a site storyboard or site map at this time to represent how content connects together, but don’t start with wireframes or mock-ups at this stage.
Design in a linear fashion. Think in terms of the user seeing everything on your page in a single fixed order. This is always how your site will end up being displayed on the narrowest devices, so it is always relevant. Once you have a good linear design it can be expanded.

Start from a simple page with content only, divided into content-based sections using HTML5 semantic tags or divs and spans.
No CSS, no images, no JavaScript yet; just completely plain content. This will not look suitable for a modern website, but that is ok - it is only the starting point of your design.
You might not want to have pages generated or modified by a server yet; this is your choice depending on how much you expect to change the template rather than just the styling and CSS.

Small screen first#

Start with getting the design working on a small screen. You can then refine and expand for a larger screen. (“It’s easier to move from a small house to a large one than the other way around!”)
Drawing wireframes can still be helpful, but they are not ideal as final expressions of responsive design because they do not show how the site will change as size changes.
As well as drawing wireframes, create prototypes by creating wireframes in HTML/CSS (ie, the page with no content, but borders around content areas). This will allow you to test your layout at different sizes dynamically.

Breakpoints#

A responsive breakpoint (different from a JavaScript debugging breakpoint) is the fixed value at which a media query changes state. For example, the earlier CSS example changed dramatically at 70rem.
Remember that there could be any number of sizes at which your site appears between the breakpoints. Make sure that the design still looks good when the size is just before and just after the breakpoints, and in the middle of the ranges.
Don’t use device sizes as your breakpoints – a new device could come out tomorrow! However, if a natural breakpoint falls just above or just below a device’s size, it might be worth tweaking it up or down slightly to whichever looks best on that device.

Touch screen issues#

Fingers are less precise than mouse pointers. Make sure that areas to be touched are big enough to be touched unambiguously.
Make sure that touched controls give an immediate and clear response (changing text, appearing indented, etc.) to make up for the lack of tactile feedback. This means that the control must be bigger than the finger so that the response is visible while the finger is covering the control. Again, don’t use pixel sizes – a higher resolution device doesn’t come with smaller fingers!
mouseMove and hover events usually do not work on mobile devices. Moving a finger around on the screen is used to scroll the page.
Some browsers offer touch specific events which do directly refer to touches. Beware of multitouch! There may be several touchstart events before a touchend if the user places several fingers on the device.

Mobile keyboard issues#

Note that many mobile browsers will add a delay after an initial touch, in order to see if a double touch was intended. This may slow down responsiveness. (Some browsers have begun to change this.)
Many desktop applications place menus and control buttons at the top or side of the window. However, on mobile devices, controls at the bottom are easiest to access, as they are nearer the hand and can be touched without covering the screen. It may even be better for menus to open upwards rather than downwards.
Bear in mind: desktop machines can have touch screens too!

On most desktop machines and some tablets, the keyboard represents a “second channel” to the mouse. The keyboard cursor can be on one item while the mouse cursor is on another and interactions between the two can be made in parallel.
On most mobile devices there is effectively only one channel. The keyboard cursor must be moved by touching the appropriate spot on the form and touching anything else deselects the keyboard as well. Make sure that the user can easily move between the two if they need to.
Devices that use a soft keyboard (which are not necessarily only mobiles, nor all mobiles) will cover part of the screen, usually the bottom, during keyboard input. Make sure nothing important is there. Also, many devices will zoom or pan the page when a keyboard input is selected.
On soft keyboard devices, keyboard navigation is not usually possible as the keyboard is not shown at all times, but check use of additional keyboards!

Performance and content issues#

Bear in mind that:

Mobile devices tend to run more slowly
Mobile internet connections are paid for by the mb
Mobile internet connections drop out or pause more frequently

Again, make sure to give the user feedback where a process may be slow. Any contact with a server may be slow or fail. Make sure that entered data is not lost if a server fails to respond. AJAX is often helpful for this.
Minimize the loading of content which is not needed on a mobile device. Decorative images may not be important enough to render; remember that gradients, glows, etc. can be made up in CSS3 without needing to load an image.

Data Structures and Algorithms Week11: Revision

Mon, 18 May 2026 00:00:00 GMT

Revision#

Key points#

Basic conception
- Big O
Data structure
- Array
- List
- Stack
- Queue
- Priority Queue
- Hash Table
- Tree
- Graph
Algorithm
- Sorting
- Linear Search
- Binary Search
- Hashing
- Recursion
- Traverse Tree
- Path Finding

Final Examination#

Two hours
Write the answers on the answer sheets
Type and weight of the questions
- Multiple Choice Questions(one correct answer) ------- 12 ×\times× 3 marks
- Short Answer Questions --------- 49 marks
- Encoding Questions -------- 15 marks

Question1#

What are the features of the Stack, the Queue, and the Priority Queue?
Assume s represents one empty Stack and q represents one empty queue, the variable a, b, c, d should be?

1
s.push(“China");
2
s.push(“Italy");
3
s.push(“Japan”)
4
s.pop();
5
s.push(“Germany");
6
s.push(“England");
7
s.pop();
8
String a = s.pop();
9
s.push(“Russia");
10
String b = s.pop();
11

12
q.add(“China");
13
q.add(“Italy");
14
q.remove();
15
q.add(“Japan");
16
q.add(“Germany");
17
q.add(“England”)
18
q.remove();
19
String c = q.remove();
20
q.add(“Russia");
21
String d = q.remove();

展开收起

Please implement the basic operation of the stack created based on an array
- push
- pop
- peek
- isEmpty
Please implement the basic operation of the queue created based on a single linked list
- add
- remove
- peek
- isEmpty

Question2#

What are the features of the hash table?
How to implement the insertion operation and deletion operation on a hash table?
How to solve the collision problem when inserting data into a hash table?

Devise a hash function
- h(k)=(k+29)%13h(k)= (k+29)\%13h(k)=(k+29)%13
Table size is set to 13
Using the data in the following collection
- {233, 56, 89, 123, 380, 239, 9, 60, 261, 334, 17}
- Draw the hash table by using the quadratic probing way
- Draw the hash table by using the chaining way
How to calculate the average successful access and unsuccessful access steps on this hash table?

Question3#

What are the features of the Binary Tree, the Complete Binary Tree and the Binary Search Tree?
Insert the following name into an empty Binary Search Tree without considering balancing it.
- “Thor”，“BalckPanther”，“StarLord”，“Mantis”，“Gamora”，“Strange”，“Groot”，“IronMan”，“Hulk”，“Falcon”，“AntMan”
Please draw the tree out.
Write down the values held in the nodes visited in searching in your tree for the name “IronMan”.

Question4#

The time complexity of the following sorting algorithms
- Insertion sorting
- Selection sorting
- Bubble sorting
- Quick Sorting
How to implement the selection sorting and insertion sorting algorithms?

Question5#

Using Dijkstra’s algorithm to find the shortest path from A to E, showing the progress of path finding.
State the traverse sequence of nodes by using DFT and BFT, starting from A.

Question6#

Please compare the data structures learned in this semester, and list the scenarios these data structures are suitable for.

Path finding Exercises

Thu, 14 May 2026 00:00:00 GMT

Path finding Exercises#

Consider the graph shown above. The links are annotated to show their cost (for instance the link between D and G has a cost 6). The figures in brackets next to the nodes represent heuristic estimates of the distance from those nodes to the node G (don’t worry about how we arrived at these estimates, we just did). Assume that the method we use never overestimates the distance to G (i.e. it is admissible).

Exercise 1#

Using a similar notation to that used in the lecture, show the sequence of steps by which Dijkstra’s algorithm would calculate the shortest path from A to G. Note that you do not need to make use of the heuristics to answer this part of the question. If you have a choice about which node is at the front of the “Open” set priority queue (because two nodes have the same g-value) then pick the one that comes lowest in the alphabet.

Exercise 2#

Now show the sequence of steps by which the A* algorithm would calculate the shortest path.

Reference Answer#

pathFinding.java展开收起

1
// Command-line flags:
2
// -g <graphFile>: specify a graph file (format: each non-empty non-comment line: FROM TO WEIGHT)
3
// -h <heuristicFile>: specify a heuristic file (format: each non-empty non-comment line: NODE H)
4
// If no files provided, uses built-in graph and heuristics from the diagram in the lecture slides.
5
import java.util.*;
6
import java.io.*;
7

8
public class pathFinding {
9

10
  static class Edge { String to; int w; Edge(String to, int w){this.to=to;this.w=w;} }
11

12
  // Build the directed graph corresponding to the diagram
13
  private static Map<String, List<Edge>> buildGraph() {
14
    Map<String, List<Edge>> g = new HashMap<>();
15
    for (String name: Arrays.asList("A","B","C","D","E","F","G")) g.put(name, new ArrayList<>());
16

17
    // From diagram (directed): A->B(2), A->C(2), A->D(1)
18
    g.get("A").add(new Edge("B",2));
19
    g.get("A").add(new Edge("C",2));
20
    g.get("A").add(new Edge("D",1));
21

22
    // B->D(1), B->E(1)
23
    g.get("B").add(new Edge("D",1));
24
    g.get("B").add(new Edge("E",1));
25

26
    // C->D(1), C->F(2)
27
    g.get("C").add(new Edge("D",1));
28
    g.get("C").add(new Edge("F",2));
29

30
    // D->G(6)
31
    g.get("D").add(new Edge("G",6));
32

33
    // E->G(3)
34
    g.get("E").add(new Edge("G",3));
35

36
    // F->G(1)
37
    g.get("F").add(new Edge("G",1));
38

39
    return g;
40
  }
41

42
  // Utility: produce the Open list ordered by (g, alphabetical) for printing
43
  private static String formatOpen(Map<String,Integer> dist, Set<String> closed) {
44
    List<String> nodes = new ArrayList<>();
45
    for (String n: dist.keySet()) if (!closed.contains(n) && dist.get(n) < Integer.MAX_VALUE) nodes.add(n);
46
    nodes.sort((x,y)->{
47
      int dx = dist.get(x), dy = dist.get(y);
48
      if (dx!=dy) return Integer.compare(dx,dy);
49
      return x.compareTo(y);
50
    });
51
    StringBuilder sb = new StringBuilder("{");
52
    for (int i=0;i<nodes.size();i++){
53
      String n = nodes.get(i);
54
      sb.append(n).append("(").append(dist.get(n)).append(")");
55
      if (i<nodes.size()-1) sb.append(", ");
56
    }
57
    sb.append("}");
58
    return sb.toString();
59
  }
60

61
  // Dijkstra with verbose trace
62
  private static void dijkstraTrace(Map<String,List<Edge>> graph, String start, String goal) {
63
    // distances and parents
64
    Map<String,Integer> dist = new HashMap<>();
65
    Map<String,String> parent = new HashMap<>();
66
    for (String v: graph.keySet()) { dist.put(v, Integer.MAX_VALUE); parent.put(v, null); }
67
    dist.put(start, 0);
68

69
    // Priority queue entries; comparator by (dist, name) using current dist map for tie-breaking
70
    PriorityQueue<String> pq = new PriorityQueue<>((x,y)->{
71
      int dx = dist.get(x), dy = dist.get(y);
72
      if (dx!=dy) return Integer.compare(dx,dy);
73
      return x.compareTo(y);
74
    });
75
    pq.add(start);
76

77
    Set<String> closed = new LinkedHashSet<>();
78

79
    System.out.println("Initial state:");
80
    System.out.println("g("+start+")=0; all others = ∞");
81
    System.out.println("Open = {"+start+"(0)}; Closed = {}");
82
    System.out.println();
83

84
    while (!pq.isEmpty()){
85
      String u = pq.poll();
86
      // skip stale entries: if u already closed or its dist is infinite, continue
87
      if (closed.contains(u)) continue;
88
      if (dist.get(u)==Integer.MAX_VALUE) continue;
89

90
      // Pop u
91
      System.out.println("Pop " + u + " (g=" + dist.get(u) + ")");
92
      closed.add(u);
93

94
      // Relax neighbors
95
      for (Edge e: graph.get(u)){
96
        String v = e.to; int w = e.w;
97
        int tentative = dist.get(u) + w;
98
        System.out.print("  Relax "+u+" -> "+v+" (w="+w+"): ");
99
        if (tentative < dist.get(v)){
100
          System.out.println("update g("+v+") from " + (dist.get(v)==Integer.MAX_VALUE?"∞":dist.get(v)) + " to " + tentative + ", parent("+v+")="+u);
101
          dist.put(v, tentative);
102
          parent.put(v, u);
103
          pq.remove(v); // remove stale if present
104
          pq.add(v);
105
        } else {
106
          System.out.println("no update (tentative="+tentative+", current=" + (dist.get(v)==Integer.MAX_VALUE?"∞":dist.get(v)) + ")");
107
        }
108
      }
109

110
      // Print Open and Closed (Open computed from dist/closed for clarity)
111
      String openStr = formatOpen(dist, closed);
112
      System.out.println("  Open = " + openStr + "; Closed = " + closed);
113
      System.out.println();
114

115
      if (u.equals(goal)) break; // stop when goal popped
116
    }
117

118
    if (dist.get(goal)==Integer.MAX_VALUE) {
119
      System.out.println("No path from " + start + " to " + goal);
120
      return;
121
    }
122

123
    // Reconstruct path
124
    List<String> path = new ArrayList<>();
125
    for (String at = goal; at!=null; at = parent.get(at)) path.add(at);
126
    Collections.reverse(path);
127
    System.out.println("Shortest path: " + String.join(" -> ", path) + " with total cost " + dist.get(goal));
128
  }
129

130
    // Heuristics from diagram (admissible)
131
    private static Map<String,Integer> buildHeuristics() {
132
      Map<String,Integer> h = new HashMap<>();
133
      h.put("A", 4);
134
      h.put("B", 4);
135
      h.put("C", 3);
136
      h.put("D", 2);
137
      h.put("E", 2);
138
      h.put("F", 1);
139
      h.put("G", 0);
140
      return h;
141
    }
142

143
    private static String formatOpenAStar(Map<String,Integer> dist, Set<String> closed, Map<String,Integer> h) {
144
      List<String> nodes = new ArrayList<>();
145
      for (String n: dist.keySet()) if (!closed.contains(n) && dist.get(n) < Integer.MAX_VALUE) nodes.add(n);
146
      nodes.sort((x,y)->{
147
        int fx = dist.get(x) + h.getOrDefault(x, 0);
148
        int fy = dist.get(y) + h.getOrDefault(y, 0);
149
        if (fx!=fy) return Integer.compare(fx,fy);
150
        return x.compareTo(y);
151
      });
152
      StringBuilder sb = new StringBuilder("{");
153
      for (int i=0;i<nodes.size();i++){
154
        String n = nodes.get(i);
155
        int gx = dist.get(n);
156
        int hx = h.getOrDefault(n, 0);
157
        int fx = gx + hx;
158
        sb.append(n).append("(").append(gx).append("/"+hx+"="+fx+")");
159
        if (i<nodes.size()-1) sb.append(", ");
160
      }
161
      sb.append("}");
162
      return sb.toString();
163
    }
164

165
    // A* with verbose trace
166
    private static void aStarTrace(Map<String,List<Edge>> graph, Map<String,Integer> h, String start, String goal) {
167
      Map<String,Integer> dist = new HashMap<>();
168
      Map<String,String> parent = new HashMap<>();
169
      for (String v: graph.keySet()) { dist.put(v, Integer.MAX_VALUE); parent.put(v, null); }
170
      dist.put(start, 0);
171

172
      PriorityQueue<String> pq = new PriorityQueue<>((x,y)->{
173
        int fx = (dist.get(x)==Integer.MAX_VALUE?Integer.MAX_VALUE:dist.get(x)+h.get(x));
174
        int fy = (dist.get(y)==Integer.MAX_VALUE?Integer.MAX_VALUE:dist.get(y)+h.get(y));
175
        if (fx!=fy) return Integer.compare(fx,fy);
176
        return x.compareTo(y);
177
      });
178
      pq.add(start);
179

180
      Set<String> closed = new LinkedHashSet<>();
181

182
      System.out.println("A* initial state:");
183
      System.out.println("g("+start+")=0; h("+start+")="+h.getOrDefault(start,0)+"; f="+(0+h.getOrDefault(start,0)));
184
      System.out.println("Open = {"+start+"(0/"+h.getOrDefault(start,0)+"="+(0+h.getOrDefault(start,0))+")}; Closed = {}");
185

186
      System.out.println();
187

188
      while (!pq.isEmpty()){
189
        String u = pq.poll();
190
        if (closed.contains(u)) continue;
191
        if (dist.get(u)==Integer.MAX_VALUE) continue;
192

193
        int fu = dist.get(u) + h.getOrDefault(u,0);
194
        System.out.println("Pop " + u + " (g=" + dist.get(u) + ", h="+h.getOrDefault(u,0)+", f="+fu+")");
195

196
        closed.add(u);
197

198
        if (u.equals(goal)) {
199
          System.out.println("  Goal popped; terminating.");
200
          break;
201
        }
202

203

204

205
        for (Edge e: graph.get(u)){
206
          String v = e.to; int w = e.w;
207
          int tentative = dist.get(u) + w;
208
          int fTent = tentative + h.getOrDefault(v,0);
209
          System.out.print("  Relax "+u+" -> "+v+" (w="+w+"): ");
210
          if (tentative < dist.get(v)){
211
            System.out.println("update g("+v+") from " + (dist.get(v)==Integer.MAX_VALUE?"∞":dist.get(v)) + " to " + tentative + ", h("+v+")="+h.getOrDefault(v,0)+", f="+fTent+", parent("+v+")="+u);
212
            dist.put(v, tentative);
213
            parent.put(v, u);
214
            pq.remove(v);
215
            pq.add(v);
216
          } else {
217
            System.out.println("no update (tentative="+tentative+", current=" + (dist.get(v)==Integer.MAX_VALUE?"∞":dist.get(v)) + ")");
218
          }
219
        }
220

221
        String openStr = formatOpenAStar(dist, closed, h);
222
        System.out.println("  Open = " + openStr + "; Closed = " + closed);
223
        System.out.println();
224
      }
225

226
      if (dist.get(goal)==Integer.MAX_VALUE) {
227
        System.out.println("No path from " + start + " to " + goal);
228
        return;
229
      }
230

231
      List<String> path = new ArrayList<>();
232
      for (String at = goal; at!=null; at = parent.get(at)) path.add(at);
233
      Collections.reverse(path);
234
      System.out.println("A* Shortest path: " + String.join(" -> ", path) + " with total cost " + dist.get(goal));
235
    }
236

237
    // Read graph from a simple text file: each non-empty non-comment line: FROM TO WEIGHT
238
    private static Map<String, List<Edge>> readGraphFromFile(String path) throws Exception {
239
      Map<String,List<Edge>> g = new HashMap<>();
240
      try (BufferedReader br = new BufferedReader(new java.io.FileReader(path))) {
241
        String line;
242
        while ((line = br.readLine())!=null) {
243
          line = line.trim();
244
          if (line.isEmpty() || line.startsWith("#")) continue;
245
          String[] parts = line.split("\\s+");
246
          if (parts.length < 3) throw new IllegalArgumentException("Invalid graph line: '"+line+"' (expected: FROM TO WEIGHT)");
247
          String from = parts[0];
248
          String to = parts[1];
249
          int w = Integer.parseInt(parts[2]);
250
          g.putIfAbsent(from, new ArrayList<>());
251
          g.putIfAbsent(to, new ArrayList<>());
252
          g.get(from).add(new Edge(to, w));
253
        }
254
      }
255
      return g;
256
    }
257

258
    // Read heuristics file: each non-empty non-comment line: NODE H
259
    private static Map<String,Integer> readHeuristics(String path) throws Exception {
260
      Map<String,Integer> h = new HashMap<>();
261
      try (BufferedReader br = new BufferedReader(new java.io.FileReader(path))) {
262
        String line;
263
        while ((line = br.readLine())!=null) {
264
          line = line.trim();
265
          if (line.isEmpty() || line.startsWith("#")) continue;
266
          String[] parts = line.split("\\s+");
267
          if (parts.length < 2) throw new IllegalArgumentException("Invalid heuristic line: '"+line+"' (expected: NODE H)");
268
          String node = parts[0];
269
          int val = Integer.parseInt(parts[1]);
270
          h.put(node, val);
271
        }
272
      }
273
      return h;
274
    }
275

276
  public static void main(String[] args) {
277
    // Determine input sources: support command-line flags:
278
    // -g <graphFile> -h <heuristicFile>
279
    String graphFile = null;
280
    String heurFile = null;
281
    for (int i=0;i<args.length;i++){
282
      if ("-g".equals(args[i]) && i+1<args.length) { graphFile = args[++i]; }
283
      else if ("--graph".equals(args[i]) && i+1<args.length) { graphFile = args[++i]; }
284
      else if ("-h".equals(args[i]) && i+1<args.length) { heurFile = args[++i]; }
285
      else if ("--heuristic".equals(args[i]) && i+1<args.length) { heurFile = args[++i]; }
286
    }
287

288
    Map<String,List<Edge>> graph;
289
    Map<String,Integer> h = null;
290
    if (graphFile!=null) {
291
      try {
292
        graph = readGraphFromFile(graphFile);
293
        System.out.println("Loaded graph from: " + graphFile);
294
      } catch (Exception e) {
295
        System.err.println("Failed to read graph file '"+graphFile+"': "+e.getMessage());
296
        System.err.println("Falling back to default graph.");
297
        graph = buildGraph();
298
      }
299
    } else {
300
      graph = buildGraph();
301
      System.out.println("Using default graph built into program.");
302
    }
303

304
    if (heurFile!=null) {
305
      try {
306
        h = readHeuristics(heurFile);
307
        System.out.println("Loaded heuristics from: " + heurFile);
308
      } catch (Exception e) {
309
        System.err.println("Failed to read heuristic file '"+heurFile+"': "+e.getMessage());
310
        System.err.println("Falling back to default heuristics (if available).");
311
        h = buildHeuristics();
312
      }
313
    } else {
314
      // If no heuristic file provided, use default heuristics when running A*; otherwise A* will still run but with missing nodes defaulting to 0
315
      h = buildHeuristics();
316
      System.out.println("Using default heuristics built into program.");
317
    }
318

319
    // Run Dijkstra from A to G and print detailed trace
320
    dijkstraTrace(graph, "A", "G");
321

322
    System.out.println();
323
    // Run A* from A to G and print detailed trace
324
    aStarTrace(graph, h, "A", "G");
325
  }
326
}

展开收起

sample_graph.txt

1
# Sample graph matching the diagram
2
# Format: FROM TO WEIGHT
3
A B 2
4
A C 2
5
A D 1
6
B D 1
7
B E 1
8
C D 1
9
C F 2
10
D G 6
11
E G 3
12
F G 1

sample_heuristics.txt

1
# Sample heuristics matching the diagram
2
# Format: NODE H
3
A 4
4
B 4
5
C 3
6
D 2
7
E 2
8
F 1
9
G 0

Foundations of Security Week10 Lecture

Wed, 13 May 2026 00:00:00 GMT

Lecture Outline#

Introduction to the Advanced Encryption Standard (AES)
Basic characteristics of AES encryption
AES block size and key sizes
Subkeys Generations
AES round transformations
SubBytes transformation using S-box
ShiftRows transformation
MixColumns transformation

Learning Outcomes#

By the end of this lecture, students should be able to:

Explain why AES replaced DES as a modern encryption standard
Identify the block size and supported key lengths of AES
Explain how plaintext is represented as a state matrix in AES
Describe the four main AES transformations (SubBytes, ShiftRows, MixColumns, AddRoundKey)
Explain how AES encryption rounds operate

Advanced Encryption Standard (AES)#

How it works#

Key Expansion: The original key (e.g., 128 bits) is expanded into a set of “round keys” used in each step of the encryption. This ensures the key evolves throughout the process, adding complexity.
Initial Round: The input data (a 16-byte block) is combined with the first round key using a bitwise XOR operation.
Main Rounds: It applies a series of transformations to the data in multiple rounds (10 rounds for 128-bit keys, 12 for 192-bit, 14 for 256-bit). Each round consists of four steps:
- SubBytes: Each byte in the block is replaced with another byte according to a predefined substitution table (S-box).
- ShiftRows: The rows of the data block (visualized as a 4x4 grid) are shifted to the left by different amounts.
- MixColumns: The columns of the grid are mixed using a mathematical operation, further scrambling the data.
- AddRoundKey: The current round key is XORed with the block, integrating the key into the process.
Final Round: The last round skips the MixColumns step but includes SubBytes, ShiftRows, and AddRoundKey to finalize the encryption.

Key Expansion#

Key Expansion takes the original 128-bit key and expands it into a larger set of keys (called round keys) that AES uses in its encryption rounds. Here we will choose key “cdutobufoscourse”
For AES-128, which uses 10 rounds of encryption, the process generates 11 round keys (one for the initial round and one for each of the 10 main rounds).
Each round key is 128 bits (16 bytes), so the total expanded key is 176 bytes (11 rounds ×\times× 16 bytes).

Key in text=cdutobufoscourseKey in 128 bits=01100011 01100100 01110101 01110100 01101111 0110001001110101 01100110 01101111 01110011 01100011 0110111101110101 01110010 01110011 01100101Key in hexadecimal=636475746F6275666F73636F75727365cdutobufoscourse\begin{array}{ll} % 核心修改：替换 @{} 为标准两列左对齐 % 第一行：直接在文本后加 \quad=\quad 实现原间隔效果 \text{Key in text} \hspace{4.4em}\quad=\quad & \text{\textcolor{red}{cdutobufoscourse}} \\[0.6em] % 第二-四行：保持对齐 \text{Key in 128 bits} \hspace{2.8em}\quad=\quad & 01100011\ \textcolor{red}{01100100}\ 01110101\ \textcolor{red}{01110100}\ 01101111\ \textcolor{red}{01100010} \\ & 01110101\ \textcolor{red}{01100110}\ 01101111\ \textcolor{red}{01110011}\ 01100011\ \textcolor{red}{01101111} \\ & 01110101\ \textcolor{red}{01110010}\ 01110011\ \textcolor{red}{01100101} \\[0.6em] % 核心修改：*{16}{c} -> 16个c \text{Key in hexadecimal} \hspace{0.8em}\quad=\quad & \begin{array}{cccccccccccccccc} 63 & \textcolor{red}{64} & 75 & \textcolor{red}{74} & 6F & \textcolor{red}{62} & 75 & \textcolor{red}{66} & 6F & \textcolor{red}{73} & 63 & \textcolor{red}{6F} & 75 & \textcolor{red}{72} & 73 & \textcolor{red}{65} \\ \textcolor{red}{c} & \textcolor{red}{d} & \textcolor{red}{u} & \textcolor{red}{t} & \textcolor{red}{o} & \textcolor{red}{b} & \textcolor{red}{u} & \textcolor{red}{f} & \textcolor{red}{o} & \textcolor{red}{s} & \textcolor{red}{c} & \textcolor{red}{o} & \textcolor{red}{u} & \textcolor{red}{r} & \textcolor{red}{s} & \textcolor{red}{e} \end{array} \end{array}Key in text=Key in 128 bits=Key in hexadecimal=cdutobufoscourse01100011 01100100 01110101 01110100 01101111 0110001001110101 01100110 01101111 01110011 01100011 0110111101110101 01110010 01110011 0110010163c64d75u74t6Fo62b75u66f6Fo73s63c6Fo75u72r73s65e

The original key is 4 words (16 bytes ÷\div÷ 4 = 4 words).
The total expanded key is 44 words (11 rounds ×\times× 4 words per round).
So, the Key Expansion generates 44 words (labeled W0\textcolor{red}{W_0}W0 to W43\textcolor{red}{W_{43}}W43), where:
W0\textcolor{red}{W_0}W0 to W3\textcolor{red}{W_3}W3 are the original key.
W4\textcolor{red}{W_4}W4 to W43\textcolor{red}{W_{43}}W43 are derived iteratively.

W4=W0⊕g(W3)W5=W4⊕W1W6=W5⊕W2W7=W6⊕W3\begin{align} \textcolor{red}{W_4} &= \textcolor{red}{W_0} \textcolor{purple}\oplus \textcolor{blue}{g(}\textcolor{red}{W_3}\textcolor{blue}) \\ \textcolor{red}{W_5} &= \textcolor{red}{W_4} \textcolor{purple}\oplus \textcolor{red}{W_1} \\ \textcolor{red}{W_6} &= \textcolor{red}{W_5} \textcolor{purple}\oplus \textcolor{red}{W_2} \\ \textcolor{red}{W_7} &= \textcolor{red}{W_6} \textcolor{purple}\oplus \textcolor{red}{W_3} \\ \end{align}W4W5W6W7=W0⊕g(W3)=W4⊕W1=W5⊕W2=W6⊕W3Round 1 (R1)=W4,W5,W6,W7Round 2 (R2)=W8,W9,W10,W11Round 3 (R3)=W12,W13,W14,W15\begin{align} \textcolor{blue}{\text{Round 1 (R1)}} &\textcolor{blue}= \textcolor{red}{W_4}\textcolor{blue}, \textcolor{red}{W_5}\textcolor{blue}, \textcolor{red}{W_6}\textcolor{blue}, \textcolor{red}{W_7} \\ \textcolor{blue}{\text{Round 2 (R2)}} &\textcolor{blue}= \textcolor{red}{W_8}\textcolor{blue}, \textcolor{red}{W_9}\textcolor{blue}, \textcolor{red}{W_{10}}\textcolor{blue}, \textcolor{red}{W_{11}} \\ \textcolor{blue}{\text{Round 3 (R3)}} &\textcolor{blue}= \textcolor{red}{W_{12}}\textcolor{blue}, \textcolor{red}{W_{13}}\textcolor{blue}, \textcolor{red}{W_{14}}\textcolor{blue}, \textcolor{red}{W_{15}} \end{align}Round 1 (R1)Round 2 (R2)Round 3 (R3)=W4,W5,W6,W7=W8,W9,W10,W11=W12,W13,W14,W15

Function g\textcolor{blue}{g}g#

W4=W0⊕g(W3)‾\colorbox{#FBE5D6}{$\textcolor{red}{W_4} = \textcolor{red}{W_0} \textcolor{purple}\oplus \underline{\textcolor{blue}{g(}\textcolor{red}{W_3}\textcolor{blue})}$}W4=W0⊕g(W3)

RotWord: Performs a one byte left circular shift on a word. This means that an input word [b1,b2,b3,b4][\textcolor{red}{b_1}, \textcolor{red}{b_2}, \textcolor{red}{b_3}, \textcolor{red}{b_4}][b1,b2,b3,b4] transform into [b2,b3,b4,b1][\textcolor{red}{b_2}, \textcolor{red}{b_3}, \textcolor{red}{b_4}, \textcolor{red}{b_1}][b2,b3,b4,b1].
SubWord Apply the AES S-box substitution to each byte of the rotated word. This performs a byte substitution on each byte. The first bit represents the row number in S-Box and the second bit represents the column number in S-Box
Rcon: XOR the result from the subword operation with a round constant (Rcon). This is a fix table.

g(W3)\textcolor{blue}{g(}\textcolor{red}{W_3}\textcolor{blue})g(W3)

RotWord: Performs a one byte left circular shift on a word. This means that an input word [b1,b2,b3,b4][\textcolor{red}{b_1}, \textcolor{red}{b_2}, \textcolor{red}{b_3}, \textcolor{red}{b_4}][b1,b2,b3,b4] transform into [b2,b3,b4,b1][\textcolor{red}{b_2}, \textcolor{red}{b_3}, \textcolor{red}{b_4}, \textcolor{red}{b_1}][b2,b3,b4,b1].

SubWord: Apply the AES S-box substitution to each byte of the rotated word. This performs a byte substitution on each byte. The first bit represents the row number in S-Box and the second bit represents the column number in S-Box

W₃

RotWord
(X1)

→

Row	Column
7	2
7	3
6	5
7	5

→

SubWord
(Y1)

AES S-box
	00	01	02	03	04	05	06	07	08	09	0A	0B	0C	0D	0E	0F
00	63	7C	77	7B	F2	6B	6F	C5	30	01	67	2B	FE	D7	AB	76
10	CA	82	C9	7D	FA	59	47	F0	AD	D4	A2	AF	9C	A4	72	C0
20	B7	FD	93	26	36	3F	F7	CC	34	A5	E5	F1	71	D8	31	15
30	04	C7	23	C3	18	96	05	9A	07	12	80	E2	EB	27	B2	75
40	09	83	2C	1A	1B	6E	5A	A0	52	3B	D6	B3	29	E3	2F	84
50	53	D1	00	ED	20	FC	B1	5B	6A	CB	BE	39	4A	4C	58	CF
60	D0	EF	AA	FB	43	4D	33	85	45	F9	02	7F	50	3C	9F	A8
70	51	A3	40	8F	92	9D	38	F5	BC	B6	DA	21	10	FF	F3	D2
80	CD	0C	13	EC	5F	97	44	17	C4	A7	7E	3D	64	5D	19	73
90	60	81	4F	DC	22	2A	90	88	46	EE	B8	14	DE	5E	0B	DB
A0	E0	32	3A	0A	49	06	24	5C	C2	D3	AC	62	91	95	E4	79
B0	E7	C8	37	6D	8D	D5	4E	A9	6C	56	F4	EA	65	7A	AE	08
C0	BA	78	25	2E	1C	A6	B4	C6	E8	DD	74	1F	4B	BD	8B	8A
D0	70	3E	B5	66	48	03	F6	0E	61	35	57	B9	86	C1	1D	9E
E0	E1	F8	98	11	69	D9	8E	94	9B	1E	87	E9	CE	55	28	DF
F0	8C	A1	89	0D	BF	E6	42	68	41	99	2D	0F	B0	54	BB	16

Quiz#

Compute the RotWord (X1) and Subword (Y1) of W3W_3W3 below.

W₃

Waiting…

W₃

RotWord
(X1)

→

Row	Column
6	9
6	e
6	7
7	2

→

SubWord
(Y1)

Rcon: XOR the result Y1 with a round constant (Rcon).

W₃

RotWord
(X1)

SubWord
(Y1)

⊕

Rcon
(R1)

g (W₃)

Round Constant Table
Round	Byte 1	Byte 2	Byte 3	Byte 4
R1	01	00	00	00
R2	02	00	00	00
R3	04	00	00	00
R4	08	00	00	00
R5	10	00	00	00
R6	20	00	00	00
R7	40	00	00	00
R8	80	00	00	00
R9	1B	00	00	00
R10	36	00	00	00

Y1=40 8F 4D 9D=01000000 10001111 01001101 10011101\colorbox{#DEEBF7}{$\textcolor{red}{\text{Y1}} = \textcolor{blue}{40~8F~4D~9D} = 01000000~10001111~01001101~10011101$}Y1=40 8F 4D 9D=01000000 10001111 01001101 10011101 ⊕\textcolor{purple}\oplus⊕ R1=01 00 00 00=00000001 00000000 00000000 00000000\colorbox{#FFF2CC}{$\textcolor{red}{\text{R1}} = \textcolor{blue}{01~00~00~00} = 00000001~00000000~00000000~00000000$}R1=01 00 00 00=00000001 00000000 00000000 00000000

g(W3)=01000001 10001111 01001101 10011101\colorbox{#E2F0D9}{$\textcolor{red}{g(W_3)}= 01000001~10001111~01001101~10011101$}g(W3)=01000001 10001111 01001101 10011101 g(W3)=418F4D9D\colorbox{#E2F0D9}{$\textcolor{red}{g(W_3)}=\hspace{3em}41\hspace{3em}8F\hspace{3em}4D\hspace{3em}9D$}g(W3)=418F4D9D

41 8F 4D 9D

Conversion to Binary#

Hexadecimal	Decimal	Binary (4 bits)
`0`	`0`	`0000`
`1`	`1`	`0001`
`2`	`2`	`0010`
`3`	`3`	`0011`
`4`	`4`	`0100`
`5`	`5`	`0101`
`6`	`6`	`0110`
`7`	`7`	`0111`
`8`	`8`	`1000`
`9`	`9`	`1001`
`A`	`10`	`1010`
`B`	`11`	`1011`
`C`	`12`	`1100`
`D`	`13`	`1101`
`E`	`14`	`1110`
`F`	`15`	`1111`

40 = 0100 0000
9D = 1001 1101

Key Expansion#

Initial Round (AddRoundKey)#

Message
128-bits

Message in text=oursecretmessageMessage in 128 bits=01101111 01110101 01110010 01110011 01100101 0110001101110010 01100101 01110100 01101101 01100101 0111001101110011 01100001 01100111 01100101Message in hexadecimal=6F75727365637265746D657373616765oursecretmessage\begin{array}{ll} % 文本行：完整红色高亮 \text{Message in text} \hspace{4.4em}= & \text{\textcolor{red}{oursecretmessage}} \\[0.6em] % 128位二进制：分行排版，等号对齐 \text{Message in 128 bits} \hspace{2.8em}= & 01101111\ 01110101\ 01110010\ 01110011\ 01100101\ 01100011 \\ & 01110010\ 01100101\ 01110100\ 01101101\ 01100101\ 01110011 \\ & 01110011\ 01100001\ 01100111\ 01100101 \\[0.6em] % 十六进制+字母：顶部对齐，逐列垂直对应 \text{Message in hexadecimal} \hspace{0.8em}= & \begin{array}{cccccccccccccccc} 6\text{F} & 75 & 72 & 73 & 65 & 63 & 72 & 65 & 74 & 6\text{D} & 65 & 73 & 73 & 61 & 67 & 65 \\ \textcolor{red}{o} & \textcolor{red}{u} & \textcolor{red}{r} & \textcolor{red}{s} & \textcolor{red}{e} & \textcolor{red}{c} & \textcolor{red}{r} & \textcolor{red}{e} & \textcolor{red}{t} & \textcolor{red}{m} & \textcolor{red}{e} & \textcolor{red}{s} & \textcolor{red}{s} & \textcolor{red}{a} & \textcolor{red}{g} & \textcolor{red}{e} \end{array} \end{array}Message in text=Message in 128 bits=Message in hexadecimal=oursecretmessage01101111 01110101 01110010 01110011 01100101 0110001101110010 01100101 01110100 01101101 01100101 0111001101110011 01100001 01100111 011001016Fo75u72r73s65e63c72r65e74t6Dm65e73s73s61a67g65e

Message in hexadecimal=6F 75 72 73 65 63 72 65 74 6D 65 73 73 61 67 65byte{b1 b2 b3 b4 b5 b6 b7 b8 b9 b10 b11 b12 b13 b14 b15 b16\begin{align} \text{Message in hexadecimal} &= 6F~75~72~73~65~63~72~65~74~6D~65~73~73~61~67~65 \\ \textcolor{blue}{\text{byte}} &\textcolor{red}{\hspace{1em}\left\{b_1\ b_2\ b_3\ b_4\ b_5\ b_6\ b_7\ b_8\ b_9\ b_{10}\ b_{11}\ b_{12}\ b_{13}\ b_{14}\ b_{15}\ b_{16}\right.} \end{align}Message in hexadecimalbyte=6F 75 72 73 65 63 72 65 74 6D 65 73 73 61 67 65{b1 b2 b3 b4 b5 b6 b7 b8 b9 b10 b11 b12 b13 b14 b15 b16(b1b5b9b13b2b6b10b14b3b7b11b15b4b8b12b16)⊕(SubKey 0W0W1W2W3 )(6F65747375636D617272656773657365)⊕(636F6F75646273727575637374666F65)=(????????????????????????????????)\begin{align} % 上半部分：符号矩阵与子密钥异或 \begin{pmatrix} b_1 & b_5 & b_9 & b_{13} \\ b_2 & b_6 & b_{10} & b_{14} \\ b_3 & b_7 & b_{11} & b_{15} \\ b_4 & b_8 & b_{12} & b_{16} \end{pmatrix} \quad &\textcolor{purple}{\oplus} \quad \begin{pmatrix} \\ \text{\textcolor{blue}{SubKey 0}} \\[0.1em] \begin{array}{|c|c|c|c|} \hline \textcolor{red}{W_0} & \textcolor{red}{W_1} & \textcolor{red}{W_2} & \textcolor{red}{W_3} \\ \hline \end{array} \\ ~ \end{pmatrix} \\ \\ % 下半部分：十六进制矩阵异或运算 \begin{pmatrix} 6\text{F} & 65 & 74 & 73 \\ 75 & 63 & 6\text{D} & 61 \\ 72 & 72 & 65 & 67 \\ 73 & 65 & 73 & 65 \end{pmatrix} \quad &\textcolor{purple}{\oplus} \quad \begin{pmatrix} 63 & 6\text{F} & 6\text{F} & 75 \\ 64 & 62 & 73 & 72 \\ 75 & 75 & 63 & 73 \\ 74 & 66 & 6\text{F} & 65 \end{pmatrix} \quad \textcolor{purple}{=} \quad \begin{pmatrix} ?? & ?? & ?? & ?? \\ ?? & ?? & ?? & ?? \\ ?? & ?? & ?? & ?? \\ ?? & ?? & ?? & ?? \end{pmatrix} \end{align}b1b2b3b4b5b6b7b8b9b10b11b12b13b14b15b166F75727365637265746D657373616765⊕SubKey 0W0W1W2W3 ⊕636475746F6275666F73636F75727365=????????????????????????????????

Main Rounds (Round 1)#

Quiz#

What are the steps in a main round?

Waiting…

Main Rounds - SubBytes#

Each byte in the state matrix/array is replaced using the fixed AES S-box (Substitution box).
For example, a byte like 53 is replaced with ED according to the S-box.

State ArraySubBytes Result(0C0A1B0611011E130707061407031C00)(FE67AF6F827C727DC5C56FFAC57B9C63)\begin{array}{cc} \text{\textcolor{purple}{State Array}} & \text{\textcolor{purple}{SubBytes Result}} \\[1em] \begin{pmatrix} \textcolor{green}{0C} & \textcolor{green}{0A} & \textcolor{green}{1B} & \textcolor{green}{06} \\ \textcolor{green}{11} & \textcolor{green}{01} & \textcolor{green}{1E} & \textcolor{green}{13} \\ \textcolor{green}{07} & \textcolor{green}{07} & \textcolor{green}{06} & \textcolor{green}{14} \\ \textcolor{green}{07} & \textcolor{green}{03} & \textcolor{green}{1C} & \textcolor{green}{00} \end{pmatrix} & \begin{pmatrix} \textcolor{red}{FE} & \textcolor{red}{67} & \textcolor{red}{AF} & \textcolor{red}{6F} \\ \textcolor{red}{82} & \textcolor{red}{7C} & \textcolor{red}{72} & \textcolor{red}{7D} \\ \textcolor{red}{C5} & \textcolor{red}{C5} & \textcolor{red}{6F} & \textcolor{red}{FA} \\ \textcolor{red}{C5} & \textcolor{red}{7B} & \textcolor{red}{9C} & \textcolor{red}{63} \end{pmatrix} \end{array}State Array0C1107070A0107031B1E061C06131400SubBytes ResultFE82C5C5677CC57BAF726F9C6F7DFA63

AES S-box
	00	01	02	03	04	05	06	07	08	09	0A	0B	0C	0D	0E	0F
00	63	7C	77	7B	F2	6B	6F	C5	30	01	67	2B	FE	D7	AB	76
10	CA	82	C9	7D	FA	59	47	F0	AD	D4	A2	AF	9C	A4	72	C0
20	B7	FD	93	26	36	3F	F7	CC	34	A5	E5	F1	71	D8	31	15
30	04	C7	23	C3	18	96	05	9A	07	12	80	E2	EB	27	B2	75
40	09	83	2C	1A	1B	6E	5A	A0	52	3B	D6	B3	29	E3	2F	84
50	53	D1	00	ED	20	FC	B1	5B	6A	CB	BE	39	4A	4C	58	CF
60	D0	EF	AA	FB	43	4D	33	85	45	F9	02	7F	50	3C	9F	A8
70	51	A3	40	8F	92	9D	38	F5	BC	B6	DA	21	10	FF	F3	D2
80	CD	0C	13	EC	5F	97	44	17	C4	A7	7E	3D	64	5D	19	73
90	60	81	4F	DC	22	2A	90	88	46	EE	B8	14	DE	5E	0B	DB
A0	E0	32	3A	0A	49	06	24	5C	C2	D3	AC	62	91	95	E4	79
B0	E7	C8	37	6D	8D	D5	4E	A9	6C	56	F4	EA	65	7A	AE	08
C0	BA	78	25	2E	1C	A6	B4	C6	E8	DD	74	1F	4B	BD	8B	8A
D0	70	3E	B5	66	48	03	F6	0E	61	35	57	B9	86	C1	1D	9E
E0	E1	F8	98	11	69	D9	8E	94	9B	1E	87	E9	CE	55	28	DF
F0	8C	A1	89	0D	BF	E6	42	68	41	99	2D	0F	B0	54	BB	16

Main Rounds - ShiftRows#

It shifts the bytes in each row of the subbytes result to the left by a specific number of positions.

Main Rounds - Mix Columns#

It transforms each column using matrix multiplication in Galois Field (GF(28)\textcolor{blue}{(2^8)}(28)) to ensure that changes to one byte affect all four bytes in the column.
This multiplication is not traditional matrix multiplication.
Each column of the state matrix (consisting of 4 bytes) is treated as a 4-byte vector and is multiplied by a fixed 4 ×\times× 4 matrix
This is done in GF(28)(2^8)(28) using modulo operations with the irreducible polynomial x8+x4+x3+x+1x^8+x^4+x^3+x+1x8+x4+x3+x+1

Reading Assignment and Optional Group Presentation#

Next Lecture
What is a Galois Field?
How to compute addition and multiplication in Galois Field (GF).

Foundations of Security Week9 Lecture

Tue, 12 May 2026 00:00:00 GMT

Lecture Outline#

Review of DES 16-round encryption process - Final Part
S-box substitution in DES
P-box permutation in DES
Generating the final DES ciphertext
Security limitations of DES
Introduction to Advanced Encryption Standard (AES)

Learning Outcomes#

By the end of this lecture, students should be able to:

Perform basic S-box calculations in DES encryption
Perform the P-box permutation in DES
Understand how the final ciphertext is generated in DES
Explain why DES was replaced by AES
Describe the key characteristics of AES encryption
Explain the main transformation steps used in AES encryption

Data Encryption Standard (DES)#

S-boxes (Substitution)#

16 Rounds of Processing - Subkey Mixing#

F(R0,K1)⟶F(E(R0),K1)F(\textcolor{blue}{R_0}, \textcolor{blue}{K_1}) \textcolor{purple}\longrightarrow F(\textcolor{red}{E(R_0)}, \textcolor{blue}{K_1})F(R0,K1)⟶F(E(R0),K1)

E(R0)⊕K1E(R_0) \oplus K_1E(R0)⊕K1 E(R0)=011110 100001 010101 010101 011110 100001 010101 010101\colorbox{#FFF2CC}{$\textcolor{red}{E(R_0)} \textcolor{black}{= 011110 ~ 100001 ~ 010101 ~ 010101 ~ 011110 ~ 100001 ~ 010101 ~ 010101}$}E(R0)=011110 100001 010101 010101 011110 100001 010101 010101
⊕\textcolor{purple}\oplus⊕
K1=000110 110000 001011 101111 111111 000111 000001 110010\colorbox{#E2F0D9}{$\textcolor{red}{K_1} \textcolor{black}{= 000110 ~ 110000 ~ 001011 ~ 101111 ~ 111111 ~ 000111 ~ 000001 ~ 110010}$}K1=000110 110000 001011 101111 111111 000111 000001 110010
E(R0)⊕K1=011000 010001 011110 111010 100001 100110 010100 100111\colorbox{#FBE5D6}{$\textcolor{black}{E(R_0) \oplus K_1 = 011000 ~ 010001 ~ 011110 ~ 111010 ~ 100001 ~ 100110 ~ 010100 ~ 100111}$}E(R0)⊕K1=011000 010001 011110 111010 100001 100110 010100 100111

16 Rounds of Processing - S-boxes (Substitution)#

The 48-bit result is divided into eight 6-bit chunks. Each chunk is passed through one of eight S-boxes (lookup tables), which map 6 bits to 4 bits, reducing the total to 32 bits (8×4=328 \times 4 = 328×4=32).

We now compute

S₁(B₁) S₂(B₂) S₃(B₃) S₄(B₄) S₅(B₅) S₆(B₆) S₇(B₇) S₈(B₈)

S-box 1 (S₁)

14	4	13	1	2	15	11	8	3	10	6	12	5	9	0	7
0	15	7	4	14	2	13	1	10	6	12	11	9	5	3	8
4	1	14	8	13	6	2	11	15	12	9	7	3	10	5	0
15	12	8	2	4	9	1	7	5	11	3	14	10	0	6	13

S₁

14	4	13	1	2	15	11	8	3	10	6	12	5	9	0	7
0	15	7	4	14	2	13	1	10	6	12	11	9	5	3	8
4	1	14	8	13	6	2	11	15	12	9	7	3	10	5	0
15	12	8	2	4	9	1	7	5	11	3	14	10	0	6	13

S₂

15	1	8	14	6	11	3	4	9	7	2	13	12	0	5	10
3	13	4	7	15	2	8	14	12	0	1	10	6	9	11	5
0	14	7	11	10	4	13	1	5	8	12	6	9	3	2	15
13	8	10	1	3	15	4	2	11	6	7	12	0	5	14	9

S₃

10	0	9	14	6	3	15	5	1	13	12	7	11	4	2	8
13	7	0	9	3	4	6	10	2	8	5	14	12	11	15	1
13	6	4	9	8	15	3	0	11	1	2	12	5	10	14	7
1	10	13	0	6	9	8	7	4	15	14	3	11	5	2	12

S₄

7	13	14	3	0	6	9	10	1	2	8	5	11	12	4	15
13	8	11	5	6	15	0	3	4	7	2	12	1	10	14	9
10	6	9	0	12	11	7	13	15	1	3	14	5	2	8	4
3	15	0	6	10	1	13	8	9	4	5	11	12	7	2	14

S₅

2	12	4	1	7	10	11	6	8	5	3	15	13	0	14	9
14	11	2	12	4	7	13	1	5	0	15	10	3	9	8	6
4	2	1	11	10	13	7	8	15	9	12	5	6	3	0	14
11	8	12	7	1	14	2	13	6	15	0	9	10	4	5	3

S₆

12	1	10	15	9	2	6	8	0	13	3	4	14	7	5	11
10	15	4	2	7	12	9	5	6	1	13	14	0	11	3	8
9	14	15	5	2	8	12	3	7	0	4	10	1	13	11	6
4	3	2	12	9	5	15	10	11	14	1	7	6	0	8	13

S₇

4	11	2	14	15	0	8	13	3	12	9	7	5	10	6	1
13	0	11	7	4	9	1	10	14	3	5	12	2	15	8	6
1	4	11	13	12	3	7	14	10	15	6	8	0	5	9	2
6	11	13	8	1	4	10	7	9	5	0	15	14	2	3	12

S₈

13	2	8	4	6	15	11	1	10	9	3	14	5	0	12	7
1	15	13	8	10	3	7	4	12	5	6	11	0	14	9	2
7	11	4	1	9	12	14	2	0	6	10	13	15	3	5	8
2	1	14	7	4	10	8	13	15	12	9	0	3	5	6	11

16 Rounds of Processing - S-boxes (Substitution):

Step-by-Step Example: Compute S1(B1)\textcolor{red}{S_1}(B_1)S1(B1)
If B1=011000B_1 = \textcolor{green}0\textcolor{purple}{1100}\textcolor{green}0B1=011000

To compute S1(B1)S_1(B_1)S1(B1):

➤ First, determine the row number by using the first and last bits of B1B_1B1:
0\textcolor{green}00 (first bit) and 0\textcolor{green}00 (last bit) →\rightarrow→ Row = 002\textcolor{green}{00}_2002. Convert to decimal = 0\textcolor{green}00

➤ Next, determine the column number using the middle 4 bits of B1B_1B1:
Bits = 1100\textcolor{purple}{1100}1100 →\rightarrow→ Column = 110021100_211002 . Convert to decimal = 12\textcolor{purple}{12}12

➤ From the S₁-box table, the value at row 0 and column 12 is 5. Convert to binary = 010101010101. Therefore, S1(B1)=0101\textcolor{red}{S_1}(B_1) = 0101S1(B1)=0101

	Column
	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15
S-box 1 (S₁)
Row	0		14	4	13	1	2	15	11	8	3	10	6	12	5	9	0	7
	1		0	15	7	4	14	2	13	1	10	6	12	11	9	5	3	8
	2		4	1	14	8	13	6	2	11	15	12	9	7	3	10	5	0
	3		15	12	8	2	4	9	1	7	5	11	3	14	10	0	6	13

Computing all S-boxes

S1(B1)S2(B2)S3(B3)S4(B4)S5(B5)S6(B6)S7(B7)S8(B8)010111001000XXXXXXXXXXXXXXXXXXXX\begin{array}{cccccccc} % 8列居中对齐：*{8}{c} = 8列 + 居中（c=center） \color{red}S_1\color{black}(B_1) & \color{red}S_2\color{black}(B_2) & \color{red}S_3\color{black}(B_3) & \color{red}S_4\color{black}(B_4) & \color{red}S_5\color{black}(B_5) & \color{red}S_6\color{black}(B_6) & \color{red}S_7\color{black}(B_7) & \color{red}S_8\color{black}(B_8) \\ 0101 & \color{red}1100 & 1000 & \color{red}\text{XXXX} & \text{XXXX} & \color{red}\text{XXXX} & \text{XXXX} & \color{red}\text{XXXX} \\ \end{array}S1(B1)0101S2(B2)1100S3(B3)1000S4(B4)XXXXS5(B5)XXXXS6(B6)XXXXS7(B7)XXXXS8(B8)XXXX

P-box (Permutation)#

16 Rounds of Processing - P-box (Permutation):#

P-box (Permutation): The 32-bit S-box output is permuted using a fixed permutation table (P-box).

16 Rounds of Processing

L0=1100 1100 0000 0000 1100 1100 1111 1111\textcolor{red}{L_0} = 1100~1100~0000~0000~1100~1100~1111~1111L0=1100 1100 0000 0000 1100 1100 1111 1111
R0=1111 0000 1010 1010 1111 0000 1010 1010\textcolor{red}{R_0} = 1111~0000~1010~1010~1111~0000~1010~1010R0=1111 0000 1010 1010 1111 0000 1010 1010

We have
K1=000110 110000 001011 101111 111111 000111 000001 110010} 48-bit\colorbox{#E2F0D9}{$\textcolor{red}{K_1} = 000110~110000~001011~101111~111111~000111~000001~110010$} \hspace{1em}\textcolor{red}\}\text{~48-bit}K1=000110 110000 001011 101111 111111 000111 000001 110010} 48-bit L1=R0=1111 0000 1010 1010 1111 0000 1010 1010} 32-bit\colorbox{#E7E6E6}{$\textcolor{red}{L_1 = R_0} = 1111~0000~1010~1010~1111~0000~1010~1010$}\hspace{1em}\textcolor{red}\}\text{~32-bit}L1=R0=1111 0000 1010 1010 1111 0000 1010 1010} 32-bit R1=L0⊕F(R0,K1)\colorbox{#FBE5D6}{$\textcolor{red}{R_1} = \textcolor{red}{L_0} \textcolor{purple}\oplus F(R_0, K_1)$}R1=L0⊕F(R0,K1)

L0=1100 1100 0000 0000 1100 1100 1111 1111R0=1111 0000 1010 1010 1111 0000 1010 1010L1=R0=1111 0000 1010 1010 1111 0000 1010 1010F(R0,K1)=0010 0011 0100 1010 1010 1001 1011 1011}32-bit\left. \begin{aligned} \textcolor{red}{L_0} = 1100\ 1100\ 0000\ 0000\ 1100\ 1100\ 1111\ 1111 \\ \textcolor{red}{R_0} = 1111\ 0000\ 1010\ 1010\ 1111\ 0000\ 1010\ 1010 \\ \colorbox{#E7E6E6}{$\textcolor{red}{L_1} = \textcolor{red}{R_0} = 1111\ 0000\ 1010\ 1010\ 1111\ 0000\ 1010\ 1010$} \\ \colorbox{#E2F0D9}{$F(\textcolor{blue}{R_0}, \textcolor{blue}{K_1}) = 0010\ \textcolor{red}{0011}\ 0100\ \textcolor{red}{1010}\ 1010\ \textcolor{red}{1001}\ 1011\ \textcolor{red}{1011}$} \end{aligned} \color{red}\right\} \textcolor{red}{32\text{-bit}}L0=1100 1100 0000 0000 1100 1100 1111 1111R0=1111 0000 1010 1010 1111 0000 1010 1010L1=R0=1111 0000 1010 1010 1111 0000 1010 1010F(R0,K1)=0010 0011 0100 1010 1010 1001 1011 1011⎭⎬⎫32-bit

We can now compute
R1=L0⊕F(R0,K1)\colorbox{#FBE5D6}{$\textcolor{red}{R_1} = \textcolor{red}{L_0} \textcolor{purple}\oplus F(R_0, K_1)$}R1=L0⊕F(R0,K1)

L0=1100 1100 0000 0000 1100 1100 1111 1111F(R0,K1)=0010 0011 0100 1010 1010 1001 1011 1011R1=1110 1111 0100 1010 0110 0101 0100 0100\begin{aligned} \textcolor{red}{L_0} &= 1100\ 1100\ 0000\ 0000\ 1100\ 1100\ 1111\ 1111 \\ F(\textcolor{blue}{R_0}, \textcolor{blue}{K_1}) &= 0010\ \textcolor{red}{0011}\ 0100\ \textcolor{red}{1010}\ 1010\ \textcolor{red}{1001}\ 1011\ \textcolor{red}{1011} \\ \textcolor{red}{R_1} &= 1110\ 1111\ 0100\ 1010\ 0110\ 0101\ 0100\ 0100 \\ \end{aligned}L0F(R0,K1)R1=1100 1100 0000 0000 1100 1100 1111 1111=0010 0011 0100 1010 1010 1001 1011 1011=1110 1111 0100 1010 0110 0101 0100 0100

16 Rounds of Processing - 32-bit Swap#

Final Permutation (FP/IP^-1)#

Final Permutation (FP)#

Final Ciphertext Output#

Convert to hexadecimal: Convert the final permutation output to hexadecimal to get the ciphertext.

Conclusion#

DES exhibits strong avalanche effect − A small change in plaintext results in the very great change in the ciphertext.
DES was proved insecure - In January 1999, distributed .net and the Electronic Frontier Foundation collaborated to publicly break a DES key in 22 hours and 15 minutes.
DES has been withdrawn as a standard by the National Institute of Standards and Technology
This cipher has been superseded by the Advanced Encryption Standard (AES).

Advanced Encryption Standard (AES)#

AES is a symmetric encryption algorithm, meaning the same key is used for both encrypting and decrypting data.
It was established as a standard by the U.S. National Institute of Standards and Technology (NIST) in 2001 after a competition to replace the older Data Encryption Standard (DES), which was becoming vulnerable to attacks.
It is fast, secure, and efficient, making it the go-to choice for protecting sensitive data.

Key Features of AES:
Symmetric Key Algorithm: Uses the same key for encryption and decryption.
Block Cipher: Operates on fixed-size blocks of data (128 bits, or 16 bytes).
Key Length: uses keys of varying lengths (128, 192, or 256 bits).
Rounds of Processing: The encryption process involves multiple rounds of transformations that scramble the data in a way that’s extremely hard to reverse without the key. The number of round in Encryption and Decryption is dependent on the key length

How it works#

Key Expansion: The original key (e.g., 128 bits) is expanded into a set of “round keys” used in each step of the encryption. This ensures the key evolves throughout the process, adding complexity.
Initial Round: The input data (a 16-byte block) is combined with the first round key using a bitwise XOR operation.
Main Rounds: It applies a series of transformations to the data in multiple rounds (10 rounds for 128-bit keys, 12 for 192-bit, 14 for 256-bit). Each round consists of four steps:
- SubBytes: Each byte in the block is replaced with another byte according to a predefined substitution table (S-box).
- ShiftRows: The rows of the data block (visualized as a 4x4 grid) are shifted to the left by different amounts.
- MixColumns: The columns of the grid are mixed using a mathematical operation, further scrambling the data.
- AddRoundKey: The current round key is XORed with the block, integrating the key into the process.
Final Round: The last round skips the MixColumns step but includes SubBytes, ShiftRows, and AddRoundKey to finalize the encryption.

To be continued

Data Structures and Algorithms Week10: Comparing and making informed decisions

Mon, 11 May 2026 00:00:00 GMT

Comparing and making informed decisions#

Content#

Recap of abstract data types introduced
Comparison of implementations
The Java Collections API: The good, the bad and the ugly
Determining the best abstract data type and implementation for a task

Disclaimers#

This session may be heavy in places but will give you some useful insights
Points regarding memory are not absolute due to JVMs (Java Virtual Machines) handling memory differently. Other programming languages may also behave differently.

A note on Typesetting#

Any text in monospaced font explicitly denotes either a Java class / interface (e.g. ArrayList / List) or source code.
There are a number of times these words are used in a more general sense and are not specific to Java.

Abstract Data Types#

List
Set
Map / Dictionary
Graph
Queue
Priority Queue
Double-ended queue
Stack

Some other Abstract Data Types#

Multiset / Bag
Same as a Set, but multiple equal values allowed
Multimap
Same as a Map, but a key can have multiple values
Double-ended priority queue
Double-ended queue, based on a priority

Which data structure is suitable#

Task:
Check a user’s login session is active
Information available:
A user’s session ID and a collection of active session IDs

Question:
What data structure is best suited to the task?

Task:
Retrieve a user’s details by their username
Information available:
A user’s username

Question:
What data structure is best suited to the task?

List - Expected Behaviour#

Duplicates allowed: Yes
Order: Determined by the insertion point
Actions:
- append / prepend to the list
- retrieve from a list
- empty check
Use cases:
- Many, when we want a collection of objects with duplicates and dynamic sizing
- e.g. Storing adjacent nodes in a graph

Set - Expected Behaviour#

Duplicate allowed: No
Order: Depends on implementation. In a standard set, order is not guaranteed.
Actions:
- add value to set
- contains value
- check if empty
Example use cases:
- Retaining visited objects in a depth/breadth-first search of a graph
- Any task where we want a collection but no duplicates

Map - Expected Behaviour#

Duplicate keys allowed: No
Duplicate values allowed: Yes
Order: Depends on implementation
Actions:
- add mapping (key → value)
- retrieve value by key
- empty check
Example use case:
- Lookup tables (mostly)

Graph - Expected Behaviour#

Duplicate allowed: Each ‘vertex’ is unique
Order: Depends on the traversal algorithm
Actions:
- add / remove vertices
- add / remove edges
- get vertex value
- update vertex value
- get vertex neighbours
- adjacency between vertices
Example use cases:
- Social network friendship connections

Queue - Expected Behaviour#

Duplicates allowed: Yes
Order: First In First Out (FIFO)
Actions:
- add to the back of the queue (enqueue)
- remove from the front of the queue (dequeue)
- peek at the front of the queue
- check if empty
Example use cases:
- Process transactions
- Breadth-first search of a graph

Priority Queue - Expected Behaviour#

Duplicates allowed: Yes
Order: Best In First Out (BIFO)
Actions:
- add to the queue with priority
- remove highest-priority from the queue
- peek at the highest-priority element in the queue
- check if empty
Example use cases:
- Process transactions based on priority
- Pathfinding (Dijkstra, A*)

Stack - Expected Behaviour#

Duplicates allowed: Yes
Order: Last In First out (LIFO)
Actions:
- add to the top of the stack (push)
- remove from the top of the stack (pop)
- peek at the top of the stack
- check if empty
Example use cases:
- Undo/redo functionality/Depth-first search of a graph
- Iterative in-order traversal of a binary search tree

List implementations#

There are two common list implementations:
- Array based (ArrayList and Vector)
- Linked list (LinkedList)
Which is best?
- Array-based implementations offer O(1) retrieval for access of any element in the list. However, the array must be resized when full O(n).
- Linked lists offer O(1) time complexity for appending/prepending and retrieval for the head and tail and resizing is not needed.

List implementations Time complexity big-O#

Operation	Array list	Linked list
append	O(1) / O(n) if resize needed	O(1)
prepend	O(n)	O(1)
get first	O(1)	O(1)
get last	O(1)	O(1)
get by index	O(1)	O(n)
remove first	O(n)	O(1)
remove last	O(1)	O(1)
remove by index	O(n)	O(n)
size	O(1)	O(1)

Arrays and Memory Random Access#

Arrays are random access(direct access) structures
This makes arrays O(1) for accessing any element by its index
How?
- An array is allocated: size × data type size memory
- We know the start location of the array
- So, jumping to the correct memory location is determined by: start location + (index × data type size)
- This is constant O(1), i.e., not depends on n

Arrays and Memory#

Arrays are usually a contiguous block of memory for storing values (references in the case of reference types)
A lot of space can be wasted, due to needing free space to allow the insertion of new elements
Object references in Java require 32 bits (for 32-bit systems) or 64 bits (for 64-bit systems).
The following array:

1
Object[] array = new Object[1000];

Requires 64 ×1,000 bits of contiguous memory allocation = 640,000 bits (80,000 bytes) even if the list is empty

Not drastic, but still a waste of memory (1,000 is a very small list in terms of real systems)

Arrays and Memory Crude Example#

Consider the following:

1
public class Obj {
2
    private double a, b;
3
}
4
public class Main {
5
    public static void main(String[] args) {
6
        Obj[] arr = new Obj[20];
7
        for (int i = 0; i < 4; i++) {
8
            arr[i] = new Obj();
9
        }
10
    }
11
}

Each block in this example is 8 bytes (64 bits)
- Grey → Unused array space (but space still allocated)
- Green → Used
- White → Unused

Objects require 8 bytes ‘housekeeping’ then space for references/ primitives (in this case object Obj has two double primitives, each 8 bytes)

Arrays and Memory Pros and Cons#

Although space is ‘wasted’, arrays benefit from modern CPU caching and pre-fetching during iteration as the memory is in one contiguous block
The primary issue with arrays is finding contiguous memory sufficient for storing the array.
Imagine a list intended to cater for 1 billion objects = 8 bytes * 1 billion = 8 GB of contiguous memory and this is just to store the object references!

Consider that the above array was resized when attempting to add the ½ billion to 1 item (original array size ½ billion). Until garbage collection occurs, 4GB for the original array + 8GB for the new array is required
Moral: big data requires lots of memory and arrays ‘struggle’ with a large amount of data due to their contiguous data and the need to resize in order not to waste memory
The max size of an array-based list is Integer.MAX_VALUE → 2,147,483,647
Some of the problems above could be worked around by linking multiple arrays, but this introduces overheads

List iteration#

1
public static void displayList(List<Object> list) {
2
    for (int i = 0; i < list.size(); i++){
3
        System.out.println(list.get(i));
4
    }
5
}
6
List iteration
7
List<Object> arrayList = new ArrayList<>();
8
List<Object> linkedList = new LinkedList<>();
9
…
10
displayList(arrayList);  // Time complexity for
11
displayList(linkedList); // these two calls?

Array list iterator implementation#

1
class ArrayListIterator<E> implements Iterator<E> {
2
    int index = 0;
3
    @Override
4
    public boolean hasNext() {
5
        return index < array.length;
6
    }
7
    @Override
8
    public E next() {
9
        return array[index++];
10
    }
11
};

Linked list iterator implementation#

1
class Node<E> {
2
    Node<E> next;
3
    E data;
4
}

1
class LinkedListIterator<E> implements Iterator<E> {
2
    Node<E> current = head;
3
    @Override
4
    public boolean hasNext() {
5
        return current != null;
6
    }
7
    @Override
8
    public E next() {
9
        E result = current.data;
10
        current = current.next;
11
        return result;
12
    }
13
};

Enhanced for loop Syntactical sugar#

1
for (Object obj : iterable) {
2
    System.out.println(obj);
3
}

The enhanced for loop above is just syntactical sugar for:

⬇️

1
for (Iterator<Object> iter = iterable.iterator(); iter.hasNext(); /** incrementer not needed **/) {
2
    System.out.println(iter.next());
3
}

List iteration - Take Two#

1
public static void displayList(List<Object> list) {
2
    for (Object obj : list) {
3
        System.out.println(obj);
4
    }
5
}
6
List<Object> arrayList = new ArrayList<>();
7
List<Object> linkedList = new LinkedList<>();
8
…
9
displayList(arrayList);   // Time complexity for
10
displayList(linkedList);  // these two calls?

Sets#

Question:
How do you retrieve a specific element from a set?

Answer: That’s a silly question.

The only way you could retrieve a specific element from a set is by having the element to begin with.

Sets - What are they good for?#

Checking the presence of an element within a set, e.g. whether a vertex has already been visited in a depth-first / breadth-first search of a Graph
Faster than a list, O(1) hash set or O(log n) tree set
Avoiding duplicates
Checking whether a subset exists in another set
Obtaining intersections/differences (e.g. Venn diagram)
Efficiently maintaining non-index order (sorted sets such as tree set [i.e. binary search tree])

Set implementations Time complexity big-O#

Operation	Hash set	Tree set
add	O(1) / O(n) if resize needed	O(log n)
remove	O(1)	O(log n)
contains	O(1)	O(log n)
size	O(1)	O(1)

Hash set wins hands-down for the basic operations, but the order is chaotic.
Whenever an order is required, a tree set should be used

Tree Sets#

You have been taught that tree set implementations (i.e. binary search trees) offer O(log n) time complexity
On average this is the case for a self-balancing binary search tree, but the worst-case time complexity is actually O(h), where h is the height of the tree.
A balanced tree with 1024 to 2047 (inclusive) items will have a height of 10.

210=1024211−1=20472^{10} = 1024 \hspace{2em} 2^{11} - 1 = 2047210=1024211−1=2047 log⁡21024=10log⁡22047=10.999 (less than 11)\log_{2}{1024} = 10 \hspace{2em} \log_{2}{2047} = 10.999 ~ \text{(less than 11)}log21024=10log22047=10.999 (less than 11)

Hence, O(log n) as log n == h, if balanced

If you are struggling with logarithms, think about it this way:

level 0 = 1 node (root)
level 1 = 2 * previous level nodes = 2 nodes
level 2 = 2 * previous level nodes = 4 nodes
level 3 = 2 * previous level nodes = 8 nodes
level 4 = 2 * previous level nodes = 16 nodes
……………
level 9 = 2 * previous level nodes = 512 nodes
level 10 = 2 * previous level nodes = 1024 nodes
[height == 10]

1 + 2 + 4 + 8 + 16 + 32 + 64 + 128 + 256 + 512 + 1024 = 2,047

If a balanced tree were to contain double the number of elements (i.e. 2 × 2047 = 4094 elements), the height of the tree would only increase by 1.

⬇️ This means that despite the number of elements doubling, the number of iterations required (on average) to search for an element in the tree only increases by 1. ⬇️ The benefit of tree structures and logarithmic algorithms only becomes truly apparently as n moves towards a larger number

Question:
For a balanced binary search tree containing 1 billion elements, at most how many iterations would be required (on average) to find any element in the tree?

Answer:
log⁡21,000,000,000=29.897≈29\log_{2}{1,000,000,000} = 29.897 \approx 29log21,000,000,000=29.897≈29 iterations (floored result above)

Comparison to a list:
O(n) = 1,000,000,000 iterations

~ 34.483 million times more than the balanced binary search tree

Digression: Calculate logarithms#

1
int log2Est(int n) {
2
    return n > 1 ? (1 + log2Est(n/2)) : 0;
3
}

1
int log2Est(int n) {
2
    assert n > 0;
3
    int y = 0;
4
    while (n > 1) {n = n/2; y++;}
5
    return y;
6
}

the number of times you can divide it by 2 before you go below 1

Map implementations Time complexity big-O#

Operation	Hash map	Tree map
put	O(1) / O(n) if resize needed	O(log n)
get	O(1)	O(log n)
remove	O(1)	O(log n)
contains	O(1)	O(log n)
size	O(1)	O(1)

In reality, a Map is just a Set of keys that map to a Collection of Objects.
In the Java API, Maps are used to implement the Sets…

JAVA SET Implementation, It’s just a MAP…#

e.g. Inside HashSet<E>:

1
private transient HashMap<E,Object> map;
2
// Dummy value to associate with an Object in the
3
// backing Map
4
private static final Object PRESENT = new Object();
5
public boolean add(E e) {
6
    return map.put(e, PRESENT)==null;
7
}

Java Collections API#

The Java Collections API provides the following implementations of common abstract data types (some omitted)
- List → ArrayList, LinkedList and Vector
- Set → HashSet, LinkedHashSet and TreeSet
- Map → HashMap, LinkedHashMap and TreeMap
- Graph → You wish
- Queue → LinkedList, ArrayDeque
- Priority queue → PriorityQueue
- Double-ended queue → LinkedList, ArrayDeque
- Stack → Stack, ArrayDeque, LinkedList

Java Collections API Issues#

Design decisions and changes to the Java language have resulted in some notable issues with the Collections API:
- No Stack interface. There is a class Stack, which extends Vector, an old ‘thread safe’ list implementation, which introduces overhead.
- HashSet uses HashMap internally. This creates extra bloat, since although there is just a value, a key value pair is stored (2 ×\times× object references)
- TreeSet uses TreeMap internally. Less efficient, as per the HashSet problem above
- Legacy ‘Object’ methods, where generics should be used. Introduces type safety issues.

As a developer you should be aware that the Collections API is designed to be flexible. This has efficiency and performance consequences.
Use of generic types or Object means no direct storing of primitive types.
Consider an ArrayList for storing integers (the problem applies to all of the Collections API implementations…)
- ArrayList’s underlying array is: Object[] elementData; On a 64-bit system, this means each element requires 8 bytes.
- Additionally the wrapper class Integer incurs the overhead of being a reference type (16 bytes).
- A primitive int only requires 4 bytes.

Comparison
Object[]	int[]
8 bytes × array length + 16 bytes per `Integer` wrapper	4 bytes × array length, stored directly in the array
100 elements in a full array = 800 bytes + 1,600 bytes Total = 2,400 bytes	100 elements in a full array Total = 400 bytes

As a result, a full ArrayList of Integer elements uses 6 times more memory than an efficient implementation designed explicitly for storing int primitives.(This is ignoring the additional overhead of the static attributes in the Integer class and auto-boxing / unboxing).

Java Collections API Conclusion#

The Collections API is great if you want to a straight-out-of-the-box implementation of your favorite abstract data type
However when time and space complexity is of utmost importance, you should consider a custom implementation
For the most part you will be fine using the Collections API and will benefit from the range of utilities available and interoperability with other libraries

Which data structure is suitable#

Task:
Check a user’s login session is active
Information available:
A user’s session ID and a collection of active session IDs

Question:
What data structure is best suited to the task?

Example List implementation:

1
boolean isSessionActive(List<String> active, String user) {
2
    boolean found = false;
3
    Iterator<String> iter = active.iterator();
4
    while (!found && iter.hasNext()) {
5
        found = iter.next().equals(user);
6
    }
7
    return found;
8
}

Example Set implementation:

1
boolean isSessionActive(Set<String> active, String user) {
2
    return active.contains(user);
3
}

Conclusion:
- Both are equally functional, but a List would offer O(n) regardless of implementation, whereas a hash-table based Set implementation would offer O(1).
- Note: A SortedSet implementation such as TreeSet would offer O(log n).

Task:
Retrieve a user’s details by their username
Information available:
A user’s username

Question:
What data structure is best suited to the task?

List?
- Maybe, but would require an O(n) search of the list and check that the User object’s username matched what we were looking for (also assumes the username is stored in this object)
Set?
- No. The Set would contain the User objects, so to get it we would need to have the User object to begin with…
Queue? Stack?
- No. Sure if the interface allows us to do a linear search, but we’ve established this is O(n)
Map?
- A mapping of the username → User object would work a treat!
- If we don’t care about order (or rarely care) then a Hash map implementation is the way to go O(1)

Sometimes the right data structure isn’t immediately apparently.
We should first program to an interface (e.g. Set / List) and then change the implementation to suit the use the case.
For example:
1. If I want to store a key value pair, a Map is the obvious choice. It’s specifically designed for this use. Then
2. But should I use a Tree map or a Hash map?

In most cases the answer will be a Hash map. It’s quick with O(1) time complexity on most operations.
If however, the contents of the Map rarely change and we frequently want to display the keys in order, then the Tree map is a better choice.
Hash maps also waste memory, since the underlying implementation is an array. Java’s HashMap (using default load factor 0.75) always wastes at least 0.25 * table size * reference size(8 bytes) bytes

The implications of a poor decision#

Consider the algorithm for a breadth-first traversal of a graph:

1
class Node {
2
    List<Node> adjacent;
3
    String value;
4
}

Consider the algorithm for a breadth-first traversal of a graph:

1
void bft(Node start) {
2
    List<Node> nodes = new ArrayList<>();
3
    List<Node> visited = new ArrayList<>();
4
    nodes.add(start);
5
    while (!nodes.isEmpty()) {
6
        Node current = nodes.remove(0);
7
        if (!visited.contains(current))
8
            System.out.println(current.value);
9
        visited.add(current);
10
        for (Node n : current.adjacent) {
11
            if (!visited.contains(n))
12
                nodes.add(n);
13
        }
14
    }
15
}

展开收起

1
void bft(Node start) {
2
    List<Node> nodes = new ArrayList<>();
3
    List<Node> visited = new ArrayList<>();
4
    nodes.add(start);
5
    while (!nodes.isEmpty()) { // isEmpty O(1)
6
        Node current = nodes.remove(0); // remove O(n)
7
        if (!visited.contains(current)) // contains O(n)
8
            System.out.println(current.value);
9
        visited.add(current); // add O(1)
10
        for (Node n : current.adjacent) {
11
            if (!visited.contains(n)) // contains O(n)
12
                nodes.add(n); // add O(1)
13
        }
14
    }
15
}

展开收起

The implications of a better decision#

1
void bft(Node start) {
2
    Queue<Node> nodes = new LinkedList<>();
3
    Set<Node> visited = new HashSet<>();
4
    nodes.add(start);
5
    while (!nodes.isEmpty()) { // isEmpty O(1)
6
        Node current = nodes.remove(0); // remove O(1)
7
        if (!visited.contains(current)) // contains O(n)
8
            System.out.println(current.value);
9
        visited.add(current); // add O(1)
10
        for (Node n : current.adjacent) {
11
            if (!visited.contains(n)) // contains O(1)
12
                nodes.add(n); // add O(1)
13
        }
14
    }
15
}

展开收起

Data Structures and Algorithms Week9: Pathfinding

Mon, 11 May 2026 00:00:00 GMT

Pathfinding#

Content#

Finding the shortest path between two nodes in a graph
Dijkstra’s algorithm
The A* (“A-star”) algorithm
Priority Queues
Problems we can solve using path-finding algorithms

What is graph#

Nodes(vertices)
Edges(arcs)
Directed or undirected graph

Path finding#

Suppose that I want to get from one subway station to another by the quickest route.
Suppose that I want to get from one country to another country by the cheapest way.

What should we do for these two questions?

The solution for finding the quickest route is:
1. Represent the subway as a graph, with stations as nodes.
2. Label each edge of the graph with its “cost”-the time it would take to traverse that edge.
3. The time taken to traverse any path is then the sum of the costs of the edges you move through.
4. So all we have to do is find the path with the shortest total cost.

How to implement the solution we mentioned above?
- Dijkstra’s algorithm
- The A* (“A-star”) algorithm

Dijkstra’s algorithm#

Calculates shortest path between two nodes, which we shall call Start and End.
Assumes that there are no negative edge costs.
Works on both directed and undirected graphs.

If nodes represent subway stations, the cost could represent

A. the line length between stations.
B. the fee we spend from one station to another
C. the time we spend from one station to another
D. all of above

Summary:
Cost could be any meaningful thing to edges

Makes use of two sets of nodes:
- Closed - If a node N is in this set then we have already calculated the shortest path from Start to N.
- Open - If a node N is in this set then we may have considered a path from Start to N but we don’t yet know whether it is the shortest path.

For each node we maintain two extra pieces of information:
- The g-value of a node. ----This is the total cost of the best path that we have found (so far) from Start to this node.
- A “back” pointer to the previous node on that path.
The Open set behaves as a priority queue, in which the node with the lowest g-value has the highest priority.

What is the feature of the PQ?

Dijkstra’s algorithm only works on undirected graph, yes or no?
The node with the lowest g-value has the highest priority, yes or no?
Dijkstra’s algorithm is used for?

Are there negative edge costs for Dijkstra’s algorithm?
Does the Closed Set contain all of the calculated nodes?
Does the Closed Set contain the visited nodes?
What does the edge‘s cost represent?

1
set Closed to be empty
2
add all nodes in the graph to Open.
3
set the g-value of Start to 0, and the g-value of all the other nodes to ∞
4
set previous to be none for all nodes.
5
while End is not in Closed do
6
    let X be the node in Open that has the lowest g-value (highest priority)
7
    remove X from Open and add it to Closed.
8
    if X is not equal to End then
9
        for each node N that is adjacent to X in the graph, and also in Open do
10
            let g’ = g-value of X + cost of edge from X to N
11
            if g’ is less than the current g-value of N then
12
                change the g-value of N to g’
13
                make N’s previous pointer point to X
14
            endif
15
        endfor
16
    endif
17
endwhile

展开收起

reconstruct the shortest path from Start to End by following “previous” pointers to find the previous node to End, the previous node to that previous node, and so on.

Example: find a path from A to B#

Example: find a path from A to C#

Example: another form#

Dijkstra’s algorithm#

Are there negative edge costs for Dijkstra’s algorithm?
- No. Dijkstra’s algorithm only works with non-negative edge costs/weights. It cannot process negative edge costs, as its greedy selection of the shortest path node fails when negative edges exist (a later path could become shorter, but the algorithm never revisits finalized nodes).
The node with the lowest g-value has the highest priority, yes or no?
- Yes. Dijkstra’s uses a min-priority queue that always prioritizes and expands the unvisited node with the smallest current g-value (the known shortest path cost from the start node).
What does the edge‘s cost represent?
- An edge’s cost is a quantitative weight that represents the expense to traverse between two connected nodes. It can stand for physical distance, travel time, fuel cost, energy consumption, network latency, number of steps, or any measurable effort/loss between two vertices in a graph.

Measurable quantity for relationship

Thinking question:
- The disadvantages of Dijkstra’s algorithm?
  1. Cannot handle negative edge weights
    It relies on a greedy strategy: once a node is marked as visited/finalized, its shortest path is never updated again. Negative edge weights can create shorter alternative paths to already finalized nodes, making the algorithm give incorrect results. It also cannot detect negative cycles.
  2. Only single-source shortest path
    It only calculates the shortest path from one starting node to all other nodes. To get all-pairs shortest paths, you must run the algorithm repeatedly for every vertex, which is inefficient.
  3. Inefficient for large sparse graphs (naive implementation)
    The basic adjacency-matrix version runs in O(V2)O(V^2)O(V2) time, which is slow for graphs with many vertices. Even with a binary priority queue, it is O(Elog⁡V)O(E \log V)O(ElogV), which is less optimal for very large-scale graphs compared to other specialized algorithms.
  4. Greedy limitation
    It makes locally optimal choices at each step, which do not always lead to the global optimum if graph conditions change (only works reliably with fixed, non-negative edge costs).
  5. Not suitable for dynamic graphs
    It cannot easily adapt to graphs where edge weights change dynamically; it requires re-running the whole algorithm from scratch.

Prove dijkstra’s algorithm works?#

It is relatively simple to prove that Dijkstra’s algorithm does indeed calculate the shortest path between two nodes. The thing we have to demonstrate is that a node does not get added to the closed set until its g-value is equal to the length of the shortest path from the Start node to the node in question.
Unfortunately the proof is slightly beyond the scope of this lecture, but watch how nodes get added to the closed set in the examples that follow, and try to see if you can convince yourself that they are not added until we have calculated the shortest path to them.

Exercise 1#

Using a similar notation to that in the previous example, show the sequence of steps by which Dijkstra’s algorithm would calculate the shortest path from A to E.
State which nodes get closed, and in what order.

	A	B	C	D	E	F	G
	0-null	∞-null	∞-null	∞-null	∞-null	∞-null	∞-null
Close A	×	10-A	∞-null	∞-null	∞-null	∞-null	20-A
Close B	×	×	13-B	∞-null	∞-null	∞-null	20-A
Close C	×	×	×	43-C	∞-null	∞-null	20-A
Close G	×	×	×	23-G	∞-null	25-G	×
Close D	×	×	×	×	∞-null	25-G	×
Close F	×	×	×	×	30-F	×	×
Close E	×	×	×	×	×	×	×

Are we nearly there yet?
Heuristically informed search#

Suppose that the graph for Exercise 1 had been drawn to scale, and that we knew the co-ordinates of each point. For example G might be at (0,0), A at (20,0), D at (0,3), and so on.
This means that we can calculate the straight line distance between any two points using Pythagoras’ theorem（毕达哥拉斯定理，勾股定理）
We know that the length of the shortest path between two points must be greater than or equal to the length of the straight line that connects them. We can therefore use the straight line distance as a heuristic, that is to say a rough and ready measure of how long a path between two points is likely to be.
Using our heuristic, we can see that this wasn’t so smart! Although we can get from A to B at a cost of only 10 units, it is going to cost us at least another 31.1 units to get all the way from B to E. It might be more sensible to look at paths leading off from G.
When we used Dijkstra’s algorithm to find the shortest path, we calculated g‑values for G and B, and then added B to the closed set, because its g‑value was the lower. After that we calculated a g‑value for C.
Using our heuristic, we can see that this wasn’t so smart! Although we can get from A to B at a cost of only 10 units, it is going to cost us at least another 31.1 units to get all the way from B to E. It might be more sensible to look at paths leading off from G.

The A* algorithm#

The A* (“A-star”) algorithm makes use of an admissible heuristic to aid the search for a path between two points. It was invented in 1968 at Stanford International for use in Shakey the robot.
The heuristic doesn’t have to be the straight-line distance, but it does have to be admissible.
Also we can’t have negative edge.
For each node we calculate an f-value which is equal to the g-value plus the heuristic value for that node.
There are different variants of the A* algorithm, and different ways of describing each variant. Since we have already met Dijkstra’s algorithm, we shall present A* as a modification of Dijkstra.
The Open set still behaves as a priority queue, but priority is determined using f-values rather than g-values.
In other words when we choose a node to add to the Closed set, we pick the one with the lowest f-value, rather than the lowest g-value.

A* algorithm (our version)#

1
set Closed to be empty
2
add all nodes in the graph to Open.
3
set the g-value of Start to 0, and the g-value of all the other nodes to ∞
4
set previous to be none for all nodes.
5
    while End is not in Closed do
6
    let X be the node in Open  that has the lowest f-value (highest priority)
7
    (f-value is g-value + the heuristic value for that node)
8
    remove X from Open and add it to Closed.
9
    if X is not equal to End then
10
    for each node N that is adjacent to X in the graph, and also in Open do
11
      let g’  = g-value of X + cost of edge from X to N
12
      if g’ is less than the current g-value of N then
13
        change the g-value of N to g’
14
        make its previous pointer point to X
15
      endif
16
    endfor
17
  endif
18
endwhile

展开收起

A* path from A to E#

The numbers in italics by each node represent heuristic estimates of the distance between that node and the target node E (in this case they are straight line distances calculated on the assumption that the graph is drawn to scale, but we could use other admissible heuristics).
Let us see how A* would calculate the shortest path from A to E

Shortest path:
A -> G -> F -> E

How does A* compare to Dijkstra?#

Both A* and Dijkstra’s algorithm compute the same shortest path: A, G, F, E
However A* gets to the answer more quickly. When we calculated the path using Dijkstra we ended up closing seven nodes: A, B, C, G, D, F, E. When we use A* we close only five nodes: A, G, D, F, E
Informally, the reason that A* does not close B or C is that our heuristic allows the algorithm to determine that those nodes are too far away from the target to be worth exploring any further.

What assumptions does A* make?#

In order for A* to work, we must make two assumptions.
- The heuristic is admissible.
- There are no negative edge costs.
The version of A* presented here makes a third assumption. The heuristic has to be consistent. This means that for any two nodes X and Y we have h(Y)−h(X)≤c(X,Y)h(Y) - h(X) \leq c(X,Y)h(Y)−h(X)≤c(X,Y)Where c(X,Y)c(X,Y)c(X,Y) is the cost of the edge from XXX to YYY and h(X)h(X)h(X), h(Y)h(Y)h(Y) are the heuristic values for XXX and YYY
However this assumption is not critical to the use of A*. If it did not hold we could use a slightly modified version of A* that does not have a Closed set.

Other versions of A*(book version)#

In our version of A*:
- every node is added to the Open set at the start. The start node is initially assigned a g-value of 0.
- all other nodes are given an initial g-value of ∞. Nodes acquire a finite g-value when an adjacent node is added to the Closed set.
In the versions of A* that you will see in text books:
- the only node that is initially added to the Open set is the start node.
- Other nodes are added to the Open set when an adjacent node is closed. This is, in practice, identical to what happens in our version.
As mentioned previously, there are versions of A* that do not use a Closed set, and which can handle heuristics that are not consistent.

A* algorithm#

The meaning of H-value?
- The H-value (heuristic value) is the estimated approximate cost from the current node to the target/goal node in the graph.
- It is a guess (not the real exact path cost) used by A* to guide the search toward the goal efficiently.
Could we set H-value for each node randomly?
- No, we cannot.
  - A* algorithm depends on a reasonable heuristic function. Random H-values provide no meaningful guidance toward the goal.
  - Random H may overestimate the real path cost, breaking the admissible heuristic rule. This makes A* lose optimality (may not find the shortest path).
  - Random H also causes inefficient, aimless searching and greatly increases computation time.

A note on Priority queues#

In both Dijkstra’s and the A* algorithm, we represent the Open set as a min-priority queue. The priority of a node is determined by its g-value (Dijkstra) or f-value (A*).
The use of priority queues makes the algorithms more efficient because removing a node becomes O(log n) rather than O(n).
However the priority queue must be implemented in such a way that the priority of a node can be altered after it has been added to the queue.
Note that the PriorityQueue class in the Java API does not allow this (you can alter the priority of the node after adding it, but the queue will not then behave correctly).

Summary#

Both Dijkstra’s and the A* algorithm solve the problem of finding the shortest path between two nodes in a graph.
Both algorithms use an Open set of nodes. The variant of A* presented in this lecture also uses a Closed set.
The Open set behaves as a priority queue, with priority determined by the g-values of nodes (Dijkstra) or their f-values (A*).
The A* algorithm makes use of an admissible heuristic to guide the search for the shortest path.
Path-finding algorithms such as Dijkstra and A* can be used to find routes on maps. They can also be used to solve other problems that can be represented as graphs.

Web Application Development - Accessibility

Mon, 11 May 2026 00:00:00 GMT

Accessibility#

Why Accessibility#

In many cases it is a legal responsibility.
It widens the access to your product or service.
It enables you to take advantage of emerging technologies.
It gives you an overall better product.

Accessibility on the Web#

The web is an important vehicle for communication for government bodies who want accessible information
Many applications are now web based (web mail… etc.).
Accessibility improves use on small function devices
Accessibility can improve the ability to query information

What Accessibility does NOT mean#

You have to do away with all multimedia content.
You have to write for text only web browsers.
You just need to enlarge the font for everything.
Lots of expense.

Relevant law and guidelines#

Disability Discrimination Act 1995 (no longer relevant but you will still hear references to it)
Equality Act 2010
Web Consortium Accessibility Guidelines 1.0 (previous)
Web Consortium Accessibility Guidelines 2.1 (current)
EU Directive on web accessibility
- UK law - Public Sector Bodies (Websites and Mobile Applications) Accessibility Regulations 2018.

DDA & Equality Act#

Equality Act 2010 replaces Disability Discrimination Act (and other pieces of equality legislation)
Covers a wide range of areas of life
Outlaws discrimination of people on the grounds of disability
Puts a duty on organisations and companies to provide accessible goods, service, premises and information
Puts further duties on public bodies to promote equality
It has been a legal requirement since 1999 for web sites to be accessible

Famous Cases: Sydney Olympics 2000#

Relevant to the UK as the Australian Law is very similar to UK law in this respect.
Olympic Committee was found guilty of producing an inaccessible website.
The fine was $A20,000 plus they had to fix the site before the Olympics.
The cost of fixing the site was much greater than if accessibility had been included from the start

WCAG 1.0#

Provides a basic checklist for accessibility.
Created as part of the Web Access Initiative ( https://www.w3.org/WAI/ ).
The W3C Web Accessibility Initiative (WAI) develops standards and support materials to help people understand and implement accessibility.
Partially automatable.
Superseded by WCAG 2.0 (and now 2.1) but still useful as it takes a slightly different approach.

WCAG 2.1#

3 Levels of Compliance
Level A success criteria:
- Achieve a minimum level of accessibility
- Can reasonably be applied to all Web content
Level AA success criteria:
- Achieves an enhanced level of accessibility
- Can reasonably be applied to all Web content
Level AAA success criteria:
- Achieves additional accessibility enhancements.
- Can not necessarily be applied to all Web content.
Not every criterion has all three levels.

Extends WCAG 1.0 to cover new technologies
Organised around 4 basic design principles
1. Content must be perceivable
2. Interface components in the content must be operable
3. Content and controls must be understandable
4. Content should be robust enough to work with current and future user agents (including assistive technologies.
POUR - Perceivable Operable Understandable Robust
Introduces the idea of a baseline (the set of technologies which the user is assumed to have)

WCAG 2.0: 4 principles divided up into 12 guidelines
WCAG 2.1 adds a 13th guideline (2.5 Input Modalities) and extends the scope of others
WCAG 2.1 is an extension of 2.0. If you meet 2.1 you automatically meet 2.0
Each guideline has associated success criteria which say if that guideline has been met.
Every appropriate guideline at a particular level must be met before you can say you have met that level of conformance
Alternative pages can be used to help meet guidelines.
Minimum level of conformance desirable in the UK is AA

Principle 1: Content must be perceivable
Guideline 1.1: Text alternatives must be provided for any non-text content.
Images must have alternative text (“alt” attribute). Must convey the same information or, if this is not possible, describe the image.
Icon based controls must have a name that describes the input.
Purely decorative graphics must be marked to allow assistive systems to
ignore them.
CAPTCHA tests must not have the only option being the reading of an image.

Guideline 1.2: Time-based Media (audio and video)
Grade A: provide alternative representation of prerecorded media.
Grade A: provide captions on prerecorded audio or audio
description for prerecorded video.
Grade AA: provide captions on live audio.
Grade AAA: provide sign language video for prerecorded audio.
Grade AAA: provide audio descriptions that can pause prerecorded video in order to fit descriptions in.
Grade AAA: provide alternative representation of live audio

Guideline 1.3: Adaptable Create content that can be presented in different ways
Use appropriate semantic markup for HTML including header styles. Make input names clear. Do not display important information purely using visual or audio characteristics (colour, size, etc.)
Guideline 1.4: Distinguishable Make it easier for users to see and hear content
Ensure appropriate contrast between text and background. Avoid images of text. Make text resizable if possible. Do not convey information purely using colour. Ensure any automatically played audio can be paused, stopped, or changed in volume without changing the volume of other sound.

Principle 2: Interface components in the content must be operable
Guideline 2.1: Keyboard Accessible make all functionality available from the keyboard
Browsers provide default systems for editing forms with the keyboard; ensure they work and can access all controls in a sensible order and don’t get stuck. Add keyboard alternatives for non-standard input. Ensure that keyboard shortcuts can be disabled or prevented from conflicting with keyboard input.
Guideline 2.2: Enough Time Provide users with enough time to read and use content
Avoid time limits. Allow scrolling or flashing text to be paused. If the user’s session times out, ask them to log in again but resume exactly where they left off, including data entered on the request that caused the time out to be detected

Guideline 2.3: Seizures and Physical Reactions Do not design content in such a way that is known to cause seizures
Flashing objects should be avoided or limited to 3 flashes per second, and avoid red
Guideline 2.4: Navigable Provide ways to help users navigate, find content, and determine where they are
Pages must have clear titles, focus order must be sensible, the purpose of links must be made clear within the link (not only by surrounding content); repeated text is marked and can be skipped; pages can be found multiple ways
Guideline 2.5: Input Modalities Make it easier for users to operate functionality through various inputs beyond the keyboard
Don’t require path-based gestures or device motion. Execute functions on button release, not button press, to give the user a chance to cancel.

Principle 3: Content and controls must be understandable
Guideline 3.1: Readable Make content readable and understandable
Identify language of text or subsection of text with a language code. Ideally provide ways to clarify the meanings of words and abbreviations.
Guideline 3.2: Predictable Make web pages appear and operate in predictable ways
Navigational mechanisms that appear on multiple pages occur in the same relative order. Things that look the same on multiple pages do the same and vice versa. Focusing a form component or typing input alone does not immediately change the context or page.
Guideline 3.3: Input Assistance Help users avoid and correct mistakes
Clearly label input. Where an input error can be detected, do so and identify the error to the user in text. Allow users to reverse submissions or correct them, or at least to give final confirmation before submission.

Principle 4: Content should be robust
Guideline 4.1 Compatible: Maximize compatibility with current and future user agents including assistive technologies
Use validated and correct HTML markup.
If you create non-standard input components, make sure they can be changed in software as well as by the user, and that software can be notified when they are changed.
For more information look at the WCAG links on the last slide

Some accessibility issues: sensory#

Use of color to indicate information

Visual only information

Audio is sometimes not seen as an important part of the web experience but can be vital e.g Bilibili
People’s acuity, frequency range and volume range decrease as they get older.
Many portable devices struggle to reproduce audio correctly.

Some accessibility issues: mental#

Blinking and flashing images and text can cause problems with epilepsy.
Poor organization of information can cause problems for everybody, but particularly for people with dyslexia.
Too much use of colour, particularly moving and clashing colours can cause problems for people with synaesthesia.

Some accessibility issues: physical#

Fine motor control may be problematic for people with dyspraxia, motor neuron disease, mobility impairment, or those working on a small format device.
Performing repetitive movements is boring for everybody but can be a particular issue for people with chronic pain.

Some accessibility issues: navigational#

JavaScript menus can look pretty, but may not work on all machines. They can also be hard for screen readers.
Flash is now considered deprecated and should be avoided. It is very, very hard to make accessible.
Simple menus are easiest to program and the most accessible.
Need to pay attention to structure as well.

Some accessibility solutions: visual#

Visual impairment is the main disability for which there exists technical solutions.
These include:
- Braille screens
- Hepatic controllers (e.g mice)
- Screen readers
- Magnifiers

Basic design considerations#

Choice of fonts
Icons or text
Resolution Independence

Choice of fonts and icons#

Use San Serif fonts such as Arial, or Verdana
Use a minimum of 12 point as the default size for main text.
Users should have the ability to change font size (and if possible, font) – different CCSs (or at least an accessible one) can help here.
Try to keep icons a) clear, b) consistent, c) not dependent on any cultural bias
Best to use both icons and text.

HTML5 and other technologies#

HTML5 can be used to enhance accessibility by providing alternative content and increasing semantic clarity of page blocks.
Some screen readers and related technology cannot cope well (esp. asynchronous technologies)
PDF can have particular accessibility issues so should be avoided unless tagged pdf can be used.
Use only standard CAPTCHAs that are maintained to offer accessible options.

Captchas#

A captcha is a distorted word or phrase intended to be unreadable by machine.
- Designed to stop bots from accessing web pages
- Requires letters or numbers to be identified from an image
Can be a problem for blind or severely visually disabled users
- Rely on screen readers
- Captchas can defeat screen readers as easily as bots
Solution: captchas don’t need to be based on visual perception
- Identifying letters, numbers or phrases is also effective as an audio task
- Offering the choice covers most users but there is still a problem for those with both visual and hearing impairment.
Modern validation is often identify items
- Which squares in a picture contain x?

Top ten tips for web accessibility#

Images & animations: use the alt attribute to describe the function of each visual. RNIB have guidelines about the use of Alt text.
https://www.rnib.org.uk/accessibility-guidelines-alt-text-what-you-need-know
Image maps: Use client-side maps and text for hotspots.
Multimedia: Provide captioning and transcripts of audio, and descriptions of video.
Hypertext Links: use text that makes sense when read out of context. For example, avoid “click here” and links with the same name that lead to different places.
Page Organisation: use headings, lists and consistent structure.
Use CSS for layout and style where possible. Provide accessible CSS as an alternative.
Graphs & Charts: Summarize or use the long desc attribute. SVG is particularly good as metadata can be embedded in the picture.
Scripts, applets & plugins: provide alternative content in case features are inaccessible or unsupported.
Frames: use the no frames element and meaningful titles.
Tables: make line by line reading sensible. Summarize.
Check your work: validate, use tools and checklists, and guidelines at
https://www.w3.org/TR/WCAG

Tools and resources#

WAI
- https://www.w3.org/WAI/
WAI list of accessibility guidelines
- https://www.w3.org/WAI/ER/tools/complete
Web Content Accessibility Guidelines 2.1
- w3.org Recommendation
- Understanding WCAG - gov.uk

FunnyQueue

Thu, 07 May 2026 00:00:00 GMT

Practical FunnyQueue#

Study this program that implements a queue of integers. It has been translated into Java from an example in a programming textbook.
You can run it too if you like; source code provided.
Then answer these questions.

How many values can the queue hold?
How can you fix this? What then happens?
Where is the real problem? Fix that too.
What happens if a calling program tries to add too many values to the queue?
What do you think of that way of handling that issue?
When corrected, what is the big-O performance of addItem?
When corrected, what is the big-O performance of remove?
Does this have any advantages over the “circular” queue you saw in the lecture on implementing stacks and queues with arrays?

1
import java.util.*;
2

3
class IntegerQueue {
4
    public IntegerQueue(int capacity) {
5
        this.capacity = capacity;
6
        theQueue = new int[capacity];
7
        firstFree = 0;
8
    }
9
    public int getCapacity() {return capacity;}
10
    public int getSize() {return firstFree;}
11

12
    private int capacity;
13
    private int[] theQueue;
14
    private int firstFree;
15

16
    int getItem(int index) {
17
        return theQueue[index];
18
    }
19

20
    void addItem(int item) {
21
        if (firstFree < capacity - 1) {
22
            theQueue[firstFree] = item;
23
            firstFree++;
24
        }
25
}
26
    int remove() {
27
        if (firstFree == 0) return 0;
28
        int item = theQueue[0];
29
        for (int i = 0; i < firstFree; i++)
30
            theQueue[i] = theQueue[i+1];
31
        firstFree--;
32
        return item;
33
    }
34
}
35

36
public class FunnyQueue {
37
    public static void main(String[] args) {
38
        Scanner kb;
39
        int item;
40
        IntegerQueue queue = new IntegerQueue(5);
41
        kb = new Scanner(System.in);
42

43
        System.out.println("add values");
44
        for (int i = 0; i != 5; i++) {
45
            System.out.println("Enter an integer");
46
            item = kb.nextInt();
47
            queue.addItem(item);
48
        }
49

50
        System.out.println("display the queue");
51
        for (int i = 0; i != queue.getSize(); i++)
52
            System.out.print(queue.getItem(i) + " ");
53

54
        System.out.println();
55
        System.out.println("Remove an item");
56
        item = queue.remove();
57
        System.out.println("Removed " + item);
58

59
        System.out.println("show the changed queue");
60
        for (int i = 0; i != queue.getSize(); i++)
61
            System.out.print(queue.getItem(i) + " ");
62
    }
63
}

展开收起

Reference Answer#

1) How many values can the queue hold?#

The queue can hold 4 values (not 5, despite the capacity=5).

Why? The addItem method uses the condition if (firstFree < capacity - 1). For capacity=5, this means firstFree can only go up to 3 (since 3 < 4). Thus, indices 0-3 are used (4 elements total).

2) How can you fix this? What then happens?#

Fix: Change the condition in addItem from firstFree < capacity - 1 to firstFree < capacity.

1
void addItem(int item) {
2
    if (firstFree < capacity) {  // Fixed: removed "- 1"
3
        theQueue[firstFree] = item;
4
        firstFree++;
5
    }
6
}

Result: The queue now holds the full 5 values (indices 0-4), as intended.

3) Where is the real problem? Fix that too.#

The real problem is in the remove method: its loop causes an ArrayIndexOutOfBoundsException when shifting elements.

Original loop:

1
for (int i = 0; i < firstFree; i++)
2
    theQueue[i] = theQueue[i+1];  // i+1 exceeds array bounds when i = firstFree-1

When firstFree = n, i runs from 0 to n-1, so i+1 becomes n (which is out of bounds for an array of size capacity).

Fix: Change the loop condition to i < firstFree - 1:

1
int remove() {
2
    if (firstFree == 0) return 0;
3
    int item = theQueue[0];
4
    for (int i = 0; i < firstFree - 1; i++)  // Fixed: stop at firstFree-2
5
        theQueue[i] = theQueue[i+1];
6
    firstFree--;
7
    return item;
8
}

4) What happens if a calling program tries to add too many values to the queue?#

The addItem method silently ignores the extra values—it does nothing (no error, no exception, no feedback to the caller).

5) What do you think of that way of handling that issue?#

This is poor practice. Silent failures make debugging difficult: the caller has no way of knowing their item was not added. A better approach would be to:

Throw an exception (e.g., IllegalStateException), or
Return a boolean (true = added, false = queue full).

6) When corrected, what is the big-O performance of `addItem`?#

O(1) (constant time). Adding an item only involves checking the condition, writing to the array, and incrementing firstFree—no loops or data shifting.

7) When corrected, what is the big-O performance of `remove`?#

O(n) (linear time). Removing an item requires shifting all remaining elements left by one position (the loop runs firstFree - 1 times, where n is the number of elements in the queue).

8) Does this have any advantages over a “circular” queue?#

The only advantage is simplicity:

This implementation uses fewer variables (no front/rear indices or modulo arithmetic).
The code is easier for beginners to read and understand.

However, circular queues are far more efficient for remove operations (O(1) vs. O(n) here), so this simplicity comes at a performance cost.

Web Application Development - jQuery

Wed, 06 May 2026 00:00:00 GMT

jQuery and JavaScript frameworks#

JavaScript support#

Since JavaScript is effectively the only complete language for writing web clients, a great deal of effort has been put into support material for it.
Libraries provide sets of standard functions implemented using browser-independent and established methods.
Frameworks provide alternative ways of assembling and preprocessing JavaScript code to build code with complex standard functionality.
JavaScript supersets provide actual language extensions to JavaScript which are converted to standard JavaScript by another program before being placed in web pages
Languages compiling to JavaScript allow web scripts to be written in entirely different languages

jQuery#

One of the first and best-known JavaScript libraries
Some of the functions jQuery provides have been added to JavaScript/ECMAscript itself in later versions. jQuery’s versions are still usable, as they will call the built-in version on browsers that support it, or use the old jQuery version on those that don’t

Including jQuery#

You can download jQuery for free from jquery.com/download
There are several versions: the “compressed” and “uncompressed” versions. The compressed version has tiny variable names and compressed lines to minimize the time taken for the browser to load it. Unless you are debugging jQuery itself you should probably use it.
Add the jQuery library to your web app (in the static directory if appropriate) and include it via
<script src="jquery.min.js"></script>

jQuery#

The primary function of jQuery is to simplify the process of writing code to update the content of web pages via the DOM.
The main functions it provides are:
- The ability to use CSS selectors easily to select parts of the page to change (this was added to JavaScript later via querySelectorAll)
- The ability to change all matching parts of a web page in similar ways without writing a loop or higher order call every time
- Easy function-based adjustment of attributes and conversion of values to attribute types

CSS selectors (recap)#

Selector	Meaning
`p`	All elements of type p.
`.highlight`	All elements with class highlight.
`p.highlight`	All elements of type p with class highlight
`#banner`	Element with ID banner
`p b`	All b descendents of p elements
`p > b`	All b children of p elements
`#banner>.highlight`	All elements with class highlight that are children of the element with ID banner.

See lecture 4 for DOM element relation terminology. See https://www.w3schools.com/cssref/css_selectors.asp for full reference.

jQuery DOM updates#

jQuery provides a function named $ (to shorten code that uses it) which, called with a CSS selector, returns an object representing all elements that match that selector.
You can then call the methods of this object to read or update attributes or contents of the element(s) in question.
If the selector matches more than one element, then:
- Update methods affect all elements matched. There is no need to write a loop.
- Read methods return the data for the first element matched. Depending on how your page is organized, this may be the same for all elements, but jQuery does not check this.

jQuery benefits example#

To turn all text in p elements, throughout the document, red:
Without jQuery:

1
for (let x of document.getElementsByTagName("p")) {
2
    x.style.color = "red";
3
}
4

5
// document.querySelectorAll("#id")
6
// document.getElementById("id")

With jQuery:

1
$("p").css("color","red")
2

3
// $("#id")

Most can be called in several ways:
with one parameter, they read the given attribute for the first item in the selected set, eg css("color")
with two parameters, where the second is a value: they set the given attribute for all items in the set, eg css("color", "red")
with two parameters, where the second is a function: they call the function on the index number of the item in the set, and the existing attribute value for that item, and store the value it returns in the attribute
Most also return the value they were invoked on, allowing a series of method calls to be chained into a single command.
You can run a lower level selector query (to find items which are a subset of an existing found set) using the method .find().

Methods on jQuery objects#

.attr(…) manipulates DOM attributes (IDs, names, links, enabled/disabled, etc..).
.prop(…) manipulates DOM properties. These are distinguished from attributes by whether or not their standard representations are in the HTML or not.
- Eg, form input values like the value of a text box, or the checked status of a checkbox, should be accessed with prop(). Although they can appear in the HTML, those are only initial values; the real values can be changed by the user and then no longer tie directly to the HTML file.
.css(…) manipulates CSS attributes (color, width, height, position, etc..)
.data(…) allows arbitrary data to be stored about elements in jQuery. (This is not the same as the HTML5 data- attributes.

Certain frequently used values, or ones harder to work with, have their own special functions.
.val(): value of form field (as property).
.height(), .innerHeight(), .outerHeight(), .width(), innerWidth(), .outerWidth(): access width or height values allowing for changes caused by computation, and as pixel sizes as integers (when accessed directly in CSS they are strings that contain unit indicators)
.position(), .offset(): access both x and y position values as dicts with two elements, already converted to pixel sizes as integers. .position() returns relative to the containing elements. .offset() returns relative to the entire document.

Manipulating jQuery events#

You can add an event handler to an object in jQuery by calling the method .on eg, $("button").on("click",x => window.alert("Click! "));
There are also a large number of convenience methods for commonly used events, eg .click(), .change(), .focus()…
Unlike setting the onClick attribute, this adds an event handler. Previous event handlers are not removed. This allows different parts of your script to “stack” event handlers on elements.
If you want to remove event handlers, use the corresponding method .off().

The ready event#

When using jQuery, if you want code to run as soon as the page is loaded, you should use jQuery’s ready event handler which has a custom syntax.

1
$(x => { …. });

jQuery will run your code as soon as the DOM and page are fully loaded and jQuery is set up. If this happens so quickly that it has already occurred by the time the $() command runs, it will run it immediately

Removing elements#

.detach() removes the set of elements from the page, but keeps their data around so they can be reinserted.
.remove() removes the set of elements from the page and erases their data.
.empty() removes all descendants of all elements in the set.
.unwrap() removes the immediate parents of all elements in the set, replacing them with the elements themselves.

Inserting elements#

.append() and .prepend() insert new content inside the target elements, before or after the existing content.
.after() and .before() insert new content after or before the target element(s), inside their parent elements.
.wrap() encloses each target element in a new element. .wrapAll() creates a new element with the smallest scope that can cover all target elements.
You can create new elements to pass as parameters to these functions using the createElement DOM function as before, or by passing a string of HTML to jQuery: eg, $("New Paragraph")

Animation#

jQuery includes some support for simple animations.
These should not be used frivolously, but can be very useful for making it clear to the user how a web page is changing.
For example, if a new item is added at the top of a list, it is much clearer to the user if they see the other items slide down first.
Like AJAX, jQuery animations are asynchronous. The methods return instantly and your script can continue running while the animation is taking place.
- Each animation method can accept a dictionary of specific settings for that method, or a standard set of two parameters: a duration (how long the animation should take in milliseconds -higher is slower) and a completion function (to be called when the animation is finished - not mandatory).
If multiple animation methods are called on a single object, they form a queue and occur in order.

Animation methods#

.delay(): waits the given number of ms (use between steps).
.fadeIn(), .fadeOut(), fadeToggle(): makes an object visible or invisible (using the CSS display property) by fading it in or out from the background, by altering the opacity.
.slideDown(), .slideUp(), .slideToggle(): make an object visible or invisible by sliding; slideDown reveals an object, slideUp hides it.
.animate() can animate any CSS property that is a single number (not a color or similar) by changing its value to a different value over time.

jQuery and AJAX#

jQuery also includes a global helper function for making AJAX calls.

1
function menuLoaded(response, status) {
2
  …
3
}
4
$.ajax({
5
    url: "menuserver?pageid="+menuid,
6
    method: "GET",
7
    timeout: 500,
8
    complete: menuLoaded
9
});

JavaScript Frameworks#

JavaScript frameworks are extensions to JavaScript that change how your JavaScript code is executed.
Typically, code written using a JavaScript framework will need to be either:
- Run using a custom tool;
- Compiled into regular JavaScript and web pages before being deployed on a web server.
The Node.js framework allows JavaScript to be used as an interpreted language, like Python, to write ordinary desktop programs rather than web pages. It is not used for web development but it is important to know about it, because most compilers used to generate pages from web frameworks are written using it.

One of the biggest difficulties with writing JavaScript programs is that when data changes, you have to manually restructure the web page to represent the updated data.
For example, if a page contains a list of options and you want to add a new option, you have to manually
- Find the part of the DOM holding the list
- Create a new element to hold the new option
- Insert it at an appropriate place in the DOM
- Hook up appropriate event handlers to it
jQuery can help, but you still have to do these tasks.
This is a classic issue addressed by web based JavaScript Frameworks.

You have seen the template language that can be used when outputting a web page from Flask.
In Flask, maintaining a template is fairly simple, because the server’s task ends after the template is used to generate HTML. If the template is generated again later, it will be on a separate web request and can be done from scratch.
On the client, however, the user is constantly interacting with the page. A client template must be dynamic and reactive:
- It must be able to provide interaction with the user in the same way a regular web page could;
- It must be able to update when the variables used in the template are changed, rather than being calculated again from scratch.

ReactJS#

The ReactJS framework is a JavaScript-centric framework for reactive templates.
Instead of writing HTML for interactive areas of the page, you define JavaScript functions that return the HTML.
ReactJS uses a special syntax called JSX to allow this. JSX must be compiled to regular JavaScript using a tool included with ReactJS.

1
return items.map((item) => (
2
  <li> {item.name} </li>
3
));

Each interactive part of the page is represented by an instance of a class you define.
- This allows you to have several parts with similar interactions but different data by instantiating the class twice.
The class contains a state dictionary, and must define a render() method which returns the HTML for that part of the page, based on the state.
Whenever the state of an instances is changed, ReactJS automatically calls the render() method and updates the appropriate part of the page to reflect the new HTML it returns.

ReactJS update flow#

Angular#

The Angular framework functions in a similar way, but presents dynamic templates by modifying HTML files instead of returning them from JavaScript.
This can be harder to work with and requires more work by the framework, but has the advantage that the templates are similar to those used in Jinja and other server side template languages.

1
<div *ngFor="let item of items">
2
    <li>
3
        <p>{{ item.text }}</p>
4
        <button (click)="share()">
5
        Share
6
        </button>
7
    </li>
8
</div>

Vue#

Vue or Vue.js works in a similar way to Angular, except that rather than being pre-processed, templates are stored inside regular HTML files.
Vue loads the HTML file to the client and then processes it on the client to create the template data structures it needs.
This saves a conversion step in development and can make templates easier to integrate with other software, but puts more load on the client.

JavaScript Frameworks#

Covering JavaScript frameworks in detail is beyond the scope of the module, but all can be downloaded and used freely.
Most also provide basic online development tools to allow you to experiment with them.
The frameworks and libraries presented here are not the only ones available, just some of the most popular ones.

Web Application Development Practical9: jQuery

Wed, 06 May 2026 00:00:00 GMT

Copy and paste the following code into an HTML ﬁle. This is an alternative version of the exercise from practical 4, but written in the jQuery style rather than using the plain DOM. It uses the downloaded version of jQuery.

1
<html>
2
    <head>
3
        <script src="jquery-3.7.1.js"></script>
4
        <script>
5
            "use strict";
6

7
            function add(item, price) {
8
                let new_block=$("<tr><td>"+item+"</td><td>"+price+"</td></tr>"); new_block.css("color","red");
9

10
                $("#order tr").css("color","black");
11
                $("#order").append(new_block);
12

13
                let old_total = $("#total").val();
14
                let new_total;
15
                if (old_total == "") {
16
                    new_total = price;
17
                } else {
18
                    new_total = parseInt(old_total) + price;
19
                }
20
                $("#total").val(new_total);
21
            }
22

23
            function setup() {
24
                $("button.item").click(e => { add($(e.target).attr("data-item"),
25
                parseInt($(e.target).attr("data-price"))); });
26
            }
27

28
            $(setup);
29
        </script>
30
    </head>
31

32
    <body>
33
        <table id="order">
34
            <tr>
35
                <th>Item</th><th>Price</th>
36
            </tr>
37
        </table>
38

39
        <p>
40
            Total: <input id="total" type="text" id="total" readonly></input>
41
        </p>
42

43
        <button class="item" data-item="Burger" data-price="10">Burger</button>
44
        <button class="item" data-item="Chips" data-price="5">Chips</button>
45
        <button class="item" data-item="Salad" data-price="7">Salad</button>
46
    </body>
47
</html>

展开收起

Run this script in your browser, and read through it to understand how it works. (The abbreviated code style of jQuery may be difficult to understand at first.)
Add a fourth button to add a Milkshake to the order which costs 2 pounds. Note how the setup() method now makes this easier than it previously was.

1
<button class="item" data-item="Milkshake" data-price="2">Milkshake</button>

Modify the script so that newly added items fade in instead of just appearing.
- You will need to make new_block be initially hidden. (jQuery will do nothing if asked to fade in an item that is already visible.) You can do this by calling the jQuery hide() method on it before adding it to the document. Do not do it by setting visibility: hidden in CSS, as jQuery does not update this.
- Remember to use fadeIn only after the new line is added to the table. It must already be added to the DOM before it can be animated.

1
// Hide the new block before adding it to the page, then fade it in after it's added.
2
new_block.hide();
3

4
$("#order tr").css("color","black");
5
$("#order").append(new_block);
6

7
// Fade in the new block after it's been added to the page.
8
new_block.fadeIn();

Modify the script to add a delete button to each row, as you did in the previous practical, but using the jQuery methods to add the button and event handler. You can still use a value closure in the same way you did without jQuery. Remember to reduce the total and to use the jQuery method to remove the row from the table.
- If you specify the delete button in HTML, as in the code above, then you may need to use the find method on new_block to get a jQuery reference to it.
- To read the price back from the table when deleting an item, you could mark the cells holding prices with a class, or use the CSS selector :nth-of-type(2) which selects the 2nd (or 3rd, 1st, 4th, etc…) item of a given type in a container. As before, remember that delete is a reserved word in JavaScript. Do not try to write a function called delete.

1
function add(item, price) {
2
    let new_block = $("<tr></tr>");
3
    let item_cell = $("<td></td>").text(item);
4
    let price_cell = $("<td></td>").text(price);
5
    let delete_cell = $("<td></td>");
6
    let delete_button = $("<button class='delete'>Delete</button>");
7
    delete_button.click(e => {
8
        let old_total = parseInt($("#total").val());
9
        let new_total = old_total - price;
10
        $("#total").val(new_total);
11

12
        // Prevent the user from clicking Delete rapidly while the fade-out animation is still running.
13
        delete_button.prop("disabled", true);
14

15
        // Fade out the row (use the new_block variable) before removing it from the page.
16
        new_block.fadeOut(400, () => {
17
          new_block.remove();
18
        });
19
    });
20
    // Append the <td> cells into the <tr>
21
    new_block.append(item_cell);
22
    new_block.append(price_cell);
23
    new_block.append(delete_cell);
24
    delete_cell.append(delete_button);
25
    new_block.css("color", "red");
26
    // Hide the new block before adding it to the page, then fade it in after it's added.
27
    new_block.hide();
28

29
    $("#order tr").css("color","black");
30
    $("#order").append(new_block);
31

32
    // Fade in the new block after it's been added to the page.
33
    new_block.fadeIn();
34

35
    let old_total = $("#total").val();
36
    let new_total;
37
    if (old_total == "") {
38
      new_total = price;
39
    } else {
40
      new_total = parseInt(old_total) + price;
41
    }
42
    $("#total").val(new_total);
43
}

展开收起

Modify the script so that rows fade out when they are deleted. Note that you must allow the fade to complete before calling remove() or detach() on the row. To do this, you will need to use the completion function parameter to fadeOut().
Copy and paste the following code which implements the same functionality but uses the vue.js reactive framework. (Vue.js is used only because it does not require a compiler to be installed separately.)

1
<html>
2
    <head>
3
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
4
        <script src="jquery-3.7.1.js"></script>
5
        <script>
6
        "use strict";
7

8
        function setup() {
9
            var app = new Vue({
10
                el: '#app', data: {
11
                    order: [],
12
                    total: 0,
13
                    menu: [{name: "Burger", price: 10},
14
                    {name: "Chips", price: 5},
15
                    {name: "Salad", price: 7}]
16
                },
17
                methods: {
18
                    add: function(event) {
19
                        let name = $(event.target).attr("data-name");
20
                        let price = $(event.target).attr("data-price");
21
                        this.total += parseInt(price);
22
                        this.order.push({name: name, price: price});
23
                    }
24
                }
25
            });
26
        }
27

28
        $(setup);
29
        </script>
30
    </head>
31

32
    <body>
33
        <div id="app">
34
            <table id="order">
35
                <tr><th>Item</th><th>Price</th>
36
                <tr v-for="item in order">
37
                <td>{{ item.name }}</td><td>{{ item.price }}</td>
38
                </tr>
39
            </table>
40
            <div>
41
            Total: <input type="text" v-model="total" readonly></input>
42
            </div>
43
            <span v-for="item in menu">
44
                <button v-bind:data-name="item.name"
45
                        v-bind:data-price="item.price"
46
                        v-on:click="add">{{ item.name }}</button>
47
            </span>
48
        </div>
49
    </body>
50
</html>

展开收起

Run this code and read and understand it. It will probably be helpful to refer to the vue.js documentation at https://vuejs.org/v2/guide/index.html .
Modify this page to add the Milkshake item and to support the delete functionality, as in the previous exercise. You do not need to make the items animate as they are added or deleted.

1
function setup() {
2
    var app = new Vue({
3
        el: '#app', data: {
4
            order: [],
5
            total: 0,
6
            menu: [{name: "Burger", price: 10},
7
            {name: "Chips", price: 5},
8
            {name: "Salad", price: 7},
9
            {name: "Milkshake", price: 2}]
10
        },
11
        methods: {
12
            add: function(event) {
13
                let name = $(event.target).attr("data-name");
14
                let price = parseInt($(event.target).attr("data-price"), 10);
15
                this.total += price;
16
                this.order.push({name: name, price: price});
17
            },
18
            remove: function(index) {
19
                let item = this.order[index];
20
                if (!item) return;
21
                this.total -= item.price;
22
                this.order.splice(index, 1);
23
            }
24
        }
25
    });
26
}

展开收起

1
<body>
2
    <div id="app">
3
        <table id="order">
4
            <tr>
5
                <th>Item</th>
6
                <th>Price</th>
7
                <th>Action</th>
8
            </tr>
9
            <tr v-for="(item, index) in order" :key="index">
10
                <td>{{ item.name }}</td>
11
                <td>{{ item.price }}</td>
12
                <td><button @click="remove(index)">Delete</button></td>
13
            </tr>
14
        </table>
15
        <div>
16
        Total: <input type="text" v-model="total" readonly></input>
17
        </div>
18
        <span v-for="item in menu">
19
            <button v-bind:data-name="item.name"
20
                    v-bind:data-price="item.price"
21
                    v-on:click="add">{{ item.name }}</button>
22
        </span>
23
    </div>
24
</body>

展开收起

Data Structures and Algorithms Coursework2

Fri, 01 May 2026 00:00:00 GMT

Individual work

Learning outcomes#

Students will be able to understand
学生将能够理解：

1.1 Data structures 数据结构

1.2 The applications of data structures 数据结构的应用

1.3 Object-oriented programming concepts 面向对象编程概念

1.4 Methods for program testing 程序测试方法

Students will have acquired skills in:
学生将掌握以下技能：

2.1 Data abstraction 数据抽象

2.2 The use of data structures 数据结构的使用

2.3 Programming at a more advanced level in a high-level object-oriented language
高级面向对象编程

2.4 Program testing and documentation 程序测试与文档编写

Students will have acquired skills in:
学生将掌握以下技能：

3.1 Self-management 自我管理

3.2 Learning 学习

3.3 Communication 沟通

3.4 Problem solving 问题解决

3.5 Information technology 信息技术

Submission requirements#

The assignment submitted should be compressed into a .zip file containing the code files: the runnable jar file (if available) and all the program’s source files (.java), including those provided.
提交的作业应压缩为一个 .zip 文件，其中包含代码文件：可运行的 jar 文件（如有）以及所有程序源文件（.java），包括课程提供的源文件。

filename format: student ID + CHC5223_CW2_Files.zip

Introduction#

This coursework covers binary search trees, stacks, queues, graphs, and path-finding algorithms. The objective is to develop a comprehensive understanding and practical implementation of these data structures and algorithms and to apply them to solve relevant problems.
本次课程作业涵盖二叉搜索树、栈、队列、图以及路径查找算法。目标是全面理解这些数据结构与算法，完成它们的实际实现，并将其应用于解决相关问题。

Assessment Rules#

Coursework 2 weighs 60% of the entire coursework. 100% of the marks for Coursework 2 will be assessed through Class Test 2.
Coursework 2 占整个课程作业成绩的 60%。Coursework 2 的 100% 分数将通过 Class Test 2 进行评估。

The score will be marked by how well you performed on the class test.
分数将根据你在课堂测试中的表现评定。
You must retain and understand all code and annotations created for this coursework to succeed in the test.
为了在测试中取得好成绩，你必须保留并理解为本次作业创建的所有代码和注释。
All of the questions in the class test include, but are not limited to, testing your ability to encode, understand and apply what you have learned.
课堂测试中的所有问题都会考查你的编码、理解和应用所学内容的能力，但不限于这些方面。

Implementations#

Basic rules#

You must create at least one executable project after completing all tasks.
完成所有任务后，你必须创建至少一个可执行项目。
Do not use built-in collection libraries
(e.g., java.util.ArrayDeque, java.util.Deque, java.util.TreeMap, java.util.ArrayList/LinkedList) for the core implementations. Use basic arrays and your own classes.
核心实现不得使用内置集合库
（例如 java.util.ArrayDeque、java.util.Deque、java.util.TreeMap、java.util.ArrayList/LinkedList）。应使用基本数组和你自己的类。
All code must adhere to good programming practices (comments, meaningful naming).
所有代码都必须遵循良好的编程实践，包括适当注释和有意义的命名。

Task 1: Binary Search Tree Implementation#

任务 1：二叉搜索树实现

Design and implement a binary search tree data structure.
设计并实现一个二叉搜索树数据结构。

The binary search tree should be a generic data structure that can store elements of integer data type.
二叉搜索树应作为一种通用数据结构，能够存储整数类型的数据元素。
Implement a TreeNode class that represents each node in the binary search tree. Each node should contain the data, a reference to the left child node, and a reference to the right child node.
实现一个 TreeNode 类，用于表示二叉搜索树中的每个节点。每个节点应包含数据、指向左子节点的引用以及指向右子节点的引用。
1. The node class should have appropriate constructors and accessor methods.
  节点类应具有合适的构造方法和访问器方法。
2. It should maintain the integrity of the binary search tree structure and the ordering property.
  它应维护二叉搜索树结构的完整性以及排序性质。
Implement a BinarySearchTree class that represents the binary search tree itself. It should include methods for inserting nodes, deleting nodes, performing pre-order traversal, in-order traversal, post-order traversal, searching for a specific value, and returning the height of the tree.
实现一个 BinarySearchTree 类，用于表示二叉搜索树本身。该类应包含插入节点、删除节点、执行前序遍历、中序遍历、后序遍历、搜索特定值以及返回树高度的方法。
1. For the pre-order traversal method, it should visit the root node first, then recursively traverse the left subtree, and finally the right subtree. The method should return a list of the visited nodes in the preorder sequence.
  对于前序遍历方法，应先访问根节点，然后递归遍历左子树，最后遍历右子树。该方法应返回按前序顺序访问到的节点列表。
2. For the in-order traversal method, it should recursively traverse the left subtree first, then visit the root node, and finally the right subtree. The method should return a list of the visited nodes in the in-order sequence.
  对于中序遍历方法，应先递归遍历左子树，然后访问根节点，最后遍历右子树。该方法应返回按中序顺序访问到的节点列表。
3. For the post-order traversal method, it should recursively traverse the left subtree first, then the right subtree, and finally visit the root node. The method should return a list of the visited nodes in the post-order sequence.
  对于后序遍历方法，应先递归遍历左子树，再遍历右子树，最后访问根节点。该方法应返回按后序顺序访问到的节点列表。
4. The insertion operation should maintain the binary search tree property (i.e., for each node, all values in the left subtree are less than the node’s value, and all values in the right subtree are greater than the node’s value). In case of duplicate values, handle them according to a predefined rule (e.g., allow duplicates and insert them either to the left or right subtree based on a specific criterion).
  插入操作应保持二叉搜索树性质（即对于每个节点，左子树中的所有值都小于该节点的值，右子树中的所有值都大于该节点的值）。如果出现重复值，应根据预先定义的规则进行处理（例如允许重复值，并根据特定标准将其插入左子树或右子树）。
5. The deletion operation should handle different cases (leaf node, node with one child, node with two children) properly while maintaining the binary search tree property.
  删除操作应在保持二叉搜索树性质的同时，正确处理不同情况（叶子节点、只有一个子节点的节点、具有两个子节点的节点）。
6. The search operation should return the node if the value is found or null otherwise.
  搜索操作在找到目标值时应返回对应节点，否则返回 null。
7. The height calculation method should return the correct height of the tree.
  高度计算方法应返回树的正确高度。
The implementation should include error handling to handle errors such as deleting a non-existent node and searching for a value in an empty tree.
实现中应包含错误处理，用于处理删除不存在的节点、在空树中搜索值等错误情况。
1. Provide meaningful error messages to help users understand the problem.
  提供有意义的错误信息，帮助用户理解问题。
Test the implementation.
测试该实现。
1. Create a set of 500 random integer data in an unordered sequence.
  创建一组包含 500 个随机整数的无序数据。
2. Create an object of the BinarySearchTree.
  创建一个 BinarySearchTree 对象。
3. Using the integer set to test the functionality and correctness of the object.
  使用该整数集合测试对象的功能和正确性。

Task 2: Stack and Priority Queue Implementation#

任务 2：栈和优先队列实现

Design and implement a stack and a priority queue data structure.
设计并实现栈和优先队列数据结构。

The stack should be a Last-In-First-Out (LIFO) data structure that can store elements of the string data type.
栈应是一个后进先出（LIFO）的数据结构，能够存储字符串类型的数据元素。
1. Implement a StackNode class and a Stack class. The Stack class should include methods for pushing elements onto the stack, popping elements from the stack, checking if the stack is empty, and getting the size of the stack.
  实现一个 StackNode 类和一个 Stack 类。Stack 类应包含将元素压入栈、从栈中弹出元素、检查栈是否为空以及获取栈大小的方法。
2. The implementation should handle stack overflow and underflow conditions gracefully.
  实现应妥善处理栈溢出和栈下溢情况。
The priority queue should be a data structure that can store elements of the string data type and prioritize them based on a priority function.
优先队列应是一种能够存储字符串类型元素的数据结构，并根据优先级函数对元素进行优先级排序。
1. Implement a PriorityQueueNode class and a PriorityQueue class. The PriorityQueue class should include methods for enqueuing elements into the queue, dequeuing elements from the queue, checking if the queue is empty, and retrieving the size of the queue.
  实现一个 PriorityQueueNode 类和一个 PriorityQueue 类。PriorityQueue 类应包含入队、出队、检查队列是否为空以及获取队列大小的方法。
2. Implement a priority function that changes the priority of an element based on an integer value.
  实现一个优先级函数，根据整数值改变元素的优先级。
3. The implementation should ensure that elements are dequeued in the correct priority order.
  实现应确保元素按照正确的优先级顺序出队。
Test the implementation.
测试该实现。
1. Create an object of the Stack class and an object of the PriotityQueue class.
  创建一个 Stack 类对象和一个 PriotityQueue 类对象。
2. Design test cases to test the functionality and correctness of the object.
  设计测试用例来测试对象的功能和正确性。

Task 3: Graph Implementation#

任务 3：图实现

Design and implement a graph data structure.
设计并实现一个图数据结构。

The graph should be represented using an adjacency list.
图应使用邻接表表示。
1. The adjacency list should be implemented by using the doubly linked list structure.
  邻接表应使用双向链表结构实现。
2. It should handle the storage of vertex and edge information appropriately.
  它应能够适当地存储顶点和边的信息。
Design and implement a Graph class that represents the graph. It should include methods for adding vertices, adding edges between vertices, removing vertices, removing edges, checking if two vertices are adjacent, performing depth-first traversal (DFT) and breadth-first traversal (BFT), and using the stack and priority queue implemented in Task 2 for specific graph operations (e.g., using the stack for topological sorting or the priority queue for Dijkstra’s algorithm implementation).
设计并实现一个表示图的 Graph 类。该类应包含添加顶点、在顶点之间添加边、删除顶点、删除边、检查两个顶点是否相邻、执行深度优先遍历（DFT）和广度优先遍历（BFT）的方法，并在特定图操作中使用任务 2 中实现的栈和优先队列（例如使用栈进行拓扑排序，或使用优先队列实现 Dijkstra 算法）。
1. The adding vertices method should update the graph structure correctly.
  添加顶点的方法应正确更新图结构。
2. The adding edges method should handle weighted and unweighted edges properly.
  添加边的方法应正确处理带权边和无权边。
3. The removing vertices method should remove all associated edges as well.
  删除顶点的方法也应删除所有相关边。
4. The removing edges method should update the graph structure accordingly.
  删除边的方法应相应地更新图结构。
5. The adjacent check method should return true or false accurately.
  相邻检查方法应准确返回 true 或 false。
6. For the DFT method, it should start from a given vertex and explore as deep as possible along each branch before backtracking. The method should return a list of vertices visited in the order of traversal.
  对于 DFT 方法，应从给定顶点开始，在回溯之前沿每个分支尽可能深入地探索。该方法应返回按遍历顺序访问到的顶点列表。
7. For the BFT method, it should start from a given vertex and visit all the vertices at the current level before moving to the next level. The method should return a list of vertices visited in the order of traversal.
  对于 BFT 方法，应从给定顶点开始，先访问当前层级的所有顶点，再移动到下一层级。该方法应返回按遍历顺序访问到的顶点列表。
The implementation should handle the case of weighted and unweighted edges.
实现应能够处理带权边和无权边的情况。
1. Store and access the weight information correctly if applicable.
  如适用，应正确存储和访问权重信息。
2. Differentiate between weighted and unweighted operations when necessary.
  必要时应区分带权和无权操作。
The implementation should include error handling to handle errors such as adding an edge between non-existent vertices and removing a non-existent vertex.
实现中应包含错误处理，用于处理在不存在的顶点之间添加边、删除不存在的顶点等错误情况。
1. Provide appropriate error handling and feedback.
  提供适当的错误处理和反馈。
2. Ensure the graph remains in a consistent state after error handling.
  确保图在错误处理后仍保持一致状态。
Test the implementation.
测试该实现。
1. Design a graph that contains at least 10 vertices and more than 30 edges. Generate an object of the Graph class according to the graph you designed.
  设计一个至少包含 10 个顶点且超过 30 条边的图，并根据设计创建一个 Graph 类对象。
2. Design and use test cases to test the functionality and correctness of the object.
  设计并使用测试用例来测试对象的功能和正确性。

Task 4: Path Finding Algorithm Implementation#

任务 4：路径查找算法实现

Implement Dijkstra’s algorithm to find the shortest path between two vertices in the graph implemented in Task 3.
实现 Dijkstra 算法，用于在任务 3 实现的图中查找两个顶点之间的最短路径。

Implement a method within the Graph class to implement these algorithms.
在 Graph 类中实现一个方法来完成这些算法。
1. The start and the end vertex for path-finding could be set manually.
  路径查找的起点和终点可以手动设置。
The implementation should use the data structures created in Task 2 if needed.
如有需要，实现应使用任务 2 中创建的数据结构。
The implementation should return the shortest path and its length.
实现应返回最短路径及其长度。 2. The path should be represented in a suitable format (e.g., a list of vertices).
路径应以合适的格式表示（例如顶点列表）。 3. The length should be calculated accurately.
路径长度应准确计算。
The implementation should handle the case as no path between the two vertices.
实现应处理两个顶点之间不存在路径的情况。
1. Return an appropriate indication (e.g., null or a special value) when no path exists.
  当不存在路径时，应返回适当的标识（例如 null 或特殊值）。
The implementation should include error handling to handle errors such as invalid vertex inputs.
实现中应包含错误处理，用于处理无效顶点输入等错误情况。
1. Validate the vertex inputs and provide error messages if they are incorrect.
  验证顶点输入；如果输入不正确，应提供错误信息。
Test the implementation.
测试该实现。
1. Design and use test cases to test the functionality and correctness of the methods.
  设计并使用测试用例来测试这些方法的功能和正确性。

Task 5 Complexity Comparison and Analysis (Annotation)#

任务 5：复杂度比较与分析（注释）

Analyse and compare the time and space complexities of all the implementations in Tasks 1 through 4. Write the analysis and conclusion as a block annotation in each task implementation.
分析并比较任务 1 到任务 4 中所有实现的时间复杂度和空间复杂度。将分析和结论以块注释的形式写入每个任务的实现中。

For the binary search tree, analyze the complexity of insertion, deletion, traversal (pre-order, in-order, post-order), and search operations in different scenarios (e.g., best case, average case, worst case).
对于二叉搜索树，需要分析插入、删除、遍历（前序、中序、后序）和搜索操作在不同场景下的复杂度（例如最好情况、平均情况、最坏情况）。
For the graph, compare the complexity of adding vertices, adding edges, removing vertices, removing edges, DFT, BFT, and the path-finding algorithms when applied to different graph types (e.g., sparse graphs, dense graphs).
对于图，需要比较添加顶点、添加边、删除顶点、删除边、DFT、BFT 以及路径查找算法在不同图类型（例如稀疏图、稠密图）中的复杂度。
Explain the factors that influence the complexity in each case and discuss any trade-offs between different data structures and algorithms.
解释每种情况下影响复杂度的因素，并讨论不同数据结构与算法之间的权衡。

Obtaining help#

It is encouraged to request further clarification on what is required for this assignment. Please try to do this during normal contact time and avoid asking for such help in the last week before the deadline.
鼓励你进一步询问本作业要求的具体内容。请尽量在正常联系时间内提出问题，避免在截止日期前最后一周才寻求此类帮助。

You can discuss the requirements and the material covered in the coursework with others but what you create must be all your work. Be careful to avoid collusion.
你可以与他人讨论本作业的要求以及课程作业涵盖的材料，但你提交的内容必须完全是你自己的成果。注意避免串通作弊。

Feedback#

In addition to the written feedback of the class test, we aim to provide within the normal interval, you will be able to obtain fast, brief, verbal formative feedback and help on correcting your work in your practical classes.
除了课堂测试的书面反馈外，我们还会尽量在正常时间范围内，在实践课中为你提供快速、简短的口头形成性反馈，并帮助你修改作业。

Practical: Stacks, Queues and Friendship Graphs

Thu, 30 Apr 2026 00:00:00 GMT

Warm Tip

Complete source code zip is provided for download at end of this article.

Practical: Stacks and Queues#

This practical takes a look at the abstract datatypes stacks and queues. You will also write some code that uses stack and/or queue operations to implement the rules for a Patience game.

Exercise 1 (for discussion)#

Determine which kind of behavior would be displayed by each of the following (stack, queue). Justify your answers.
a) Names of tutors at St Custard’s Tutorial College where tutor first to be laid off (made redundant) is a longest-serving tutor.
b) Names of employees at Fosdyke’s Mill where employee first to be laid off (made redundant) is most recently taken on.
c) letters awaiting sorting in a postal sorting office.

Exercise 2 – Fortress Patience#

The rules of Fortress Patience are shown on the next page.
a) Get familiar with how the game is played - see the rules on the web page, but ask your tutor if anything is unclear.
b) Spot which card arrangement(s) might involve a …stack? …queue? …list? …array?
For any stack you find, identify the top of the stack.
For any queue you find, identify the front and back of the queue.

Check your answers with your practical tutor to see if you’re right, before continuing.

Fortress Patience Rules Summary#

The ranks of the cards “wrap around”: 2, 3, 4, 5, 6, 7, 8, 9, 10, J, Q, K, A, 2, 3, … Only a card that is uppermost on the end of a row can be moved, and can be moved either to another row or a foundation pile, subject to the following constraints:

Any movable card may be moved to an empty foundation pile, provided there is not already a foundation pile for cards of the same suit.

For example, in this game, the A♣︎ or the 6♣︎ could be moved to an empty foundation pile, but not the 9♠︎, because there is already a foundation for ♠︎s.

A movable card may be moved to a non-empty foundation pile only if it is the same suit as, and one higher in rank than, the card currently on top of the foundation pile.

For example, in this game, the 6♠︎ could be moved on top of the 5♠︎, but not the 9♠︎ (wrong rank), nor the 6♣︎ (wrong suit).

Any movable card may be moved to an empty row.
A movable card may be moved to the uppermost end of a non-empty row, only if it is the same color as, and one differing in rank from, the card currently uppermost on the destination row.

For example, in this game, either the 7♣︎ or the 5♣︎ could be moved on top of the 6♠︎. But neither the A♠︎ nor the 6♣︎ could be moved on top of the 6♠︎ (wrong rank). The 6♦︎ could not be moved on top of the 7♣︎ (wrong color).
Also, nothing can currently be put on top of the A♣︎ because there isn’t a black 2 or a black K available at the uppermost end of a row.

Exercise 3 – Set-up#

Create a new, empty project. Be careful to untick the box that asks you if you want to create a main class. Download the practical start code from the Students Website and paste it into the /src file of your new project.

You should now have the project ready to go. The files it contains are as follows:

Patience.java – the main file (no need to look at this file)
Card.java – a class to represent a playing card (look, but don’t alter)
CardStack.java – a class representing an arrangement of playing cards with stack-like behavior (look, but don’t alter)
Rules.java – where you will write the code for the rules of the game
Controller.java – the class that draws and controls the visual display (no need to look at this file)
GameDisplay.java – the class that specifies the user interaction with the game and how the stacks are to be displayed
StackDisplayInfo.java – a container class that stores details of how to display the stacks graphically
PictureCards.java – a class that provides drawing methods for J,Q,K cards (no need to look at this file)

Try compiling and running the program – if it asks you to set a main class, just select Patience as the main class. The program should compile and run ok, and produce a random layout of cards for the game, but it won’t allow any cards to be moved yet.

Exercise 4 – Code Inspection#

a) Take a look at the Card class, see how it represents a card, and see what methods it has. It’s well-commented, so you should be able to understand everything, but ask your practical tutor if there’s anything you’re unclear about.

b) Similarly, take a look at the CardStack ¹ class. You should find standard stack methods available.

c) The Rules class is where you’re going to be writing code. Part of this class shuffles and deals the cards (this bit is written for you), and you are going to write the code to allow card moves according to the rules of Fortress Patience.

Within the Rules class, notice the data structures foundations and rows used to hold the arrangements of cards. Here’s a diagram to show you which part of the layout of cards corresponds to which bit of these two data structures:

d) You are going to be implementing the following two methods in the Rules class:

moveRowCardToFoundationIfPossible
called every time called the user tries to move the uppermost card of a row to one of the foundation piles
moveRowCardToRowIfPossible
called every time the user tries to move the uppermost card of a row to another row

Look at their descriptions, in particular their pre-conditions and post-conditions, and check that you are clear about what each method is supposed to do.
Run the program again, trying to clicking on cards in attempts to move them, and watch what appears in the Output window – you should see it state when it is calling one of these methods. That should help to make it clear when one of these methods is being called.

Exercise 5 – Moving cards#

A good place to start is to write code to move the cards, without worrying about whether a move is allowed or not according to the rules of the game. So, for each of the two methods listed above, implement a simple move of the correct card to where the user tried to move it to, ignoring the rules for now.
Test your code by running the program and checking that the card does move in the right fashion.
Hint:

You’ll have to think how to refer to where the card is going from, and how to refer to where the card is going to. You’ll also have to think about which operation(s) might be useful for removing a card from where it is currently, and how you can move the card to the correct destination.

Exercise 6 – Card moves between rows#

Now change your code for the moveRowCardToRowIfPossible method so that it incorporates the rules for moving the uppermost card of a row onto another row, only moving the card when it’s supposed to move according to the rules of Fortress Patience.
Hints:

Make sure you are clear about what the rules say for a card move in between rows. If you are not sure about what the rules say, ask your tutor.
Try implementing the restriction on card colors first, then worry about their ranks. Look carefully at what the rules say about card rankings!
You’ll have two cases to deal with: when the destination row is empty, and when there’s one or more cards there already.
Note the preconditions for some of the stack methods, and be careful that you don’t call a method with the precondition “The stack is not empty” when the stack is, in fact, empty. If you do violate the precondition, what happens?
You may find it helpful to write a method to find out whether the rank of one card is one higher than the rank of another card (remember the “wraparound” rule).
Try and test whether your method works, by running the program and trying lots of card moves between rows. Be sure to check not only that a card gets moved from the correct row to the correct destination row when it is supposed to be, but also check that when a card is NOT supposed to move, that it does indeed remain unmoved.
Also test what happens when you try and move a card to an empty row. As you’ve not yet implemented rules for moving of cards to foundation piles, you should be easily able to move all the cards in a row out of the way to empty it and thus test this aspect of your code.

Exercise 7 – Card moves to foundation piles#

Now change your code for the moveRowCardToFoundationIfPossible method that moves a card from a row to a foundation pile, and incorporate the rules about suit-matching (not color-matching this time!) and rank when adding to a non-empty foundation. (For the moment, allow any card to be moved to an empty pile: the restrictions on moving a card to an empty pile are addressed in the exercise below.)
Hints: see the hints for the previous exercise, and test similarly.

Exercise 8 – Card moves to foundation piles#

Further change your code for the moveRowCardToFoundationIfPossible method so that it also incorporates the restriction for moving a card from a row to an empty foundation pile: a card can’t be moved to an empty foundation pile if there is already a foundation pile for that suit.
Hint:

You will need to be creative to think of how you can examine the other foundation piles and figure out whether there is already a foundation pile for the relevant suit.

Exercise 9 - Enjoy a nice game of Fortress Patience ☺︎#

Reference Answer

Rules.java展开收起

1
/** This method is called when the user tries to move the uppermost
2
  * card of the r-th row, to the f-th foundation pile.
3
  *
4
  * Pre:  0<=r<10    (i.e. the index of the row is within range)
5
  *       && 0<=f<4    (i.e. the index of the foundation is within range)
6
  *       && !rows[r].isEmpty() (i.e. there is at least one card in the row)
7
  *
8
  * Post: If the rules permit, the uppermost card of the r-th row
9
  *       been moved onto the f-th foundation pile, leaving all other
10
  *       cards where they were.
11
  *       If the rules do not permit this move, all cards are left
12
  *       exactly where they were before.
13
  */
14
    public void moveRowCardToFoundationIfPossible(int r, int f) {
15
        // Pre-conditions guaranteed by caller: r in range, f in range, and rows[r] not empty
16
        CardStack source = rows[r];
17
        CardStack dest = foundations[f];
18
        if (source.isEmpty()) return; // defensive
19

20
        Card top = source.peek();
21

22
        // If destination foundation is empty: any card may be placed
23
        // provided there is not already a foundation pile for that suit.
24
        if (dest.isEmpty()) {
25
            // check other foundations for same suit
26
            for (int i = 0; i < foundations.length; i++) {
27
                if (!foundations[i].isEmpty()) {
28
                    Card ft = foundations[i].peek();
29
                    if (ft.getSuit() == top.getSuit()) {
30
                        // there's already a foundation pile for this suit
31
                        return;
32
                    }
33
                }
34
            }
35
            dest.push(source.pop());
36
            return;
37
        }
38

39
        // Otherwise, can place if same suit and rank is one higher than foundation top
40
        Card destTop = dest.peek();
41
        if ((top.getSuit() == destTop.getSuit())
42
            && isOneHigher(top, destTop)) {
43
            dest.push(source.pop());
44
        }
45
    }
46

47

48
/** This method is called when the user tries to move the uppermost
49
  * card of the r1-th row, onto the uppermost end of the r2-th row.
50
  *
51
  * Pre:  0<=r1<10    (i.e. the index of the source row is within range)
52
  *       && 0<=r2<10  (i.e. the index of the destination row is within range)
53
  *
54
  * Post: If the rules permit, the uppermost card of the r1-th row has
55
  *       been moved onto the uppermost end of the r2-th row, leaving all other
56
  *       cards where they were.
57
  *       If the rules do not permit this move, all cards are left
58
  *       exactly where they were before.
59
  *
60
  */
61
    public void moveRowCardToRowIfPossible(int r1, int r2) {
62
        // Pre-conditions guaranteed by caller: r1 and r2 are within 0..9
63
        CardStack source = rows[r1];
64
        CardStack dest = rows[r2];
65

66
        // nothing to do if source empty
67
        if (source.isEmpty()) return;
68

69
        Card moving = source.peek();
70

71
        // Case 1: destination empty. In Fortress Patience only a King may be placed
72
        if (dest.isEmpty()) {
73
            if (moving.getRank() == Card.KING) {
74
                dest.push(source.pop());
75
            }
76
            return;
77
        }
78

79
        // Case 2: destination non-empty. Build down by same color,
80
        // and the destination top must differ in rank by exactly 1 (wraparound allowed)
81
        Card destTop = dest.peek();
82
        // colors must be the same
83
        if (!moving.getColour().equals(destTop.getColour())) return;
84

85
        // rank must differ by exactly 1, with wraparound (K<->A)
86
        if (isAdjacentRank(moving, destTop)) {
87
            dest.push(source.pop());
88
        }
89
    }
90

91
    /** Returns true if card a's rank is exactly one higher than card b's rank.
92
      * Accounts for wraparound: Ace is considered one higher than King.
93
      */
94
    private boolean isOneHigher(Card a, Card b) {
95
        int ra = a.getRank();
96
        int rb = b.getRank();
97
        if (ra == rb + 1) return true;
98
        // wraparound: Ace (1) is one higher than King (13)
99
        if ((ra == Card.ACE) && (rb == Card.KING)) return true;
100
        return false;
101
    }
102

103
    /** Returns true if the ranks of a and b differ by exactly 1, accounting for wraparound.
104
      * Examples: (7,6)->true, (5,6)->true, (A,K)->true, (A,2)->true.
105
      */
106
    private boolean isAdjacentRank(Card a, Card b) {
107
        int ra = a.getRank();
108
        int rb = b.getRank();
109
        if (Math.abs(ra - rb) == 1) return true;
110
        // wrap cases: Ace (1) adjacent to King (13)
111
        if ((ra == Card.ACE && rb == Card.KING) || (ra == Card.KING && rb == Card.ACE)) return true;
112
        return false;
113
    }

展开收起

Practical: Friendship Graphs#

Introduction#

In this week’s exercise, we will create code to represent graphs that have features resembling those found on social networking sites like Facebook.

This uses the idea of a “friendship graph” to let you explore representing graphs and doing some useful things with graphs. For example, here’s an (undirected) graph depicting friendships between various people:

For simplicity, all people in the example graphs you’ll use will have different names.

Exercise 1 – Warm-up#

As you will shortly be using adjacency matrices, remind yourself of the concept by stating the adjacency matrix for the above graph:

	Guillaume	Lena	Muhammad	Remi	Tosan	Victoria
Guillaume	F	T
Lena
Muhammad
Remi
Tosan
Victoria

Exercise 2 – Project set-up#

Set yourself up a project from the existing sources supplied on the Students Website, in the usual way.

You’ve been supplied with four code files:

NotFacebook.java – the main program where you’ll write code to call various methods on sample graphs
FriendsGraph.java – a class for representing (undirected) graphs where the nodes are people and the edges are friendships between people.
Node.java – a small container class for representing a node of the graph (which you do not need to alter)
GraphUtilities.java – a class for reading in graphs from files and drawing them on the screen (you don’t need to alter the code in this file).

Run the program (the main method is in the NotFacebook class), to check that the project is set up ok. You’ll be asked to select a file containing a description of a graph.
You have been supplied with three sample graphs, in files graph1.txt, graph2.txt and graph3.txt, so choose one of those. You should find that the nodes of the graph above are displayed, but none of the edges!
Note: for the following exercises, do not change the data structures supplied; use the ones provided for you in the code you’ve been given.

Exercise 3 – Adding Edges#

Getting the edges to appear requires two steps:

First, implement the private addEdge(int node1, int node2) method of the FriendsGraph class (the empty body of the method is supplied for you already).
To do this, you’ll need to look carefully through the FriendsGraph class and see how the nodes and edges are stored using an adjacency matrix, and how the other addEdge method of the FriendsGraph class works. You may need to also look up and remind yourself of how two-dimensional arrays are declared and used in Java: as you will see, the adjacency matrix is a two-dimensional array.

Reference Answer

FriendsGraph.java

1
private void addEdge(int node1, int node2) {
2
    // simple bounds check to help catch incorrect usage
3
    if (node1 < 0 || node1 >= size || node2 < 0 || node2 >= size) {
4
        throw new IndexOutOfBoundsException("Node index out of bounds: " + node1 + " -> " + node2);
5
    }
6
    adjacencyMatrix[node1][node2] = true;
7
}

To make the edges appear, also implement the following method of the FriendsGraph class:

1
/** Returns true if there is an edge from the first node to the second.
2
  *
3
  * @pre           0 < node1, node2 < size
4
  * @param node1   the source node of the queried edge
5
  * @param node2   the target node of the queried edge
6
  * @return        true iff there is an edge node1 -> node2
7
  */
8
public boolean edgeFrom(int node1, int node2)

Reference Answer

FriendsGraph.java

1
public boolean edgeFrom(int node1, int node2) {
2
    // simple bounds check to help catch incorrect usage
3
    if (node1 < 0 || node1 >= size || node2 < 0 || node2 >= size) {
4
        throw new IndexOutOfBoundsException("Node index out of bounds: " + node1 + " -> " + node2);
5
    }
6
    return adjacencyMatrix[node1][node2];
7
}

Check that your methods work ok by viewing all three sample graphs.

Exercise 4 – Finding the index of a node#

Add to the FriendshipGraph class a method with the following signature and specification.

1
/**
2
 * Get the index of a node
3
 * @param name name of a person in the graph
4
 * @return the index of the node that represents the named
5
 * person, if they are in the graph, otherwise -1
6
 */
7
public int getNodeIndex(String name)

Reference Answer

FriendshipGraph.java

1
public int getNodeIndex(String name) {
2
    Integer idx = nodeMap.get(name);
3
    return (idx == null) ? -1 : idx;
4
}

Note that you can make use of the nodeMap field.

Exercise 5 – Friendship Testing#

Add to the FriendGraph class a method with the following signature and specification.

1
/** Returns true precisely when the two people are in
2
  * the graph and are listed as friends.
3
  * @pre             true
4
  * @param person1   the first person
5
  * @param person2   the second person
6
  * @return          true if these two people are friends
7
  *                  in the graph
8
  */
9
public boolean areFriends(String person1, String person2)

Now test your method by writing several tests in the main method of the NotFacebook class, like this:

1
if (g.areFriends("Remi","Victoria"))
2
    System.out.println("Remi and Victoria are friends.");
3
else
4
    System.out.println("Remi and Victoria are not friends.");

Please note that these tests are best placed before the line

1
        GraphUtilities.showGraph(g);

so that the results of your tests will be visible at the same time as the graph pop-up window.

Reference Answer

FriendGraph.java

1
public boolean areFriends(String person1, String person2) {
2
    int idx1 = getNodeIndex(person1);
3
    int idx2 = getNodeIndex(person2);
4
    if (idx1 == -1 || idx2 == -1) return false;
5
    return edgeFrom(idx1, idx2);
6
}

Exercise 6 - Depth-First Traversal#

Create a new class GeneralUtilities, and add a method, with the following signature

1
/**
2
 * Perform a depth first traversal of a graph, printing out the
3
  * name of each node visited
4
  * @param g Graph to be traversed
5
  * @param startName Name of the first person to be printed out
6
 */
7
public static void depthFirstTraversal(FriendsGraph g, String startName)

that uses a recursive algorithm to traverse the graph in a depth-first way, printing out all the names of the people found in the graph. (Using System.out.println statements to do this is fine). An easy way to do that would be to use a modified version of the dft algorithm described in the lecture slides, with the following signature

1
private static void dft(FriendsGraph g, int i, Set<Integer> visited)

The parameter i is the index of a node in the graph, and the Set visited is used to keep track of which nodes have been visited. You can then implement the depthFirstTraversal method by simply calling the dft method with argument i set to be the index of the node with the specified name, and visited to an empty HashSet.

Modify the NotFaceBook class so that it calls this method immediately before the line GraphUtilities.showGraph(g);

N.B. we want a recursive solution to this problem.

Also N.B. You should not implement these methods in the FriendsGraph class.

Reference Answer

GeneralUtilities.java展开收起

1
public static void depthFirstTraversal(FriendsGraph g, String startName) {
2
    if (g == null) return;
3
    int startIdx = g.getNodeIndex(startName);
4
    if (startIdx == -1) {
5
        System.out.println("depthFirstTraversal: start node '" + startName + "' not found in graph.");
6
        return;
7
    }
8
    Set<Integer> visited = new HashSet<Integer>();
9
    dft(g, startIdx, visited);
10
}
11
private static void dft(FriendsGraph g, int i, Set<Integer> visited) {
12
    System.out.println(g.getNode(i).getName());
13
    visited.add(i);
14
    for (int j : g.getAdjacentNodes(i)) {
15
        if (!visited.contains(j)) {
16
            dft(g, j, visited);
17
        }
18
    }
19
}

展开收起

Optional Exercise 7 – Mutual Friends (more challenging!)#

Within the GeneralUtilities class create a method specified as follows:

1
/**
2
 * Returns a list of mutual friends of two people in a graph
3
 *
4
 * @param g The graph
5
 * @param person1 Name of first person
6
 * @param person2 Name of second person
7
 * @return a list of names of the mutual friends of the two
8
 * people, empty if one person is not in the graph or they have
9
 * no mutual friends
10
 *
11
 */
12
public static List<String> mutualFriends(FriendsGraph g, String person1, String person2

Mutual friends are people who are friends of both the given people. For example, in the graph on page 1, Lena and Victoria are the mutual friends of Guillaume and Tosan.
Include a few tests in the main method of the NotFacebook class to print out various lists of mutual friends for various people in (and not in) the graphs, and include a comment containing a copy-and-paste of your output from running the program, noting which graph it was that you were using.

Reference Answer

GeneralUtilities.java展开收起

1
public static List<String> mutualFriends(FriendsGraph g, String person1, String person2) {
2
    List<String> result = new ArrayList<String>();
3
    if (g == null) return result;
4
    int idx1 = g.getNodeIndex(person1);
5
    int idx2 = g.getNodeIndex(person2);
6
    if (idx1 == -1 || idx2 == -1) return result;
7

8
    // iterate over neighbors of idx1 and check if also neighbor of idx2
9
    for (int neigh : g.getAdjacentNodes(idx1)) {
10
        if (g.edgeFrom(idx2, neigh)) {
11
            result.add(g.getNode(neigh).getName());
12
        }
13
    }
14
    return result;
15
}

展开收起

Complete Source Code Download#

Zip List

Footnotes#

We could have used Stack<Card> from the Java Collections framework instead, but we’re using this CardStack class so you can see how the methods for a stack of cards are implemented. ↩

Foundations of Security Week8 Seminar: Digital Signature

Thu, 30 Apr 2026 00:00:00 GMT

Digital Signature#

What is a digital signature#

A digital signature is a cryptographic result attached to data that helps a receiver verify three things:

1	2	3
Who sent it	It was not changed	Sender cannot easily deny it
Origin authentication	Integrity	Non-repudiation

Important: a digital signature does not hide the message. Confidentiality comes from encryption, not from the signature itself.

Simple idea: sign with the private key, verify with the public key.

Why we need it#

Without protection, a digital file can be copied, edited, or impersonated in transit. The receiver needs proof of source and integrity.

If there is no digital signature

Anyone can claim “I sent this.”
A message can be modified silently.
The receiver has no easy proof for a third party.

trust is weak

With a valid digital signature

The public key checks the sender’s signature.
Any change to the signed data breaks verification.
It supports accountability in software, email, and documents.

trust can be checked

Building blocks#

#	K	V	ID
Hash function	Private key	Public key	Certificate / PKI
Turns any message into a fixed-size digest. Small changes in the message create a very different digest.	Kept secret by the signer. It is used to create the signature.	Shared with others. It is used to verify a signature.	Binds a public key to an identity so that people know whose key they are using.

Together these components answer two questions: “Did this come from the claimed sender?” and “Has anything changed?”

How digital signatures work#

Hash the message
A hash function converts the message into a short fingerprint.
Sign the hash
The sender uses a private key to sign that fingerprint.
Verify
The receiver recomputes the hash and uses the public key of the sender to check the signature.

Key insight#

The signature is created over a hash, not by encrypting the whole document. That makes signing efficient even for large files.

Verification fails if#

the content changes
the wrong public key is used
the signature was forged

1. Hash
message

2. Encrypt hash
with private
key

3. Send
message
+ signature

4. Decrypt with
public key

5. Compute
message hash
& compare
hashes

If both hashes match, the signature is valid.

Algorithms and common uses#

Common signature algorithms

RSA

Widely taught and widely
deployed

ECDSA

Strong security with smaller
key sizes

EdDSA

Modern design; included in
FIPS 186-5 as Ed25519 /
Ed448 family

Common uses

Software signing

Proves a program or update
came from its publisher.

Signed email

Lets recipients verify sender
identity and tamper detection.

PDF / contract approval

Supports trusted document
workflows and audit trails.

Certificates on the web

Certificates themselves are
digitally signed by a CA.

Limitations and best practices#

Limitations / risks

If the private key is stolen, an attacker can create valid signatures.
Verification only works if the receiver trusts the correct public key or certificate.
A signature proves integrity and origin, but it does not prove the content is true or safe.

Best practices

Protect private keys with strong storage and access control.
Use trusted certificates and check validity / revocation status when relevant.
Choose modern approved algorithms and key sizes.

RSA Signature: Choosing Public and Private Keys#

Choose two prime numbers: p=3p = 3p=3 and q=11q = 11q=11
Compute n=p×q=3×11=33n = p \times q = 3 \times 11 = 33n=p×q=3×11=33
Compute ϕ(n)=(p−1)(q−1)=2×10=20\phi(n) = (p − 1)(q − 1) = 2 \times 10 = 20ϕ(n)=(p−1)(q−1)=2×10=20
Choose e such that 1<e<ϕ(n)1 < e < \phi(n)1<e<ϕ(n) and gcd⁡(e,ϕ(n))=1\gcd(e, \phi(n)) = 1gcd(e,ϕ(n))=1. Let e=3\textcolor{blue}{e = 3}e=3
Find d such that e⋅d≡1( mod ϕ(n))e \cdot d \equiv 1 (\bmod \phi(n))e⋅d≡1(modϕ(n))
Here, 3×7=21≡1( mod 20)3 \times 7 = 21 \equiv 1 (\bmod 20)3×7=21≡1(mod20), so d=7\textcolor{blue}{d = 7}d=7

Public key

(e, n) = (3, 33)

Private key

(d, n) = (7, 33)

These keys are used for signing and verifying

RSA Signature: Signing the Message#

Let the message hash be h=2h = 2h=2
Use the private key(d,n)=(7,33)key (d, n) = (7, 33)key(d,n)=(7,33)
Compute signature: s=hd mod n\textcolor{blue}{s = h^d \bmod n}s=hdmodn

s=27 mod 33=128 mod 33=29\begin{aligned}s &= 2^7 \bmod 33 \\ &= 128 \bmod 33 \\ &= 29\end{aligned}s=27mod33=128mod33=29

Therefore, the digital signature is s=29\textcolor{blue}{s = 29}s=29

Sender uses private key to sign

RSA Signature: Verifying the Signature#

Receiver uses the public key(e,n)=(3,33)key (e, n) = (3, 33)key(e,n)=(3,33)
Verify signature s=29s = 29s=29 by computing h′=se mod nh' = s^e \bmod nh′=semodn
If h′\textcolor{blue}{h'}h′ equals the original hash h=2h = 2h=2, the signature is valid

h′=293 mod 33=24389 mod 33=2\begin{aligned}h' &= 29^3 \bmod 33 \\ &= 24389 \bmod 33 \\ &= 2 \end{aligned}h′=293mod33=24389mod33=2

Since h′=2=h\textcolor{blue}{h' = 2 = h}h′=2=h, the signature is valid

Signature is

VALID

because

h' = h

2 = 2

Digital Signature (Activity)#

Digital Signature Activity#

Connect to CDUT_WIFI, open your browser and Enter the URL http://172.20.X.X Click on the login button and register with your Student ID and appropriate Password. Login after successful registration

Click on “Digital Signature” on the navigation tabs. Generate your key pairs (public key and private key)

Enter any message and click on “Sign and Store Message”

Click on “Class Messages” on the navigation tabs.

Verify the messages submitted by your friends on the page using their public key

Presentation Slot Booking#

Connect to CDUT_WIFI, open your browser and Enter the URL http://172.20.X.X Click on the “Presentation Booking” tab to book an available slot for your class.

Web Application Development Practical8: AJAX

Wed, 29 Apr 2026 00:00:00 GMT

Getting used to value closures#

The first section of this sheet is on getting used to value closures. Please make sure that you do the second section, on actual AJAX, as well.

Copy and paste the following code which uses dynamically assigned event handlers.

1
<html>
2
    <head>
3
        <script>
4
        "use strict";
5
        function one(event) {
6
            window.alert("One() is running");
7
            event.currentTarget.onclick = two;
8
        }
9

10
        function two(event) {
11
            window.alert("Two() is running");
12
        }
13

14
        function setup() {
15
            document.getElementById("button1").onclick = one;
16
            document.getElementById("button2").onclick = one;
17
        }
18

19
        </script>
20
    </head>
21

22
    <body onload="setup()">
23
        <button id="button1">The first button</button>
24
        <button id="button2">The second button</button>
25
    </body>
26
</html>

展开收起

Load this file into a browser, and see how it works when the buttons are clicked. Note the use of event.currentTarget in one to identify the button that the user clicked on. This is only possible if the event value is passed through to the event handler function.
Add the following code to the function two() which makes use of a reference closure.

1
let count = 0;
2
event.currentTarget.onclick = (event) => {
3
    count++;
4
    window.alert(count + " extra clicks.");
5
}

Load this file into a browser and see how it works when the buttons are clicked. Notice the following in particular:
- Even though count is declared as a local variable in two, it continues to be accessible when the buttons are clicked even after two has finished running. This is because it is held in the closure created by the fat arrow declaration in two.
- If you click on the two buttons repeatedly, the counters rise for each button independently without getting mixed up. This is because the count variable is still local to the particular run of two that created it. The closures are forcing the variable to continue existing, so effectively there are now two variables called count , which are isolated in different closures.
Replace setup with the following function which initializes the event handlers from an array:

1
function setup() {
2
    let buttons = [
3
        {"id": "button1", "message": "Hello!"},
4
        {"id": "button2", "message": "Goodbye!"}
5
    ];
6
    let buttonId = 1029;
7
    for (let x=0; x<2; x++) {
8
        let button=document.getElementById(buttons[x].id);
9
        let message = buttons[x].message;
10
        button.onclick = (event) => {
11
            window.alert(buttonId + ":" + message);
12
        }
13
        buttonId++;
14
    }
15
}

展开收起

Run this version in your browser and click on the buttons, and notice the following:
- Both buttons display the same buttonId - 1031. This is because a reference to the same variable buttonId is stored inside the closure for each button.
- Both buttons do not display the same message. This is because message is declared with let inside the loop. It is therefore local to the loop; on the second loop, a new variable called message is created and it is this new variable that is stored in the second closure.
Create a new function makeEventHandler as follows. Note that this returns the same value as was placed in button.onclick by the code above.

1
function makeEventHandler(buttonId, message) {
2
    return (event) =>{
3
        window.alert(buttonId + " : " + message);
4
    }
5
}

Change setup so that the code that reads button.onclick now reads:

1
button.onclick = makeEventHandler(buttonId, message);

Load the file in a browser again. Notice that the buttonId is now correctly different for the two buttons. This is because the value buttonId becomes a parameter local to each of the two makeEventHandler calls, rather than to the whole loop.
Modify the button.onclick line with the following code, which represents the same thing, but writes makeEventHandler using => notation too. Note that this line corresponds to the same call on makeEventHandler that was previously there, and has the same effect; it just embeds the code of makeEventHandler inside the function as well.

1
button.onclick = (
2
    (newButtonId) => (event) => {
3
        window.alert(newButtonId + " : " + message);
4
    }) (buttonId);

AJAX#

The next section actually introduces AJAX.

Before you proceed, move the file you have been working on onto a local server. You can do one of the following:

Move the file to the static directory of one of your existing local Flask apps (or create a new one).

This is necessary because most modern browsers will not allow AJAX to run from locally loaded files; requests must be made through a server. This is intended to prevent malicious scripts stealing data from local storage.

Create a new file in the same server directory named demo.json with the following contents:

demo.json

1
{
2
  "buttons": [
3
    {
4
      "id": "button1",
5
      "message": "I was loaded by AJAX!"
6
    },
7
    {
8
      "id": "button2",
9
      "message": "Albeit statically!"
10
    }
11
  ]
12
}

Modify the setup() function as shown below. This includes all the changes described in the previous section. Note that a parameter is added to the first line.

1
function setup(buttonList) {
2
    let buttonId = 1029;
3
    for (let x = 0; x < 2; x++) {
4
        let record = buttonList.buttons[x];
5
        let button = document.getElementById(record.id);
6
        let message = record.message;
7
        button.onclick = ((newButtonId) =>
8
            (event) => { window.alert(newButtonId + " : " + message); })(buttonId);
9
        buttonId++;
10
    }
11
}

Create a new function load() as follows:

1
function load() {
2
    let x = new XMLHttpRequest();
3
    x.open("get","demo.json");
4
    x.onload = () => { setup(JSON.parse(x.response)); }
5
    x.send();
6
}

Change the onload attribute for the body element from setup() to load().
Load the file into your browser (making sure that the request is passing through the server - the URL shown should be http not file ). Note that if you have placed the file in the static directory of a local Flask server, you do need to include the path static/ in the URL. Clicking on the buttons should now produce the messages from the .JSON file.
- If this does not work, check that demo.json is in the same directory as the .html file that includes the script, and both are on a server. (If you see the message “Cross-Origin Request Blocked”, or “Access to XMLHttpRequest has been blocked by CORS policy” in the developer console, you may be running from a local file instead of a server.)
Change the messages in the .json file at the server, and reload the html page to confirm that the messages that appear when you click on the buttons are different.
- Note that you must reload the page to see changes because the load() function, which performs the AJAX request, only runs once when the page is loaded. If you still continue seeing old versions of the messages even though demo.json has been updated, add the following line to load() before the x.send(): x.setRequestHeader("Cache-Control", "no-cache");.
Move the .html file (but not the json file) into a Flask app - an existing or new one - in the static directory. Open or create the py file for the app, and add import json and import random at the top. Then, add the following route function to the .py file for the app:

1
@app.route('/json')
2
def jsontest():
3
    buttons = []
4
    messages = ["Hello!","Goodbye!","Walrus!","Horse!","Ouch!"]
5
    random.shuffle(messages)
6
    buttons.append({"id": "button1", "message": messages[0]})
7
    buttons.append({"id": "button2", "message": messages[1]})
8
    return json.dumps({"buttons": buttons})

Access this route on the server directly from your browser as /json and confirm that valid JSON appears in the browser.

Modify the x.open() line in the HTML file to refer to ../json instead of demo.json. (The ../ is necessary because the HTML file is in the static subdirectory, but the route is not.)
Open the HTML file (again through the server). Clicking the buttons should produce random messages from the list in the Python program. Reloading the page should produce a different set of messages. (If it does not, try applying the caching fix described in question 6.)
Modify the program so that the messages are reloaded from the server each time one of the buttons is clicked. (You will need to call load() more often, possibly from inside the event handlers.)
Modify the .HTML file so that the buttons are created by the JavaScript, rather than present in the static HTML. (Start by creating a div in the HTML to hold them, and then manipulate it using the DOM tree methods.) In this way, modify the program so that the number of buttons that appear is determined by the JSON data received, and then alter the Python program to produce a variable number of buttons as well. (While you’re working on the JavaScript, you can change load to load a static file again with 3-4 buttons in it if this is useful for testing.)
Modify the program so that when the user clicks on a button, it displays not just the current button’s message, but the messages from all previous buttons the user has clicked. first, store this data in the JavaScript program; then once you have this working, modify the code to store this data in a server session variable.

Reference Answer#

app.py展开收起

1
from flask import Flask, request, session, jsonify
2
import random, json
3
from datetime import datetime
4
app = Flask(__name__)
5
app.secret_key = b'notAGoodSecretKey'
6
if __name__ == '__main__':
7
    app.config["ENV"] = "development" # 可选项：development、production、testing
8
    app.run(debug=True, host='0.0.0.0', port=4999)
9

10
@app.route('/')
11
def index():
12
    # return "Hello, World! The time is " + datetime.now().strftime("%Y-%m-%d %H:%M:%S")
13
    return """
14
    <html>
15
        <h1>AJAX Test</h1>
16
        <p>Open the AJAX test page below:</p>
17
        <a href="/static/ajaxtest.html">AJAX Test Page</a>
18
        <footer>
19
            <p>Current time: """ + datetime.now().strftime("%Y-%m-%d %H:%M:%S") + """</p>
20
        </footer>
21
    </html>
22
    """
23

24
@app.route('/json')
25
def jsontest():
26
    # allow caller to request a number of buttons via ?n=, default to 3
27
    try:
28
        n = int(request.args.get('n', 3))
29
    except Exception:
30
        n = 3
31
    buttons = []
32
    messages = ["Hello!","Goodbye!","Walrus!","Horse!","Ouch!","Ping!","Pong!"]
33
    random.shuffle(messages)
34
    for i in range(n):
35
        msg = messages[i % len(messages)]
36
        buttons.append({"id": f"button{i+1}", "message": msg})
37
    return json.dumps({"buttons": buttons})
38

39
@app.route('/click', methods=['POST'])
40
def click():
41
    # receive JSON {id: ..., message: ...} and append message to session stored list
42
    data = request.get_json() or {}
43
    msg = data.get('message')
44
    if 'clicked' not in session:
45
        session['clicked'] = []
46
    if msg:
47
        # append and save
48
        clicked = session['clicked']
49
        clicked.append(msg)
50
        session['clicked'] = clicked
51
    return jsonify({'clicked': session.get('clicked', [])})
52

53
@app.route('/session')
54
def session_data():
55
    return jsonify({'clicked': session.get('clicked', [])})

展开收起

static/ajaxtest.html展开收起

1
<html>
2
    <head>
3
        <script>
4
        "use strict";
5
        function one(event) {
6
            window.alert("One() is running");
7
            event.currentTarget.onclick = two;
8
        }
9

10
        function two(event) {
11
            window.alert("Two() is running");
12
            let count = 0;
13
            event.currentTarget.onclick = (event) => {
14
                count++;
15
                window.alert(count + " extra clicks.");
16
            }
17
        }
18

19
        function setup() {
20
            document.getElementById("button1").onclick = one;
21
            document.getElementById("button2").onclick = one;
22
        }
23
        function setup1() {
24
            let buttons = [
25
                {"id": "button1", "message": "Hello!"},
26
                {"id": "button2", "message": "Goodbye!"}
27
            ];
28
            let buttonId = 1029;
29
            for (let x=0; x<2; x++) {
30
                let button=document.getElementById(buttons[x].id);
31
                let message = buttons[x].message;
32
                button.onclick = (event) => {
33
                    window.alert(buttonId + ":" + message);
34
                }
35
                buttonId++;
36
            }
37
        }
38
        function setup2() {
39
            let buttons = [
40
                {"id": "button1", "message": "Hello!"},
41
                {"id": "button2", "message": "Goodbye!"}
42
            ];
43
            let buttonId = 1029;
44
            for (let x=0; x<2; x++) {
45
                let button=document.getElementById(buttons[x].id);
46
                let message = buttons[x].message;
47
                button.onclick = makeEventHandler(buttonId, message);
48
                buttonId++;
49
            }
50
        }
51
        function setup3() {
52
            let buttons = [
53
                {"id": "button1", "message": "Hello!"},
54
                {"id": "button2", "message": "Goodbye!"}
55
            ];
56
            let buttonId = 1029;
57
            for (let x=0; x<2; x++) {
58
                let button=document.getElementById(buttons[x].id);
59
                let message = buttons[x].message;
60
                button.onclick = (
61
                    (newButtonId) => (event) => {
62
                        window.alert(newButtonId + " : " + message);
63
                    }) (buttonId);
64
                buttonId++;
65
            }
66
        }
67
        // client-side history of clicked messages
68
        let clientHistory = [];
69

70
        function displayClientHistory() {
71
            const h = document.getElementById('clientHistory');
72
            if (!h) return;
73
            h.textContent = clientHistory.length ? ('Client history: ' + clientHistory.join(' | ')) : 'Client history: (none)';
74
        }
75

76
        function displayServerHistory(list) {
77
            const h = document.getElementById('serverHistory');
78
            if (!h) return;
79
            h.textContent = list && list.length ? ('Server history: ' + list.join(' | ')) : 'Server history: (none)';
80
        }
81

82
        function setup4(buttonList) {
83
            // Build buttons dynamically into the #buttonContainer element
84
            const container = document.getElementById('buttonContainer');
85
            container.innerHTML = '';
86
            let buttonId = 1029;
87
            const buttons = (buttonList && buttonList.buttons) ? buttonList.buttons : [];
88
            for (let i = 0; i < buttons.length; i++) {
89
                const record = buttons[i];
90
                const button = document.createElement('button');
91
                // use provided id if present, otherwise generate one
92
                button.id = record.id || ('button' + (i + 1));
93
                // label the button with the message (or a default)
94
                button.textContent = record.label || record.message || ('Button ' + (i + 1));
95
                const message = record.message;
96
                // capture buttonId and message in a closure
97
                button.onclick = ((newButtonId, msg) => (event) => {
98
                    // update client-side history
99
                    clientHistory.push(msg);
100
                    displayClientHistory();
101
                    // also send to server to store in session
102
                    fetch('../click', {
103
                        method: 'POST',
104
                        credentials: 'same-origin',
105
                        headers: { 'Content-Type': 'application/json' },
106
                        body: JSON.stringify({ id: button.id, message: msg })
107
                    }).then(r => r.json()).then(data => {
108
                        if (data && data.clicked) displayServerHistory(data.clicked);
109
                    }).catch(err => {
110
                        console.warn('Could not save to server session:', err);
111
                    });
112
                    // show combined messages from client history (local behavior)
113
                    window.alert('Client clicks so far: ' + clientHistory.join(' | '));
114
                })(buttonId, message);
115
                container.appendChild(button);
116
                buttonId++;
117
            }
118
        }
119

120
        function makeEventHandler(buttonId, message) {
121
            return (event) =>{
122
                window.alert(buttonId + " : " + message);
123
            }
124
        }
125

126
        function load() {
127
            let x = new XMLHttpRequest();
128
            // x.open("get","demo.json");
129
            // request 4 buttons for testing; change or remove ?n=4 to vary count
130
            x.open("get","../json?n=4");
131
            x.onload = () => {
132
                setup4(JSON.parse(x.response));
133
                // after buttons are set up, fetch server session history if any
134
                fetch('../session', { credentials: 'same-origin' })
135
                    .then(r => r.json())
136
                    .then(data => {
137
                        if (data && data.clicked) displayServerHistory(data.clicked);
138
                    }).catch(err => console.warn('Could not fetch session history:', err));
139
            }
140
            x.send();
141
        }
142
        </script>
143
    </head>
144

145
    <body onload="load()">
146
        <!-- container where buttons will be created dynamically -->
147
        <div id="buttonContainer"></div>
148
        <div id="historyContainer" style="margin-top:1em;">
149
            <div id="clientHistory">Client history: (none)</div>
150
            <div id="serverHistory">Server history: (none)</div>
151
        </div>
152
    </body>
153
</html>

展开收起

Foundations of Security Week8 Lecture

Tue, 28 Apr 2026 00:00:00 GMT

Lecture Outline#

Introduction to the Data Encryption Standard (DES) algorithm
Structure of DES block cipher
Initial permutation (IP) in DES
Key schedule and generation of 16 subkeys
16 rounds of DES processing
Expansion function (E-box) and Subkey mixing using XOR operation
Substitution using S-boxes

Learning Outcomes#

By the end of this lecture, students should be able to:

Explain the structure of the DES encryption algorithm
Describe how plaintext is divided into left and right halves
Explain how the DES key schedule generates subkeys
Describe the steps involved in the 16 rounds of DES processing
Describe how the expansion function (E-box) works
Describe how S-boxes perform substitution in DES

Data Encryption Standard (DES) Algorithm#

Is a symmetric-key block cipher algorithm that was developed in the 1970s by IBM and later adopted by the U.S. National Institute of Standards and Technology (NIST) as a federal standard in 1977.
It has since been replaced by more secure algorithms like AES (Advanced Encryption Standard) due to its small key size vulnerability.

It encrypts data in 64-bit blocks using a 56-bit key (though the key is technically 64 bits, with 8 bits used for parity).

Key Features of DES:
Symmetric Key Algorithm: Uses the same key for encryption and decryption.
Block Cipher: Encrypts data in fixed-size blocks (64-bit blocks).
Key Length: 56-bit effective key length (64-bit key with 8 bits used for parity).
Rounds of Processing: 16 rounds of substitution and permutation.
Feistel Network Structure: Divides the block into two halves and processes them alternately.

Step-by-Step Process

Input
Initial Permutation (IP)
Key Schedule (16 Subkeys Generation)
16 Rounds of Processing
Final Permutation (FP)

Initial Permutation (IP)#

The 64-bit plaintext is rearranged according to a fixed table (IP table).
This doesn’t encrypt; it just prepares the data for processing.
Bit 58 of the plaintext becomes bit 1, bit 50 becomes bit 2, and so on.

Initial Permutation (IP) Table

58	50	42	34	26	18	10	2
60	52	44	36	28	20	12	4
62	54	46	38	30	22	14	6
64	56	48	40	32	24	16	8
57	49	41	33	25	17	9	1
59	51	43	35	27	19	11	3
61	53	45	37	29	21	13	5
63	55	47	39	31	23	15	7

Output: Split the 64-bit permuted block into two 32-bit halves:
L0\textcolor{red}{L_0}L0 (left 32 bits)
R0\textcolor{red}{R_0}R0 (right 32 bits).

Step-by-Step Process

Input ✓
Initial Permutation (IP) ✓
Key Schedule (16 Subkeys Generation)
16 Rounds of Processing
Final Permutation (FP)

Key Schedule (16 Subkeys Generation)
Permutation (IP)#

Key Schedule (16 Subkeys Generation)

The key is provided in hexadecimal format
eg Hexadecimal Key = 133457799BBCDFF1 (16 hexadecimal digits).
Convert to binary.
The 64-bit key is permuted using the Permuted choice 1 (PC-1) table, and 8 parity bits are discarded, leaving a 56-bit key. Bit 57 of the key becomes bit 1, bit 49 becomes bit 2, and so on.

Split into Halves: The 56-bit key is split into two 28-bit halves, C0 and D0
Left Shifts: For each round, C0 and D0 are left-shifted (rotated) by 1 or 2 bits, depending on the round (e.g., rounds 1, 2, 9, 16 shift by 1 bit; others by 2).
Permuted Choice 2 (PC-2): After shifting, a 48-bit subkey is selected from the 56-bit C and D using the PC-2 table

K+ = 1111000 0110011 0010101 0101111 0101010 1011001 1001111 0001111

C0 = 1111000 0110011 0010101 0101111
D0 = 0101010 1011001 1001111 0001111

Left Shifts: For each round, C0 and D0 are left-shifted (rotated) by 1 or 2 bits, depending on the round

Permuted Choice 2 (PC-2): After shifting, a 48-bit subkey is selected from the 56-bit C and D using the PC-2 table. We form the 16 Kn\textcolor{red}{K_n}Kn keys of 48-bits.

K1\textcolor{red}{K_1}K1 = 000110 110000 001011 101111 111111 000111 000001 110010
K2\textcolor{red}{K_2}K2 = 011110 011010 111011 011001 110110 111100 100111 100101
K3\textcolor{red}{K_3}K3 = 010101 011111 110010 001010 010000 101100 111110 011001
K4\textcolor{red}{K_4}K4 = 011100 101010 110111 010110 110110 110011 010100 011101
K5\textcolor{red}{K_5}K5 = 011111 001110 110000 000111 111010 110101 001110 101000
K6\textcolor{red}{K_6}K6 = 011000 111010 010100 111110 010100 000111 101100 101111
K7\textcolor{red}{K_7}K7 = 111011 001000 010010 110111 111101 100001 100010 111100
K8\textcolor{red}{K_8}K8 = 111101 111000 101000 111010 110000 010011 101111 111011
……
K16\textcolor{red}{K_{16}}K16 = 110010 110011 110110 001011 000011 100001 011111 110101

Step-by-Step Process

Input ✓
Initial Permutation (IP) ✓
Key Schedule (16 Subkeys Generation) ✓
16 Rounds of Processing
Final Permutation (FP)

16 Rounds of Processing

Input: The left half (Ln−1\textcolor{blue}{L_{n-1}}Ln−1) and right half (Rn−1\textcolor{blue}{R_{n-1}}Rn−1) from the previous round (or IP for round 1).
Feistel Function (F): The right half (Rn−1\textcolor{blue}{R_{n-1}}Rn−1) is processed with the subkey (Kn\textcolor{blue}{K_n}Kn) to produce a 32-bit output:
Expansion (E-box): The 32-bit Rn−1\textcolor{blue}{R_{n-1}}Rn−1 is expanded to 48 bits using an expansion table (some bits are duplicated).
Subkey Mixing: The 48-bit expanded Rn−1\textcolor{blue}{R_{n-1}}Rn−1 is XORed with the 48-bit subkey Kn\textcolor{blue}{K_n}Kn.
- XOR: A bitwise operation where 0⊕0=0\textcolor{purple}{0 \oplus 0 = 0}0⊕0=0, 1⊕1=0\textcolor{purple}{1 \oplus 1 = 0}1⊕1=0, 1⊕0=1\textcolor{purple}{1 \oplus 0 = 1}1⊕0=1, 0⊕1=1\textcolor{purple}{0 \oplus 1 = 1}0⊕1=1.
S-boxes (Substitution): The 48-bit result is divided into eight 6-bit chunks. Each chunk is passed through one of eight S-boxes (lookup tables), which map 6 bits to 4 bits, reducing the total to 32 bits (8×4=328 \times 4 = 328×4=32).
- Each S-box uses the outer 2 bits of the 6-bit input to select a row and the inner 4 bits to select a column, outputting a 4-bit value.
P-box (Permutation): The 32-bit S-box output is permuted using a fixed permutation table (P-box).
Output of Feistel Function: A 32-bit value, from F(Rn−1\textcolor{blue}{R_{n-1}}Rn−1, Kn\textcolor{blue}{K_n}Kn).
Swap Halves

L0\textcolor{red}{L_0}L0 = 1100 1100 0000 0000 1100 1100 1111 1111
R0\textcolor{red}{R_0}R0 = 1111 0000 1010 1010 1111 0000 1010 1010

graph LR %% 左侧原始公式（多色文本，用HTML span实现） A["Ln = Rn-1 Rn = Ln-1 ⊕ F(Rn-1, Kn)"] %% 右侧代入n=1后的公式（完全匹配原图多色） C["L1 = R1-1 = R0 R1 = L1-1 ⊕ F(R1-1, K1) = L0 ⊕ F(R0, K1)"] %% 箭头文字："for n=1" 设为红色，和原图一致 A -- "for n=1" --> C

We have

16 Rounds of Processing - Expansion (E-box)

To calculate F, we first expand each block R0\textcolor{red}{R_0}R0, from 32 bits to 48 bits.
This is done by using a expansion table that repeats some of the bits in R0\textcolor{red}{R_0}R0

F(R0\textcolor{blue}{R_0}R0, K1\textcolor{blue}{K_1}K1)

16 Rounds of Processing - Subkey Mixing

F(R0,K1)⟶F(E(R0),K1)F(\textcolor{blue}{R_0}, \textcolor{blue}{K_1}) \textcolor{purple}\longrightarrow F(\textcolor{red}{E(R_0)}, \textcolor{blue}{K_1})F(R0,K1)⟶F(E(R0),K1)

E(R0)⊕K1E(R_0) \oplus K_1E(R0)⊕K1

E(R0)=011110 100001 010101 010101 011110 100001 010101 010101\colorbox{#FFF2CC}{$\textcolor{red}{E(R_0)} \textcolor{black}{= 011110 ~ 100001 ~ 010101 ~ 010101 ~ 011110 ~ 100001 ~ 010101 ~ 010101}$}E(R0)=011110 100001 010101 010101 011110 100001 010101 010101

⊕\textcolor{purple}\oplus⊕

K1=000110 110000 001011 101111 111111 000111 000001 110010\colorbox{#E2F0D9}{$\textcolor{red}{K_1} \textcolor{black}{= 000110 ~ 110000 ~ 001011 ~ 101111 ~ 111111 ~ 000111 ~ 000001 ~ 110010}$}K1=000110 110000 001011 101111 111111 000111 000001 110010

E(R0)⊕K1=011000 010001 011110 111010 100001 100110 010100 100111\colorbox{#FBE5D6}{$\textcolor{black}{E(R_0) \oplus K_1 = 011000 ~ 010001 ~ 011110 ~ 111010 ~ 100001 ~ 100110 ~ 010100 ~ 100111}$}E(R0)⊕K1=011000 010001 011110 111010 100001 100110 010100 100111

16 Rounds of Processing - S-boxes (Substitution)

We now compute

S₁(B₁) S₂(B₂) S₃(B₃) S₄(B₄) S₅(B₅) S₆(B₆) S₇(B₇) S₈(B₈)

S-box 1 (S₁)

14	4	13	1	2	15	11	8	3	10	6	12	5	9	0	7
0	15	7	4	14	2	13	1	10	6	12	11	9	5	3	8
4	1	14	8	13	6	2	11	15	12	9	7	3	10	5	0
15	12	8	2	4	9	1	7	5	11	3	14	10	0	6	13

S₁

14	4	13	1	2	15	11	8	3	10	6	12	5	9	0	7
0	15	7	4	14	2	13	1	10	6	12	11	9	5	3	8
4	1	14	8	13	6	2	11	15	12	9	7	3	10	5	0
15	12	8	2	4	9	1	7	5	11	3	14	10	0	6	13

S₂

15	1	8	14	6	11	3	4	9	7	2	13	12	0	5	10
3	13	4	7	15	2	8	14	12	0	1	10	6	9	11	5
0	14	7	11	10	4	13	1	5	8	12	6	9	3	2	15
13	8	10	1	3	15	4	2	11	6	7	12	0	5	14	9

S₃

10	0	9	14	6	3	15	5	1	13	12	7	11	4	2	8
13	7	0	9	3	4	6	10	2	8	5	14	12	11	15	1
13	6	4	9	8	15	3	0	11	1	2	12	5	10	14	7
1	10	13	0	6	9	8	7	4	15	14	3	11	5	2	12

S₄

7	13	14	3	0	6	9	10	1	2	8	5	11	12	4	15
13	8	11	5	6	15	0	3	4	7	2	12	1	10	14	9
10	6	9	0	12	11	7	13	15	1	3	14	5	2	8	4
3	15	0	6	10	1	13	8	9	4	5	11	12	7	2	14

S₅

2	12	4	1	7	10	11	6	8	5	3	15	13	0	14	9
14	11	2	12	4	7	13	1	5	0	15	10	3	9	8	6
4	2	1	11	10	13	7	8	15	9	12	5	6	3	0	14
11	8	12	7	1	14	2	13	6	15	0	9	10	4	5	3

S₆

12	1	10	15	9	2	6	8	0	13	3	4	14	7	5	11
10	15	4	2	7	12	9	5	6	1	13	14	0	11	3	8
9	14	15	5	2	8	12	3	7	0	4	10	1	13	11	6
4	3	2	12	9	5	15	10	11	14	1	7	6	0	8	13

S₇

4	11	2	14	15	0	8	13	3	12	9	7	5	10	6	1
13	0	11	7	4	9	1	10	14	3	5	12	2	15	8	6
1	4	11	13	12	3	7	14	10	15	6	8	0	5	9	2
6	11	13	8	1	4	10	7	9	5	0	15	14	2	3	12

S₈

13	2	8	4	6	15	11	1	10	9	3	14	5	0	12	7
1	15	13	8	10	3	7	4	12	5	6	11	0	14	9	2
7	11	4	1	9	12	14	2	0	6	10	13	15	3	5	8
2	1	14	7	4	10	8	13	15	12	9	0	3	5	6	11

Reading Assignment#

Read on how to compute the following using the 8 S-boxes

S₁(B₁) S₂(B₂) S₃(B₃) S₄(B₄) S₅(B₅) S₆(B₆) S₇(B₇) S₈(B₈)

To be continued

Data Structures and Algorithms Week8: Stacks, Queues and Graphs

Mon, 27 Apr 2026 00:00:00 GMT

Stacks and Queues#

Content#

Stacks
Abstract data types
Queues
Priority queues
Stacks and queues in the Java collections framework

Stacks#

A stack is an object that contains a list of elements, like an ArrayList.
However the methods of a stack allow us to add elements only to the top of the list, and to remove only the element that is at the top of the list.

4 operations on stack

Stack feature：Last in first out#

A Stack is a “Last In First Out” (LIFO) structure.
Real world examples
- A stack of plates waiting to be washed
- A stack of cards in a patience game (see practical instructions).
- Other Games such as Connect 4, Towers of Hanoi, etc.
- Many examples in computer science – e.g. stack of method calls.

Implementing a stack using an Arraylist#

1
public class StringStack {
2
    private ArrayList<String> list = new ArrayList<String>();
3
    public void push(String s) {
4
        list.add(s);
5
    }
6
    public String pop() {
7
        assert list.size() != 0;
8
        return list.remove(list.size()-1);
9
    }
10
    public String peek() {
11
        assert list.size() != 0;
12
        return list.get(list.size()-1);
13
    }
14
    public boolean isEmpty() {
15
        return list.isEmpty();
16
    }
17
}

展开收起

What did we do#

We took an ArrayList, which has more than 25 methods, and used it to create a StringStack, that can perform only 4.
Everything we can do with a StringStack we can also do with an ArrayList.
There are many things we can do with an ArrayList but cannot do with the StringStack.
So what was the point of the stack? Is it wasteful?

Why would we do that#

There are many cases in which we want to treat data as being on a stack.
In these cases there are advantages in hiding all methods except those that treat the data as being on a stack.
- It makes the program easier to understand, reason about, and modify.
- It means that we can replace one implementation of a stack with another.

A better way to describe the procedure of program

Abstraction#

In computer science Abstraction is the hiding of irrelevant detail.
The fact that our StringStack uses an ArrayList to store data is irrelevant. We do not need to know that the stack is implemented in this way, and we do not want anyone to write code that is dependent on that particular implementation.

Hiding is better than showing more detail for you to worry about

Abstract data types#

A stack is an example of an Abstract Data Type (ADT).
An ADT is defined by a set of operations that can be performed on its data.
The ADT hides all details of how those operations are implemented, and how data are stored.
The operations that can be performed ADT define an interface to the ADT.

Stack exercise#

If s is an initially empty stack
state the values of the variables a and b after the following code fragment is run:

1
s.push("Red");
2
s.push("Orange");
3
s.push("Blue");
4
s.pop();
5
s.push("Yellow");
6
s.pop();
7
String a = s.pop();
8
s.push("Brown");
9
s.pop();
10
String b = s.pop();

Queues#

A queue is an ADT which maintains a list of data
The methods available allow us to add data only to the back of the queue, and to remove data only from the front of the queue.
A queue is FIFO (First In First Out) structure

4 operations on queue

Implementing a queue using an Arraylist#

1
public class StringQueue {
2
    private ArrayList<String> list = new ArrayList<String>();
3
    public void add(String s) {
4
        list.add(s);
5
    }
6
    public String remove() {
7
        assert list.size() != 0;
8
        return list.remove(0);
9
    }
10
    public String peek() {
11
        assert list.size() != 0;
12
        return list.get(0);
13
    }
14
    public boolean isEmpty() {
15
        return list.isEmpty();
16
    }
17
}

展开收起

Queue Exercise#

If the q refers to a queue that is initially empty
state the values of the variables a and b after the following code fragment is run

1
q.add("Diamond");
2
q.add("Tobby");
3
q.remove();
4
q.add("Garnet");
5
q.add("Emeric");
6
q.remove();
7
String a = q.remove();
8
q.add("Sapphire");
9
String b = q.remove();

Priority queues#

A priority queue implements the same methods as an ordinary queue, but it works in BIFO (Best In First Out) manner.
Each element in the queue is allocated a priority, and the remove() method always removes the element with the highest priority.

For example suppose that a priority queue contains Strings, and that when two Strings are compared the one that is lowest in alphabetical order has highest priority.
The code

1
pq.add("Jam");
2
pq.add("Ham");
3
pq.add("Spam");
4
String best = pq.remove();

Results in best pointing to the String “Ham”.

Implementing a priority queue#

A simple implementation would use an ArrayList and would be like the queue implementation shown earlier except that the add method is implemented as follows:

1
public void add(String s) {
2
    int i = 0;
3
    int size = list.size();
4
    while (i < size && s.compareTo(list.get(i)) > 0) {
5
        i++;
6
    }
7
    list.add(i, s);
8
}

The add method would be O(n)

A more efficient implementation uses a data structure known as a heap (not the same as the heap). The add method is then O(log n)

We shall not cover heaps in this module.

Double-ended queue (DEQUE)#

A deque (pronounced “deck”) is like a queue, except that elements can be added or removed from either end.

Stacks and queues in the java collections framework#

The Java collections framework contains an interface Queue, which extends the Collection interface.
The Queue interface contains the methods that we have already mentioned when describing queues, plus a few others.
For example in addition to the remove() method, there is an poll() method. The difference between the two is that, if the queue is empty, remove() throws an exception whereas poll() returns a null value.

flowchart BT A["<<interface>> Queue"] --> B["<<interface>> Collection"]

Similarly the Queue interface provides add() and offer() methods, the difference being that add() has a void return type and throws an exception if the capacity of the queue is exceeded, whereas offer returns a Boolean value – false if the capacity was exceeded, and true otherwise.
The Queue interface is implemented by, among others, the LinkedList and ArrayDeque classes

flowchart BT A["<<interface>> Queue"] --> B["<<interface>> Collection"]

The Java collections framework does not contain a Stack interface. There is a Stack class, but its use is not advised. It is better to use the ArrayDeque class
There is a class PriorityQueue that implements the Queue interface and where the remove(), poll(), and peek() methods return the highest-priority element.

Simplified summary of some java collections framework classes#

classDiagram class Collection { <<interface>> size() isEmpty() } class Queue { <<interface>> add() offer() remove() poll() } class LinkedList class Deque { <<interface>> } class ArrayDeque Collection <|-- Queue Queue <|.. LinkedList Queue <|-- Deque Deque <|-- ArrayDeque

1
public class LinkedList<E> extends AbstractSequentialList<E> implements List<E>, Deque‹E>, Cloneable, Serializable {
2
    transient int size;
3
    transient LinkedList.Node<E> first;
4
    transient LinkedList.Node<E> last;
5
    private static final long serialVersionUID = 876323262645176354L;
6
    public LinkedList() {
7
        this.size = 0;
8
    }
9
    public LinkedList(@NotNull @Flow(sourcelsContainer = true, targetsContainer = true) Collection<? extends E> c) {
10
    this();
11
    this.addAll(c);
12
}

Summary#

A stack is a LIFO (Last-In, First-Out) structure.
A queue is a FIFO (First-In, First-Out) structure.
A priority queue is BIFO (Best-In, First-Out) structure.
A deque behaves like a queue except that data can be added or removed from either end.
Abstraction is the deliberate concealment of irrelevant detail.
An Abstract Data Type is defined by the operations that it allows you to perform on its data. The implementation of these methods, and the means by which data are stored, are deliberately concealed.
The Java collections framework contains classes and interfaces representing stacks, queues, priority queues, and deques.

Graphs#

Content#

Basic graph definitions
Implementation of graph data structures
Traversals and applications

Graphs: Nodes and Edges#

Network-like data structures can be represented using graphs.
A graph consists of a set of nodes (also known as vertices) together with a set of edges (also known as arcs) connecting them
Some graphs may have loops (a loop is an edge connecting a node to itself)

Graphs: Directed and Undirected#

Graphs can be directed (e.g. a street map with one way streets)
or undirected (e.g. street map where all streets can be traversed in any direction)

Example: Chengdu Subway#

Graphs: Data Storage#

As well as the nodes and edge structure, graphs typically have additional data stored.
This data can be at nodes and/or edges,
For example: in the Chengdu Subway graph:
- nodes have names of stations
- edges are labeled with the line(s) between those stations

Implementing Graphs on a Computer#

There are two common ways of representing graph data:
- adjacency matrices
- adjacency lists

Adjacency Matrix#

This uses a two-dimensional array of booleans(note this is a static data structure)
The array shows which edges are connected to which other edges.

Please draw the adjacency matrix for following graph

Directed Graph:

Straightforward to program:

1
boolean[][] edgeMatrix = new boolean[n][n];

An edge exists from node i to node j when edgeMatrix[i][j] is true

Adjacency Matrices#

Access to edge information is fast, due to use of arrays.
Storage of node data
- use an additional array of information, one piece of information per node
Storage of edge data
- use an additional 2D array of information, one piece of information per edge

Adjacency Matrices features#

Space usage:
- For a graph with n\textcolor{orange}nn nodes, it can have from 0\textcolor{orange}00 to n2\textcolor{orange}{n^2}n2 edges (including loops and counting two-way edges twice), so the space taken up in memory to store the graph using an adjacency matrix is the space required to store n2\textcolor{orange}{n^2}n2 boolean values.
If a graph is sparse (significantly fewer edges than n2n^2n2), this can be wasteful of space. There is a more efficient way of representing sparse graphs

Adjacency Lists#

For each node is stored a list of nodes that it connects to (note this is more of a dynamic data structure)

e.g. for a graph with n nodes labeled with integers, could use an array of length n, each pointing to the node’s adjacency list

Please draw the adjacency list for following graph

Adjacency Lists: integer labels#

e.g. if the nodes are labeled by integers, an adjacency lists structure could be of type

1
ArrayList<Integer>[]

An edge exists from node i to node j when j is a node in the list adjacencyLists[i]

1
ArrayList<Interger> adjacencyLists[]= new ArrayList[n];

Adjacency Lists: non-integer labels#

More generally, if there is a type Node for the nodes of the graph, an adjacency list structure could be

1
ArrayList<Node> adjacencyLists = new ArrayList<Node>();

where each Node would contain its own adjacency list of type ArrayList<Node>.
In this case, edge exists from node n to node m when m is a node in the adjacency list belonging to node n.

1
Class Teacher {
2
    …………
3
    public ArrayList<Teacher> adjacencyLists = new ArrayList<Teacher>();
4
}
5
…………
6
Teacher l,j,ja,jak;
7
l.adjacencyLists.add(j);

Adjacency Lists features#

Access to edge information is not as fast as an adjacency matrix, because the relevant list has to be traversed.
However, the amount of memory required to store the adjacency lists can be less, as it is proportional to how many edges are in the graph.

More edges more space

Traversals#

A traversal is a way of systematically going through all the data in a structure, visiting each piece of data precisely once.
Traversals can be used for various purposes, including searching.
Two common types of graph traversal:
- Depth-first traversal
- Breadth-first traversal

3 traversal methods for binary tree

Depth-First Traversal#

Start at some node S
- If there is a node that is adjacent to S that you have not yet visited then visit it
- If there is an unvisited node adjacent to the one you just visited, then visit that.

Keep on doing this until you come to a “dead end”, that is to say that you reach a node that either has no adjacent nodes at all, or where all the adjacent nodes have already been visited.
When you get to a dead end, “backtrack” along the path that you just followed until you come to a node that has an unvisited adjacent node, and repeat the process from there.

Depth-First Traversal: Another Example#

This traversal:
A,B,E,F,G,C,D,H,I\textcolor{orange}{A, B, E, F, G, C, D, H, I}A,B,E,F,G,C,D,H,I
Different depth-first traversals are also possible, for example:
A,B,E,F,G,H,I,C,D\textcolor{orange}{A, B, E, F, G, H, I, C, D}A,B,E,F,G,H,I,C,D

Depth-First Traversal: Notes#

DFT can be implemented on directed graphs (in that case, the edge directions must be respected) or on undirected graphs (every edge goes in both directions)
DFT can be implemented using recursion, or using a stack of nodes (not covered in this lecture)
In either case, a record needs to be kept of the set of nodes that have been visited
- this set could be represented as an array of booleans, for example, one boolean for each node.

Depth-First Traversal pseudocode (recursive version)#

1
dft(g,n) {
2
    visit(n)
3
    mark n as visited
4
    for each node x adjacent to n {
5
        if x is unvisited then
6
            dft(g,x)
7
    }
8
}

Notes:

We assume that all nodes are originally marked as unvisited.

You don’t need to worry about what the visit method does (if you are worried, imagine that it just prints out the name of the node being visited).

Breadth-First Traversal#

Start at some point S
Repeat
- Visit all the nodes adjacent to S
- Visit all the nodes adjacent to the ones you just visited (unless you have already visited them)
- And so on

Explores nodes in a pattern that “radiates out” from the start point.

Breadth-First Traversal Example#

Starting at the root node, visit all its neighbours before visiting all their neighbours, and so on.

One possible order of nodes visited using this method:
A,B,C,D,E,F,G,H,I\textcolor{orange}{A, B, C, D, E, F, G, H, I}A,B,C,D,E,F,G,H,I

Note: as B was visited before C and D, B’s neighbors need to be visited before those of C and D.

Breadth-First Traversal: Notes#

BFT can also be implemented on directed graphs (respect the edge directions) or on undirected graphs (every edge goes in both directions)
BFT is usually implemented using a queue of nodes (the queue holds nodes waiting to be visited). The queue is used in the same way the stack is used for DFT. [Code not covered.]
Similarly as for DFT, a record needs to be kept of which nodes have been visited (e.g. in an array of booleans).

Using BFT/DFT to test connectivity#

Informally, an undirected graph is connected if you can draw it ALL without taking your pen off the paper (you may have to retrace some parts of it!)

Exercise#

To test the connectivity of an undirected* graph:

Algorithm:
Start from any node, do a BFT or DFT from that node, and test afterwards whether all the nodes were visited.

* It’s more complicated if the graph is directed.

Why?

Checklist#

What you want to be capable of by the end of this week:
- know basic graph terminology
- know suitable storage structures for graph data
- perform both depth-first and breadth-first traversals of graphs
- describe uses for graphs and traversals

Web Application Development - AJAX

Mon, 27 Apr 2026 00:00:00 GMT

Ajax#

Asynchronous JavaScript And XML
Technology pioneered by Microsoft for creating more sophisticated interactive pages and saving bandwidth
Based on extensions to JavaScript, and the XML general purpose markup language
Modern versions of AJAX often do not actually use XML, but the name has stuck

Basis of AJAX#

When the user first visits a page, the whole page is loaded
When the user interacts with the page, a JavaScript script runs to process the interaction
The JavaScript connects to the server, sending a request (possibly including data from the user) and receives back a response
The JavaScript then uses this response to update the content of the existing loaded page
Thus, a full web request/response cycle can occur without the need to reload the entire web page

Disadvantages of AJAX#

Requires a sophisticated browser: some older or non mainstream browsers may not support it at all
Can damage accessibility if the JavaScript script cannot create accessible content, which is often quite difficult
Secure HTTP is accepted only for a full page, not part of a page, so a new page must be loaded when entering a secure part of the site
Can increase security risk as a hacker can send fake requests that appear to come from the JavaScript scripts
May not be obvious to the user which interactions with the site will require a connection to the server

Benefits of AJAX#

Creates more modern and interactive user interfaces on the web
Makes the web interface appear more continuous than a series of separate pages
Minimizes server load by performing layout and presentation operations on the client
Minimizes bandwidth and traffic usage by not requiring a full page to be reloaded for every interaction

AJAX Technologies#

JavaScript for managing the AJAX interaction process
The DOM for allowing the JavaScript to manipulate the displayed page
XMLHttpRequest, a JavaScript add-on which allows a JavaScript script to make its own web requests and retrieve the data as JavaScript data rather than HTML
XML, the extensible markup language; a language for arbitrary data based on extending the syntax of HTML (or actually HTML’s predecessor, SGML)

XML#

XML is based on representing general structured data using the syntax rules of HTML
Elements and attributes have a similar syntax but any tags and attributes can be used

1
<student id="12345678">
2
    <first>John</first>
3
    <last>Smith</last>
4
    <module-enrolls>
5
        <module href="cct#U08785" year="3"/>
6
        <module href="cct#U08008" year="1"/>
7
    </module-enrolls>
8
</student>

… XML?#

XML can be downloaded and processed by JavaScript but it is more complex than needed for most AJAX applications
Thus most modern AJAX systems do not actually use XML
In spite of this the name AJAX has been retained for the technology, and the JavaScript add-on is still called XMLHttpRequest even though it can actually retrieve any HTTP data, not just XML
A more commonly used format is JSON

JSON#

JavaScript Object Notation
Based on the syntax used in JavaScript to set the value of an
object type variable

1
{
2
    "id" : "12345678",
3
    "first": "John",
4
    "last": "Smith",
5
    "module_enrols": [
6
        {"href": "cct#U08785", "year": 3},
7
        {"href": "cct#U08008", "year": 1}
8
    ]
9
}

Top-level sent data is an object
An object holds data in fields
Syntax of an object is:
{"field1":"value1", "field2":"value2", "numberfield":5}
If a field contains a sub-object, this syntax is nested
If a field contains an array, array syntax is:
["member1", "member2", "member3"]
Array and object syntaxes can be nested inside each other
Unlike XML (but like JavaScript), JSON has no concept of an object’s “type”
Because JSON is identical to JavaScript’s syntax, you can test JSON by typing it in at a JavaScript console (with a semicolon at the end)

Creating and decoding JSON#

In JavaScript, you can parse a JSON string into a JavaScript object with the built-in command JSON.parse().
If using Jquery, you can instead use $.parseJSON() which has the same functionality but will automatically work around if the browser does not have built-in JSON support.
You can turn a JavaScript object into a JSON string (although this is not usually needed except for debugging) by using JSON.stringify().

Python has a built in json library which can output data and structures as JSON.
The top level of a JSON structure should be based on a Python dictionary:

1
person = {"name": "Bob", "role": "Project Manager"}
2
print(json.dumps(person))

The default json library cannot output objects (members of classes), but you can add a method to your object to pack the important data members into a dictionary.
You can also write complete custom encoder methods if you need to.

Steps to creating AJAX#

Decide what interactions a page will support
Design the page to support those interactions
Identify the data that needs to be sent to and from the server
Write a Python script that performs the interaction and returns valid JSON
Write a JavaScript that calls the Python script and retrieves the JSON data
Extend the JavaScript to modify the page based on the returned JSON

Interactions for AJAX#

Should apply to part of a page – although this may be as simple as the page being divided into content and header
Should involve server interaction – a pure client-side shopping cart does not necessarily need AJAX
Can be especially useful if the data being retrieved is simple but the HTML presentation is complicated
Remember to allow for accessibility and for mobile browsers

Identify the data#

Identify the data that needs to be sent and decide on a JSON structure
Aim to send as little data as possible
Remember that the top level of the JSON structure must be an object
For example, if you wished to send a list of products, you might want to send an array:
might want to send an array:

1
[{"name": "product 1", "price": 200},
2
{"name": "product 2", "price": 300}]

But because the top level of JSON must be an object, you must wrap this inside a dictionary:

1
{"products":
2
    [{"name": "product 1", "price": 200},
3
    {"name": "product 2", "price": 300}]
4
}

Write the server#

Write a Python script which retrieves input from the user in the normal way, and retrieves data from (or even updates) the database
Instead of outputting HTML, the script should output JSON
You can output JSON manually or use the json library
Always follow the same rules regarding security and stability that you would for a regular web accessed script
Test your script by accessing it from a web browser via Flask
To check the JSON is valid, copy and paste it into your browser’s JavaScript console and place a variable assignment command before it (eg, x={the JSON};). If the JSON is valid, JavaScript should give no syntax error

Example Python#

1
# Run an SQL query (code to set up the query
2
# is not included in this example)
3
cursor.execute(query,(param1,param2..))
4
# Build a list of dicts from the results
5
productarray = []
6
for (id, name, price) in cursor:
7
    productarray.append({"id": id, "name": name,"price": price})
8
# Wrap inside a single dict and encode JSON
9
Return json.dumps({"products": productarray})

JSON output#

1
{
2
    "products": [
3
    {"id":1234, "name":"product 1"},
4
    {"id":2345, "name":"product 2"},
5
    . . . Rest of products . . .
6
    ]
7
}

Writing JavaScript to load JSON#

To load the JSON file into JavaScript, you will use the XMLHttpRequest extension.
Note that this is a misnomer: XMLHttpRequest can read multiple different types of content, not just XML.

1
var theRequest = new XMLHttpRequest();
2
theRequest.open("get","/json? Param=one&paramtwo=more");
3
theRequest.onload = () => {
4
    window.alert(
5
    JSON.parse(theRequest.response));
6
}
7
theRequest.send();

Loading JSON into JavaScript#

1
{
2
    "products": [
3
        {"id":1234, "name":"product 1"},
4
        {"id":2345, "name":"product 2"},
5
        . . . Rest of products . . .
6
    ]
7
}

If this data is loaded by a request, and reply = JSON.parse(request.response) then the product ID’s will be accessed as:

reply.products[0].id,

reply.products[1].id and so on.

The product names will be:

reply.products[0].name and so on.

Asynchronous requests#

AJAX requests by default are asynchronous.
This means that the send() method returns immediately. This indicates that the request has been sent to the server.
However, the server may not reply immediately (or at all). The specified onload function will be called when it does reply.
Make sure to tell the user somehow that their click has registered and the server will be contacted.
You may also wish to disable or hide the button or link that the user used to initiate the request – otherwise they may click it again, sending an extra request which will queue up with their original request and may cause confused operation.

Steps for an AJAX request#

In the initiating function:

Check a request is not already in progress
If it is, stop
Build an XMLHTTPRequest object holding the request
Load it with the request and the responding functions
Mark that a request is now in progress
Modify the UI so the user can see the request is in progress
Send the request

Then, in the responding function:

Mark that a request is no longer in progress
Remove the “request in progress” parts of the UI
Update the page based on the response

”Safe” JSON loading#

1
// Mutex must be declared global
2
if (mutex) return;
3
mutex = true;
4

5
var theRequest = new XMLHttpRequest();
6
theRequest.open(“get”,”script.php?
7
    Param=one&paramtwo=more”);
8
theRequest.onload = () => {
9
    mutex=false; window.alert(theRequest.response);
10
}
11
theRequest.onerror = () => {
12
    mutex=false; window.alert(“AJAX error”);
13
}
14
theRequest.timeout=10000;
15
theRequest.ontimeout = function() {
16
    theRequest.abort(); mutex=false;
17
    window.alert(“AJAX timed out”);
18
}
19

20
theRequest.send();

展开收起

Testing JavaScript JSON loader#

The URL accessed can be a static JSON file or a script which generates JSON. You may wish to use a static JSON file for testing. If you are typing JSON in by hand, make sure to use a web console to check that it is valid.
The URL must be on the same site as the HTML file that contains the JavaScript.
The JSON response will initially be a string that can be printed, but not accessed by field. After JSON.parse, it will be a JavaScript object, so when printed out directly, it will just read “[Object object]”. This does however confirm that some valid JSON was received. To see the contents of the object you could print them individually.

A complete example#

Suppose that we wish to create a simple menu-like browser, perhaps for products
The web page will present a list of items, and clicking on each one will take the user to another list
Each list will be loaded dynamically from the server
The JSON structure returned from the server will be this:

1
{
2
    items:
3
    [{name: "item name", link: "link ref"},
4
    {name: "item 2", link: "link 2"}]
5
}

Create a loading message: note we use the “display: none” setting to make this not appear when the page is loaded

1
<style>
2
div.loading {
3
    position: fixed;
4
    border: 5px #aaaaaa solid;
5
    left: 30%;
6
    right: 30%;
7
    top: 456;
8
    bottom: 456;
9
    text-align: center;
10
    cursor: wait;
11
    font: 12pt sans-serif;
12
    display: none;
13
}
14
</style>
15

16
<div id="loading" class="loading">
17
    Loading...
18
</div>

展开收起

Create an initially-empty div inside the HTML to receive the data

1
<div id="browser">
2
</div>

Add a JavaScript to the loading of the page

1
<body onload="startUp();">

On start up, get a reference to the div and store in a global variable, and make our first AJAX request

1
function startUp() {
2
  var browserbox = document.getElementById("browser");
3
  var mutex = false;
4
  fetchList("start");
5
}

Function to make an AJAX request

1
function fetchList(menuid) {
2
    // Don’t allow multiple requests at once
3
    If (mutex) return;
4
    mutex = true;
5
    // Show the loading message
6
    document.getElementById("loading").style.display = "block";
7
    // set up the request
8
    var theRequest = new XMLHttpRequest();
9
    theRequest.open("get","menuserver.php?pageid=" + menuid);
10
    theRequest.onload = () => {
11
        menuLoaded(this.response);
12
    }
13
    theRequest.send();
14
}

Function run once the AJAX data is received

1
function menuLoaded(liststring) {
2
    // Request is over now
3
    mutex = false;
4
    // Hide the loading message
5
    document.getElementById("loading").style.display = "none";
6
    let listobject = JSON.parse(liststring);
7
    let theList = listobject.items;
8
    // Remove all the old list items
9
    while (browserbox.firstChild) {
10
        browserbox.removeChild(browsebox.firstChild);
11
    }
12
    // Loop through the list we loaded
13
    for(let t=0; t<theList.length; t++) {
14
    // Create an LI element for each one
15
    let newLi = document.createElement("LI");
16
    // Put the name of the item as text inside
17
    // the LI
18
    let newText = document.createTextNode(items[t].name);
19
    newLi.appendChild(newText);
20
    // Use a value closure to set up a function
21
    // to run when the item is clicked
22
    newLi.onclick = ((object) => ((event) => {
23
        browserClicked(object);
24
    })) (items[t]);
25
    // Add the new list item to the “browse” DIV
26
    browserbox.appendChild(newLi);
27
    }
28
}

展开收起

Aside: closures and value closures#

When we create a new LI to represent an item with a given name, we want to give that LI an on-click event handler
We would like that event handler to know the name and other details of the item that has been clicked on
Unfortunately an event handler is only allowed to have one input, which represents the event which just happened
We can write the event handler as a built in function like this:

1
newLi.onclick = (event) => {
2
  browserClicked(items[t]);
3
};

Since “items” and “t” are both local variables in the menuLoaded function: this creates a closure. These variables are placed into the scope of the event handler even though they would not normally be accessible from there.

1
newLi.onclick = (event) => {
2
    browserClicked(items[t]);
3
};

Unfortunately this doesn’t work because the event handler is given references to the variables – including the variable t
In other words, if the values of items[] or t change after this event handler is created, they will change in the event handler too
Unfortunately, here we are creating multiple event handlers in a loop and T is the loop counter, and is used in all event handlers
Thus all event handlers will get the same reference to items[t], and t will have the value it has at the end of the loop, which is the length of the items array

1
newLi.onclick = ((object) => ((event) => {
2
    browserClicked(object);})) (items[t]);

The purpose of this rather awkward syntax is to create a value closure of items[t]
This means that the value of items[t] that exists at the moment the event handler is added is placed inside the event handler and remains there forever

Closures#

1
newLi.onclick = (event) => {
2
    browserClicked(items[t]);
3
};
4
(event)=>{browserClicked(object);}

is the actual event handler function.

1
(object)=>((event)=>{
2
        browserClicked(object);})

is technically a function that returns event handler functions. It inputs a parameter object and returns an event handler which uses that value as the parameter of browserClicked. Because this is a separate function, it has its own scope, so there is no danger of object being shared with other event handlers.
The overall syntax creates a function to return event handler functions and then immediately calls it with items[t].

A complete example#

Function run when an item is clicked

1
Function browserClicked(item) {
2
  // Make the next AJAX request
3
  fetchList(item.link);
4
}

FetchList will run, make the next AJAX request, and once the result is received it will call menuLoaded which will load the new items into the div
In a real system browserClicked() would probably be more complicated as items clicked on may have several effects – for example, clicking on a category might go to that category, but clicking on a product might add it to the cart

Steps to creating AJAX#

Decide what interactions a page will support
Design the page to support those interactions
- Probably within the template for the page
Identify the data that needs to be sent to and from the server
- Decide on a JSON structure
Write a Python script that performs the interaction and returns valid JSON
- Build a dictionary and use json.dumps
Write a JavaScript that calls the Python script and retrieves the JSON data
- Use XMLHttpRequest and JSON.parse
Extend the JavaScript to modify the page based on the returned JSON
Use closures if necessary to pack the necessary information into the response handler

Foundations of Security Week7 Seminar: Password Cracking & Secure Hashing

Thu, 23 Apr 2026 00:00:00 GMT

Learning Outcomes#

Understand Hashing

Learn what hashing is and why it matters in security

Hashing vs Encryption

Understand the key difference between these two concepts

Generate & Compare Hashes

Practice creating password hashes using Python scripts

Dictionary Attack

Simulate a basic attack to crack weak password hashes

Rainbow Tables

Know what rainbow tables are and how attackers use them

Salting

Learn why salting protects passwords from attacks

What is Hashing#

One-Way Function

Hashing converts any input (like a password) into a fixed-length string of characters. It's a mathematical one-way street.

Irreversible

Once hashed, you cannot retrieve the original input from the hash. This is what makes hashing perfect for password storage.

Avalanche Effect

Even a tiny change in input creates a completely different hash. This ensures uniqueness and security.

How Hashing Works

Input

Any Length

→

Hash Function

Processing

→

Output

Fixed Length

Real Example: Avalanche Effect

Input: password

5f4dcc3b5aa765d61d8327deb882cf99

Input: Password (capital P)

dc647eb65e6711e155375218212b3964

How Hashing Works#

INPUT

(Any Length)

"password123"

"Hello World!"

"abc"

"MySecretP@ss2024!"

HASH
FUNCTION

OUTPUT

(Fixed 64 chars)

ef92b778...

315f5bdb...

ba7816bf...

9d4e6af0...

The hash cannot be reversed — you can never get the original password back from a hash!

How Passwords Are Stored#

Step 1

User creates
password

Step 2

System hashes
the password

Step 3

Hash is stored
in database

Step 4

Original password
is NEVER saved

Example — What a database actually stores:

Username:	alice
Password Hash:	5e884898da28047151d0e56f8dc6292773603d0d6...

DANGEROUS: Plain Text

Database stores:

Username: john_doe

Password: mysecret123

If database is breached, attacker sees all passwords immediately
Users often reuse passwords across sites
Legal and compliance violations (GDPR, etc.)

SECURE: Hashed Storage

Database stores:

Username: john_doe

Password Hash: 5f4dcc3b5aa765d61d8327deb882cf99

Even if database is breached, passwords remain protected
Attacker cannot reverse the hash to get original password
Meets security compliance requirements

Never store passwords in plain text!

This is considered negligent and can result in severe penalties.

Always hash passwords!

This is the industry standard and minimum security requirement.

Common Hash Algorithms#

MD5

SHA-1

SHA-256

MD5

AVOID

Message Digest 5

Created: 1991

Output: 128 bits (32 chars)

Why Avoid:

Vulnerable to collision attacks. Can generate same hash for different inputs.

SHA-1

DEPRECATED

Secure Hash Algorithm 1

Created: 1995

Output: 160 bits (40 chars)

Why Deprecated:

Theoretical attacks proven. Google demonstrated real collision in 2017.

SHA-256

RECOMMENDED

Secure Hash Algorithm 256

Created: 2001

Output: 256 bits (64 chars)

Why Recommended:

Part of SHA-2 family. Currently secure with no practical attacks.

Hashing vs Encryption#

Hashing

One-Way Process
No Key Required
Fixed Output Length

Used For:

Password storage, data integrity verification, digital signatures

Encryption

Two-Way Process
Requires a Key
Variable Output Length

Used For:

Data transmission, file protection, secure messaging

Dictionary Attack#

What is a Dictionary Attack?

A dictionary attack uses a pre-compiled list of common passwords ("dictionary") and tries each one against a stolen hash.

Instead of trying every possible combination (brute force), attackers focus on passwords people actually use.

Common Password Lists Include:

password123

qwerty

12345678

admin

letmein

welcome1

iloveyou

monkey

Why It Works

People Use Weak Passwords

Studies show 23 million accounts use "123456"

Fast Processing

Modern GPUs can test billions of passwords per second

Password Reuse

59% of people reuse passwords across sites

Rainbow Tables#

Understanding Rainbow Tables

A rainbow table is a pre-computed database of password hashes.

Attackers create these tables in advance, then use them to crack passwords instantly without computing hashes during the attack.

What a Rainbow Table Looks Like:

Plain Text	MD5 Hash
password	5f4dcc3b5aa765d61d...
123456	e10adc3949ba59abbe...
qwerty	d8578edf8458ce06fbc...
admin	21232f297a57a5a7438...
letmein	0d107d09f5bbe40cade...

Why They're Dangerous

Instant Cracking

No computation needed during attack - just a table lookup

Mass Cracking

One table can crack millions of passwords

Freely Available

Tables for common passwords can be downloaded online

Comparison#

Attack Type	Main Idea	How it Works	Speed	Main Weakness	Best Defense
Dictionary Attack	Tries likely passwords	Uses a list of common words, names, and weak password patterns	Faster than brute force	Fails if password is uncommon and strong	Strong, unique passwords and account lockout
Brute Force Attack	Tries every possible combination	Tests all possible characters and lengths until the correct password is found	Slowest	Very time consuming for long complex passwords	Long, complex passwords and rate limiting
Rainbow Table Attack	Looks up precomputed hash values	Compares stolen password hashes against a prebuilt table of password-hash pairs	Very fast once table exists	Fails against salted hashes	Salting and strong hash algorithms

Salting#

Understanding Salting

Salting is the process of adding a unique, random string to each password before hashing. This ensures that even identical passwords produce completely different hashes.

How Salting Works:

User enters password: password123

System generates random salt: x7#K9mP$

Combines: password123x7#K9mP$

Hashes combined string → stores salt + hash

Storage Format

Database stores:

Username: john_doe

Salt: x7#K9mP$

Hash: a3f7c2d8...

Salt is stored in plain text! Its purpose is to make pre-computed attacks impossible, not to be secret.

Same password, but different hashes — because of unique salts:

Simple Database illustration#

user_id	username	salt	hashed_password
1001	john	X7p@9Lm#2Qa	9f3c7d8e2a4b1c6d7e8f9012ab34cd56ef78ab90cd12ef34
1002	mary	T4n$8Vb!1Zo	4b2d8f1a7c9e3d5f6a1b2c3d4e5f6789ab12cd34ef56ab78
1003	david	M2q&7Hy*5Lp	c7e1a9d4b3f8c2e6d5a7b9c0ef12ab34cd56ef78ab90de12
1004	sarah	R9k!3Wd@8Xs	1d8f7c6b5a4e3d2c9b0aef12cd34ab56ef78ab90cd12ef45
1005	michael	P6m#1Qr$7Jn	8a3d1f7c9e2b4d6f5a8c0e12ab34cd56ef78ab90cd12aa67

Password Security Best Practices#

1. Use Strong Hash Algorithms

Choose algorithms specifically designed for password hashing:

bcrypt (Recommended)

Argon2 (Winner of Password Hashing Competition)

SHA-256 (OK with proper salting)

3. Enforce Strong Password Policies

Help users create secure passwords:

Minimum 12 characters
Require mixed case, numbers, symbols
Check against known breached passwords
Encourage password managers

2. Always Add Unique Salts

Every password must have its own random salt:

Generate 16+ byte random salt per user
Use cryptographically secure random generator
Store salt alongside hash (not a secret)

4. Implement Additional Layers

Defense in depth approach:

Rate limiting (prevent brute force)
Account lockout after failed attempts
Two-factor authentication (2FA)
Pepper (optional secret salt)

Password Hashing & Cracking Activity#

Create a directory to work in, copy the extracted files and change to it by entering cd followed by that directory name.

Option 1: Use an old project’s already installed flask and virtual environment

Option 2: Create new virtual environment and install flask mysql-connector-python

Web Application Development Practical7: MySQL

Wed, 22 Apr 2026 00:00:00 GMT

Practical session 7: MySQL#

To do this practical you will need to have MySQL installed on your computer.

Warning: MySQL is a server and is not very tolerant of errors. Please make sure read and follow all parts of every instruction carefully and do not skip over any.

If you are using Windows, download the MySQL Installer from https://dev.mysql.com/downloads/installer/ . If you are using MacOS, download MySQL Community Server from https://dev.mysql.com/downloads/mysql/ . If you are using Linux, you can install MySQL through your Linux distribution’s package manager.

Install MySQL for “all users”, but not “as a service”. Do not install MySQL to run automatically when the computer is started, as you do not need it to do so and it will take up system resources. Make sure to note the directory in which MySQL is installed. You may also be asked to choose a password; make sure to remember it.

You will now need to set up MySQL. Note: if you are using Linux you may need to refer to your Linux distribution’s documentation on how to set it up and run it in order to integrate correctly.

Setup Process#

Open a Command Prompt or Terminal.
Add MySQL to your PATH by entering:
- Windows: set PATH=%PATH%;"C:\Program Files\MySQL\MySQL Server 8.0\bin"
- MacOS: export PATH=$PATH:/usr/local/mysql/bin

If you installed MySQL in a diﬀerent directory, change the directory in the command as appropriate.

CD to a suitable work directory (your Documents directory will do) and create an empty folder for MySQL data: md mysqldata under Windows or mkdir mysqldata under MacOS.
CD into the folder you just created.
Run mysqld --datadir=. --initialize --console to set up a MySQL data store in that directory. You will be given a “Temporary password” - remember or copy it from the command line.
Start the server: mysqld --datadir=. --standalone --console. This will appear to freeze, but that’s OK; the server is running.
Start another command prompt, and repeat step 2 to ensure the MySQL utilities directory is on your path.
Since the default password was probably a random sequence of characters, Run mysqladmin -u root -p password xyz, replacing xyz with what you would like the password to be. When prompted, enter the default password you were given when you initialized the data store in step 5.
Create a database: mysqladmin -u root -p create practical7. Give the password you set in step 8. practical7 is the name of the database which you can change if you want to.
It is ensure to do all work on a database using an admin user. Enter the MySQL interface as an admin by entering mysql -u root -p and typing the password from step 8.
Enter the following commands to create a user speciﬁc to the database you just created:

1
create user 'practical7'@'localhost' identified by 'rubbish';
2
use practical7;
3
grant all privileges on *.* to 'practical7'@'localhost';
4
flush privileges;

You can change the name of the user by changing practical7 where it appears as part of practical7@localhost (the name after use must match the name of the database you created in step 9). You can change the new user’s password by changing rubbish.

Type quit to leave the MySQL console as admin.

From now on, to get to the MySQL console you will only need to perform steps 2, 4 and 6. If you decide to create a new database (for example, for your coursework) you will need to repeat steps 6 and 9-11. Do not repeat step 5 as this will wipe out everything in the database

(although MySQL will not normally allow you to do this if there is already data in the data directory)

Important: When you are ﬁnished using MySQL you must shut it down by running mysqladmin -u root -p shutdown and entering your admin password (from step 8).

Working with the database#

Start the MySQL interface as your new user by entering mysql -u practical7 -p and entering the user password you set up in step 11 above (which will be rubbish if you used the command as written).
Select the database that you created during setup: use practical7;
Type the following command to create a table wd_person. You may type the command on multiple lines if it is more comfortable. Pressing return will not end the current command if you have not typed a semicolon.

1
create table wd_person (personID int auto_increment
2
    primary key, name varchar(30) not null, dogID int);

Type the following command to add an example entry to the wd_person table:

1
insert into wd_person (personID, name, dogID) values
2
    (null, "Robin Goodfellow", 1);

To view the added entry, type select * from wd_person;. Note that the number 1 was automatically inserted into personID, even though you specified null in the insert command, because the column was set auto_increment when you created the table.

Note: using select * from... is OK for debugging and interaction, but is a bad idea when writing Python code, because it means your code does not know what order and how many ﬁelds are returned.

Add another person to the wd_person table with the name “Matilda Whirligig” and dogID of 2. Leave personID as null so that auto_increment updates it for you. Aher adding them, run select * from wd_person; again to conﬁrm that the addition worked.
The MySQL command to change a value in an existing row is update. Enter update wd_person set dogID=3 where personID=2;. Then view the table again and check that the dogID of Matilda Whirligig is now 3.

Note: the where clause of the update command can specify several records if you wish, but this will cause the same update to be made to all of them. Thus, update wd_person set dogID=3 where name="Matilda Whirligig"; is perfectly legal, but risks setting invalid data if more than one person in the database has that name. Usually, it should refer to a table’s primary key to ensure that only the correct record is updated.

Using update, change Robin Goodfellow’s dogID to 4.
Create a new table wd_dog with the following data dictionary:

Column Name	Type
dogID	Auto incremented 32-bit int, primary key
name	Variable character length string, up to 40 characters, not null
age	Unsigned 8 bit int

Insert an entry into the wd_dog table by entering insert into wd_dog (dogID, name, age) values (3, "Toto", 2);
We can now use the dogID ﬁeld to relate wd_person rows to wd_dog rules. Enter the following to see how this works:

1
select wd_person.name, wd_dog.name from wd_person
2
    inner join wd_dog on wd_person.dogID = wd_dog.dogID;

Create another select query using inner join that displays the name of a person and the age of their dog.
Note that Robin Goodfellow does not appear in the list, because he has no related wd_dog row; his dogID entry is 4, but there is no corresponding row in wd_dog with dogID 4. The inner join command speciﬁes that only rows where records exist on both sides should be included in the result. Try retyping the command from question 11, but replace the words inner join with left join, which specifies that all records on the left hand side of the command should be included. See how the results differ. (Note that in real databases, left join is slow, and so should not be used if you can help it.)
Type insert into wd_dog (dogID, name, age) values (4, "Prince", 1);. Rerun the same command from step 11 (with inner join included) and notice that Robin now does appear, because we just created a matching wd_dog row for him.
You can delete a record from a table with the delete command. It works the same as the update command; you specify which record to delete with the where keyword. You can specify multiple records if you wish, but they will all be deleted. Enter delete from wd_dog where name="Toto";. Then try steps 11 and 13 again and notice how the results change.
Type quit to leave the mysql tool.
Copy and paste the following Python code into a .py file, changing the connect line appropriately:

1
import mysql.connector
2
cnx = mysql.connector.connect(user='practical7', password='rubbish', host='127.0.0.1', database='practical7')
3
cursor = cnx.cursor()
4
query = "select name from wd_dog where dogID=%s;"
5
cursor.execute(query, (4,))
6
for name in cursor:
7
    print(name)
8
cnx.close()

Run this Python program (this is not a web-based program, so you can run it from your IDE). It should output the name of the wd_dog with dogID 4, ie, Prince .

(If you get an error that mysql is not found as a module, run pip3 install mysql- connector-python at a command prompt, after placing Python on your path.)

Modify the program so that it instead inputs the name of a person, and looks up their ID in the database.

In order to reduce load on the server, the MySQL cursor does not actually search for all the records matching your query at once. Instead, it searches one by one as they are needed by the for loop. That means that you cannot simply ask the cursor how many records were found (or even if any were found) because it does not know until the loop is finished. In order to give the user an error message if no record is found, you must use a flag to detect if the loop body executed or not.

At your command prompt, go to a working directory (not the MySQL data directory) and run: mysqldump -u practical7 -p practical7 > p7dump.sql. Enter the password you have used for the practical7 user. This will not produce any output but will write a file p7dump.sql containing the database speciﬁcation and all data. This is how you will submit the database for your coursework.
Starting from the basic to-do list application from last week (you can re-download the zip file if you wish), modify the to-do list application so that it stores the todoes in a database rather than a cookie. You may assume that all to-dos are shared by all users of the application, so there is no need to associate to-dos with users or implemented logging in. You will need to do the following:
- Use mysql again to create a table of todos. It only needs two columns: an ID and the text of the todo. The ID should be the primary key and auto-incrementing.
- Write a function in the Python program that connects to the database and runs a select query that fetches the todo IDs and the todo texts. The function should use a for loop through the cursor to fetch all of the values and build them into a list, as pairs.
- Modify the todos.html template so that instead of looping through a list of text todos, it loops through a list of pairs, displaying the text inside the td element and using the ID number (rather than the loop index) in the name of the checkbox.
- Modify the Python program so that where ever the todos.html template is used, instead of using session["todoes"] as the parameter, your program calls the function you previously wrote to fetch the results from the database. At this point you should be able to test this by adding some sample todos to the database with the mysql interface first.
- Modify the /add route so that it forms and runs an INSERT INTO... query using the newTask text from the form. Leave the ID column of the inserted values as null so that auto-increment ﬁlls it in for you.
- Modify the /complete route so that it runs a series of DELETE FROM... queries based on the complete_ boxes that were checked on the form. You do not need to worry about searching for the tasks, or deleting them in reverse order, as the SQL server will manage those for you.

Notice

Remember to shut down your MySQL server (mysqladmin -u root -p shutdown) when you’re finished!

Foundations of Security Week7 Lecture

Tue, 21 Apr 2026 00:00:00 GMT

Lecture Outline#

Limitations of symmetric key encryption
Introduction to Diffie–Hellman key exchange
Introduction to ElGamal encryption
Key generation, encryption and decryption process of ElGamal
Introduction to Digital signature and RSA signature
Structure of the Feistel cipher

Learning Outcomes#

By the end of this lecture, students should be able to:

Explain the key distribution problem in symmetric encryption
Describe the purpose of the Diffie–Hellman key exchange
Explain how two parties establish a shared secret using Diffie–Hellman
Apply ElGamal encryption through practical examples
Understand Digital Signature and How the RSA signature works
Describe the structure and working principle of the Feistel cipher

Symmetric Key Encryption#

Symmetric Key Encryption is a cryptographic method where the same key is used for both encryption and decryption.

In this system, both the sender and the receiver share a secret key, and they use it to transform plaintext (original message) into ciphertext (encrypted message) and vice versa.

Problem with the Symmetric Key Encryption#

Symmetric Key Encryption#

Problem with the Symmetric Key Encryption#

Transmission of secret key over a public channel is vulnerable to attacks.
Attacker can intercept both the shared secret key (K) and ciphertext during transmission.
If the secret key is compromised, all communication using that key is at risk.

Diffie-Hellman Key Exchange#

The Diffie–Hellman key exchange is a method for securely exchanging cryptographic keys over a public channel. It allows two parties to each generate a shared secret key without directly transmitting it over the network.
Introduced in 1976 by Whitfield Diffie and Martin Hellman.
It was the first practical method for establishing a shared secret over an unprotected communications channel.
It allows two parties who have never met before to securely establish a shared key, which can then be used to secure their communication.
It enables secure key exchange without transmitting the actual secret key

How it works#

Reading Assignment#

How to find a generator/primitive root#

Example#

Quiz#


Alice’s secret key: SA=3\textcolor{blue}{S_A} \mathbf{= 3}SA=3	Bob’s secret key: SB=4\textcolor{blue}{S_B} \mathbf{= 4}SB=4

Task:

Users A and B are using the Diffie-Hellman key exchange method with a common prime P=11\textcolor{blue}{P=11}P=11 and a generator g=2\textcolor{blue}{g=2}g=2. User A chooses her secret key SA=3\textcolor{blue}{S_A} \mathbf{= 3}SA=3 and computes her public value CA=8\textcolor{blue}{C_A}\mathbf{=8}CA=8, which she sends to User B through the public channel. User B selects his secret key SB=4\textcolor{blue}{S_B}\mathbf{=4}SB=4 and computes his public value CB=5\textcolor{blue}{C_B}\mathbf{=5}CB=5, which he sends to User A through the public channel. What is the common secret key shared between User A and User B?

ElGamal Encryption#

The ElGamal Encryption Algorithm is a public-key cryptosystem based on the difficulty of the discrete logarithm problem. It was developed by Taher ElGamal in 1985 and is used for secure data transmission.

Key Generation#

Choose a large prime number, p\textcolor{blue}pp.
Select a generator (ggg): Pick a number g\textcolor{blue}gg (where 1<g<p−11 < g < p−11<g<p−1) that is a generator/primitive root modulo ppp. This ensures ggg can generate all numbers from 111 to p−1p−1p−1 when raised to different powers.
Pick a private key, x\textcolor{blue}xx: Choose a random integer 𝑥 (where 1⩽x⩽p−21 \leqslant x \leqslant p−21⩽x⩽p−2) as the private key.
Compute the public key y\textcolor{blue}yy: Calculate y=gx mod p\textcolor{blue}{y = g^x \bmod p}y=gxmodp. The public key is the triplet (p,g,y\textcolor{red}{p,g,y}p,g,y), while x\textcolor{red}xx remains secret.

Encryption#

To encrypt a message m\textcolor{blue}mm (where 0⩽m<p0 \leqslant m < p0⩽m<p):

Obtain the recipient’s public key: Use their (p,g,y\textcolor{blue}{p,g,y}p,g,y)
Choose a random number k\textcolor{blue}kk: Select a random integer kkk (where 1⩽k⩽p−21 \leqslant k \leqslant p−21⩽k⩽p−2). This is the session key and should be unique for each encryption.
Compute the ciphertext pair:
c1=gk mod p\textcolor{blue}{c_1 = g^k \bmod p}c1=gkmodp (this hides 𝑘 and is sent as part of the ciphertext).
c2=m⋅yk mod p\textcolor{blue}{c_2 = m \cdot y^k \bmod p}c2=m⋅ykmodp (this encrypts the message using the recipient’s public key).
Send the ciphertext: The encrypted message is the pair (c1,c2\textcolor{blue}{c_1,c_2}c1,c2).

Decryption#

To decrypt the ciphertext (c1,c2\textcolor{blue}{c_1,c_2}c1,c2) using the private key xxx:

Compute the shared secret: Calculate s=c1x mod p\textcolor{blue}{s= c_1^x} \bmod ps=c1xmodp. Since c1=gk\textcolor{blue}{c_1=g^k}c1=gk, this becomes s=(gk)x=gkx mod p\textcolor{blue}{s=(g^k)^x=g^{kx} \bmod p}s=(gk)x=gkxmodp.
Find the modular inverse of sss: Compute s−1 mod p\textcolor{blue}{s^{−1} \bmod p}s−1modp (the number such that s⋅s−1≡1 mod p\textcolor{red}{s \cdot s^{−1} \equiv 1 \bmod p}s⋅s−1≡1modp).
Recover the message: Calculate m=c2⋅s−1 mod p\textcolor{blue}{m = c_2 \cdot s^{−1} \bmod p}m=c2⋅s−1modp.

Why it works:
c2=m⋅yk=m⋅(gx)k=m⋅gkx\textcolor{blue}{c_2} = m \cdot y^k = m \cdot \textcolor{blue}{(g^x)^k} = m \cdot \textcolor{blue}{g^{kx}}c2=m⋅yk=m⋅(gx)k=m⋅gkx, so
c2⋅s−1=(m⋅gkx)⋅(gkx)−1=m\textcolor{blue}{c_2} \cdot \textcolor{blue}{s^{−1}} = (m \cdot \textcolor{blue}{g^{kx}}) \cdot (\textcolor{blue}{g^{kx}})^{−1} = mc2⋅s−1=(m⋅gkx)⋅(gkx)−1=m.

ElGamal Example#

ElGamal Encryption#

Quiz#

ElGamal Encryption Quiz -1#

ElGamal Encryption Quiz - 2#

Task:

Consider an ElGamal encryption scheme with a common prime p=23\textcolor{red}{p=23}p=23 and a primitive root (generator) g=5\textcolor{red}{g=5}g=5. Given that the public key Y=4\textcolor{red}{Y=4}Y=4 and User C chooses the random integer k=3\textcolor{red}{k=3}k=3, what is the ciphertext for the message M=15\textcolor{red}{M=15}M=15?

Digital Signature#

A digital signature is a cryptographic technique used to prove the authenticity and integrity of a digital message or document.
It is created using the sender’s private key and verified using the sender’s public key.
It provides assurance that the message has not been modified in transit.

Authentication

Confirms the identity of the sender

Integrity

Detects any change in the message

Non-repudiation

RSA Signature: Choosing Public and Private Keys

Choose two prime numbers: p=3p = 3p=3 and q=17q = 17q=17
Compute n=p×q=3×17=51n = p \times q = 3 \times 17 = 51n=p×q=3×17=51
Compute ϕ(n)=(3−1)(17−1)=2×16=32\phi(n) = (3 − 1)(17 − 1) = 2 \times 16 = 32ϕ(n)=(3−1)(17−1)=2×16=32
Choose e such that 1<e<ϕ(n)1 < e < \phi(n)1<e<ϕ(n) and gcd⁡(e,ϕ(n))=1\gcd(e, \phi(n)) = 1gcd(e,ϕ(n))=1. Let e=5\textcolor{blue}{e = 5}e=5
Find d such that e⋅d≡1( mod ϕ(n))e \cdot d \equiv 1 (\bmod \phi(n))e⋅d≡1(modϕ(n))
Here, 5×13=65≡1( mod 32)5 \times 13 = 65 \equiv 1 (\bmod 32)5×13=65≡1(mod32), so d=13\textcolor{blue}{d = 13}d=13

Public key
(e, n) = (5, 51)

Private key
(d, n) = (13, 51)

These keys are used
for signing and verifying

RSA Signature: Signing and Verifying the Signature

Sender uses private key to sign

Let the message hash be h = 2
Use the private key (d, n) = (13, 51)
Compute signature: s = h^d mod n

s = 2¹³ mod 51
= 8192 mod 51
= 32

The digital signature is s = 32

Receiver uses public key to verify

Receiver uses the public key (e, n) = (5, 51)
Verify signature s = 32 by computing
h' = s^e mod n
If h' equals the original hash h = 2, the signature is valid

h' = 32⁵ mod 51
= 33554432 mod 51
= 2

Since h' = 2 = h, the signature is valid

Feistel Cipher#

The Feistel Cipher is a symmetric encryption algorithm that uses a structure that divides the data into two halves and processes them through multiple rounds of permutation and substitution and then recombines them to produce the ciphertext.
Its decryption process is essentially the same as encryption, just with the key schedule reversed.

How it works#

Splitting the Input: The plaintext block (say, 64 bits) is divided into two equal halves: a left half (L) and a right half (R). Eg. if the block is 64 bits, L₀ and R₀ = 32 bits each.
Round Function:
- The right half (R) is fed into a round function F, which takes R and a round-specific subkey Ki\textcolor{red}{K_i}Ki(derived from the main encryption key) as inputs. This function involve substitution boxes, or S-boxes, and permutations that scrambles the data.
- The output of F is XORed (exclusive OR) with the left half (L).
- The halves swap places: the old R becomes the new L, and the XOR result becomes the new R.
Multiple Rounds: This process repeats for a set number of rounds (usally 16). Each round uses a different subkey, generated from the main key via a key schedule algorithm.
Final Step: After the last round, the halves are concatenated to form the ciphertext.

Example#

2 ROUNDS

Plaintext: 16-bit plaintext
1010 1100 0110 0011
Subkeys: Two 8-bit
- Round 1 subkey (K1K_1K1):
  1100 1010
- Round 2 subkey (K2K_2K2):
  0011 0101
Round Function (F):
Define F(R, K) as R XOR K followed by a left circular shift of 2 bits.

How it works#

Round 1#

Apply FFF to R0R_0R0:
- R0=0110 0011R_0 \textcolor{red}= 0110 ~ 0011R0=0110 0011
- K1=1100 1010K_1 \textcolor{red}= 1100 ~ 1010K1=1100 1010
- R0 XOR K1=0110 0011⊕1100 1010=1010 1001R_0 ~ XOR ~ K_1 \textcolor{red}= 0110 ~ 0011 \textcolor{red}\oplus 1100 ~ 1010 \textcolor{red}= 1010 ~ 1001R0 XOR K1=0110 0011⊕1100 1010=1010 1001 (decimal 169)
- Left shift 2 bits: 1010 10011010 ~ 10011010 1001 → 1010 01101010 ~ 01101010 0110 (decimal 166)
- So, F(R0, K1)=1010 0110F(R_0,~ K_1) \textcolor{red}= 1010 ~ 0110F(R0, K1)=1010 0110
XOR with L0L_0L0:
- L0=1010 1100L_0 \textcolor{red}= 1010 ~ 1100L0=1010 1100
- F(R0, K1)=1010 0110F(R_0,~ K_1) \textcolor{red}= 1010 ~ 0110F(R0, K1)=1010 0110
- L0⊕F(R0, K1)=1010 1100⊕1010 0110=0000 1010L_0 \oplus F(R_0,~ K_1) \textcolor{red}= 1010 ~ 1100 \textcolor{red}\oplus 1010 ~ 0110 \textcolor{red}= 0000 ~ 1010L0⊕F(R0, K1)=1010 1100⊕1010 0110=0000 1010 (decimal 10)
Swap:
- New L1=R0=0110 0011L_1 = R_0 \textcolor{red}= 0110 ~ 0011L1=R0=0110 0011
- New R1=L0⊕F(R0, K1)=0000 1010R_1 = L_0 \oplus F(R_0,~ K_1) \textcolor{red}= 0000 ~ 1010R1=L0⊕F(R0, K1)=0000 1010

After Round 1: L1=0110 0011, R1=0000 1010L_1 \textcolor{red}= 0110 ~ 0011,~ R_1 \textcolor{red}= 0000 ~ 1010L1=0110 0011, R1=0000 1010

Round 2#

Apply FFF to R1R_1R1:
- R1=0000 1010R_1 \textcolor{red}= 0000\ 1010R1=0000 1010
- K2=0011 0101K_2 \textcolor{red}= 0011\ 0101K2=0011 0101
- R1 XOR K2=0000 1010⊕0011 0101=0011 1111R_1\ XOR\ K_2 = 0000\ 1010 \textcolor{red}\oplus 0011\ 0101 = 0011\ 1111R1 XOR K2=0000 1010⊕0011 0101=0011 1111 (decimal 63)
- Left shift 2 bits: 0011 11110011\ 11110011 1111 → 1111 11001111\ 11001111 1100 (decimal 252)
- So, F(R1,K2)=1111 1100F(R_1, K_2) = 1111\ 1100F(R1,K2)=1111 1100
XOR with L1L_1L1:
- L1=0110 0011L_1 \textcolor{red}= 0110\ 0011L1=0110 0011
- F(R1,K2)=1111 1100F(R_1, K_2) \textcolor{red}= 1111\ 1100F(R1,K2)=1111 1100
- L1⊕F(R1,K2)=0110 0011⊕1111 1100=1001 1111L_1 \oplus F(R_1, K_2) \textcolor{red}= 0110\ 0011 \textcolor{red}\oplus 1111\ 1100 \textcolor{red}= 1001\ 1111L1⊕F(R1,K2)=0110 0011⊕1111 1100=1001 1111 (decimal 159)
Swap:
- New L2=R1=0000 1010L_2 = R_1 \textcolor{red}= 0000\ 1010L2=R1=0000 1010
- New R2=L1⊕F(R1,K2)=1001 1111R_2 = L_1 \oplus F(R_1, K_2) \textcolor{red}= 1001\ 1111R2=L1⊕F(R1,K2)=1001 1111

After Round 2: L2=0000 1010, R2=1001 1111L_2 \textcolor{red}= 0000\ 1010,\ R_2 \textcolor{red}= 1001\ 1111L2=0000 1010, R2=1001 1111

Output#

Ciphertext: Concatenate L2L_2L2 and R2R_2R2:
- L2∥R2=0000 1010 1001 1111L_2 \mathbin{\|} R_2 = 0000\ 1010\ 1001\ 1111L2∥R2=0000 1010 1001 1111 (16 bits, decimal 175)

Foundations of Security Week6 Seminar: Phishing

Mon, 20 Apr 2026 00:00:00 GMT

Phishing#

Objective#

Understanding and Defending Against Social Engineering Attacks.

What is Phishing?#

Phishing is a cyberattack that uses deceptive emails, messages, or websites to trick victims into revealing sensitive information such as
passwords, credit card numbers, or personal data.

Key Characteristics

✓

Exploits human psychology rather than technical vulnerabilities

✓

Impersonates trusted entities (banks, companies, colleagues)

✓

Creates false urgency to bypass critical thinking

⚠️ The Human Factor

95%

of successful cyberattacks involve
human error, not technical failures

The Psychology Behind Phishing#

How attackers exploit human cognitive biases and emotions

👤

Authority

People follow perceived leaders. Attackers
impersonate banks, government officials, or
executives to bypass skepticism.

Example: "This is your bank's security
department..."

⏰

Urgency

Time pressure forces quick decisions without
critical thinking. Creates fear of missing out or
negative consequences.

Example: "Your account will be suspended in
24 hours!"

🎁

Reciprocal

People feel obligated to return favors. Attackers
offer something valuable to create a sense of
indebtedness.

Example: "You've won a prize! Click here to
claim..."

✓

Consistency

People want to remain consistent with previous
actions. Small initial commitments lead to larger
ones.

Example: "Confirm your email to continue..."

👥

Social Proof

People follow what others do. Attackers claim
peers have already complied to normalize the
action.

Example: "90% of employees have already
verified..."

❤️

Liking

People say yes to those they like. Attackers
build rapport through friendly language and
compliments.

Example: "Hi friend! I thought you'd love this
offer..."

Red Flags: How to Identify Phishing Emails#

👤

Generic Greetings

Legitimate organizations use your name. Be suspicious of "Dear Customer" or "Hello
User" instead of personalized addresses.

🔒

Requests for Personal Info

Legitimate organizations NEVER ask for passwords, SSNs, or credit cards via email.

✉️

Suspicious Sender Address

Check for misspelled domains (microsoⱳt.com), public email services, or subtle
character substitutions.

🔗

Suspicious Links & Attachments

Hover over links to check URLs. Unexpected attachments may contain malware or
ransomware.

⚠️

Urgency & Threats

Phishing creates false time pressure: "Account will be suspended!" or "Immediate
action required!"

📝

Spelling & Grammar Errors

Professional organizations maintain high editorial standards. Multiple errors suggest
unprofessional or foreign attackers.

Remember: When in doubt, don't click! Contact the organization directly to verify.

Types of Phishing Attacks#

✉️

Email Phishing

Mass-distributed deceptive emails
impersonating legitimate organizations
to steal credentials.

Most Common

👤

Spear Phishing

Highly targeted attacks on specific
individuals using personalized
information from social media.

High Risk

👑

Whaling

Targets C-suite executives and
high-level management for maximum
financial gain.

Executive Target

📱

Smishing

SMS-based phishing attacks that deliver
malicious links via text messages.

Mobile Threat

📞

Vishing

Voice call phishing where attackers
impersonate banks, tech support, or
government agencies.

Voice Scam

📱

Quishing

QR code phishing where malicious
codes redirect to fake login pages
or malware.

Emerging Threat

💼

BEC

Business Email Compromise:
impersonating executives to trigger
fraudulent wire transfers.

Financial Focus

🎭

Deepfake Phishing

AI-generated audio/video impersonating
trusted figures to manipulate victims.

AI-Powered

Prevention & Defense Strategies#

👥

Individual Actions

✓

Don't Click Suspicious Links

Hover to verify URLs before clicking

✓

Verify Sender Identity

Contact organizations through official channels

✓

Use Strong, Unique Passwords

Implement password managers for security

✓

Enable Multi-Factor Authentication (MFA)

Adds critical second layer of protection

✓

Keep Software Updated

Patch vulnerabilities promptly

✓

Report Suspicious Emails

Inform organization’s management team

🏢

Organizational Measures

✓

Security Awareness Training

Regular education on evolving threats

✓

Email Authentication Protocols

Implement secure protocols

✓

Phishing Simulations

Test and improve employee readiness

✓

Incident Response Plans

Prepare for rapid threat containment

✓

Zero-Trust Architecture

Verify every access request

✓

AI-Powered Email Security

Advanced threat detection systems

Spot the Phish!#

Analyze these scenarios and identify why each scenario is phishing or legitimate

Bank Security Alert

From: security@bankofchina-secure.com

Subject: URGENT: Your Account Will Be Suspended

Dear Valued Customer,

We detected unusual activity on your account. Your account will be suspended within
24 hours if you don't verify your information immediately.

Click here to verify: http://bankofchina-secure-verify.com

Bank of China Security Team

Question: Is this a phishing attempt? What red flags do you see?

LinkedIn Connection

From: invitations@linkedin.com

Subject: Sarah Johnson wants to connect on LinkedIn

Hi Alex,

I'd like to add you to my professional network on LinkedIn.

- Sarah Johnson

Marketing Director at TechCorp

View invitation | Ignore

Question: Could this be phishing? What would you check?

Shipping Notification

From: noreply@amazon-delivery.net

Subject: Package Delivery Failed - Action Required

Hello,

We attempted to deliver your package but no one was available. Please reschedule
delivery within 48 hours or your package will be returned.

Reschedule Now

Amazon Logistics Team

Question: What indicators suggest this might be phishing?

IT Support Request

From: itsupport@university.edu

Subject: Password Expiration Notice

Dear Student,

Your university password will expire in 7 days. Please log in to the university portal to
update your password.

If you have any issues, contact the IT Help Desk at (555) 123-4567 or visit the Tech
Center in Building C.

University IT Services

Question: Is this legitimate? What features confirm or deny?

What Would You Do?#

Scenario-based decision making for real-world situations

The Failed Delivery

You receive a text message: "UPS: Your package delivery failed. Click here to
reschedule: bit.ly/2xKp9mL"

A. Click the link to reschedule delivery

B. Check UPS website directly by typing the URL

C. Reply to the text asking for more information

D. Call the number in the text message

The CEO Request

Your "CEO" emails you: "I'm in a meeting and need you to process an urgent wire
transfer immediately. Don't call me - just execute. Details attached."

A. Process the transfer immediately as requested

B. Open the attachment to review transfer details

C. Verify through a separate channel (call/text)

D. Forward to finance team for processing

The Tech Support Popup

A popup appears: "⚠️ CRITICAL ALERT: Your computer is infected with 12 viruses!
Call Microsoft Support immediately: 1-800-555-0199"

A. Call the number immediately for help

B. Close the popup and run antivirus scan

C. Download the suggested removal tool

D. Restart computer and check if it persists

The Accidental Click

You accidentally clicked a suspicious link in an email. The page loaded but you didn't
enter any information. What should you do?

A. Close the browser and forget about it

B. Report to IT security team immediately

C. Clear browser history and cookies

D. Run a full system antivirus scan

Key Takeaways#

Stay vigilant. Stay secure.

🎭

Phishing Exploits Psychology

Attackers target human emotions and cognitive biases, not just technology.
Understanding these tactics is your first defense.

🔍

Verify Everything

Always verify sender identity through official channels. Don't trust email addresses or
phone numbers provided in suspicious messages.

⏰

Urgency is a Red Flag

Legitimate organizations don't create false time pressure. Take time to verify before
acting on urgent requests.

🔒

Never Share Credentials

No legitimate organization will ask for passwords, SSNs, or credit card numbers via
email, text, or phone.

🚩

Report Suspicious Activity

When in doubt, report phishing attempts to your IT security team. Early reporting
prevents wider attacks.

🎓

Continuous Learning

Phishing tactics evolve constantly. Stay informed through security awareness training
and simulations.

"Think Before You Click"

You are the first line of defense against phishing attacks

Web Application Development - SQL

Mon, 20 Apr 2026 00:00:00 GMT

Databases and SQL#

Databases and web applications#

Technically, a web application can use any method of storing persistent data that you would normally use (saving to files, etc)
However, standard database servers offer a wide range of useful functionality and are also designed for efficiency, reliability and (in particular) scalability. They are also well supported by web and database hosting services.
Using a full database server on a desktop or client app is not usually a good option because the end user probably would not want to install one just to run your app. But when writing a web app that runs on its own server or server farm, this is no longer an issue.

Relational Database#

CarReg	Make	Model	Colour	Year
AB02ERT	Peugeot	206	Silver	2002
AG51DRT	Ford	Focus	Green	2001

A collection of tables similar to the one above

CarReg	Make	Model	Colour	Year
AB02ERT	Peugeot	206	Silver	2002
AG51DRT	Ford	Focus	Green	2001

Records or Rows

CarReg	Make	Model	Colour	Year
AB02ERT	Peugeot	206	Silver	2002
AG51DRT	Ford	Focus	Green	2001

Fields or Columns

The Primary Key is a value that is different for every value in the database. In this case, the Car Registration is suitable because no two cars can have the same registration. If the real entities do not have any applicable value to be a primary key, we can make one up. In a large database it might be better to use a numeric type is a primary key, because they are more efficiently stored.

Other terminology#

Report – a human-readable document generated from data in a database.
SQL – the standard computer language used to communicate with the DBMS.
Index – an extra set of data stored in the database to speed up searches on a field.
Entity – a real life object about which data is stored.
Query – a question asked to a database.

An Example Data Dictionary#

Attribute	Data Type	Field Size	Required?	Format
Surname	Text	25	Yes
First Name	Text	15	No
Title	Text	6	Yes	Mr, Ms, Mrs, Miss, Dr, Rev
Street	Text	20	Yes
Town	Text	20	Yes
Post Code	Text	8	No	LLNN NNLL
Tel. No.	Text	15	No	(STD Code) - number

Relationship#

A relationship is a link or association between entities
Represented by matching values in multiple tables

One-to-one:
- One Husband has One Wife
- One Wife has One Husband
One-to-many
- One Mother has Many Children
- One Child has One Mother
Many-to-many
- One Student studies Many Courses
- One Course is studied by Many Students

Entity-Relationship Diagrams#

Specify both degree and name of relationship

One-to-one

One-to-many

Many-to-many

The name of a relationship helps to establish its degree

Many-to-many relationship

Representing a One-to-one relationship#

Store the primary key for each table in the other
When stored in this way, value is called a foreign key

PersonID	Name	DogID
293	Rob James	012
294	Andrea Wing	017
295	Sid Sackboy	048

DogID	Name
012	Rover
017	Fido
048	Amber

Querying a one-to-one relationship#

What is the name of Rob James’ dog?
- Search Person table for Rob James
- Store DogID value from that person record
- Look up this DogID in dog table
- Collect Name value from that dog record
Who owns Rover?
- Look up Rover in dog table
- Store DogID of Rover
- Search person table for this DogID
- Collect Name value from the person record

Other representations#

While it would be OK to add a PersonID field to the Dog table,to easily find who owns a dog, indexing the Person table byDogID has the same effect and removes risk of desyncing
We could also store the name of the person’s dog in the same table as the name of the person: whether or not this is a good idea depends on how many of the people in the database have dogs and what purposes the table is used for

Representing a One-to many relationship#

Similar to a one-to-one relationship, but foreign ID values

PatientID	Name	WardID
293	Peter Robb	012
294	Jenny Morel	014
295	Eric Blair	012

WardID	Name
012	General
013	Triage
014	Presurgery

Querying a one-to-many relationship#

Which ward is Jenny Morel in?
- Search Patient table for Jenny Morel
- Store WardID value from that patient record
- Look up this WardID in ward table
- Collect Name value from that ward record
Who is in the general ward?
- Look up General in ward table
- Store WardID of General ward
- Search patient table for this WardID
- Collect multiple name values from the patient records

Other representations#

We now cannot add a PatientID field to the Ward table since a ward may hold several patients
We should not store the name of a patient’s ward in their Patient record since an identical ward name (and any other data about the ward) would be stored once for each patient, wasting space in the database and risking desync

Many to Many relationships#

Representing a many-to-many relationship without wasting database space is difficult
A new table (link table or link entity) must be created to remove the many-to-many relationship
Each record in the link table represents a connection between two entries in the connected tables

Removing many-to-many#

One patient has many illnesses
One illness can affect many patients

One patient has many presentations
Each presentation is for one patient
One illness has many presentations
Each presentation is for one illness

Representing a normalized many-to-many relationship#

PatientID	Name
293	Peter Robb
294	Jenny Morel
295	Eric Blair

IllnessID	Name
201	Influenza
202	Tuberculosis
203	Hepatitis C

PresentationID	PatientID	IllnessID
1	293	201
2	294	202
3	294	201
4	295	203

Querying a normalized many-to-many relationship#

What illnesses is Jenny Morel presenting?
- Search patient table for Jenny Morel
- Store her PatientID
- Search Presentation table for this PatientID
- Store a list of all matching IllnessIDs
- Look each of these up in Illness table
- Collect the name of each

Structured Query Language (SQL)#

A standard language used to extract data from a database, used by almost all modern DBMSs
Key commands for queries:
- SELECT
- FROM
- WHERE
- ORDER BY

To create a table

1
CREATE TABLE <NAME> <DATA DICTIONARY>

To insert data

1
INSERT INTO <TABLENAME> <FIELDS>
2
VALUES <CORRESPONDING VALUES>

Create Table#

1
create table customer(
2
    customerID int not null primary key,
3
    firstName varchar(20),
4
    lastName varchar(20),
5
    dateOfBirth date);

1
create table car(
2
    carReg char(8) not null primary key,
3
    make varchar(20),
4
    model varchar(20),
5
    yearOfReg smallint unsigned);

MySQL types#

Name	Type
TINYINT, SMALLINT, MEDIUMINT, INT, BIGINT	8, 16, 24, 32, and 64 bit int (like Java BYTE, SHORT, …, INT, LONG)
DECIMAL(x,y)	Fixed point value with x significant digits and y after the decimal point
FLOAT, DOUBLE	32 and 64 bit floating point (like Java FLOAT and DOUBLE)
DATE, DATETIME, TIME	Standard values for date and time
CHAR(x)	String up to x characters, allocating x characters of space. Use for known lengths or changing strings
VARCHAR(x)	String up to x characters, dynamically allocated. Use for variable lengths, ideally that do not change or do not change often

MySQL type modifiers#

Name	Type
UNSIGNED	Makes an int value unsigned in the same way as Java
AUTO_INCREMENT	Default to one larger than the highest current value in the table
NOT NULL	Column must be filled in. Needed for indexes to be generated
UNIQUE	Column value must not be duplicated in table
PRIMARY KEY	Column value is primary key; implies UNIQUE

INSERT INTO#

1
INSERT INTO car
2
  (carReg, make, model, yearOfReg)
3
Values
4
  ("MF59 YXS","Hyundai","i20",2009);

Listing the fields in the INSERT INTO statement is not mandatory, but avoids errors if other columns are later added to the table.

SELECT…FROM…WHERE#

1
SELECT CarReg, Make
2
FROM Car
3
WHERE YearOfReg=2009;

Creating a reference#

1
Create table person (
2
    personID int unsigned not null primary key,
3
    name varchar(40),
4
    dogID int unsigned not null);
5
Create table dog (
6
    dogID int unsigned not null primary key,
7
    name varchar(40));

Using a reference#

1
Select person.name, dog.name
2
    From person inner join dog
3
        On person.dogID = dog.dogID;

Using a many-to-many reference#

1
Select patient.name, illness.name
2
From presentation
3
inner join patient on presentation.patientID = patient.patientID
4
inner join illness on presentation.illnessID = illness.illnessID;

Using MySQL from Python#

import the MySQL connector

1
import sql.connector

Connect to the database:

1
cnx = mysql.connector.connect(user='dbuser', password='rubbish', host='127.0.0.1', database='dogs')

Note that the database must already exist (a database is not the same as a table)
Because the password must appear in the Python script, it is important that scripts are kept secure

Sending queries#

Create a cursor (an object used for a series of database interactions)

1
cursor = cnx.cursor()

Send a query via the cursor

1
cursor.execute(“select dogid, name from dog”)

The cursor then becomes a Python iterator which you can loop through to read the results

1
for (dogid, name) in cursor:
2
    print (dogid, name)

Sending definitions/commands#

Send the command via the cursor

1
cursor.execute(“INSERT INTO CAR (carReg, make, model, YearOfReg) VALUES (‘AB2 3CD’, ’Vauxhall’, ’Labrador’,2005)”)

Commit changes to the database

1
cnx.commit()

Close the database before your program ends

1
cnx.close()

Security#

Be very careful about using strings input from the user in SQL commands
This is a very easy route for hackers to damage the database.
SQL injection is among the most common attacks on sites!
For example:

1
for row in c.execute("SELECT ID FROM person WHERE name = " + request.form["name"] + ";"):
2
  print row

What happens if a hacker fakes the form, and sends the string “x”;

select password as ID from users as the name form field?

Security: query templating#

To avoid this, use query templates instead of raw string modification to build query strings

1
query = "Select id from person where name=%s;"
2
c.execute(query,("Robert",))

%s in the query string marks where a value is to be inserted. More than one can be used.
The execute statement fills in the values for insertion. They will only be allowed to be inserted as data values, not commands
Note:
- %s is the only marker supported. It is used even if the value is a number (unlike C or pyformat)
- If there is only one value to be filled in, the extra comma is mandatory to force Python to see the value as a tuple with one element

Exercises AVL Tree

Thu, 16 Apr 2026 00:00:00 GMT

Exercises AVL Tree
AVL 树练习#

An AVL tree is a type of self-balancing binary search tree. The defining characteristic of an AVL tree is its strict balance condition. For every node in the tree, the heights of its left and right subtrees can differ by at most one. This height difference is known as the balance factor.
AVL 树是一种自平衡二叉搜索树。其核心特征是严格平衡条件：对于树中的每个节点，左右子树高度差最多为 1。这个高度差称为平衡因子（balance factor）。

Balance Factor = Height(Left Subtree) - Height(Right Subtree)
平衡因子 = 左子树高度 - 右子树高度

For a tree to be a valid AVL tree, the balance factor of every node must be -1, 0, or 1.
要成为合法 AVL 树，每个节点的平衡因子都必须是 -1、0 或 1。

Balance Factor = 0: The left and right subtrees have the same height.
平衡因子 = 0：左右子树等高。
Balance Factor = 1: The left subtree is one level higher than the right.
平衡因子 = 1：左子树比右子树高一层。
Balance Factor = -1: The right subtree is one level higher than the left.
平衡因子 = -1：右子树比左子树高一层。

If an insertion or deletion operation causes any node’s balance factor to become 2 or -2, the tree is considered unbalanced and must be restructured through a process called rotation to restore the AVL property.
若插入或删除导致某节点平衡因子变为 2 或 -2，则该树视为失衡，必须通过“旋转（rotation）”重构以恢复 AVL 性质。

Download the code provided on the website, organise your folders, and get a project set up as usual. You should now see the following files in the project:
下载网站提供的代码，整理好文件夹，并按常规方式完成项目搭建。此时项目中应包含以下文件：

AVLTree.java – a class representing AVL trees of integers
AVLTree.java - 表示整数 AVL 树的类
Main.java – a class of the main program
Main.java - 主程序类

Exercise 1 – Inserting
练习 1：插入#

Following the logic of building a BST, implement the
按照构建二叉搜索树的逻辑，实现：

insert(Node n, int val)

function, which can build the tree as a regular binary search tree.
该函数用于按普通二叉搜索树方式构建树。

Reference Answer

1
private Node insert(Node n, int val) {
2
    // Standard BST insertion (no balancing here) ---
3
    // If we've reached a null spot, create and return a new node.
4
    if (n == null) {
5
        return new Node(val);
6
    }
7
    // Otherwise, recurse down the tree to find the insertion spot.
8
    if (val < n.data) {
9
        n.left = insert(n.left, val);
10
    } else if (val > n.data) {
11
        n.right = insert(n.right, val);
12
    } else {
13
    // Duplicate value: do nothing (ignore duplicates).
14
    // Could also handle counts or allow duplicates on one side if desired.
15
    }
16
    return n;
17
}

展开收起

Exercise 2 – Height
练习 2：高度#

Implement the
实现：

height(Node n)

function, that can calculate the height of the tree rooted at the node.
该函数用于计算以该节点为根的子树高度。

Reference Answer

1
private int height(Node n) {
2
    // Return the height of the subtree rooted at n.
3
    // Definition used here: empty tree has height 0, leaf has height 1.
4
    if (n == null) {
5
        return 0;
6
    }
7
    int lh = height(n.left);
8
    int rh = height(n.right);
9
    return Math.max(lh, rh) + 1;
10
}

Exercise 3 – Update the balance factor
练习 3：更新平衡因子#

Implement the
实现：

updateBF(Node n)

function that can update the node’s balance factor.
该函数用于更新节点的平衡因子。

Reference Answer

1
private void updateBF(Node n) {
2
    // Update balance factors for all nodes in the subtree rooted at n.
3
    if (n == null) {
4
        return;
5
    }
6

7
    // Update children first (post-order) so their heights are available.
8
    updateBF(n.left);
9
    updateBF(n.right);
10

11
    int lh = height(n.left);
12
    int rh = height(n.right);
13
    n.bf = lh - rh; // balance factor = height(left) - height(right)
14
}

Exercise 4 – Basic rotation
练习 4：基础旋转#

Inserting a new node into an AVL tree may change the balance of the tree. There are four imbalanced scenarios: LL, RR, LR, and RL cases. To balance the imbalanced tree, there are two basic ways to rebalance the tree that suit different scenarios, which are called left rotation and right rotation.
向 AVL 树插入新节点后，树的平衡可能被破坏。常见四种失衡场景：LL、RR、LR、RL。为恢复平衡，需要根据场景采用两种基本旋转方式：左旋与右旋。

Implement the
实现：

rightRotate (Node n)
leftRotate(Node n)

functions that can rotate the imbalanced tree rooted at the node.
这些函数用于对以该节点为根的失衡子树执行旋转。

Reference Answer

1
private Node rightRotate(Node original) { // Right Rotate for LL case
2
    // original is the root of the unbalanced subtree (y)
3
    // x = original.left will become the new root of this subtree
4
    if (original == null || original.left == null) {
5
        return original;
6
    }
7

8
    Node x = original.left;
9
    Node t2 = x.right;
10

11
    // Perform rotation
12
    x.right = original;
13
    original.left = t2;
14

15
    // Update balance factors for the affected subtree
16
    updateBF(x);
17

18
    return x;
19
}
20

21
private Node leftRotate(Node original) { // Left Rotate for RR case
22
    // original is the root of the unbalanced subtree (x)
23
    // y = original.right will become the new root of this subtree
24
    if (original == null || original.right == null) {
25
        return original;
26
    }
27

28
    Node y = original.right;
29
    Node t2 = y.left;
30

31
    // Perform rotation
32
    y.left = original;
33
    original.right = t2;
34

35
    // Update balance factors for the affected subtree
36
    updateBF(y);
37

38
    return y;
39
}

展开收起

Exercise 5 – Rebalance
练习 5：重平衡#

Implement the
实现：

rebalance (Node n)

function that can apply two basic rotation functions to rebuild the balance of the tree, depending on 4 different imbalanced scenarios.
该函数可根据 4 种失衡场景，组合使用两种基础旋转来恢复树平衡。

Reference Answer

1
private Node rebalance(Node n) {
2
    if (n == null) {
3
        return null;
4
    }
5

6
    int lh = height(n.left);
7
    int rh = height(n.right);
8
    int bf = lh - rh;
9

10
    // LL Case
11
    if (bf > 1) {
12
    // Determine whether it's LL or LR by comparing heights of left's children
13
        int llh = height(n.left.left);
14
        int lrh = height(n.left.right);
15
        if (llh >= lrh) {
16
            // LL
17
            n = rightRotate(n);
18
        } else {
19
            // LR: left then right
20
            n.left = leftRotate(n.left);
21
            n = rightRotate(n);
22
        }
23
    }
24
    // RR Case
25
    else if (bf < -1) {
26
    // Determine whether it's RR or RL by comparing heights of right's children
27
        int rrh = height(n.right.right);
28
        int rlh = height(n.right.left);
29
        if (rrh >= rlh) {
30
            // RR
31
            n = leftRotate(n);
32
        } else {
33
            // RL: right then left
34
            n.right = rightRotate(n.right);
35
            n = leftRotate(n);
36
        }
37
    }
38

39
    // Ensure balance factors updated for this subtree
40
    updateBF(n);
41
    return n;
42
}

展开收起

Exercise 6 – Rebalance
练习 6：插入后重平衡#

Modify the insert function to make the tree rebalance when inserting a new node into the tree.
修改 insert 函数，使得插入新节点后树能够自动重平衡。

Update the balance factor of the node when the subtree is changed after inserting a new node.
在插入导致子树变化后，更新该节点平衡因子。
Rebalance the subtree.
对子树执行重平衡。

Reference Answer

1
private Node insert(Node n, int val) {
2
    // Standard BST insertion (no balancing here) ---
3
    // If we've reached a null spot, create and return a new node.
4
    if (n == null) {
5
        return new Node(val);
6
    }
7

8
    // Otherwise, recurse down the tree to find the insertion spot.
9
    if (val < n.data) {
10
        n.left = insert(n.left, val);
11
    } else if (val > n.data) {
12
        n.right = insert(n.right, val);
13
    } else {
14
        // Duplicate value: do nothing (ignore duplicates).
15
        return n;
16
    }
17

18
    // Update this node's balance factor after insertion into a subtree
19
    n.bf = height(n.left) - height(n.right);
20

21
    // Rebalance this subtree if needed and return the (possibly new) root
22
    return rebalance(n);
23
}

展开收起

Exercise 7 – Execution
练习 7：运行与验证#

Completing the AVLTree class, we can then build an AVL tree in the main program.
完成 AVLTree 类后，就可以在主程序中构建 AVL 树。

Build an integer AVL tree using the data set {10, 20, 30, 40, 50, 25} in sequence.
按顺序使用数据集 {10, 20, 30, 40, 50, 25} 构建整数 AVL 树。
Using the preorder and inOrder functions provided to traverse the tree built, to observe the sequence of nodes and the corresponding balance factor of each node.
使用提供的 preorder 和 inOrder 函数遍历该树，观察节点序列及各节点平衡因子。
Build an integer AVL tree using the data set {10, 20, 30, 40, 50, 25, 35} in sequence.
按顺序使用数据集 {10, 20, 30, 40, 50, 25, 35} 再构建一棵整数 AVL 树。
Using the preorder and inOrder functions provided to traverse the tree built, to observe the sequence of nodes and the corresponding balance factor of each node.
同样使用 preorder 和 inOrder 遍历，观察节点序列及对应平衡因子。
To sketch the two trees out respectively, to compare and check whether the results are good or not.
分别画出两棵树，进行对比并检查结果是否合理。

Reference Answer (Full Version)#

AVLTree.java展开收起

1
public class AVLTree {
2
    private Node root;
3

4
    private static class Node {
5
        int data;
6
        int bf;
7
        Node left;
8
        Node right;
9

10
        Node(int d) {
11
            data = d;
12
            left = null;
13
            right = null;
14
            bf = 0;
15
        }
16
    }
17

18
    public AVLTree() {
19
        root = null;
20
    }
21

22
    public Node getRoot() {
23
        return root;
24
    }
25

26
    private int height(Node n) {
27
        // Return the height of the subtree rooted at n.
28
        // Definition used here: empty tree has height 0, leaf has height 1.
29
        if (n == null) {
30
            return 0;
31
        }
32
        int lh = height(n.left);
33
        int rh = height(n.right);
34
        return Math.max(lh, rh) + 1;
35
    }
36

37
    private void updateBF(Node n) {
38
        // Update balance factors for all nodes in the subtree rooted at n.
39
        if (n == null) {
40
            return;
41
        }
42

43
        // Update children first (post-order) so their heights are available.
44
        updateBF(n.left);
45
        updateBF(n.right);
46

47
        int lh = height(n.left);
48
        int rh = height(n.right);
49
        n.bf = lh - rh; // balance factor = height(left) - height(right)
50
    }
51

52
    // Rotation implements
53
    // Right Rotate for LL case
54
    private Node rightRotate(Node original) {
55
        // original is the root of the unbalanced subtree (y)
56
        // x = original.left will become the new root of this subtree
57
        if (original == null || original.left == null) {
58
            return original;
59
        }
60

61
        Node x = original.left;
62
        Node t2 = x.right;
63

64
        // Perform rotation
65
        x.right = original;
66
        original.left = t2;
67

68
        // Update balance factors for the affected subtree
69
        updateBF(x);
70

71
        return x;
72
    }
73

74
    // Left Rotate for RR case
75
    private Node leftRotate(Node original) {
76
        // original is the root of the unbalanced subtree (x)
77
        // y = original.right will become the new root of this subtree
78
        if (original == null || original.right == null) {
79
            return original;
80
        }
81

82
        Node y = original.right;
83
        Node t2 = y.left;
84

85
        // Perform rotation
86
        y.left = original;
87
        original.right = t2;
88

89
        // Update balance factors for the affected subtree
90
        updateBF(y);
91

92
        return y;
93
    }
94

95
    private Node rebalance(Node n) {
96
        if (n == null) {
97
            return null;
98
        }
99

100
        int lh = height(n.left);
101
        int rh = height(n.right);
102
        int bf = lh - rh;
103

104
        // LL Case
105
        if (bf > 1) {
106
            // Determine whether it's LL or LR by comparing heights of left's children
107
            int llh = height(n.left.left);
108
            int lrh = height(n.left.right);
109
            if (llh >= lrh) {
110
                // LL
111
                n = rightRotate(n);
112
            } else {
113
                // LR: left then right
114
                n.left = leftRotate(n.left);
115
                n = rightRotate(n);
116
            }
117
        }
118
        // RR Case
119
        else if (bf < -1) {
120
            // Determine whether it's RR or RL by comparing heights of right's children
121
            int rrh = height(n.right.right);
122
            int rlh = height(n.right.left);
123
            if (rrh >= rlh) {
124
                // RR
125
                n = leftRotate(n);
126
            } else {
127
                // RL: right then left
128
                n.right = rightRotate(n.right);
129
                n = leftRotate(n);
130
            }
131
        }
132

133
        // Ensure balance factors updated for this subtree
134
        updateBF(n);
135
        return n;
136
    }
137

138
    private Node insert(Node n, int val) {
139

140
        // Standard BST insertion (no balancing here) ---
141
        // If we've reached a null spot, create and return a new node.
142
        if (n == null) {
143
            return new Node(val);
144
        }
145

146
        // Otherwise, recurse down the tree to find the insertion spot.
147
        if (val < n.data) {
148
            n.left = insert(n.left, val);
149
        } else if (val > n.data) {
150
            n.right = insert(n.right, val);
151
        } else {
152
            // Duplicate value: do nothing (ignore duplicates).
153
            return n;
154
        }
155

156
        // Update this node's balance factor after insertion into a subtree
157
        n.bf = height(n.left) - height(n.right);
158

159
        // Rebalance this subtree if needed and return the (possibly new) root
160
        return rebalance(n);
161
    }
162

163
    public void insert(int val) {
164
        root = insert(root, val);
165
    }
166

167
    //pre-order traversal
168
    public void preOrder(Node n) {
169
        if (n != null) {
170
            System.out.println("Node " + n.data + "(bf is " + n.bf + ")");
171
            preOrder(n.left);
172
            preOrder(n.right);
173
        }
174
    }
175

176
    //in-order traversal
177
    public void inOrder(Node n) {
178
        if (n != null) {
179
            inOrder(n.left);
180
            System.out.println("Node " + n.data + "(bf is " + n.bf + ")");
181
            inOrder(n.right);
182
        }
183
    }
184

185
    // Pretty-print the tree structure (rotated, root in the middle)
186
    public void printTree() {
187
        printTree(root, "", true);
188
    }
189

190
    private void printTree(Node node, String prefix, boolean isLeft) {
191
        if (node == null) return;
192

193
        if (node.right != null) {
194
            printTree(node.right, prefix + (isLeft ? "│   " : "    "), false);
195
        }
196

197
        System.out.println(prefix + (isLeft ? "└── " : "┌── ") + node.data + "(bf is " + node.bf + ")");
198

199
        if (node.left != null) {
200
            printTree(node.left, prefix + (isLeft ? "    " : "│   "), true);
201
        }
202
    }
203

204
    // Top-down layout printing (nodes roughly positioned according to inorder index)
205
    public void printTopDown() {
206
        if (root == null) {
207
            System.out.println("<empty>");
208
            return;
209
        }
210

211
        java.util.Map<Node, Integer> pos = new java.util.HashMap<>();
212
        java.util.Map<Node, Integer> depth = new java.util.HashMap<>();
213
        int[] counter = new int[]{0};
214
        int[] maxDepth = new int[]{0};
215

216
        // inorder traversal to assign horizontal positions
217
        assignPos(root, 0, pos, depth, counter, maxDepth);
218

219
        int maxPos = counter[0] - 1;
220

221
        // determine max width of any node's string to handle multi-digit numbers
222
        int maxNumWidth = 0;
223
        java.util.Map<Node, String> strMap = new java.util.HashMap<>();
224
        for (Node n : pos.keySet()) {
225
            String s = String.valueOf(n.data);
226
            strMap.put(n, s);
227
            if (s.length() > maxNumWidth) maxNumWidth = s.length();
228
        }
229

230
        int colWidth = Math.max(3, maxNumWidth + 2); // space per column
231
        int cols = Math.max(1, maxPos + 1) * colWidth + 1;
232

233
        int h = maxDepth[0] + 1;
234
        // precompute horizontal start positions for each node (centered within its column)
235
        java.util.Map<Node, Integer> startPos = new java.util.HashMap<>();
236
        for (java.util.Map.Entry<Node, Integer> e : pos.entrySet()) {
237
            int p = e.getValue();
238
            int base = p * colWidth;
239
            String s = strMap.get(e.getKey());
240
            int start = base + (colWidth - s.length()) / 2;
241
            startPos.put(e.getKey(), start);
242
        }
243

244
        for (int d = 0; d < h; d++) {
245
            char[] line = new char[cols];
246
            java.util.Arrays.fill(line, ' ');
247
            // place node values centered in their columns
248
            for (java.util.Map.Entry<Node, Integer> e : pos.entrySet()) {
249
                Node n = e.getKey();
250
                if (depth.get(n) == d) {
251
                    int p = startPos.get(n);
252
                    String s = strMap.get(n);
253
                    for (int i = 0; i < s.length() && p + i < cols; i++) line[p + i] = s.charAt(i);
254
                }
255
            }
256
            // draw connectors on the same row as parent node using ┌── and ──┐ style
257
            for (java.util.Map.Entry<Node, Integer> e : pos.entrySet()) {
258
                Node n = e.getKey();
259
                if (depth.get(n) == d) {
260
                    int pStart = startPos.get(n);
261
                    String s = strMap.get(n);
262
                    int pCenter = pStart + s.length() / 2;
263

264
                    // place connectors just outside the parent's printed string to avoid overwriting digits
265
                    int pLeft = pStart;
266
                    int pRight = pStart + s.length() - 1;
267

268
                    if (n.left != null) {
269
                        int cStart = startPos.get(n.left);
270
                        String cs = strMap.get(n.left);
271
                        int cCenter = cStart + cs.length() / 2;
272
                        int end = pStart - 1; // stop before parent
273
                        int from = Math.min(cCenter, end);
274
                        int to = Math.max(cCenter, end);
275
                        for (int k = from; k <= to && k >= 0 && k < cols; k++) {
276
                            if (line[k] == ' ') line[k] = '─';
277
                        }
278
                        if (cCenter >= 0 && cCenter < cols) line[cCenter] = '┌';
279
                    }
280

281
                    if (n.right != null) {
282
                        int cStart = startPos.get(n.right);
283
                        String cs = strMap.get(n.right);
284
                        int cCenter = cStart + cs.length() / 2;
285
                        int start = pStart + s.length(); // start after parent
286
                        int from = Math.min(start, cCenter);
287
                        int to = Math.max(start, cCenter);
288
                        for (int k = from; k <= to && k >= 0 && k < cols; k++) {
289
                            if (line[k] == ' ') line[k] = '─';
290
                        }
291
                        if (cCenter >= 0 && cCenter < cols) line[cCenter] = '┐';
292
                    }
293
                }
294
            }
295
            System.out.println(new String(line).replaceAll("\s+$", ""));
296
        }
297
    }
298

299
    private void assignPos(Node n, int d, java.util.Map<Node, Integer> pos, java.util.Map<Node, Integer> depth, int[] counter, int[] maxDepth) {
300
        if (n == null) return;
301
        assignPos(n.left, d + 1, pos, depth, counter, maxDepth);
302
        pos.put(n, counter[0]++);
303
        depth.put(n, d);
304
        if (d > maxDepth[0]) maxDepth[0] = d;
305
        assignPos(n.right, d + 1, pos, depth, counter, maxDepth);
306
    }
307
}

展开收起

Main.java展开收起

1
public class Main {
2
    public static void main(String[] args) {
3
        AVLTree test = new AVLTree();
4
        test.insert(10);
5
        test.insert(20);
6
        test.insert(30);
7
        test.insert(40);
8
        test.insert(50);
9
        test.insert(25);
10

11
        System.out.println("following is pre-order traversal");
12
        test.preOrder(test.getRoot());
13
        System.out.println("following is in-order traversal");
14
        test.inOrder(test.getRoot());
15

16
    }
17
}

展开收起

TestAVL.java展开收起

1
public class TestAVL {
2
    public static void main(String[] args) {
3
        // Dataset 1: {10, 20, 30, 40, 50, 25}
4
        AVLTree t1 = new AVLTree();
5
        int[] vals1 = {10, 20, 30, 40, 50, 25};
6
        for (int v : vals1) t1.insert(v);
7
        System.out.println("Dataset 1: {10,20,30,40,50,25}");
8
        System.out.println("In-order:");
9
        t1.inOrder(t1.getRoot());
10
        System.out.println("Pre-order:");
11
        t1.preOrder(t1.getRoot());
12
        System.out.println("Tree structure:");
13
        t1.printTree();
14
        System.out.println("Top-down layout:");
15
        t1.printTopDown();
16

17
        System.out.println();
18
        // Dataset 2: {10, 20, 30, 40, 50, 25, 35}
19
        AVLTree t2 = new AVLTree();
20
        int[] vals2 = {10, 20, 30, 40, 50, 25, 35};
21
        for (int v : vals2) t2.insert(v);
22
        System.out.println("Dataset 2: {10,20,30,40,50,25,35}");
23
        System.out.println("In-order:");
24
        t2.inOrder(t2.getRoot());
25
        System.out.println("Pre-order:");
26
        t2.preOrder(t2.getRoot());
27
        System.out.println("Tree structure:");
28
        t2.printTree();
29
        System.out.println("Top-down layout:");
30
        t2.printTopDown();
31
    }
32
}

展开收起

Web Application Development Practical6: Further Flask

Wed, 15 Apr 2026 00:00:00 GMT

Tip

关于开发环境配置的方法，请参阅第5周研讨会笔记

Practical Session 6: Templates and further Flask#

Download the example “todo list” web application from student website and run it on the Flask development server.
Use the app to see what it does, and read through the .py ﬁles and the template contents to learn how it works.
Modify the HTML template ﬁles to change the name of the application from “My very unreliable to-do list” to something else.
Modify the HTML and CSS ﬁles to place the “add a new task” control and button into a box with a light green background.
Modify the Python script and the HTML template so that when a task is added, a message appears between the header and the list of tasks giving the name of the task that was added (eg, “Buy the Milk was added.”)
- Tip: create a new template parameter for the added task name. Modify the template with an if condition to display this parameter if it is present. Then, pass the added task name as a parameter to render_template when called from the add route.
Modify the Python script and the HTML template to do the same for deleted/completed tasks.
Add JavaScript to the HTML page so that when the checkbox to mark a task complete is ticked, the text of the task appears crossed out (with CSS style property text-decoration: line-through )
Create a list of completed tasks, which should start empty and should be displayed below the “Add task” box on the page. When a task is marked completed and the update button is pressed, the completed tasks should be moved to the top of the completed tasks list instead of being deleted.
Add a button allowing the user to clear the completed task list.
Modify the code so that when a task is moved to the completed tasks list, the date and time is also appended to it. (You can get the date and time in Python using date.today(). In a real web app you would need to also consider the time zone that the user is in, and that they may be in a different time zone to the server, but you do not need to worry about that here.)
Modify the code so that if the user clicks to update deleted/completed tasks with more than one task selected, they are first asked if they are sure they want to complete all of those tasks. This request should come from the server, not from a JavaScript script. (You will need a new template.)

Reference Answer#

app.py展开收起

1
from flask import Flask, session, request, render_template, redirect, url_for
2
from datetime import datetime
3

4
app = Flask(__name__)
5
app.secret_key = b'notAGoodSecretKey'
6
if __name__ == '__main__':
7
    app.config["ENV"] = "development"
8
    app.run(debug=True, host='0.0.0.0', port=4999)
9

10
# Root of the app. We should do at least something here.
11
@app.route('/')
12
def view():
13
    # If the user already has a to-do list, draw it.
14
    if "todoes" in session:
15
        # Ensure completed list exists in session (starts empty)
16
        completed = session.get("completed", [])
17
        return render_template("todos.html", todos=session["todoes"], completedTasks=completed)
18
    else:
19
        # Else, display the new user blank page.
20
        completed = session.get("completed", [])
21
        return render_template("new.html", completedTasks=completed)
22

23

24
# Add task
25
# Remember, imput from the web is RADIOACTIVE. Validate it like crazy. Then
26
# validate it some more.
27
@app.route('/add', methods=["POST"])
28
def add():
29
    # Just in case a mangled form submission was made
30
    addedTask = None
31
    if "newTask" in request.form:
32
        addedTask = request.form["newTask"].strip()
33
        # If the user already has todoes, add it..
34
        if "todoes" in session:
35
            # We have to do this this way because Flask doesn't properly
36
            # detect in place updates to members of the session dict
37
            todoes = session["todoes"]
38
            todoes.append(request.form["newTask"])
39
            session["todoes"] = todoes
40
        else:
41
            # Make the added task their first todo
42
            session["todoes"] = [request.form["newTask"]]
43

44
    # If the form was mangled and the user had no todoes before,
45
    # todoes might still be missing
46
    # If the form was mangled and the user had no todoes before,
47
    # todoes might still be missing
48
    completed = session.get("completed", [])
49
    if "todoes" not in session:
50
        return render_template("new.html", completedTasks=completed)
51
    else:
52
        return render_template("todos.html", todos=session["todoes"], addedTask=addedTask, completedTasks=completed)
53

54
# Route for completing a task
55
@app.route('/complete', methods=["POST"])
56
def complete():
57
    # If somehow this got accessed when todoes is blank, bail out.
58
    if "todoes" not in session:
59
        return render_template("new.html")
60

61
    # Collect the task numbers to delete by looping through form keys.
62
    delTaskNums = []
63
    completedTasks = []
64
    for key in request.form:
65
       if key.startswith("complete_"):
66
           # C O M P L E T E _ is 9 characters, so the rest of the key after
67
           # that should be the task index
68
           taskNumString = key[9:]
69
           # As usual, since web input is radioactive we have to allow for
70
           # it not being a number or being an invalid number before we
71
           # try to use it
72
           try:
73
               realTaskNum = int(taskNumString)
74
               if realTaskNum >= 0:
75
                   if realTaskNum < len(session["todoes"]):
76
                       delTaskNums.append(realTaskNum)
77
           except ValueError:
78
               pass
79
    # If more than one task is selected and the user has not confirmed yet,
80
    # render a server-side confirmation page listing the tasks and asking
81
    # whether to proceed. The confirmation form will POST back to this
82
    # same route with the same complete_... fields plus a 'confirm' flag.
83
    if len(delTaskNums) > 1 and 'confirm' not in request.form:
84
        # Store the pending selection server-side and redirect to a GET
85
        # confirmation page. This avoids accidental completion on cancel
86
        # and prevents relying on hidden fields in the browser.
87
        session['pending_complete'] = delTaskNums
88
        return redirect(url_for('confirm_complete_view'))
89

90
    # If the user has confirmed via the confirmation page, we may have a
91
    # pending list stored in the session. Use that instead of relying on
92
    # request.form values (which may be absent on the confirm POST).
93
    if 'confirm' in request.form and 'pending_complete' in session:
94
        delTaskNums = session.pop('pending_complete')
95
    # Delete the todoes in reverse order so that the indices of later entries
96
    # aren't changed by the deletion of earlier entries
97
    delTaskNums.sort()
98
    todoes = session["todoes"]
99
    # Collect the completed tasks before deleting them so that we can move them
100
    # into the completed list instead of deleting them
101
    for taskIndex in delTaskNums:
102
        try:
103
            # Append the task text together with the current date/time
104
            task_text = todoes[taskIndex]
105
            timestamp = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
106
            completedTasks.append(f"{task_text} (completed at {timestamp})")
107
        except IndexError:
108
            pass
109

110
    # Remove tasks from todoes by deleting in reverse order
111
    for delTask in sorted(delTaskNums, reverse=True):
112
        try:
113
            del todoes[delTask]
114
        except IndexError:
115
            pass
116

117
    session["todoes"] = todoes
118

119
    # Prepend the newly completed tasks to the top of the completed list
120
    existing_completed = session.get("completed", [])
121
    # Place the newly completed tasks (in the same relative order) at the front
122
    session["completed"] = completedTasks + existing_completed
123

124
    return render_template("todos.html", todos=session["todoes"], completedTasks=session["completed"], completedTasksRecent=completedTasks)
125

126

127
# Route for clearing the completed tasks list
128
@app.route('/clear_completed', methods=["POST"])
129
def clear_completed():
130
    # Reset the completed tasks list in session to an empty list
131
    session['completed'] = []
132
    # Use PRG pattern: redirect back to the main view so the browser shows the updated state
133
    return redirect(url_for('view'))
134

135

136
# GET confirmation page for completing multiple tasks
137
@app.route('/confirm_complete', methods=['GET'])
138
def confirm_complete_view():
139
    pending = session.get('pending_complete')
140
    if not pending:
141
        # Nothing to confirm; go back to main view
142
        return redirect(url_for('view'))
143
    todoes = session.get('todoes', [])
144
    tasks_to_confirm = []
145
    for idx in pending:
146
        try:
147
            tasks_to_confirm.append((idx, todoes[idx]))
148
        except IndexError:
149
            pass
150
    return render_template('confirm_complete.html', tasks=tasks_to_confirm)
151

152

153
# Cancel the confirmation (clear pending selection and go back)
154
@app.route('/cancel_confirm', methods=['POST'])
155
def cancel_confirm():
156
    session.pop('pending_complete', None)
157
    return redirect(url_for('view'))

展开收起

templates/new.html展开收起

1
<!doctype html>
2
<html>
3
    <head>
4
        <title>Welcome!</title>
5
        <link rel="stylesheet" type="text/css" href="static/style.css">
6
    </head>
7

8
    <body>
9
        <h1>My to-do list-Empty</h1>
10
    </body>
11

12
    <p>This is a bad to-do list app because it stores the list in a cookie, which gets destroyed easily. Still, here we go.</p>
13

14
    <div class="addBox">
15
        <form action="/add" method="POST">
16
            Add your first task: <input name="newTask" type="text" autofocus></input> <button type="submit">Add!</button>
17
        </form>
18
    </div>
19

20
    <div class="completedBox">
21
        <h2>Completed tasks</h2>
22
        {% if completedTasks %}
23
            <ul>
24
            {% for task in completedTasks %}
25
                <li>{{ task }}</li>
26
            {% endfor %}
27
            </ul>
28
            <form action="/clear_completed" method="POST" style="margin-top:8px;">
29
                <button type="submit">Clear completed</button>
30
            </form>
31
        {% else %}
32
            <p>No completed tasks yet.</p>
33
        {% endif %}
34
    </div>
35
</html>

展开收起

templates/todos.html展开收起

1
<!doctype html>
2
<html>
3
    <head>
4
        <title>Welcome!</title>
5
        <link rel="stylesheet" type="text/css" href="static/style.css">
6
    </head>
7

8
    <body>
9
        <h1>My to-do list</h1>
10
    </body>
11

12
    {% if addedTask %}
13
        <p>{{ addedTask }} was added.</p>
14
    {% endif %}
15
    {# Completed tasks are now shown below the Add box instead of here #}
16
    <form action="/complete" method="POST">
17
        <table>
18
        {% for todo in todos %}
19
            <tr>
20
                <td id="task_{{ loop.index0 }}">{{ todo }}</td>
21
                <td class="checkbox">
22
                    <input name="complete_{{loop.index0}}" type="checkbox" onchange="toggleTask({{ loop.index0 }})"></input>
23
                </td>
24
            </tr>
25
        {% endfor %}
26
        </table>
27
        <button type="submit">Mark as completed</button>
28
    </form>
29

30
    <div class="addBox">
31
        <form action="/add" method="POST">
32
            Add another task: <input name="newTask" type="text" autofocus></input>
33
            <button type="submit">Add!</button>
34
        </form>
35
    </div>
36

37
    <div class="completedBox">
38
        <h2>Completed tasks</h2>
39
        {% if completedTasks %}
40
            <ul>
41
            {% for task in completedTasks %}
42
                <li>{{ task }}</li>
43
            {% endfor %}
44
            </ul>
45
            <!-- Button to clear all completed tasks -->
46
            <form action="/clear_completed" method="POST" style="margin-top:8px;">
47
                <button type="submit">Clear completed</button>
48
            </form>
49
        {% else %}
50
            <p>No completed tasks yet.</p>
51
        {% endif %}
52
    </div>
53

54
    <script>
55
        function toggleTask(taskId) {
56
            let taskElement = document.getElementById("task_" + taskId);
57
            taskElement.classList.toggle('crossed-out');
58
        }
59
        // Try "loop.index" and "loop.index0" here, observe the differences
60
        {% for todo in todos %}
61
            console.log("Task {{ loop.index0 }}: {{ todo }}");
62
        {% endfor %}
63
    </script>
64
</html>

展开收起

templates/confirm_complete.html展开收起

1
<!doctype html>
2
<html>
3
    <head>
4
        <title>Confirm completing tasks</title>
5
        <link rel="stylesheet" type="text/css" href="static/style.css">
6
    </head>
7
    <body>
8
        <h1>Confirm completing tasks</h1>
9
        <p>You have selected multiple tasks to complete. Are you sure you want to mark the following tasks as completed?</p>
10
        <ul>
11
        {% for idx, text in tasks %}
12
            <li>{{ text }}</li>
13
        {% endfor %}
14
        </ul>
15

16
        <form action="/complete" method="POST" style="display:inline-block; margin-right:8px;">
17
            {# Only send a confirm flag; server will use the pending list stored in session #}
18
            <input type="hidden" name="confirm" value="1"></input>
19
            <button type="submit">Confirm</button>
20
        </form>
21
        <form action="/cancel_confirm" method="POST" style="display:inline-block;">
22
            <button type="submit">Cancel</button>
23
        </form>
24
    </body>
25
</html>

展开收起

static/style.css展开收起

1
h1 {
2
  font-family: sans-serif;
3
  text-align: center;
4
  border: 2px solid black;
5
}
6

7
table {
8
  font-family: sans-serif;
9
  border: 2px solid black;
10
  border-collapse: collapse;
11
  width: 70%;
12

13
}
14

15
table td {
16
  border: 2px solid black;
17
}
18

19
table td.checkbox {
20
  width:40px;
21
}
22

23

24
table tr:nth-child(odd) {
25
  background: LightSkyBlue;
26
}
27

28
table tr:nth-child(even) {
29
  background: white;
30
}
31

32
.addBox {
33
  border: 1px black solid;
34
  background: greenyellow;
35
  padding: 10px;
36
}
37

38
.crossed-out {
39
  text-decoration: line-through;
40
}

展开收起

Foundations of Security Week6 Lecture

Tue, 14 Apr 2026 00:00:00 GMT

Lecture Outline#

Introduction to classical cryptography
Caesar Cipher, Monoalphabetic Substitution Cipher
Polyalphabetic Cipher - Vigenère Cipher
Introduction to symmetric key encryption
Overview of cryptanalysis and cryptographic attacks

Learning Outcomes#

By the end of this lecture, students should be able to:

Know the various classical cryptographies
Explain Caesar Cipher, Monoalphabetic Substitution Cipher, Polyalphabetic Cipher
Perform Brute force Attacks on Caesar Cipher
Understand the Polyalphabetic Cipher - Vigenère Cipher
Understand Symmetric key encryption
Understand cryptanalysis and cryptographic attacks

Classical Cryptographies#

Caesar Cipher#

The Caesar Cipher is one of the simplest and oldest methods of encryption. It is a type of substitution cipher, where each letter in the plaintext is shifted a certain number of positions down or up the alphabet.

It works by shifting the letters of the alphabet by a fixed number, called the shift key. For example, a shift of 3 would replace ‘A’ with ‘D’, ‘B’ with ‘E’, and so on.

For example, a shift of 3 would replace ‘A’ with ‘D’, ‘B’ with ‘E’, and so on.

Then the algorithm can be expressed as follows. For each plaintext letter p\textcolor{blue}pp, substitute the ciphertext letter C\textcolor{blue}CC:

C=E(p,3)=(p+3) mod 26\mathbf{C = E(p, 3) = (p + 3) ~ mod ~ 26}C=E(p,3)=(p+3) mod 26

A shift may be of any amount, so that the general Caesar algorithm is

C=E(p,k)=(p+k) mod 26\mathbf{C = E(p, k) = (p + k) ~ mod ~ 26}C=E(p,k)=(p+k) mod 26

where k\textcolor{blue}kk takes on a value in the range 1 to 25. The decryption algorithm is simply

p=D(c,k)=(c−k) mod 26\mathbf{p = D(c, k) = (c − k) ~ mod ~ 26}p=D(c,k)=(c−k) mod 26

Example#

What is the shift value or key?

Answer: 13

All 25 Possible Caesar Cipher Shifts (1-13….)

Letter	S1	S2	S3	S4	S5	S6	S7	S8	S9	S10	S11	S12	S13
A	B	C	D	E	F	G	H	I	J	K	L	M	N
B	C	D	E	F	G	H	I	J	K	L	M	N	O
C	D	E	F	G	H	I	J	K	L	M	N	O	P
D	E	F	G	H	I	J	K	L	M	N	O	P	Q
E	F	G	H	I	J	K	L	M	N	O	P	Q	R
F	G	H	I	J	K	L	M	N	O	P	Q	R	S
G	H	I	J	K	L	M	N	O	P	Q	R	S	T
H	I	J	K	L	M	N	O	P	Q	R	S	T	U
I	J	K	L	M	N	O	P	Q	R	S	T	U	V
J	K	L	M	N	O	P	Q	R	S	T	U	V	W
K	L	M	N	O	P	Q	R	S	T	U	V	W	X
L	M	N	O	P	Q	R	S	T	U	V	W	X	Y
M	N	O	P	Q	R	S	T	U	V	W	X	Y	Z

Brute Force Attack on the Caesar Cipher#

Applicability:

Known Algorithms: Encryption and decryption processes are known.

Limited Keys: Only 25 possible keys to attempt.

Recognizable Language: The plaintext language is easily identifiable.

Decryption Example:

Encrypted Message: PHHW PH DIWHU WKH WRJD SDUWB

Decryption Attempts:

An attacker can try all 25 possible keys/shifts in seconds. With modern computers, this takes milliseconds.

Encrypted Message: PHHW PH DIWHU WKH WRJD SDUWB

Decryption Attempts:

KEY	PHHW	PH	DIWHU	WKH	WRJD	SDUWB
1	oggv	og	chvgt	vjg	vqic	rctva
2	nffu	nf	bgufs	uif	uphb	qbsuz
3	meet	me	after	the	toga	party
4	ldds	ld	zesdq	sgd	snfz	ozqsx
5	kccr	kc	ydrcp	rfc	rmey	nyprw
6	jbbq	jb	xcqbo	qeb	qldx	mxoqv
7	iaap	ia	wbpan	pda	pkcw	lwnpu
8	hzzo	hz	vaozm	ocz	ojbv	kvmot
9	gyyn	gy	uznyl	nby	niau	julns
10	fxxm	fx	tvmxk	max	mhzt	itkmr
11	ewwl	ew	sxlwj	lzw	lgys	hsjlq
12	dvvk	dv	rwkvi	kyv	kfxr	grikp
13	cuuj	cu	qvjuh	jxu	jewq	fqhjo

KEY	PHHW	PH	DIWHU	WKH	WRJD	SDUWB
14	btti	bt	puitg	iwt	idvp	epgin
15	assh	as	othsf	hvs	hcuo	dofhm
16	zrrg	zr	nsgre	gur	gbtn	cnegl
17	yqqf	yq	mrfqd	ftq	fasm	bmdfk
18	xppe	xp	lqepc	esp	ezrl	alcej
19	wood	wo	kpdob	dro	dyqk	zkbdi
20	vnnc	vn	jocna	cqn	cxpj	yjach
21	ummb	um	inbmz	bpm	bwoi	xizbg
22	tlla	tl	hmaly	aol	avnh	whyaf
23	skkz	sk	glzkx	znk	zumg	vgxze
24	rjjy	rj	fkyjw	ymj	ytlf	ufwyd
25	qiix	qi	ejxiv	xli	xske	tevxc

Monoalphabetic Substitution Cipher#

Is a type of substitution cipher in which each letter of the plaintext is replaced by a unique letter of the alphabet. This means that a single letter of the plaintext is always substituted by the same letter of ciphertext, and the same substitution is used throughout the message.

Key Characteristics

One-to-One Mapping: Each letter in the plaintext corresponds to exactly one letter in the ciphertext, and vice versa. For example, ‘A’ might be replaced with ‘D’, ‘B’ with ‘Q’, and so on.
Fixed Substitution: The substitution pattern remains the same throughout the entire message. If a letter ‘A’ is replaced with ‘D’ in one part of the message, it will be replaced with ‘D’ wherever ‘A’ appears in the plaintext.
Key: The cipher is defined by a key, which is a permutation of the alphabet. The key determines the substitution of each letter. For example, the key might look like this:

plain

cipher

Encryption Process:

Step 1: Take the plaintext message.
Step 2: For each letter in the plaintext, substitute it with the corresponding letter from the ciphertext alphabet according to the key.
Step 3: The result is the ciphertext, which can be transmitted securely.

Example:

Plaintext: “HELLO”
Key (example substitution): A -> Q, B -> W, C -> E, D -> R, E -> T, F -> Y, etc.
Ciphertext (using the example key): “ITSSG”
Decryption Process: To decrypt the message, the recipient needs the same key to reverse the substitution, mapping the ciphertext back to the original plaintext.

Caesar Cipher#

Security:

Weaknesses: Monoalphabetic substitution ciphers are vulnerable to frequency analysis. In any language, certain letters appear more frequently than others (e.g., ‘E’ is the most common letter in English). By analyzing the frequency of letters in the ciphertext, an attacker can often deduce the substitutions and break the cipher.

Strengthening: To enhance security, a polyalphabetic cipher, like the Vigenère cipher, can be used, where each letter is substituted based on a changing key, making frequency analysis more difficult.

Polyalphabetic Cipher - Vigenère Cipher#

Polyalphabetic Cipher#

Is a type of substitution cipher that uses multiple substitutions to encrypt a message, unlike the monoalphabetic cipher, which only uses one.

In this cipher, the same letter of the plaintext can be encrypted to different ciphertext letters, depending on its position in the text or a key.

Key Characteristics

Multiple Substitutions: Instead of using a single substitution for all letters, multiple substitutions are used for the same letter. This makes it harder for attackers to use frequency analysis to break the code.
Key: The key in a polyalphabetic cipher is typically a word or phrase that is repeated as necessary to cover the entire plaintext. The key determines the shift or substitution for each letter in the plaintext.
Shift Pattern: Each letter in the key corresponds to a specific shift in the alphabet. For example, if the key is “KEY”, each letter of the plaintext is shifted by the position of the corresponding letter in the key.

Vigenère Cipher#

Created by the French diplomat Blaise de Vigenère in the 16th century.

It uses a keyword or key to generate a series of Caesar ciphers based on the letters of the keyword.

Key Characteristics

Key: The key is a word or phrase that is repeated to match the length of the plaintext.
Shifting Mechanism: Each letter in the plaintext is shifted by the position of the corresponding letter in the key. The alphabet is shifted forward for each corresponding letter in the key, making the shifts depend on both the letter and its position.

Encryption Process:

Repeat the key to match the length of the plaintext.
Shift each plaintext letter forward by the number of positions corresponding to the letter in the key (using the standard alphabetical index, where A = 0, B = 1, C = 2, …, Z = 25).

A	B	C	D	E	F	G	H	I	J	K	L	M	N	O	P	Q	R	S	T	U	V	W	X	Y	Z

0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18	19	20	21	22	23	24	25

Example: Encrypt the message “HELLO” using the key “KEY”
- Step 1: Repeat the key to match the length of the plaintext: KEYKE
- Step 2: Encrypt each letter of the plaintext:

'H' (shifted by 'K' = 10th letter) -> 'R'	H(7) + K(10) = R(17) mod 26
'E' (shifted by 'E' = 4th letter) -> 'I'	E(4) + E(4) = I(8) mod 26
'L' (shifted by 'Y' = 24th letter) -> 'J'	L(11) + Y(24) = J(35) mod 26
'L' (shifted by 'K' = 10th letter) -> 'V'	L(11) + K(10) = V(21) mod 26
'O' (shifted by 'E' = 4th letter) -> 'S'	O(14) + E(4) = S(18) mod 26

Ciphertext: “RIJVS”

Decryption Process:

To decrypt, the receiver uses the same key to reverse the shifting process. Each letter in the ciphertext is shifted backward by the number of positions corresponding to the key letter.
Example:
- ‘R’ (shifted back by ‘K’ = 10th letter) -> ‘H’
- ‘I’ (shifted back by ‘E’ = 4th letter) -> ‘E’
- ‘J’ (shifted back by ‘Y’ = 24th letter) -> ‘L’
- ‘V’ (shifted back by ‘K’ = 10th letter) -> ‘L’
- ‘S’ (shifted back by ‘E’ = 4th letter) -> ‘O’

Plaintext: “HELLO”

Another Example:

Key: deceptivedeceptivedeceptive

Plaintext: wearediscoveredsaveyourself

ciphertext: zicvtwqngrzgvtwavzhcqyglmgj

key	3	4	2	4	15	19	8	21	4	3	4	2	4	15
plaintext	22	4	0	17	4	3	8	18	2	14	21	4	17	4
ciphertext	25	8	2	21	19	22	16	13	6	17	25	6	21	19

key	19	8	21	4	3	4	2	4	15	19	8	21	4
plaintext	3	18	0	21	4	24	14	20	17	18	4	11	5
ciphertext	22	0	21	25	7	2	16	24	6	11	12	6	9

A general equation of the encryption process is Ci=(pi+ki mod 26) mod 26\mathbf{C_i = (p_i + k_i ~ mod ~ 26) ~ mod ~ 26}Ci=(pi+ki mod 26) mod 26

Similarly, decryption is a generalization of the form pi=(Ci−ki mod 26) mod 26\mathbf{p_i = (C_i − k_i ~ mod ~ 26) ~ mod ~ 26}pi=(Ci−ki mod 26) mod 26

Symmetric Key Encryption#

Symmetric Key Encryption is a cryptographic method where the same key is used for both encryption and decryption.

In this system, both the sender and the receiver share a secret key, and they use it to transform plaintext (original message) into ciphertext (encrypted message) and vice versa.

Key Characteristics

Single Shared Key:

The key used for encryption and decryption is the same, which is why it is called “symmetric.” Both the sender and receiver must securely share and protect the key.

Encryption and Decryption Process:

Encryption: The plaintext is transformed into ciphertext using an encryption algorithm and the shared secret key.
Decryption: The ciphertext is transformed back into plaintext using the same algorithm and key.

Confidentiality:

The security of the system relies on keeping the key secret. If an attacker gains access to the key, they can easily decrypt the message.

Efficiency:

They are generally faster and more efficient than asymmetric key encryption algorithms, making them suitable for encrypting large amounts of data.

They use less computational power and resources compared to asymmetric encryption

Cryptanalysis Attacks#

Cryptanalysis is the study of methods for breaking or undermining the security of cryptographic systems. It involves trying to decipher ciphertext without access to the secret key, in order to retrieve the plaintext or gain other useful information.

graph TD A["Cryptanalysis attacks"] --> B["Ciphertext-only"] A --> C["Known-plaintext"] A --> D["Chosen-plaintext"] A --> E["Chosen-ciphertext"] %% 样式优化：匹配原图的边框与排版 A:::rootNode B:::childNode C:::childNode D:::childNode E:::childNode classDef rootNode fill:#fff,stroke:#000,stroke-width:1px,font-size:16px,padding:10px classDef childNode fill:#fff,stroke:#000,stroke-width:1px,font-size:14px,padding:8px

Reading Assignment#

Read on the below 4 cryptanalysis attacks

Tip

Extended reading: https://ctf-wiki.org/crypto/classical/monoalphabetic/

Data Structures and Algorithms Week6: AVL Tree

Mon, 13 Apr 2026 00:00:00 GMT

AVL Tree#

Content
内容#

Purpose of AVL Tree
AVL 树的目的
Node Rotation
节点旋转
Build an AVL Tree
构建 AVL 树

Searching on BST
在二叉搜索树上查找#

BST: Binary Search Tree 二叉搜索树

2 Binary Search Tree with the same Nodes, the steps for searching node 1 are quite different.
两棵包含相同节点的二叉搜索树，在查找节点 1 时所需步骤却非常不同。

Which is better?
哪棵更好？

How to evaluate the “better”?
如何衡量“更好”？

The height (depth) of a BST is a key factor in determining the number of search steps.
二叉搜索树的高度（深度）是决定查找步数的关键因素。

Less height, fewer steps, much better!
高度越低，步数越少，性能越好。

Make a BST shorter and Wider rather than letting it grow taller and skinny: Balancing.
与其让二叉搜索树又高又瘦，不如让它更矮更宽：这就是平衡化。

Balancing BST
平衡二叉搜索树#

Balanced Tree:
平衡树：
- Resembles a pyramid or a bush.
 形态类似金字塔或灌木状。
- The height is minimized.
 树高尽量小。
- Time complexity: O(log n).
 时间复杂度通常为 O(log n)。
- The Balance Factor of every node must be -1, 0, or +1.
 每个节点的平衡因子必须是 -1、0 或 +1。
 - balance factor = Height(left subtree) – Height(right subtree)
 平衡因子 = 左子树高度 - 右子树高度
 - Each node has one balance factor
 每个节点都有一个平衡因子
 - 0: The left and right subtrees have equal height.
 0：左右子树等高
 - +1: The left subtree is one level higher.
 +1：左子树高一层
 - -1: The right subtree is one level higher.
 -1：右子树高一层
 - > 1 or < -1: The node is unbalanced, and the tree must perform an adjustment.
 >1 或 <-1：节点失衡，树必须调整

What is an AVL Tree?
什么是 AVL 树？#

An AVL tree is a type of self-balancing binary search tree, named after its inventors, Adelson-Velsky and Landis, who introduced it in 1962.
AVL 树是一种自平衡二叉搜索树，名称来自其发明者 Adelson-Velsky 和 Landis（1962 年提出）。
The defining characteristic of an AVL tree is its strict balance condition. For every node in the tree, the Balance Factor of every node must be -1, 0, or +1.
AVL 树的核心特征是严格平衡条件：对树中每个节点，其平衡因子必须是 -1、0 或 +1。
If an insertion or deletion operation causes any node’s balance factor to become 2 or -2, the tree is considered unbalanced. It must be restructured through a process called rotation to restore the AVL property.
如果插入或删除导致某节点平衡因子变为 2 或 -2，则树被视为失衡，必须通过旋转进行重构以恢复 AVL 性质。

Four scenarios of imbalance
四种失衡场景#


- Left of Left is too high - LL case - .BF > 1 - .left.BF>=0 - 左子树的左侧过高 - LL 情况 - .BF > 1 - .left.BF>=0	- Right of Right is too high - RR case - .BF<-1 - .right.BF<=0 - 右子树的右侧过高 - RR 情况 - .BF<-1 - .right.BF<=0	- Left’s Right is too high - LR case - .BF>1 - .left.BF<0 - 左子树的右侧过高 - LR 情况 - .BF>1 - .left.BF<0	- Right’s Left is too high - RL case - .BF<-1 - .right.BF>0 - 右子树的左侧过高 - RL 情况 - .BF<-1 - .right.BF>0

Rotation of AVL Tree
AVL 树旋转#

Tip: using AI

Task 1 (compulsory)
任务 1（必做）
- State the steps one by one for rotating the nodes of each scenario
  逐步写出每种场景下节点旋转的步骤
Task 2 (compulsory)
任务 2（必做）
- Please implement the rotation function for each scenario.
  实现每种场景对应的旋转函数
Task 3 (compulsory)
任务 3（必做）
- Please implement the insertion operation of the AVL Tree using the rotation functions devised in task 2
  利用任务 2 的旋转函数实现 AVL 树插入
Task 4 (optional)
任务 4（可选）
- Please implement the deletion operation of the AVL Tree using the rotation functions devised in task 2 (optional)
  利用任务 2 的旋转函数实现 AVL 树删除（可选）

Build an AVL Tree
构建 AVL 树#

Rebalance the Tree when inserting a new node into the AVL Tree
向 AVL 树插入新节点时需要重平衡
- insert as a BST at the beginning
  先按 BST 规则完成插入
- rebalance the Tree before returning the new subtree
  返回新子树前完成重平衡
  - rotate the subtree depending on different scenarios
    根据不同失衡场景旋转子树

Complete the exercise!
完成练习！

In-class exercise document: practice-class.docx

Huffman coding
哈夫曼编码#

Huffman coding is a neat example of using binary trees. It’s also the foundation for text compression algorithms. We won’t describe the algorithm but will spend time focusing on how it works and how it makes clever use of trees.
哈夫曼编码是二叉树应用的经典示例，也是文本压缩算法的基础。这里我们不展开算法细节，而重点理解它如何工作，以及如何巧妙利用树结构。

First, a little background. To know how compression works, we need to know how much space a text file takes. Suppose we have a text file with just one word: tilt. How much space does that use? You can use the stat command (available on Unix). First, save the word in a file called test.txt. Then, using stat,
先补一点背景知识。要理解压缩，先要知道文本占用多少空间。假设文本文件只有一个单词：tilt。它占多大空间？可以使用 Unix 的 stat 命令。先把这个词保存到 test.txt，然后执行：

Terminal window

1
$ cat test.txt
2
tilt
3

4
$ stat -f%z test.txt
5
4

so that file takes up 4 bytes: 1 byte per character.
结果显示文件占 4 字节：每个字符 1 字节。

This makes sense. Assuming we are using ISO-8859-1 (see the following sidebar for what this means), each letter takes up exactly 1 byte. For example, the letter aaa is ISO-8859-1 code 97, which I can write in binary as 01100001. That is 8 bits. A bit is a digit that can be either 0 or 1. And there are eight of them. Eight bits is 1 byte. So the letter aaa is represented using 1 byte. ISO-8859-1 code goes from 00000000, which represents the null character, all the way to 11111111, which represents y¨\ddot { y }y¨ (Latin lowercase letter yyy with diaeresis). There are 256 possible combinations of 0s and 1s with 8 bits, so the ISO-8859-1 code allows for 256 possible letters.
这很合理。若使用 ISO-8859-1（含义见下方说明），每个字符正好占 1 字节。比如字母 aaa 的 ISO-8859-1 编码是 97，二进制写作 01100001，也就是 8 位。bit（二进制位）只能是 0 或 1，8 位就是 1 字节，所以字母 aaa 用 1 字节表示。ISO-8859-1 编码范围从 00000000（空字符）到 11111111（y¨\ddot { y }y¨，带分音符的小写 y）。8 位共有 256 种组合，因此 ISO-8859-1 可表示 256 个字符。

Character encoding
字符编码#

As this example will show you, there are many different ways to encode characters. That is, the letter a could be written in binary in many different ways.
正如这个例子所示，字符编码有很多种方式。也就是说，同一个字母 a 可以在不同编码中对应不同二进制表示。

It started with ASCII. In the 1960s, ASCII was created. ASCII is a 7-bit encoding. Unfortunately, ASCII did not include a lot of characters. ASCII does not include any characters with umlauts (u¨\ddot {u}u¨ or o¨\ddot { o }o¨ , for example) or common currencies like the British pound or Japanese yen.
最早是 ASCII。ASCII 在 1960 年代诞生，是 7 位编码。但 ASCII 覆盖字符较少，不包含许多字符，比如带分音符的字母（如 u¨\ddot {u}u¨ 或 o¨\ddot { o }o¨）以及常见货币符号（英镑、日元等）。

So ISO-8859-1 was created. ISO-8859-1 is an 8-bit encoding, so it doubles the number of characters that ASCII provided. We went from 128 characters to 256 characters. But this was still not enough, and countries began making their own encodings. For example, Japan has several encodings for Japanese since ISO-8859-1 and ASCII were focused on European languages. The whole situation was a mess until Unicode was introduced.
于是出现了 ISO-8859-1。它是 8 位编码，将字符数量从 ASCII 的 128 扩展到 256。但这仍不够，各国开始制定自己的编码方案。例如日本就有多个日文编码，因为 ASCII 与 ISO-8859-1 主要面向欧洲语言。在 Unicode 出现前，整体编码生态非常混乱。

Unicode is an encoding standard. It aims to provide characters for any language. Unicode has 149,186 characters as of version 15—quite a jump from 256! More than 1,000 of these are emojis.
Unicode 是一个编码标准，目标是覆盖所有语言。到 Unicode 15 版本为止，字符数达 149,186，相比 256 有巨大提升；其中超过 1,000 个是 emoji。

Unicode is the standard, but you need to use an encoding that follows the standard. The most popular encoding today is UTF-8. UTF-8 is variable-length character encoding, which means characters can be anywhere from 1 to 4 bytes (8–32 bits).
Unicode 是标准，但实际存储时要用遵循该标准的具体编码。当前最常见的是 UTF-8。UTF-8 是变长编码，单个字符可占 1 到 4 字节（8–32 位）。

You don’t need to worry too much about this. I’ve kept the example simple intentionally by using ISO-8859-1, which is 8 bits—a nice consistent quantity of bits to work with.
这里不必过度纠结细节。为了便于讲解，示例故意使用 8 位固定长度的 ISO-8859-1，便于统一处理。

Just remember these takeaways:
只需记住以下结论：

Compression algorithms try to reduce the number of bits needed to store each character.
压缩算法的目标是减少每个字符所需位数。
If you need to pick an encoding for a project, UTF-8 is a good default choice.
项目选编码时，UTF-8 通常是很好的默认选项。

Let’s decode some binary to ISO-8859-1 together:
我们来把一段二进制解码为 ISO-8859-1：

011100100110000101100100. You can Google an ISO-8859-1 table or a binary-to-ISO-8859-1 converter to make this easier.
011100100110000101100100。你可以查 ISO-8859-1 对照表或在线转换器来简化操作。

First, we know that each letter is 8 bits, so I am going to divide this into chunks of 8 bits to make it easier to read:
首先，每个字符是 8 位，所以先按 8 位分组，便于阅读：

01110010 01100001 01100100

Great, now we see that there are three letters. Looking them up in an ISO-8859-1 table, I see they spell out rad: 01110010 is r, and so on. This is how your text editor takes the binary data in a text file and displays it as ISO-8859-1. You can view the binary information by using xxd. This utility is available on Unix. Here is how tilt looks in binary:
这样就能看出有 3 个字符。查 ISO-8859-1 表后可知它们拼成 rad：01110010 对应 r，后面同理。这就是文本编辑器把文件二进制按 ISO-8859-1 显示为字符的过程。你可以用 Unix 的 xxd 查看二进制；tilt 的二进制如下：

Terminal window

1
$ xxd -b test.txt
2
00000000: 01110100 01101001 01101100 01110100
3
tilt

Here is where the compression comes in. For the word tilt, we don’t need 256 possible letters; we just need three. So we don’t need 8 bits; we only need 2. We could come up with our own 2-bit code just for these three letters:
压缩的关键在这里：对于单词 tilt，我们不需要 256 个字符候选，只需要 3 个。因此不必用 8 位，2 位就够了。可为这 3 个字符自定义 2 位编码：

1
t = 00
2
i = 01
3
l = 10

Here is how we could write tilt using our new code: 00011000. I can make this easier to read by adding spaces again: 00 01 10 00. If you compare it to the mapping, you’ll see this spells out tilt.
用新编码写 tilt：00011000。加空格后是 00 01 10 00。对照映射可验证正是 tilt。

This is what Huffman coding does: it looks at the characters being used and tries to use less than 8 bits. That is how it compresses the data. Huffman coding generates a tree.
哈夫曼编码本质上就是这样：根据实际出现字符，尽量用少于 8 位来表示，从而压缩数据。它会构建一棵树。

You can use this tree to find the code for each letter. Starting at the root node, find a path down to the letter LLL. Whenever you choose a left branch, append a 0 to your code. When you choose a right branch, append 1. When you get to a letter, stop progressing down the tree. So the code for the letter LLL is 01. Here are the three codes given by the tree:
可通过这棵树得到每个字母编码：从根出发，找到字母 LLL。每走左分支追加 0，每走右分支追加 1。到达字母（叶子）就停止。因此 LLL 的编码是 01。该树给出的 3 个编码为：

1
i = 00
2
l = 01
3
t = 1

Notice that the letter T has a code of just one digit. Unlike ISO-8859-1, in Huffman coding, the codes don’t all have to be the same length. This is important. Let’s see another example to understand why.
注意字母 T 只有 1 位编码。与 ISO-8859-1 不同，哈夫曼编码不要求所有编码等长。这一点非常关键。再看一个例子。

Now we want to compress the phrase “paranoid android.” Here is the tree generated by the Huffman coding algorithm.
现在压缩短语 “paranoid android.”。下图是对应的哈夫曼树。

Check yourself: What is the code for the letter PPP? Try it yourself before reading on. It is 0001. What about the letter DDD? It is 10.
自测一下：字母 PPP 的编码是什么？先自己试，再往下看。答案是 0001。那 DDD 呢？答案是 10。

In this case, there are actually three different possible lengths! Suppose we try to decode some binary data: 01101010. We see the problem right away: we can’t chunk this up the way we did with ISO-8859-1! While all ISO-8859-1 codes were eight digits, here the code could be two, three, or four digits. Since the code length varies, we can’t use chunking anymore.
在这个例子中，编码长度竟有三种！假设我们要解码 01101010，问题立刻出现：不能像 ISO-8859-1 那样按固定长度分块。ISO-8859-1 都是 8 位，而这里可能是 2、3 或 4 位。编码长度可变，因此不能再用固定分块法。

Instead, we need to look at one digit at a time, as if we are looking at a tape.
相反，我们必须像读磁带一样，每次读取 1 位。

Here’s how to do it: first number is 0, so go left (I’m only showing part of the tree here).
做法如下：第一个数字是 0，往左走（这里只画了树的一部分）。

Then we get a 1, so we go right.
接着读到 1，往右走。

Then we get another 1, so we go right again.
再读到一个 1，再往右走。

Aha! We found a letter. This is the binary data we have left: 01010. We can start over at the root node and find the other letters. Try decoding the rest yourself and then read on. Did you get the word? It was rad. This is a big difference between Huffman coding and ISO-8859-1. The codes can vary, so the decoding needs to be done differently.
到这里就命中一个字母了。剩余二进制是 01010。然后从根重新开始继续找下一个字母。你可以先自己解完再看答案。得到的单词是 rad。这正是哈夫曼编码和 ISO-8859-1 的关键差异：编码可变长，因此解码方式也必须变化。

It is more work to do it this way instead of chunking. But there is one big benefit. Notice that the letters that show up more often have shorter codes. DDD appears three times, so its code is just two digits versus III, which appears twice, and PPP, which appears only once. Instead of assigning 4 bits to everything, we can compress frequently used letters even more. You can see how, in a longer piece of text, this would be a big savings!
这种逐位解码比固定分块更麻烦，但有一个巨大收益：高频字符会得到更短编码。比如 DDD 出现 3 次，编码只有 2 位；而 III 出现 2 次，PPP 只出现 1 次，编码更长。这样就不必给每个字符都分配同样位数，高频字符可被更强压缩。在长文本中节省会非常可观。

Now that we understand at a high level how Huffman coding works, let’s see what properties of trees Huffman is taking advantage of here.
现在我们已经从高层理解了哈夫曼编码，接下来看看它利用了树的哪些性质。

First, could there be overlap between codes? Take this code for example:
首先，编码之间会不会重叠？看这个例子：

1
a = 0
2
b = 1
3
c = 00

Now if you see the binary 001, is that AABAABAAB or CBCBCB? ccc and aaa share part of their code, so it’s unclear. Here is what the tree for this code would look like.
如果看到二进制 001，它是 AABAABAAB 还是 CBCBCB？由于 ccc 和 aaa 的编码前缀重叠，结果不唯一。对应树形如下：

We pass A on the way to C, which causes the problem.
从根到 C 的路径会经过 A，这就是歧义来源。

That’s not a problem with Huffman coding because letters only show up at leaf nodes. And there’s a unique path from the root to each leaf node—that’s one of the properties of trees. So we can guarantee overlap is not a problem.
但哈夫曼编码不会出现这个问题，因为字母只放在叶子节点。根到每个叶子的路径唯一，这是树的基本性质之一，因此可保证无歧义。

When we read the code one digit at a time, we are assuming we will eventually end up at a letter. If this was a graph with a cycle, we couldn’t make that assumption. We could get stuck in the cycle and end up in an infinite loop.
逐位读取编码时，我们默认最终一定会到达某个字母。如果结构是带环图，这个假设就不成立，可能陷入环中导致死循环。

But since this is a tree, we know there are no cycles, so we are guaranteed to end up at some letter.
但这里是树，不存在环，因此一定会落到某个字母节点。

We are using a rooted tree. Rooted trees have a root node, which is important because we need to know where to start! Graphs do not necessarily have a root node.
我们用的是有根树。有根树有明确根节点，这非常重要，因为解码需要固定起点；一般图不一定有“根”。

Finally, the type of tree used here is called a binary tree. Binary trees can have at most two children—the left child and the right child. This makes sense because binary only has two digits. If there was a third child, it would be unclear what digit it is supposed to represent.
最后，这里使用的是二叉树。二叉树每个节点最多两个孩子：左和右。这与二进制只有 0、1 两个符号完全对应。若有第三个孩子，就无法明确它表示哪个二进制符号。

This chapter introduced you to trees. In the next chapter, we will see some different types of trees and what they are used for.
本章介绍了树的基本概念。下一章我们会继续看不同类型的树及其应用场景。

Web Application Development - Further Flask

Mon, 13 Apr 2026 00:00:00 GMT

Further Flask Development#

Serving HTML with Flask#

So far you have used Flask only to serve basic text which is rendered as HTML
In a real application you would need to serve a complete web page
Fortunately, you do not need to attempt to write the whole web page inside a Python program!

Serving CSS and JS#

Usually the CSS file, and any JavaScript scripts on the web page you want to return, would be in separate files (linked with script src= or link)
Images will also usually be served from static files (although it is possible to generate them dynamically if need be)
Static files used by your web application should be placed in a directory called static which must be a subdirectory of the directory holding your .py and/or .wsgi file

Calculating URLs#

When you need to include a URL in your Flask output, avoid using standard URLs as these will change based on where your app is deployed (eg, on the development server or sots)
Instead, Flask provides a Python function url_for which will calculate the URL for another part of the site
It must be imported with from flask import url_for

Getting the URL for another route#

1
@app.route("/respond/<name>")
2
def reply(name):
3
    return "Hello " + name
4
@app.route("/demo")
5
def demo():
6
    return 'Click <a href="' + url_for("reply",name="Bob")+'">here</a> if your name is Bob.'

Points to note#

Using single quotes ’ to quote the Python string allows us to use double quotes ” inside it, as required by HTML
url_for is called with the name of the target Python function, not any part of the route
url_for can create URLs for functions that accept parameters via GET or within the URL. It cannot create POST requests because these are not purely URLs.

Getting the URL for a static file#

1
Out = '<link rel="stylesheet" type="text/css" href="' +
2
url_for("static",filename="style.css") + '">'

Note that the “filename” parameter name is compulsory. It may be a path, but will always be treated as a subpath of the static subdirectory of the web app.

Here the style sheet should be saved as static/style.css.

Templates#

As you can see, generating HTML directly from Python is a pain
Flask provides a templating system called Jinja2 to avoid needing to do this
This allows you to build HTML files initially and then mark them up with instructions as to how they should be modified when called from the web app

Using templates#

Create a templates subdirectory off your app directory (a sibling to static, if that exists)
Place .html templates in this directory (note: templates have the .html file extension but usually cannot render directly in web browsers)
Import and call the function render_template passing it the name of your template file and any parameters to it
- You do not need to specify the templates subdirectory
- Unless you pass them as parameters, the template cannot read your Python variables, but it can read the web request

Contents of a template#

A template is essentially an HTML file
Any regular content included in the template file is included verbatim in the returned HTML
Variable content can be added to the template by using special symbols recognized by the template engine

Sample variable template#

1
<!doctype html>
2
<html>
3
<head>
4
        <title>Template Example</title>
5
</head>
6
<body>
7
        <p>Hello {{name}}, this is a template.</p>
8
</body>
9
</html>

A template variable#

To display this, render_template must be called with a name parameter in Python
Having a URL parameter or Python variable called name will not pass this on to the template
Contents of variables are automatically escaped to prevent HTML being injected. If you want to pass HTML from your Python code, you can mark the variable as safe using a template, but be extremely careful with this

Jinja Filters#

1
<body>
2
  <p>I AM SHOUTING AT {{name|upper}}!</p>
3
</body>

Similar to calling a function on the variable in Python before displaying it
Only a set list of built-in filters is available
- But this shouldn’t be a problem since you can manipulate the value in Python however you want, before you pass it to the template
- You can read fields/properties of an object from a template with the standard Python syntax

Jinja Conditions#

1
<p>I AM SHOUTING AT
2
    {% if name is defined %}
3
    {{name|upper}}!
4
    {% else %}
5
    EVERYONE!
6
    {% endif %} </p>

Allows you to make decisions about which content should be displayed.
As with filters, you cannot use arbitrary Python conditions. But you can set Booleans in Python and pass them to the template and test them (if variable is true)

Jinja Defined Condition#

The is defined condition in Jinja is useful for creating templates where Python parameters are optional
Note however that you cannot pass a value from request.args or request.form that may be missing to a template, and count on an is defined condition to resolve this
Trying to read a value that does not exist from the request will cause an error in Python before the template begins to run

Jinja Loops#

1
{% for cname in names %}
2
  <p>I see {{ cname }}</p>
3
{% endfor %}

You can loop through any structure has an iterator (ie, that can be looped through in Python)
A number of loop flags are also provided to simplify the process of laying out HTML

Flask Sessions#

Often you will want a user to have a continuous dialog with a web page over multiple requests
Since requests are addressed by separate function calls, and can come in any order (even from multiple people) this can be difficult
Flask provides an automatic system to do this: the sessions variable

Using Flask sessions#

1
from flask import Flask, session, request, escape
2
app = Flask(__name__)
3
app.secret_key = b'09oageu[b23b a/='
4
@app.route("/respond/<name>")
5
def reply(name):
6
  session["name"] = escape(name)
7
  return "Hello " + escape(name) + "!"
8
@app.route("/respond")
9
def namelessReply():
10
  if "name" in session:
11
    return "Hello again " + escape(session["name"]) + "!"
12
  else:
13
    return "I don't know you, yet!"

To use sessions you must specify a secret key:

1
app = Flask(__name__)
2
app.secret_key = b'09oageu[b23b a/='

Note the b before the quote is intentional and correct. It specifies a byte string instead of a standard string.
As the name implies the secret key must be kept secret.
Anyone who learns it will be able to attack your site.
Crashing your hands over the keyboard at random is not a particularly secure way to create a secret key 😊

1
@app.route("/respond/<name>")
2
def reply(name):
3
    session["name"] = escape(name)
4
    return "Hello " + escape(name) + "!"

The session variable is a Python dict, which you can add whatever value you want to.
Flask will create a cookie holding the data in the session variable and add it to your page automatically.
It will use the secret key to cryptographically sign the cookie.

Cryptographic Signing#

Cryptographic signing is a special form of encryption that emphases authentication over secrecy.
Reading a cryptographically signed cookie is not trivial but not impossible.
However, it should be very difficult or impossible to change it without creating a mismatch that can be detected.
This prevents hackers from attacking your site by tampering with the contents of cookies.
Note that cryptographic signing does not prevent a user copying a cookie or having it stolen and used by someone else (because no change occurs in this process!)

Using Flask sessions#

1
@app.route("/respond")
2
def namelessReply():
3
  if "name" in session:
4
    return "Hello again " +
5
    escape(session["name"]) + "!“
6
  else:
7
    return "I don't know you, yet!"

When a request comes in with a session cookie, Flask decrypts and checks the cookie and load the data into the session variable.
Here we read back the session variable and display output based on it.
If we are not using a template then it is always safest to escape any input sent to the web page, even though in this case the name should have been escaped already.

Scope of a session#

Once a session variable is set, the cookie will be passed on to the user’s browser and held there, and the same session variable will be available again in future requests until:
- The user uses a different browser
- The user deletes the cookie or renders it cryptographically invalid
- Your program deletes the data in the session variable after a request
- You change the secret key in the program, breaking all cookies issued so far
The session variable is not reset when
- The server is changed or restarts
Beware of broken session cookies issued by older versions of your app

Binary Trees and Cross-referencing (Binary search tree)

Thu, 09 Apr 2026 00:00:00 GMT

Exercises Binary Trees
二叉树练习#

Exercise 1 - Getting set up
练习 1：环境准备#

Download the code provided on the website, organise your folders, and get a project set up as usual. You should now see the following files in the project:
从网站下载提供的代码，整理好文件夹，并按常规方式完成项目搭建。此时你应在项目中看到以下文件：

TreePlay.java - the main program
TreePlay.java - 主程序
BinaryTree.java - a class representing binary trees of integers
BinaryTree.java - 表示整数二叉树的类
TreeUtilities.java - various utilities, including for generating random trees and for pop-up windows displaying binary trees
TreeUtilities.java - 各种工具方法，包括生成随机树与弹窗显示二叉树
TreeNavigator.java - a class with some empty method stubs, which you will complete in the practical
TreeNavigator.java - 包含若干待补全方法桩的类，你将在本次实践中完成它们

Have a look at the main() method in the main class TreePlay and its comments. Now run the program to see what it does.
先查看主类 TreePlay 中的 main() 方法及其注释，然后运行程序观察其行为。

Please note that you don’t need to know how the creation of a random tree or the display of a tree works (inside TreeUtilities.java) for this practical. These facilities are just provided to make it easier for you to create multiple sample trees to try things out on, and see the contents of the trees.
请注意，在本次实践中你 不需要 理解随机树生成或树可视化显示（TreeUtilities.java 内部）是如何实现的。这些功能只是为了便于你快速创建多个样例树并查看树内容。

Exercise 2 - Traversals
练习 2：遍历#

Implement the method preOrderTraversal() in the TreeNavigator class. After that, add a line of code to the main method in the main class, TreePlay, to look at the results of your traversals, so that you now have
在 TreeNavigator 类中实现 preOrderTraversal()。随后在主类 TreePlay 的 main 方法中添加代码，以查看遍历结果，即：

1
BinaryTree t = TreeUtilities.createRandomTree();
2
System.out.println("PREORDER TRAVERSAL");
3
TreeNavigator.preOrderTraversal(t);
4

5
TreeUtilities.showTree(t);

Run the code - but STOP before clicking on the continue button. Before the program gets to printing out the pre-order traversal of the tree, predict the results: write down on a piece of paper what the tree looks like, and write down what you THINK is the pre-order traversal of the tree. Then click on the continue button. Were you right? If not, try again.
运行代码，但在点击继续按钮前先停下。在程序打印先序遍历结果前，请先预测：把树形结构画在纸上，并写下你“认为”的先序遍历序列。然后再点击继续。你猜对了吗？如果没有，再试一次。

Now implement the postOrderTraversal() and inOrderTraversal() methods, and test them by adding code to the TreePlay class, as you did for the preOrderTraversal() method. Note that it will be easier to check your results if you call your TreeNavigator methods before calling TreeUtilities.showTree().
接着实现 postOrderTraversal() 和 inOrderTraversal() ，并像测试 preOrderTraversal() 一样，在 TreePlay 中添加测试代码。请注意，如果在调用 TreeUtilities.showTree() 之前先调用你的 TreeNavigator 方法，那么检查结果将会更加容易。

Exercise 3 - Counting the Leaves
练习 3：统计叶子节点#

Now implement the leafCount() method in the TreeNavigator class so that you count how many leaves there are in a binary tree:
现在在 TreeNavigator 类中实现 leafCount()，用于统计二叉树中的叶子节点数量：

1
public int leafCount(BinaryTree t)…

For example, in this binary tree →
例如，在这棵二叉树中 →

there are precisely three leaves (containing 30, 33 and 55):
恰好有三个叶子节点（值为 30、33 和 55）：

Add a line in the main method of the TreePlay class, before the tree gets displayed, like this
在 TreePlay 类的 main 方法中、树显示之前，加入如下代码：

1
System.out.println("LEAF COUNT = " + TreeNavigator.leafCount(t));
2
TreeUtilities.showTree(t);

so you can check the result of the leafCount method while the tree is displayed on the screen.
这样你就可以在树可视化显示时同步核对 leafCount 的结果。

Exercise 4 - The Depth of a Binary Tree
练习 4：二叉树深度#

该 depth of a binary tree is the number of edges that you have to traverse to get from the root of the tree to its furthest leaf.
二叉树的深度是指：从树根到最远叶子节点所需经过的边数。

Usually, height is the same as depth.
通常高度（height）与深度（depth）在这里可视为同义。

Note: a tree with only one node has depth 0, an empty tree is taken to have -1, and for example, the height of this tree is 5, because you have to traverse 5 edges to get from the root to the furthest leaf:
注意：只有一个节点的树深度为 0；空树深度视为 -1。下图这棵树高度为 5，因为从根到最远叶子需要经过 5 条边：

Hint: the method Math.max may be useful (look it up in the API documentation).
提示：Math.max 方法可能有帮助（可查阅 API 文档）。

In the TreeNavigator class, implement the method depth() and test it by adding lines to the TreePlay class. The best way to do this is to add a line before the tree gets displayed, like this
在 TreeNavigator 类中实现 depth() 方法，并在 TreePlay 类中添加测试代码。推荐在树显示前加入如下语句：

1
System.out.println("DEPTH = " + TreeNavigator.depth(t));
2
TreeUtilities.showTree(t);

so you can check the result of the depth() method while the tree is displayed on the screen. As before, try it on a few more trees, to test that it seems to work ok.
这样你就能在树显示时核对 depth() 的结果。和之前一样，再多测几棵树，确认实现表现正常。

Further Exercises (optional)
进阶练习（可选）#

These exercises are provided so that if at some point you would like to practise further with binary tree concepts, you have some exercises to try. They would be very good for revision purposes!
这些练习用于你后续继续巩固二叉树概念，非常适合复习使用！

Exercise 5 - More Practice on Recursive Methods
练习 5：递归方法进阶#

Write a recursive method strictlyBinary() (to go in the TreeNavigator class)
编写递归方法 strictlyBinary()（放在 TreeNavigator 类中）：

1
public static boolean strictlyBinary(BinaryTree t)

which returns true if and only if the tree is strictly binary. A tree is strictly binary if it is not empty, and every node that is not a leaf has precisely two subtrees.
当且仅当该树是 strictly binary（严格二叉树）时返回 true。严格二叉树要求：树非空，且每个非叶节点都恰好有两个子树。

Reference Answer#

Reference Answer

src/binary_tree/TreeNavigator.java展开收起

1
package binary_tree;
2
/**
3
 * @author Anka
4
 */
5
public class TreeNavigator {
6

7
    /**
8
     * Print out a preorder traversal of a binary tree
9
     *
10
     * @param t root of the tree to be traversed
11
     */
12
    public static void preOrderTraversal(BinaryTree t) {
13
        if (t != null) {
14
            System.out.println(t.data);
15
            preOrderTraversal(t.left);
16
            preOrderTraversal(t.right);
17
        }
18
    }
19

20
    /**
21
     * Print out a postorder traversal of a binary tree
22
     *
23
     * @param t root of the tree to be traversed
24
     */
25
    public static void postOrderTraversal(BinaryTree t) {
26
        if (t != null) {
27
            postOrderTraversal(t.left);
28
            postOrderTraversal(t.right);
29
            System.out.println(t.data);
30
        }
31
    }
32

33
    /**
34
     * Print out a inorder traversal of a binary tree
35
     *
36
     * @param t root of the tree to be traversed
37
     */
38
    public static void inOrderTraversal(BinaryTree t) {
39
        if (t != null) {
40
            inOrderTraversal(t.left);
41
            System.out.println(t.data);
42
            inOrderTraversal(t.right);
43
        }
44
    }
45

46
    /**
47
     * Count the leaves on a binary tree
48
     * @param t root of the tree to be examined
49
     * @return the number of leaves in the tree
50
     */
51
    public static int leafCount(BinaryTree t) {
52
        int count = 0;
53
        if (t != null) {
54
            if (t.left == null && t.right == null) {
55
                count = 1;
56
            } else {
57
                count += leafCount(t.left);
58
                count += leafCount(t.right);
59
            }
60
            return count;
61
        } else {
62
            return 0;
63
        }
64
    }
65

66
    /**
67
     * Find the depth of a binary tree
68
     * @param t the root of the tree to be examined
69
     * @return depth of the tree
70
     */
71
    public static int depth(BinaryTree t) {
72
        if (t != null) {
73
            int leftDepth = depth(t.left);
74
            int rightDepth = depth(t.right);
75
            return 1 + Math.max(leftDepth, rightDepth);
76
        } else {
77
            return 0;
78
        }
79
    }
80
    public static int depth2(BinaryTree t) {
81
        if (t == null) {
82
            return -1;
83
        } else {
84
            return 1 + Math.max(depth2(t.left), depth2(t.right));
85
        }
86
    }
87

88
    /**
89
     * Determine whether a tree is strictly binary
90
     * @param t the tree to be examined
91
     * @return true if the tree is strictly binary, false if it is not
92
     */
93
    public static boolean strictlyBinary(BinaryTree t) {
94
        if (t != null) {
95
            if ((t.left == null && t.right != null) || (t.left != null && t.right == null)) {
96
                return false;
97
            } else {
98
                return strictlyBinary(t.left) && strictlyBinary(t.right);
99
            }
100
        } else {
101
            return true;
102
        }
103
    }
104
    public static boolean strictlyBinary2(BinaryTree t) {
105
        if (t == null) {
106
            return false;
107
        } else if (t.left == null && t.right == null) {
108
            return true;
109
        } else {
110
            return strictlyBinary2(t.left) && strictlyBinary2(t.right);
111
        }
112
    }
113
}

展开收起

Practical: Cross-referencing (Binary search tree)
实践：交叉引用（基于二叉搜索树）#

You are going to complete the implementation (in Java) of a program that will generate a cross-reference listing of a text provided in a file.
你将完成一个 Java 程序：对给定文件中的文本生成交叉引用列表。

For example, look at this file
例如，请看这个文件
→

Macavity’s a Mystery Cat: he’s called the Hidden Paw
For he’s the master criminal who can defy the Law.
He’s the bafflement of Scotland Yard, the Flying Squad’s despair
For when they reach the scene of crime Macavity’s not there!
[T S Eliot]

The cross-reference you will produce will display a list, in alphabetic order, of each word in the text and the line numbers of the lines on which it appears.
你要生成的交叉引用将按字母顺序列出文本中的每个单词，以及该单词出现的行号。

The line numbers should appear in ascending order, and, if a word appears on a line of the text more than once, then the line number should appear only once for that word in the cross-reference list.
行号应按升序显示；若同一单词在同一行出现多次，该行号在交叉引用中也只应出现一次。

For example, the cross reference of the above file is as follows
例如，上述文件的交叉引用如下
→

a: 1
bafflement: 3
called: 1
can: 2
Cat: 1
crime: 4
criminal: 2
defy: 2
despair: 3
Eliot: 5
Flying: 3
For: 2, 4
he's: 1, 2, 3
Hidden: 1
Law: 2
Macavity's: 1, 4
master: 2

Mystery: 1
not: 4
of: 3, 4
Paw: 1
reach: 4
S: 5
scene: 4
Scotland: 3
Squad's: 3
T: 5
the: 1, 2, 3, 4
there: 4
they: 4
when: 4
who: 2
Yard: 3

To produce the cross-reference listing, you will use a binary search tree to store the words in the file, and each word in the tree should be stored along with a list of the numbers of the lines on which it appears. Note that you will not need to do any explicit sorting in this program to get values in the desired order.
为生成交叉引用列表，你将使用二叉搜索树存储文件中的单词，并为每个单词维护其出现行号列表。注意：为了得到所需顺序，你不需要做任何显式排序。

For a longer example, see the Appendix of this document.
更长的示例见文末附录。

Exercise 1#

Set up a project from the sources supplied on the student website, in the usual way.
用学生网站提供的源码按常规方式搭建项目。

Take a look at the two files you are provided with:
查看提供给你的文件：

Xrefs.java - the main program (DO NOT ALTER)
Xrefs.java - 主程序（不要修改）
WordTree.java - where the binary search tree is (DO NOT ALTER)
WordTree.java - 二叉搜索树数据结构定义（不要修改）
TreeUtils.Java - this contains various routines for processing trees, and it is the only file that you should alter
TreeUtils.java - 包含各种树处理例程，也是唯一需要你修改的文件

The data structure for the binary search tree to store the words is provided for you, in the file WordTree.java. In the exercises below, you will modify the file TreeUtils.java so as to implement the following methods:
用于存储单词的二叉搜索树数据结构已在 WordTree.java 提供。接下来你需要修改 TreeUtils.java，实现以下方法：

recordWord() - adding a word to a tree
recordWord() - 向树中添加单词
display() - for the displaying a tree
display() - 显示树中内容
numberOfEntries() - counting how many different words there are in a tree
numberOfEntries() - 统计树中不同单词的数量

Study the Java classes, and, in particular, in TreeUtils.java the specifications as pre- and post-conditions of the methods.
请阅读这些 Java 类，尤其关注 TreeUtils.java 中各方法的前置条件与后置条件说明。

Start editing the file TreeUtils.java by putting your name as the author.
先在 TreeUtils.java 中将作者信息改为你的名字。

Note that when you add a word to the tree, if the word is new, then a new node should be added to the tree, but if the word has been seen before, then the line-number of the new occurrence of the word should be added to the list of line numbers accompanying the word in the tree.
注意：向树中添加单词时，若该词是新词则应新建节点；若该词已存在，则应将此次出现的行号加入该词对应的行号列表。

Exercise 2#

Implement the method
实现下列方法：

1
recordWord(WordTree tree, String word, int lineNo)

This method should insert the word word into the tree tree, and should return a reference to the tree that results from this insertion. If tree is null then the method should create a tree containing just the word word.
该方法应将单词 word 插入树 tree，并返回插入后的树引用。若 tree 为 null，则应创建一棵仅含 word 的新树并返回。

Note: you do not need to copy existing nodes into a new tree. Just insert the word supplied and return a reference to the modified tree.
注意： 你不需要把已有节点复制到新树中，只需在原树上插入该词并返回修改后的树引用。

Note: you can compare strings by using suitable methods from the String class, in particular look up the methods equalsIgnoreCase() and compareToIgnoreCase(). For example if word1 and word2 are the two strings to be compared, then the expression word1.compareToIgnoreCase(word2) will return 0 if the two words are the same (ignoring upper/lower case), will return a number less than 0 if word1 occurs before word2 in the dictionary, and will return a number greater than 0 if word1 occurs after word2 in the dictionary.
注意： 比较字符串可使用 String 类方法，特别是 equalsIgnoreCase() 与 compareToIgnoreCase()。例如比较 word1 与 word2 时，word1.compareToIgnoreCase(word2)：若两词相同（忽略大小写）返回 0；若 word1 在词典序中位于 word2 之前则返回小于 0；反之返回大于 0。

Suggestion: don’t worry about the line numbers at first, but produce a first version of your program that just produces an alphabetically ordered list of all the (different) words that appeared in the input file.
建议：开始阶段先不处理行号，先做出一个版本，只输出输入文件中所有不同单词的字母序列表。

Also, don’t forget that, if a word appears on a line of the text more than once, then the line number should appear only once.
同时别忘了：若同一单词在同一行出现多次，该行号也只应记录一次。

Exercise 3#

Implement the method display(). If you traverse the binary search tree in the right order then the words will come out in alphabetical order. You will not need to sort the list of words if you have built it in the right way.
实现 display() 方法。若你按正确顺序遍历二叉搜索树，输出单词将天然按字母序排列。只要树构建正确，你不需要额外排序。

You may assume that the list of line numbers for any one word will fit on one line of the display.
你可以假设：任意单词对应的行号列表都能在显示中放在同一行。

Exercise 4#

Implement the method numberOfEntries().
实现 numberOfEntries() 方法。

Reference Answer#

Reference Answer

src/binary_search_tree/TreeUtils.java展开收起

1
package binary_search_tree;
2
/**
3
 * @author GitHub Copilot
4
 */
5
public class TreeUtils {
6
    /**
7
     * Records a new occurrence of a given word into a WordTree.
8
     *
9
     * @param tree The WordTree into which the word should be recorded (N.B.
10
     * this can be null, in which case a new tree should be created and returned)
11
     * @param word the word to be recorded
12
     * @param lineNo the line number on which the word occurred
13
     * @return a reference to the modified tree, with the new word inserted.
14
     * N.B if tree is null, the method should create a WordTree
15
     * containing the word to be inserted, and should return it.
16
     * PRECONDITION: tree is a well formed binary search tree
17
     * POSTCONDITION: if word was not in tree, then the word and its line number
18
     * (lineNo) have been inserted into ordered word tree, else line has been
19
     * appended to line-number list for word (if we haven't already recorded
20
     * that line number for this word)
21
     */
22
    public static WordTree recordWord(WordTree tree, String word, int lineNo) {
23
        // If tree is empty, create a new node and return it
24
        if (tree == null) {
25
            return new WordTree(word, lineNo);
26
        }
27

28
        // Compare words ignoring case to maintain dictionary order
29
        int cmp = word.compareToIgnoreCase(tree.word);
30
        if (cmp == 0) {
31
            // Word already in this node: add the line number if not already present
32
            if (!tree.lineNumbers.contains(lineNo)) {
33
                tree.lineNumbers.add(lineNo);
34
            }
35
        } else if (cmp < 0) {
36
            // Insert into left subtree
37
            tree.left = recordWord(tree.left, word, lineNo);
38
        } else {
39
            // Insert into right subtree
40
            tree.right = recordWord(tree.right, word, lineNo);
41
        }
42

43
        return tree;
44
    }
45

46
    /**
47
     * Displays all the words in a WordTree.
48
     *
49
     * @param tree the WordTree whose contents are to be displayed
50
     * PRECONDITION: tree is a well formed binary search tree
51
     * POSTCONDITION words have been written out in alphabetical order, each
52
     * followed by ascending list of line numbers on which the word occurs
53
     */
54
    public static void display(WordTree tree) {
55
        if (tree == null) return;
56

57
        // In-order traversal to display words in alphabetical order
58
        display(tree.left);
59

60
        // Print word followed by its line numbers (ascending order)
61
        System.out.print(tree.word + ": ");
62
        for (int i = 0; i < tree.lineNumbers.size(); i++) {
63
            System.out.print(tree.lineNumbers.get(i));
64
            if (i < tree.lineNumbers.size() - 1) System.out.print(", ");
65
        }
66
        System.out.println();
67

68
        display(tree.right);
69
    }
70

71
    /**
72
     * Counts how many different words there are in a WordTree
73
     *
74
     * @param tree the WordTree whose words are to be counted
75
     * @return the number of different words in tree
76
     * PRECONDITION: tree is a well formed binary search tree
77
     */
78
    public static int numberOfEntries(WordTree tree) {
79
        if (tree == null) return 0;
80
        return 1 + numberOfEntries(tree.left) + numberOfEntries(tree.right);
81
    }
82
}

展开收起

Appendix
附录#

If you want to entertain yourself look at:
如果你想放松一下，可以看看：

https://www.youtube.com/watch?v=TKlub5vB9z8

Here is an example output for Moses.txt, which contains a nonsense poem from the film Singing in the Rain:
下面是 Moses.txt 的输出示例；该文本来自电影 Singing in the Rain 中的一首无厘头诗：

1
************************************
2
Producing a cross-reference for the file:
3
Moses.txt
4
************************************
5
1: Moses supposes his toeses are Roses,
6
2: But Moses supposes erroneously,
7
3: Moses he knowses his toeses aren't roses,
8
4: As Moses supposes his toeses to be!
9
5: Moses supposes his toeses are Roses,
10
6: But Moses supposes erroneously,
11
7: A mose is a mose!
12
8: A rose is a rose!
13
9: A toes a toes!
14
10: Hooptie doodie doodle
15
11: Moses supposes his toeses are Roses,
16
12: But Moses supposes erroneously,
17
13: For Moses he knowses his toeses aren't roses,
18
14: As Moses supposes his toeses to be!
19
15: Moses
20
16: (Moses supposes his toeses are roses)
21
17: Moses
22
18: (Moses supposes erroneously)
23
19: Moses
24
20: (Moses supposes his toeses are roses)
25
21: As Moses supposes his toeses to be!
26
22: A Rose is a rose is a rose is a rose is
27
23: A rose is for Moses as potent as toeses
28
24: Couldn't be a lily or a daphi daphi dilli
29
25: It's gotta be a rose cuz it rhymes with mose!
30
26: Moses!
31
27: Moses!
32
28: Moses!
33
A: 7, 8, 9, 22, 23, 24, 25
34
are: 1, 5, 11, 16, 20
35
aren't: 3, 13
36
As: 4, 14, 21, 23
37
be: 4, 14, 21, 24, 25
38
But: 2, 6, 12
39
Couldn't: 24
40
cuz: 25
41
daphi: 24
42
dilli: 24
43
doodie: 10
44
doodle: 10
45
erroneously: 2, 6, 12, 18
46
For: 13, 23
47
gotta: 25
48
he: 3, 13
49
his: 1, 3, 4, 5, 11, 13, 14, 16, 20, 21
50
Hooptie: 10
51
is: 7, 8, 22, 23
52
it: 25
53
It's: 25
54
knowses: 3, 13
55
lily: 24
56
mose: 7, 25
57
Moses: 1, 2, 3, 4, 5, 6, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 23, 26, 27, 28
58
or: 24
59
potent: 23
60
rhymes: 25
61
rose: 8, 22, 23, 25
62
Roses: 1, 3, 5, 11, 13, 16, 20
63
supposes: 1, 2, 4, 5, 6, 11, 12, 14, 16, 18, 20, 21
64
to: 4, 14, 21
65
toes: 9
66
toeses: 1, 3, 4, 5, 11, 13, 14, 16, 20, 21, 23
67
with: 25
68
number of words: 144
69
number of different words: 35

展开收起

Reference Answer to the Thinking Question in lecture
讲座中思考题的参考答案#

常见二叉树类型#

完美二叉树#

如下图所示，完美二叉树（perfect binary tree）所有层的节点都被完全填满。在完美二叉树中，叶节点的度为 000 ，其余所有节点的度都为 222 ；若树的高度为 hhh ，则节点总数为 2h+1−12^{h+1} - 12h+1−1 ，呈现标准的指数级关系，反映了自然界中常见的细胞分裂现象。

Tip

请注意，在中文社区中，完美二叉树常被称为满二叉树。

完美二叉树

完全二叉树#

如下图所示，完全二叉树（complete binary tree）仅允许最底层的节点不完全填满，且最底层的节点必须从左至右依次连续填充。请注意，完美二叉树也是一棵完全二叉树。

完全二叉树

完满二叉树#

如下图所示，完满二叉树（full binary tree）除了叶节点之外，其余所有节点都有两个子节点。

完满二叉树

平衡二叉树#

如下图所示，平衡二叉树（balanced binary tree）中任意节点的左子树和右子树的高度之差的绝对值不超过 1 。

平衡二叉树

二叉树的退化#

下图展示了二叉树的理想结构与退化结构。当二叉树的每层节点都被填满时，达到“完美二叉树”；而当所有节点都偏向一侧时，二叉树退化为“链表”。

完美二叉树是理想情况，可以充分发挥二叉树“分治”的优势。
链表则是另一个极端，各项操作都变为线性操作，时间复杂度退化至 O(n)O(n)O(n) 。

二叉树的最佳结构与最差结构

如下表所示，在最佳结构和最差结构下，二叉树的叶节点数量、节点总数、高度等达到极大值或极小值。

	完美二叉树	链表
第 iii 层的节点数量	2i−12^{i-1}2i−1	111
高度为 hhh 的树的叶节点数量	2h2^h2h	111
高度为 hhh 的树的节点总数	2h+1−12^{h+1} - 12h+1−1	h+1h + 1h+1
节点总数为 nnn 的树的高度	log⁡2(n+1)−1\log_2 (n+1) - 1log2(n+1)−1	n−1n - 1n−1

Finance and Product Cost Management

Thu, 09 Apr 2026 00:00:00 GMT

CHC5056 Innovative Product Development

Web Application Development - Flask

Thu, 09 Apr 2026 00:00:00 GMT

Flask and Web Server Programming#

Web Server Development#

Standard web servers served content from a file - called static content
When we develop server-side apps, we instead serve content based on the result of running a program - called dynamic content
This allows the website to deliver varying responses to user requests and to update data on the server in response to requests
Methods for integrating the program with the server were discussed in the first lecture.

Web Server Languages and Frameworks#

C, Perl: originally used before the development of web scripting languages. No longer popular
PHP: scripting language that evolved from a standard format for personal home pages. One of the first server languages made for the web, so extremely well adapted for it, but has some issues with security and language design
Java: well established language with multiple web server projects and strong commercial-level support.

Ruby: contemporary with PHP as a web language, most known for the Ruby On Rails framework for producing database backed sites. But has some scalability issues
C# / .NET: languages tightly integrated with Microsoft web servers and again with very strong commercial support
Python: friendlier language than Perl and had features making it more adaptable for web based programming; rapidly increasing in popularity, although still behind Java.

Python Integration#

Python programs can integrate with web servers using a standard interface called WSGI
WSGI can allow any Python program to produce output for the web. But additional libraries are available to simplify and standardise the process of writing Python web applications
On this module we will use the Flask library, which also integrates Jinja2, a templating system.

A basic Flask program#

1
from flask import Flask
2
app = Flask(__name__)
3
@app.route('/')
4
def hello_world():
5
    return 'Hello, World!'

1
from flask import Flask
2
app = Flask(__name__)

Loads the Flask library, then tells Flask to read your code to integrate with the web server.
Note: no main function or method, and no code outside functions. This is correct (unless you need to initialize globals). Your program effectively becomes a library that is used by the web server to satisfy certain calls, and so has no main program in itself.

1
@app.route('/')
2
def hello_world():
3
    return 'Hello, World!'

Functions are specified in the usual Python way.
@app.route is an annotation. It means that when Flask reads your file it will create a connection to that function in the object it passes to the web server.
/ is the route to the function; that is, the URL (or part of the URL) that will cause the function to run.

1
@app.route('/goodbye')
2
def goodbye():
3
    return 'Goodbye!'

A single Flask file can respond to multiple routes by running different functions.
Note that the presence or absence of a / at the end of the route is important. Accessing /goodbye/ will not run the function above, and will give an error.
Python functions without a route will not run in response to web requests, but can be called from other functions that do, in the normal way.

Running Flask programs#

Because Flask programs have to be called from a web server, you can’t run them in IDLE or in the normal way
Flask provides a simple local-only web server to use for testing your code
To run this, you must enter the following at a command line:

Terminal window

1
set FLASK_APP=<name of your Python file>
2
set FLASK_ENV=development
3
flask run or python -m flask run

This will create the server and a local server address. To run your function, visit that address (and the appropriate route) in a web browser.

Routes#

1
@app.route('/')

When you use the built-in Flask server, it exists only to test your web app. So the route / will match the root URL on whatever the test server is (usually http://localhost:5000/ )
On a real web server, the server performs its own routing first. It has to be configured internally to tell it which requests should be sent to your Flask program (and which Flask program, as there could be several). This is done by modifying values inside the server configuration file, which depends on the server program being used

Routes and the web server#

A typical web server will match a URL on a web server to a Flask file.
The route in the Flask file is then treated as a subpath of that route.
For example, if file myApp.py is routed to server path /interact, then a function with @app.route('/') would be accessed at http://server/interact/ ; a function with @app.route('/test') would be accessed at http://server/interact/test .

Taking input in a web app#

A web server application can’t ask the user for input directly; it must serve a complete response to a request then stop.
Input must thus be included in that request. This can be done in three ways.
- In form parameters (POST parameters): must be set up by a form on a linking web page or by JavaScript. Invisible to the user.
- Flexible but harder to test and difficult to share between users.
- In URL arguments (GET parameters): can be set by forms, scripts, or by the user. Visible to the user and can be shared, but harder to read.
- In the URL itself: can be set only by scripts or the user. Easy for users to understand and share, but has more restrictions.

Taking input: GET#

1
<form action="http://localhost:5000/respond" method="GET">
2
    <p>What is your name?</p>
3
    <input name="name" type="text"></input>
4
    <button type="submit">OK</button>
5
</form>

↓

1
http://localhost:5000/respond?name=Waldo

↓

1
@app.route("/respond")
2
def reply():
3
    return "Hello " + request.args.get("name")

Taking input: POST#

1
<form action="http://localhost:5000/respond" method="POST">
2
    <p>What is your name?</p>
3
    <input name="name" type="text"></input>
4
    <button type="submit">OK</button>
5
</form>

↓

1
http://localhost:5000/respond (+headers)

↓

1
@app.route("/respond")
2
def reply():
3
    return "Hello " + request.form["name"]

1
http://localhost:5000/respond/Waldo (+headers)

↓

1
@app.route("/respond/<name>")
2
def reply(name):
3
    return "Hello " + name

Input through JavaScript#

JavaScript can redirect the page to another page with GET parameters, or a custom URL.
JavaScript cannot set POST parameters except when making async requests (we will look at these later)
These should be set through forms. If necessary, you can create an invisible hidden form, set its fields and then call the submit() function on the form element from JavaScript

Checking for input#

Note that if you attempt to access args[] or form[] for a value that does not exist, your script will give an error, which will result in an “internal server error” being sent to the client.
These structures are Python dicts, and so you should check for membership in the normal way you would for a dict.
Remember that users, especially hackers, can forge requests. Always treat input from the web as radioactive
When using an in-URL parameter, the route will not match if the parameter is empty.

Web Application Development Practical5: Flask

Wed, 08 Apr 2026 00:00:00 GMT

Before Starting the Practical…#

Prepare virtual environment#

Terminal window

1
python3 -m venv week5flask
2
source week5flask/bin/activate
3
pip install flask mysql-connector-python
4
cd week5flask
5
mkdir static
6
set FLASK_ENV=development
7
set FLASK_DEBUG=1

Create `app.py`#

1
from flask import Flask
2
app = Flask(__name__)

Start develop server#

Terminal window

1
python -m flask run

FAQ

在 Mac/Linux 上，set FLASK_ENV=development 和 set FLASK_DEBUG=1 无效，请将 set 换成 export

注：FLASK_ENV 有两个可选项：production 和 development

flask 默认端口为5000，某些情况下可能被占用，可以在命令行输入 lsof -i :5000 查看占用端口的进程，用 kill -9 <PID> 结束对应的进程，或者使用其它不常用端口启动，如 python -m flask run --port=4999
另，还可以通过 --host=0.0.0.0 使服务在局域网内可见。

Practical Session 5: Flask#

Part 1: Static site#

For this practical you will be learning to use the development server that is built into Flask. This is the server you will be using to produce your coursework, so please ensure you can get it to work.

Ensure that you have Python installed on your computer. If you are working in a Brookes lab, run Python from Apps Anywhere to install it.
Ensure that you can access Python from the command line. Open a Command Line (Command Prompt under Windows, Terminal under MacOS) and enter pip3. This should produce a lengthy help message.

If you get an error message, you may need to find the directory where Python is installed and add it to your system PATH.
Under Linux or MacOS, make sure to refer to pip3 or python3 when running from the command line, as older versions of Python may be installed as well.
Under Windows 10, running python or python3 from the command line may cause Windows Store to appear, even if Python is installed. This should be resolved by the steps below.

The first step is to create a Python virtual environment. This will ensure that other Python libraries and unrelated parts of the system do not interfere with the development web server.

Create a directory to work in and change to it by entering cd followed by that directory name.
If you haven’t done so before, install Python virtual environment support by typing pip3 install virtualenv.
Create a virtual environment in your working directory by typing virtualenv flasktest (flasktest here is the name of the virtual environment, which you can change if you want to)
cd into the virtual environment directory (cd flasktest), then enable the virtual environment for Python by entering scripts\activate (under Windows) or scripts/activate (under MacOS or Linux).
Confirm that running python produces a Python startup message and a >> prompt. (It will not be in a window because you are using the command line version of Python, not the IDLE editor.) Exit Python by typing quit().

The next step is to install Flask and the related tools in the virtual environment.

While the virtual environment is enabled (see 6 above), type pip3 install flask mysql-connector-python. This will install Flask. This may take a short time as Flask will also be downloaded.
Open IDLE or your preferred Python editor (you can also use Notepad++, Visual Studio Code, PyCharm, etc.) and create a file called app.py inside the virtual environment directory which contains the following:

1
from flask import Flask
2
app = Flask(__name__)

Note: Do not attempt to run the program from your Python editor in the way you may have done before on COMP4004. It will not work properly because it must be run from the Flask server. We will see how to do this below.

Create a directory called static inside the virtual environment directory and place an .html file in it. You can use any of the HTML files you created in previous practicals. If you used a CSS file together with the HTML file, place the CSS file in the static directory too.
At the command prompt, with the virtual environment active and in the virtual environment directory, type set FLASK_ENV=development to enable debug mode in Flask, and then python -m flask run to start the Flask development server. It should produce a message ending with “Running on…” followed by a URL.
Go to your web browser and enter the URL from the “running on” message, followed by static/ and the name of the HTML file you copied into the directory in step 11. For example, if your HTML file was called hello.html, and the “running on” message referred to http://127.0.0.1:5000/ , you would enter the URL http://127.0.0.1:5000/static/hello.html . You should see your HTML file.

Beware: Under Windows, clicking on a Command Prompt window that is already active may cause a text selection cursor (white, non-blinking box) to appear. When this appears, it also suspends the process running in the command line, which will mean that the server will stop working! If you get no response from the server, check that there is no white box in the Command Prompt window. If there is one, click on the Command Prompt window and press ESC on the keyboard to get rid of the box.

Part 2: Dynamic site#

Halt the Flask server by pressing Ctrl+C with the command prompt window selected.
In your Python editor, add the following lines to the app.py file. Do not delete the lines already there.

1
@app.route('/')
2
def hello_world():
3
    return '<html><body><p>Hello, World!</p></body></html>'

Restart the Flask server by entering python -m flask run in the Command Prompt window.
Type the URL http://127.0.0.1:5000/ into your web browser and you should see Hello, World appear in the browser window.
Modify the Flask program in app.py to serve your name instead of Hello, World!. You do not need to start and stop the Flask server every time; Flask should detect that you have changed the .py file and reload it automatically, If this does not work, halt Flask by pressing Ctrl+C with the Command Prompt selected, and then restart it with the command python -m flask run.
Modify your app.py file so that it includes a second route, /module, which returns “Web Application Development”. Test this using the local server.

Part 3: Development#

Modify the app.py file to add a third route, /dadjoke. This route should read two GET input values, thing and question and produce output such that the request:
http://127.0.0.1:5000/dadjoke?thing=horse&question=Why%20the%20long%20face
Should produce the output:

1
A horse walked into a bar.
2
The barman said, "Why the long face?"
3
The horse replied, "Because I'm a horse!"

The words horse and Why the long face should be drawn from the thing and question parameters and should change appropriately if they have different values.

Note the following:

The joke should be laid out by using HTML p elements, so you will need to return those tags in the string returned by your function.
Remember that " signs should be written using the entity " in HTML.
Note that the ? at the end of the question does not appear in the parameter (why not?).
The function will need to add it.
You will need to add from flask import request to the top of your Python program to have access to the request variable.

Test that the function also gives an appropriate response to
http://localhost:5000/dadjoke?thing=fish&question=Why%20are%20you%20gasping
This should give the result:

1
A fish walked into a bar.
2
The barman said, "Why are you gasping?"
3
The fish replied, "Because I'm a fish!"

Modify the function to respond appropriately to the question parameter being missing. The requests above should give the same results, but additionally the request
http://127.0.0.1:5000/dadjoke?thing=horse
Should produce the response

1
A horse walked into a bar.
2
Ouch.
3
It was an iron bar.

If thing is something other than horse, the thing that walks into the bar should be updated appropriately.

Reference Answer#

Reference Answer

app.py展开收起

1
from flask import Flask, request
2

3
app = Flask(__name__)
4
if __name__ == '__main__':
5
    app.config["ENV"] = "development"
6
    app.run(debug=True, host='0.0.0.0', port=4999)
7

8
@app.route('/')
9
def hello_world():
10
    return '<html><body><p>Hello, Anka!</p></body></html>'
11

12
@app.route('/module')
13
def module():
14
    return '<html><body><p>Web Application Development</p></body></html>'
15

16
@app.route('/dadjoke')
17
def dadjoke():
18
    try:
19
        thing = request.args['thing']
20
    except KeyError:
21
        return '<html><body><p>Missing "thing" query parameter.</p></body></html>'
22
    try:
23
        question = request.args['question']
24
    except KeyError:
25
        return f"""
26
    <html>
27
        <body>
28
            <p>A {thing} walked into a bar.</p>
29
            <p>Ouch.</p>
30
            <p>It was an iron bar.</p>
31
        </body>
32
    </html>
33
"""
34
    return f"""
35
    <html>
36
        <body>
37
            <p>A {thing} walked into a bar.</p>
38
            <p>The barman said, "{question}"</p>
39
            <p>The horse replied, "Because I'm a {thing}!"</p>
40
        </body>
41
    </html>
42
"""

展开收起

Data Structures and Algorithms Week5: Tree

Tue, 07 Apr 2026 00:00:00 GMT

Tree
树#

Content
目录#

Binary Trees
二叉树
Recursive techniques with trees
基于树的递归技术
Traversals
遍历

What is a Tree (Graph Theory)?
什么是树（图论）#

In graph theory, a tree is an undirected graph that contains no cycles (i.e. no paths that take you back to the node on which you started).
在图论中，树是一种不包含环的无向图（即不存在一条路径能让你回到起始节点）。

What is a Tree (Computer Science)?
什么是树（计算机科学）#

In computer science we generally think of trees as being rooted trees.
在计算机科学中，我们通常讨论的是有根树。
- One node is designated as the root.
  其中一个节点被指定为根节点。
- The nodes adjacent to it are the roots of its subtrees
  与其相邻的节点分别是其子树的根。

Example#

Example: XML/HTML documents#

Binary trees
二叉树#

Binary trees have two sub-trees:
二叉树有两个子树：

Which is Binary tree?
哪个是二叉树？

Basic Terminology for Binary Trees
二叉树基础术语#

Terminology 术语

Root: 根节点

Left-subtree: 左子树

Right-subtree: 右子树

leaves: 叶子节点

How do we represent binary trees?
如何表示二叉树呢？#

A (binary) tree is
（二叉）树可以定义为：
- either empty,
  要么是空树，
- or consists of a node, containing some data, along with references to two sub-trees, known as the left and right sub trees.
  要么由一个包含数据的节点组成，并带有指向两棵子树的引用，分别称为 left 和 right 子树。

⬆️
Note the recursive definition.
注意这个递归定义。

Represent Binary Trees of Integers
用整数表示二叉树#

1
public class BinaryTree {
2
    public Member data;
3
    public BinaryTree left; //null if there is no left subtree
4
    public BinaryTree right; //null if there is no right subtree
5
    public BinaryTree(Member val) {
6
        data = val;
7
        left = null;
8
        right = null;
9
    }
10
}
11
BinaryTree t;
12
// A tree can be represented by a reference to its root.
13
// This reference is null if the tree is empty.

Recursive Tree Algorithms
递归树算法#

Since trees are defined recursively, it is often simplest to process them using recursive algorithms. Here is an example:
由于树本身是递归定义的，通常使用递归算法处理它最简单。示例如下：

1
/** Count the number of nodes in a binary tree **/
2
public static int count(BinaryTree t) {
3
    if (t == null) {
4
        return 0;
5
    } else {
6
        return 1 + count(t.left) + count(t.right);
7
    }
8
}

Traversals
遍历#

Traverse 遍历

A traversal is a systematic way of going through all the data in a data structure.
遍历是系统化地访问数据结构中全部数据的一种方式。
So, for example, for a list of type ArrayList<String>, this is a traversal:
例如，对于 ArrayList<String> 类型的列表，下面就是一次遍历：

1
for (String s : list) {
2
    // makes s successively each value in list
3
    ............
4
}

For trees there are several traversals, including:
对树而言，常见遍历方式包括：
- pre-order traversal
  先序遍历
- in-order traversal
  中序遍历
- post-order traversal
  后序遍历

Pre-order traversal
先序遍历#

The pre-order traversal algorithm is recursive:
If tree is not empty:
先序遍历算法是递归的：
若树非空：
- visit root
  先访问根节点
- then traverse the left subtree
  再遍历左子树
- then traverse the right subtree
  最后遍历右子树

traversals are done recursively, in pre-order fashion
遍历以递归方式按先序执行

It is called a pre-order traversal because “pre” means “before”, and the root is visited before the subtrees.
之所以称为先序遍历，是因为 “pre” 表示“之前”，即根节点在子树之前被访问。

Pre-order Example
先序示例#

If tree is not empty:
若树非空：

visit root
访问根节点
then traverse the left subtree
遍历左子树
then traverse the right subtree
遍历右子树

Pre-order traversal of graph:
该图的先序遍历：
A,B,D,H,E,C,F,I,J,G

An implementation of pre-order traversal
先序遍历实现#

1
public static void preOrderTraversal(BinaryTree t) {
2
    if (t != null) {
3
        System.out.println(t.data);
4
        preOrderTraversal(t.left);
5
        preOrderTraversal(t.right);
6
    }
7
}

In-order traversal
中序遍历#

The in-order traversal algorithm is recursive:
中序遍历算法是递归的：
- If tree is not empty:
  若树非空：
  - traverse the left subtree
    先遍历左子树
  - then visit root
    再访问根节点
  - then traverse the right subtree
    最后遍历右子树

traversals are done recursively, in in-order fashion
遍历以递归方式按中序执行

For an in-order traversal, the root is visited “in between” the subtrees.
中序遍历中，根节点在两棵子树“之间”被访问。

In-order Example
中序示例#

If tree is not empty:
若树非空：

traverse the left subtree
遍历左子树
then visit root
访问根节点
then traverse the right subtree
遍历右子树

In-order traversal of graph:
该图的中序遍历：
H,D,B,E,A,I,F,J,C,G

An implementation of in-order traversal
中序遍历实现#

1
public static void inOrderTraversal(BinaryTree t) {
2
    if (t != null) {
3
        inOrderTraversal(t.left);
4
        System.out.println(t.data);
5
        inOrderTraversal(t.right);
6
    }
7
}

Post-order traversal
后序遍历#

The post-order traversal algorithm is recursive:
后序遍历算法是递归的：
- If tree is not empty:
  若树非空：
  - traverse the left subtree
    先遍历左子树
  - then traverse the right subtree
    再遍历右子树
  - visit root
    最后访问根节点

traversals are done recursively, in post-order fashion
遍历以递归方式按后序执行

It is called a post-order traversal because “post” means “after”, and the root is visited after the subtrees.
之所以称为后序遍历，是因为 “post” 表示“之后”，根节点在子树之后被访问。

Post-order Example
后序示例#

If tree is not empty:
若树非空：

traverse the left subtree
遍历左子树
then traverse the right subtree
遍历右子树
then visit root
访问根节点

Post-order traversal of graph:
该图的后序遍历：
H,D,E,B,I,J,F,G,C,A

An implementation of post-order traversal
后序遍历实现#

1
public static void postOrderTraversal(BinaryTree t) {
2
    if (t != null) {
3
        postOrderTraversal(t.left);
4
        postOrderTraversal(t.right);
5
        System.out.println(t.data);
6
    }
7
}

Requirements for this week
本周学习要求#

You should achieve by the end of this week’s work:
完成本周学习后，你应当能够：

understand binary trees
理解二叉树
able to store data in binary trees
能够在二叉树中存储数据
understand pre-order, post-order and in-order traversals on binary trees
理解二叉树的先序、后序和中序遍历
able to write recursive functions on trees.
能够在树结构上编写递归函数。

Binary search tree
二叉搜索树#

A Binary Search Tree
二叉搜索树示例#

This is an example of Binary Search Tree
这是一个二叉搜索树示例。
What property does it have that makes it a binary tree?
它具备什么性质使它成为二叉树？
What additional property does it have?
它还具备什么额外性质？
Why might that property be useful?
这个额外性质为什么有用？

Binary Search Trees
二叉搜索树#

These are a special kind of binary tree
它是二叉树的一种特殊类型。
- the data they contain must be a comparable type (where you can do <, >, ==, .equals comparisons), e.g. int, char, String
 (.compareTo)
 其中存储的数据必须是可比较类型（可进行 <、>、==、.equals 比较），如 int、char、String（可用 .compareTo）。
- The data at the root node is greater than all the data in the left subtree
 根节点数据大于左子树中所有数据
- The data at the root node is less than all data in the right subtree
 根节点数据小于右子树中所有数据
- … and so on, all the way down the tree (recursive definition)
 该性质在整棵树上递归成立（递归定义）

Usually binary search trees represent a set of values
二叉搜索树通常表示一组集合值。
- there are no duplicate values in the tree
  树中没有重复值
- Of course, any binary search tree is also a binary tree
  当然，任何二叉搜索树也都是二叉树

Invented by P.F. Windley, A.D. Booth, A.J.T. Colin, and T.N. Hibbard in 1960 (Wikipedia)
由 P.F. Windley、A.D. Booth、A.J.T. Colin 和 T.N. Hibbard 于 1960 年提出（Wikipedia）。

Is this a Binary Search Tree?
这是二叉搜索树吗？#

Datatype Invariants
数据类型不变式#

A datatype invariant is a property of an abstract data type which holds for all objects of that type.
数据类型不变式是某个抽象数据类型中对所有对象都成立的性质。
The datatype invariant for binary search trees is:
二叉搜索树的数据类型不变式是：
- The data at the root node is greater than all the data in the left sub-tree
  根节点数据大于左子树所有数据
- The data at the root node is less than all the data in the right sub-tree
  根节点数据小于右子树所有数据
- … and so on, all the way down the tree
  该性质在整棵树中逐层递归成立
- no duplicate values in the tree - so any implementation of such a tree is also an implementation of the concept of a set with operations union-with-singleton and membership.
  树中无重复值，因此这类树本质上也实现了集合概念（支持单元素并集与成员判断）。

A Search Tree class (for integers)
一个搜索树类（用于整数）#

1
public class SearchTree {
2
    public int data; // or whatever
3
    public SearchTree left;
4
    public SearchTree right;
5
    // Reminder:
6
    // reference-type fields are initialized to null by default.
7
    public SearchTree(int data) {
8
        this.data = data;
9
    }
10
}

Insertion into a Search Tree
插入到搜索树中#

1
public SearchTree insert( SearchTree tree, int val) {
2
    if (tree == null) {
3
        tree = new SearchTree(val);
4
    } else if (val > tree.data) {
5
        tree.right = insert(tree.right, val);
6
    } else if (val < tree.data) {
7
        tree.left = insert(tree.left, val);
8
    } // do nothing -- val is already in tree
9
  return tree;
10
}

Does it use recursive method?
它是否使用了递归方法？

What is the base case?
它的递归基线条件是什么？

Insertion into a Search Tree: Example
搜索树插入示例#

1
public SearchTree insert( SearchTree tree, int val) {
2
    if (tree == null) {
3
        tree = new SearchTree(val);
4
    } else if (val > tree.data) {
5
        tree.right = insert(tree.right, val);
6
    } else if (val < tree.data) {
7
        tree.left = insert(tree.left, val);
8
    }
9
  return tree;
10
}

We have some variable SearchTree t. The initial call is t = insert(t,9) where t points to the root of the tree.
设有变量 SearchTree t，初始调用为 t = insert(t,9)，其中 t 指向树根。

1
public SearchTree insert( SearchTree tree, int val) {
2
    if (tree == null) {
3
        tree = new SearchTree(val);
4
    } else if (val > tree.data) {
5
        tree.right = insert(tree.right, val);
6
    } else if (val < tree.data) {
7
        tree.left = insert(tree.left, val);
8
    }
9
  return tree;
10
}

9 > 7 so insert on right
9 > 7，因此向右侧插入。

1
public SearchTree insert( SearchTree tree, int val) {
2
    if (tree == null) {
3
        tree = new SearchTree(val);
4
    } else if (val > tree.data) {
5
        tree.right = insert(tree.right, val);
6
    } else if (val < tree.data) {
7
        tree.left = insert(tree.left, val);
8
    }
9
  return tree;
10
}

Start of recursive call
开始递归调用。

1
public SearchTree insert( SearchTree tree, int val) {
2
    if (tree == null) {
3
        tree = new SearchTree(val);
4
    } else if (val > tree.data) {
5
        tree.right = insert(tree.right, val);
6
    } else if (val < tree.data) {
7
        tree.left = insert(tree.left, val);
8
    }
9
  return tree;
10
}

9 < 12 so insert to left
9 < 12，因此向左侧插入。

1
public SearchTree insert( SearchTree tree, int val) {
2
    if (tree == null) {
3
        tree = new SearchTree(val);
4
    } else if (val > tree.data) {
5
        tree.right = insert(tree.right, val);
6
    } else if (val < tree.data) {
7
        tree.left = insert(tree.left, val);
8
    }
9
  return tree;
10
}

Start of recursive call
开始递归调用。

1
public SearchTree insert( SearchTree tree, int val) {
2
    if (tree == null) {
3
        tree = new SearchTree(val);
4
    } else if (val > tree.data) {
5
        tree.right = insert(tree.right, val);
6
    } else if (val < tree.data) {
7
        tree.left = insert(tree.left, val);
8
    }
9
  return tree;
10
}

9 > 8 so insert to right
9 > 8，因此向右侧插入。

1
public SearchTree insert( SearchTree tree, int val) {
2
    if (tree == null) {
3
        tree = new SearchTree(val);
4
    } else if (val > tree.data) {
5
        tree.right = insert(tree.right, val);
6
    } else if (val < tree.data) {
7
        tree.left = insert(tree.left, val);
8
    }
9
  return tree;
10
}

Start of recursive call
开始递归调用。

1
public SearchTree insert( SearchTree tree, int val) {
2
    if (tree == null) {
3
        tree = new SearchTree(val);
4
    } else if (val > tree.data) {
5
        tree.right = insert(tree.right, val);
6
    } else if (val < tree.data) {
7
        tree.left = insert(tree.left, val);
8
    }
9
  return tree;
10
}

Create a new tree and return it
创建新节点（新树）并返回。

1
public SearchTree insert( SearchTree tree, int val) {
2
    if (tree == null) {
3
        tree = new SearchTree(val);
4
    } else if (val > tree.data) {
5
        tree.right = insert(tree.right, val);
6
    } else if (val < tree.data) {
7
        tree.left = insert(tree.left, val);
8
    }
9
  return tree;
10
}

Return to third invocation of insert() and update right subtree
返回到第三层 insert() 调用，并更新右子树。

1
public SearchTree insert( SearchTree tree, int val) {
2
    if (tree == null) {
3
        tree = new SearchTree(val);
4
    } else if (val > tree.data) {
5
        tree.right = insert(tree.right, val);
6
    } else if (val < tree.data) {
7
        tree.left = insert(tree.left, val);
8
    }
9
  return tree;
10
}

Return to second invocation of insert().
The assignment statement does not change location of left subtree
返回到第二层 insert() 调用。
赋值语句不会改变左子树的位置。

1
public SearchTree insert( SearchTree tree, int val) {
2
    if (tree == null) {
3
        tree = new SearchTree(val);
4
    } else if (val > tree.data) {
5
        tree.right = insert(tree.right, val);
6
    } else if (val < tree.data) {
7
        tree.left = insert(tree.left, val);
8
    }
9
  return tree;
10
}

Return to original statement t=insert(t,9)
The location of tree has not changed, but it has an extra node.
返回最初语句 t=insert(t,9)。
树的根位置未改变，但树中新增了一个节点。

Searching a Search Tree
搜索一个搜索树#

1
public static boolean contains(SearchTree tree, int val) {
2
    if (tree == null) {
3
        return false;
4
    } else if (val > tree.data) {
5
        return contains(tree.right, val);
6
    } else if (val < tree.data) {
7
        return contains(tree.left, val);
8
    } else { // tree.data==val
9
        return true;
10
    }
11
}

Does it use recursive method?
它是否使用了递归方法？

What is the base case?
它的递归基线条件是什么？

Exercise#

Sketch out the tree that would be produced by inserting the values 4, 5, 10, 25, 39 in that order, using the insert method shown earlier.
使用前面给出的 insert 方法，按顺序插入 4、5、10、25、39，画出最终生成的树。
Using the search method shown earlier, how many method calls do you need to make in order to find out whether 39 is in the resulting tree?
使用前面的查找方法，要判断结果树中是否存在 39，需要调用多少次方法？
How many method calls do you need to make to find out whether 100 is in the tree?
若判断 100 是否在树中，需要调用多少次方法？

Special situation with binary search trees
二叉搜索树的特殊情况#

If a tree
is lopsided,
a search can still
take up to n steps,
for a tree with n nodes.
Said to have degenerated into a linked list.
如果一棵树
是偏斜的，
那么查找仍可能
需要最多 n 步，
（对于有 n 个节点的树）。
这种情况称为退化为链表。

Best to make the class contain a tree, not be one
最好让类“包含”一棵树，而不是“本身就是”一棵树#

Make a class BinarySearchTree contain a class Node.
让 BinarySearchTree 类内部“包含” Node 类。
BinarySearchTree can then have as fields:
BinarySearchTree 可包含如下字段：
- root - a Node
  root - 一个节点引用
- numEntries - an integer
  numEntries - 整数计数

A Search Tree class (for integers)
一个搜索树类（用于整数）#

1
public class BinarySearchTree {
2

3
    private class Node {
4
        private int data;
5
        private Node left;
6
        private Node right;
7

8
        public Node(int data) {
9
            this.data = data;
10
        }
11
    }
12

13
    private Node root;
14
    private int numEntries;
15

16
    public BinarySearchTree() {
17
        root = null;
18
        numEntries = 0;
19
    }
20
…

展开收起

Recursive `addNode`
递归版 `addNode`#

1
public Node addNode(Node tree, int val) {
2
    if (tree == null) {
3
        tree = new Node(val);
4
    } else if (val > tree.data) {
5
        tree.right = addNode(tree.right, val);
6
    } else if (val < tree.data) {
7
        tree.left = addNode(tree.left, val);
8
    } // val is already in tree; take action
9
    return tree;
10
}

`BinarySearchTree.insert` using recursive `addNode`
使用递归 `addNode` 的 `BinarySearchTree.insert`#

1
public void insert (int val) {
2
    root = addNode(root, val);
3
    numEntries++;
4
} // BinarySearchTree.insert

Iterative `addNode`
循环版 `addNode`#

1
public void addNode(int key, String name) { // does not use recursive way
2
    Node p, parent;
3
    p = root;
4
    while (p != null && p.key != key) {
5
        parent = p;
6
        if (key < p.key) p = p.left; else p = p.right;
7
    }
8
    if (p == null) {
9
        Node newNode = new Node(key, name);
10
        if (p == root) root = newNode;
11
        else if (p == parent.left) parent.left = newNode;
12
        else parent.right = newNode;
13
        numEntries++;
14
    }
15
    else // p != null - duplicate node detected! Take appropriate action
16
}

展开收起

`BinarySearchTree.insert` using iterative `addNode`
使用循环 `addNode` 的 `BinarySearchTree.insert`#

1
public void insert (int val) {
2
    addNode(val);
3
} // BinarySearchTree.insert

Perfectly balanced trees
完全平衡树#

A perfectly balanced tree with 2(k+1)−12^{(k+1)} - 12(k+1)−1 nodes, will have depth×(height) kdepth \times (height)~kdepth×(height) k so searches take at most kkk steps
对于一个包含 2(k+1)−12^{(k+1)} - 12(k+1)−1 个节点的完全平衡树，其深度（高度）为 kkk，因此查找最多只需 kkk 步。

The depth of a tree defined to be
树的深度定义为：
- the length of the longest path from the root to a leaf,
  从根到叶子最长路径的长度；
- so a tree consisting only of the root node has a depth of 0.
  因此只有根节点的树深度为 0；
- The depth of an empty tree can be taken to be -1.
  空树深度可定义为 -1。

A perfectly balanced tree
一棵完全平衡树

For n nodes, searches take no more than (1+log n)‾\underline{\textcolor{red}{(1 + log~n)}}(1+log n) steps.
对于 n 个节点，查找步数不超过 (1+log n)‾\underline{\textcolor{red}{(1 + log~n)}}(1+log n)。

This is described as a O(log n)\textcolor{red}{O(log~n)}O(log n) algorithm and it is a lot faster than an algorithm with nnn steps, which would be O(n)O(n)O(n).
这被称为 O(log n)\textcolor{red}{O(log~n)}O(log n) 级别算法，明显快于需要 nnn 步的 O(n)O(n)O(n) 算法。

Self-balancing trees
自平衡树#

A balanced tree offers better access time, but re-balancing a tree takes time, so it is a trade-off.
平衡树查询更快，但维护平衡本身也需要成本，这是一种权衡。
This has led to a variety of engineering solutions for self-balancing trees.These include:
因此工程上出现了多种自平衡树方案，包括：
- “AVL” trees: G. M. Adelson-Velskii and E. M. Landis, 1962
  “AVL 树”：G. M. Adelson-Velskii 与 E. M. Landis（1962）
- “Red-black” trees: Rudolf Bayer (1972).
  “红黑树”：Rudolf Bayer（1972）
- “Symmetric binary B-Trees: Data structure and maintenance algorithms”. Acta Informatica. 1 (4): 290-306
  “对称二叉 B 树：数据结构与维护算法”，发表于 Acta Informatica 1(4): 290-306

`TreeMap`#

The provided Java collection class TreeMap implements the interface Map.
Java 提供的集合类 TreeMap 实现了 Map 接口。
It uses a Red-Black tree and offers O(log n)\textcolor{red}{O(log~n)}O(log n) access time.
它基于红黑树，访问复杂度为 O(log n)\textcolor{red}{O(log~n)}O(log n)。
- Note: HashMap can offer O(1)\textcolor{orange}{O(1)}O(1) access time.
  注意：HashMap 访问可达 O(1)\textcolor{orange}{O(1)}O(1) 级别。
But it is possible to iterate through a TreeMap accessing the values in order; this is not possible with a HashMap.
但 TreeMap 可以按有序顺序迭代访问值，而 HashMap 通常无法做到这一点。

Access Time
访问时间#

Searching is faster in a binary search tree, just as binary search in a sorted array is faster than linear search.
在二叉搜索树中查找通常更快，正如有序数组中的二分查找快于线性查找。
There is a trade-off: cost of keeping tree balanced versus cost of searches.
存在权衡：维护平衡的代价与查找代价之间需要取舍。
It is easy to sort numbers using a binary search tree - why and how?
用二叉搜索树做排序很自然，为什么？怎么做？

Requirements#

What you want to achieve by the end of this week’s work:
本周结束时你应达成：
- understand binary trees
  理解二叉树
- understand binary search trees
  理解二叉搜索树
- know the difference!
  明确两者差异
- be able to write recursive functions on trees.
  能在树结构上编写递归函数

Thingking Question

以下二叉树的区别：

完美二叉树（perfect binary tree）

完全二叉树（complete binary tree）

完满二叉树（full binary tree）

Foundations of Security Week5 Lecture

Tue, 07 Apr 2026 00:00:00 GMT

Lecture Outline#

Review of RSA cryptographic algorithm
Public key and Private key generation in RSA
RSA encryption and decryption process
Introduction to Chosen Ciphertext Attack (CCA) on RSA
Understanding how attackers exploit decryption systems

Learning Outcomes#

By the end of this lecture, students should be able to:

Explain the RSA key generation process
Identify the steps for generating public and private keys
Apply the Extended Euclidean Algorithm to compute the private key
Perform RSA encryption and decryption
Explain the concept of chosen ciphertext attacks on RSA

Key Generation#

1. Select Primes	2. Compute nnn	3. Calculate ϕ(n)\phi(n)ϕ(n)	4. Choose eee	5. Compute ddd
Choose two large prime numbers ppp and qqq. These must be kept secret.	Calculate the modulus nnn by multiplying p and q. This is part of both keys.	Compute Euler’s totient function using the formula (p−1)×(q−1)(p-1) \times (q-1)(p−1)×(q−1).	Select public exponent eee where 1<e<ϕ(n)1 < e < \phi(n)1<e<ϕ(n) and gcd⁡(e,ϕ(n))=1\gcd(e, \phi(n)) = 1gcd(e,ϕ(n))=1.	Calculate private exponent ddd as the modular multiplicative inverse of eee.
p,q=primesp, q = primesp,q=primes	n=p×qn = p \times qn=p×q	ϕ(n)=(p−1)(q−1)\phi(n) = (p-1)(q-1)ϕ(n)=(p−1)(q−1)	1<e<ϕ(n)1 < e < \phi(n)1<e<ϕ(n) gcd⁡(e,ϕ(n))=1\gcd(e, \phi(n)) = 1gcd(e,ϕ(n))=1	(d×e)≡1 mod ϕ(n)(d × e) \equiv 1 \bmod \phi(n)(d×e)≡1modϕ(n)

Public Key	Private Key
(n, e)(n,~ e)(n, e) Share freely with anyone	(n, d)(n,~ d)(n, d) Keep secret at all times

Public Key Generation#

Public Keys of Alice#

🤵🏼‍♀️

Alice

Sender

💬 Wants to send a message

Alice needs to encrypt her message
so only Bob can read it.

🔑 Needs a key pair

She must generate public and
private keys for encryption.

📤 Shares public key

Her public key can be shared with
anyone, including Bob.

↔️

Secure Channel

End-to-end encryption

🤵🏻

Bob

Receiver

📩 Wants to receive message

Bob needs to decrypt Alice's message
securely.

🔑 Needs a key pair

He must also generate public and
private keys.

🔒 Keeps private key secret

His private key must never be shared
with anyone.

Public Keys of Alice & Bob#

Both parties generate their public keys simultaneously

👩

Alice

1 Select Prime Numbers

P_A = 61,
Q_A = 53

2 Calculate modulus n

n_A = P_A × Q_A
= 61 × 53 = 3233

3 Choose Public Exponent e

e_A must satisfy:
✓ 1 < e_A < φ(n_A)
✓ gcd(e_A, φ(n_A)) = 1
e_A = 17

Calculate Euler's Totient Function

φ(n_A) = (P_A - 1) × (Q_A - 1)
= (61 - 1) × (53 - 1) = 60 × 52 = 3120

🔑 Alice's Public Key

(n_A = 3233, e_A = 17)

⇄

👨

Bob

1 Select Prime Numbers

P_B = 3,
Q_B = 11

2 Calculate modulus n

n_B = P_B × Q_B
= 3 × 11 = 33

3 Choose Public Exponent e

e_B must satisfy:
✓ 1 < e_B < φ(n_B)
✓ gcd(e_B, φ(n_B)) = 1
e_B = 7

Calculate Euler's Totient Function

φ(n_B) = (P_B - 1) × (Q_B - 1)
= (3 - 1) × (11 - 1) = 2 × 10 = 20

🔑 Bob's Public Key

(n_B = 33, e_B = 7)

Public Keys of Alice#

Mathematical constraints for selecting the public exponent e

Range Constraint

e must be:

1 < e < φ(n)

✓ Greater than 1

✓ Less than φ(n) (Euler's totient)

Why: Ensures e is in the valid multiplicative group

Co-prime Condition

e must be co-prime with φ(n):

gcd(e, φ(n)) = 1

✓ No common factors with φ(n)

✓ Ensures multiplicative inverse exists

Why: Required for the decryption key to exist

Modular Inverse

e × d ≡ 1 (mod φ(n))

Must have a multiplicative inverse d

✓ d is the private key

✓ Found using Extended Euclidean Algorithm

Why: Enables encryption/decryption symmetry

Alice's φ(n)

φ(3233) = 3120

Bob's φ(n)

φ(33) = 20

💡

Formula: φ(n) = (p-1) × (q-1)

Private Key of Alice#

👩

Alice

Private Key Calculation

Public Values

n_A = 3233
e_A = 17

Prime Factors

P_A = 61
Q_A = 53

Calculate Euler's Totient Function

φ(n_A) = (P_A - 1) × (Q_A - 1)
= (61 - 1) × (53 - 1) = 60 × 52 = 3120

Private Key

d_A = 2753

Step-by-Step Calculation

Set Up the Congruence Equation

Find d_A such that:
e_A × d_A ≡ 1 (mod φ(n_A))
17 × d_A ≡ 1 (mod 3120)

Apply Extended Euclidean Algorithm

3120 = 17(183) + 9
17 = 9(1) + 8
9 = 8(1) + 1
8 = 1(8) + 0

Working backwards to find the inverse...

1 = 9 + 8(-1)
1 = 9 + [17 + 9(-1) ] (-1)
1 = 9 + 17 (-1) + 9(1)
1 = 17 (-1) + 9(2)
1 = 17 (-1) + [3120 + 17(-183)](2)

1 = 17 (-1) + [3120(2) + 17(-366)]
1 = 17 (-1) + 3120(2) + 17(-366)
1 = 17 (-367) + 3120(2)

3120 + (-367) = 2753

Solution: Private Key

d_A = 2753

Verification: 17 (2753) = 46801 mod 3120 = 3120(15) + 1 mod 3120 ✓

🔒

Alice's Private Key: dₐ = 2753 (Keep Secret!)

🔑 Used for decrypting messages

Private Key of Bob#

👨

Bob

Private Key Calculation

Public Values

n_B = 33
e_B = 7

Prime Factors

P_B = 3
Q_B = 11

Calculate Euler's Totient Function

φ(n_B) = (P_B - 1) × (Q_B - 1)
= (3 - 1) × (11 - 1) = 2 × 10 = 20

Private Key

d_B = 3

Step-by-Step Calculation

Set Up the Congruence Equation

Find d_B such that:
e_B × d_B ≡ 1 (mod φ(n_B))
7 × d_B ≡ 1 (mod 20)

Apply Extended Euclidean Algorithm

20 = 7(2) + 6
7 = 6(1) + 1
6 = 1(6) + 0

Working backwards to find the inverse...

1 = 7 + 6(-1)
1 = 7 + [20 + 7(-2) ] (-1)
1 = 7 + [20(-1) + 7(2)]
1 = 7(3) + 20(-1)

Solution: Private Key

d_B = 3

Verification: 7 (3) = 21 mod 20 = 1 mod 20 ✓

🔒

Bob's Private Key: d_B = 3 (Keep Secret!)

🔑 Used for decrypting messages

Key Pairs Summary#

👩

Alice

🔓 Public Key SHARE

Modulus n 3233

Exponent e 17

🔒 Private Key SECRET

Exponent d 2753

Prime Factors (Secret)

👨

Bob

🔓 Public Key SHARE

Modulus n 33

Exponent e 7

🔒 Private Key SECRET

Exponent d 3

Prime Factors (Secret)

RSA Encryption & Decryption#

With their key pairs generated, Alice and Bob can now securely exchange encrypted messages. The foundation of RSA encryption is established.

👩

👨

✈️

Alice Encrypts

Using Bob's public key

↔️

Secure Transfer

Encrypted message sent

🔒

Bob Decrypts

Using his private key

Encryption & Decryption#

Encryption and Decryption Process#

🔒

Encryption

The sender uses the recipient's public key (n, e) to encrypt
the plaintext message M into ciphertext C.

Formula:

C = M^e mod n

Ciphertext (encrypted message)

Plaintext message (as number)

Public exponent

Modulus (part of public key)

🔓

Decryption

The recipient uses their private key (n, d) to decrypt the
ciphertext C back into the original plaintext message M.

Formula:

M = C^d mod n

Recovered plaintext message

Ciphertext (encrypted message)

Private exponent (secret)

Modulus (same as public key)

Security Guarantee

Only the holder of the private key d can decrypt the message. Even if an attacker knows the public key (n, e) and intercepts the ciphertext C, they cannot compute d without factoring n into p and q — a computationally infeasible task for large keys.

Encryption and Decryption Process#

👤Alice's Keys

Public Key:

n_A = 3233, e_A = 17

Private Key:

d_A = 2753

👤Bob's Keys

Public Key:

n_B = 33, e_B = 7

Private Key:

d_B = 3

✉️Message to Send

M = 2

🔒Step 1: Encryption (Alice)

Alice uses Bob's public key to encrypt the message:

C = M^e_B mod n_B
C = 2⁷ mod 33
= 128 mod 33
= 29 mod 33

Ciphertext
C = 29

🔓Step 2: Decryption (Bob)

Bob uses his private key to decrypt:

M = C^d_B mod n_B
M = 29³ mod 33
= 24389 mod 33
= 2 mod 33

Recovered Message
M = 2

Quiz#

👤Alice's Keys

Public Key:

n_A = 3233, e_A = 17

Private Key:

d_A = 2753

👤Bob's Keys

Public Key:

n_B = 33, e_B = 7

Private Key:

d_B = 3

✉️Message to Send

M = 5

🔒Step 1: Encryption (Alice)

Alice uses Bob's public key to encrypt the message:

C = M^e_B mod n_B
C = 5⁷ mod 33
= 78125 mod 33
= 14 mod 33

Ciphertext
C = 14

🔓Step 2: Decryption (Bob)

Bob uses his private key to decrypt:

M = C^d_B mod n_B
M = 14³ mod 33
= 2744 mod 33
= 5 mod 33

Recovered Message
M = 5

Chosen Ciphertext Attacks (CCA) on RSA Algorithm#

The Chosen Ciphertext Attack (CCA) on the RSA algorithm is a type of cryptographic attack where the attacker uses the decryption capabilities of a system/users to decrypt messages by choosing a series of ciphertexts and using the results to deduce the plaintext or the encryption key.

Chosen Ciphertext Attack on RSA#

Normal RSA Communication Flow

👩

Alice

Sender

Has Bob's Public Key:

(e_B, n_B)

Message M

→

Encryption
C = M^e_B mod n_B

→

Ciphertext C

☁️ Public Channel (Encrypted)

👨

Bob

Receiver

Has Private Key:

(d_B, n_B)

Encryption

Alice uses Bob's public key to encrypt
message M:

C = 2⁷ mod 33 = 29

Transmission

Ciphertext C travels through the public channel.
Even if intercepted, it's unreadable without the
private key.

Decryption

Bob uses his private key to decrypt:

M = 29³ mod 33 = 2

Public Keys of Alice#

👩

Alice

Sender

Key Generation

P_A = 61, Q_A = 53
n_A = 3233
φ(n_A) = 3120
e_A = 17
d_A = 2753

Has Access To

🔑 Own keys

🌍 Bob's public key

Message to Send

M = 2

👤

Attacker

Adversary

Capabilities

👁️ Intercepts all traffic

📝 Modifies messages

🔑 Knows public keys

Attack Parameters

Chooses: r = 2

(coprime to n_B = 33)

Goal

Recover M without d_B

👨

Bob

Receiver

Key Generation

P_B = 3, Q_B = 11
n_B = 33
φ(n_B) = 20
e_B = 7
d_B = 3

Has Access To

🔑 Own private key

🔓 Alice's public key

Receives

C' = 16

(not the original C)

Attack Setup

Alice wants to send message M=2 to Bob. The attacker intercepts the communication and substitutes ciphertext C with manipulated C’

Chosen Ciphertext Attack on RSA#

Attacker

Intercepts C
Alice's Public
(n_A, e_A)
Bob's Public
(n_B, e_B)

🔒 Step 2: Attacker computes fake message C'

Chooses random: r = 2 (coprime with n_B(33) so it has an inverse)
Compute: C' = (C × r^e_B mod n_B)
= 29 × 2⁷ mod 33
= 16 mod 33
Sends C' to Bob to decrypt:

C' = 16

🔒 Step 4: Attacker computes inverse to retrieve original message

Attacker knows: ResM' = 4 = C'^d_Bmod n_B
= (C×r^e_B)^d_Bmod n_B
Deduce: M' = (M^e_B×r^e_B)^d_Bmod n_B
= (M^e_B×d_Bmod n_B)×(r^e_B×d_Bmod n_B) = M¹×r¹

Compute inverse of r to get M: M¹ × r¹ (r^-1)

Inverse: 2 (r^-1) ≡ 1 mod n_B
= r^-1 = 17

Retrieve M: Res × 17 mod n_B
        = 4 × 17 mod 33
        = 68 mod 33
        = 2

Alice Encrypts

Alice encrypts M=2 using Bob's public key (eB=7, nB=33):

C = M^e_B mod n_B
C = 2⁷ mod 33 = 29

Attacker Intercepts

Attacker captures C=29 and chooses r=2 (coprime to 33):

C' = (C × r^e_B) mod n_B
C' = (29 × 2⁷) mod 33
C' = (29 × 128) mod 33 = 16

Attacker Sends C'

Attacker forwards C' = 16 to Bob instead of the original C = 29

Bob Decrypts C'

Bob decrypts using his private key (dB=3, nB=33):

Res = C'^d_B mod n_B
Res = 16³ mod 33 = 4

Bob Sends Result

Bob sends Res=4 back (thinking it's related to the original message):

Res = 4

Attacker Recovers M

Attacker computes r^-1 mod 33 = 17 using Extended Euclidean Algorithm:

M = Res × r^-1 mod n_B
M = 4 × 17 mod 33
M = 2 ✓

Original Message

M = 2

→

Attacker Recovered

M = 2

✓

Attack Successful!

Assignment#

Assignment: Complete this exercise and submit during seminar class

Alice’s Public key: 𝑛𝐴=3233\textcolor{red}{𝑛_𝐴 = 3233}nA=3233 and 𝑒𝐴=17\textcolor{red}{𝑒_𝐴=17}eA=17 Alice’s Private key: 𝑑𝐴=2753\textcolor{blue}{𝑑_𝐴} = 2753dA=2753	Bob’s Public key: 𝑛B=33\textcolor{red}{𝑛_B = 33}nB=33 and 𝑒B=7\textcolor{red}{𝑒_B = 7}eB=7 Bob’s Private key: 𝑑B=3\textcolor{blue}{𝑑_B} = 3dB=3

Task:
If Alice wants to send the message 𝑀=5\textcolor{blue}{𝑀 = 5}M=5 to Bob, perform the chosen ciphertext attack and retrieve the original message if the attacker chooses random number r=2\textcolor{blue}{r = 2}r=2. Show the following:
Modified Ciphertext (C′): _____________
Bob’s Response: _____________
Attacker’s Recover Process: _____________

Show how you computed your answers.
Only handwritten solutions.
No copy-paste will be accepted.

Security Strength & Key Sizes#

📏 NIST Recommendations for RSA Key Sizes

2048-bit RSA

Security: ~112 bits | Status: Acceptable until 2030

Current Standard

3072-bit RSA

Security: ~128 bits | Status: For beyond 2030

Recommended

4096-bit RSA

Security: Higher | Use: Long-term protection, root CAs

Maximum Security

🛡️ Security Foundation

RSA's security relies on the computational difficulty of factoring
large numbers

Easy: Multiply two 1024-bit primes

Hard: Factor the 2048-bit product

Time: Billions of years with classical computers

⚛ Quantum Computing Threat

RSA is vulnerable to Shor's algorithm, which can factor large numbers
efficiently on a quantum computer. Current estimates:

⚠️ Key Security Principles

✓

Keep private keys absolutely secret

✓

Use minimum 2048-bit keys

✓

Rotate keys periodically

✓

Use secure padding schemes (OAEP)

Applications#

🌐

HTTPS/SSL/TLS

RSA is used in X.509 certificates to secure web
browsing. When you see the padlock icon, RSA
is likely protecting your connection.

Usage: 90%+ of websites

ᝰ.

Digital Signatures

RSA provides authentication and
non-repudiation. Signers cannot deny their
signatures, and recipients can verify authenticity.

Usage: Code signing, document signing

✉️

Email Encryption

Protocols like S/MIME and PGP use RSA to
encrypt emails, ensuring only intended
recipients can read them.

Usage: Secure corporate email

🔄

Secure File Transfer

SFTP, FTPS, and VPNs use RSA for key
exchange and authentication, protecting data
in transit.

Usage: Enterprise file sharing

</>

Software Signing

Developers digitally sign software to prove
authenticity and integrity. Users can verify
software hasn't been tampered with.

Usage: OS updates, app stores

💡

Hybrid Approach

RSA is computationally intensive.
In practice, RSA encrypts symmetric keys
(like AES), which then encrypt large data
efficiently.

Benefit: Best of both worlds

INFO

This week dose have seminar class, which theme is phishing, but teacher didn’t provide seminar material, so no separate seminar article this week.

Recursion and Exploring the Call Stack

Thu, 02 Apr 2026 00:00:00 GMT

Recursion#

Agenda#

The object of this practical is for you to practice the technique of recursion.

Exercise 1 - Calculating Exponents using Recursion#

Raising a number to a power, an exponent, such as yyy to the power 2 (yyy squared), is written with circumflex (^) in some notations and as ** in others. So yyy squared, y2y^2y2, is written y^2 or y ** 2. When we write yny^nyn we mean yyy to the power nnn.

Using the facts that y0=1y^0 = 1y0=1 and yn=y×yn−1y^n = y \times y^{n-1}yn=y×yn−1, for n>0n > 0n>0, write a recursive method (that does not use the ^ operator)

1
public static double power(double y, int n) {
2
// pre: n >= 0
3
// post: the value returned is y^n
4
}

What is the base case of a recursive method? What is the recursive case?

Specifically, what are the base case(s) and recursive case(s) of the code from part (a)?

Exercise 2 - Getting some practice code set up#

Download the supplied code files from the student website and get them up and running as a project as usual. The main file is RecursionPractice.java.

Add the code of the method from Exercise 1, and try it out on various values by inserting into the main method lines such as:

1
System.out.println("2 to the power 5 is " + power(2,5));

Reference Answer

1
public static int power(int y, int n) {
2
  // pre: n >= 0
3
  // post: the value returned is y^n
4
  if (n == 0) {
5
    return 1;
6
  } else {
7
    return y * power(y, n - 1);
8
  }
9
}

Exercise 3 - Chessboard squares#

Write a recursive method, which does not use multiplication , which given a positive integer nnn, calculates how many 1×11 \times 11×1 squares there are on a n×nn \times nn×n chessboard :

1
public static int chessBoardSquares(int n) {
2
// pre: n >= 1
3
// post: the result is the number of squares on an n × n chessboard
4
}

For example, chessBoardSquares(5) should return the value 25. Test your method by adding code like the following to your main method:

1
for (int i = 1; i <= 8; i++) {
2
    System.out.println("chessBoardSquares(i) for i = " + i + " is " + chessBoardSquares(i));
3
}

Hints:

Use recursion on nnn, and have your base case be n=1n = 1n=1.

For the recursive case, draw a n×nn \times nn×n chessboard, and then identify where inside that you can see a (n−1)×(n−1)(n − 1) \times (n − 1)(n−1)×(n−1) chessboard.

See also extra ‘hint’ here:

Reference Answer

Use the fact that an n×nn \times nn×n board has:

all the 1×11 \times 11×1 squares in the first (n−1)×(n−1)(n-1) \times (n-1)(n−1)×(n−1) board, plus
one new row of nnn squares, and
one new column of nnn squares,

but the corner square gets counted twice, so you add 2n−12n-12n−1.

That gives the recursive rule:

f(1)=1,f(n)=f(n−1)+(2n−1)f(1)=1,\qquad f(n)=f(n-1)+(2n-1)f(1)=1,f(n)=f(n−1)+(2n−1)

Since multiplication is not allowed, this works well.

1
public static int chessBoardSquares(int n) {
2
    // pre: n >= 1
3
    // post: the result is the number of 1x1 squares on an n × n chessboard
4
    if (n == 1) {
5
        return 1;
6
    }
7
    return chessBoardSquares(n - 1) + (2 * n - 1);
8
}

Exercise 4 - Array Matching#

Write a recursive method that returns true precisely when the first nnn integers of two given arrays of integers are the same.

1
public static boolean arrayMatch(int n, int[] a, int[] b) {
2
// pre: 0 <= n <= a.length and 0 <= n <= b.length
3
// post: true is returned precisely when the values
4
//   a[0] ... a[n-1] are exactly the same as
5
//   the values b[0] ... b[n-1]
6
}

Test your method with some code such as this in the main method:

1
int[] a = {1, 2, 3, 4, 5, 6};
2
int[] b = {1, 2, 4, 8, 16};
3
for (int i = 1; i <= 5; i++)
4
    System.out.println("arrayMatch(i, a, b) for i = " + i + " is " + arrayMatch(i,a,b));

Hints:

Use recursion on nnn, and have your base case be n=0n = 0n=0

For the recursive case, draw a diagram of the two arrays indicating where the first nnn elements are. Draw also a diagram of the two arrays indicating where the first n−1n-1n−1 elements are. Ask yourself: how can the result from comparing the first n−1n-1n−1 items be used to compare the first nnn items? Look at the difference between the diagrams.

Reference Answer

1
public static boolean arrayMatch(int n, int[] a, int[] b) {
2
  // pre: 0 <= n <= a.length and 0 <= n <= b.length
3
  // post: true is returned precisely when the values
4
  //   a[0] ... a[n-1] are exactly the same as
5
  //   the values b[0] ... b[n-1]
6
  if (n == 0) {
7
    return true;
8
  }
9
  if (a[n - 1] != b[n - 1]) {
10
    return false;
11
  }
12
  return arrayMatch(n - 1, a, b);
13
}

Another answer

1
public static boolean arrayMatch2(int n, int[] a, int[] b) {
2
  if (n == 0) {
3
    return true;
4
  }
5
  return a[n - 1] == b[n - 1] && arrayMatch2(n - 1, a, b);
6
}

Exercise 5 - Triangle numbers#

Write a recursive method, which, given an integer nnn, calculates the sum of the integers from 111 to nnn:

1
public static int triangle(int n) {
2
// pre: n >= 1
3
// post: the result is the sum 1 + 2 + ... + n
4
}

Hint: use recursion on nnn, and have your base case be n=1n = 1n=1.

Test your method by some code such as the following in your main method:

1
for (int i = 1; i <= 10; i++)
2
    System.out.println("Triangle number " + i + " is " + triangle(i));

Reference Answer

1
public static int triangleNumber(int i) {
2
  // pre: n >= 1
3
  // post: the result is the sum 1 + 2 + ... + n
4
  if (i == 1) {
5
    return 1;
6
  }
7
  return triangleNumber(i - 1) + i;
8
}

Exercise 6 - Array printing#

Write a recursive method, to print out (using a System.out.println statement) all the contents of an array from positions 000 to n−1n-1n−1:

1
public static void printFirstN(String[] a, int n) {
2
// pre: 0 <= n <= a.length
3
// post: the values a[0] ... a[n-1] are printed on the screen
4
}

Test your method with some code such as the following in the main method:

1
String[] a = {"Red", "Yellow", "Pink", "Green", "Orange"};
2
printFirstN(a, a.length);

Reference Answer

1
public static void printFirstN(String[] a, int n) {
2
  // pre: 0 <= n <= a.length
3
  // post: the values a[0] ... a[n-1] are printed on the screen
4
  if (n == 0) {
5
    return;
6
  }
7
  printFirstN(a, n - 1);
8
  System.out.println(a[n - 1]);
9
}

Another answer

1
public static void printFirstN2(String[] a, int n) {
2
  if (n != 0) {
3
    System.out.println(a[n - 1]);
4
    printFirstN2(a, n - 1);
5
  }
6
}

Exploring the Call Stack#

Java Visualizer#

Exercise 1#

Go to the java visualizer tool at https://cscircles.cemc.uwaterloo.ca/java_visualize/ then run the example from the lecture slides and observe what happens on the call stack. The code for the relevant methods is:

1
public static void main(String[] args) {
2
    double answer = getAverage(2,3);
3
    System.out.println(answer);
4
}
5

6
public static double getAverage(double x, double y){
7
    double average = getSum(x,y)/2;
8
    return average;
9
}
10

11
public static double getSum(double x, double y) {
12
    double sum = x+y;
13
    return sum;
14
}

Exercise 2#

Use the visualizer tool to run the ‘reverse’ example from the lecture slides. The code for the reverse method is:

1
public static void reverse(ArrayList<String> a) {
2
    if (a.size() > 1) {
3
        String s = a.remove(0);
4
        reverse(a);
5
        a.add(s);
6
    }
7
}

You will need to create a main method that creates an ArrayList, adds some values to it, and then calls the reverse method. You will also need to import java.util.ArrayList.

1
import java.util.ArrayList;
2

3
public class ReverseArrayListDemo {
4
    // 递归反转ArrayList<String>的核心方法
5
    public static void reverse(ArrayList<String> a) {
6
        if (a.size() > 1) {
7
            // 移除并获取第一个元素
8
            String s = a.remove(0);
9
            // 递归反转剩余元素
10
            reverse(a);
11
            // 将移除的元素添加到列表末尾
12
            a.add(s);
13
        }
14
    }
15

16
    // 主方法：测试反转逻辑
17
    public static void main(String[] args) {
18
        // 1. 创建并初始化ArrayList
19
        ArrayList<String> list = new ArrayList<>();
20
        list.add("A");
21
        list.add("B");
22
        list.add("C");
23
        list.add("D");
24

25
        // 2. 输出反转前的列表
26
        System.out.println("反转前: " + list);
27

28
        // 3. 调用递归反转方法
29
        reverse(list);
30

31
        // 4. 输出反转后的列表
32
        System.out.println("反转后: " + list);
33
    }
34
}

展开收起

Exercise 3#

Make a Java project from the source file Anagram.java and run it with some short strings as parameter. Using the visualizer or otherwise try to understand how the recursion is working.

src/anagrams/Anagrams.java展开收起

1
package anagrams;
2
import java.util.*;
3
public class Anagrams {
4
    private static void recursivePermute(char[] sa, int start) {
5
        int len = sa.length;
6
        if (start == len) System.out.println(sa);
7
        else {
8
            for (int i = start; i < len; i++) {
9
                char temp = sa[start];
10
                sa[start] = sa[i];
11
                sa[i] = temp;
12
                recursivePermute(sa, start + 1);
13
                sa[i] = sa[start];
14
                sa[start] = temp;
15
            } // for
16
        } // if
17
    } // recursivePermute
18

19
    private static void permuteString(String s) {
20
        char[] sa = new char[s.length()];
21
        for (int i = 0; i < s.length(); i++) sa[i] = s.charAt(i);
22
        recursivePermute(sa, 0);
23
    }
24

25
    public static void main(String[] args) {
26
        System.out.print("String to permute? ");
27
        Scanner keyboard = new Scanner(System.in);
28
        String initial = keyboard.next();
29
        permuteString(initial);
30
    }
31
}

展开收起

Exercise 4#

Make a Java project from the source file EightQuuens.java and run it. Using the visualizer or otherwise try to understand how the recursion is working.

src/eightQueens/EightQueens.java展开收起

1
package eightQueens;
2
/**
3
 * from Algorithms and Data Structures page 97
4
 * © N. Wirth 1985 (Oberon version: August 2004)
5
 * Translated into Java and corrected
6
 */
7
public class EightQueens {
8
    static int[] x = new int[8];
9
    static boolean[] a = new boolean[8];
10
    static boolean[] b = new boolean[15];
11
    static boolean[] c = new boolean[15];
12
    // x[i] is position of queen in i th column
13
    // a[j] means "no queen lies on j th row"
14
    // b[k] means "no queen occupies k th /-diagonal"
15
    // c[k] means "no queen occupies k th \-diagonal"
16
    // in /-diagonal k is i+j
17
    // in \-diagonal k is i-j+7
18

19
    public static void writeIt() {
20
        for (int k = 0; k <= 7; k++) {
21
            System.out.print(" " + x[k]);
22
        }
23
        System.out.println();
24
    } // end writeIt
25

26
    public static void tryIt(int i) {
27
        for (int j = 0; j <= 7; j++) { // corrected from Oberon version
28
            if (a[j] && b[i + j] && c[i - j + 7]) {
29
                x[i] = j;
30
                a[j] = false; b[i + j] = false; c[i - j + 7] = false;
31
                if (i < 7)
32
                    tryIt(i + 1);
33
                 else
34
                    writeIt();
35
                a[j] = true; b[i + j] = true; c[i - j + 7] = true;
36
            }
37
        }
38
    } // end tryIt
39

40
    public static void main(String[] args) {
41
        for (int i = 0; i <= 7; i++) a[i] = true;
42
        for (int i = 0; i <= 14; i++) {
43
            b[i] = true; c[i] = true;
44
        }
45
        tryIt(0);
46
    }
47
}

展开收起

Exercise 5#

Make a Java project from the source file Ackermann.java and run it. Using the visualizer or otherwise try to understand how the recursion is working.

src/ackermann/Ackermann.java展开收起

1
package ackermann;
2
public class Ackermann {
3
    public static int A (int m, int n){
4
    System.out.println("Calling A, m = " + m + " n = " + n);
5
    int result = 0;
6
    if (m == 0) result = n + 1;
7
    else if (m > 0 && n == 0) result = A(m-1, 1);
8
    else if (m > 0 && n > 0) result = A(m-1, A(m, n-1));
9
    System.out.println("Returning " + result);
10
    return result;
11
}
12

13
    public static void main(String[] args) {
14
        System.out.println(A(4, 2));
15
    }
16
}

展开收起

CAUTION

Highly explosive! Use very small values for mmm and nnn only.

Bonus: Hanoi#

1
public class Hanoi {
2
    public static void hanoi(int n, String from, String to, String via) {
3
        if (n == 1) {
4
            System.out.println("Move disk from " + from + " to " + to);
5
        } else {
6
            hanoi(n - 1, from, via, to);
7
            System.out.println("Move disk from " + from + " to " + to);
8
            hanoi(n - 1, via, to, from);
9
        }
10
    }
11

12
    public static void main(String[] args) {
13
        int n = 3; // number of disks
14
        hanoi(n, "A", "C", "B");
15
    }
16
}

展开收起

Foundations of Security Week4 Seminar: SQL Injection (2)

Thu, 02 Apr 2026 00:00:00 GMT

SQL Injection (2)#

Objective#

To demonstrate and test the effectiveness of Tautology-Based SQL Injection in extracting data from a vulnerable database by manipulating SQL queries to always evaluate as true.

Setup#

Tautology Based Injection#

Using logical operations that always return true to manipulate query logic.

1
SELECT * FROM users WHERE username='anything' OR '1'='1';

This injection uses a tautology ('1'='1' is always true) to bypass authentication logic and can potentially retrieve user records.

System query

1
SELECT * FROM students WHERE email = 'useremail' AND password = 'password';

Attacker’s input

Resulting query

1
SELECT * FROM students WHERE email = 'xxxxxx' AND password = '' OR '1'='1';

Task1: Connect to the Wireless Access Point/Router#

Connect to the Wireless Access Point/ Router as provided by the instructor (WiFi Name & Password will be provided)
Open your browser and enter the IP address (will be provided by the instructor) of the Webserver PC in your browser and hit “Enter”
Access the demo web application interface

Task2: Perform a Tautology Based SQL Injection to Extract Data (Retrieve all registered students – friends) from the university portal#

Avoiding Tautology Based SQL Injection#

Use Prepared Statements and Parameterized Queries#

This is one of the most effective defenses against SQL injection. By using prepared statements, the SQL code and the data are bound separately, ensuring that the data is treated only as data and not executable code. Both PDO (PHP Data Objects) and MySQLi in PHP support prepared statements.

Whitelist Input Validation#

Validate and sanitize user inputs to ensure they conform to expected and allowed formats. For example, if a field expects a number, ensure the input is a number. This doesn’t prevent SQL injection by itself but is a good additional layer of defense.

Escape All User Inputs#

If you’re not using prepared statements or stored procedures, escaping user inputs is a must to ensure that special characters in the input don’t lead to malicious SQL being executed.

Avoiding Tautology Based SQL Injection#

dash_b

1
$sql_searchlist = "SELECT * FROM students WHERE Student_Name LIKE '%$std_name%'";
2
// SQL injection prone
3
$result_searchlist = $conn->query($sql_searchlist);
4
if ($result_searchlist->num_rows > 0)
5
{

dash_n

1
$sql_searchlist = "SELECT * FROM students WHERE Student_Name LIKE CONCAT('%', ?, '%')";
2
// Prepare a parameterized SQL statement
3
$sql_searchlist = $conn->prepare($sql_searchlist);
4

5
// Bind the user input to the prepared statement
6
$sql_searchlist->bind_param("s", $std_name);
7

8
// Execute the prepared statement
9
$sql_searchlist->execute();
10

11
// Retrieve the results
12
$result_searchlist = $sql_searchlist->get_result();
13
if ($result_searchlist->num_rows > 0)
14
{

Web Application Development Practical4: DOM

Wed, 01 Apr 2026 00:00:00 GMT

Practical Session 4: DOM#

Copy and paste the following code into an .html file:

1
<html>
2
    <head>
3
        <title>JavaScript Example</title>
4
        <script src="script.js"></script>
5
    </head>
6
    <body>
7
        <div id="block1">
8
            <p>I wanted to be <i>a tree</i></p>
9
            <p>Until that is, <b>I learned..</b></p>
10
        </div>
11
        <div id="block2">
12
            <p><u>I already am one.</u></p>
13
        </div>
14
        <button onClick="change()">Change</button>
15
    </body>
16
</html>

展开收起

Copy and paste the following code into the file script.js in the same directory.

1
"use strict";
2
function change() {
3
    let block = document.getElementById("block1");
4
    for (let x of block-elementsByName("p")) {
5
        for (let y of x.childNodes) {
6
            if(y.nodeType == 3) {
7
                console.log(y.nodeValue);
8
            }
9
        }
10
    }
11
}

Note the following:

The src attribute in the script tag in the above file, to store the script in a separate file from the web page. This is a standard technique when producing web applications.
The for...of syntax used for the for loop in the change() function. This is an abbreviated method to loop through an array. A traditional number-based for loop, ie for (let x = 0 ; x < block.childNodes.length; x++) would also work. Note that for...in does exist in JavaScript but has a different effect; be careful not to confuse the two.
console.log is a preferable way of printing debug information than document.write or window.alert, but the output only appears if the Web Developer console is open in the browser. However, it does have the benefit that objects that are printed to the console can be inspected properly instead of only appearing as placeholder strings.
Every element or node object has a nodeType property. If this is 3, the node holds text, and the text is gotten from the nodeValue property. Remember that in the DOM, text is a separate node from the element that contains the text.

INFO

关于 nodeType 的更多信息可参考：https://developer.mozilla.org/zh-CN/docs/Web/API/Node/nodeType

Load the HTML file above into Chrome, open the Web Developer console, and then click on the “change” button and look at the output.
Modify the loop above so that the outer loop only loops through b elements (while still looping through only those that are inside the div with id block1). The output should be “I learned…”

1
function change2(){
2
    let block = document.getElementById("block1");
3
    for(let x of block.getElementsByTagName("b")){
4
        for(let y of x.childNodes){
5
            if(y.nodeType == 3){
6
                console.log(y.nodeValue);
7
            }
8
        }
9
    }
10
}

Modify the loop again, in a similar way to question 2 so that the output becomes “a tree”.

1
function change3(){
2
    let block = document.getElementById("block1");
3
    for(let x of block.getElementsByTagName("i")){
4
        for(let y of x.childNodes){
5
            if(y.nodeType == 3){
6
                console.log(y.nodeValue);
7
            }
8
        }
9
    }
10
}

Without adding any IDs to the HTML file, modify the script so that the text a tree on the page turns green when the change button is clicked. (You can modify the CSS color of the element by changing its style.color property. This can be set to any string that would be valid in a CSS file - just the string green will work here. Note that the color is stored on the surrounding element, ie the i, not the text.)

1
function change4(){
2
    let block = document.getElementById("block1");
3
    let italic = block.getElementsByTagName("i");
4
    for (let item of italic){
5
        item.style.color = "green";
6
    }
7
}

Modify the program so that clicking “Change” turns all of the text green except “I already am one.” and the button. If you remember how CSS works, you should be able to eliminate the loop from the function!

1
function change5(){
2
    let text_to_green = document.getElementsByTagName("p");
3
    for (let item of text_to_green){
4
        if (item.textContent != "I already am one."){
5
            item.style.color = "green";
6
        }
7
    }
8
}

Cut and paste the following code into an .html file:

1
<html>
2
    <head>
3
        <title>JavaScript Example</title>
4
        <script src="script.js"></script>
5
    </head>
6
    <body>
7
        <table id="order">
8
            <tr>
9
                <th>Type</th><th>Price</th>
10
            </tr>
11
        </table>
12
        <button onClick="add('Burger',10)">Burger</button>
13
        <button onClick="add('Chips',5)">Chips</button>
14
        <button onClick="add('Salad',7)">Salad</button>
15
    </body>
16
</html>

展开收起

And this into the file script.js:

1
"use strict";
2
function add(item, price) {
3
    let table = document.getElementByld("order");
4
    let newRow = document.createElement("tr");
5
    let newCell = document.createElement("td");
6
    letcellText = document.createElement(item);
7
    newCell.appendChild(cellText);
8
    newRow.appendChild(newCell);
9
    table.appendChild(newRow);
10
}

Load this page in Chrome. Click on each of the three buttons to see the effect they have on the page. It may also be a good idea to open the Web Developer sidebar and use the Inspector to see how the model of the page changes each time a button is clicked.
Add another button to the HTML page which adds a Milkshake which costs 2 pounds.

1
<button onclick="add('Milkshake',2)">Milkshake</button>

Modify the add function so that the price is properly added to the table as well as the HTML file and notice the structure that you use to do so: adding an item and price to the .html file and notice the structure that you use to do so.

1
function add(item, price){
2
  let table = document.getElementById("order");
3
  let newRow = document.createElement("tr");
4
  let newCell = document.createElement("td");
5
  let cellText = document.createTextNode(item);
6
  newCell.appendChild(cellText);
7
  newRow.appendChild(newCell);
8
  table.appendChild(newRow);
9

10
  // Create a new cell for the price and append it to the new row
11
  let priceCell = document.createElement("td");
12
  let priceText = document.createTextNode(price);
13
  priceCell.appendChild(priceText);
14
  newRow.appendChild(priceCell);
15
  table.appendChild(newRow);
16
}

展开收起

Add the text: <input type="text" id="total" readonly></input> to the HTML to create a box in which to store the total.
Modify the add function so that it updates the total in the total input box whenever an item is added.

1
function add(item, price){
2
  let table = document.getElementById("order");
3
  let newRow = document.createElement("tr");
4
  let newCell = document.createElement("td");
5
  let cellText = document.createTextNode(item);
6
  newCell.appendChild(cellText);
7
  newRow.appendChild(newCell);
8
  table.appendChild(newRow);
9

10
  // Create a new cell for the price and append it to the new row
11
  let priceCell = document.createElement("td");
12
  let priceText = document.createTextNode(price);
13
  priceCell.appendChild(priceText);
14
  newRow.appendChild(priceCell);
15
  table.appendChild(newRow);
16

17
  // Update the total price, formatting it to 2 decimal places
18
  let total = document.getElementById("total");
19
  total.value = (parseFloat(total.value || 0) + price).toFixed(2);
20
}

展开收起

Tips

You can read and write the contents of an input box by using its value property - eg, in this case, document.getElementByld("total").value.
You can calculate the total in three ways: keep a running total in a JavaScript global variable, read the prices out of the table and recalculate the total every time, or read the previous total from the input box. All of these are viable.
But if you decide to read the prices from the table or the total from the input box, note that they will be strings, and you will need to use parseInt() to turn them back into integers to add them properly.
Note that trying to convert an empty string to a number with parseInt will yield NaN, not 0. You will need to either allow for this possibility or make sure that the total field is initialized to 0.

Modify the add function so that if the item has already been ordered, an alert box (window.alert) appears and the item is not added again.

1
let orderdItems = [];
2
function add(item, price){
3
  if (orderdItems.includes(item)){
4
    alert("You have already ordered this item.");
5
    return;
6
  }
7

8
  let table = document.getElementById("order");
9
  let newRow = document.createElement("tr");
10
  let newCell = document.createElement("td");
11
  let cellText = document.createTextNode(item);
12
  newCell.appendChild(cellText);
13
  newRow.appendChild(newCell);
14
  table.appendChild(newRow);
15

16
  // Create a new cell for the price and append it to the new row
17
  let priceCell = document.createElement("td");
18
  let priceText = document.createTextNode(price);
19
  priceCell.appendChild(priceText);
20
  newRow.appendChild(priceCell);
21
  table.appendChild(newRow);
22

23
  // Update the total price, formatting it to 2 decimal places
24
  let total = document.getElementById("total");
25
  total.value = (parseFloat(total.value || 0) + price).toFixed(2);
26

27
  orderdItems.push(item);
28
}

展开收起

Tip

You can either loop through the contents of the HTML table to check for an existing item, or you can create a global variable holding an array of items on the order and update it as well as the table when items are added. Either way is OK. Looping through the table makes the structure more awkward, but creating a separate array runs the risk of the web page and the array going out of sync.

Modify the table to add an additional column. The additional column should have a Delete button for each item on the order. Your JavaScript code that adds an item to the table will need to add the Delete button to each row as well. Do not attempt to make the button do anything, yet.
Add the following line to your code that creates the Delete button:

1
deleteButton.onc11ck = function() {
2
    del(newRow);
3
}

When you add an event handler to an element in JavaScript, although it is legal to use a string as you do in .html, it is a better idea to write an explicit function in this way. This also gives you an additional capability which is used here: newRow is a local variable in add , but if you use it in an event handler created within add , its value at the time you create the event handler is saved and remains stored within the event handler. This allows you to store the element object for the row to be deleted in the event handler to avoid searching for it when the actual deletion takes place. This is called a closure.

Write the del function in JavaScript to delete the row when the button is clicked. (Since the closure gives you a reference to the row to be deleted as a parameter to your del function, all you need to do is call remove() on it. Note that delete is a reserved word in JavaScript. Do not attempt to write a function called delete.)
Modify the del function to also subtract the price of the deleted item from the total. (You can obtain this from the row, or you can store it in the closure as well.)
Modify the program again to store a quantity for each item. It should increase by 1 if a duplicate order is made. Clicking the delete button should reduce the quantity by 1 if more than 1 is ordered, and remove the row only if the quantity is lowered to 0.

Hints

Remember that you are also in control of the HTML for the rows. If it’s becoming difficult to find data inside them, generate them with data- attributes or class attributes to help you find the data you need.
You can make the quantity field a regular text field if you want, but you could also place a randomly input element in it to make it easier to update.
You can’t update the values stored in closures.

1
let orderdItems = {};
2
function add(item, price){
3
  if (orderdItems[item]){
4
    orderdItems[item]++;
5
    let quantityCell = document.getElementById(item + "-quantity");
6
    quantityCell.textContent = orderdItems[item];
7
    let priceCell = document.getElementById(item + "-price");
8
    priceCell.textContent = (orderdItems[item] * price).toFixed(2);
9
  } else {
10
    let table = document.getElementById("order");
11
    let newRow = document.createElement("tr");
12
    let newCell = document.createElement("td");
13
    let cellText = document.createTextNode(item);
14
    newCell.id = item;
15
    newCell.appendChild(cellText);
16
    newRow.appendChild(newCell);
17
    table.appendChild(newRow);
18

19
    orderdItems[item] = 1;
20

21
    let quantityCell = document.createElement("td");
22
    quantityCell.id = item + "-quantity";
23
    quantityCell.textContent = "1";
24
    newRow.appendChild(quantityCell);
25
    table.appendChild(newRow);
26
    let priceCell = document.createElement("td");
27
    priceCell.id = item + "-price";
28
    priceCell.textContent = price.toFixed(2);
29
    newRow.appendChild(priceCell);
30
    table.appendChild(newRow);
31

32
    // Add a delete button to the new row
33
    let deleteCell = document.createElement("td");
34
    let deleteButton = document.createElement("button");
35
    deleteButton.textContent = "Delete one";
36
    deleteButton.onclick = function() {
37
      deleteOneItem(item, price);
38
    };
39
    let deleteAllButton = document.createElement("button");
40
    deleteAllButton.textContent = "Delete all";
41
    deleteAllButton.onclick = function() {
42
      deleteAllItems(item, price);
43
    };
44
    deleteCell.appendChild(deleteButton);
45
    deleteCell.appendChild(deleteAllButton);
46
    newRow.appendChild(deleteCell);
47
    table.appendChild(newRow);
48
  }
49
  // Update the total price, formatting it to 2 decimal places
50
  let total = document.getElementById("total");
51
  total.value = (parseFloat(total.value || 0) + price).toFixed(2);
52
}
53
function deleteOneItem(item, price) {
54
  let quantityCell = document.getElementById(item + "-quantity");
55
  if (!quantityCell) return;
56

57
  let qty = parseInt(quantityCell.textContent, 10);
58
  if (isNaN(qty) || qty <= 0) return;
59

60
  qty -= 1;
61

62
  if (qty > 0) {
63
    orderdItems[item] = qty;
64
    quantityCell.textContent = qty;
65
    let priceCell = document.getElementById(item + "-price");
66
    if (priceCell) {
67
      priceCell.textContent = (qty * price).toFixed(2);
68
    }
69
  } else {
70
    let row = quantityCell.parentNode;
71
    if (row && row.parentNode) {
72
      row.parentNode.removeChild(row);
73
    }
74
    delete orderdItems[item];
75
  }
76

77
  let total = document.getElementById("total");
78
  total.value = (parseFloat(total.value || 0) - price).toFixed(2);
79
}
80
function deleteAllItems(item, price){
81
  let table = document.getElementById("order");
82
  let targetItem = document.getElementById(item);
83
  if (targetItem && targetItem.parentNode && table) {
84
    table.removeChild(targetItem.parentNode);
85
  }
86
  let total = document.getElementById("total");
87
  let curQty = orderdItems[item] || 0;
88
  total.value = (parseFloat(total.value || 0) - curQty * price).toFixed(2);
89
  delete orderdItems[item];
90
}

展开收起

Foundations of Security Week4 Lecture

Tue, 31 Mar 2026 00:00:00 GMT

Lecture Outline#

Review of the Extended Euclidean Algorithm
Expressing the GCD as a linear combination
Modular multiplicative inverse
Introduction to the Chinese Remainder Theorem (CRT)
Introduction to the RSA cryptographic algorithm

Learning Outcomes#

By the end of this lecture, students should be able to:

Understand the purpose of the Extended Euclidean Algorithm
Express the GCD as a linear combination
Compute modular multiplicative inverses
Identify when a multiplicative inverse exists
Solve simultaneous congruence equations using CRT
Perform the basic RSA Key Generation

Extended Euclidean Algorithm (Review)#

The Extended Euclidean Algorithm is an algorithm to compute integers 𝑥 and 𝑦 such that. ax+b𝑦=gcd⁡(a,b)a\textcolor{red}{x} + b\textcolor{red}{𝑦} = \gcd(a, b)ax+by=gcd(a,b) By reversing the steps in the Euclidean algorithm, it is possible to find these integers 𝑥 and 𝑦.

Example:

Find gcd⁡(12,34)\gcd(12, 34)gcd(12,34) and Express it as a Linear Combination

Solution:

34=12(2)+1012=10(1)+210=2(5)+02=12+10(−1)=12+[34+12(−2)](−1)=12+34(−1)+12(2)=12(3)+34(−1)\begin{array}{l} \begin{aligned} 34 &= 12(2) + 10 \\ 12 &= 10(1) + 2 \\ 10 &= 2(5) + 0 \end{aligned} \end{array} \qquad\qquad \begin{array}{l} \begin{aligned} 2 &= 12 + 10(-1) \\ &= 12 + [34+12(-2)](-1) \\ &= 12 + 34(-1) + 12(2) \\ &= 12(3) + 34(-1) \end{aligned} \end{array}341210=12(2)+10=10(1)+2=2(5)+02=12+10(−1)=12+[34+12(−2)](−1)=12+34(−1)+12(2)=12(3)+34(−1)

Hence, the coefficients are x=3\textcolor{red}{x=3}x=3 and 𝑦=−1\textcolor{red}{𝑦=−1}y=−1. This process allows you to find 𝑥 and 𝑦 such that 12x+34𝑦=gcd⁡(12,34)\textcolor{red}{12x + 34𝑦 = \gcd(12,34)}12x+34y=gcd(12,34)

Example:

Find gcd⁡(93,219)\gcd(93, 219)gcd(93,219) and Express it as a Linear Combination

Solution:

219=93(2)+3393=33(2)+2733=27(1)+627=6(4)+36=3(2)+03=27+6(−4)=27+[33+27(−1)](−4)=27+33(−4)+27(4)=33(−4)+27(5)=33(−4)+[93+33(−2)](5)=33(−4)+93(5)+33(−10)=33(−14)+93(5)=[219+93(−2)](−14)+93(5)=219(−14)+93(28)+93(5)=93(33)+219(−14)\begin{array}{l} \begin{aligned} 219 &= 93(2) + 33 \\ 93 &= 33(2) + 27 \\ 33 &= 27(1) + 6 \\ 27 &= 6(4) + 3 \\ 6 &= 3(2) + 0 \end{aligned} \end{array} \qquad\qquad \begin{array}{l} \begin{aligned} 3 &= 27 \textcolor{blue}{+} 6(-4) \\ &= 27 \textcolor{blue}{+} \textcolor{red}{[}33+27(-1)\textcolor{red}{]}(-4) \\ &= 27 \textcolor{blue}{+} 33(-4) + 27(4) \\ &= 33(-4) \textcolor{blue}{+} 27(5) \\ &= 33(-4) \textcolor{blue}{+} \textcolor{red}{[}93+33(-2)\textcolor{red}{]}(5) \\ &= 33(-4) \textcolor{blue}{+} 93(5) + 33(-10) \\ &= 33(-14) \textcolor{blue}{+} 93(5) \\ &= \textcolor{red}{[}219 + 93(-2)\textcolor{red}{]}(-14) \textcolor{blue}{+} 93(5) \\ &= 219(-14) + 93(28) \textcolor{blue}{+} 93(5) \\ &= 93(33) \textcolor{blue}{+} 219(-14) \end{aligned} \end{array}2199333276=93(2)+33=33(2)+27=27(1)+6=6(4)+3=3(2)+03=27+6(−4)=27+[33+27(−1)](−4)=27+33(−4)+27(4)=33(−4)+27(5)=33(−4)+[93+33(−2)](5)=33(−4)+93(5)+33(−10)=33(−14)+93(5)=[219+93(−2)](−14)+93(5)=219(−14)+93(28)+93(5)=93(33)+219(−14)

Hence, the coefficients are x=33\textcolor{red}{x=33}x=33 and 𝑦=−14\textcolor{red}{𝑦=−14}y=−14.
This process allows you to find 𝑥 and 𝑦 such that 93x+219𝑦=gcd⁡(93,219)=3\textcolor{red}{93x + 219𝑦 = \gcd(93, 219) = 3}93x+219y=gcd(93,219)=3

Assignment: Complete these exercises and submit during seminar class

Find the gcd and Express them as Linear Combinations:

gcd⁡(120,35)\gcd(120, 35)gcd(120,35)
gcd⁡(145,252)\gcd(145, 252)gcd(145,252)
gcd⁡(100,240)\gcd(100, 240)gcd(100,240)

Show how you computed your answers.
Only handwritten solutions.
No copy-paste will be accepted.

Modular Multiplicative Inverse#

The modular multiplicative inverse of an integer a\textcolor{blue}{a}a modulo m\textcolor{blue}{m}m is an integer x\textcolor{blue}{x}x such that the product ax is congruent to 1 modulo m.

ax≡1 mod m\textcolor{red}{a}x\textcolor{red}{\equiv1 \bmod m}ax≡1modm

Here 𝑥 is the multiplicative inverse of aaa, and we can also write the above equation as

a mod m=1 mod m⇒ax mod m=1\textcolor{red}{a \bmod m} = \textcolor{red}{1 \bmod m} \Rightarrow \textcolor{red}{a}x \textcolor{red}{\bmod m} = \textcolor{red}{1}amodm=1modm⇒axmodm=1

The existence of such an x\textcolor{blue}{x}x depends on a\textcolor{red}{a}a and m\textcolor{red}{m}m being coprime, i.e., gcd⁡(a,m)=1\gcd(a,m)=1gcd(a,m)=1. Otherwise we can say that there is no multiplicative inverse.

Example:

Find a number 𝑥 such that: 3x≡1 ( mod 12)3x \equiv 1~(\bmod 12)3x≡1 (mod12)

Trail and Error Method#

3×1 mod 17=33×2 mod 17=63×3 mod 17=93×4 mod 17=123×5 mod 17=153×6 mod 17=1\begin{aligned} 3 \times 1 \bmod 17 &= 3 \\ 3 \times 2 \bmod 17 &= 6 \\ 3 \times 3 \bmod 17 &= 9 \\ 3 \times 4 \bmod 17 &= 12 \\ 3 \times 5 \bmod 17 &= 15 \\ 3 \times 6 \bmod 17 &= \textcolor{red}{1} \end{aligned}3×1mod173×2mod173×3mod173×4mod173×5mod173×6mod17=3=6=9=12=15=1

Here the value of x=6\textcolor{red}{x = 6}x=6. This method is very difficult when the number is very large.

Extended Euclidean Algorithm Method#

gcd⁡(3,17)17=3(5)+23=2(1)+12=1(2)+01=3+2(−1)=3+[17+3(−5)](−1)=3+17(−1)+3(5)=3(6)+17(−1)ax+by=gcd⁡(a,b)3x+17y=1⇒x=6\begin{array}{l} \begin{aligned} \gcd&(3, 17) \\ 17 &= 3(5) + 2 \\ 3 &= 2(1) + 1 \\ 2 &= 1(2) + 0 \end{aligned} \end{array} \qquad\qquad \begin{array}{l} \begin{aligned} 1 &= 3 + 2(-1) \\ &= 3 + [17+3(-5)](-1) \\ &= 3 + 17(-1) + 3(5) \\ &= 3(\textcolor{red}{6}) + 17(\textcolor{red}{-1}) \\ \\ &a\textcolor{red}{x} + b\textcolor{red}{y} = \gcd(a, b) \\ &3\textcolor{red}{x} + 17\textcolor{red}{y} = 1 \\ &\Rightarrow \textcolor{red}{x = 6} \end{aligned} \end{array}gcd1732(3,17)=3(5)+2=2(1)+1=1(2)+01=3+2(−1)=3+[17+3(−5)](−1)=3+17(−1)+3(5)=3(6)+17(−1)ax+by=gcd(a,b)3x+17y=1⇒x=6

Here x=6\textcolor{red}{x = 6}x=6 is the multiplicative inverse

Example:

Find a number 𝑥 such that: 35x≡1 ( mod 8)35x\equiv1~(\bmod 8)35x≡1 (mod8)

Another Approach#

We can write 35x mod 8=1 mod 835\textcolor{red}{x} \bmod 8 = \textcolor{purple}{1 \bmod 8}35xmod8=1mod8

(a×b) mod n=[(a mod n)×(b mod n)] mod n(35×x) mod 8=[(35 mod 8)×(x mod 8)] mod 835x mod 8=[(3×x) mod 8]35x mod 8=3x mod 8=1 mod 8\begin{aligned} \textcolor{blue}{(a \times b) \bmod n} &\textcolor{blue}{=} \textcolor{blue}{[(a \bmod n) \times (b \bmod n)] \bmod n} \\ (35 \times \textcolor{red}{x}) \bmod 8 &\textcolor{red}{=} [(35 \bmod 8) \times (\textcolor{red}{x} \bmod 8)] \bmod 8 \\ 35\textcolor{red}{x} \bmod 8 &\textcolor{red}{=} [(3 \times \textcolor{red}{x}) \bmod 8] \\ 35\textcolor{red}{x} \bmod 8 &\textcolor{red}{=} \textcolor{blue}{3\textcolor{red}{x} \bmod 8} \textcolor{purple}{ =1 \bmod 8} \end{aligned}(a×b)modn(35×x)mod835xmod835xmod8=[(amodn)×(bmodn)]modn=[(35mod8)×(xmod8)]mod8=[(3×x)mod8]=3xmod8=1mod83x mod 8=1 mod 83x mod 8=1 mod 83×3 mod 8=1\begin{aligned} 3\textcolor{red}{x} \bmod 8 &= 1 \bmod 8 \\ 3\textcolor{red}{x} \bmod 8 &= 1 \bmod 8 \\ 3 \times 3 \bmod 8 &= 1 \\ \end{aligned}3xmod83xmod83×3mod8=1mod8=1mod8=1

Therefore, x=3\textcolor{blue}{x = 3}x=3 is the multiplicative inverse.

Check
35×3 mod 8=135 \times 3 \bmod 8 = 135×3mod8=1
105 mod 8=1105 \bmod 8 = 1105mod8=1

Example:

Find a number 𝑥 such that:

40x≡1 mod 740x \equiv 1 \bmod 740x≡1mod7
20x≡1 mod 320x \equiv 1 \bmod 320x≡1mod3

Waiting…

Application#

The modular multiplicative inverse is crucial in various fields, including cryptography, where it’s used in algorithms like RSA for public key encryption and decryption.

Chinese Remainder Theorem#

The Chinese Remainder Theorem (CRT) is a powerful tool in number theory and discrete mathematics that allows you to solve a system of simultaneous linear congruences with different moduli, under the condition that the moduli are pairwise coprime (i.e., the gcd of each pair of moduli is 1).

Assume we have a system of equations:

x≡a1 ( mod m1)x≡a2 ( mod m2).................x≡a𝑘 ( mod m𝑘)\begin{aligned} x &\equiv a_1 ~(\bmod m_1) \\ x &\equiv a_2 ~(\bmod m_2) \\ ..&............... \\ x &\equiv a_𝑘 ~(\bmod m_𝑘) \end{aligned}xx..x≡a1 (modm1)≡a2 (modm2)...............≡ak (modmk)

Where m1,m2,...,m𝑘\textcolor{blue}{m_1,m_2,...,m_𝑘}m1,m2,...,mk are pairwise coprime. The theorem states that there is a unique solution modulo 𝑀, where 𝑀 is the product of all the moduli (𝑀=m1×m2×...×m𝑘𝑀 = m_1 \times m_2 \times ... \times m_𝑘M=m1×m2×...×mk).

Step-by-Step Method to Find the Solution

Compute 𝑀: 𝑀=m1×m2×...×m𝑘𝑀 = m_1 \times m_2 \times ... \times m_𝑘M=m1×m2×...×mk.
Compute the partial products: For each 𝑖, calculate Mi=MmiM_i=\frac{M}{m_i}Mi=miM .
Find the modular inverses: For each 𝑖, find an integer 𝑦𝑖𝑦_𝑖yi such that 𝑀𝑖𝑦𝑖≡1 ( mod m𝑖)𝑀_𝑖𝑦_𝑖\equiv1~(\bmod m_𝑖)Miyi≡1 (modmi). This 𝑦𝑖𝑦_𝑖yi is the modular inverse of 𝑀𝑖𝑀_𝑖Mi modulo m𝑖m_𝑖mi.
Calculate the solution: The solution 𝑥 can be found as follows:

x=(a1𝑀1𝑦1+a2𝑀2𝑦2+...+a𝑘𝑀𝑘𝑦𝑘) mod 𝑀\textcolor{red}{x = (a_1𝑀_1𝑦_1} + \textcolor{red}{a_2𝑀_2𝑦_2} + \textcolor{red}{...} + \textcolor{red}{a_𝑘𝑀_𝑘𝑦_𝑘)\bmod𝑀}x=(a1M1y1+a2M2y2+...+akMkyk)modM

Example

Let’s solve the system:

x≡2 ( mod 3)x≡3 ( mod 5)x≡2 ( mod 7)\begin{aligned} x&\equiv2~(\bmod 3) \\ x&\equiv3~(\bmod 5) \\ x&\equiv2~(\bmod 7) \\ \end{aligned}xxx≡2 (mod3)≡3 (mod5)≡2 (mod7)

Step 1: Compute 𝑀: 𝑀=m1×m2×m3\textcolor{blue}{𝑀 = m_1 \times m_2 \times m_3}M=m1×m2×m3. 𝑀=3×5×7=105\textcolor{blue}{𝑀 =} 3 \times 5 \times 7 \textcolor{blue}{=} 105M=3×5×7=105

Step 2: Compute the partial product Mi=MmiM_i=\frac{M}{m_i}Mi=miM

M1=Mm1=1053=35M2=Mm2=1055=21M3=Mm3=1057=15\begin{aligned} M_1 &= \frac{M}{m_1} = \frac{105}{3} = \textcolor{red}{35} \\ M_2 &= \frac{M}{m_2} = \frac{105}{5} = \textcolor{red}{21} \\ M_3 &= \frac{M}{m_3} = \frac{105}{7} = \textcolor{red}{15} \end{aligned}M1M2M3=m1M=3105=35=m2M=5105=21=m3M=7105=15

Step 3: Find the modular inverses.

Find 𝑦1\textcolor{red}{𝑦_1}y1 such that 35𝑦1≡1 ( mod 3)\textcolor{blue}{35\textcolor{red}{𝑦_1}\equiv1~(\bmod3)}35y1≡1 (mod3)
y1=2\textcolor{red}{y_1}=\textcolor{red}{2}y1=2 works because
35×2=70≡1 ( mod 3)35 \times 2 = 70 \equiv 1~(\bmod 3)35×2=70≡1 (mod3)
Find 𝑦2\textcolor{red}{𝑦_2}y2 such that 21𝑦2≡1 ( mod 5)\textcolor{blue}{21\textcolor{red}{𝑦_2}\equiv1~(\bmod5)}21y2≡1 (mod5)
y2=1\textcolor{red}{y_2}=\textcolor{red}{1}y2=1 works because
21×1=21≡1 ( mod 5)21 \times 1 = 21 \equiv 1~(\bmod 5)21×1=21≡1 (mod5)
Find 𝑦3\textcolor{red}{𝑦_3}y3 such that 15𝑦3≡1 ( mod 7)\textcolor{blue}{15\textcolor{red}{𝑦_3}\equiv1~(\bmod7)}15y3≡1 (mod7)
y3=1\textcolor{red}{y_3}=\textcolor{red}{1}y3=1 works because
15×1=15≡1 ( mod 7)15 \times 1 = 15 \equiv 1~(\bmod 7)15×1=15≡1 (mod7)

Step 4: Calculate the solution.

x=(a1M1y1+a2M2y2+…+akMkyk) mod Mx=(2×35×2+3×21×1+2×15×1) mod 105x=(140+63+30) mod 105x=233 mod 105x=23\begin{aligned} \textcolor{red}{x} &\textcolor{red}{=} \left( \textcolor{purple}{a_1}\textcolor{red}{M_1y_1} + \textcolor{purple}{a_2}\textcolor{red}{M_2y_2} + \textcolor{red}{\dots} + \textcolor{purple}{a_k}\textcolor{red}{M_ky_k} \right) \bmod \textcolor{red}{M} \\ \textcolor{red}{x} &\textcolor{red}{=} \left( \textcolor{purple}{2} \times \textcolor{red}{35} \times \textcolor{red}{2} + \textcolor{purple}{3} \times \textcolor{red}{21} \times \textcolor{red}{1} + \textcolor{purple}{2} \times \textcolor{red}{15} \times \textcolor{red}{1} \right) \bmod \textcolor{red}{105} \\ \textcolor{red}{x} &\textcolor{red}{=} \left( \textcolor{red}{140} + \textcolor{red}{63} + \textcolor{red}{30} \right) \bmod \textcolor{red}{105} \\ \textcolor{red}{x} &\textcolor{red}{=} \textcolor{red}{233} \bmod \textcolor{red}{105} \\ \textcolor{red}{x} &\textcolor{red}{=} \textcolor{red}{23} \end{aligned}xxxxx=(a1M1y1+a2M2y2+…+akMkyk)modM=(2×35×2+3×21×1+2×15×1)mod105=(140+63+30)mod105=233mod105=23

Thus, x=23x = \textcolor{red}{23}x=23 is the unique solution that satisfies all the original congruences.

Assignment: Complete this exercise and submit during seminar class

Determine the value of 𝑥 using the Chinese Remainder Theorem

x≡3 ( mod 5)x≡1 ( mod 7)x≡6 ( mod 8)\begin{aligned} x&\equiv3~(\bmod 5) \\ x&\equiv1~(\bmod 7) \\ x&\equiv6~(\bmod 8) \\ \end{aligned}xxx≡3 (mod5)≡1 (mod7)≡6 (mod8)

Show how you computed your answers.
Only handwritten solutions.
No copy-paste will be accepted.

RSA Algorithm#

The RSA algorithm is a widely used public key cryptography system that enables secure data transmission.

Named after its inventors Rivest, Shamir, and Adleman, RSA is based on the practical difficulty of factoring the product of two large prime numbers, a problem known as integer factorization.

How RSA Works#

Key Generation:

Choose two large prime numbers, p\textcolor{blue}{p}p and q\textcolor{blue}{q}q.
Calculate n: n = p × q. This n is used as the modulus for both the public and private keys.
Calculate the totient function, ϕ(n)=(p−1)×(q−1)\textcolor{blue}{\phi(n)=(p−1)×(q−1)}ϕ(n)=(p−1)×(q−1).
Choose an integer e\textcolor{blue}{e}e such that 1<e<ϕ(n)1<e<\phi(n)1<e<ϕ(n) and e\textcolor{red}{e}e is coprime to ϕ(n)\textcolor{red}{\phi(n)}ϕ(n); e\textcolor{blue}{e}e is the public exponent.
Determine d\textcolor{green}{d}d as the modular multiplicative inverse of eee modulo ϕ(n)\phi(n)ϕ(n). This means ddd is the number such that (d×e) mod ϕ(n)=1(d×e)\bmod\phi(n)=1(d×e)modϕ(n)=1. d\textcolor{green}{d}d is the private exponent.

Encryption:
Given a plaintext message 𝑀\textcolor{blue}{𝑀}M, the ciphertext 𝐶\textcolor{blue}{𝐶}C is computed as:

𝐶=𝑀e mod n\textcolor{red}{𝐶=𝑀e \bmod n}C=Memodn

Decryption:
To retrieve the plaintext 𝑀\textcolor{blue}{𝑀}M from the ciphertext 𝐶\textcolor{blue}{𝐶}C, use the private key d\textcolor{blue}{d}d:

𝑀=𝐶d mod n\textcolor{green}{𝑀=𝐶d \bmod n}M=Cdmodn

Example

Choose two prime numbers:

Let p=11\textcolor{blue}{p=11}p=11 and q=3\textcolor{blue}{q=3}q=3.

Compute nnn and ϕ(n)\phi(n)ϕ(n):

n=p×q=11×3=33n = p \times q = 11 \times 3 = 33n=p×q=11×3=33
ϕ(n)=(p−1)×(q−1)=10×2=20\phi(n) = (p−1) \times (q−1) = 10 \times 2 = 20ϕ(n)=(p−1)×(q−1)=10×2=20.

Choose eee:

Let e=7\textcolor{blue}{e=7}e=7 (which is coprime to ϕ(n)=20\textcolor{brown}{\phi(n)=20}ϕ(n)=20).

Compute ddd:

d is the modular multiplicative inverse of eee modulo ϕ(n)\phi(n)ϕ(n).

ddd needs to satisfy d×7≡1 ( mod 20)\textcolor{green}{d}\times7\equiv1~(\bmod20)d×7≡1 (mod20) .

By testing values or using extended Euclidean algorithm, we find d=3\textcolor{green}{d=3}d=3 (since 3×7=21≡1 ( mod 20)3\times7=21\equiv1~(\bmod20)3×7=21≡1 (mod20)).

Example

Encryption:Supposethe plaintext M=4C=Me mod nC=47 mod 33C=16384 mod 33C=16Decryption:C=16M=Cd mod nM=163 mod 33M=4096 mod 33M=4\begin{array}{l} \textbf{Encryption}: \\ \begin{aligned} \text{Suppose} &\text{the plaintext } M=4 \\ \textcolor{red}{C} &\textcolor{red}{=} \textcolor{red}{M^e \bmod n} \\ C &= 4^7 \bmod 33 \\ C &= 16384 \bmod 33 \\ C &= \textbf{16} \end{aligned} \end{array} \qquad\qquad \begin{array}{l} \textbf{Decryption}: \\ \begin{aligned} C &= \textbf{16} \\ \textcolor{green}{M} &\textcolor{green}{=} \textcolor{green}{C^d \bmod n} \\ M &= 16^3 \bmod 33 \\ M &= 4096 \bmod 33 \\ M &= \textcolor{green}{\textbf{4}} \end{aligned} \end{array}Encryption:SupposeCCCCthe plaintext M=4=Memodn=47mod33=16384mod33=16Decryption:CMMMM=16=Cdmodn=163mod33=4096mod33=4

Try#

Try: Complete the RSA Encryption Algorithm

Choose two prime numbers:

Let p=61\textcolor{blue}{p=61}p=61 and q=53\textcolor{blue}{q=53}q=53.

Compute nnn and ϕ(n)\phi(n)ϕ(n):

n=p×qn = p \times qn=p×q = …………………………………
ϕ(n)\phi(n)ϕ(n) = …………………………………

Choose eee:

Let e=17\textcolor{blue}{e=17}e=17

Compute ddd: …………………………………

Encryption:
Suppose the plaintext 𝑀=3\textcolor{blue}{𝑀=3}M=3
𝐶𝐶C = …………………………………

Decryption:
𝑀𝑀M = …………………………………

Data Structures and Algorithms Week4: Recursion and Call Stack

Mon, 30 Mar 2026 00:00:00 GMT

Vocabulary

recursion 递归

recursive 递归的

self-referential 自引用

traverse 遍历

Recursion#

Content#

Recursion
- What is recursion
- What it is good for
- When not to use recursion
- Backtracking

Basic concepts about Recursion#

Self-referential (defined in terms of itself)
Natural numbers:
- a) 1 is a natural number
- b) The successor of a natural number is a natural number
Recursion is a programming technique much used in declarative (functional) programming -a different way of getting repetition.

Recursive entertainment#

The movie Inception described one scenario:
Dream in dream

Recursive pattern: Fractals#

Koch snowflake	the Barnsley fern

Shapes made of smaller versions of self	Not a photo, It is generated by a mathematical formula

Recursive description: Ancestor#

An ancestor is:

a) a parent, or
b) a parent’s ancestor

Factorial function#

Factorial 5, written 5!, is:
- 5×4×3×2×15\times4\times3\times2\times15×4×3×2×1
and 6! is
- 6×5×4×3×2×16\times5\times4\times3\times2\times16×5×4×3×2×1, so 6×5!6\times5!6×5!

⬇

Factorial function, for non-negative integers is:

a) 0!=10! = 10!=1
b) if n>0n > 0n>0, then n!=n×(n−1)!n! = n\times(n - 1)!n!=n×(n−1)!

Factorial function in Java#

1
int factorial (int n) {
2
/*  pre: n >= 0
3
    post: factorial(n) = n!  */
4
    if (n == 0) then return 1;
5
    else return n * factorial(n - 1);
6
} /* factorial */

This function has problem:

Caution

inefficient and
factorial(n) > maximum integer probably

Infinite recursion (silly)#

1
void TellStory() {
2
    System.out.println("It was a dark and stormy night");
3
    System.out.println("and the captain said to the mate");
4
    System.out.println(" 'Tell us a story mate' ");
5
    System.out.println("and this is the story he told … ");
6
    TellStory();
7
} /* TellStory */

This function has problem:

Caution

infinite and
lead to stack overflow

Useful recursion#

To be useful the recursion must terminate, so there must be
- at least one non-recursive, base case (in factorial, it is 0!)
- as well as recursive cases.

flowchart LR A[Recursion 递归] --> B[Base case 基准情况] A --> C[Recursive case 递归情况] B --> B1[termination condition] B --> B2[the smallest solution] C --> C1[make the problem smaller] %% 自定义文字颜色 style A color:#0d6efd,font-weight:bold style B color:#dc3545 style C color:#dc3545

Other recursive examples#

A linked list is:
- a) empty, or
- b) has a head (first element)
  and a tail, which is a linked list
A tree is:
- a) empty, or
- b) has a root,
  and left (sub-) tree and right (sub-) tree

A Recursive Class-Linked lists#

1
public class Node {
2
    public String data;
3
    public Node next;
4
    // Here’s the recursive bit! One of the fields of Node is another Node
5
    public Node(String data) {
6
        this.data = data;
7
    }
8
}

1
public static void main(String[] args) {
2
    Node n1 = new Node("Have");
3
    Node n2 = new Node("a");
4
    n1.next = n2;
5
    Node n3 = new Node("banana");
6
    n2.next = n3;
7
    Node node = n1;
8
    while (node != null) {
9
        System.out.print(node.data + " ");
10
        node = node.next;
11
    }
12
}

Length of a list#

How to calculate the length of a list :
- a) the length of an empty list is 0
- b) the length of a (non-empty) list is:
  1 + the length of the tail of the list

1
int length (Node ls) {
2
/* pre: ls is a well formed linked list
3
post: length(ls) is the number of nodes in the list starting at ls */
4
    if (ls == null) return 0; // empty list
5
    else return 1 + length(ls.next); // 1+ length of tail of list
6
} /* length */

Practice in class#

using f(i, j) represents the 𝑗^𝑡ℎ number in the 𝑖^𝑡ℎ line. Pascal’s Triangle(1654)
Yanghui’s Triangle(1261)

1
public class YanghuiTriangle {
2
    public YanghuiTriangle() {}
3
    public int calculateYanghuiTriangle(int i, int j) {
4
        if (j==1 || i==j) {
5
            return 1;
6
        }
7
        else {
8
            return calculateYanghuiTriangle(i-1, j-1)+calculateYanghuiTriangle(i-1,j);
9
        }
10
    }
11
    public static void main(String[] args) {
12
        YanghuiTriangle yh = new YanghuiTriangle();
13
        System.out.println(yh.calculateYanghuiTriangle(5,3));
14
    }
15
}

展开收起

The Tower of Hanoi is a classic mathematical puzzle that consists of three rods (or pillars) and several disks of different sizes, which can slide onto any rod. The puzzle starts with the disks in a neat stack in ascending order of size on one rod, the smallest at the top, thus making a conical shape.
The objective of the puzzle is to move the entire stack to another rod, obeying the following simple rules:
1. Only one disk can be moved at a time.
2. Each move consists of taking the upper disk from one of the stacks and placing it on top of another stack or on an empty rod.
3. No disk may be placed on top of a smaller disk.

Input
- an integer n, which represents the number of disks on trod A
- for example:

Terminal window

1
3

Output
- displaying the steps of moving the disks;
- for example:

Terminal window

1
A->C
2
A->B
3
C->B
4
A->C
5
B->A
6
B->C
7
A->C

A->B means moving the top disk from trod A to the top of trod B

In contrast to recursive: iterative#

The term iterative comes from the Latin iter meaning a journey, as in itinerary, itinerant, iteration, iterator, …
In programming it refers to making repetitions by using ‘looping’ statements, such as while, for, …

Iterative example - isPresent#

1
static boolean isPresent (int[] a, int x) {
2
    // pre: true
3
    // post: isPresent(a, x) <=> “there is an x in a”
4
    int i = 0;
5
    while(i != a.length && a[i] != x) {
6
        i++;
7
    } // i == a.length || a[i] == x
8
    return i != a.length;
9
}

Recursive example - isPresent()#

1
static boolean isPresentAux(int[] a, int x, int start) {
2
/* pre: true
3
post: isPresent(a, x, start) <=>
4
"there is an x in a", starting from start */
5
    boolean result;
6
    if (start == a.length) result = false; // empty sequence
7
    else if (a[start] == x) result = true; // found x
8
    else result = isPresentAux(a, x, start+1);
9
    return result;
10
}
11
static boolean isPresent (int[] a, int x) {
12
/* pre: true
13
post: isPresent(a, x) <=> “there is an x in a” */
14
    return isPresentAux(a, x, 0);
15
}

展开收起

Traversing a list: recursive, forward#

Traversing a (singly) linked list recursively in the forward direction is easy:

1
void traverse (Node ls) {
2
    if (ls != null) {
3
        Process(ls.data); // process head
4
        traverse(ls.next); // traverse tail of list
5
    }
6
} /* traverse */

Traversing a list: recursive, backward#

Traversing a (singly) linked list recursively in the backward direction is easy too:

1
void reverseTraverse (Node ls) {
2
    if (ls != null) {
3
        reverseTraverse(ls.next);
4
        Process(ls.data);
5
    }
6
} /* reverseTraverse */

How recursion works#

When a method is called its parameters, local variables and return address are stacked on the method-call stack.
- Nested calls lead to deeper stacking.
- A call of a method to itself is just another nested call.

When not to use recursion#

It is best to use a recursive algorithm when the data structure is itself recursively defined
Don’t use a recursive approach when a simple iterative approach is available
- Examples: searching, traversing, and inserting in a list is easy to do iteratively

➢ But, traversing a list backwards (‘backtracking’) is easy to do recursively but hard to do iteratively.

When not to use recursion - example#

Fibonacci numbers:
fib₀ = 0 fib₁ = 1 fib_n = fib_n-1 + fib_n-2, for n > 0

1
int Fib (int n) { /* doubly recursive */
2
/* pre: n >= 0
3
post: Fib(n) is the nth Fibonacci number */
4
    if (n == 0) return 0;
5
    else if (n == 1) return 1;
6
    else return Fib(n - 1) + Fib (n - 2);
7
} /* fib */

Very inefficient: values repeatedly calculated, then ‘forgotten’

How many times program called Fib() recursively when calculating Fib(5)?
- 15 times

From Algorithms and Data Structures N. Wirth page 90

Iterative version

1
int Fib (int n) { /* iterative */
2
/* pre: n >= 0
3
post: Fib(n) is the nth Fibonacci number */
4
    int i, x, y, z;
5
    i= 1; x= 1; y= 0;
6
    while (i != n) {
7
        z = x; i = i + 1; x = x + y; y = z;
8
    }
9
    return x;
10
} /* Fib */

Tracing recursion - example#

Need to take care to know which call is which.

1
int sum(int arr[], int n) {
2
    if (n == 0) return 0;
3
    else {
4
        int smallResult = sum(arr, n - 1);
5
        return smallResult + arr[n - 1];
6
    }
7
}

Assume the array contains: {2, 4, 6}, and that the call to the sum is:
- sum(arr, 3); which will sum the first three elements of the array.

When is recursion really useful#

Really useful if backtracking is involved.
Call-stack keeps stack of values to return to.

reverseTraverse: iterative version#

What if we want to traverse the list in reverse order?
- Needs backtracking.
- We need to traverse, stacking pointers to nodes, and then return by unstacking them.

1
public static void reverseTraverseIterative(Node first) {
2
    Node p = first;
3
    NodeStack ns = new NodeStack(); // assume such a class available
4
    while (p != null) {
5
        ns.push(p);
6
        p = p.next;
7
    }
8
    while (!ns.empty()) {
9
        System.out.println(ns.pop().data);
10
    }
11
}

Not so simple iteratively.

Questions#

Which of these operations needs backtracking?
- Find length of a list
- Insert in an ordered list
- Find average value in a list
- Display above-average values in a list

What’s the time complexity of the method below that displays all the elements in a LinkedList?

1
static void displayList(LinkedList<String> list) {
2
    for (int i = 0; i < list.size(); i++) {
3
        System.out.println(list.get(i));
4
    }
5
}

Answer:

get has to traverse through the list to find the ith element, so that is n, but the loop calls get n times,
so O(n²) - a slow process.

Summary#

Iteration often more efficient than recursion (but Fibonacci is a very extreme case).
Sometimes there is a choice of iterative versus recursive.
Recursive typically closer to definition of data structure.
Recursion is very useful when backtracking involved.
Backtracking used in optimal-fitting algorithms - beyond scope of this module.

After studying the material of this week and attempting the exercises, you should be able to:
- understand the concept of recursion
- apply a recursive approach to defining an algorithm
- know when not to use recursion
- know how to trace a recursion
We will use recursion a great deal with trees.

Call stack#

Content#

The call stack
Recursion and the call stack
Exceptions and the call stack
Finally blocks and the try with resources construct

What information MUST be maintained when a method is called?#

1
public static void main(String[] args) {
2
    double answer = getSum(2,3);
3
// Need to remember which line to return to in the calling method.
4
// This information is no longer needed when the called method returns.
5
    System.out.println(answer);
6
}

1
public static double getSum(double x, double y) {
2
    double sum = x+y;
3
// Need to keep track of the values of local variables and formal parameters.
4
// This information is no longer needed when the called method returns.
5
    return sum;
6
}

1
public static void main(String[] args) {
2
    double answer = getAverage(2,3);
3
    System.out.println(answer);
4
}
5
public static double getAverage(double x, double y){
6
    double average = getSum(x,y)/2;
7
    return average;
8
}
9
public static double getSum(double x, double y) {
10
    double sum = x+y;
11
    return sum;
12
}

getAverage is called. Need to keep track of its local variables, etc.
getSum is called. Need to keep track of its local variables etc.
getSum returns. No longer need information stored in step 2.
getAverage returns. No longer need information stored in step 1.

The data most recently added is first to be removed.
What would be a suitable data structure?

The call stack (Schematic)#

1
public static void main(String[] args) {
2
    double answer = getAverage(2,3);
3
    System.out.println(answer);
4
}
5
public static double getAverage(double x, double y){
6
    double average = getSum(x,y)/2;
7
    return average;
8
}
9
public static double getSum(double x, double y) {
10
    double sum = x+y;
11
    return sum;
12
}

getSum x=2 y=3	A value for sum is calculated. This then becomes the return value for the method.
getAverage x=2 y=3 average=2.5	Stack frame for getSum is “popped”. Return value used to calculate a value for variable average. This is then returned.
main args=[] answer = 2.5	Control returned to main method

Information about each running method is kept in a stack frame, which is pushed onto the stack when the method is called, and popped when it returns.

Visualising the call stack#

A useful tool:
https://cscircles.cemc.uwaterloo.ca/java_visualize/
allows you to visualize the call stack as you run a program

Understanding Recursion#

There are two ways to convince yourself that a recursive method works:
1. Reason about it inductively. This is probably the best thing to do first.
2. Think about what happens to the call stack as it runs. Try this if option 1 is not working for you.

Inductive reasoning#

Let us use induction to convince ourselves that the method below works. We need to do two things:
- Convince ourselves that it works for the base case.
- Convince ourselves that it works for the recursive case, if we assume that any recursive calls do what they are supposed to do.

1
/**Reverse the order of the elements in an ArrayList of Strings**/
2
public static void reverse(ArrayList<String> a) {
3
    if (a.size() > 1) {
4
        String s = a.remove(0);
5
        reverse(a);
6
        a.add(s);
7
    }
8
}

Inductive reasoning：Base case#

If a.size() <= 1 then the reverse method is not called recursively, and the ArrayList a is unchanged. This is exactly what should happen.

Inductive reasoning: recursive case#

a→[“A”, “B”, “C”, “D”]

1
/**
2
* Reverse the order of the elements in an ArrayList of Strings
3
*/
4
public static void reverse(ArrayList<String> a) {
5
    if (a.size() > 1) {
6
        String s = a.remove(0);
7
        reverse(a);
8
        a.add(s);
9
    }
10
}

s→“A”
a→[“B”, “C”, “D”]

1
/**
2
* Reverse the order of the elements in an ArrayList of Strings
3
*/
4
public static void reverse(ArrayList<String> a) {
5
    if (a.size() > 1) {
6
        String s = a.remove(0);
7
        reverse(a);
8
        a.add(s);
9
    }
10
}

s→“A”
a→[“D”, “C”, “B”]

1
/**
2
* Reverse the order of the elements in an ArrayList of Strings
3
*/
4
public static void reverse(ArrayList<String> a) {
5
    if (a.size() > 1) {
6
        String s = a.remove(0);
7
        reverse(a);
8
        a.add(s);
9
    }
10
}

Inductive reasoning#

We have proved that:
- Our method works when a.size() == 1 or a.size() == 0.
- For any n, if the method works for a.size() == n-1, then it also works for a.size() == n.
- So we can see that…
- The method works for a.size() == 2 (because of A and B).
- The method works for a.size() == 3 (because of B and C).
- The method works for a.size() == 4 (because of B and D)
- The method works for a.size() == 5 (because of B and E)
- And so on…
However if that’s hard to understand, we can also think about what happens on the call stack…

Recursion and the call stack#

1
public static void reverse(ArrayList<String> a) {
2
    if (a.size() > 1) {
3
        String s = a.remove(0);
4
        reverse(a);
5
        a.add(s);
6
    }
7
}

1
public static void reverse(ArrayList<String> a) {
2
    if (a.size() > 1) {
3
        String s = a.remove(0);
4
        reverse(a);
5
        a.add(s);
6
    }
7
}

1
public static void reverse(ArrayList<String> a) {
2
    if (a.size() > 1) {
3
        String s = a.remove(0);
4
        reverse(a);
5
        a.add(s);
6
    }
7
}

Each stack frame has its own separate copy of the variables a and s

1
public static void reverse(ArrayList<String> a) {
2
    if (a.size() > 1) {
3
        String s = a.remove(0);
4
        reverse(a);
5
        a.add(s);
6
    }
7
}

1
public static void reverse(ArrayList<String> a) {
2
    if (a.size() > 1) {
3
        String s = a.remove(0);
4
        reverse(a);
5
        a.add(s);
6
    }
7
}

1
public static void reverse(ArrayList<String> a) {
2
    if (a.size() > 1) {
3
        String s = a.remove(0);
4
        reverse(a);
5
        a.add(s);
6
    }
7
}

Base case. Topmost invocation of the method returns.

1
public static void reverse(ArrayList<String> a) {
2
    if (a.size() > 1) {
3
        String s = a.remove(0);
4
        reverse(a);
5
        a.add(s);
6
    }
7
}

1
public static void reverse(ArrayList<String> a) {
2
    if (a.size() > 1) {
3
        String s = a.remove(0);
4
        reverse(a);
5
        a.add(s);
6
    }
7
}

CHECKED EXCEPTIONS (RECAP)#

1
public static void writeArray(ArrayList<Integer> nums) {
2
    PrintWriter out = new PrintWriter(new FileWriter("OutFile.txt"));
3
    for (int num : nums) {
4
        out.println(num);
5
    }
6
    out.close();
7
}

This code will not compile because the FileWriter constructor can throw an IOException, which is checked.
We must either catch this exception, or explicitly declare that the method throws it.

Solution 1: Catch the exception#

1
public static void writeArray(ArrayList<Integer> nums) {
2
    try {
3
        PrintWriter out = new PrintWriter(new FileWriter("OutFile.txt"));
4
        for (int num : nums) {
5
            out.println(num);
6
        }
7
        out.close();
8
    } catch (IOException ex) {
9
        System.out.println("Error opening file");
10
    }
11
}

Solution 2: add a “throws” clause#

1
public static void writeArray(ArrayList<Integer> nums) throws IOException {
2
    PrintWriter out = new PrintWriter(new FileWriter("OutFile.txt"));
3
    for (int num : nums) {
4
        out.println(num);
5
    }
6
    out.close();
7
}

The compiler will be happy with this, because we have acknowledged that the exception can be thrown. If there is an exception handler further down the call stack then it can be caught.
Question: Which solution is better?

Solution 1: Catch the exception#

1
public static void writeArray(ArrayList<Integer> nums) {
2
    try {
3
        PrintWriter out = new PrintWriter(new FileWriter("OutFile.txt"));
4
        for (int num : nums) {
5
            out.println(num);
6
        }
7
        out.close();
8
    } catch (IOException ex) {
9
        System.out.println("Error opening file");
10
    }
11
}

This solution assumes that the method is being called in a context in which we can write a message to standard output and be confident that someone will see it.
We can’t guarantee that this is true, so it is probably better to throw the exception and allow it to be caught by a handler that can deal with it more sensibly.

Better solution: Throw early, catch late#

In general, a method should not catch an exception unless you can guarantee that it will be able to handle the exception sensibly.
If you cannot do this, then it is better to allow the exception to be thrown.
But what actually happens when you throw it?

Exceptions#

When an exception is thrown the call stack is “unwound”. That is to say entries are popped from the stack until a suitable catch block is found. The code in the catch block is then executed.
The catch block might be in the same method as the one that generated the exception, in which case no unwinding is necessary
If no suitable catch block is found then the program terminates with some sort of error message.

Method E throws an exception that can be handled by Method B’s catch block

Method B has a suitable catch block.

Stack unwinds until we find the catch block

Method B has a suitable catch block.

Stack unwinds until we find the catch block

Method B has a suitable catch block.

Stack unwinds until we find the catch block
Exception is “caught”. Code in catch block is executed.

Method B has a suitable catch block.

Programming tip:
- If your code does this, ask yourself if you could have achieved the same effect with an ‘if’ statement.

Finally blocks#

The code below is intended to read a set of text files and write out the first line of each to an output file.
However if a problem if an exception is thrown while reading one of the input files, the output file will not be closed. We could fix this using a ‘finally’ block.

1
public static void firstLines(ArrayList<String> fileNames, String outFileName) throws FileNotFoundException {
2
    PrintStream outStream = new PrintStream(outFileName);
3
    for (String file : fileNames) {
4
        FileInputStream inStream = new FileInputStream(file);
5
        Scanner scan = new Scanner(inStream);
6
        String line = scan.nextLine();
7
        outStream.println(line);
8
    }
9
    outStream.close();
10
}

1
public static void firstLines(ArrayList<String> fileNames, String outFileName) throws FileNotFoundException {
2
    PrintStream outStream = new PrintStream(outFileName);
3
    try {
4
        for (String file : fileNames) {
5
            FileInputStream inStream = new FileInputStream(file);
6
            Scanner scan = new Scanner(inStream);
7
            String line = scan.nextLine();
8
            outStream.println(line);
9
        }
10
    } finally {
11
        outStream.close();
12
    }
13
}

If an exception occurs during the try block, the finally block is executed, then the call stack is unwound until a handler for the exception is found.
Note that the role of the finally block is not to handle the exception.
If the try block completes normally then the finally block is still executed.

Try with resources#

It is common for finally blocks to close resources that have been opened immediately before the try block. If the resource(s) in question implement the interface java.lang.Autocloseable then the try … finally structure can be replaced by a “try with resources” construct, as illustrated below.

1
public static void firstLines(ArrayList<String> fileNames, String outFileName) throws FileNotFoundException {
2
    try (PrintStream outStream = new PrintStream(outFileName)) {
3
        for (String file : fileNames) {
4
            FileInputStream inStream = new FileInputStream(file);
5
            Scanner scan = new Scanner(inStream);
6
            String line = scan.nextLine();
7
            outStream.println(line);
8
        }
9
    }
10
}

Summary#

When a method is invoked, a stack frame is pushed onto the call stack. When the method returns the frame is popped.
Each recursive call to a method pushes a separate frame onto the call stack. So you end up with multiple frames, representing multiple invocations of the method.
When an exception is thrown, the call stack is unwound until a method with a suitable try block is found.
If a try block is associated with a finally block, the code in this block is always executed. If an exception occurs, the finally block is executed and then the call stack is unwound until a catch block is found.
A “try with resources” construct can be used as an alternative to a finally block in cases where resources need to be closed.

Systems Issues

Mon, 30 Mar 2026 00:00:00 GMT

Errors, Failures, Risks and Hazards

Web Application Development - DOM

Mon, 30 Mar 2026 00:00:00 GMT

The Document Object Model#

Last lecture you saw the basics of control flow programs in JavaScript.
We now need to learn how to manipulate the web page and browser using JavaScript.
This is done through a series of built-in objects. The specifications of these objects are called the DOM (Document Object Model) and BOM (Browser Object Model).
The BOM is not officially standardised, although there are standards for most browsers. The DOM is standardised as part of HTML5.

The Browser Object Model#

The Browser Object model covers all available data about the browser other than the actual page.
It provides:
- window: holds all your declared variables. Also can get the size of the window (or tab). May be able to open or move windows but this functionality is often restricted. Also displays alerts and prompts and manages timing.
- screen: contains the height, width and color depth of the screen; however, these are better accessed elsewhere.
- location: accesses the entered web address.
- history: can simulate clicking Back and Forward on the browser. Cannot access previously visited URLs.
- navigator: identifies the browser and OS.

Document Object#

The document object is built based on the document object model.
It provides access to a database of all other elements on the HTML page.
When you extract an element from the database, it is returned in the form of an object, with properties and methods as appropriate for that type of element.
By calling or changing these properties or methods, you can manipulate the element.

Accessing the document#

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <img ID="menu" src="menu.jpg">
5
    </body>
6
</html>

This img element has the ID menu, so we can get a reference to it with document.GetElementById("menu").

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <form name=“login”>
5
            <input ID=“username” type=text>
6
        </form>
7
    </body>
8
</html>

This input element has ID username, so we can get a reference to it with document.GetElementById("username"). IDs have to be unique across the whole document, so it does not matter that it is nested within a form.

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <form id="login">
5
            <input type=text>
6
        </form>
7
    </body>
8
</html>

You can also get all elements of a particular type. Doing so returns a list, to allow for the possibility of there being more than one.

1
document.GetElementsByTagName("input")

Note

id is unique, but class and tag are not.

Only GetElementsById gets one element, others get collection.

HTML tree#

The document object model is built in a tree structure, as with the HTML document itself.
Traditionally, positions in the tree are described using terms taken from family trees, even though these are not always absolutely accurate.

Accessing the document#

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <p name="username">Username:</p>
5
        <form name="login">
6
            <input name="username" type="text">
7
        </form>
8
        <p name="password">Password:</p>
9
        <form name="login2">
10
            <input name="password" type="hidden">
11
        </form>
12
    </body>
13
</html>

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <p name="username">Username:</p>
5
        <form name="login">
6
            <input name="username" type="text">
7
        </form>
8
        <p name="password">Password:</p>
9
        <form name="login2">
10
            <input name="password" type="hidden">
11
        </form>
12
    </body>
13
</html>

This p element is a child of the body.
The body is the parent of the p.

Note

Tag p here still has child —— the text.

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <p name="username">Username:</p>
5
        <form name="login">
6
            <input name="username" type="text">
7
        </form>
8
        <p name="password">Password:</p>
9
        <form name="login2">
10
            <input name="password" type="hidden">
11
        </form>
12
    </body>
13
</html>

This input element is a child of the form.
The form is the parent of the input.
The body is not the parent of the input.
The input is not a child of the body.
The input and the form are not siblings.

The body is not the parent of the input.
The body is the ancestor of the input.
The input is not a child of the body.
The input is the descendant of the body.

In the DOM, plain text is considered another form of child, in the same way that another element would be.
The text “username:” is a child of the p element.

1
<body>
2
    <p>
3
      My name is <b>Bob</b> and I am
4
      <i>here</i>.
5
    </p>
6
</body>

(This is why it is important to nest your elements correctly!)

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <div id="upper"><p>Hi!</p></div>
5
        <div id="lower"><p>Lo!</p></div>
6
    </body>
7
</html>

Calling getElementsByTagName on elements other than the top-level document will get only descendants of that element. document.getElementById("upper").getElementsByTagName("p") will get only the p tag containing “Hi!”.

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <div class=“item”>Item 1</div>
5
        <div class=“item lite”>Item 2</div>
6
    </body>
7
</html>

You can also get lists of items based on their CSS style class. Any object which is a member of the named class will be included in the resulting list, even if it is a member of other classes as well.

1
document.GetElementsByClassName("item")

Finding HTML elements#

Ideally you should structure your HTML to make finding elements to be altered via JavaScript as easy as possible.
- If one particular element needs to be found, give it an ID.
- If one particular set of elements are manipulated together, make them the children of an element with a particular ID, or give them the same CSS class.

Using Element Objects#

Once you have obtained an HTML element object you can store it in a variable:

1
let top = document.getElementById(“main”);

You can then call methods and properties on that object to alter the web page.
You can also access other parts of the tree based on the element. Every element has these properties:
- parentNode: the parent element
- childNodes: an array of the child elements
- firstChild, lastChild
- nextSibling, previousSibling

The DOM tree and CSS#

Although we did not mention it at the time, you can also use the DOM tree when writing CSS files.
nav {...} Affects all nav elements
nav p {...} Affects all p elements that are descendents of nav elements
nav > p {...} Affects all p elements that are children of nav elements
nav ~ p {...} Affects all p elements that are later siblings of nav elements

Selector API#

You can also use CSS style specifications to obtain sets of elements in JavaScript.
The function document.querySelectorAll can be called with a CSS-style selector as a string. It returns the list of all elements matching that selector.
For example:

1
let clickedLinks = document.querySelectorAll ("nav > a:visited");

Manipulating element objects#

Once you have an element object, you can modify the object to modify the web page.
The simplest case is changing an attribute.
For every attribute that an HTML element has or could legally have, there will be a property on the element object which you can read or write.

Accessing the document#

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <img id="menu" src="menu.jpg">
5
    </body>
6
</html>

This image has an attribute called src. If we

1
let ourMenu=document.getElementById("menu");

our menu.src will contain the string menu.jpg. The src attribute on an image specifies the filename of the image. So by changing this attribute in our script, we could alter the image, make it animate, etc.

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <form id="login">
5
            <input id="username" type=text>
6
        </form>
7
    </body>
8
</html>

This element doesn’t have a value attribute – but it is possible for an HTML input element to have one. The rules of HTML specify that this attribute holds the contents of the element – ie, the text appearing within the input box. Thus, our JavaScript program can read this as

1
document.getElementById("username").value

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <div id="one" class="moose">Moose!</div>
5
    </body>
6
</html>

You can alter the CSS attributes of an element by using its style property. For example, to change the background color of this div, we can change

1
document.getElementById("one").style.backgroundColor

Note that doing this is equivalent to inserting a style attribute in the HTML that overrides that aspect of the class; other elements of class moose will not be affected.

1
<html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <div id="one" data-price="14.99">Our new product</div>
5
    </body>
6
</html>

HTML5 allows data- attributes to be used to store arbitrary data inline in an HTML5 file. The names of data attributes must begin with data- but thereafter may be anything.
The values of these attributes can then be accessed, eg:

1
document.getElementById("one").dataset.price

Manipulating text and content#

You can change the entire content of a tag as text by altering its innerHTML property. However, this will overwrite everything inside the tag and force the browser to recalculate the DOM. It may be better to use fields.
You can also manipulate the tree to alter the page directly by calling methods on an element object.

Altering the HTML tree#

1
<body onLoad="start()">
2
    <p id="base">My name is Sir Cunningham and I am
3
    <i>very smart</i>.</p>
4
    <button onClick="change()">Change</button>
5
</body>

1
function change() {
2
    let base=document.getElementById("base");
3
    let italics=base.getElementsByTagName("i")[0]; italics.remove();
4
    let newNode=document.createElement("i");
5
    let newText=document.createTextNode("a bit of a wally, really");
6
    newNode.appendChild(newText);
7
    base.insertBefore(newNode, base.lastChild);
8
}

1
let base=document.getElementById("base");
2
let italics=base.getElementsByTagName("i")[0];
3
italics.remove();

1
let newNode=document.createElement("i");
2
let newText=document.createTextNode("a bit of a wally, really");
3
newNode.appendChild(newText);
4
base.insertBefore(newNode, base.lastChild);

Hash Table

Thu, 26 Mar 2026 00:00:00 GMT

Hash Table#

Exercise 1 - Calculate, Insert, find load factor and steps#

This exercise helps you to find out all about how hash tables work and how to compare different hashing schemes. We’ll use the same keys in two hash tables that use different hashing schemes.

(a) Calculate hash values for the following keys using the hash function h(k) = k mod 19.
738, 570, 687, 111, 530, 966, 524, 382, 701, 842, 348, 22, 658, 220, 817
[To do a mod calculation, you can use the Scientific View of the Calculator accessory program supplied by Windows, or you can use Google.]

Reference Answer

k	738	570	687	111	530	966	524	382	701	842	348	22	658	220	817
h(k)	16	0	3	16	17	16	11	2	17	6	6	3	12	11	0

(b) Insert these values (in this order) into an empty hash table of size 19, using the linear probing scheme, with hash function h(k) = k mod 19.
738, 570, 687, 111, 530, 966, 524, 382, 701, 842, 348, 22, 658, 220, 817

Reference Answer

index	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18
value	570	817	382	687	22		842	348				524	220	658			738	530	111

简要插入过程（关键冲突）

570 → 0（空，放入）
738 → 16（空，放入）
687 → 3（空，放入）
111 → 16（被占）→17（被占）→18
530 →17（空，放入）
966 →16（被占）→17（被占）→18（被占）→0（被占）→1（空，放入）
524 →11（空，放入）
382 →2（空，放入）
701 →17（被占）→18（被占）→0（被占）→1（被占）→2（被占）→3（被占）→4（被占）→5（空）→6（被占）→7（空，放入）
842 →6（空，放入）
348 →6（被占）→7
22 →3（被占）→4
658 →12（空，放入）
220 →11（被占）→12
817 →0（被占）→1

Reference Answer

The load factor α\alphaα is defined as: α=number of keystable size\alpha = \frac{\text{number of keys}}{\text{table size}}α=table sizenumber of keys

Number of keys inserted: 15
Hash table size: 19

α=1519≈0.7895\alpha = \frac{15}{19} \approx 0.7895α=1915≈0.7895

Load factor = 15/19≈0.789515/19 \approx 0.789515/19≈0.7895

(d) What is the average number of steps for a successful search in the hash table from part (b) above? (count 1 inspection of a hash table slot as 1 step)

Reference Answer

Key	h(k)=k mod19	Final index	Steps
738	16	16	1
570	0	0	1
687	3	3	1
111	16	18	3
530	17	17	1
966	16	1	5
524	11	11	1
382	2	2	1
701	17	7	10
842	6	6	1
348	6	7	2
22	3	4	2
658	12	13	2
220	11	12	2
817	0	1	2

总步数：35
元素个数：15
平均成功查找步数：1535=37≈2.333\frac{15}{35}=\frac{3}{7}\approx2.3333515=73≈2.333

(e) Insert these values (in this order) into an empty hash table of size 19, using the double hashing scheme, with hash function h(k) = k mod 19 and probe function p(k) = (7k mod 18) + 1
738, 570, 687, 111, 530, 966, 524, 382, 701, 842, 348, 22, 658, 220, 817

Reference Answer

哈希函数：h(k)=k mod 19h(k)=k\bmod19h(k)=kmod19，探测步长：p(k)=(7k mod 18)+1p(k)=(7k\bmod18)+1p(k)=(7kmod18)+1

项目	738	570	687	111	530	966	524	382	701	842	348	22	658	220	817
h(k)=k mod 19h(k)=k\bmod19h(k)=kmod19	16	0	3	16	17	16	11	2	17	6	6	3	12	11	0
p(k)=(7k mod 18)+1p(k)=(7k\bmod18)+1p(k)=(7kmod18)+1	1	13	4	4	3	13	15	11	12	9	7	11	17	11	14
双重哈希最终位置	16	0	3	1	17	10	11	2	7	6	13	14	12	3	4
线性探测最终位置	16	0	3	18	17	1	11	2	7	6	7	4	13	12	1

最终状态：

索引	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18
值	570	111	382	220			842				701	524	658	348	817		738	530	966

(f) What is the average number of steps for a successful search in the hash table from part (e) above? (count one inspection of a hash-table slot as one step)

Reference Answer

公式：

h(k)=k mod 19h(k) = k \bmod 19h(k)=kmod19
p(k)=(7k mod 18)+1p(k) = (7k \bmod 18) + 1p(k)=(7kmod18)+1
探测序列：Hi=(h(k)+i⋅p(k)) mod 19, i=0,1,2,...H_i = (h(k) + i \cdot p(k)) \bmod 19,\ i=0,1,2,...Hi=(h(k)+i⋅p(k))mod19, i=0,1,2,...
步数 = 找到该键时的 i+1i+1i+1 每键步数（精确计算）

项目	738	570	687	111	530	966	524	382	701	842	348	22	658	220	817
h(k)=k mod 19h(k) = k \bmod 19h(k)=kmod19	16	0	3	16	17	16	11	2	17	6	6	3	12	11	0
p(k)p(k)p(k) 步长	1	13	4	4	3	13	15	11	12	9	7	11	17	11	14
最终位置	16	0	3	1	17	10	11	2	3	6	13	6	12	3	14
探测步数	1	1	1	2	1	2	1	1	3	1	2	3	1	2	2

总步数 & 平均值
总步数 = 1+1+1+2+1+2+1+1+3+1+2+2+1+2+2=251+1+1+2+1+2+1+1+3+1+2+2+1+2+2=251+1+1+2+1+2+1+1+3+1+2+2+1+2+2=25
元素个数 = 151515
平均步数 = 1525=35≈1.6667\frac{15}{25}=\frac{3}{5}\approx1.66672515=53≈1.6667

Exercise 2 – Hash Functions and Table Sizes#

What keys should we use for our data? What makes a good hash function? What size of hash table should be used? Discuss these issues in the following scenarios:

a hash table used to store details of all the students currently enrolled at CDUT
a hash table used inside a browser to store all the URLs that you have visited within the past week

Reference Answer

Item	University Students	Browser Weekly URLs
Best Key	Unique Student ID	Full URL string
Good Hash Function	Simple numeric mod / lightweight hash	String rolling hash (FNV, Murmur)
Ideal Table Size	Fixed prime, ~1.2–1.5 × max students	Dynamic prime, resizable, α≈0.7\alpha \approx 0.7α≈0.7
Load Factor	≤ 0.8	≤ 0.7
Stability	Very stable	Highly dynamic

Exercise 3 – Quadratic Probing#

Repeat Exercise 1 with the same data, but for the quadratic-probing hashing scheme. Compare the average number of steps for a successful search in your table to that taken by the linear probing and double hashing hash tables.

Reference Answer

Hash function: h(k)=k mod 19h(k) = k \bmod 19h(k)=kmod19
Quadratic probing: Hi(k)=(h(k)+i2) mod 19, i=0,1,2,...H_i(k) = (h(k) + i^2) \bmod 19,\; i=0,1,2,...Hi(k)=(h(k)+i2)mod19,i=0,1,2,...
Table size m=19m=19m=19 (prime, m≡3(mod4)m\equiv 3\pmod{4}m≡3(mod4), so quadratic probing covers all slots)
Insert order: 738, 570, 687, 111, 530, 966, 524, 382, 701, 842, 348, 22, 658, 220, 817

Full insertion & probe steps (steps = i+1i+1i+1)

Key	738	570	687	111	530	966	524	382	701	842	348	22	658	220	817
h(k)	16	0	3	16	17	16	11	2	17	6	6	3	12	11	0
Probe sequence	16	0	3	16→17	17→18	16→17→18→0→5	11	2	17→18→0→1→4	6	6→7	3→4→8	12	11→12→15	0→1
Final index	16	0	3	17	18	5	11	2	4	6	7	8	12	15	1
Steps	1	1	1	2	2	5	1	1	5	1	2	3	1	3	2

Total steps for quadratic probing
Total steps = 31
Average steps = 31/15≈2.066731/15 \approx 2.066731/15≈2.0667

Final hash table (quadratic probing, size 19)

Index	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18
Value	570	817	382	687	701	966	842	348	22			524	658			220	738	111	530

Comparison of average successful search steps

Method	Average steps	Value
Linear probing	35/15	≈2.333\approx 2.333≈2.333
Quadratic probing	31/15	≈2.067\approx 2.067≈2.067
Double hashing	25/15	≈1.667\approx 1.667≈1.667

Conclusion

Double hashing is best (fewest collisions, least clustering)
Quadratic probing is better than linear probing (avoids primary clustering)
Linear probing worst (strong clustering, longest probes)

Exercise 4 – Double Hashing#

In Exercise 1, the probe function used for the double hashing scheme was p(k)=(7k mod 18)+1p(k) = (7k\bmod18) + 1p(k)=(7kmod18)+1 Explain why the +1 is included in the probe function, i.e. what would be the consequence of using for example p(k)=7k mod 18p(k) = 7k\bmod18p(k)=7kmod18.

Reference Answer

The +1+1+1 prevents the probe step from being zero. Without it, some keys would produce p(k)=0p(k)=0p(k)=0, causing the probe sequence to stall at the initial hash position and making insertion impossible even when empty slots exist.

Exercise 5 – Unsuccessful Searching#

Also calculate the average number of steps taken for an unsuccessful search in the linear probing hash table from Exercise 1.

This time you can’t take the average over the elements inserted, you’ll have to take the average over all possible slots that an element not stored in the hash table could hash to.

Reference Answer

Linear Probing (original table, size m=19m=19m=19)
Rules for unsuccessful search steps:

For a given starting slot iii:

Steps = number of consecutive occupied slots starting at iii, until the first empty slot (including the occupied ones, stop at empty).
We average over all 19 table slots (0 to 18).

First, recall the final linear probing table (index: value / empty)

Index	0	1	2	3	4	5	6	7	8	9	10	11	12	13	14	15	16	17	18
Value	570	817	382	687	22	empty	842	348	empty	empty	empty	524	220	658	empty	empty	738	530	111
State	OCC	OCC	OCC	OCC	OCC	EMP	OCC	OCC	EMP	EMP	EMP	OCC	OCC	OCC	EMP	EMP	OCC	OCC	OCC

Legend:

OCC: occupied
EMP: empty

Unsuccessful steps per starting index Count how many probes until first empty slot:

Index 0: 0,1,2,3,4 → 5 steps (hit empty at 5)
Index 1: 1,2,3,4 → 4 steps
Index 2: 2,3,4 → 3 steps
Index 3: 3,4 → 2 steps
Index 4: 4 → 1 step
Index 5: empty → 1 step
Index 6: 6,7 → 2 steps
Index 7: 7 → 1 step
Index 8: empty → 1 step
Index 9: empty → 1 step
Index 10: empty → 1 step
Index 11: 11,12,13 → 3 steps
Index 12: 12,13 → 2 steps
Index 13: 13 → 1 step
Index 14: empty → 1 step
Index 15: empty → 1 step
Index 16: 16,17,18 → 3 steps
Index 17: 17,18 → 2 steps
Index 18: 18 → 1 step

Total steps

5+4+3+2+1+1+2+1+1+1+1+3+2+1+1+1+3+2+1=375+4+3+2+1+1+2+1+1+1+1+3+2+1+1+1+3+2+1 = 375+4+3+2+1+1+2+1+1+1+1+3+2+1+1+1+3+2+1=37

Average unsuccessful steps

Average=Total stepsNumber of slots=3719≈1.947\text{Average} = \frac{\text{Total steps}}{\text{Number of slots}} = \frac{37}{19} \approx 1.947Average=Number of slotsTotal steps=1937≈1.947

Exercise 6 – Chaining#

Show how to insert the following stream of records with key fields into an initially-empty hash table of size 13 (indexed by 0 .. 12), using the chaining collision-resolution scheme, using the hashing function h defined by h(k)=k mod 13h(k) = k\bmod13h(k)=kmod13. 534, 702, 105, 523, 959, 699, 821, 883, 842, 686

Reference Answer

Step 1: Compute hash values

Hash function: h(k)=k mod 13h(k) = k \bmod 13h(k)=kmod13

534 → 1
702 → 0
105 → 1
523 → 3
959 → 10
699 → 10
821 → 2
883 → 12
842 → 10
686 → 10

Step 2: Insert with chaining (separate chaining, append to end of list)

Hash table size = 13 (indices 0–12)

Index	0	1	2	3	4	5	6	7	8	9	10	11	12
Chain	702	534 → 105	821	523							959 → 699 → 842 → 686		883

Final hash table (chaining) visual

0: [702]
1: [534, 105]
2: [821]
3: [523]
4: []
5: []
6: []
7: []
8: []
9: []
10: [959, 699, 842, 686]
11: []
12: [883]

Worst situation time complexity: O(n)

Exercise 7 – Chaining versus Linear Probing#

Consider the average number of steps required for a successful search in a hash table using chaining. Is the chaining scheme better or worse for successful searches, on average, than the linear probing scheme?

Reference Answer

Average Successful Search: Chaining vs. Linear Probing
For separate chaining (the method you just used):

Each index holds a linked list of collided keys.
For a successful search:
- We hash to the correct index (1 step).
- Then traverse the list until we find the key.
The average number of steps is:
1+α21 + \frac{\alpha}{2}1+2α
where α=number of keystable size\alpha = \frac{\text{number of keys}}{\text{table size}}α=table sizenumber of keys (load factor).

For linear probing:

It suffers from primary clustering (long consecutive occupied blocks).
The average successful search steps are much more sensitive to clustering and given by:
12(1+11−α)\frac{1}{2}\left(1 + \frac{1}{1-\alpha}\right)21(1+1−α1)
This grows very rapidly as α\alphaα approaches 1 (much faster than chaining).

Conclusion:
Chaining is significantly better for successful searches on average
because:

It avoids clustering entirely.
Collisions are confined to their own linked list, not spreading across the table.
The average search length grows linearly and slowly with load factor, whereas linear probing’s average steps explode due to clustering.

In short:
✅ Chaining: better average performance
❌ Linear probing: worse due to primary clustering

Foundations of Security Week3 Seminar: SQL Injection (1)

Thu, 26 Mar 2026 00:00:00 GMT

SQL Injection (1)#

Objective#

To introduce you to SQL injection attack, identify and demonstrate common SQL injection attacks, understand the underlying mechanisms that allow these attacks to succeed, and apply best practices in software development to prevent SQL injection vulnerabilities in web applications.

Exploiting Databases Through Code Insertion#

What is it#

A type of attack where an attacker exploits vulnerabilities in a web application’s input fields to execute malicious SQL commands. These commands allow attackers to interact with a database in unauthorized ways, often leading to data breaches or system compromise.

How does it happen#

Attackers enter malicious SQL code into input fields (e.g., login forms, search boxes).
The application processes this input without proper validation.

Example#

Bypassing Authentication (login page)
Extracting Data.

Setup#

Tautology Based Injection#

Using logical operations that always return true to manipulate query logic.

1
SELECT * FROM users WHERE username='anything' OR '1'='1';

This injection uses a tautology (‘1’=‘1’ is always true) to bypass authentication logic and can potentially retrieve user records.

System query

1
SELECT * FROM students WHERE email = 'useremail' AND password = 'password';

Attacker’s input

Resulting query

1
SELECT * FROM students WHERE email = 'xxxxxx' AND password = '' OR '1'='1';

Task1: Connect to the Wireless Access Point/Router#

Connect to the Wireless Access Point / Router as provided by the instructor (WiFi Name & Password will be provided)
Open you browser and enter the IP address (will be provided by the instructor) of the Webserver PC in your browser and hit “Enter”
Access the demo web application interface

1	2-3

Task2: Sign up on the web application#

Task3: Login to the web application using your registered details. Logout after successful login#

Task4: Perform a Tautology Based SQL Injection to bypass the login authentication without your registered account#

Web Application Development Practical3: JavaScript

Wed, 25 Mar 2026 00:00:00 GMT

Practical Session 3: JavaScript#

Copy and paste the page and script below into a file with the extension .html , and open it in Chrome.

1
<html>
2
    <head>
3
        <title>JavaScript Example</title>
4
        <script>
5
            "use strict"; function start() {
6
                let ino = window.prompt("What is your name?");
7
                window.alert("Hello " + ino);
8
            }
9
        </script>
10
    </head>
11
    <body onLoad="start()">
12
        <p>Javascript Test Page</p>
13
    </body>
14
</html>

This program shows a simple way of doing input and output in JavaScript, using window.prompt and window.alert. Although this method is not acceptable on most real web pages, for the moment you should use it while learning. We will learn to accept input “properly” next week.

You can do the remaining exercises by adding extra code to the start() function. You may define your own functions and/or classes as well.

Modify the program to ask the user to enter a string, then display that string, then repeat doing this over and over until the user enters “end” when asked for a string.

1
function start2() {
2
    let info;
3
    do {
4
        info = window.prompt("Enter a string (type 'end' to stop):");
5
        if (info !== "end") {
6
            window.alert("You entered: " + info);
7
        }
8
    } while (info !== "end");
9
}

Use a for loop to output the numbers from 1 to 10 in order.

1
function start_loop() {
2
  for (let i = 1; i <= 10; i++) {
3
    window.alert("Number " + i);
4
  }
5
}

Modify the program so that, instead of always counting to 10, it asks the user how high it should count.

1
function start_loop_ask() {
2
  let num = parseInt(window.prompt("Enter the highest number to count to:"));
3
  if (isNaN(num)) {
4
    window.alert("That's not a valid number!");
5
  } else {
6
    for (let i = 1; i <= num; i++) {
7
      window.alert("Number " + i);
8
    }
9
  }
10
}

As in Python, window.prompt always returns a string. The JavaScript function to convert a string to a number is parseInt() . If the string is not a valid number, it returns a special value NaN (“not a number”). To test if a variable contains NaN, use the isNaN() function (remember that function names are case sensitive). Do not allow your code to attempt to count to NaN.

find out how to generate random numbers in JavaScript. This information is available in books and online.
Random Integer between 0 and 10.

1
function random_number() {
2
  let num = Math.floor(Math.random() * 100) + 1;
3
  window.alert("Random number between 1 and 100: " + num);
4
}

Write a program which generates two random numbers, displays them as an addition sum and asks the user to enter the sum. The program should tell the user if the addition was right or wrong.

1
function random_numbers_sum() {
2
  let num1 = Math.floor(Math.random() * 100) + 1;
3
  let num2 = Math.floor(Math.random() * 100) + 1;
4
  let sum = num1 + num2;
5
  let userAnswer = window.prompt("What is the sum of " + num1 + " and " + num2 + "?");
6
  if (parseInt(userAnswer,10) === sum) {
7
    // parseInt 的参数 10 是为了确保用户输入的数字被正确解析为十进制数，避免出现八进制或十六进制的误解。
8
    window.alert("Correct! The sum is indeed " + sum + ".");
9
  } else {
10
    window.alert("Incorrect. The sum is: " + sum);
11
  }
12
}

Modify the program from Question 6 to ask 10 such addition questions and then tell the user how many they got right.

1
function random_add_quiz() {
2
  let correctAnswers = 0;
3
  let totalQuestions = 10;
4
  for (let i = 0; i < totalQuestions; i++) {
5
    let num1 = Math.floor(Math.random() * 100) + 1;
6
    let num2 = Math.floor(Math.random() * 100) + 1;
7
    let sum = num1 + num2;
8
    let userAnswer = window.prompt("What is the sum of " + num1 + " and " + num2 + "?");
9
    if (parseInt(userAnswer, 10) === sum) {
10
      window.alert("Correct! The sum is indeed " + sum + ".");
11
      correctAnswers++;
12
    } else {
13
      window.alert("Incorrect. The sum is: " + sum);
14
    }
15
  }
16
  window.alert("You got " + correctAnswers + " out of " + totalQuestions + " correct!");
17
}

展开收起

Write a number guessing game. The program should pick a random number between 1 and 20, and gives the user 5 chances to guess it. Whenever the user guesses wrongly, the program should tell them if their guess was higher or lower than the correct number.

1
function guess_number() {
2
  let randomNum = Math.floor(Math.random() * 20) + 1;
3
  let attempts = 0;
4
  let maxAttempts = 5;
5
  let guess;
6
  for (attempts = 0; attempts < maxAttempts; attempts++) {
7
    guess = parseInt(window.prompt("Guess a number between 1 and 20 (Attempt " + (attempts + 1) + " of " + maxAttempts + "):"), 10);
8
    if (isNaN(guess)) {
9
      window.alert("Please enter a valid number.");
10
      attempts--; // Don't count invalid input as an attempt
11
    } else if (guess < randomNum) {
12
      window.alert("Too low! Try again.");
13
    } else if (guess > randomNum) {
14
      window.alert("Too high! Try again.");
15
    } else {
16
      window.alert("Congratulations! You guessed the number!");
17
      return; // Exit the function if guessed correctly
18
    }
19
  }
20
  window.alert("Sorry, you've used all attempts! The number was: " + randomNum);
21
}

展开收起

Write a program which inputs five names from the user and then displays them, separated by commas, as a single output. (You can add a new element at the beginning of an array in JavaScript by using the push method on the array.)

1
function names_list() {
2
  let names = [];
3
  let arraySize = 5;
4
  for (let i = 0; i < arraySize; i++) {
5
    let name = window.prompt("Enter name " + (i + 1) + " of " + arraySize + ":");
6
    if (name.trim() !== "") {
7
      names.push(name.trim());
8
    } else {
9
      window.alert("Name cannot be empty. Please try again.");
10
      i--; // Decrement i to repeat this iteration
11
    }
12
  }
13
  window.alert("You entered the following names:\n" + names.join(", "));
14
}

Write a program which uses an array to calculate the first ten fibonacci numbers and display them. (The first two fibonacci numbers are 1 and 2; after that, each fibonacci number is equal to the sum of the previous two.)

1
function fibonacci(n) {
2
  let fibonacciSequence = [0, 1];
3
  for (let i = 2; i < n; i++) {
4
    fibonacciSequence[i] = fibonacciSequence[i - 1] + fibonacciSequence[i - 2];
5
  }
6
  return fibonacciSequence.slice(0, n);
7
}
8

9
function displayFibonacci() {
10
  // let n = parseInt(window.prompt("How many Fibonacci numbers to display?"), 10);
11
  let n = 10;
12
  if (isNaN(n) || n <= 0) {
13
    window.alert("Please enter a valid positive integer.");
14
  } else {
15
    let fibSequence = fibonacci(n);
16
    window.alert("The first " + n + " Fibonacci numbers are:\n" + fibSequence.join(", "));
17
  }
18
}

展开收起

Create a Car class which stores the brand and model of a car, and initialize one using some sample data.

1
class Car {
2
  constructor(make, model, year) {
3
    this.make = make;
4
    this.brand = make; // brand 是 make 的别名
5
    this.model = model;
6
    this.year = year;
7
  }
8
  displayInfo() {
9
    return `${this.year} ${this.brand} ${this.model}`;
10
  }
11
}
12
function testCar() {
13
  let car1 = new Car("Toyota", "Corolla", 2020);
14
  let car2 = new Car("Honda", "Civic", 2019);
15
  window.alert("Car 1: " + car1.displayInfo() + "\nCar 2: " + car2.displayInfo());
16
}

展开收起

Create a Person object which stores a person’s name, age, and the car they drive, which should be a Car object. Initialize one using some sample data.

1
let Person = {
2
  name: "Alice",
3
  age: 30,
4
  car: new Car("Ford", "Mustang", 2021),
5
  greet: function() {
6
    return `Hello, my name is ${this.name} and I am ${this.age} years old.`;
7
  }
8
};
9
function testPerson() {
10
  window.alert(Person.greet() + "\nI drive a " + Person.car.displayInfo());
11
}

You can loop through an array in JavaScript using a for loop based on index (you can get the length of the array with the length property as in Java), or with a Python-style ranged for loop using the syntax for (let item of array) {....

Create an array of Person objects, all with different names and Car s. Write a program that finds all car brands (not models) that anyone in the array drives, and displays a list of the names of the people who drive each brand of car, sorted by brand.

1
let people = [
2
  {
3
    name: "Alice",
4
    age: 28,
5
    car: new Car("Toyota", "Camry", 2018),
6
    greet: function() { return `Hello, my name is ${this.name}.`; }
7
  },
8
  {
9
    name: "Bob",
10
    age: 35,
11
    car: new Car("Honda", "Accord", 2020),
12
    greet: function() { return `Hello, my name is ${this.name}.`; }
13
  },
14
  {
15
    name: "Charlie",
16
    age: 22,
17
    car: new Car("Ford", "Focus", 2017),
18
    greet: function() { return `Hello, my name is ${this.name}.`; }
19
  },
20
  {
21
    name: "Diana",
22
    age: 31,
23
    car: new Car("Toyota", "Corolla", 2021),
24
    greet: function() { return `Hello, my name is ${this.name}.`; }
25
  },
26
  {
27
    name: "Ethan",
28
    age: 27,
29
    car: new Car("Honda", "Civic", 2019),
30
    greet: function() { return `Hello, my name is ${this.name}.`; }
31
  }
32
];
33

34
// Find all brands and group people by brand
35
function displayPeopleByCarBrand() {
36
  let brandMap = {};
37
  for (let person of people) {
38
    let brand = person.car.brand;
39
    if (!brandMap[brand]) {
40
      brandMap[brand] = [];
41
    }
42
    brandMap[brand].push(person.name);
43
  }
44
  let brands = Object.keys(brandMap).sort();
45
  let result = "People by car brand:\n";
46
  for (let brand of brands) {
47
    result += brand + ": " + brandMap[brand].join(", ") + "\n";
48
  }
49
  window.alert(result);
50
}

展开收起

Write a program which inputs two numbers from the user, then asks them to enter add , sub , mul or div , performs the appropriate actions on the numbers and displays the result on the page - without using any IF tests!

1
function calculate() {
2
  let num1 = parseFloat(window.prompt("Enter the first number:"));
3
  let num2 = parseFloat(window.prompt("Enter the second number:"));
4
  let operation = window.prompt("Enter operation: add, sub, mul, or div").toLowerCase();
5

6
  const operations = {
7
    add: (a, b) => a + b,
8
    sub: (a, b) => a - b,
9
    mul: (a, b) => a * b,
10
    div: (a, b) => a / b
11
  };
12

13
  let result = operations[operation]?.(num1, num2);
14

15
  document.body.innerHTML += `<p>Result: ${result !== undefined ? result : "Invalid operation"}</p>`;
16
}

展开收起

Foundations of Security Week3 Lecture

Tue, 24 Mar 2026 00:00:00 GMT

Fermat’s Theorem and Euler’s Theorem#

Lecture Outline#

Introduction to Fermat’s Theorem
Conditions for applying Fermat’s Theorem
Examples of Fermat’s Theorem in modular arithmetic
Introduction to Euler’s Totient Function and computing totient values
Introduction to Euler’s Theorem
Conditions for applying Euler’s Theorem

Learning Outcomes#

By the end of this lecture, students should be able to:

Explain the concept of Fermat’s Theorem
Identify the conditions required to apply Fermat’s Theorem
Apply Fermat’s Theorem to simplify modular exponentiation
Define Euler’s Totient Function & Calculate the totient value of a number
Apply Euler’s Theorem to solve modular exponentiation problems

Fermat’s Theorem#

Before discussing what Fermat’s Theorem entails, consider the calculation of 213522 mod 523213^{522}\bmod523213522mod523. This might seem difficult due to the size of the numbers, but with Fermat’s Theorem, we can find a simple solution.

The Magic of Fermat’s Theorem:
The result of 213522 mod 523\textcolor{blue}{213^{522}\bmod523}213522mod523 is 1.

Applying Fermat’s Theorem:
Fermat’s Theorem states that if p is a prime number and a is an integer not divisible by p, then ap−1≡1 mod p\textcolor{red}{a^{p-1} \equiv 1 \bmod p}ap−1≡1modp Given 523 is a prime number, any number raised to 522 (which is 523-1) modulo 523 will result in 1, according to Fermat’s Theorem. a522≡1 mod 523\textcolor{blue}{a^{522}\equiv1\bmod523}a522≡1mod523

This property exemplifies the theorem’s practicality, showing that even without direct calculation, we can determine that 213522 mod 523=1\textcolor{blue}{213^{522} \bmod 523 = 1}213522mod523=1 because 213522\textcolor{blue}{213^{522}}213522 is congruent to 1522 mod 523\textcolor{blue}{1^{522}}\bmod\textcolor{blue}{523}1522mod523, which simplifies to 1.

Preconditions for Applying Fermat’s Theorem:

Check if p is a prime number: Fermat’s Theorem only applies if p is prime.
Ensure a is not divisible by p: a must be an integer that p does not divide for the theorem to hold.
If these conditions are met, then ap−1≡1 mod p\textcolor{red}{a^{p-1} \equiv 1 \bmod p}ap−1≡1modp

Example:
Let a=2 and p=3. Since p is prime and a is not divisible by p, we can apply Fermat’s Theorem.
Calculation:
Compute 23−1 mod 3\textcolor{blue}{2^{3-1}\bmod3}23−1mod3:
22=4\textcolor{blue}{2^2 = 4}22=4
4 mod 3=1\textcolor{blue}{4\bmod3 = 1}4mod3=1
Result:
As expected, 23−1 mod 3=1\textcolor{blue}{2^{3-1}\bmod3 = 1}23−1mod3=1, proving the theorem’s validity in this case.

Example Application
Given: a = 2, p = 11
Objective: Verify the conditions and apply Fermat’s Theorem.
Conditions:
p should be a prime number.
a should not be divisible by p.
Solution: p = 11 is a prime number. a = 2 is not divisible by 11. These conditions allow us to apply Fermat’s Theorem, which states ap−1≡1 mod p\textcolor{red}{a^{p-1} \equiv 1 \bmod p}ap−1≡1modp.

Example (confirming)
Compute: 211−1 mod 11\textcolor{blue}{2^{11-1}\bmod11}211−1mod11
210 mod 11\textcolor{blue}{2^{10}\bmod11}210mod11
Calculating 210=1024\textcolor{blue}{2^{10} = 1024}210=1024
1024 mod 11=1\textcolor{blue}{1024\bmod11 = 1}1024mod11=1
Result: 210 mod 11=1\mathbf{2^{10}\bmod11 = 1}210mod11=1, confirming the theorem.

Euler’s Totient Function#

Introduction:
Euler’s totient function, denoted as φ(n)\textcolor{blue}{\varphi(n)}φ(n), counts the number of integers between 1 and nnn inclusive that are co-prime to nnn. This means they share no common divisors with nnn other than 1.

Formula: φ(n)={x∈N:1≤x<n and gcd⁡(x,n)=1}\varphi(n) = \{x \in \mathbb{N} : 1 \le x < n \text{ and } \gcd(x,n) = 1\}φ(n)={x∈N:1≤x<n and gcd(x,n)=1}

Example Calculation - φ(6)\mathbf{\varphi(6)}φ(6):

Consider the integers from 1 to 6: {1, 2, 3, 4, 5, 6}.
Determine which numbers are co-prime to 6 by checking if their gcd with 6 is 1:

gcd⁡(1,6)=1\gcd(1,6) = 1gcd(1,6)=1
gcd⁡(2,6)=2\gcd(2,6) = 2gcd(2,6)=2 (not co-prime)
gcd⁡(3,6)=3\gcd(3,6) = 3gcd(3,6)=3 (not co-prime)
gcd⁡(4,6)=2\gcd(4,6) = 2gcd(4,6)=2 (not co-prime)
gcd⁡(5,6)=1\gcd(5,6) = 1gcd(5,6)=1
gcd⁡(6,6)=6\gcd(6,6) = 6gcd(6,6)=6 (not co-prime)

Result:

Only 1 and 5 are co-prime to 6.
Therefore, φ(6)=2\textcolor{red}{\varphi(6) = 2}φ(6)=2.

Exercise:

Find the value of φ(9)\mathbf{\varphi(9)}φ(9).
Find the value of φ(12)\mathbf{\varphi(12)}φ(12).

Properties of Euler’s Totient Function:

Prime Numbers: If ppp is a prime number, gcd⁡(p,q)=1\gcd(p,q) = 1gcd(p,q)=1 for all 1≤q<p1 \le q < p1≤q<p. Thus, φ(p)=p−1\textcolor{blue}{\varphi(p) = p-1}φ(p)=p−1.
Power of Primes: For a prime number ppp and any integer k≥1\textcolor{blue}{k \ge 1}k≥1, exactly pk−1\mathbf{ p^{k-1} }pk−1 numbers between 1 and pk\mathbf{p^k}pk are divisible by p\mathbf{p}p. This results in: φ(pk)=pk−pk−1\textcolor{blue}{ \varphi(p^k)= p^k - p^{k-1} }φ(pk)=pk−pk−1.
Product of Co-prime Numbers: If a\textcolor{blue}{a}a and b\textcolor{blue}{b}b are relatively prime, then φ(ab)=φ(a)⋅φ(b)\textcolor{blue}{\varphi(ab) = \varphi(a) \cdot \varphi(b)}φ(ab)=φ(a)⋅φ(b)

First Property of Euler’s Totient Function:

Prime Numbers: If ppp is a prime number, gcd⁡(p,q)=1\gcd(p,q)=1gcd(p,q)=1 for all 1≤q<p1 \le q < p1≤q<p. Thus, φ(p)=p−1\textcolor{blue}{\varphi(p) = p-1}φ(p)=p−1. Example: Understanding φ(5)\mathbf{\varphi(5)}φ(5) through simple computation:
The set {1,2,3,4,5} includes integers less than 5.
gcd⁡(1,5)=gcd⁡(2,5)=gcd⁡(3,5)=gcd⁡(4,5)=1\mathbf{\gcd(1,5) = \gcd(2,5) = \gcd(3,5) = \gcd(4,5) = 1}gcd(1,5)=gcd(2,5)=gcd(3,5)=gcd(4,5)=1; gcd⁡(5,5)=5\gcd(5,5)=5gcd(5,5)=5.
Thus, four numbers are co-prime with 5, resulting in φ(5)=4\mathbf{\varphi(5)=4}φ(5)=4.

Clarification using φ(23)\mathbf{\varphi(23)}φ(23):

For prime number 23, every number from 1 to 22 is co-prime with 23.
Thus, φ(23)=23−1=22\mathbf{\varphi(23)= 23 - 1 = 22}φ(23)=23−1=22.

Second Property of Euler’s Totient Function:

Power of Primes: For a prime number p\textcolor{blue}{p}p and any integer k≥1\textcolor{blue}{k \ge 1}k≥1, exactly pk−1p^{k-1}pk−1 numbers between 1 and pk\mathbf{p^k}pk are divisible by p\mathbf{p}p. This results in: φ(pk)=pk−pk−1\textcolor{blue}{ \varphi(p^k)= p^k - p^{k-1} }φ(pk)=pk−pk−1.

Example: Calculate φ(23)\mathbf{\varphi(2^3)}φ(23):

Theorem: From φ(pk)=pk−pk−1\textcolor{blue}{ \varphi(p^k)= p^k - p^{k-1} }φ(pk)=pk−pk−1, for p=2\mathbf{p=2}p=2 and k=3\mathbf{k=3}k=3, we have:
φ(23)=23−23−1=8−4=4\mathbf{\varphi(2^3) = 2^3 - 2^{3-1} = 8 - 4 = 4}φ(23)=23−23−1=8−4=4
Verification: Considering the set {1, 2, 3, 4, 5, 6, 7, 8}, the numbers co-prime with 8 are 1, 3, 5, 7.
The gcd⁡\gcdgcd of 1, 3, 5, 7 with 8 is 1, confirming that φ(8)=4\textcolor{red}{\varphi(8) = 4}φ(8)=4.

Third Property of Euler’s Totient Function:

Product of Co-prime Numbers: If a\textcolor{blue}{a}a and b\textcolor{blue}{b}b are relatively prime, then φ(ab)=φ(a)⋅φ(b)\textcolor{blue}{\varphi(ab) = \varphi(a) \cdot \varphi(b)}φ(ab)=φ(a)⋅φ(b).
Example: Calculate φ(15)\mathbf{\varphi(15)}φ(15) where a=3\mathbf{a = 3}a=3 and b=5\mathbf{b = 5}b=5 (since gcd⁡(3,5)=1\gcd(3,5)=1gcd(3,5)=1, 3 and 5 are relatively prime):
Calculation: From the properties, φ(15)=φ(3)⋅φ(5)=(3−1)⋅(5−1)=2⋅4=8\mathbf{\varphi(15) = \varphi(3) \cdot \varphi(5) = (3-1) \cdot (5-1) = 2 \cdot 4 = 8}φ(15)=φ(3)⋅φ(5)=(3−1)⋅(5−1)=2⋅4=8

Important Note: a\textcolor{blue}{a}a and b\textcolor{blue}{b}b must be distinct and co-prime for this property to apply.
For instance, φ(49)\mathbf{\varphi(49)}φ(49), which is 72\mathbf{7^2}72, should be calculated using the property for prime powers, not as φ(7)⋅φ(7)\mathbf{\varphi(7) \cdot \varphi(7)}φ(7)⋅φ(7):

Correct Approach: Using the second property, φ(49)=φ(72)=72−72−1=49−7=42\mathbf{ \varphi (49) = \varphi(7^2) = 7^2 - 7^{2-1} = 49 - 7 = \textcolor{red}{42} }φ(49)=φ(72)=72−72−1=49−7=42
Product of Co-prime Numbers: If a\textcolor{blue}{a}a and b\textcolor{blue}{b}b are relatively prime, then φ(ab)=φ(a)⋅φ(b)\textcolor{blue}{\varphi(ab) = \varphi(a) \cdot \varphi(b)}φ(ab)=φ(a)⋅φ(b).

Another Example: Calculate φ(6)\varphi(6)φ(6), where 6=2×36=2\times36=2×3:
Calculation: Since 2 and 3 are co-prime, φ(6)=φ(2)⋅φ(3)=1⋅2=2\mathbf{ \varphi(6)= \varphi(2) \cdot \varphi(3) = 1 \cdot 2 = \textcolor{red}{2} }φ(6)=φ(2)⋅φ(3)=1⋅2=2

Assignment: Complete these exercise and submit during seminar class

Calculate the Euler’s Totient Function φ(n)\varphi(n)φ(n) for the given numbers:

φ(20)\varphi(20)φ(20)
φ(21)\varphi(21)φ(21)
φ(19)\varphi(19)φ(19)
φ(95)\varphi(95)φ(95)
φ(55)\varphi(55)φ(55)
φ(29)\varphi(29)φ(29)
φ(101)\varphi(101)φ(101)
φ(47)\varphi(47)φ(47)

Show how you computed your answers.
Only handwritten solutions.
No copy-paste will be accepted.

Euler’s Theorem#

It states that if a\textcolor{blue}{a}a and m\textcolor{blue}{m}m are co-prime (i.e., gcd⁡(a,m)=1\mathbf{\gcd(a,m)=1}gcd(a,m)=1), then aaa raised to the power of Euler’s totient function φ(m)\mathbf{\varphi(m)}φ(m) is congruent to 1 modulo mmm: aφ(m)≡1 mod m\textcolor{red}{a^{\varphi(m)} \equiv 1 \bmod m}aφ(m)≡1modm For the given example where a=3\mathbf{a=3}a=3 and m=10\mathbf{m=10}m=10:
Checking if co-prime:
- The gcd of 3 and 10 is 1, which confirms that 3 and 10 are co-prime.
Apply Euler’s Theorem:
- We first calculate φ(10)\mathbf{\varphi(10)}φ(10), where 10=2×5\mathbf{10 = 2 \times 5}10=2×5, and using the formula for Euler’s Totient function,
- Calculation of φ(10)\varphi(10)φ(10): Since 10 is the product of two distinct prime numbers, φ(10)\varphi(10)φ(10) is calculated as:
  φ(ab)=φ(a)⋅φ(b)\mathbf{\varphi(ab) = \varphi(a) \cdot \varphi(b)}φ(ab)=φ(a)⋅φ(b)
  φ(10)=φ(2)⋅φ(5)=(2−1)⋅(5−1)=1×4=4\mathbf{\varphi(10) = \varphi(2) \cdot \varphi(5) = (2-1) \cdot (5-1) = 1 \times 4 = 4}φ(10)=φ(2)⋅φ(5)=(2−1)⋅(5−1)=1×4=4
- Now from aφ(m)≡1 mod m\textcolor{red}{a^{\varphi(m)} \equiv 1 \bmod m}aφ(m)≡1modm we show that 34≡1 mod 10\textcolor{red}{3^4 \equiv 1 \bmod 10}34≡1mod10
  34 mod 10=81 mod 10=1 mod 103^4\bmod10 = 81\bmod10 = 1\bmod1034mod10=81mod10=1mod10 This confirms that 34≡1 mod 10\mathbf{3^4\equiv1\bmod10}34≡1mod10, thus validating Euler’s Theorem.

Assignment#

Complete this exercise and submit during seminar class
Find a number between 0 and 16 congruent to 5234 mod 17\textcolor{red}{5^{234}\bmod17}5234mod17 using Fermat’s Little Theorem and Modular Exponentiation.

Data Structures and Algorithms Week3: Associative Arrays and Hash tables

Mon, 23 Mar 2026 00:00:00 GMT

Associative Arrays#

Array#

An array maps an index (usually an integer) to an element, of any type.
Arrays in Java have indexes starting at 0.
Access by indexing

1
a[i] /* 0 <= i < size */

An array is a function from natural numbers to elements all of the same type.

So can we use an array every time we want to connect numbers to values?

Actual example: exam scoring#

Class of about 300 students
Student numbers 5 digits
Students usually marked once, or sometimes twice (borderline).
Program to check that no student marked more than twice

1
static final int range = 100000; // 5-digit numbers
2
int [ ] timesMarked= new int [range];
3
for (int i= 0; i != range ; i++) timesMarked[i] = 0;
4
…
5
timesMarked[studentNum]= timesMarked[studentNum] + 1;

Very sparsely used array!
0.3% of array is used! Very space-inefficient.

We need to map a key to a value#

Example:
link (‘map’) key (student number) to value (student information).
This is called a mapping.
At most one value for any key.
Also called a function, from key to value.

Example: email-address lookup#

“Sharon” → “sharoncurtis@brookes.ac.uk"
"David” → “dlightfoot@brookes.ac.uk"
"Ian” → “ibayley@brookes.ac.uk”
Pronounce ”→” as “maps to”

Associative array#

ADT(abstract data type)
- An associative array is an abstract data type
- it is composed of a collection of unique keys and a collection of values, where each key is associated with one value (or set of values).

graph LR ADT --> Associative_array["Associative array"] ADT --> Associative_container["Associative container"] ADT --> map["map"] ADT --> mapping["mapping"] ADT --> dictionary["dictionary"] ADT --> Finite_map["Finite map"] ADT --> Index_file["Index file"]

The operation of finding the value associated with a key is called a lookup or indexing, and this is the most important operation supported by an associative array.
The relationship between a key and its value is sometimes called a mapping or binding. For example, if the value associated with the key “bob” is 7, we say that our array maps “bob” to 7.
Associative arrays are very closely related to the mathematical concept of a function with a finite domain.

Possible example: sequence of entries#

1
public class DelegateSeq implements IDelegateDB {
2
    private Delegate[] table;
3
    private final static int tableSize = 10; // or whatever
4
    private int numEntries;
5
    public DelegateSeq() {
6
        System.out.println("Simple sequence");
7
        table = new Delegate[tableSize];
8
        clearDB();
9
    }
10
    public void clearDB() {
11
        numEntries = 0;
12
    }
13
}

Sequence of entries : put#

1
public Delegate put(Delegate delegate) {
2
    assert numEntries != tableSize; // very simple
3
    assert delegate != null;
4
    String name = delegate.getName();
5
    assert name != null && !name.equals("");
6
    Delegate previous;
7
    int pos = findPos(name);
8
    // we have to check not already in table. Time efficiency of findPos? (next slide)
9
    if (pos == numEntries) { // new
10
        numEntries++;
11
        previous = null;
12
    } else {
13
        previous = table[pos];
14
    }
15
    table[pos] = delegate;
16
    return previous;
17
}

展开收起

Sequence of entries: findPos#

1
private int findPos(String name) {
2
    assert name != null && !name.equals("");
3
    int i = 0;
4
    while (i != numEntries && !table[i].getName().equals(name))
5
        i++;
6
    return i;
7
}

time complexity of findPos?
Simple linear search: O(n)
So put (and also get) have linear time complexity.

Simple sequence gives O(n) behaviour#

Can be improved by using an ordered sequence.
Then we can use a binary search.

Ordered sequence: findPos#

1
private int findPos(String name) {
2
    // returns position where name is, or would go
3
    assert name != null && !name.equals("");
4
    int left = 0, right = numEntries;
5
    while (left != right) {
6
        int mid = (left + right) / 2;
7
        if (name.compareTo(table[mid].getName()) > 0) left = mid + 1;
8
        else right = mid;
9
    }
10
    return left; // or right, since left == right
11
}

This is a binary search, so O(log n) – much better than unordered

Ordered sequence: put#

1
public Delegate put(Delegate delegate) {
2
    // assertions as before
3
    Delegate previous;
4
    int pos = findPos(name);
5
    if (pos == numEntries || !name.equals(table[pos].getName())) { // new
6
        int i = numEntries;
7
        while (i != pos) { // ‘budging up’ to keep the table ordered
8
            table[i] = table[i-1]; i--;
9
        }
10
        numEntries++;
11
        previous = null;
12
    } else {
13
        previous = table[pos];
14
    }
15
    table[pos] = delegate;
16
    return previous;
17
}

展开收起

But the ‘budging up’ is O(n), so not much improvement.

Ordered not much improvement#

Self indexing can be O(1) – constant time. But works only in very special cases.
- But leads to very sparse use of space in most cases.
- But leads to very sparse use of space in most cases.
Using a sequence works OK, but has O(n) time complexity.
Ordered sequence is better: put is O(n), but get is O(log n) because of the binary search.
But we want O(1) in all cases.

Answer: Hash tables#

Hans Peter Luhn IBM, 1954
Very clever idea!

We will see how they are made available in the Java Base-Class Library (API) and also how they work.

https://spectrum.ieee.org/tech-history/silicon-revolution/hans-peter-luhn-and-the-birth-of-the-hashing-algorithm

Hans Peter Luhn

Java API HashMap : Method Summary#

void clear() Removes all mappings from this map.
boolean containsKey(K key) Returns true if this map contains a mapping for the specified key.
boolean containsValue(V value) Returns true if this map maps one or more keys to the specified value.
V get(K key) Returns the value to which the specified key is mapped in this identity hash map, or null if the map contains no mapping for this key.
boolean isEmpty() Returns true if this map contains no key-value mappings.
Set<K> keySet() Returns a set view of the keys contained in this map.
V put(K key, V value) Associates the specified value with the specified key in this map.
(Returns the old discarded value – same with remove below)
V remove(K key) Removes the mapping for this key from this map if present.
int size() Returns the number of key-value mappings in this map.
Collection<V> values() Returns a collection view of the values contained in this map.

Hash tables#

Vocabulary

retrieve 检索

modulo 取模

quadratic probing 平方探查

load factor 负载因子

Hash tables (associative arrays)#

Content topics:
- Hashing
- Hash functions
- Collision resolution
  - Probing (open addressing)
  - Chaining

Typical scenario#

Fast storage and searching of large tables, lists, databases etc
Need to minimize processing operations (comparisons and index calculations) per search
Numerous application areas for fast table-lookup
For example:
databases, dictionaries, compiler symbol table, search engines, password lookup …

What’s the problem#

How to store and then be able to locate items from a large data set very quickly
The problem is whatever search methods we use, the following fact will not change:
The more data we have, the slower the access

What’s the problem - realistic demand#

The more data we have, the slower the access
For example:
- Suppose a compiler allows 6-character symbol names that start with an upper-case letter (A-Z) followed by 5 alpha-numeric (0-9, A-Z)
- How many possible symbol names could there possibly be?
- Answer: 261×365=1,572,120,57626^1 \times 36^5 = 1,572,120,576261×365=1,572,120,576 or approximately 1.572×1091.572 \times 10^91.572×109
- It would not be sensible to allocate this amount (1.572×1091.572 \times 10^91.572×109) of memory and use fewer than 10,000 elements (an amount of elements that a program usually handles)

A 16-digit bank card

For example:
- How many possible accounts
  - 101610^{16}1016
- World population
  - 8068351220≈8.07×1098068351220 \approx 8.07 \times 10^98068351220≈8.07×109
- Proportion of accounts we may use
  - 8.07×109−168.07 \times 10^{9-16}8.07×109−16
  - 0.0000807%0.0000807\%0.0000807% Too wasteful
    No necessary

What’s the problem- efficiency#

Linear search
- With N items on average, we need to trawl through N/2 of them to find the one we want. So a linear search is O(N)
- With twice the number of data items, the search time doubles

xychart-beta title "T = a + bN (Series 1)" x-axis "number of items, N" [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17] y-axis "search time" 0 --> 120 line "T = a + bN" [7,14,21,28,35,42,49,56,63,70,77,84,91,98,105,112,119]

Binary Search
- This is the technique we use to find an entry in a telephone directory in which the entries are sorted. The complexity of the binary search is O(logN)

graph LR R[ ] --> A[ ] R[ ] --> B[ ] A[ ] --> A1[ ] A[ ] --> A2[ ] A1[ ] --> X1[ ] A1[ ] --> X2[ ] A2[ ] --> X3[ ] A2[ ] --> X4[ ] B[ ] --> B1[ ] B[ ] --> B2[ ] B1[ ] --> X5[ ] B1[ ] --> X6[ ] B2[ ] --> X7[ ] B2[ ] --> X8[ ]

xychart-beta title "T = a log₂N (Series1)" x-axis "number of items, N" [1,5,9,13,17,21,25,29,33,37,41,45,49,53,57,61,65,69,73,77,81,85,89,93,97] y-axis "search time" 0 --> 7 line "T = a log₂N" [0.00,2.32,3.17,3.70,4.09,4.39,4.64,4.86,5.04,5.21,5.36,5.49,5.61,5.73,5.83,5.93,6.02,6.11,6.19,6.27,6.34,6.41,6.48,6.54,6.60]

Search-Algorithm Performance#

Linear search is O(N) – is the worst-possible case, linear time
Binary search is O(log N) – is better, logarithmic time, but requires data to be sorted
What we desire is O(1) or O(N⁰)
- i.e. search time is constant, independent of data size N
- so we can reach any data in a fixed number of operations, i.e. constant time

’Associative’ array#

Suitable data structures for associative array:
- Binary search tree [O(logn)]
- Hash table [O(1)]

‘Hashing’#

‘Messing things up’, for example:
- Corned-beef hash // 玉米牛肉糜
- Hash brown potatoes // 薯饼
Hence the meat-mincing machine in next slide…
Hashing for CS:
A method of transforming a search key into an address, for the purpose of fast and efficient storage and retrieval of data items.

Example: finding someone quickly#

How does hashing work#

Instead of storing each new data item in the next free memory location, we need to find a way to find its storage location based on a key value from the data content.
That way we will be able to locate each data item, using its key value.

Hashing:
The process of build a relationship between constant numbers (such as 1, 2, 3…) and particular content.

So the location to store/find a data item is obtained using a hash function applied to the data item (key) value
The hash function maps a key to an arbitrary (but not ‘random’) integer ‘bucket number’

What is a hash function#

Hash function(method):
- The way/method to convey the particular contents into constant numbers.

A hashing example#

Lets’ store some names of a few people in a table of size 12, so index 0 to 11 in Java
The key value for each person is simply the name string, e.g. “ChrisC”
The hash function is obtained from the sum of the ASCII codes of the characters in each string.

ASCII codes for letters
A	B	C	D	E	F	G	H	I	J	K	L	M
65	66	67	68	69	70	71	72	73	74	75	76	77
N	O	P	Q	R	S	T	U	V	W	X	Y	Z
78	79	80	81	82	83	84	85	86	87	88	89	90
a	b	c	d	e	f	g	h	i	j	k	l	m
97	98	99	100	101	102	103	104	105	106	107	108	109
n	o	p	q	r	s	t	u	v	w	x	y	z
110	111	112	113	114	115	116	117	118	119	120	121	122

C	h	r	i	s	C
67	104	114	105	115	67

To obtain an index in the range 0 to 11 calculate: character code sum, modulo 12
So, hash = (sum of ASCII codes for each character in string) modulo 12 (% operator)
Range of hash index is 0 to 11

Hash value for “ChrisC”
Sum of character codes: 67 + 104 + 114 + 105 + 115 + 67 = 572
572 mod 12 is 8
So hash value is 8

Similarly:

“ChrisC” → 8
“SharonC“→ 2
“DavidL“→ 0
“IanB“→ 10

Simple Hashing#

Too-simple hash function#

1
int hashFirstChar(String s) { // just value of first character
2
    return s.charAt(0) % tableSize;
3
    // mod tableSize gives a value in range 0 .. tableSize-1
4
}

(Can do the % tableSize later instead)

This hash function has problem: names starting with same letter all have same hash value!

Modify simple hash function-v1#

1
final int tableSize = 12; // for example
2
private static int hashSum(String key) {
3
    int hashValue = 0;
4
    for(int j = 0; j != key.length(); j++)
5
        hashValue = hashValue + (int)key.charAt(j);
6
    return hashValue; // or hashValue % tableSize here or later
7
}

This hash function still has problem: Different names with same letters hash to same value! hashSum("marcel") = hashSum("carmel") = 628

Modify simple hash function-v2#

1
private static int hashWeighted(String key) {
2
    int hashValue = 0;
3
    for(int j = 0; j != key.length(); j++)
4
        hashValue = j * hashValue + (int)key.charAt(j);
5
        // "j *" here is weighting
6
    return hashValue;
7
}

hashWeighted(“marcel”) = 34153
hashWeighted (“carmel”) = 33153
This hash function still has problem

Danger! Overflow ahead!#

hashWeighted(“Brzeczyszczykiewicz”)
= 1,876,978,831,955,724,338
But biggest integer in 32 bits, Integer.MAX_VALUE
= 2,147,483,647 Numeric overflow! Can crash program.

Possible solution avoiding overflow#

1
private static int hashWeighted(String key) {
2
    int hashValue = 0;
3
    for(int j = 0; j != key.length(); j++)
4
        hashValue = (j * hashValue + (int)key.charAt(j)) % tableSize;
5
    return hashValue;
6
}

Some examples of hashing functions#

Division:
h(k) is the remainder (modulus) of key k after division by the size of the table, s.
h(k) = k % s; if k = 7155, s = 97 then h(k) = 74
Truncation:
Take a few of the first or last characters of the key as the hash code. Can work well, provided the characters are evenly distributed.

Mid-square:
the key is squared and the middle digits of the result are used as the hashed value.
k = 7155; k² = 51194025; h(k) = 94 (from 511 94 025)
Folding:
the key is partitioned into several parts and the sum of the parts is used to produce the hash code
k = 7155; 71 + 55 → 126 or 17 + 55 → 72
……

Practice: calculate your name hash value#

Store some names of a group students, so table size should be 26, the key value for each one is simply the name string, e.g. “Tony”
The hash function is Division:
- k is the sum of the ASCII codes of the letters in the name string;
- h(k) is the remainder (modulus) of key k after division by the size of the table, s.
  h(k) = k % s; s = 26

ASCII codes for letters
A	B	C	D	E	F	G	H	I	J	K	L	M
65	66	67	68	69	70	71	72	73	74	75	76	77
N	O	P	Q	R	S	T	U	V	W	X	Y	Z
78	79	80	81	82	83	84	85	86	87	88	89	90
a	b	c	d	e	f	g	h	i	j	k	l	m
97	98	99	100	101	102	103	104	105	106	107	108	109
n	o	p	q	r	s	t	u	v	w	x	y	z
110	111	112	113	114	115	116	117	118	119	120	121	122

Practice#

Design your own hash method
- to calculate the hash value for your name string
- should be different from the example method mentioned above
- try to use easy way

The most handsome boy/most beautiful girl demonstrate

Summary Quiz

https://ks.wjx.top/vm/ttamyHO.aspx

Simple Hashing – with Hash Clash#

Search(Retrieval)#

Use the same hashing function and collision-resolution method as for inserting.
At best can get O(1) – constant time.

Can’t do better than that!

Perfect hash function#

A perfect hash function gives no collisions:
For all x and y:

graph LR A["x ≠ y"] --> B["hash(x) ≠ hash(y)"]

Possible if you know the data.
Collision is when two or more keys have the same hash value.
Rarely possible, but for example in a compiler,
determine whether identifier is a reserved word.
We know all the reserved words, so can construct a perfect hash function.

Desirable characteristics of a hashing function#

Quick to calculate
Gives good spread – different keys map to different bucket/slot numbers (positions in the table)
A perfect hashing function maps every key to a different bucket/slot number
but in practice, sometimes get a ‘clash’ 💣 – more than one key is mapped to the same bucket number.

More about hash functions#

The hash function can potentially generate any hash table index, 0..TableSize-1 so we often use the modulo (%) operator to restrict the hash function range
A hash function directs us to a single storage location for a particular data key value
If we could guarantee that each possible key value maps on to a unique entry (1:1 mapping) then our hashing would be perfect.
Because the hash table in practice is limited in size, and the difficulty of ensuring one-to-one mapping, we need to allow for collisions.

Try to reduce collisions!
Impossible to eliminate!

One Java built-in `hashCode()` method#

hashCode(s)=s[0]×31(n−1)+s[1]×31(n−2)+⋯+s[n−1]×310\text{hashCode}(s) = s[0] \times 31^{(n-1)} + s[1] \times 31^{(n-2)} + \dots + s[n-1] \times 31^0hashCode(s)=s[0]×31(n−1)+s[1]×31(n−2)+⋯+s[n−1]×310
e.g.e.g.e.g.
hashcode(′′A′′)=65\text{hashcode}(^{\prime\prime}\text{A}^{\prime\prime}) = 65hashcode(′′A′′)=65
hashcode(′′AB′′)=65×311+66=2081\text{hashcode}(^{\prime\prime}\text{AB}^{\prime\prime}) = 65 \times 31^1 + 66 = 2081hashcode(′′AB′′)=65×311+66=2081
hashcode(′′ABC′′)=65×312+66×311+67=64578\text{hashcode}(^{\prime\prime}\text{ABC}^{\prime\prime}) = 65 \times 31^2 + 66 \times 31^1 + 67 = 64578hashcode(′′ABC′′)=65×312+66×311+67=64578
Beware numeric overflow! Use % early.

1
public class Hash10 {
2
    public static void main(String[] args) {
3
        System.out.println("hashCode(\"A\")="+"A".hashCode());
4
        System.out.println("hashCode(\"AB\")="+"AB".hashCode());
5
        System.out.println("hashCode(\"ABC\")="+"ABC".hashCode());
6
        System.out.println("hashCode(\"ABCD\")="+"ABCD".hashCode());
7
    }
8
}

result:

Terminal window

1
hashCode("A")=65
2
hashCode("AB")=2081
3
hashCode("ABC")=64578
4
hashCode("ABCD")=2001986

Probability of hash clashes#

What is the probability that 2 (or more) people in a group of n share a birthday month?
Assume that birthdays are equally and randomly distributed over 12 months. Q(n) = probability that n people have distinct birthday months
Q(2) = 11/12 = 0.9166
Q(3) = 11/12 x 10/12 = 0.7639
Q(4) = 11/12 x 10/12 x 9/12 = 0.5729
etc

P(n) = 1-Q(n) = probability that 2 or more people of the n share a birthday month, so
P(2) = 0.0834
P(3) = 0.236
P(4) = 0.427
P(5) = 0.618
P(6) = 0.777
etc.

5 people > 50%

xychart-beta title "birthday months problem" x-axis "n" [0,2,4,6,8,10,12] y-axis "P(x)" 0 --> 1.0 line "Series1" [0,0.1,0.3,0.6,0.85,0.95,1.0]

Probabilities of clashes in Hash Table#

A surprising example:
- Create a hash table with Table_Size=1,000,000 entries (index 0..Table_Size-1)
- Hash function creates an arbitrary index number (based on the key value) that is uniformly distributed in the range 0..Table_Size-1
- Keep adding hash entries to the table
- The probability that a collision will occur before 2,500 entries are made is 95%, i.e. when the table is only 0.25% full
Conclusion: clashes can occur more frequently than we might intuitively expect.

Collision Resolution – Linear probing#

Hash collisions can be resolved by probing to find an alternative location.
- If a collision occurs [hash(key1)=hash(key2)] look for next table entry that is free
- First calculate:
  - Index1 = hash(Key) (which cell is not available)
  - hash(key) maps to range 0 ..Table_Size-1
- Next calculate
  - Index2 =(Index1 + probe) % Table_Size
- repeating with probe = 1,2,3,.. until a vacant entry is found (probe function)

primary clustering has occurred for keys that hash to index 93 and 94

Hash collisions can be resolved by probing to find an alternative location.
- Advantages:
  - resolves hash clash
  - simple algorithm
- Disadvantages:
  - local clustering around the primary key (termed primary clustering, such as key1~key6)
  - deletion is tricky (it leaves holes)

Linear probing - Number of probes#

the data is stored within the hash table (also called ‘closed hashing’).
We want to increase efficiency for probing = easy to find a vacant cell to store the hash value
= give more space than the storage required

which one is easier to find a vacant cell to store hash code for key1~key6 (collision existed)

Collision resolution: Open addressing#

Open addressing
The average number of probes for a search depends critically on the hash-table load factor, L
L = number_of_items_in_table / Table_Size often expressed as a percentage
Therefore the maximum capacity is simply the hash table size, and maximum load factor is 1.0.

Linear probing - Number of probes#

The average number of probes for a search depends critically on the hash-table load factor
Average number of probes calculation is complex to derive

xychart-beta title "average number of probes" x-axis "load factor" [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0] y-axis "log(number of probes)" 0 --> 2.5 line "successful search" [0, 0.05, 0.12, 0.20, 0.30, 0.42, 0.56, 0.73, 0.94, 1.20, 1.50] line "unsuccessful search" [0, 0.15, 0.32, 0.55, 0.85, 1.22, 1.68, 2.10, 2.45]

To solve clustering#

Primary clustering
- When keys hash to the same location and are then stored close by – this leads to primary clustering
- Avoid by allowing the probe function to provide a greater spread of keys
Secondary clustering
- When keys hash to the same index and then follow the same probe sequence (same offset), this leads to secondary clustering
- Avoid with probe offset being non-linear (quadratic) or a function of the key (double hashing)

To solve clustering– Quadratic Probing#

As linear probing but instead of looking for next table entry, we move in jumps of a size involving the square of the probe integer
- First calculate:
  Index1 = hash(Key) (which is not available)
- Next calculate
  Index2 = (Index1 + i²) mod Table_Size
  with i=1,2,3, …
- So jump on by 1, 4, 9, 16, 25 …

Advantages:
- As linear and pseudo-random probing but primary clustering is reduced.
- Also simpler than pseudo-random probing
Disadvantage:
- (of all probing methods) is a degraded performance when the table starts to become full.
- Can lead to infinite loop since empty cells might be repeatedly skipped over. Need to detect this and avoid it. (OK if load factor < 50%.)

To solve clustering– Double Hashing#

can avoid both primary and secondary clustering.
uses two hash functions: initial hash, and probe
Index1 = hash(key)
{ideally maps to 0..Table_Size-1}
If Index1 entry is occupied use a probe function to locate a vacant position
Index2 = (Index1 + i * probe(key)) % Table_Size
(note probe(key) computed only once)
Probe index i = 1, 2, 3,… until a vacant position is found – but you should limit the number of probes to avoid wrap around to the same index and thus possible infinite loop.

Can require fewer probes, giving better performance than linear probing
Ensure probe(key) > 0 , ideally probe(key) maps to 1..Table_Size-1 Linear probing is double hashing when
probe(key) = ? 1

Double hashing#

Double hashing:
hash is the first function
probe is the second function

Open-Addressing Hashing Efficiency#

Average steps of probes

method	successful searches	unsuccessful searches
load factor	50%	80%	90%	50%	80%	90%
linear probing	1.5	3.0	5.5	2.5	13.0	50.0
quadratic probing	1.4	2.2	2.9	2.2	5.8	11.4
double hashing	1.4	2.0	2.6	2.0	5.0	10.0

collision resolution: chaining#

Separate chaining
- start a linked list to store the data for each key for that maps to the hash-table location
- each hash table entry can then accommodate a list of key values that share the same hash value
Since each hash table entry can be a list there is no limit to the hash-table capacity, so the load factor may exceed 1.0.

Linked lists within the hash table handle collisions
Alternative to ‘open addressing’, Linked list of all elements whose keys have same hash index.

collision resolution: chaining example#

1
import java.util.LinkedList;
2
import java.util.ListIterator;
3
public class Hash11 {
4
    public static void main(String[] args) {
5
        final int HTS = 12; // hash table size
6
        LinkedList[] staff=new LinkedList[HTS];
7
        for(int i=0; i<HTS; i++)
8
            staff[i]=new LinkedList();
9
        addStaff(staff,"Sharon");
10
        addStaff(staff,"Chris");
11
        addStaff(staff,"Ian");
12
        addStaff(staff,"David");
13
        addStaff(staff,"Peter");
14
        addStaff(staff,"Muhammad");
15
        addStaff(staff,"Arantza");
16
        addStaff(staff,"Ken");
17
        addStaff(staff,"Richard");
18
        addStaff(staff,"Hong");
19
        addStaff(staff,"William");
20
        addStaff(staff,"Mark");
21
        addStaff(staff,"Bob");
22
        addStaff(staff,"Clare");
23
        addStaff(staff,"Faye");
24
        ListIterator iterator=staff[0].listIterator();
25
        for(int i=0; i<HTS; i++) {
26
            iterator=staff[i].listIterator();
27
            System.out.print("staff["+i+"]: ");
28
            while (iterator.hasNext())
29
                System.out.print(iterator.next()+" ");
30
            System.out.println();
31
        }
32
    }
33
    private static void addStaff(LinkedList[] staff, String key) {
34
        final int HTS = 12; // hash table size
35
        staff[hash(key)].addLast(key);
36
    }
37
    private static int hash(String key) {
38
        final int HTS = 12; // hash table size
39
        return Math.abs(key.hashCode() % HTS);
40
    }
41
}

展开收起

run:

Terminal window

1
staff[0]: Hong
2
staff[1]: Richard
3
staff[2]:
4
staff[3]: Sharon
5
staff[4]: Muhammad Ken
6
staff[5]: Arantza William Mark Bob
7
staff[6]:
8
staff[7]: Chris Clare
9
staff[8]: David Peter
10
staff[9]:
11
staff[10]: Ian
12
staff[11]: Faye
13
BUILD SUCCESSFUL (total time: 0 seconds)

Hashing with Chaining#

Average number of probes
- For the number of probes (or comparisons), first determine the average chain length for cells having a chain
- In the illustration the average chain length is
  ((1×1)+(1×2)+(1×3))÷3=2((1 \times 1) + (1 \times 2) + (1 \times 3)) \div 3 = 2((1×1)+(1×2)+(1×3))÷3=2
- For an unsuccessful search the complete chain is inspected. The number of comparisons is this average chain length, so is 2
- For a successful search on average the search travels midway along the chain. For chain length k, the mid length is (1+2+...+k)÷k=(k+1)÷2(1+2+...+k)\div k = (k+1) \div 2(1+2+...+k)÷k=(k+1)÷2, so with an average chain length of 2 the mid length is (2+1)÷2=1.5(2+1)\div 2 = 1.5(2+1)÷2=1.5

Linear Probing vs Chaining#

Linear Probing	Chaining
- Can require less memory (best for small data records) - Best when load factor is low - No pointers or memory allocation, so safe operation - Insertion can be quicker, without memory allocation - Memory references more localized	- Simple to implement - Less sensitive to clustering, but need to monitor chain lengths because searching in a chain is linear, O(n) - Better for high load-factor situations as hash table linked lists do not fill up - Better for large data records

Hashing Performance#

Best Case (ideal) O(1)
Worst case (all keys hash to same slot) O(n)
Performance very dependent on hash table Load Factor
Load Factor = number of items in table / table size
Likelihood of collision strongly related to load factor
Load Factor (L) = 0 represents empty table
- Open Addressing: 0 ≤ L ≤ 1, (hash table can only fill to capacity)
- Chaining: 0 ≤ L, (so L can exceed 1)
Typically performance becomes poor when table > 80% full
Rebuild with a bigger table to improve performance if table becomes full

Disadvantages of hash tables#

The size of the table is fixed and must be estimated in advance. It cannot be changed at runtime.
Table size should be about 10% larger than the maximum expected number of entries.
Hashing algorithms are designed for efficient insertion and retrieval. Deletions are cumbersome and should be avoided. (Don’t just replace entry by null – “example: Where’s Wally”)
Use ‘lazy deletion’; don’t really remove – just mark entry as inactive.
Contents not stored in order, so sorting needed.
The space needed for pointers for chaining could be used for a larger table.

Summary#

Access time is not dependent on the size of the table, at best O(1)
Good for storing data not directly representable as array indexes,
or for storing sets of data from very large data sets.
Key values mapped to index by hashing function.
Different keys mapping to same index means collision.
Collision resolution:
- ‘open addressing’ using various ‘probing’ algorithms;
- chaining (most efficient, but uses more memory).
Hashing efficiency depends critically on hash-table load factor and degree of clustering

References#

Robert Sedgewick, Algorithms in Java, Addison-Wesley, Ch 14.
Mark Allen Weiss, Data Structures and Algorithm Analysis, Addison-Wesley, Ch 5
Cormen, Leiserson and Rivest, Introduction to Algorithms, Ch 12
Niklaus Wirth, Algorithms+Data Structures=Programs, Prentice-Hall
Wikipedia: https://en.wikipedia.org/wiki/Hash_table

Extra: history#

The idea of hashing arose independently in different places.
In January 1953, H. P. Luhn wrote an internal IBM memorandum that used hashing with chaining.
Gene Amdahl, Elaine M. McGraw, Nathaniel Rochester, and Arthur Samuel implemented a program using hashing at about the same time. Open addressing with linear probing (relatively prime stepping) is credited to Amdahl, but Ershov (in Russia) had the same idea.

Product Development Metrics

Mon, 23 Mar 2026 00:00:00 GMT

Velocity, Technical Debt & Burnup/Burndown Charts

Web Application Development - JS

Mon, 23 Mar 2026 00:00:00 GMT

Introduction to JavaScript#

What is JavaScript?#

A scripting language for including interactive and dynamic content on web pages.
JavaScript is executed on the client and can manipulate the content of web pages that use it.
JavaScript was originally created by Netscape, but had no standard, so implementations varied widely.
Standardised as ECMAScript in 1997. Most modern browsers now follow the standard and support ECMAScript 6 as specified in 2015.
- Chrome supports ECMAScript 7
- Internet Explorer supports only ES5 (but Edge has ES6)
- Older non-mainstream browsers tend to support ES3

Applications of JavaScript#

Can create levels of interaction from simple to complex:
- Pop-up or rotating advertisements
- Client-side form validation
- Recalculated data (eg, e-commerce totals)
- Animated navigation menus
Several modern browsers, especially Chrome, have focussed on speeding up and enhancing the features of JavaScript, enabling complete web applications (such as the Google Apps) to be written.

AJAX and Service Clients#

Asynchronous Javascript And XML
A set of functionality allowing a JavaScript program to request data from the web server in a non-HTML format, then use it to customize or even generate the web page on the client
The format was originally XML, but almost all modern systems use JSON instead (but the name has stuck)
Extremely valuable in creating sophisticated interactions and web pages.
Will be covered later on the module.

Limits of JavaScript#

Source code of programs is visible to the end user, although it can be obfuscated to protect it. This can be a security issue for both the code and the server.
Execution speed and APIs vary greatly between browsers and HTML versions, and it is not always easy to write code which allows for the differences.
A very common vector for malware attacks. Browsers may impose arbitrary security restrictions.

Writing a script#

1
<!DOCTYPE html> <html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <script>
5
            document.write(“Hello World!”);
6
        </script>
7
    </body>
8
</html>

Since HTML5, lang="JavaScript" is not needed.

Running a script#

JavaScript programs do not have to be compiled. They are executed simply by loading the page into a web browser.
It is suggested that you test using Firefox or Chrome, as these are very popular browsers with strong JavaScript support.
Errors in JavaScript usually cause the page to fail silently. To view the error, you must open the browser’s JavaScript console where it will be printed.
Chrome: More Tools > Developer Tools, Console
Firefox: Web Developer > Web Console

Running JavaScript#

Scripts such as the previous one, with commands written directly inside the script tag, will run as soon as they are encountered by the browser.
This is not generally considered acceptable in modern JavaScript but is OK to use while you are learning.
More commonly, scripts are set up to be triggered by events, which we will look at later.

Javascript Links#

1
<!DOCTYPE html><html>
2
    <head><title>Example</title></head>
3
        <body>
4
            <script>
5
                function hello() {
6
                    window.alert("Hello");
7
                }
8
            </script>
9
            <a href="javascript:hello()">
10
                Say hello
11
            </a>
12
        </body>
13
</html>

A link to a URL beginning with javascript: will cause the Javascript code in the URL to be executed.
This is often the easiest way of creating buttons that the user can click on to interact with a page.
For usability, it may be a good idea to distinguish this type of link from those which send the user to another web page.
Difficulties may arise if the user attempts a “open link in new window” command on a javascript: URL.

Events and JavaScript#

1
<!DOCTYPE html><html>
2
    <head><title>Example</title></head>
3
    <body>
4
        <img src="image.jpg"
5
            onMouseOver="document.write('Ouch!');">
6
    </body>
7
</html>

Event handlers are created by adding attributes to tags within the document.
When the appropriate event (such as the mouse passing over) happens to the element represented by the tag, the code of the handler is executed.
Note that not every tag supports every event.
Also some tags (like A) have default behaviour associated with some events. A script running will override this default behaviour.
If you want the browser to continue with the default behaviour, we will see later how to tell it to.

Events#

Mouse events: onMouseDown, onMouseUp, onMouseOver, onMouseOut, onClick, onDblClick, onMouseMove, onMouseWheel.
Keyboard events: onKeyDown, onKeyUp, onKeyPress.
Events for forms: onFocus (form component selected for input), onBlur (deselected for input), onChange (value changed), onSelect (text selected in a text box), onSubmit (form submitted), onReset (form reset to defaults).

Page loading: onLoad (page/image loaded), onUnload (page unloaded), onAbort (image load halted)
Media loading: onLoadStart, onCanPlay, onCanPlayThrough, onProgress, onPlaying, onWaiting, onAbort, onError, onStalled.
Media playback: onPlay, onPause, onTimeUpdate, onVolumeChange.

Defining functions#

1
<html>
2
    <head>
3
        <title>Example</title>
4
    </head>
5
    <script>
6
        function checkForm() {
7
            if (document.getElementById("name").value == "mark") {  return true;
8
        } else {
9
                window.alert("Wrong!");
10
                return false;
11
            }
12
        }
13
    </script>
14
    <body>
15
        <form name="nform" onSubmit="return checkForm();">
16
        <input ID="name" type=text>
17
        <button type="submit">Submit</button>
18
        </form>
19
    </body>
20
</html>

展开收起

All subroutines in JavaScript are functions or methods.
Functions can return values, but are not required to do so.
If an event handler returns true, the default behaviour continues (if there is one). If it returns false, it is halted.

Variables#

JavaScript programs can make use of variables in the usual way.
Variables should be declared and initialized the first time they are used; for example, let x = 2. You do not need to specify a type.
For backward compatibility JavaScript normally allows global variables to be assigned arbitrarily without being declared. However, this is a bad idea as it can create very difficult bugs if a variable name is accidentally misspelled or reused.
Adding "use strict"; to the top of your script will disable this.

Types#

JavaScript has only three basic types: numbers (integer or decimal), strings, and booleans (true / false).
- There are a total of seven primitive types, but the remaining 4 are special cases.
Variables do not need to be typed, and can be freely switched between types:
let x = 24; x = "Moose"; is legal.
When you write expressions with values of multiple types, JavaScript tries to “intelligently” convert between types. Usually it gets it right, but this can cause difficulties (as we’ll see later on)

Functions with arguments#

1
<body>
2
    <script>
3
        function greet(name) {
4
            window.alert("Hello, " + name + "!");  return false;
5
        }
6
    </script>
7
    <input ID="myname" type=text>
8
    <button onClick="greet(document.getElementById('myname’)
9
.value)">Hello!</button>
10
</body>

Function arguments are listed in a manner similar to Python, and behave in exactly the same way.
As with variables, types do not need to be specified.

Standard Operators#

Arithmetic: + - * / %
Comparison: == != > >= < <=
Logic: && (and) || (or) !(not)
Arithmetic shortcuts: x = x + 5; can be abbreviated to x += 5; any other arithmetic
operator can be abbreviated in the same way.
x = x + 1; can be further abbreviated to x++; subtraction of 1 can also be abbreviated this way, but no other operator can.

Choice#

If.. Then.. Else.. in JavaScript is identical to Java.

1
if (x == 1) {
2
    document.write("X is one");
3
    return true;
4
} else {
5
    document.write("X is not one");
6
    return false;
7
}

Loops#

While loops are also identical.

1
while (x < 5) {
2
    x = x + 1;
3
    document.write(x + "...");
4
}

For loops are also the same.
As in Java, you specify the value to start from, the condition for continuing, and how to update the value.
for (let t=1; t<5; t++) { . . . .
The command break; causes the current loop to end immediately, regardless of the condition involved.
The command continue; causes the loop to immediately move on to the next value.

Functions as variables#

1
<script>
2
    function helloEnglish() {
3
        window.alert(“Hello!”);
4
    }
5
    function helloFrench() {
6
        window.alert(“Bonjour!”);
7
    }
8
    let hello = helloEnglish;  hello();
9
    hello = helloFrench;  hello();
10
</script>

JavaScript functions can be stored in variables.
A function call is normally written as function() or function(a,b,c..).In most languages, this is a specific syntax.
But in JavaScript, the brackets that you use for calling a function are an operator (like + or &&). Thus, the value to which they are applied can come from a variable, or even from an expression!
The expression on the left hand side of the brackets must evaluate to a function or an error will occur.

Arrays#

1
<script>
2
    let friends = [“Adam”, “Ben”, “Chris”];
3
    for (t=0; t<3; t++) {
4
        document.write(friends[t]);
5
    }
6
</script>

Arrays work in a similar way to Python. As usual in JavaScript, they do not need to be declared. Here the entire array is loaded to start with, but it need not be: it is legal in JavaScript to write friends[3] = "John" even if friends is empty (but in strict mode, it must exist).
Just as functions can be stored in variables, they can also be stored in arrays!

Objects#

Structured data in JavaScript is represented using objects and classes.
JavaScript objects are a cross between objects in Java and dicts in Python:
- Methods are represented by a function stored in a field within the object;
- As well as the . (dot) operator for extracting the value of a field, which is a specific syntax, JavaScript also provides [ ] – which is an operator, and (just like function call () ), can be used on an expression!

1
<script>
2
    let myfriend = {
3
        Name: 'John',
4
        age: 24,
5
        job: 'Student'
6
    };
7
    document.writeln(myfriend.Name);
8
    document.writeln(myfriend['age']);
9
    query = 'job';
10
    document.writeln(myfriend[query]);
11
</script>

Note the syntax used to initialize the object: the object in {}s, and each property name and value in the object in a comma separated list, with colons between.
This syntax is also the data format JSON (JavaScript Object Notation) which is commonly used in other contexts, but especially for getting data from web services.

Loose Objects#

Because JavaScript objects are also dicts, they are very informal compared to Java or other class based languages.

1
<script>
2
    let myfriend = {
3
        Name: 'John',
4
        age: 24,
5
        job: 'Student'
6
    };
7
// Legal, even in strict mode!  myfriend.iamafish = false;
8
</script>

Loose Classes#

JavaScript’s loose objects mean that classes are rather awkward in JavaScript.
The good news: the syntax for classes is very close to Java.

1
class Car {
2
    constructor(brand) {
3
        this.carname = brand;
4
    }
5
    drive() {
6
        document.write("Vroom!");
7
    }
8
}
9
let mycar = new Car("Toyota");
10
document.write(mycar.carname);
11
mycar.drive();

The bad news: because of loose typing and dict equivalence, objects lose their class after creation.

1
let mycar = new Car("Toyota");
2
document.write(mycar.carname);
3
mycar.iamafish = false;
4
document.write(mycar.iamafish);
5
mycar.drive = function() {
6
    document.write("Grrk!");
7
};
8
mycar.drive();

Essentially, a class in JavaScript is an abbreviated way to construct a dict with a standard set of properties. Once constructed, it can be messed with without limit, and cannot be distinguished from an original member of that class.

The good side:
- You can very easily customize objects as you wish.
- You can easily write functions that work on a wide range of objects.
The bad side:
- Misspelling an object property name creates or updates a new property.
- A function that accepts an object may get a dict that doesn’t match anything it was expecting or even that is designed to break it.

JavaScript Evolution#

TypeScript is an alternate form of JavaScript which adds strict typing to remove this difficulty with classes.
It cannot be run by browsers; it is compiled into JavaScript before being included in web pages.
Numerous other languages exist which are compiled into JavaScript, allowing web development to be done in a range of languages.
This led to the development of WebAssembly, a non-human readable language for web page scripts, which is purely used as a compilation target.

A Linked List Class to Represent Polynomials

Thu, 19 Mar 2026 00:00:00 GMT

A Linked List Class to Represent Polynomials
用链表类表示多项式#

Introduction
介绍#

In this exercise you will create a simple application that manipulates polynomial expressions. You will create a linked list class to represent the expressions.

Vocabulary

Polynomial 多项式

Term 项

Coefficient 系数

Power 指数

Recap on polynomials
多项式回顾#

You probably learnt about polynomial expressions at school. However, in case you have forgotten all that, a polynomial expression of one variable is an expression in which multiples of powers of that variable are added together. So for example the following are all polynomial expressions of one variable:
你可能在学校学过多项式表达式。不过如果你已经忘了，单变量多项式就是把该变量各次幂的若干倍数相加得到的表达式。例如下面这些都属于单变量多项式：

3x2−2x+12x10+5x4−6x+12x+13x6+2\begin{aligned} &3x^2-2x+1 \\ &2x^{10}+5x^4-6x+12 \\ &x+1 \\ &3x^6+2 \\ \end{aligned}3x2−2x+12x10+5x4−6x+12x+13x6+2

Each of the components that we add together is referred to as a term. So 3x6+23x^6+23x6+2 has two terms, 3x63x^63x6 and 222. The number by which we multiply the variable is known as the coefficient of the term and the number to which we raise xxx is the power. So in the term 3x63x^63x6 the coefficient is 333 and the power is 666. Note that x0=1x^0=1x0=1 so a number such as 222 can be treated as a term whose coefficient is 222 and whose power is 000.
我们相加的每个组成部分都称为一个 term（项）。例如 3x6+23x^6+23x6+2 有两项：3x63x^63x6 和 222。变量前面的乘数称为该项的 coefficient（系数），而 xxx 的指数称为 power（幂次）。所以在 3x63x^63x6 中，系数是 333，幂次是 666。注意 x0=1x^0=1x0=1，因此像 222 这样的常数也可看作系数为 222、幂次为 000 的一项。

Polynomials can be added together. For example
多项式可以相加。例如：

5x3+2x2+1+2x4+x2+5x−4=2x4+5x3+3x2+5x−35x^3+2x^2+1+2x^4+x^2+5x-4=2x^4+5x^3+3x^2+5x-35x3+2x2+1+2x4+x2+5x−4=2x4+5x3+3x2+5x−3

They can also be multiplied together. For example
多项式也可以相乘。例如：

(2x4+x)×(5x3+2x2+1)=(2x4)×(5x3+2x2+1)+x×(5x3+2x2+1)=(10x7+4x6+2x4)+(5x4+2x3+x)=10x7+4x6+7x4+2x3+x\begin{aligned} &\hspace{1.35em}(2x^4+x)\times(5x^3+2x^2+1) \\ &=(2x^4)\times(5x^3+2x^2+1) + x\times(5x^3+2x^2+1) \\ &=(10x^7+4x^6+2x^4)+(5x^4+2x^3+x) \\ &=10x^7+4x^6+7x^4+2x^3+x \end{aligned}(2x4+x)×(5x3+2x2+1)=(2x4)×(5x3+2x2+1)+x×(5x3+2x2+1)=(10x7+4x6+2x4)+(5x4+2x3+x)=10x7+4x6+7x4+2x3+x

The Polynomial Calculator
多项式计算器#

Download the source code on the module website, then compile and run it. You should see something resembling Figure 1 overleaf.
从课程模块网站下载源代码，然后编译并运行。你应该会看到与下图（图 1）类似的界面。

Figure 1 The Polynomial Calculator Application
图 1 多项式计算器应用

Clicking any of the keys ‘0’-‘9’, ‘x’ , ‘^’ ‘+’ or ‘-’ results in the same character appearing in the entry area. You can use them to write a polynomial expression in the entry area, with ‘^’ representing the operation of raising a variable to a power.
点击 ‘0’ 到 ‘9’、‘x’、‘^’、‘+’ 或 ‘-’ 键，输入区会出现对应字符。你可以用这些键在输入区书写多项式表达式，其中 ‘^’ 表示幂运算。

If you click on the ‘=’ key the expression in the entry area will be checked to see if it is a syntactically correct polynomial. If it is not then an error message is displayed. If the expression is correct then it should be simplified, but that does not happen yet, so you are going to have to write the code that does it.
点击 ‘=’ 键后，程序会检查输入区表达式是否为语法正确的多项式。若不正确，会显示错误信息。若正确，程序本应将其化简，但目前还没有实现，所以这部分代码需要你来完成。

Clicking on the ‘MS’ key moves the expression in the entry area to the memory area. Clicking on ‘M+’ should add the expressions in the two areas and put the result in the memory area. Clicking on ‘M*’ should multiply them and put the result in the memory area. However neither of those two keys work yet. You are going to fix that. ‘MC’ clears the memory area.
点击 ‘MS’ 键会把输入区表达式存入存储区。点击 ‘M+’ 本应把两个区域中的表达式相加并将结果放入存储区；点击 ‘M*’ 本应执行乘法并把结果放入存储区。不过这两个键目前都还不能正常工作，你需要修复它们。‘MC’ 用于清空存储区。

The key ‘C’ clears the entry area and the key ‘Del’ deletes the last character in the entry area.
‘C’ 键清空输入区，‘Del’ 键删除输入区最后一个字符。

Figure 2 The Polynomial Calculator
图 2 多项式计算器

What you have to do
你需要完成的内容#

The main class of the application, which is called PolyCalc, contains the following two methods
应用的主类名为 PolyCalc，其中包含以下两个方法：

1
public static void main(String[] args) {
2
  javax.swing.SwingUtilities.invokeLater(
3
    new Runnable() {
4
      @Override
5
      public void run() {
6
        createAndShowGui();
7
      }
8
    }
9
  );
10
}
11

12
private static void createAndShowGui() {
13
  Polynomial entryPoly = new ALPoly();
14
  Polynomial storePoly = new ALPoly();
15
  GUI view = new GUI(entryPoly, storePoly);
16
}

展开收起

As you can see, two objects of the class ALPoly are created and passed to the GUI class. The two ALPoly objects implement an interface Polynomial which is set out in appendix A. The Polynomial interface defines methods to be implemented by objects that represent polynomial equations. The ALPoly class implements them using an ArrayList. However there are a number of problems with it:
如你所见，代码创建了两个 ALPoly 对象并传给 GUI 类。这两个 ALPoly 对象实现了附录 A 中定义的 Polynomial 接口。Polynomial 接口规定了表示多项式对象应实现的方法。ALPoly 用 ArrayList 实现这些方法，但它存在一些问题：

The methods addPoly and multiplyPoly don’t do anything. That’s why the M+ and M* keys don’t work.
addPoly 和 multiplyPoly 方法目前没有实际功能，所以 M+ 与 M* 按钮无法工作。
An ArrayList isn’t a very sensible choice here, for reasons set out in the lecture. To fix this you will create an implementation a class that implements the Polynomial interface and stores data in a linked list of your own creation. You should modify the main method so as to use this new class. You should not make any other modifications to the code. The Java API already contains a LinkedList class, but you should not use it.
根据课堂中讲过的原因，这里使用 ArrayList 并不是很合适。为了解决这些问题，你需要自己实现一个类：它实现 Polynomial 接口，并使用你自己编写的链表来存储数据。你应修改 main 方法以使用这个新类，除此之外不应修改其他代码。Java API 虽然有现成的 LinkedList 类，但你不应使用它。

Exercise 1#

Create a class that implements Polynomial and which contains a linked list similar to that shown in the lecture notes, except that the data elements of the node are objects of the Term class rather than Strings. The Term class is one of those that has been supplied to you.
创建一个实现 Polynomial 的类，内部使用与课件类似的链表结构；不同的是，节点中的数据元素应是 Term 类对象，而不是字符串。Term 类已提供给你。

Implement the addTerm method so that it just adds to the head of the list. Implement the iterator method in a manner similar to that shown in the lecture notes. Implement the addPoly and multiplyByPoly methods so that they do nothing. Modify the main method so that it uses your new class, and check that the application behaves in the way you would expect.
实现 addTerm 方法，使其仅在链表头部插入项。按照课件示例实现迭代器方法。将 addPoly 和 multiplyByPoly 先实现为空操作。修改 main 方法以使用你的新类，并检查应用行为是否符合预期。

Exercise 2#

Modify your class so that, rather than adding terms at the head of the list you add them so that terms are in order of their power. In other words if you added the terms 3x23x^23x2, 444, −5x2-5x^2−5x2 and x3x^3x3 in that order the polynomial would be displayed as x3+3x2−5x2+4x^3+3x^2-5x^2+4x3+3x2−5x2+4
修改你的类：不要再总是头插，而是按幂次顺序插入各项。换句话说，若按顺序加入 3x23x^23x2、444、−5x2-5x^2−5x2、x3x^3x3，显示结果应为 x3+3x2−5x2+4x^3+3x^2-5x^2+4x3+3x2−5x2+4。

For the time being don’t worry about the fact that you end up with more than one term with the same power.
暂时不用处理“相同幂次出现多项”的问题。

Exercise 3#

Modify the implementation so that when you add two terms with the same power, you end up with only one term in the expression. So for example rather than x3+3x2−5x2+4x^3+3x^2-5x^2+4x3+3x2−5x2+4 you get x3−2x2+4x^3-2x^2+4x3−2x2+4. Don’t worry about the fact that some coefficients may be 000. So for example if you added 3x23x^23x2, 444, −3x2-3x^2−3x2 and x3x^3x3 it would be OK to end up with x3+0x2+4x^3+0x^2+4x3+0x2+4.
继续修改实现：当加入两个幂次相同的项时，应合并成表达式中的一项。比如将 x3+3x2−5x2+4x^3+3x^2-5x^2+4x3+3x2−5x2+4 合并为 x3−2x2+4x^3-2x^2+4x3−2x2+4。暂时不用担心系数可能变成 000 的情况。例如加入 3x23x^23x2、444、−3x2-3x^2−3x2、x3x^3x3 后得到 x3+0x2+4x^3+0x^2+4x3+0x2+4 也是可以接受的。

Exercise 4#

Modify the implementation so that terms with a coefficient of 000 are removed. In other words you get x3+4x^3+4x3+4 rather than x3+0x2+4x^3+0x^2+4x3+0x2+4.
继续修改实现：删除系数为 000 的项。也就是说，结果应为 x3+4x^3+4x3+4，而不是 x3+0x2+4x^3+0x^2+4x3+0x2+4。

Exercise 5#

Implement the addPoly method. Hint: you have already implemented the addTerm method. Think about what that method does and how you can use it to implement addPoly.
实现 addPoly 方法。提示： 你已经实现了 addTerm，思考它的行为以及如何复用它来实现 addPoly。

Exercise 6#

Implement the multiplyByPoly method. Hint: make a copy of your internal linked list. Then call the clear method. Then use addTerm repeatedly.
实现 multiplyByPoly 方法。提示： 先复制一份内部链表，再调用 clear，然后重复调用 addTerm 构建结果。

Appendix: The Polynomial interface
附录：Polynomial 接口#

1
package polycalc;
2

3
/**
4
 *
5
 * Interface to be implemented by classes that represent polynomial expressions
6
 */
7
public interface Polynomial extends Iterable<Term> {
8

9
    /**
10
     * Add a term to the expression
11
     *
12
     * @param term the term to be added.
13
     */
14
    public void addTerm(Term term);
15

16
    /**
17
     * Add another polynomial to this one
18
     *
19
     * @post This polynomial is equal to its original value plus poly.
20
     * The added polynomial poly is unchanged
21
     * added
22
     * @param poly Expression to be added
23
     */
24
    public void addPoly(Polynomial poly);
25

26
    /**
27
     * Multiply this polynomial by another one
28
     *
29
     * @post This polynomial is equal to its original value multiplied by
30
     * the expression poly. The expression poly is unchanged.
31
     *
32
     * @param poly Expression to be added
33
     */
34
    public void multiplyByPoly(Polynomial poly);
35

36
    /**
37
     * Remove all terms from this polynomial
38
     */
39
    public void clear();
40
}

展开收起

Reference Answer

ALPoly.java展开收起

1
/*
2
 * To change this license header, choose License Headers in Project Properties.
3
 * To change this template file, choose Tools | Templates
4
 * and open the template in the editor.
5
 */
6

7
package polycalc;
8

9
import java.util.ArrayList;
10
import java.util.Iterator;
11

12
/**
13
 *
14
 * @author Leon Liang
15
 */
16
public class ALPoly implements Polynomial {
17
    private ArrayList<Term> termList = new ArrayList<Term>();
18

19
    @Override
20
    public void addTerm(Term term) {
21
        termList.add(term);
22
    }
23

24
    @Override
25
    public void addPoly(Polynomial poly) {
26
        //not implemented
27
    }
28

29
    @Override
30
    public void multiplyByPoly(Polynomial poly) {
31
        //not implemented
32
    }
33

34
    @Override
35
    public void clear() {
36
        termList.clear();
37
    }
38

39
    @Override
40
    public Iterator<Term> iterator() {
41
        return termList.iterator();
42
    }
43

44
}

展开收起

GUI.java展开收起

1
  /*
2
 * To change this license header, choose License Headers in Project Properties.
3
 * To change this template file, choose Tools | Templates
4
 * and open the template in the editor.
5
 */
6
package polycalc;
7

8
import java.awt.Container;
9
import java.awt.GridLayout;
10
import java.awt.event.ActionEvent;
11
import java.awt.event.ActionListener;
12
import java.text.ParseException;
13
import javax.swing.BoxLayout;
14
import javax.swing.JButton;
15
import javax.swing.JFrame;
16
import javax.swing.JOptionPane;
17
import javax.swing.JPanel;
18
import javax.swing.JTextField;
19

20
/**
21
 *
22
 * @author
23
 */
24
public class GUI {
25

26
    private final JFrame frame = new JFrame("Polynomial Calculator");
27
    private final JTextField entryField = new JTextField(30);
28
    private final JTextField storeField = new JTextField(30);
29
    private final Polynomial entryPoly;
30
    private final Polynomial storePoly;
31

32
    public GUI(Polynomial entryPoly, Polynomial storePoly) {
33
        this.entryPoly = entryPoly;
34
        this.storePoly = storePoly;
35

36
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
37

38
        Container contentPane = frame.getContentPane();
39
        contentPane.setLayout(new BoxLayout(contentPane, BoxLayout.Y_AXIS));
40
        entryField.setEditable(false);
41
        contentPane.add(entryField);
42
        storeField.setEditable(false);
43
        contentPane.add(storeField);
44

45
        JPanel buttonPanel = new JPanel();
46
        buttonPanel.add(makeMemStoreButton());
47
        buttonPanel.add(makeMemPlusButton());
48
        buttonPanel.add(makeMemTimesButton());
49
        buttonPanel.add(makeMemClearButton());
50

51
        buttonPanel.add(makeEntryButton("x"));
52
        buttonPanel.add(makeEntryButton("^"));
53
        buttonPanel.add(makeDelButton());
54
        buttonPanel.add(makeClearButton());
55

56
        buttonPanel.setLayout(new GridLayout(6, 4));
57
        for (int i = 1; i <= 3; i++) {
58
            buttonPanel.add(makeEntryButton(Integer.toString(i)));
59
        }
60
        buttonPanel.add(makeEntryButton("+"));
61

62
        for (int i = 4; i <= 6; i++) {
63
            buttonPanel.add(makeEntryButton(Integer.toString(i)));
64
        }
65
        buttonPanel.add(makeEntryButton("-"));
66

67
        for (int i = 7; i <= 9; i++) {
68
            buttonPanel.add(makeEntryButton(Integer.toString(i)));
69
        }
70
        buttonPanel.add(makeEqualsButton());
71

72
        buttonPanel.add(makeEntryButton("0"));
73

74
        contentPane.add(buttonPanel);
75

76
        frame.pack();
77
        frame.setVisible(true);
78

79
    }
80

81
    private JButton makeEntryButton(String entry) {
82
        final String buttonText = entry;
83
        final JButton button = new JButton(buttonText);
84
        button.addActionListener(new ActionListener() {
85

86
            @Override
87
            public void actionPerformed(ActionEvent e) {
88
                addToEntry(buttonText);
89
            }
90
        });
91
        return button;
92
    }
93

94
    private JButton makeOperatorButton(String op) {
95
        JButton button = new JButton(op);
96
        return button;
97
    }
98

99
    private void addToEntry(String x) {
100
        String current = entryField.getText();
101
        entryField.setText(current + x);
102
    }
103

104
    private JButton makeEqualsButton() {
105
        final JButton eqButton = new JButton("=");
106
        eqButton.addActionListener(new ActionListener() {
107

108
            @Override
109
            public void actionPerformed(ActionEvent e) {
110
                updateEntry();
111
            }
112

113
        });
114
        return eqButton;
115

116
    }
117

118
    private String polyToString(Polynomial poly) {
119
        StringBuilder s = new StringBuilder();
120

121
        boolean first = true;
122
        for (Term term : poly) {
123

124
            int coeff = term.getCoefficient();
125
            int power = term.getPower();
126

127
            if (coeff >= 0 && !first) {
128
                s.append("+");
129
            }
130
            if (coeff == -1 && power != 0) {
131
                s.append("-");
132
            } else if (!(coeff == 1 && power != 0)) {
133
                s.append(Integer.toString(term.getCoefficient()));
134
            }
135
            if (power != 0) {
136
                s.append("x");
137
                if (power != 1) {
138
                    s.append("^");
139
                    s.append(Integer.toString(term.getPower()));
140
                }
141
            }
142
            first = false;
143
        }
144

145
        return s.toString();
146
    }
147

148
    private boolean stringToPoly(String text, Polynomial poly) {
149
        Tokeniser tok = new Tokeniser(text);
150
        poly.clear();
151
        try {
152
            while (tok.hasNext()) {
153
                poly.addTerm(tok.getNextToken());
154
            }
155
            return true;
156
        } catch (ParseException ex) {
157
            //System.err.println(ex);
158
            //System.err.println("at index " + ex.getErrorOffset());
159
            JOptionPane.showMessageDialog(frame, ex.getMessage(), "Error",
160
                    JOptionPane.ERROR_MESSAGE);
161
            poly.clear();
162
            return false;
163
        }
164
    }
165

166
    private boolean updateEntry() {
167
        String text = entryField.getText();
168
        boolean result = stringToPoly(text, entryPoly);
169
        if (result) {
170
            entryField.setText(polyToString(entryPoly));
171
        }
172
        return result;
173
    }
174

175
    private void updateStore() {
176
        storeField.setText(polyToString(storePoly));
177
    }
178

179
    private JButton makeClearButton() {
180
        final JButton clrButton = new JButton("C");
181
        clrButton.addActionListener(new ActionListener() {
182

183
            @Override
184
            public void actionPerformed(ActionEvent e) {
185

186
                //entryPoly.clear();
187
                entryField.setText("");
188
                updateEntry();
189
            }
190

191
        });
192
        return clrButton;
193
    }
194

195
    private JButton makeMemClearButton() {
196
        final JButton button = new JButton("MC");
197
        button.addActionListener(new ActionListener() {
198

199
            @Override
200
            public void actionPerformed(ActionEvent e) {
201

202
                storePoly.clear();
203
                updateStore();
204
            }
205

206
        });
207
        return button;
208
    }
209

210
    private JButton makeMemStoreButton() {
211
        final JButton button = new JButton("MS");
212
        button.addActionListener(new ActionListener() {
213

214
            @Override
215
            public void actionPerformed(ActionEvent e) {
216
                if (updateEntry()) {
217
                    copy(entryPoly, storePoly);
218
                    updateStore();
219
                }
220
            }
221

222
        });
223
        return button;
224
    }
225

226
    private JButton makeMemPlusButton() {
227
        final JButton button = new JButton("M+");
228
        button.addActionListener(new ActionListener() {
229

230
            @Override
231
            public void actionPerformed(ActionEvent e) {
232
                if (updateEntry()) {
233
                    storePoly.addPoly(entryPoly);
234
                    updateStore();
235
                }
236
            }
237

238
        });
239
        return button;
240
    }
241

242
    private JButton makeMemTimesButton() {
243
        final JButton button = new JButton("M*");
244
        button.addActionListener(new ActionListener() {
245

246
            @Override
247
            public void actionPerformed(ActionEvent e) {
248
                if (updateEntry()) {
249
                    storePoly.multiplyByPoly(entryPoly);
250
                    updateStore();
251
                }
252
            }
253

254
        });
255
        return button;
256
    }
257

258
    private void copy(Polynomial p1, Polynomial p2) {
259
        p2.clear();
260
        for (Term term : p1) {
261
            p2.addTerm(term);
262
        }
263
    }
264

265
    private JButton makeDelButton() {
266
        final JButton clrButton = new JButton("Del");
267
        clrButton.addActionListener(new ActionListener() {
268

269
            @Override
270
            public void actionPerformed(ActionEvent e) {
271
                String text = entryField.getText();
272
                text = text.substring(0, text.length() - 1);
273

274
                entryField.setText(text);
275
            }
276

277
        });
278
        return clrButton;
279
    }
280
}

展开收起

LinkedListPoly.java展开收起

1
package polycalc;
2

3
import java.util.Iterator;
4

5
public class LinkedListPoly implements Polynomial {
6
    private TermLinkedList termList = new TermLinkedList();
7
    /**
8
     * Add a term to the expression
9
     *
10
     * @param term the term to be added.
11
     */
12
    @Override
13
    public void addTerm(Term term) {
14
        // Use the linked-list-only helper to insert in order and combine like powers.
15
        termList.insertOrderedAndCombine(term);
16
    }
17

18
    /**
19
     * Add another polynomial to this one
20
     *
21
     * @param poly Expression to be added
22
     * @post This polynomial is equal to its original value plus poly.
23
     * The added polynomial poly is unchanged
24
     * added
25
     */
26
    @Override
27
    public void addPoly(Polynomial poly) {
28
        if (poly == null) return;
29

30
        // Collect terms into an array first to avoid modifying the
31
        // underlying polynomial while iterating (handles case poly == this).
32
        int count = 0;
33
        for (Term t : poly) {
34
            count++;
35
        }
36

37
        Term[] terms = new Term[count];
38
        int i = 0;
39
        for (Term t : poly) {
40
            terms[i++] = t;
41
        }
42

43
        // Add each term using addTerm (which handles ordering and combining)
44
        for (Term t : terms) {
45
            if (t != null) {
46
                // Use a new Term instance to avoid accidental aliasing with
47
                // implementations that might rely on object identity.
48
                addTerm(new Term(t.getCoefficient(), t.getPower()));
49
            }
50
        }
51
    }
52

53
    /**
54
     * Multiply this polynomial by another one
55
     *
56
     * @param poly Expression to be added
57
     * @post This polynomial is equal to its original value multiplied by
58
     * the expression poly. The expression poly is unchhanged.
59
     */
60
    @Override
61
    public void multiplyByPoly(Polynomial poly) {
62
        if (poly == null) return;
63

64
        // Copy this polynomial's terms into an array
65
        int countThis = 0;
66
        for (Term t : this) countThis++;
67
        Term[] thisTerms = new Term[countThis];
68
        int idx = 0;
69
        for (Term t : this) thisTerms[idx++] = t;
70

71
        // Copy the other polynomial's terms into an array (handles poly == this)
72
        int countPoly = 0;
73
        for (Term t : poly) countPoly++;
74
        Term[] polyTerms = new Term[countPoly];
75
        idx = 0;
76
        for (Term t : poly) polyTerms[idx++] = t;
77

78
        // Clear this polynomial and build the product using addTerm
79
        clear();
80

81
        for (Term a : thisTerms) {
82
            for (Term b : polyTerms) {
83
                // Multiply coefficients and add powers
84
                int coeff = a.getCoefficient() * b.getCoefficient();
85
                int power = a.getPower() + b.getPower();
86
                addTerm(new Term(coeff, power));
87
            }
88
        }
89
    }
90

91
    /**
92
     * Remove all terms from this polynomial
93
     */
94
    @Override
95
    public void clear() {
96
        termList.clear();
97
    }
98

99
    /**
100
     * Returns an iterator over elements of type {@code T}.
101
     *
102
     * @return an Iterator.
103
     */
104
    @Override
105
    public Iterator<Term> iterator() {
106
        return termList.iterator();
107
    }
108
}

展开收起

PolyCalc.java展开收起

1
/*
2
 * To change this license header, choose License Headers in Project Properties.
3
 * To change this template file, choose Tools | Templates
4
 * and open the template in the editor.
5
 */
6
package polycalc;
7

8
/**
9
 *
10
 * @author Leon Liang
11
 */
12
public class PolyCalc {
13

14
    /**
15
     * @param args the command line arguments
16
     */
17
    public static void main(String[] args) {
18
        javax.swing.SwingUtilities.invokeLater(
19
                new Runnable() {
20
                    @Override
21
                    public void run() {
22
                        createAndShowGui();
23
                    }
24
                }
25
        );
26

27
    }
28

29
    private static void createAndShowGui() {
30
//        Polynomial entryPoly = new ALPoly();
31
//        Polynomial storePoly = new ALPoly();
32
        Polynomial entryPoly = new LinkedListPoly();
33
        Polynomial storePoly = new LinkedListPoly();
34

35
        GUI view = new GUI(entryPoly, storePoly);
36
    }
37

38
}

展开收起

Polynomial.java展开收起

1
package polycalc;
2

3
/**
4
 *
5
 * Interface to be implemented by classes that represent polynomial expressions
6
 */
7
public interface Polynomial extends Iterable<Term> {
8

9
    /**
10
     * Add a term to the expression
11
     *
12
     * @param term the term to be added.
13
     */
14
    public void addTerm(Term term);
15

16
    /**
17
     * Add another polynomial to this one
18
     *
19
     * @post This polynomial is equal to its original value plus poly.
20
     * The added polynomial poly is unchanged
21
     * added
22
     * @param poly Expression to be added
23
     */
24
    public void addPoly(Polynomial poly);
25

26
    /**
27
     * Multiply this polynomial by another one
28
     *
29
     * @post This polynomial is equal to its original value multiplied by
30
     * the expression poly. The expression poly is unchhanged.
31
     *
32
     * @param poly Expression to be added
33
     */
34
    public void multiplyByPoly(Polynomial poly);
35

36
    /**
37
     * Remove all terms from this polynomial
38
     */
39
    public void clear();
40
}

展开收起

Term.java展开收起

1

2
package polycalc;
3

4
/**
5
 *
6
 * Immutable class representing a term of the form cx^e that could appear in a
7
 polynomial expression, where x is the variable, c the coefficient, and
8
 e the power
9
 */
10
public final class Term {
11
    private final int coefficient;
12
    private final int power;
13

14
    /**
15
     * Create an immutable object representing a term
16
     * @param coefficient Coefficent of the term
17
     * @param power Power of the term
18
     */
19
    public Term(int coefficient, int power) {
20
        this.coefficient = coefficient;
21
        this.power = power;
22
    }
23

24
    /**
25
     * Get the coefficient of this term
26
     * @return the coefficient
27
     */
28
    public int getCoefficient() {
29
        return coefficient;
30
    }
31

32
    /**
33
     * Get the power of the term
34
     * @return the power
35
     */
36
    public int getPower() {
37
        return power;
38
    }
39
}

展开收起

TermLinkedList.java展开收起

1
package polycalc;
2

3
import java.util.Iterator;
4
import java.util.NoSuchElementException;
5

6
public class TermLinkedList {
7
    private static class Node {
8
        Term term;
9
        Node next;
10

11
        public Node(Term term) {
12
            this.term = term;
13
            this.next = null;
14
        }
15
    }
16
    private Node head;
17
    public TermLinkedList() {
18
        head = null;
19
    }
20
    public TermLinkedList(Term term) {
21
        head = new Node(term);
22
    }
23
    public void insertAtHead(Term term) {
24
        Node newNode = new Node(term);
25
        newNode.next = head;
26
        head = newNode;
27
    }
28
    public void insertTail(Term term) {
29
        Node newNode = new Node(term);
30
        if (head == null) {
31
            head = newNode;
32
        } else {
33
            Node current = head;
34
            while (current.next != null) {
35
                current = current.next;
36
            }
37
            current.next = newNode;
38
        }
39
    }
40
    /**
41
     * Insert the given term so the list remains ordered by descending power.
42
     * If a term with the same power already exists, combine by summing coefficients
43
     * (the resulting coefficient may be zero and will be kept).
44
     *
45
     * This method performs the operation in-place using the linked list only
46
     * (no built-in collections are used).
47
     */
48
    public void insertOrderedAndCombine(Term term) {
49
        // Do not insert terms with a zero coefficient
50
        if (term.getCoefficient() == 0) {
51
            return;
52
        }
53

54
        if (head == null) {
55
            head = new Node(term);
56
            return;
57
        }
58

59
        // If new term has higher power than head, insert at head
60
        if (term.getPower() > head.term.getPower()) {
61
            insertAtHead(term);
62
            return;
63
        }
64

65
        Node prev = null;
66
        Node current = head;
67
        while (current != null) {
68
            if (term.getPower() == current.term.getPower()) {
69
                // combine coefficients
70
                int summed = current.term.getCoefficient() + term.getCoefficient();
71
                if (summed == 0) {
72
                    // remove current node
73
                    if (prev == null) {
74
                        head = current.next;
75
                    } else {
76
                        prev.next = current.next;
77
                    }
78
                } else {
79
                    current.term = new Term(summed, current.term.getPower());
80
                }
81
                return;
82
            } else if (term.getPower() > current.term.getPower()) {
83
                // insert before current
84
                // New term has non-zero coefficient (checked above). Insert before current.
85
                Node newNode = new Node(term);
86
                if (prev == null) {
87
                    newNode.next = head;
88
                    head = newNode;
89
                } else {
90
                    prev.next = newNode;
91
                    newNode.next = current;
92
                }
93
                return;
94
            }
95
            prev = current;
96
            current = current.next;
97
        }
98

99
        // Insert at tail (lowest power)
100
        prev.next = new Node(term);
101
    }
102
    public void insertAfter(Term term, Term newTerm) {
103
        if (head == null) return;
104
        Node current = head;
105
        while (current != null) {
106
            if (termEquals(current.term, term)) {
107
                Node newNode = new Node(newTerm);
108
                newNode.next = current.next;
109
                current.next = newNode;
110
                return;
111
            }
112
            current = current.next;
113
        }
114
    }
115
    public void insertAfter(int index, Term term) {
116
        if (index < 0) throw new IndexOutOfBoundsException("index must be >= 0");
117
        if (head == null) {
118
            throw new IndexOutOfBoundsException("index out of range");
119
        }
120
        Node current = head;
121
        int i = 0;
122
        while (current != null && i < index) {
123
            current = current.next;
124
            i++;
125
        }
126
        if (current == null) {
127
            throw new IndexOutOfBoundsException("index out of range");
128
        }
129
        Node newNode = new Node(term);
130
        newNode.next = current.next;
131
        current.next = newNode;
132
    }
133
    public void clear() {
134
        head = null;
135
    }
136
    public void deleteHead() {
137
        if (head != null) {
138
            head = head.next;
139
        }
140
    }
141
    public void delete(Term term) {
142
        if (head == null) return;
143
        // If head matches
144
        if (termEquals(head.term, term)) {
145
            head = head.next;
146
            return;
147
        }
148
        Node prev = head;
149
        Node current = head.next;
150
        while (current != null) {
151
            if (termEquals(current.term, term)) {
152
                prev.next = current.next;
153
                return;
154
            }
155
            prev = current;
156
            current = current.next;
157
        }
158
    }
159
    public void delete(int index) {
160
        if (index < 0) throw new IndexOutOfBoundsException("index must be >= 0");
161
        if (head == null) throw new IndexOutOfBoundsException("index out of range");
162
        if (index == 0) {
163
            head = head.next;
164
            return;
165
        }
166
        Node prev = head;
167
        Node current = head.next;
168
        int i = 1;
169
        while (current != null && i < index) {
170
            prev = current;
171
            current = current.next;
172
            i++;
173
        }
174
        if (current == null) throw new IndexOutOfBoundsException("index out of range");
175
        prev.next = current.next;
176
    }
177
    public void print() {
178
        Node current = head;
179
        while (current != null) {
180
            System.out.println(current.term);
181
            current = current.next;
182
        }
183
    }
184
    public Term find(Term term) {
185
        Node current = head;
186
        while (current != null) {
187
            if (termEquals(current.term, term)) {
188
                return current.term;
189
            }
190
            current = current.next;
191
        }
192
        return null;
193
    }
194
    public Term findTail(Term term) {
195
        // Return the last occurrence of a term matching the provided term
196
        Node current = head;
197
        Term found = null;
198
        while (current != null) {
199
            if (termEquals(current.term, term)) {
200
                found = current.term;
201
            }
202
            current = current.next;
203
        }
204
        return found;
205
    }
206
    public int findIndex(Term term) {
207
        int index = 0;
208
        Node current = head;
209
        while (current != null) {
210
            if (termEquals(current.term, term)) {
211
                return index;
212
            }
213
            index++;
214
            current = current.next;
215
        }
216
        return -1;
217
    }
218
    public Iterator<Term> iterator() {
219
        return new TermLinkedListIterator();
220
    }
221
    private class TermLinkedListIterator implements Iterator<Term> {
222
        private Node current = head;
223
        @Override
224
        public boolean hasNext() {
225
            return current != null;
226
        }
227

228
        /**
229
         * Returns the next element in the iteration.
230
         *
231
         * @return the next element in the iteration
232
         * @throws NoSuchElementException if the iteration has no more elements
233
         */
234
        @Override
235
        public Term next() {
236
            if (current == null) {
237
                throw new java.util.NoSuchElementException();
238
            }
239
            Term result = current.term;
240
            current = current.next;
241
            return result;
242
        }
243
    }
244

245
    // Helper to compare terms by coefficient and power (Term doesn't override equals)
246
    private boolean termEquals(Term a, Term b) {
247
        if (a == b) return true;
248
        if (a == null || b == null) return false;
249
        return a.getCoefficient() == b.getCoefficient() && a.getPower() == b.getPower();
250
    }
251
}

展开收起

TestLinkedListPoly.java展开收起

1
package polycalc;
2

3
public class TestLinkedListPoly {
4
    public static void main(String[] args) {
5
        LinkedListPoly p = new LinkedListPoly();
6
        p.addTerm(new Term(3, 2));
7
        p.addTerm(new Term(4, 0));
8
        p.addTerm(new Term(-5, 2));
9
        p.addTerm(new Term(1, 3));
10

11
        System.out.println("Expected: 1x^3, -2x^2, 4x^0");
12
        for (Term t : p) {
13
            System.out.println(t.getCoefficient() + "x^" + t.getPower());
14
        }
15

16
        // Test zero-coefficient combination
17
        LinkedListPoly q = new LinkedListPoly();
18
        q.addTerm(new Term(3, 2));
19
        q.addTerm(new Term(-3, 2));
20
        q.addTerm(new Term(4, 0));
21
        q.addTerm(new Term(1, 3));
22

23
        System.out.println("\nExpected: 1x^3, 4x^0");
24
        for (Term t : q) {
25
            System.out.println(t.getCoefficient() + "x^" + t.getPower());
26
        }
27

28
        // Test addPoly: r += s
29
        LinkedListPoly r = new LinkedListPoly();
30
        r.addTerm(new Term(1, 3));
31
        r.addTerm(new Term(3, 2));
32
        r.addTerm(new Term(4, 0));
33

34
        LinkedListPoly s = new LinkedListPoly();
35
        s.addTerm(new Term(-5, 2));
36

37
        r.addPoly(s);
38
        System.out.println("\nAfter r.addPoly(s) Expected: 1x^3, -2x^2, 4x^0");
39
        for (Term t : r) {
40
            System.out.println(t.getCoefficient() + "x^" + t.getPower());
41
        }
42

43
        // Test addPoly when poly == this (should safely double terms)
44
        LinkedListPoly self = new LinkedListPoly();
45
        self.addTerm(new Term(1, 1));
46
        self.addTerm(new Term(2, 0));
47
        self.addPoly(self);
48
        System.out.println("\nAfter self.addPoly(self) Expected: 2x^1, 4x^0");
49
        for (Term t : self) {
50
            System.out.println(t.getCoefficient() + "x^" + t.getPower());
51
        }
52

53
        // Test multiplyByPoly
54
        LinkedListPoly m1 = new LinkedListPoly();
55
        m1.addTerm(new Term(1, 1)); // x
56
        m1.addTerm(new Term(1, 0)); // +1 => x+1
57

58
        LinkedListPoly m2 = new LinkedListPoly();
59
        m2.addTerm(new Term(1, 1)); // x
60
        m2.addTerm(new Term(-1, 0)); // -1 => x-1
61

62
        m1.multiplyByPoly(m2); // (x+1)(x-1) = x^2 -1
63
        System.out.println("\nAfter m1.multiplyByPoly(m2) Expected: 1x^2, -1x^0");
64
        for (Term t : m1) {
65
            System.out.println(t.getCoefficient() + "x^" + t.getPower());
66
        }
67
    }
68
}

展开收起

Tokeniser.java展开收起

1
/*
2
 * To change this license header, choose License Headers in Project Properties.
3
 * To change this template file, choose Tools | Templates
4
 * and open the template in the editor.
5
 */
6
package polycalc;
7

8
import java.text.ParseException;
9

10
/**
11
 *
12
 * @author
13
 */
14
/*
15
 * To change this template, choose Tools | Templates
16
 * and open the template in the editor.
17
 */
18
/**
19
 *
20
 * @author p0073862
21
 */
22
public class Tokeniser {
23

24
    private final String expr;
25
    private int index;
26

27
    /**
28
     * Create a Tokeniser that can divide an expression into a sequence of Terms
29
     *
30
     * @param expr the expression to be converted into Tokens
31
     */
32
    public Tokeniser(String expr) {
33
        this.expr = expr;
34
        index = 0;
35
    }
36

37
    /**
38
     * Determine whether we have read the last term in the expression
39
     *
40
     * @return true if there is another token to be read from the expression
41
     * false otherwise.
42
     */
43
    public boolean hasNext() {
44
        return hasCurrentChar();
45
    }
46

47
    /**
48
     * Get the next Token
49
     *
50
     * @throws java.text.ParseException
51
     * @pre hasNext()
52
     * @return the next token in the expression
53
     */
54
    public Term getNextToken() throws ParseException {
55
        int sign = 1;
56
        if (currentChar() == '-') {
57
            sign = -1;
58
            consumeChar();
59
        } else if (currentChar() == '+') {
60
            consumeChar();
61
        } else if (index != 0) {
62
            throw new ParseException("Expected operator", index);
63
        }
64

65
        int coeff;
66
        if (Character.isDigit(currentChar())) {
67
            coeff = readInteger();
68
        } else {
69
            coeff = 1;
70
            if (currentChar() != 'x') {
71
                throw new ParseException("Expected x got " + currentChar(), index);
72
            }
73
        }
74

75
        int power = 0;
76
        if (hasCurrentChar() && currentChar() == 'x') {
77
            consumeChar();
78
            power = 1;
79
            if (hasCurrentChar() && currentChar() == '^') {
80
                consumeChar();
81
                power = readInteger();
82
            }
83
        }
84

85
//        System.out.println("Coeff = " + coeff + " Power = " + power);
86
//        if (hasCurrentChar()) {
87
//            System.out.println("Current char = " + currentChar());
88
//        }
89
        return new Term(sign * coeff, power);
90

91
    }
92

93
    private int readInteger() throws ParseException {
94
        StringBuilder builder = new StringBuilder();
95
        while (hasCurrentChar() && Character.isDigit(currentChar())) {
96
            builder.append(currentChar());
97
            consumeChar();
98
        }
99

100
        try {
101
            int result = Integer.valueOf(builder.toString());
102
            return result;
103
        } catch (NumberFormatException ex) {
104
            throw new ParseException(ex.getMessage(), index);
105
        }
106

107
    }
108

109
    private char currentChar() throws ParseException {
110
        if (!hasCurrentChar()) {
111
            throw new ParseException("Unexpected end of input", index);
112
        }
113
        return expr.charAt(index);
114
    }
115

116
    private boolean hasCurrentChar() {
117
        return index < expr.length();
118
    }
119

120
//    private void consumeChar(char c) throws ParseException {
121
//        if (currentChar() != c) {
122
//            throw new ParseException("Expected character " + c, index);
123
//        }
124
//        consumeChar();
125
//    }
126

127
    private void consumeChar() {
128
        index++;
129
    }
130
}

展开收起

	00	01	02	03	04	05	06	07	08	09	0A	0B	0C	0D	0E	0F
00	63	7C	77	7B	F2	6B	6F	C5	30	01	67	2B	FE	D7	AB	76
10	CA	82	C9	7D	FA	59	47	F0	AD	D4	A2	AF	9C	A4	72	C0
20	B7	FD	93	26	36	3F	F7	CC	34	A5	E5	F1	71	D8	31	15
30	04	C7	23	C3	18	96	05	9A	07	12	80	E2	EB	27	B2	75
40	09	83	2C	1A	1B	6E	5A	A0	52	3B	D6	B3	29	E3	2F	84
50	53	D1	00	ED	20	FC	B1	5B	6A	CB	BE	39	4A	4C	58	CF
60	D0	EF	AA	FB	43	4D	33	85	45	F9	02	7F	50	3C	9F	A8
70	51	A3	40	8F	92	9D	38	F5	BC	B6	DA	21	10	FF	F3	D2
80	CD	0C	13	EC	5F	97	44	17	C4	A7	7E	3D	64	5D	19	73
90	60	81	4F	DC	22	2A	90	88	46	EE	B8	14	DE	5E	0B	DB
A0	E0	32	3A	0A	49	06	24	5C	C2	D3	AC	62	91	95	E4	79
B0	E7	C8	37	6D	8D	D5	4E	A9	6C	56	F4	EA	65	7A	AE	08
C0	BA	78	25	2E	1C	A6	B4	C6	E8	DD	74	1F	4B	BD	8B	8A
D0	70	3E	B5	66	48	03	F6	0E	61	35	57	B9	86	C1	1D	9E
E0	E1	F8	98	11	69	D9	8E	94	9B	1E	87	E9	CE	55	28	DF
F0	8C	A1	89	0D	BF	E6	42	68	41	99	2D	0F	B0	54	BB	16

Round	Byte 1	Byte 2	Byte 3	Byte 4
R1	01	00	00	00
R2	02	00	00	00
R3	04	00	00	00
R4	08	00	00	00
R5	10	00	00	00
R6	20	00	00	00
R7	40	00	00	00
R8	80	00	00	00
R9	1B	00	00	00
R10	36	00	00	00

	00	01	02	03	04	05	06	07	08	09	0A	0B	0C	0D	0E	0F
00	63	7C	77	7B	F2	6B	6F	C5	30	01	67	2B	FE	D7	AB	76
10	CA	82	C9	7D	FA	59	47	F0	AD	D4	A2	AF	9C	A4	72	C0
20	B7	FD	93	26	36	3F	F7	CC	34	A5	E5	F1	71	D8	31	15
30	04	C7	23	C3	18	96	05	9A	07	12	80	E2	EB	27	B2	75
40	09	83	2C	1A	1B	6E	5A	A0	52	3B	D6	B3	29	E3	2F	84
50	53	D1	00	ED	20	FC	B1	5B	6A	CB	BE	39	4A	4C	58	CF
60	D0	EF	AA	FB	43	4D	33	85	45	F9	02	7F	50	3C	9F	A8
70	51	A3	40	8F	92	9D	38	F5	BC	B6	DA	21	10	FF	F3	D2
80	CD	0C	13	EC	5F	97	44	17	C4	A7	7E	3D	64	5D	19	73
90	60	81	4F	DC	22	2A	90	88	46	EE	B8	14	DE	5E	0B	DB
A0	E0	32	3A	0A	49	06	24	5C	C2	D3	AC	62	91	95	E4	79
B0	E7	C8	37	6D	8D	D5	4E	A9	6C	56	F4	EA	65	7A	AE	08
C0	BA	78	25	2E	1C	A6	B4	C6	E8	DD	74	1F	4B	BD	8B	8A
D0	70	3E	B5	66	48	03	F6	0E	61	35	57	B9	86	C1	1D	9E
E0	E1	F8	98	11	69	D9	8E	94	9B	1E	87	E9	CE	55	28	DF
F0	8C	A1	89	0D	BF	E6	42	68	41	99	2D	0F	B0	54	BB	16

14	4	13	1	2	15	11	8	3	10	6	12	5	9	0	7
0	15	7	4	14	2	13	1	10	6	12	11	9	5	3	8
4	1	14	8	13	6	2	11	15	12	9	7	3	10	5	0
15	12	8	2	4	9	1	7	5	11	3	14	10	0	6	13

14	4	13	1	2	15	11	8	3	10	6	12	5	9	0	7
0	15	7	4	14	2	13	1	10	6	12	11	9	5	3	8
4	1	14	8	13	6	2	11	15	12	9	7	3	10	5	0
15	12	8	2	4	9	1	7	5	11	3	14	10	0	6	13

15	1	8	14	6	11	3	4	9	7	2	13	12	0	5	10
3	13	4	7	15	2	8	14	12	0	1	10	6	9	11	5
0	14	7	11	10	4	13	1	5	8	12	6	9	3	2	15
13	8	10	1	3	15	4	2	11	6	7	12	0	5	14	9

10	0	9	14	6	3	15	5	1	13	12	7	11	4	2	8
13	7	0	9	3	4	6	10	2	8	5	14	12	11	15	1
13	6	4	9	8	15	3	0	11	1	2	12	5	10	14	7
1	10	13	0	6	9	8	7	4	15	14	3	11	5	2	12

7	13	14	3	0	6	9	10	1	2	8	5	11	12	4	15
13	8	11	5	6	15	0	3	4	7	2	12	1	10	14	9
10	6	9	0	12	11	7	13	15	1	3	14	5	2	8	4
3	15	0	6	10	1	13	8	9	4	5	11	12	7	2	14

2	12	4	1	7	10	11	6	8	5	3	15	13	0	14	9
14	11	2	12	4	7	13	1	5	0	15	10	3	9	8	6
4	2	1	11	10	13	7	8	15	9	12	5	6	3	0	14
11	8	12	7	1	14	2	13	6	15	0	9	10	4	5	3

12	1	10	15	9	2	6	8	0	13	3	4	14	7	5	11
10	15	4	2	7	12	9	5	6	1	13	14	0	11	3	8
9	14	15	5	2	8	12	3	7	0	4	10	1	13	11	6
4	3	2	12	9	5	15	10	11	14	1	7	6	0	8	13

	00	01	02	03	04	05	06	07	08	09	0A	0B	0C	0D	0E	0F
00	63	7C	77	7B	F2	6B	6F	C5	30	01	67	2B	FE	D7	AB	76
10	CA	82	C9	7D	FA	59	47	F0	AD	D4	A2	AF	9C	A4	72	C0
20	B7	FD	93	26	36	3F	F7	CC	34	A5	E5	F1	71	D8	31	15
30	04	C7	23	C3	18	96	05	9A	07	12	80	E2	EB	27	B2	75
40	09	83	2C	1A	1B	6E	5A	A0	52	3B	D6	B3	29	E3	2F	84
50	53	D1	00	ED	20	FC	B1	5B	6A	CB	BE	39	4A	4C	58	CF
60	D0	EF	AA	FB	43	4D	33	85	45	F9	02	7F	50	3C	9F	A8
70	51	A3	40	8F	92	9D	38	F5	BC	B6	DA	21	10	FF	F3	D2
80	CD	0C	13	EC	5F	97	44	17	C4	A7	7E	3D	64	5D	19	73
90	60	81	4F	DC	22	2A	90	88	46	EE	B8	14	DE	5E	0B	DB
A0	E0	32	3A	0A	49	06	24	5C	C2	D3	AC	62	91	95	E4	79
B0	E7	C8	37	6D	8D	D5	4E	A9	6C	56	F4	EA	65	7A	AE	08
C0	BA	78	25	2E	1C	A6	B4	C6	E8	DD	74	1F	4B	BD	8B	8A
D0	70	3E	B5	66	48	03	F6	0E	61	35	57	B9	86	C1	1D	9E
E0	E1	F8	98	11	69	D9	8E	94	9B	1E	87	E9	CE	55	28	DF
F0	8C	A1	89	0D	BF	E6	42	68	41	99	2D	0F	B0	54	BB	16

Round	Byte 1	Byte 2	Byte 3	Byte 4
R1	01	00	00	00
R2	02	00	00	00
R3	04	00	00	00
R4	08	00	00	00
R5	10	00	00	00
R6	20	00	00	00
R7	40	00	00	00
R8	80	00	00	00
R9	1B	00	00	00
R10	36	00	00	00

	00	01	02	03	04	05	06	07	08	09	0A	0B	0C	0D	0E	0F
00	63	7C	77	7B	F2	6B	6F	C5	30	01	67	2B	FE	D7	AB	76
10	CA	82	C9	7D	FA	59	47	F0	AD	D4	A2	AF	9C	A4	72	C0
20	B7	FD	93	26	36	3F	F7	CC	34	A5	E5	F1	71	D8	31	15
30	04	C7	23	C3	18	96	05	9A	07	12	80	E2	EB	27	B2	75
40	09	83	2C	1A	1B	6E	5A	A0	52	3B	D6	B3	29	E3	2F	84
50	53	D1	00	ED	20	FC	B1	5B	6A	CB	BE	39	4A	4C	58	CF
60	D0	EF	AA	FB	43	4D	33	85	45	F9	02	7F	50	3C	9F	A8
70	51	A3	40	8F	92	9D	38	F5	BC	B6	DA	21	10	FF	F3	D2
80	CD	0C	13	EC	5F	97	44	17	C4	A7	7E	3D	64	5D	19	73
90	60	81	4F	DC	22	2A	90	88	46	EE	B8	14	DE	5E	0B	DB
A0	E0	32	3A	0A	49	06	24	5C	C2	D3	AC	62	91	95	E4	79
B0	E7	C8	37	6D	8D	D5	4E	A9	6C	56	F4	EA	65	7A	AE	08
C0	BA	78	25	2E	1C	A6	B4	C6	E8	DD	74	1F	4B	BD	8B	8A
D0	70	3E	B5	66	48	03	F6	0E	61	35	57	B9	86	C1	1D	9E
E0	E1	F8	98	11	69	D9	8E	94	9B	1E	87	E9	CE	55	28	DF
F0	8C	A1	89	0D	BF	E6	42	68	41	99	2D	0F	B0	54	BB	16

14	4	13	1	2	15	11	8	3	10	6	12	5	9	0	7
0	15	7	4	14	2	13	1	10	6	12	11	9	5	3	8
4	1	14	8	13	6	2	11	15	12	9	7	3	10	5	0
15	12	8	2	4	9	1	7	5	11	3	14	10	0	6	13

14	4	13	1	2	15	11	8	3	10	6	12	5	9	0	7
0	15	7	4	14	2	13	1	10	6	12	11	9	5	3	8
4	1	14	8	13	6	2	11	15	12	9	7	3	10	5	0
15	12	8	2	4	9	1	7	5	11	3	14	10	0	6	13

15	1	8	14	6	11	3	4	9	7	2	13	12	0	5	10
3	13	4	7	15	2	8	14	12	0	1	10	6	9	11	5
0	14	7	11	10	4	13	1	5	8	12	6	9	3	2	15
13	8	10	1	3	15	4	2	11	6	7	12	0	5	14	9

10	0	9	14	6	3	15	5	1	13	12	7	11	4	2	8
13	7	0	9	3	4	6	10	2	8	5	14	12	11	15	1
13	6	4	9	8	15	3	0	11	1	2	12	5	10	14	7
1	10	13	0	6	9	8	7	4	15	14	3	11	5	2	12

7	13	14	3	0	6	9	10	1	2	8	5	11	12	4	15
13	8	11	5	6	15	0	3	4	7	2	12	1	10	14	9
10	6	9	0	12	11	7	13	15	1	3	14	5	2	8	4
3	15	0	6	10	1	13	8	9	4	5	11	12	7	2	14

2	12	4	1	7	10	11	6	8	5	3	15	13	0	14	9
14	11	2	12	4	7	13	1	5	0	15	10	3	9	8	6
4	2	1	11	10	13	7	8	15	9	12	5	6	3	0	14
11	8	12	7	1	14	2	13	6	15	0	9	10	4	5	3

12	1	10	15	9	2	6	8	0	13	3	4	14	7	5	11
10	15	4	2	7	12	9	5	6	1	13	14	0	11	3	8
9	14	15	5	2	8	12	3	7	0	4	10	1	13	11	6
4	3	2	12	9	5	15	10	11	14	1	7	6	0	8	13

Firefly

合作翻译官绝赞招募中！

开始贡献#

翻译要求#

本地预览#

提交翻译#

已完成的翻译#

Foundations of Security Week11 Lecture

Lecture Outline#

Learning Outcomes#

Advanced Encryption Standard (AES)#

Web Application Development - Responsive Design

Designing Web Sites for Mobile Devices (Responsive Design)#

Mobile Web Access#

Mobile User Interface Restrictions#

Mobile User Interface Advantages#

Adaptive and Responsive Design#

Viewport Tag#

CSS media query#

CSS media query example#

Rem?#

Another example#

Images#

Designing a responsive site#

Small screen first#

Breakpoints#

Touch screen issues#

Mobile keyboard issues#

Performance and content issues#

Data Structures and Algorithms Week11: Revision

Revision#

Key points#

Final Examination#

Question1#

Question2#

Question3#

Question4#

Question5#

Question6#

Path finding Exercises

Path finding Exercises#

Exercise 1#

Exercise 2#

Reference Answer#

Foundations of Security Week10 Lecture

Lecture Outline#

Learning Outcomes#

Advanced Encryption Standard (AES)#

How it works#

Key Expansion#

Function g\textcolor{blue}{g}g#

Quiz#

Conversion to Binary#

Key Expansion#

Initial Round (AddRoundKey)#

Main Rounds (Round 1)#

Quiz#

Main Rounds - SubBytes#

Main Rounds - ShiftRows#

Main Rounds - Mix Columns#

Reading Assignment and Optional Group Presentation#

Foundations of Security Week9 Lecture

Lecture Outline#

Learning Outcomes#

Data Encryption Standard (DES)#

S-boxes (Substitution)#

16 Rounds of Processing - Subkey Mixing#

16 Rounds of Processing - S-boxes (Substitution)#

P-box (Permutation)#

16 Rounds of Processing - P-box (Permutation):#

16 Rounds of Processing - 32-bit Swap#

Final Permutation (FP/IP-1)#

Final Permutation (FP)#

Final Ciphertext Output#

Conclusion#

Advanced Encryption Standard (AES)#

How it works#

Data Structures and Algorithms Week10: Comparing and making informed decisions

Comparing and making informed decisions#

Content#

Final Permutation (FP/IP^-1)#

Are we nearly there yet?
Heuristically informed search#

	00	01	02	03	04	05	06	07	08	09	0A	0B	0C	0D	0E	0F
00	63	7C	77	7B	F2	6B	6F	C5	30	01	67	2B	FE	D7	AB	76
10	CA	82	C9	7D	FA	59	47	F0	AD	D4	A2	AF	9C	A4	72	C0
20	B7	FD	93	26	36	3F	F7	CC	34	A5	E5	F1	71	D8	31	15
30	04	C7	23	C3	18	96	05	9A	07	12	80	E2	EB	27	B2	75
40	09	83	2C	1A	1B	6E	5A	A0	52	3B	D6	B3	29	E3	2F	84
50	53	D1	00	ED	20	FC	B1	5B	6A	CB	BE	39	4A	4C	58	CF
60	D0	EF	AA	FB	43	4D	33	85	45	F9	02	7F	50	3C	9F	A8
70	51	A3	40	8F	92	9D	38	F5	BC	B6	DA	21	10	FF	F3	D2
80	CD	0C	13	EC	5F	97	44	17	C4	A7	7E	3D	64	5D	19	73
90	60	81	4F	DC	22	2A	90	88	46	EE	B8	14	DE	5E	0B	DB
A0	E0	32	3A	0A	49	06	24	5C	C2	D3	AC	62	91	95	E4	79
B0	E7	C8	37	6D	8D	D5	4E	A9	6C	56	F4	EA	65	7A	AE	08
C0	BA	78	25	2E	1C	A6	B4	C6	E8	DD	74	1F	4B	BD	8B	8A
D0	70	3E	B5	66	48	03	F6	0E	61	35	57	B9	86	C1	1D	9E
E0	E1	F8	98	11	69	D9	8E	94	9B	1E	87	E9	CE	55	28	DF
F0	8C	A1	89	0D	BF	E6	42	68	41	99	2D	0F	B0	54	BB	16

Round	Byte 1	Byte 2	Byte 3	Byte 4
R1	01	00	00	00
R2	02	00	00	00
R3	04	00	00	00
R4	08	00	00	00
R5	10	00	00	00
R6	20	00	00	00
R7	40	00	00	00
R8	80	00	00	00
R9	1B	00	00	00
R10	36	00	00	00

	00	01	02	03	04	05	06	07	08	09	0A	0B	0C	0D	0E	0F
00	63	7C	77	7B	F2	6B	6F	C5	30	01	67	2B	FE	D7	AB	76
10	CA	82	C9	7D	FA	59	47	F0	AD	D4	A2	AF	9C	A4	72	C0
20	B7	FD	93	26	36	3F	F7	CC	34	A5	E5	F1	71	D8	31	15
30	04	C7	23	C3	18	96	05	9A	07	12	80	E2	EB	27	B2	75
40	09	83	2C	1A	1B	6E	5A	A0	52	3B	D6	B3	29	E3	2F	84
50	53	D1	00	ED	20	FC	B1	5B	6A	CB	BE	39	4A	4C	58	CF
60	D0	EF	AA	FB	43	4D	33	85	45	F9	02	7F	50	3C	9F	A8
70	51	A3	40	8F	92	9D	38	F5	BC	B6	DA	21	10	FF	F3	D2
80	CD	0C	13	EC	5F	97	44	17	C4	A7	7E	3D	64	5D	19	73
90	60	81	4F	DC	22	2A	90	88	46	EE	B8	14	DE	5E	0B	DB
A0	E0	32	3A	0A	49	06	24	5C	C2	D3	AC	62	91	95	E4	79
B0	E7	C8	37	6D	8D	D5	4E	A9	6C	56	F4	EA	65	7A	AE	08
C0	BA	78	25	2E	1C	A6	B4	C6	E8	DD	74	1F	4B	BD	8B	8A
D0	70	3E	B5	66	48	03	F6	0E	61	35	57	B9	86	C1	1D	9E
E0	E1	F8	98	11	69	D9	8E	94	9B	1E	87	E9	CE	55	28	DF
F0	8C	A1	89	0D	BF	E6	42	68	41	99	2D	0F	B0	54	BB	16

14	4	13	1	2	15	11	8	3	10	6	12	5	9	0	7
0	15	7	4	14	2	13	1	10	6	12	11	9	5	3	8
4	1	14	8	13	6	2	11	15	12	9	7	3	10	5	0
15	12	8	2	4	9	1	7	5	11	3	14	10	0	6	13

14	4	13	1	2	15	11	8	3	10	6	12	5	9	0	7
0	15	7	4	14	2	13	1	10	6	12	11	9	5	3	8
4	1	14	8	13	6	2	11	15	12	9	7	3	10	5	0
15	12	8	2	4	9	1	7	5	11	3	14	10	0	6	13

15	1	8	14	6	11	3	4	9	7	2	13	12	0	5	10
3	13	4	7	15	2	8	14	12	0	1	10	6	9	11	5
0	14	7	11	10	4	13	1	5	8	12	6	9	3	2	15
13	8	10	1	3	15	4	2	11	6	7	12	0	5	14	9

10	0	9	14	6	3	15	5	1	13	12	7	11	4	2	8
13	7	0	9	3	4	6	10	2	8	5	14	12	11	15	1
13	6	4	9	8	15	3	0	11	1	2	12	5	10	14	7
1	10	13	0	6	9	8	7	4	15	14	3	11	5	2	12

7	13	14	3	0	6	9	10	1	2	8	5	11	12	4	15
13	8	11	5	6	15	0	3	4	7	2	12	1	10	14	9
10	6	9	0	12	11	7	13	15	1	3	14	5	2	8	4
3	15	0	6	10	1	13	8	9	4	5	11	12	7	2	14

2	12	4	1	7	10	11	6	8	5	3	15	13	0	14	9
14	11	2	12	4	7	13	1	5	0	15	10	3	9	8	6
4	2	1	11	10	13	7	8	15	9	12	5	6	3	0	14
11	8	12	7	1	14	2	13	6	15	0	9	10	4	5	3

12	1	10	15	9	2	6	8	0	13	3	4	14	7	5	11
10	15	4	2	7	12	9	5	6	1	13	14	0	11	3	8
9	14	15	5	2	8	12	3	7	0	4	10	1	13	11	6
4	3	2	12	9	5	15	10	11	14	1	7	6	0	8	13