Question

Fake News

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.

1. Go to the main page of a news website, eg. SMH, Guardian, Telegraph, Buzzfeed or whatever (it should have headlines on the main page)
2. Right click on one of the headlines and choose "Inspect"
3. This should show you the HTML of the page with the element corresponding to your headline highlighted. Take note of the kind of element it is (eg. <h3>) and any class attributes it has. You will use these to select this element in your Javascript code.
4. Switch to the Console tab in developer tools

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")

Take the first of these and find the HTML content of the heading:

headlines[0].innerHTML

Now modify this to add your own message to the page

headlines[0].innerHTML = "COMP249 Found to be Best Unit 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.  

1. Write a for loop that changes the content of all of the headlines to your chosen message
2. Write a function that takes your new message as an argument and modifies the headlines when it is called

Now, be careful to only use your new-found powers for good, not evil.

Answer 1

Dear Student ,

As per the requirement submitted above , kindly find the below solution.

Here telegraphIndia web site is used for this demonstration.

Screen 1 :Edited heading first h3 .

TT Telegraph India Today's Latest+ N O ← → @https://www.telegraphindacom VPS Spring Sale Sove 5x5 India INDIA COMP249 Found to be Best Unit in the Universe! Elements Sources Network Performance Memory Console Application SecurityAudits 33%) Verified Fastest VPS Speeds Full Root Access 24x7 Phone & Email Support 3&1 x html body div.container div.d-flex.py-10.flex-lg-nowrap.flex-sm-wrap div.mainStoryBox.d-flex.flex-wrap div.mainStory.col-8.showMinHeight div.d-flex div.col Styles Event Listeners DOM Breakpoints Properties Accessibility Filter hov .c1s ▼ position Console What's New 旧 1 hidden Filter Default levels ▼ top Hide network Preserve log Selected context anly Group similar Please make sure it has an appropriate as volue and it is preloaded intentionolly Log XMLHttpRequests Eager evaluation Autocomplete form history A The resource https://pagead2.googlesyndication.con/pageads/r20190429/r28198131/show ads inpl.js was preloaded using link preload but not used within a few seconds from the window's load event it has > headlines document.getElenentsByTagName("h3 ぐ ,HTMLCollection(39) [h3, h3, 3.twoLine, n3 .t oLine, h3.t oline, 3, h3, h3, h3, h3, h3, h3, h3, h3, 3, 3, h3, h3, h3, h3, h3, h3, h3, h3, h3, h3, h3, h3, h3, h3, h3, h3, h3, h3, h3, 3, h3, h3, h3] > headlines[0].innerHTML"COMP249 Found to be Best Unit in the Universe!" "COMP249 Found to be Best Unit in the Universe!

a for loop that changes the content of all of the headlines to your chosen message :

headlines = document.getElementsByTagName("h3");

for(i=0;i<headlines.length;i++){headlines[i].innerHTML = "COMP249 Found to be Best Unit in the Universe!";}

Screen 2 :

TT Telegraph India | Today's Latestx+ ← → C https://www.telegraphindia.com India hosting support COMP249 Found to be Best Unit in the Universe! One stoops to conquer, the son offers a hug LEVEL UP AT LIQUID WEB COMP249 Found to be Best Unit in the Universe! yManini Chatterjee quid web Must Read Opinion COMP249 Found to be Best Unit in the India COMP249 Found to be Best Unit in the Universe! India COMP249 Found to be Best Unit in the Universe! COMP249 Found to be Best Unit in the Universe Features The Telegraph Support Quality Heritage COMEZ49 Found to be Best Unit in the Universe! ign up COMEZ19 Fonmd to be Best Unit in the Universe Universe!

a function that takes your new message as an argument and modifies the headlines when it is called :

//function defination

function changeHeading(message) {

headlines = document.getElementsByTagName("h3");

for (i = 0; i < headlines.length; i++)

{

headlines[i].innerHTML = message; }

}

changeHeading("myHeading");//function call

Screen 3 :

TT Telegraph India | Today's Latestx+ ← → C https://www.telegraphindia.com India hosting support myHeading LEVEL UP AT LIQUID WEB One stoops to conquer, the son offers a hug myHeading Liquid Web Must Read Opinion Inda myHeading Features The Telegraph Support Quality Heritage myHeading ign up myHoading

NOTE : PLEASE FEEL FREE TO PROVIDE FEEDBACK ABOUT THE SOLUTION.