KaraAJC/learning-js.html

## learning-js.html
<!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>
	<!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>