Created
October 13, 2017 20:36
-
-
Save KaraAJC/c7ffd5c4f6f8625319ebf402cbe5ee7e to your computer and use it in GitHub Desktop.
JS 101 beginning tutorial
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>MyFirstWebpage</title> | |
| </head> | |
| <body> | |
| <!-- Example of Javascript element manipulation --> | |
| <h1 id="heading-1"></h1> | |
| <!-- Example of in-line Javascript event handling --> | |
| <button onclick=doSomething()> Click me!</button> | |
| <!-- Example of Event Listener https://developer.mozilla.org/en-US/docs/Web/Events/mouseover --> | |
| <ul id="test" style=""> | |
| <li style="">item 1</li> | |
| <li style="">item 2</li> | |
| <li style="">item 3</li> | |
| </ul> | |
| <!-- EMBEDDED JAVASCRIPT GOES AT BOTTOM OF HTML PAGE --> | |
| <script> | |
| // Check out other console functions you can use: https://developers.google.com/web/tools/chrome-devtools/console/console-reference | |
| console.log("The script has begun!") | |
| // JS Element manipulation example | |
| var text = document.getElementById('heading-1'); | |
| text.textContent = 'Hello World!'; | |
| // JS in-line event handling example | |
| var doSomething = function() { | |
| alert("I DID A THING!!"); | |
| } | |
| // JS Add Event Listener example | |
| // select the UL element | |
| var test = document.getElementById("test"); | |
| // this handler will be executed only once when the cursor moves over the unordered list | |
| test.addEventListener("mouseenter", function( event ) { | |
| // highlight the mouseenter target | |
| event.target.style.color = "purple"; | |
| // reset the color after a short delay | |
| setTimeout(function() { | |
| event.target.style.color = ""; | |
| }, 500); | |
| }, false); | |
| // this handler will be executed every time the cursor is moved over a different list item | |
| test.addEventListener("mouseover", function( event ) { | |
| // highlight the mouseover target | |
| event.target.style.color = "orange"; | |
| // reset the color after a short delay | |
| setTimeout(function() { | |
| event.target.style.color = ""; | |
| }, 500); | |
| }, false); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment