From 6ab267e010a2ae18049ec2ea8dd6a28ea28a2a9e Mon Sep 17 00:00:00 2001 From: Jessica Wilkins <67210629+jdwilkin4@users.noreply.github.com> Date: Mon, 10 Feb 2025 02:01:35 -0800 Subject: [PATCH] chore(curriculum): adding transcripts for set 2 of DOM transcripts (#58621) Co-authored-by: Tom <20648924+moT01@users.noreply.github.com> Co-authored-by: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com> --- .../meta.json | 2 +- .../673368c0161e6b326a7e03f0.md | 73 +++++++++- .../673368ccf52205329b729378.md | 130 ++++++++++++++++++ .../673368d97e8ce232cdcd6b68.md | 122 ++++++++++++++++ .../673368e7bd043f331919514d.md | 86 +++++++++++- 5 files changed, 409 insertions(+), 4 deletions(-) diff --git a/curriculum/challenges/_meta/lecture-working-with-the-dom-click-events-and-web-apis/meta.json b/curriculum/challenges/_meta/lecture-working-with-the-dom-click-events-and-web-apis/meta.json index 4c253338809..0b76bf9cfab 100644 --- a/curriculum/challenges/_meta/lecture-working-with-the-dom-click-events-and-web-apis/meta.json +++ b/curriculum/challenges/_meta/lecture-working-with-the-dom-click-events-and-web-apis/meta.json @@ -24,7 +24,7 @@ }, { "id": "673368c0161e6b326a7e03f0", - "title": "How Do You Create New Nodes Using innerHTML() and createElement()?" + "title": "How Do You Create New Nodes Using innerHTML and createElement()?" }, { "id": "673368ccf52205329b729378", diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md index 4a54c534660..26b820cc9b3 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368c0161e6b326a7e03f0.md @@ -1,6 +1,6 @@ --- id: 673368c0161e6b326a7e03f0 -title: How Do You Create New Nodes Using innerHTML() and createElement()? +title: How Do You Create New Nodes Using innerHTML and createElement()? challengeType: 11 videoId: WypY2jRcCe0 dashedName: how-do-you-create-new-nodes-using-innerhtml-and-createelement @@ -10,6 +10,77 @@ dashedName: how-do-you-create-new-nodes-using-innerhtml-and-createelement Watch the lecture video and answer the questions below. +# --transcript-- + +How do you create new nodes using `innerHTML` and `createElement()`? + +Let's see how you can create nodes with `innerHTML` and `createElement()`. + +We'll start with `innerHTML`. + +`innerHTML` is a property of `Element` objects that you can use to set their HTML markup. With `innerHTML`, you can set the HTML structure of an existing element with a string, creating all the necessary nodes. + +This is an example. We have an empty `div` and we'll add some elements within it using the `innerHTML` property: + +```html +
+ +
+``` + +First, we need to select the element by its ID: + +```js +const container = document.getElementById("container"); +``` + +Then, we set the `innerHTML` property of the container to a string. This string has to have all the markup necessary to represent the nodes and the structure that you want to create. You can think of it as writing HTML within a string. + +```js +container.innerHTML = ""; +``` + +We will set the `innerHTML` of this element to an unordered list of pizza ingredients (cheese and tomato). + +You can also write the string on multiple lines if it makes the markup easier to understand. The important thing is that the markup accurately represents the HTML structure you want to create. + +After running this code, you will see the following HTML structure if you inspect your markup. + +```html +
+ +
+``` + +The new nodes were created and added dynamically to the DOM after the string was parsed. + +`innerHTML` can be very helpful for certain scenarios. However, it does have some security risks that you should be familiar with. You shouldn't use it if you won't have full control over the string. + +For example, if the string will be entered by the user, you shouldn't use `innerHTML` because the user might insert malicious content into your website. Because of this, it’s usually recommended to use `textContent` instead, to insert plain text. + +Another way to create a new node is by using the `createElement()` method. With this new method, you can create a new element by specifying its tag name. + +For example, if you want to create an image element, you would pass the `img` tag as a string when calling this method: + +```js +document.createElement("img"); +``` + +And you can assign this new object to a variable: + +```js +const img = document.createElement("img"); +``` + +The `createElement()` method returns a new `HTMLElement` object if the document is an `HTMLDocument`. Else, it returns an `Element` object. + +Once you have this new element ready, you can add it to the DOM as a child of another existing element using the `appendChild()` method, or you can insert it at a specific location using other methods. Choose the one that best fits your needs. + +Creating nodes with `innerHTML` and `createElement()` allows you to dynamically manipulate the structure and content of your websites. By combining these techniques, you can build interactive web applications. + # --questions-- ## --text-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md index a6d1db635e2..73a4bfbf279 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368ccf52205329b729378.md @@ -10,6 +10,136 @@ dashedName: what-is-the-difference-between-innertext-textcontent-and-innerhtml Watch the lecture video and answer the questions below. +# --transcript-- + +What is the difference between `innerText`, `textContent`, and `innerHTML`? + +Let's learn about `innerText`, `textContent`, and `innerHTML`. + +These are properties that you can access in JavaScript to get or change the content of an HTML element. Even if they may look very similar at first, they do have key differences. Choosing the right one depends on your specific use case, so let's dive in. + +Let's start with `innerText`. + +`innerText` represents the visible text content of the HTML element and its descendants. This property doesn't include hidden text or HTML tags, only rendered text. + +For example, here you can see a `div` element that contains two paragraphs: + +```html +
+

Hello, World!

+

I'm learning JavaScript

+
+``` + +If we get a reference to this HTML element in our JavaScript code using `getElementById()`, we can access the `innerText` property of this element: + +```js +const container = document.getElementById("container"); +console.log(container.innerText); +``` + +This is the inner text of this element: + +```md +Hello, World! +I'm learning JavaScript +``` + +The property returns a string with the text contained within the element, including text from its descendants. + +You should know that `innerText` only returns the text that is visible at the particular moment when the string is requested. If a child element is hidden, its text won't be visible. + +This is an example where the second paragraph is hidden: + +```html +
+

Hello, World!

+ +
+``` + +If we try to log the `innerText` again, now the output won’t have the text of the second paragraph: + +```js +console.log(container.innerText); +``` + +This will be the output: + +```md +Hello, World! +``` + +You can set the `innerText` of an HTML element like this, but this will replace the existing text and add a line break element (`br`) element for every line break: + +```js +container.innerText = "JavaScript is awesome!"; +``` + +Since `innerText` takes visibility into account, getting its value triggers a process called "reflow", that recalculates the position of certain elements on the website. This process can be computationally intensive, so you should avoid triggering it if possible. + +Great. Now let's talk about `textContent`. + +`textContent` returns the plain text content of an element, including all the text within its descendants. + +The most important difference between `innerText` and `textContent` is that `textContent` always returns the full text content of an HTML element and its descendants, regardless of whether it's visible or hidden. + +Here we have the same example in HTML: + +```html +
+

Hello, World!

+

I'm learning JavaScript

+
+``` + +If you try to access this property, you'll see the text of the element and its descendants as the output, keeping the indentation and spacing: + +```js +const container = document.getElementById("container"); +console.log(container.textContent); +``` + +```md +Hello, World! +I'm learning JavaScript +``` + +If an HTML element is not visible, like you can see over here, where we’ve hidden the second paragraph, its text will still be included in this property: + +```html +
+

Hello, World!

+ +
+``` + +You will see the same output: + +```md +Hello, World! +I'm learning JavaScript +``` + +`textContent` will also include the content of elements like `script` and `style`. + +If you try to replace the value of `textContent` on a node, it will remove all its child nodes and replace them with a single text node containing the new string: + +```js +const container = document.getElementById("container"); +container.textContent = "Hello, World!"; +``` + +And finally, let's talk about how `textContent` and `innerText` differs from `innerHTML`. + +Remember that with `innerHTML` you can set the inner HTML content of an element. This is helpful for injecting new HTML into the DOM dynamically. + +However, remember that this poses a security risk if you don't have control over the string, such as strings containing data entered by the user. If that data is malicious, it can lead to serious security issues. + +To avoid this, it's recommended to use the `textContent` property to insert plain text instead. + +The `innerText`, `textContent`, and `innerHTML` properties in JavaScript provide different ways to access and manipulate the content of HTML elements. You should understand the differences between these properties if your goal is to work with HTML content in JavaScript effectively. + # --questions-- ## --text-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md index e351964522d..fb7164c32f6 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368d97e8ce232cdcd6b68.md @@ -10,6 +10,128 @@ dashedName: how-do-you-add-and-remove-nodes-from-the-dom-with-appendchild-and-re Watch the lecture video and answer the questions below. +# --transcript-- + +How do you add and remove nodes from the DOM with `appendChild()` and `removeChild()`? + +There will be times where you will need to add or remove nodes from the DOM and there are a couple of Web APIs you can use. + +In this lecture video, we will cover the `appendChild()` and `removeChild()` methods. + +The `appendChild()` method is used to add a node to the end of the list of children of a specified parent node. + +Here is the basic syntax for the `appendChild()` method: + +```js +parentNode.appendChild(newNode); +``` + +Let's take a look at an example to better understand how to use the `appendChild()` method. + +In this example, we have an unordered list element with an ID of `desserts` inside the HTML. This list contains two list items of `Cake` and `Pie`: + +```html + +``` + +To access that list inside the JavaScript file, we can use the `getElementById()` method: + +```js +const dessertsList = document.getElementById("desserts"); +``` + +We have a variable called `dessertsList` that stores the reference to the `ul` element with the ID of `desserts`. + +Then we need to create a new list item element using the `createElement()` method: + +```js +const dessertsList = document.getElementById("desserts"); +const listItem = document.createElement("li"); +``` + +The following code will create a new list item element and store it in a variable called `listItem`. + +To add that node to the end of the list of children of the `ul` element, we can use the `appendChild()` method: + +```js +const dessertsList = document.getElementById("desserts"); +const listItem = document.createElement("li"); + +dessertsList.appendChild(listItem); +``` + +If you were to run this code, you will see that a new list item element is added to the end of the list of children of the `ul` element. + +The problem is that the new list item element is empty. To add text content to the new list item element, you can use the `textContent` property: + +```js +const dessertsList = document.getElementById("desserts"); +const listItem = document.createElement("li"); + +listItem.textContent = "Cookies"; +dessertsList.appendChild(listItem); +``` + +Now the list will show `Cake`, `Pie`, and `Cookies`. + +To remove a node from the DOM, you can use the `removeChild()` method. + +Here is the basic syntax for the `removeChild()` method: + +```js +parentNode.removeChild(childNode); +``` + +Let's take look at an example where we want to remove that last paragraph element from this `section` element: + +```html +
+

Example sub heading

+

first paragraph

+

second paragraph

+
+``` + +We can access the `section` element inside of the JavaScript file using the `getElementById()` method: + +```js +const sectionEl = document.getElementById("example-section"); +``` + +Once we have the reference to the `section` element, we can then access that last paragraph using the `querySelector()` method: + +```js +const sectionEl = document.getElementById("example-section"); +const lastParagraph = document.querySelector("#example-section p:last-of-type"); +``` + +We are using the `:last-of-type` pseudo-class to select the last paragraph element inside the `section` element. + +Now that we have the parent and child nodes, we can remove the last paragraph element from the `section` element using the `removeChild()` method: + +```js +const sectionEl = document.getElementById("example-section"); +const lastParagraph = document.querySelector("#example-section p:last-of-type"); + +sectionEl.removeChild(lastParagraph); +``` + +Here is the new HTML markup after removing the last paragraph element: + +```html +
+

Example sub heading

+

first paragraph

+
+``` + +So, when might you want to add or remove nodes from the DOM? + +If you're working with dynamic content, you might need to add or remove nodes from the DOM. Real world examples include shopping carts, to-do lists, and social media feeds. + # --questions-- ## --text-- diff --git a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md index 74f45f28a3c..ebb442d9b14 100644 --- a/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md +++ b/curriculum/challenges/english/25-front-end-development/lecture-working-with-the-dom-click-events-and-web-apis/673368e7bd043f331919514d.md @@ -10,6 +10,88 @@ dashedName: how-do-the-navigator-window-and-document-work Watch the lecture video and answer the questions below. +# --transcript-- + +How do the `Navigator`, `Window`, and `Document` work? + +When working with the DOM, you will often come across the `Navigator`, `Window`, and `Document` interfaces. An interface is a collection of methods and properties that define a particular object. + +In this lecture, we will explore how these interfaces work and how you can use them in your web applications. + +Let's start by looking at the `Navigator` interface. + +The `Navigator` interface provides information about the browser environment, such as the user agent string, the platform, and the version of the browser. A user agent string is a text string that identifies the browser and operating system being used. + +Here is an example of how to access the user agent string using the `Navigator` interface: + +```js +console.log(navigator.userAgent); +``` + +The result will be a string that contains information about the browser and operating system being used. + +Here is an example string that you might see: + +```md +Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36 +``` + +This could be helpful if you want to display different content based on the user's browser or operating system. + +Another useful property of the `Navigator` interface is the `language` property, which returns the language of the browser. You can use this property to display content in the user's preferred language. + +Here is an example of using the `language` property: + +```js +console.log(navigator.language); +``` + +The result will be a string that contains the language code of the browser. If your preferred language is English, it will return `en-US`. + +Next, let's look at the `Window` interface. + +The `Window` interface represents the browser window that contains the DOM document. It provides methods and properties for interacting with the browser window, such as resizing the window, opening new windows, and navigating to different URLs. + +Here is an example of working with the `innerWidth` property of the `Window` interface: + +```js +console.log(window.innerWidth); +``` + +The result will be the width of the browser window in pixels. For example, if the browser window is 800 pixels wide, it will return `800`. + +Another example would be the `location` property of the `Window` interface, which provides information about the current URL of the browser window: + +```js +console.log(window.location); +``` + +The result will be an object that contains information about the current URL, such as the protocol, hostname, and pathname. + +Most of the time you won't need to interact with the `Window` interface directly, as it is automatically available in the global scope of your JavaScript code. + +For example, you can access the `location` property directly without using the `window` object: + +```js +console.log(location); +``` + +You will see the same results as before when you were using `window.location`. + +Finally, let's look at the `Document` interface. + +The `Document` interface represents the DOM document that is displayed in the browser window. It provides methods and properties for interacting with the DOM, such as selecting elements, creating new elements, and modifying the content of elements. + +Here is an example of using the `document.children` property: + +```js +console.log(document.children); +``` + +The result will be an `HTMLCollection` object that contains all the child elements of the document. + +There are many more properties and methods available on the `Document`, `Window`, and `Navigator` interfaces. However, this lecture has provided you with a basic understanding of how these interfaces work and how to use them in your web applications. + # --questions-- ## --text-- @@ -50,7 +132,7 @@ This property helps identify the browser and operating system. ## --text-- -Which property of the window interface provides information about the current URL? +Which property of the `Window` interface provides information about the current URL? ## --answers-- @@ -86,7 +168,7 @@ This property helps you find out where the browser is currently navigating. ## --text-- -How can you access the `document` interface properties without explicitly using the `window` object? +How can you access the `Document` interface properties without explicitly using the `window` object? ## --answers--