Week 8 - client side interaction with services Flashcards
Flashcard 1:
Front:
What is the Document Object Model (DOM), and how is it structured?
Definition: The DOM is a tree-like representation of any structured document (e.g., HTML or XML), allowing dynamic interaction and manipulation.
Structure:
Root node: Represents the document (e.g., <html> for HTML or the root element in XML).
Child nodes: Tags like <head>, <body> (HTML) or <book>, <title> (XML).
Further branches: Sub-elements or attributes.
Leaf nodes: Content like "Hello world!" or "Good morning!".
Purpose: The DOM provides a programming interface to access, modify, or interact with document elements, whether for web development or data processing.</title></book>
Javascript can access the dom dynamically to change content , structure and style of a web page
NOTE
what the dom would look like for this?
<!DOCTYPE html>
<html>
<head>
<title>Example Page</title>
</head>
<body>
<p>Hello, World!</p>
<ul>
<li>First Item</li>
<li>Second Item</li>
</ul>
</body>
</html>
Document
|
<html>
┌────────────┴────────────┐
<head> <body>
| |
<title> <p> Hello, World!
| |
"Example Page" <ul>
┌──────┴──────┐
<li> <li>
| |
"First Item" "Second Item"
</li></li></ul></p></title>
good vid for dom events
https://youtu.be/0fy9TCcX8Uc?si=_Uj72-SvFD4PPlVc
Front:
What is a script in HTML, and why is it used?
Definition: A script is a piece of JavaScript code added to an HTML document to make the webpage interactive or dynamic.
Uses:
Showing alerts (e.g., alert(‘Hello!’)).
Validating form inputs before submission.
Handling user actions like clicks or keypresses.
Animating webpage elements.
How it’s added:
Inline: Inside an element.
Internal: Inside a
tag in the same HTML file.
External: In a separate .js file, linked to the HTML file.
Front:
What are inline scripts in HTML? Give an example.
Definition: JavaScript code added directly into an HTML element using attributes like onclick, onload, etc.
Example:
<button>Click Me</button>
How It Works:
The onclick attribute triggers the alert(‘Hello!’) when the button is clicked.
What are the advantages and disadvantages of inline scripts?
Pros:
Quick to implement: Ideal for small, simple actions like showing an alert when a button is clicked.
No separate file needed: Everything is contained in one place (HTML file).
Cons:
Not reusable: Each element requires its own script.
Example of redundancy:
<button>Button 1</button>
<button>Button 2</button>
Updating the alert requires changes in multiple places.
Hard to maintain: Mixing JavaScript into HTML clutters the code.
Less secure: Inline scripts are prone to XSS (Cross-Site Scripting) attacks.
Bad separation of concerns: HTML (structure) and JavaScript (behavior) are not clearly separated.
What are internal scripts in HTML? Give an example.
JavaScript code written inside a
tag within the same HTML file.
Example:
<!DOCTYPE html>
<html>
<head>
<script>
function greet() {
alert('Hello!');
}
</script>
</head>
<body>
<button>Click Me</button>
</body>
</html>
How It Works:
The
tag defines a function (greet()), which is triggered by the onclick attribute when the button is clicked.
What are the advantages and disadvantages of internal scripts?
Pros:
Centralized code: All JavaScript is in one place, making it easier to manage.
Reusable within the document: Functions like greet() can be used for multiple elements.
Example of reuse:
html
Copy code
<button>Button 1</button>
<button>Button 2</button>
Cons:
Limited reusability: The script is tied to this specific document. To use the same script on another HTML file, you must copy and paste it.
JavaScript code written in a separate .js file and included in the HTML file using a
tag.
Example:
HTML File:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button>Click Me</button>
</body>
</html>
script.js File:
function greet() {
alert(‘Hello!’);
}
How It Works:
The
tag in the HTML file links to the external script.js file.
The greet() function is defined in script.js and can be used in any HTML file that includes this script.
What are the advantages and disadvantages of external scripts?
Pros:
Reusability: The same script can be used across multiple pages.
Example:
<!-- index.html -->
<!-- about.html -->
Any changes to script.js automatically apply to all pages.
Better maintainability: JavaScript is kept separate from HTML, making both easier to read and debug.
Performance: External scripts can be cached by browsers, improving page load speed for returning users.
Separation of concerns: HTML (structure) and JavaScript (behavior) are clearly separated.
Cons:
Requires an extra file: You need to manage an additional .js file.
Initial load time: If the external file is large or slow to load, it can delay page rendering.
What values are allowed in JSON key-value pairs?
We are discussing values in the key-value pairs of JSON.
Keys in JSON must always be strings (e.g., “key”: “value”).
Allowed Values in JSON
JSON key-value pairs allow the following data types as values:
Strings: “example”
Numbers: 42
Booleans: true, false
Arrays: [“apple”, “banana”]
Objects: { “key”: “value” }
Null: null
Key Takeaway:
JSON is strict and designed for data exchange. Only basic, language-independent types are allowed.
Keys in JSON must always be strings.
What values are allowed in JavaScript object key-value pairs?
note javascript can obviously also have the basic types like JSON as well we are talking about further examples of values
JavaScript objects allow all JSON-supported types and more:
Functions:
javascript
Copy code
let obj = {
greet: function() { return “Hello!”; }
};
Dates:
javascript
Copy code
let obj = {
createdAt: new Date()
};
Undefined:
javascript
Copy code
let obj = {
value: undefined
};
Key Takeaway:
JavaScript objects are more flexible, allowing dynamic types like functions, dates, and undefined.
Keys in JavaScript objects can be strings, numbers, or valid identifiers (e.g., title: “Introduction”).
Front:
What is the purpose of JSON.parse() in JavaScript?
Purpose: Converts a JSON string (received from the server) into a JavaScript object so it can be manipulated in code.
When to use:
When receiving data from a server.
Example:
let jsonData = ‘{“name”: “Alice”, “age”: 25}’; // JSON string
let jsObject = JSON.parse(jsonData); // Converts to a JavaScript object
console.log(jsObject.name); // Outputs: Alice
console.log(jsObject.age); // Outputs: 25
What is the purpose of JSON.stringify() in JavaScript?
Purpose: Converts a JavaScript object into a JSON string to send it to the server.
When to use: When sending or returning data to a server.
Example:
let jsObject = { name: “Alice”, age: 25 }; // JavaScript object
let jsonData = JSON.stringify(jsObject); // Converts to JSON string
console.log(jsonData); // Outputs: {“name”:”Alice”,”age”:25}
Key Note:
In this example, we see that when the JavaScript object becomes a JSON string, JSON enforces that all keys must be strings (e.g., “name” instead of name).
