In this activity we will explore behind the scenes in your web browser to look at the tools that web developers can use when building web applications. We'll look at Javascript, the programming language of the web and how you can use it to modify a web page.
You can open the developer tools in Chrome (and most other browsers) by hitting F12. (Do it now!) There are a number of tabs. We'll mostly use the Elements and Console tabs for this activity.
In the Elements tab you can view the structure of the HTML page - this is the language that web pages are written in. Take a look at the structure of this page. Look for the paragraphs <p>, and headers <h2>.
The Network tab let's you see the requests sent from your browser to the server and the response that comes back. Select the Network tab and reload the page. You should see requests for the page web-development-activity/ but also for some other resources. What do these other resources do?
The Console tab lets you run commands and interact with the web page that is loaded. It understands the Javascript programming language. Here's a simple command:
console.log('hello world!')
Javascript is able to access the web page that we're viewing and even make changes to it. Here's a very destructive command. After you try this, it refresh to get the page back.
document.write('<h1>where did the page go?</h1>')
The document.write command writes new text into the
current web page, in this case, replacing the existing contents.
We can be more subtle than that, as we'll see in the next
exercise.
This exercise is about modifying the content of a page in your web
browser using Javascript. As we have said, Javascript has access
to the current page via the Document Object Model or DOM. In your
browser, the variable document represents the current document
and your code can use it to read and write to the current page. In this
exercise we will use the developer tools Javascript console to write Javascript
to access parts of the main page of a newspaper site and, just for fun,
modify their contents. The instructions here relate to Chrome but some
variation will work in any browser.
The console allows you to run Javascript code in the context of the current page, so the document variable will represent the page you are viewing. Write Javascript code to select all of the headline elements, so if you saw that they were all <h3> elements you might write:
headlines = document.getElementsByTagName("h3")
This code will create a variable called headlines that
will hold the array of headline elements from the page. We can then
access these to find out what they are and even change them.
Take the first of these headlines and find the HTML content of the heading by using the square bracket notation. Here 0 is the index of the first element of the array:
headlines[0].innerHTML
Now modify this to add your own message to the page
headlines[0].innerHTML = "Macquarie Found to be Best University in the Universe!"
Check the page to see your updated headline.
Ok, so we can fake the news, that's good but we can go further.
A loop in a programming language let's us do something repeatedly. A common use is to do something to every element in an array. Here is an example loop:
for (let index = 0; index < 10; index++) {
console.log('around the loop', index);
}
This should output ten lines of text.
Now, here's your challenge:
Write a for loop that changes the content of all of the headlines in the page to your chosen message
Now, be careful to only use your new-found powers for good, not evil.