Home | HTML | JavaScript | DOM | Data Types |
Following along
Remember to “git pull” on teacher repository to update to lates.
- Run this notebook in VSCode
- Activate Help-Toogel Developer Tools to add console outputs to runtime experience
Referencing HTML elements using javascript
- To get an HTML element, use
document.getElementById("idTag")
- You will use the ID that you set in your HTML
- if you
console.log
the resulting variable you will get some information about the element
%%html
<!-- the ID must be specified within the element -->
<h1 id="domTitleID">My Title</h1>
<!-- javascript goes here -->
<script>
var titleElement = document.getElementById("domTitleID")
<!-- outputs h1 tag -->
console.log("Example #1, show element in DOM")
console.log(titleElement)
</script>
My Title
Getting the data within the HTML element
- The variable titleElement stores the “object”
- Basically think of this as the group of data enclosed in HTML tag
- To access a certain type of data from an “object” we use “.” notation
- .innerHTML gets data within center of tag
%%html
<!-- the ID must be specified within the element -->
<h1 id="domTitleIDget">My Title</h1>
<!-- javascript goes here -->
<script>
var titleElement = document.getElementById("domTitleIDget")
<!-- outputs h1 innerHTML from h1 tag -->
console.log("Example #2, show innerHTML")
console.log(titleElement.innerHTML)
</script>
##<h1 id="domTitleIDget">My Title</h1>
Setting the data within the HTML Element
- The innerHTML data in this “object” can be set like a variable
- Change the value of the innerHTML using the “=” (assignment) operator
%%html
<!-- the ID must be specified on the element -->
<h1 id="domTitleIDset">My Title</h1>
<!-- javascript goes here -->
<script>
var titleElement = document.getElementById("domTitleIDset")
titleElement.innerHTML = "Set and Update My Title"
<!-- outputs h1 innerHTML after h1 tag has been updated -->
console.log("Example #3, update innerHTML")
console.log(titleElement.innerHTML)
</script>
Creating elements
- Create a new element with the document.createElement function -> takes in the type of element
- Set properties in the element just like the “h1” example
%%html
<!-- the ID must be specified on the element -->
<div id="divContainerID">
<h1 id="h1ElementID">My Title</h1>
</div>
<!-- javascript goes here -->
<script>
// creates a new element
var pElement = document.createElement("p")
pElement.innerHTML = "Starting a paragraph of text."
// outputs p tag after it has been created
console.log("Example #4, create a p tag within JS")
console.log(pElement)
</script>
My Title
Issue! How to Create element that appears in HTML?
- Here is a visualization of what is happening => the “p” is not placed inside the HRML page!
Solution
- Correct by placeing the element somewhere in the page
- For example, we could add the element within the div
- For this, use the appendChild function on the div object (the parameter would be the p element we created)
- Remember, use the getELementById to get the object for something in the html (the div!)
- Updated Diagram
%%html
<!-- the ID must be specified on the element -->
<div id="divContainerIDset">
<h1 id="h1ElementIDset">My Title</h1>
</div>
<!-- javascript goes here -->
<script>
// creates a new element
var pElement = document.createElement("p")
pElement.innerHTML = "Starting a paragraph of text."
// outputs p tag after it has been created
console.log("Example #5, add p tag to HTML")
console.log(pElement)
// place the p element inside the HTML page
var div = document.getElementById("divContainerIDset")
div.appendChild(pElement)
</script>
Functions in JavaScript, using with DOM
- Functions allow you to “do something”
- ex. “eat food” in a Snake Game
- Functions were used in previous examples
- console.log = “print something”
- document.getElementById = “find an element with id”
- Functions take in parameters, what to do (inside the parenthesis)
- the parameter tells console.log what to print
- the parameter in document.getElementById tells the id of the element
- Functions can be used with DOM as well, thes will be shown below
Creeating functions
- document functions functions were used to create a lot of functionality, but how can a developer create their own?
- function are useful to avoid writing the same code over and over again
- function can contain parameters for input (they effectively become variables)
- function can contain a return, the are the “output” of the function
%%html
<!-- the ID must be specified on the element -->
<div id="divContainerIDfunction">
<h1 id="h1ElementIDfunction">My Title</h1>
</div>
<!-- javascript goew here -->
<script>
// define a function => takes parameter text, returns a new p tab
function createPTag(text) {
// creates a new element
var pElement = document.createElement("p")
// using the parameter like a variable
pElement.innerHTML = text
// outputs p tag after it has been created
console.log("Example #6, add p tag using a function")
console.log(pElement)
return pElement;
}
// using a function to create p tag
var pTag = createPTag("Starting a paragraph with cooler text than before.")
// place the p element in the webpage
var div = document.getElementById("divContainerIDfunction")
div.appendChild(pTag)
</script>
My Title
OnClick Event
- Run a function when an event occurs
- In this case, the p tag is created when the button is clicked
%%html
<!-- the ID must be specified on the elements -->
<button id="buttonID">Click here!</button>
<div id="divContainerIDbutton">
<h1 id="h1ElementIDbutton">My Title</h1>
</div>
<!-- our javascript goe here -->
<script>
// define a function => takes parameter text, returns a new p tab
function createPTag(text) {
// creates a new element
var pElement = document.createElement("p")
// using the parameter like a variable
pElement.innerHTML = text
// outputs p tag after it has been created
console.log("Example #7.1, add p tag using a function")
console.log(pElement)
return pElement;
}
// create a function that sets specific text and adds to div
function addPTagOnButton() {
// using our new function
var pTag = createPTag("Starting a paragraph with text created on button press.")
// place the p element in the webpage
var div = document.getElementById("divContainerIDbutton")
// add p tag to the div
div.appendChild(pTag)
// outputs p tag after it has been created
console.log("Example #7.2, update container adding a 'p' tag")
console.log(div)
}
// add the P tag when our button is clicked
var myButton = document.getElementById("buttonID")
myButton.onclick = addPTagOnButton
</script>
Hacks
- Copy your HTML code from the HTML hacks. Write a Javascript snippet to switch the links of the two a tags when a button is pressed. Once they are switched, change the inner HTML of the top p tag to the word “switched!”
%%html
<!-- html code goes here (make sure to run) -->
<h1 style= "color: rgb(228, 41, 228)"> Hack for HTML</h1>
<div>
<p title="Lung Cancer "> <h4>Lung Cancer</h4></p>
</div>
<button type="button" title="The cancer vaccine OSE2101 has shown promising results in a phase 3 trial for patients with HLA-A2+ advanced NSCLC and secondary resistance to ICIs." onclick="alert('The cancer vaccine OSE2101 has shown promising results in a phase 3 trial for patients with HLA-A2+ advanced NSCLC and secondary resistance to ICIs.')">
What's the latest in the world of cancer research?
</button>
<button type="button">
<a href = "https://www.cancertherapyadvisor.com/home/cancer-topics/lung-cancer/ose2101-vaccine-outperforms-standard-care-in-certain-patients-with-nsclc/" > Link to cancer news article HERE </a>
</button>
<p title="How does Cancer Develop?"> <h4>How does Cancer Develop?</h4></p>
<div>
<button type="button">
<a href="https://www.khanacademy.org/science/ap-biology/cell-communication-and-cell-cycle/regulation-of-cell-cycle/a/cancer" title="Cell cycle+Cancer" style="color: rgb(32, 32, 91); border: none blue; padding: 5px 64px; background-color: rgba(131, 184, 209, 0.708)">
Click This helpful Link To learn how Cancer develops!
</a>
</button>
</div>
<!--this is a button which will be made to be diplayed and to be clicked on-->
<p style="color: darkcyan"> Prevention </p>
<button id="Onclick" onclick="addPTagOnButton()">How can you help to prevent lung cancer (click me)?</button>
<div id="OnclickContainer"></div>
<script>
// Function to create a new paragraph element which will be used every single time the button is clicked because the new message should require a new paragraph!
function createPTag(text) {
// Create a new <p> element using the document object
var element = document.createElement("p");
// Set the innerHTML of the new <p> element to the provided text
element.innerHTML = text;
// Return the created <p> element as the result of the function
return element;
}
// Function to add a paragraph to the container when the button is clicked
function addPTagOnButton() {
// Create a new <p> element with the text "QUIT SMOKING!"
var pTag = createPTag("QUIT SMOKING!");
// Get a reference to the container div with the id "OnclickContainer"
var div = document.getElementById("OnclickContainer");
// Append the newly created <p> element to the container
div.appendChild(pTag);
}
</script>
<!-- JavaScript function to swap links and text when a button is clicked -->
<script>
function swapLinksAndText() {
// Get the two <a> elements by their indexes (0 and 1) .Store each link in a list called links.
var links = document.querySelectorAll('a');
// Swap the href attributes of the two <a> elements so that the links are swapped
var tempHref = links[0].href;
links[0].href = links[1].href;
links[1].href = tempHref;
// Get the top <p> element within a <div>
//It selects the first <p> element within a <div> and stores it in the topParagraph variable.
var topParagraph = document.querySelector('div > p');
// Change the innerHTML of the top <p> element to "switched!"
// It is used to change the text or HTML content inside a paragraph, providing feedback or displaying a message to the user when the button is clicked, but it does not affect the links.
topParagraph.innerHTML = 'switched!';
}
</script>
<!-- Button that triggers the swapLinksAndText function when clicked -->
<button type="button" onclick="swapLinksAndText()">Swap Links</button>
<!-- Container div where paragraphs will be added when the button is clicked -->
<div id="OnclickContainer">
<!-- Existing content or newly added <p> elements will appear here -->
</div>
Hack for HTML
Lung Cancer
How does Cancer Develop?
Prevention
<div id="OnclickContainer"></div>
<script>
// Function to create a new paragraph element which will be used every single time the button is clicked because the new message should require a new paragraph!
function createPTag(text) {
// Create a new <p> element using the document object
var element = document.createElement("p");
// Set the innerHTML of the new <p> element to the provided text
element.innerHTML = text;
// Return the created <p> element as the result of the function
return element;
}
// Function to add a paragraph to the container when the button is clicked
function addPTagOnButton() {
// Create a new <p> element with the text "QUIT SMOKING!"
var pTag = createPTag("QUIT SMOKING!");
// Get a reference to the container div with the id "OnclickContainer"
var div = document.getElementById("OnclickContainer");
// Append the newly created <p> element to the container
div.appendChild(pTag);
} </script>
// Get the top <p> element within a <div>
//It selects the first <p> element within a <div> and stores it in the topParagraph variable.
var topParagraph = document.querySelector('div > p');
// Change the innerHTML of the top <p> element to "switched!"
// It is used to change the text or HTML content inside a paragraph, providing feedback or displaying a message to the user when the button is clicked, but it does not affect the links.
topParagraph.innerHTML = 'switched!';
} </script>