JavaScript and HTML

In the Tasks for this course, you will manipulate content in HTML files from JavaScript. In order to link a JavaScript file to an HTML file, an HTML <script> tag is used.

The <script> tag is commonly placed before the closing </body> tag as follows:

<main>
	<section>
		<div>
			<label for="name">Name:</label>
			<span id="name"></span>
		</div>
		<div>
			<label for="food">Favorite Foods:</label>
			<span id="food"></span>
		</div>
	</section>
</main>
<footer>
	&copy;<span id="year"></span> | Biography | Lesson 2
</footer>
<script src="scripts/task2.js"></script>

The "src" attribute of the <script> tag should point to the folder and file name of the JavaScript file relative to the current HTML file.

Accessing HTML elements using JavaScript

Since this is not an HTML course, you aren't required to know HTML elements in depth. However, you will need an understanding of how to access HTML elements from JavaScript code, since using JavaScript to access HTML elements in web pages is a very common use of JavaScript.

There are several ways to access HTML elements. One of which is by using the getElementById method.

document.getElementById('elementId')

In real code, the id "elementId" is replaced by an actual, unique id. For example, this HTML element

<section id="discussion">

has an id of "discussion". That means the following JavaScript is used to find the element and store it in a variable for later use.

let theDiscussionElement = document.getElementById('discussion')

Another approach is to use the querySelector method:

document.querySelector('#elementId')

The "elementId" is, again, the value of the HTML attribute's id. Notice that a pound sign (#) is required before the name of the id value.

Using the same discussion HTML element you looked at before, the JavaScript to get it and store it in a variable is

let theDiscussionElement = document.querySelector('#discussion');

Modifying HTML elements using JavaScript

Once you get access to the HTML element, you can change its content by using one of two properties, the first of which uses the element's innerHTML property.

Here is some JavaScript code that does this.

document.querySelector('#discussion').innerHTML = 'The content I would like to
display in the HTML file.';
					

Another, similar, way uses the element's textContent property.

document.querySelector('#discussion').textContent = 'The content I would like to
display in the HTML file.';
					

You can also modify an HTML element using the setAttribute method. To change the picture displayed in an image tag modify the src property of the image element.

document.querySelector('#mainImage')
		.setAttribute('src', 'images/main.png');

Of course, you can make this same modification directly.

document.querySelector('#mainImage').src = 'images/main.png';

Variables

Complete the following steps

In the task2.js file:

1. Declare and instantiate a variable to hold your name
2. Place the value of the name variable into the task2.html file inside of the element with an "id of "name" (hint: document.querySelector())
3. Declare and instantiate a variable to hold the current year
4. Place the value of the current year variable into the task2.html file inside of the element with an id of "year"
5. Copy an image of yourself into the images folder
6. Declare and instantiate a variable to hold the name and location of your picture (hint: images/imagename.png)
7. Place the value of the picture variable into the task2.html file in the "src" attribute of the img element (hint: document.querySelector().setAttribute())

Arrays

Complete the following steps

In the task2.js file:

1. Declare an array variable to hold your favorite foods ( hint: [] ) and fill it with your favorite foods as strings.
2. Use JavaScript to modify the element who's id is "food" found in the task2.html file.
3. Declare and instantiate a variable to hold another of your favorite foods.
4. Add the value stored in this variable to the favorite food array.
5. Repeat Step 2
6. Remove the first element in the favorite foods array
7. Repeat Step 2
8. Remove the last element in the favorite foods array
9. Repeat Step 2

Review

After completing the previous steps:

1. Review one of the many possible solutions for this task,
2. Compare and contrast your code with the possible solution's code, and
3. Make note of any improvements you could make for future tasks.