COMP 426 Unit 1

0.0(0)
Studied by 0 people
call kaiCall Kai
Locked
learnLearn
examPractice Test
spaced repetitionSpaced Repetition
heart puzzleMatch
flashcardsFlashcards
GameKnowt Play
Card Sorting

1/87

encourage image

There's no tags or description

Looks like no tags are added yet.

Last updated 2:44 AM on 9/5/26
Name
Mastery
Learn
Test
Matching
Spaced
Call with Kai
Chat

No analytics yet

Send a link to your students to track their progress

88 Terms

1
New cards

World Wide Web

Information system enabling content sharing over the internet

2
New cards

The internet

interconnected network of computers (any devices) around the world

3
New cards

Network

connection between 2+ computers (any device)

4
New cards

How do computers talk to each other?

Computers request resources from other computers on the network

5
New cards

Server

computer whose job is to provide resources to other devices on the network

6
New cards

Client

computer that requests resources from a server

7
New cards

Protocol

predefined, universal set of rules that computers use to talk to each other

8
New cards

HTTP (HyperText Transfer Protocol)

Protocol used to send information on the web between clients and servers, consisting of a request and response

9
New cards

HTTPS

a secure version of HTTP, encrypting the contents of the request and response so nobody else (besides the client and server) can read it

10
New cards

URLs

used to tell the browser where to look for a website’s files and which ones to specifically look for

11
New cards

HTML (Hypertext Markup Language)

Language used to specify the content and structure of a webpage

12
New cards

element type

the text in the tag between <>

13
New cards

<head>

contains metadata about the webpage

14
New cards

<body>

contains the content of the webpage (all of the elements to be displayed)

15
New cards

class = “ “

similar elements can have similar classes for easy handing as a group

16
New cards

id = “ “

uniquely identifies an element

17
New cards

Links a CSS file to HTML

<link rel = “stylesheet” href = “styles.css”>

18
New cards

id based selectors

#selector selects the elements with an ID to apply a style to

19
New cards

class based selectors

.selector selects the elements by class

20
New cards

type based selectors

select all elements of a certain type

Ex:

HTML: <img src = “url”> </img>

CSS: img { }


21
New cards

simple selector expressions

.class, #id, elementName

22
New cards

E.class, E#id

class and id selectors first limited by E

23
New cards

E F

selects F that are descendants (nested within) E

24
New cards

E + F

selects F that is an immediate sibling of E

25
New cards

Pseudo-classes

E:hover, E:first-child, E:focus, etc

26
New cards

Both HTML and CSS together help determine the layout

True

27
New cards

Layout viewport

area the browser arranges the elements of a webpage on (width and height measured in px)

28
New cards

padding

space between an element’s border and its content

29
New cards

Content

the element’s content is displayed here

30
New cards

CSS Flexbox

layout method allowing for items to be arranged in rows and columns

31
New cards

Flex container

element that has the flex display mode enabled

32
New cards

flex-direction

determines how items are placed in the content of a flex container

33
New cards

HTML + CSS

provides the layout for websites

34
New cards

Links JS file to HTML

<script src=”app.js”></script>

35
New cards

TypeScript is a superset of JavaScript

True

36
New cards

Dynamically Typed

variables’ data types are determined at runtime

37
New cards

Statically Typed

variables’ data types are declared/inferred at compile time (catches type errors before the code is run)

38
New cards

TypeScript code has to be compiled into JavaScript so that the browser can understand it (transpiled)

True

39
New cards

Node.js

JavaScript runtime environment that allows us to run JavaScript code outside of a browser

40
New cards

environment

a space where code can be run, and can contain other packages that we can directly run or that our code can reference and use as a dependency

41
New cards

node package manager (npm)

used to install packages into the Node environment

42
New cards

npm run dev

a “fake” simulated server that runs locally on your computer rather than on the internet

43
New cards

What best represents the role of HTML and CSS?

CSS specifies the style of a webpage, while HTML specifies the content on a webpage

44
New cards

If you want to specify the title of a webpage using a <title> element, which element in the HTML file should the title be nested under?

<head>

45
New cards

If you want to specify any user interface element to appear on your website, which element in the HTML file should the UI element be placed under?

<body>

46
New cards

Consider the following website file structure:

website
  ├── index.html
  └── dogs
      └── corgi.html *

Assume that the user loads the page defined in corgi.html in their browser. Write a link element containing the text "Click me!" that navigates the user back to the homepage, defined in index.html.

<a href="../index.html">Click me!</a>

47
New cards

Consider the following HTML code:

<!DOCTYPE html>
<html>
  <head>
    <title>Mystery!</title>
  </head>
  <body>
    <h1>Favorite Drinks</h1>
    <ol>
      <li>Boba</li>
      <li>Mocha</li>
      <li>Matcha</li>
    </ol>
  </body>
</html>

Describe the website that this HTML file specifies. What would show up to the user?

The website would display a large heading that states "Favorite Drinks". The website would also include a numbered list in the order of Boba, Mocha, and Matcha.

48
New cards

(T/F) All HTML elements can have the attributes class and id, but not all elements can have attributes like href or src.

True

49
New cards
<p class="text" id="greeting">
  Hello, world!
</p>

What CSS snippets would make this text red? 


p { color: red; }
.text  { color: red; }
#greeting  { color: red; }


50
New cards

Consider the following CSS code:

* {
  background-color: green; 
}

What effect would this CSS styling apply on a website (assuming this style is never overridden)?

The universal selector would make every element have a green background.

51
New cards

Consider the following CSS code:

div p {
  font-size: 4px;
}

Which elements would this CSS code style?

The descendant combinator selector would make all paragraph elements that are descendants of the <div> element have a 4px font size.

52
New cards

Consider the following CSS code:

[SELECTOR] {
  background-color: gray;
}

What selector should fill in the blank to style an element with the id: foo only when the user hovers over it with their mouse?

#foo:hover

53
New cards

In TypeScript, what is true about reference types?

Reference types are defined by interfaces, classes, and enumerations.

54
New cards

Consider the following Java code:

int myNumber = 88;

What is the correct way to declare this variable in TypeScript?

let myNumber: number = 88;

55
New cards

TypeScript arrays are more similar to Java Lists than to Java arrays because, like the Java List and unlike the Java array ...

TypeScript arrays do not have a fixed length and can be appended to.

56
New cards

Say that I have a TypeScript array named myArray of n length (where n > 2), and I want to remove the second to last element from the array.

Which of the following statements would remove this element?

myArray.splice(n-2, 1);

57
New cards

Consider the following TypeScript code:

let favoriteGames = ["MarioKart", "Fortnite", "Among Us", "Roblox"];
favoriteGames.pop();
favoriteGames.push("Terraria");
favoriteGames.push("Animal Crossing");
favoriteGames.splice(favoriteGames.indexOf("Fortnite"), 2); #start at index "Fortnite" and remove 2
favoriteGames[3] = "LEGO Star Wars";
favoriteGames.splice(1, 1); #start at index 1 and remove 1
favoriteGames.splice(2, 1);

What is the final value of favoriteGames after the code above is run?

["MarioKart", "Animal Crossing"]

58
New cards

Which of the following are valid ways to iterate over an array (named myArray) in TypeScript?

let i = 0;
while (i < myArray.length) {
  console.log(myArray[i]);
  i += 1;
}
for (let i = 0; i < myArray.length; i++) {
  console.log(myArray[i]);
}
for (let item of myArray) {
  console.log(item);
}


59
New cards

Consider the following TypeScript code:

function myFunction(x: string): number {
  // Code omitted
}

Based on this function declaration, what can we expect about this function?

The parameter’s data type is string and the function should return a number

60
New cards

Consider the following Java code:

double multiplyNumber(int x) {
  return x * 2.0;
}

If we were to rewrite this function in TypeScript, which of the following declarations would be valid?

function multiplyNumber(x: number): number {
  return x * 2.0;
}
let multiplyNumber = (x: number): number => {
  return x * 2.0;
}


61
New cards

One should NOT use arrow function syntax in replacement of traditional function syntax in which situation?

to create the constructor or methods of a class

62
New cards

In TypeScript, we use the let keyword to define fields of a class.

false

63
New cards

To define a class's constructor in TypeScript, we use the _____ keyword.

constructor

64
New cards

In TypeScript, the this keyword allows functions in a class to access the instantiated object.

true

65
New cards

Which of the following statements are true about Java and TypeScript?

Java is a language with nominal typing, which means it views objects as equivalent types only if they share the same name or are in an inheritance relationship. In contrast, TypeScript is a language with structural typing, which means it views objects as equivalent types if they share the same structure (have the same fields)

66
New cards

Consider the following TypeScript code:

public interface A {
  name: string;
  age: number;
}

public interface B {
  name: string;
  age: number;
}

function myFunction(o: A) {
  // Code hidden.
}

Say I create an object of type B in TypeScript named b. Based on the properties of TypeScript, could I run myFunction(b) successfully without running into any errors?

Yes, because TypeScript is a structural language and b has the same shape as the input parameter type of A

67
New cards

Consider the following TypeScript code.

(a: number) => { return a * 2; }

This code is an example of a:

function literal

68
New cards

In TypeScript, higher order functions:

  • are functions that can return other functions

  • are functions that can take other functions as parameters and execute them

  • promote the use of functional programming paradigm


69
New cards

Describe why higher order functions may be useful.

  • they enable people to program in a functional programming style by abstracting functionality and allowing functions to be reused for different purposes.

  • higher order functions may be used is the order of operations between two numbers. Depending on whether you pass in addition, subtraction, multiplication, or division, the original function can perform different operations without needing to be rewritten.


70
New cards

Consider the following TypeScript arrow function:

let greet = (name: string): string => {
  return "Hello, " + name;
}

What is the type annotation for the greet variable?

(name: string) => string

71
New cards

Consider the following TypeScript code:

let x = ((n: number): number => { return n * 2; })(423);

Is this TypeScript code valid?

Yes because the function is created and called multiplying 423 by 2

72
New cards

Consider the following TypeScript code:

let x = ((n: number): number => { return n * 2; })(423);


what would the resulting data type of x be? If this code is invalid, write N/A.

number (because x stores the result of the function, which is a number)

73
New cards

Consider the following TypeScript code and answer the following questions.

let stringFilter = (a: string[], predicate: (s: string) => boolean): string[] => {
  let filtered: string[] = [];
  for (let s of a) {
    if /*_BLANK HERE (2.2)_*/ {
      filtered.push(s);
    }
  }
  return filtered;
}

Is stringFilter an example of a higher order function?

Yes because this function takes in another function as a parameter

74
New cards

The goal of the stringFilter function is to filter an array of strings such that, when passed into the predicate function, all strings in the final array would return true.

Fill in the blank to complete the stringFilter function so that it works as expected.

(predicate(s)) because predicate is the function and s is the string you are testing

75
New cards

Consider the following TypeScript code:

let isSingleCharacter = (s: string): boolean => {
 return s.length == 1;
}

let sample = ["Hi", "J", "Kris", "K"];

stringFilter(sample, isSingleCharacter());

Does this code correctly define and pass in a valid function into stringFilter?

No because in this example, isSingleCharacter() calls the function and passes in its result (wants to run the function immediately) instead of passing in the function directly (here is my string and is the function you can use to test them)

76
New cards

Consider the following TypeScript code:

let sample = ["Hi", "J", "Kris", "K"];

stringFilter(sample, (s: /*_BLANK_*/): boolean => {
  return s.length >= 10;
});

In order for this code to be valid, which type annotation should be placed in the blank?

string

77
New cards

Consider the following TypeScript code (note, some type annotations are being inferred in this code):

let stringIsLength = (n: number) => {
  return (s: string) => {
    return s.length == n;
  }
} 

let isStringEmpty = stringIsLength(0);

Given what you can see about the implementation of stringIsLength, what is the type annotation of isStringEmpty?

(s: string) => boolean

78
New cards

Document Object Model (DOM)

Data representation of the elements of a webpage

79
New cards

What in a TypeScript file stores the DOM?

the document object

80
New cards

How to access elements in the DOM tree with method calls

const header = document.getElementById(“header”)

81
New cards

getElementsByTag

node list of elements by type

82
New cards

getElementById

retrieves single node with matching id attribute (null if none)

83
New cards

querySelector

  • retrieves first node that matches CSS selector

  • Can be called as a node to limit search to subtree below


84
New cards

querySelectorAll

  • retrieves all nodes that match CSS selector

  • can be called as method of a node to limit search to subtree below


85
New cards

innerHTML

get/set content of node as HTML

86
New cards

innerText

get/set content of node as text (not interpreted as HTML)

87
New cards

closure

referencing a value out of the immediate scope of the function, but still has access to the variable!

88
New cards

higher order function

Function that either returns another function, or accepts a function as a parameter.