innerHTML project - Breaking the old code into a module

      innerHTML project - Breaking the old code into a module

      Please note: The JavaScript code shown on this page needs to be compiled by TypeScript in order to work properly.
      To copy the code for your exercise, click on the two-page icon to the right.
      The original live version (before modulerizing the code) can be seen on the following URL:
      icontemp.com/inn/qafinal.html

      ATTENTION:
      The following HTML code was changed as of February 2017. This is because the script to load SystemJS has changed as of version 0.20.0. The new loader script may be different than the one you have in your book for which I apologize. This is the latest version.
      Lines 35,36,37,38 and 39 are different than in some books

      INDEX.HTML

      HTML Source Code

      1. <!DOCTYPE HTML>
      2. <html>
      3. <head>
      4. <meta charset="utf-8">
      5. <title>Hidden Answer</title>
      6. <style>
      7. body {font-family:"Times New Roman", Times, serif;}
      8. </style>
      9. </head>
      10. <body>
      11. <p><strong>So, what color was Napoleon's white horse?</strong>
      12. <br><em id='1'>click for answer!</em>
      13. </p>
      14. <p><strong>Can race car drivers deduct speeding tickets?</strong>
      15. <br> <em id='2'>Click for answer!</em>
      16. </p>
      17. <p><strong>Why do we park on a driveway and drive on a parkway?</strong>
      18. <br> <em id='3'>Click for answer!</em>
      19. </p>
      20. <p><strong>Why is abbreviation such a long word?</strong>
      21. <br> <em id='4'>Click for answer!</em>
      22. </p>
      23. <script src="node_modules/systemjs/dist/system.js"></script>
      24. <script>
      25. SystemJS.config({
      26. baseURL:'/',
      27. packages: {
      28. '/': {
      29. defaultExtension: 'js'
      30. }
      31. }
      32. });
      33. // loads scripts.js
      34. SystemJS.import('scripts.js');
      35. </script>
      36. </body>
      37. </html>


      SCRIPTS.TS

      JS/TS Code

      1. import {yourBrowser} from "./myeventmodule/eventlistener";
      2. var x = document.getElementById('1');
      3. function napolean() {
      4. x.innerHTML = "White";
      5. }
      6. yourBrowser(x, 'click', napolean);
      7. yourBrowser(x, 'mouseover', paintMeRed);
      8. yourBrowser(x, 'mouseout', redOff);
      9. //---------------
      10. var y = document.getElementById('2');
      11. function speeding() {
      12. y.innerHTML = "Not a chance!!";
      13. }
      14. yourBrowser(y, 'click', speeding);
      15. yourBrowser(y, 'mouseover', paintMeRed);
      16. yourBrowser(y, 'mouseout', redOff);
      17. //----------------
      18. var z = document.getElementById('3');
      19. function park() {
      20. z.innerHTML = "Lol!!";
      21. }
      22. yourBrowser(z, 'click', park);
      23. yourBrowser(z, 'mouseover', paintMeRed);
      24. yourBrowser(z, 'mouseout', redOff);
      25. //-----------------
      26. var b = document.getElementById('4');
      27. function abbr() {
      28. b.innerHTML = "So you can abv. it";
      29. }
      30. yourBrowser(b, 'click', abbr);
      31. yourBrowser(b, 'mouseover', paintMeRed);
      32. yourBrowser(b, 'mouseout', redOff);
      33. //--- mouseover/mouseout functions:
      34. function paintMeRed() {
      35. this.style.color = "red";
      36. }
      37. function redOff() {
      38. this.style.color = "black";
      39. }


      EVENTLISTENER.TS

      JS/TS Code

      1. "use strict"
      2. // BEGIN Event Listener.....................
      3. export let yourBrowser = (function () {
      4. // DOM 2 method maker:
      5. if (document.addEventListener) {
      6. // input for modern browsers:
      7. return function (element, event, actionHandler) {
      8. // Event listener constructor:
      9. element.addEventListener(event, actionHandler, false);
      10. };
      11. } else {
      12. // input for IE < 9:
      13. return function (element, event, actionHandler) {
      14. // Event listener constructor:
      15. element.attachEvent('on' + event, actionHandler);
      16. };
      17. }
      18. }());
      19. // END event listener .............................



      Commands and directives you may need to use:

      tsc scripts.ts
      npm init
      npm install lite-server --save-dev
      "start": "lite-server"
      For second Windows prompt: start
      npm start
      tsc --init
      tsc
      npm install systemjs --save

      import {source} from "path of source";

      ---------------------------
      New eBook release: Go Exercises in Plain Language, Volume 1, Volume 2, Volume 3
      New eBook release: TypeScript in Plain Language Volume I | Volume 2 with Angular 4
      New quick read: The Factorial Recursive Function: A language agnostic explanation with samples in Go and JavaScript.
      - Please subscribe my Twitter or my Amazon profile to be notified of new releases.
      Author's profile on Amazon
      Twitter
      TonyAr