JS behind the scenes

Question 1

What is the DOM?

Answer 1

The DOM stands for the Document Object Model. It is the structured representation of a HTML document and is used to connect webpages to scripts like those used in JS.

Question 2

Is the DOM apart of JS?

Answer 2

No the DOM is not apart of JS. JS and the DOM are two separate things that interact.

Question 3

How do we select HTML elements in JS?

Answer 3

We can select HTML elements by using the document.queryselector method. It uses the form:
var x = document.getElementById("myDiv");
x.querySelector("p").innerHTML = "Hello World!";

The above selects the HTML element paragraph(‘p’) from the CSS element x which in this case is a Div.

Question 4

What is MEAN and MERN stack development and what does each component responsible for?

Answer 4

MEAN and MERN stack development are a group of technologies that interact using JS to make a comprehensive application.
M - MongoDB makes use of JS to connect to a database providing the back end.
E - ExpressJS is a framework for nodeJS that helps handle client side server request.
A - Angular is a frontend framework that allows us to load one page in our browser that handles the entire website.
R - React is a JS library that allows us to build interactive UIs by loading certain components at a time.
N - node.JS is a runtime environment for JS that allows you to build applications without needing a browser.

Question 5

What do we need to add to code so that it can react to events such as a ‘click’?

Answer 5

You must add an event listener. Event listeners are pieces of code that are attached to components in HTML or CSS that wait for a specific event to happen involving that component and execute a function.

Question 6

What is a modal window?

Answer 6

A modal window is a window that appears as an overlay.

Question 7

Using code, how can we add the ‘hidden’ property to an element called ‘modal’?

Answer 7

We can use the code:

modal.classList.add(‘hidden’);

Question 8

How would I code an event listener that listens for a keypress on a modal element and performs function DoThis with argument x?

Answer 8

modal.addEventListener(‘keydown’, DoThis(x)

{ };

Question 9

Write a piece of code that dynamically changes the src of an element called ‘diceEl’ to a pictures (named dice-x.png) of the result that corresponds to the dice roll variable dice_roll?

Answer 9

To dynamically change the picture in diceEl associated with the dice roll result stored in dice_roll you would use.
diceEl.src = dice-${dice_roll}.png;

Question 10

Is JS low-level?

Answer 10

No JS is high-level as it automatically manages a computers hardware resources for us.

Question 11

Give an example of a programming paradigm and why is JS multi-paradigm?

Answer 11

Functional programming or Object-Oriented programming are examples of programming paradigms. JS uses a multiparadigm approach because you can use FP, OOP and Procedural programming with it.

Question 12

Does JS use classes and instances?

Answer 12

No. JS is a prototype based language. It uses objects and these objects can be used as the template for new objects or specify their own object properties.

Question 13

Can JS pass functions into other functions?

Answer 13

Yes. Functions in JS are treated as variables which means we can return them and pass them to other functions. The eventListener is a good example of this.

Question 14

Is JS strongly typed?

Answer 14

No JS uses type coercion so it will try to distinguish each variables datatype at runtime.

Question 15

What feature makes JS non-blocking?

Answer 15

The event loop allows JS to take long running tasks and run them on a separate thread in the background while other tasks are executed. Then once they are finished it moves them back through the main thread. This means that JS is non-blocking.

Question 16

What are two components of the JS engine and their functions?

Answer 16

The callstack which is where code is put and executed.

The heap where objects in memory are stored.

Question 17

What is the difference between compilation and interpretation?

Answer 17

Compilation is the act of transforming source code into a portable file of machine code then executing this machine code.
Interpretation is the act of using an interpreter to run through source code and execute it line by line.

Question 18

What is the AST?

Answer 18

The AST is the abstract syntax tree. It is the structure that is made when code is grouped into related content and checked for syntax errors.

Question 19

What are the steps of JIT compilation?

Answer 19

Just-in-time compilation follows these steps:

1. Code is parsed into AST.
2. The AST is then compiled into machine code.
   2b. Code is compiled into very basic unoptimized code so that execution can begin then as this is happening parts of the code are optimised by the engine and unoptimized code is swapped for optimized code.
3. The machine code is executed immediately in the call stack.

Question 20

Does node.JS used Web APIs?

Answer 20

No it doesn’t. nodeJS allows us to run JS applications without a browser so it doesn’t have access to WEB APIs.

Question 21

What is the structure of a fetch request?

Answer 21

fetch requests use a chain of ‘.then’ keywords followed by a statement and a ‘.catch’ to catch errors.

fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

Question 22

What is a fetch request and why do we use them?

Answer 22

Fetch requests are a simple API for ‘fetching’ resources and managing web requests.

Question 23

What does a fetch request return?

Answer 23

A fetch request returns a promise.

Question 24

What are the four statuses of a promise?

Answer 24

fulfilled - promise succeeded
rejected - promise rejected
pending - not fulfilled or rejected
settled - has either fulfilled or rejected?