HTML, CSS and JavaScript, JSON Flashcards
1
Q
What is JavaScript?
A
An OOP language supported by all browsers, used to program behaviour of web-pages on the occurrence of an event/in response to user interaction
2
Q
What is HTML?
A
A language for creating web pages. Describes the structure of a web page and is used alongside other styling languages to design the layout of a webpage
- HTML annotations are realised through tags (names enclosed in angle brackets)
3
Q
What is CSS?
A
Cascading Style sheets: A style sheet language for describing the look and formatting of a document written in HTML.
- can combine CSS and HTML by adding it in as a link to a stylesheet file that holds css
4
Q
What was developed for running javascript?
A
Node.js which can be run in the CLI. Originally you could only run Javascript in a web browser console. Then Node.JS was developed.
5
Q
What is Node.JS?
A
A javascript runtime, which allows you to run javascript on a server or your laptop
6
Q
List the Javascript primitive types:
A
Undefined, Null, Boolean, Number, String, Symbol, BigInt
7
Q
Describe the javascript undefined type:
Give an example:
A
A variable that has not been assigned a value is of this type
- it’s the value returned from a function that doesn’t explicitly return anything
- trying to access a non-existing object property also returns undefined
let x;
console.log(x); //outputs undefined
8
Q
Describe the javascript null type:
Give an example:
A
- Used to represent the intentional absence of any object value
- often used to represent a ‘no-value’ or ‘no-object’ state
- it needs to be assigned explicitly
let y = null;
console.log(y) returns null
9
Q
Describe the javascript Boolean type:
A
- consists of two values: true and false
- used to represent logical values
10
Q
Describe the javascript Number type:
A
- Represents numeric values
- used to represent both integers and floating point numbers
11
Q
Describe the javascript String type:
A
Uses to represent textual data
12
Q
Describe the javascript Symbol type:
A
- Used to create unique identifiers for objects
13
Q
Describe the javascript BigInt type:
A
- Used to represent integers of arbitrary length
14
Q
What are JavaScript expressions?
Give an example:
A
- Any valid unit of code that resolves to a value
- They can be used wherever JavaScript expects a value
e.g.
- 2 + 2
- “Hello” + “World”
- console.log(“Phoebe”)
15
Q
What are Javascript Statements?
Give an example:
A
- A statement performs an action
- they control program flow and can contain expressions
E.g.
- var x = 10;
- if (x > 10) {…}
- for (var i = 0; i < 10; i++) {…}
16
Q
What is the difference between Javascript expressions and statements?
A
While expressions always produce a value, statements may not.
- statements often contain expressions but the reverse is not true
- semicolons are used to separate expressions
17
Q
Describe the JavaScript Let keyword:
A
- Used to declare a variable
- Has block scoping
- Let variables can be updated but not re-declared
- let is more modern (compared to var) and is generally the preferred choice for variable declaration due to block scoping
18
Q
What is Block Scoping in JavaScript?
A
This means that a variable only exists within the block it’s declared in.
- variables declared with Let or const are scoped to the block
19
Q
Describe the JavaScript Var keyword:
A
- Used to declare variables
- old alternative to let
- is function-scoped
20
Q
What is function-scoping in JavaScript?
A
Variables declared with var inside a function are scoped to the function
21
Q
What do HTML tags define?
A
- elements that represent aspects of a webpage (headings, images, text)
- elements can nest within each other creating a structured document
22
Q
What is the DOM?
A
The Document Object Model is a programming interface for web documents
- it represents the structure of a document
- it allows programs to manipulate the documents structure, style and content
When the DOM is updated the web page automatically rerenders
23
Q
How does the DOM represent a document
A
As a tree of objects
- HTML tags become nodes in the tree and these nodes can be manipulated using JavaScript
24
Q
Describe HTML element attributes:
A
- HTML elements can have attributes, these provide information about the element. Common include attributes:
- Class: mostly used to point to a class in the stylesheet, can also be used by javascript to access/manipulate all elements of a specific class
- ID: specifies a unique id for an element, can be pointed to in the stylesheet or manipulated by javascript
- Style: specifies inline CSS style for an element
25
Describe Tailwind CSS
- A utility first framework that rapidly builds custom user interfaces
- Provides low level utility classes that let you build custom designs
26
Give examples of Tailwind classes:
bg-blue-900: Sets the background color of the body to a specific shade of blue.
text-center: Centres the text.
text-white: Sets the text color to white.
bg-blue-700: Sets the background color of the div to a different shade of blue.
p-4: Adds padding to all sides of the div. The number ‘4‘ represents the size of the padding.
my-4: Adds margin to the top and bottom of the second div (y-axis). The number ‘4‘ represents the size of the margin.
text-3xl: Sets the text size of the h1 element.
font-bold: Makes the font weight of the h1 element and the buttons bold.
underline: Underlines the h1 text.
mt-4: Adds margin to the top of the p element. The number ‘4‘ represents the size of the margin
27
What can we use JavaScript for?
Enhancing web pages, as it adds interactivity and dynamic behaviour. It
- responds to user events
- manipulates the DOM
- Makes network requests to load data without reloading pages
28
What do each of these bits of JavaScript code do:
- window.onload
- document.querySelector()
- addEventListener()
- window.onload runs a block of code when the page has finished loading
- document.querySelector selects the first element with the specified class
- addEventListener attaches a click event to the selected elements
29
What is Truthiness in JavaScript?
Truthiness: a value is either truth or falsy based on its inherent boolean representation
30
What are truthy values in javascript, give examples:
- Values considered true when encountered in a Boolean context.
- most values are truthy unless defined as falsy
e.g. {}. [], 42, "false", new Date(), -42, 3.14, -3.14, infinity, -infinity and all objects
31
What are falsy values in javascript, give examples:
- Values considered false when encountered in a boolean context
- e.g. false, 0, -0, "", null, undefined, NaN
32
Give examples of truth and falsy gotchas in JavaScript:
- empty arrays and objects are truthy (they are objects and objects are always truthy)
- "0"
- NaN is falsy
- null and undefined
33
Describe the double equals in JavaScript:
Double equals is represented as ==
- it preforms type coercion if the types of the variables being compared are different
e.g. 1 == "1" //outputs true
34
Describe the triple equals in JavaScript:
Triple equals is represented as ===
- it's stricter and doesn't perform type coercion if the types of the variables compared are different.
e.g. 1 === "1" //outputs false
- typically gives more predictable results
35
What are template literals in JavaScript?
- like python f strings
- these are string literals allowing embedded expressions
- enclosed in backtick (``) characters
- Contain placeholders which are indicated using the dollar sign and curly brackets
e.g. let name = 'john'
let greeting `hello ${name}`
36
What are arrays in JavaScript?
- They represent a collection of elements that are ordered and accessed by their index number
- e.g. let numbers = [1,2,3,4,5]
- uses 0 indexing
37
What does the list methods push and pop do in JavaScript:
push() adds new elements to the end of an array and returns the new length
- numbers.push(6) //numbers = [1,2,3,4,5,6]
pop() removes the last element of the array and returns it
- numbers.pop() //returns 6
38
What does the list methods shift and unshift do in JavaScript:
shift() removes the first element of the array and returns that element
- numbers.shift() // returns 1
unshift() adds new elements to the beginning of the array and returns the new length
- numbers.unshift(1) //numbers = [1,2,3,4,5]
39
What does the list methods slice and splice do in JavaScript:
slice() returns a shallow copy of a portion of the array
- let firstThree = numbers.slice(0, 3); // firstThree is [1,2,3]
splice() changes contents of an arrau by removing or replacing existing elements and/or adding new elements
- E.g. numbers.splice(2, 1, 'three'); // numbers = [1, 2, 'three', 4, 5]
40
What does the list method concat do in JavaScript:
concat() merges two or more arrays and returns a new array:
- let moreNumbers = numbers.concat([6, 7, 8]); //moreNumbers = [1,2,'three',4,5,6,7,8]
41
What is a shallow copy of something in JavaScript
- If you modify the shallow copy it modifies the original item, as the copy points to it
- not a real copy
42
Describe objects in javaScript:
Show how to create and access an object:
- a javascript object is a collection of properties where each property has a key and a value
Creation: let student = {name: "John", age: 20, grade: "A"};
Accessing Properties: let name = student.name; // name is now "John"
43
Show how to modify an object and add a property in JavaScript:
Modifying Properties: student.age = 21; // student is now {name: "John", age: 21, grade: "A"}
Adding Properties: student.major = "Computer Science"; // student is now {name: "John", age: 21, grade: "A", major: "Computer Science"}
44
Describe JavaScript methods:
JavaScript methods are functions that are properties of objects
- they allow objects to perform actions and manipulate data
45
What does the 'this' keyword do in javascript?
- Alter the state of an object
- it's a special keyword that's set when a function is called
- what it's set to depend on how the function was called
46
In a javascript method, what does 'this' refer to?
In a method, ‘this’ refers to the owner object. Alone, this refers to the global object. In a function, this refers to the global object. In a function, in strict mode, this is undefined.
47
What is strict mode in javascript?
- it eliminates some silent errors by changing them to throw errors
- to invoke strict mode use syntax "use strict"
- you can apply strict mode to individual factors
- in strict mode, the 'this' keyword is undefined in function that are not methods or constructors
48
What is an object literal in JavaScript, give an example:
- An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces, e.g.
let student = {name: "john", age: 20, grade: "A"};
49
What is an object constructor in JavaScript, give an example:
An object constructor is used to create an object. e.g.
let student = new Object;
student.name = "john"
student.age = 20;
student/grade = "A";
50
What does the method object.keys() return in JavaScript?
For this object:
let student = {name: "john", age: 20, grade: "A"};
This method returns an array of a given object's property names.
- let keys = Object.keys()
- console.log(keys)
// returns ["name", "age", "grade"]
51
What does the method object.entries() return in JavaScript?
For this object:
let student = {name: "john", age: 20, grade: "A"};
This method returns an array of a given object's [key, value] pairs.
- let entries = Object.entries(student);
console.log(entries);
// returns [["name","john"], ["age",20],["grade","A"]]
52
What does the method object.assign() return in JavaScript?
For this object:
let student = {name: "john", age: 20, grade: "A"};
This method is used to copy properties from one or more source objects to a target object. It returns the target object. e.g.
Let studentCopy = Object.assign({}, student)
console.log(studentCopy);
//returns {name: "John", age: 20, grade: "A"}
53
What do we know about functions given that in JavaScript functions are objects.
How can we confirm functions are objects?
- Functions can have their own properties and methods. e.g.
function myFunction() {
// Function body here
}
console.log(myFunction instanceof Object); // true
54
What is object destructuring in JavaScript? Give an example
It allows you to extract properties from an object into individual variables.
const student = {name: "Alice", age: 20, major "Computer Science"};
const {name, age, major} = student;
- Creates a student object, uses destructuring to create name, age, and major variables from the properties of the student object
55
What is the spread operator in JavaScript? Give an example
It allows an iterable such as an array or string to be unpacked/expanded in places were zero or more arguments/elements are expected. e.g.
const arr1 = [1,2,3];
const arr2 = [...arr1, 4, 5] //arr2 = [1,2,3,4,5]
function sum(a, b, b) {return a+b+c;}
console.log(sum(...arr1)); //outputs 6
56
How can the spread operator be used to create a new object?
Give an example with these two objects: const obj1 = { a: 1, b: 2 };
const obj2 = { c: 3, d: 4 };
- By combining the properties of two existing objects:
const newObj = {...obj, ...obj2};
//newObj = {a:1, b:2, c:3, d:4}
57
What are prototype chains in JavaScript and what are they used for?
- Every JavaScript object has an internal link to another object called its prototype ([[Prototype]])
- It can be accessed via Object.getPrototypeOf(obj) or obj.__proto__
- it's used to create inheritance
58
Explain how the prototype inheritance/chain works in javascript:
Prototype Chain: When you try to access a property or method on an object, JavaScript first looks for it on the object itself. If not found, it looks up the prototype chain — a linked list of objects — until it finds it or reaches null.
- By setting the prototype of one object to another, the first object inherits properties and methods of the second
59
How does JavaScript know when it's reached the end of the prototype chain?
Because the final object in the chain is null. Accessing properties of type null raises an exception, which will end the chain
60
How does javascript handle methods from prototype?
- when you create an object, it inherits methods from it's prototype
- the prototype is like a blueprint providing methods to all objects that inherit from it
- for example, if you create an array object, it inherits methods like push(), pop() from Array.prototype
61
How does javascript handle properties stored in an object?
- Properties are stored directly in objects.
- These values are unique to each instance of an object.
- For example, if you create an object person with properties name and age, these properties are stored directly in the person object
62
Describe what this piece of code does:
Example:
let animal = {
eats: true
};
let rabbit = {
jumps: true,
__proto__: animal
};
console.log(rabbit.eats); // true
- It create an object animal, and gives it a property eats
- it then creates an object rabbit which inherits from animal/animal is it's prototype object
- console.log(rabbit.eats); returns true as rabbit inherits this property from animal.
63
What does the object.create() method do in javascript?
- it creates a new object using an existing object as the prototype of the newly created object
64
Explain what this piece of javascript code does:
let animal = {
eats: true
};
let rabbit = Object.create(animal);
rabbit.jumps = true;
console.log(rabbit.eats); // true
- It creates an object animal
- it then uses the object.create function to create an object rabbit that uses animal as it's blueprint object.
- console.log(rabbit.eats); // returns true as the rabbit inherits the eats property from animal. It first checks if rabbit has this property, if it doesn't it looks for it in the animal object
65
Define how to use if, else if and else statements in Javascript:
let score = 100;
if (score > 80) {
console.log("A");
}
else if (score > 40) {
console.log("B");
}
else {
console.log("C");
}
66
Define how to use the ternary operator in Javascript:
let score = 100;
let result = score > 80 ? "E" : score > 40 ? "G" : "T";
console.log("Try again");
67
Define how to use a switch statement in Javascript:
let fruit = 'Banana';
switch(fruit) {
case 'Apple':
console.log("A");
break
case 'Banana':
console.log("B");
break
default:
console.log("C");
}
68
Define how to use a for loop in Javascript:
for (let i = 0; i < 5; i++) {
console.log(i)
}
69
Define how to use a for of loop in Javascript:
- used to loop over iterable objects like arrays and strings
let fruits = ['Apple', 'Coconut', 'Pear']
for (let fruit of fruits) {
console.log(fruit);
}
70
Define how to use a for in loop in Javascript:
Used to loop over properties of an object
let student = {name: 'john', age: 20, major: "CS"}
for (let prop in student) {
console.log(prop + ': ' + student[prop]);
}
71
Define how to use a while loop in Javascript:
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
72
Define how to use a do while loop in Javascript:
let j = 10;
do {
console.log(j);
j++;
} while (j < 15);
73
Show the 3 ways for declaring a function in Javascript:
function greet1(name) {
return "Hello, " + name;
}
const greet2 = function(name) {
return "Hello, " + name;
}
const3 = (name) => {
return "Hello, " + name;
}
74
What is the rest parameter in Javascript?
Give an example:
It allows a function to accept any number of arguments as an array.
function sum (...numbers) {
let total = 0;
for (let number of numbers) {
total += number;
}
return total;
}
console.log(sum(1,2,3,4)); //outputs 10
The sum function uses the rest parameter syntax to accept any number of arguments, and then calculates their sum
75
How are classes used in Javascript?
Define a class car with a constructor metho that takes a brand of car and a 'present' method.
Then create an instance of the car class called myCar
They are used as a template for creating objects.
class Car {
constructor(brand) {
this.carname = brand;
}
present() {
return 'i have a ' + this.carname;
}
}
let myCar = new Car("Ford");
console.log(myCar.present()); //outputs "I have a Ford"
76
Show how classes can inherit features from another class, using inheritance in javascript:
extend the class Car with a class called model.
class Model extends Car {
constructor(brand, mod) {
this.carname = brand;
this.model = mod;
}
show() {
return 'i have a ' + this.carname ', it is a ' + this.model;
}
}
let myModel = new Model("Ford", "Mustang");
console.log(myModel.show()); //outputs I have a Ford, it is a Mustang
77
What is JSON? Give an example:
JSON is a text format for representing javascript objects, defined with curly braces.
{
"foo": {
"field1":"one"
"field2":"two"
}
}
78
What are the JSON primitive types:
*Strings: Must be in double quotes "hello"
*Numbers: Integers and floating points numbers e.g. 42, -17.0
*Booleans: Can be True or False
*Null: represents an empty or no value
{
"string": "Hello, JSON",
"integer": 123,
"float": 3.14,
"boolean": true,
"null_value": null
}
79
Give an example of a JSON array:
Show how to access items:
They're defined using square brackets:
{
"region": [
"northeast",
"southeast",
"midwest"
]
}
- They're 0 indexed.
- region[0] // "northeast"
80
What does serialising Javascript objects to JSON mean and how is it done?
This means converting a Javascript object into a JSON string, using the stringify() method:
const myObject = {
name: "Alice", age: 30, skills = ["Javascript", "HTML", "CSS"]
};
const jsonString = JSON.stringify(myObj);
this gives:
// {"name":"Alice","age":30,"skills": ["JavaScript","HTML","CSS"]}
81
What is deserialising JSON back to JavaScript objects mean and how is it done?
- converting json strings back into JavaScript objects using JSON.parse()
const jsonString = '{"name": "Alice","age":30,"skills": ["JavaScript","HTML"]}';
const jsObj = JSON.parse(jsonString);
jsObj gives:
{ name: 'Alice',
age: 30,
skills: [ 'JavaScript', 'HTML' ] }
82
What does YAML stand for and what is it?
. YAML stands for “Yet another markup language” or "YAML Ain't Markup Language".
· Similar to JSON, but more popular.
. YAML files optionally start with --- and end with … - this isn’t compulsory, but are good practice.
83
List the YAML primitive data types:
. Strings - Plain text, can be enclosed in quotes. E.g. "Hello, World!", 'Hi'
. Numbers - Integers and floating-point numbers. E.g. 42, -17.0
· Null - Represents a null value. E.g. null, ~. Empty values.
Booleans:
. Truthy values: True, 'true', 't', 'yes', 'y', 'on', '1', 1, 1.0.
. Falsy values: False, 'false', 'f', 'no', 'n', 'off', '0', 0, 0.0.
84
How are YAML lists defined?
region:
-northeast
-southeast
-midwest
first_region: "{{region[0]}}"
85
What does YAML require to define the structure of data?
- It requires the correct indentation.
