hannabeasiam · hannabeasiam · Feb 27, 2018 · Nov 8, 2017 · Nov 8, 2017 · Nov 8, 2017
diff --git a/lesson09/AppendingContent.html b/lesson09/AppendingContent.html
@@ -0,0 +1,47 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Appending Content</title>
+    <script type="text/javascript">
+      function AnswerWrong() {
+        var txt = document.createElement('p');
+        txt.innerHTML = 'Wrong answer!';
+        txt.style.color = 'red';
+        txt.setAttribute('class','wrong');
+        window.document.body.appendChild(txt);
+      }
+      function AnswerRight() {
+        var txt = 'RIGHT ANSWER!';
+        var newtext = document.createTextNode(txt);
+        newtext.id = 'newidname';
+        window.document.body.appendChild(newtext);
+      }
+      function addImage() {
+        var img = document.createElement('img');
+        img.src = 'images/pic1.jpg';
+        var imagePlace = document.getElementById('imageHere');
+        imagePlace.appendChild(img);
+      }
+      function reloadPage() {
+        window.location.reload();
+        document.formButtons.button1.disabled = false;
+        document.formButtons.button2.disabled = false;
+        document.formButtons.button3.disabled = false;
+      }
+    </script>
+  </head>
+  <body id="body">
+    <h2>CIW JavaScript Specialist</h2>
+    <h3>Appending Content</h3>
+    Question: How many little pigs had houses made of straw?<br>
+    <form name="formButtons">
+      <p><input type="button" name="button1" value="1 little pig" onClick="AnswerRight();this.disabled=true;"></p>
+      <p><input type="button" name="button2" value="2 little pigs" onClick="AnswerWrong();this.disabled=true;"></p>
+      <p><input type="button" name="button3" value="3 little pigs"  onClick="AnswerWrong();this.disabled=true;"></p>
+      <p><input type="button" value="Reload Page" onClick="reloadPage()"></p>
+      <p><input type="button" value="Add image" onClick="addImage()"></p>
+      <p id="imageHere"> </p>
+    </form>
+  </body>
+</html>
diff --git a/lesson09/AppendingScript.html b/lesson09/AppendingScript.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Appending Content JavaScript</title>
+    <script type="text/javascript">
+      function loadScript(){
+        var scriptTag = document.createElement('script');
+        scriptTag.src = 'hello.js';
+        var src = document.getElementById("scriptHere");
+        src.appendChild(scriptTag);
+      }
+    </script>
+  </head>
+  <body onload="loadScript()" id="body">
+    <p id="scriptHere"></p>
+  </body>
+</html>
+
+
diff --git a/lesson09/changeAttribute.html b/lesson09/changeAttribute.html
@@ -0,0 +1,39 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Change Attribute</title>
+    <script type="text/javascript">
+
+      function getValues() {
+        let div = null;
+        if (div == null) {
+          div = document.getElementById('SetDiv');
+        }
+        let theClass = div.getAttribute('class');
+        alert('theClass='+theClass);
+        //set attribute, add attribute class, value 'center'
+        div.setAttribute('class','center');
+        theClass = div.getAttribute('class');
+        alert('theClass='+theClass);
+        div.setAttribute('class','right');
+        theClass = div.getAttribute('class');
+        alert('theClass='+theClass);
+        div.setAttribute('class','justify');
+        theClass = div.getAttribute('class');
+        alert('theClass='+theClass);
+        div.removeAttribute('class');
+        theClass = div.getAttribute('class');
+        alert('theClass='+theClass);
+      }
+    </script>
+  </head>
+  <body>
+    <h2>CIW JavaScript Specialist</h2>
+    <h3>Change Attribute</h3>
+    <div id="SetDiv" class="left">
+      <p>What are the attributes of this div tag?</p>
+    </div>
+    <input type="button" value="Click Me!" onClick="getValues()">
+  </body>
+</html>
diff --git a/lesson09/getElemenById.html b/lesson09/getElemenById.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Change URL</title>
+    <script type="text/javascript">
+
+      function changeLink() {
+        let changedLink = 0;
+        if (changedLink == 0) {
+          //get Element with ID 'ChangeURL' in HTML to assign value
+          document.getElementById('ChangeURL').innerHTML = 'CIW Certified';
+          document.getElementById('ChangeURL').href = 'http://ciwcertified.com';
+          //we also can add attribute by using get Element ID
+          document.getElementById('ChangeURL').target='_blank';
+          changedLink++;
+          console.log(changedLink);
+        } else {
+          document.getElementById('ChangeURL').innerHTML = 
+            'Microsoft';
+          document.getElementById('ChangeURL').href =
+            'http://microsoft.com';
+          document.getElementById('ChangeURL').target='_blank';
+          changedLink--;
+          console.log(changedLink);
+        }
+      }
+    </script>
+  </head>
+  <body>
+    <h2>CIW JavaScript Specialist</h2>
+    <h3>Change URL</h3>
+    <a id="ChangeURL"
+      href="http://www.microsoft.com">Microsoft</a><br>
+    <input type="button" value="Change Link" onClick="changeLink()">
+  </body>
+</html>
diff --git a/lesson09/getElementByClassName.html b/lesson09/getElementByClassName.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Check CSS class data</title>
+    <script type="text/javascript">
+      function getValues(objName) {
+        let fieldArray = document.getElementsByClassName(objName);
+        alert('Total objects with class \"input\" = ' + fieldArray.length);
+        for (let i=0;i<fieldArray.length;i++) {
+          alert((i+1)+' = '+fieldArray[i].innerHTML);
+        };
+      }
+    </script>
+  </head>
+  <body>
+    <h2>CIW JavaScript Specialist</h2>
+    <h3>Check CSS class data</h3>
+    <p class="input">First</p>
+    <p class="input">Second</p>
+    <p class="input">Third</p>
+    <input type="button" value="Get elements with class input" onClick="getValues('input')">
+  </body>
+</html>
diff --git a/lesson09/getElementByName.html b/lesson09/getElementByName.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Check named element data</title>
+    <script type="text/javascript">
+      //objName pass parameter 
+      function getValues(objName) {
+        //get all Element Name with passed parameter objName, store as fieldArray
+        let fieldArray = document.getElementsByName(objName);
+        alert('Total objects with name \"txtField\" = ' + fieldArray.length);
+        for (let i=0;i<fieldArray.length;i++) {
+          alert(fieldArray[i].id+' = '+fieldArray[i].value);
+        };
+      }
+    </script>
+  </head>
+  <body>
+    <h2>CIW JavaScript Specialist</h2>
+    <h3>Check named element data</h3>
+    <input id="Text1" type="text" name="txtField" value="CIW"><br>
+    <input id="Text2" type="text" name="txtField" value="CERTIFICATION"><br>
+    <input id="Text3" type="text" name="txtField" value="RULES"><br>
+    <!--get Value will pass parameter 'txtField'-->
+    <input type="button" value="Get elements named txtField" onClick="getValues('txtField')">
+  </body>
+</html>
diff --git a/lesson09/getElementByTagName.html b/lesson09/getElementByTagName.html
@@ -0,0 +1,60 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Cool slide show</title>
+    <script type="text/javascript">
+      //var numslides = 0;
+      //var currentslide = 0;
+      //var slides = new Array();
+      function StartSlideShow() {
+        let numslides = 0;
+        let currentslide = 0;
+        let slides = new Array();
+        //get all element Tag Name with img, and save under img 
+        let img = document.getElementsByTagName('img');
+        console.log('img number : ' + img.length);
+        //loop number of img
+        for (let i=0;i<img.length;i++) {
+          //assign array slides as array img array did not set img as array seperatley but define here
+          slides[i] = img[i];
+          if (numslides == 0) {
+            //all img tag became array, change style.display as block, block makes display one img max in one section
+            img[i].style.display = 'block';
+            console.log('slides id: ' +slides[i]);
+          } else {
+            //if img is not starting from 0, display nothing
+            img[i].style.display = 'none';
+          }
+          //in current img tag, once mouce is over img make pointer cursor
+          img[i].style.cursor = 'pointer';
+          //onclick event in current img, call NextSlide function
+          img[i].onclick = NextSlide;
+          //increment numslides 
+          numslides++;
+        }
+          function NextSlide() {
+            slides[currentslide].style.display = 'none';
+            currentslide++;
+            console.log('currentslide: ' + currentslide);
+            //if current slide is greater or equal then number of slide, set current slide as 0 again, 
+            //so make it recursive again
+            if (currentslide >= numslides) currentslide = 0;
+            slides[currentslide].style.display = 'block';
+          }        
+
+      } 
+    </script>
+  </head>
+  <!--instead of window.onload = StartSlideShow; call onload in HTML tag -->
+  <body onload = "StartSlideShow()">
+    <h2>CIW JavaScript Specialist</h2>
+    <h3>Cool slide show</h3>
+    <img class="slide" src="images/pic1.jpg" width="400" height="300" alt="First picture">
+    <img class="slide" src="images/pic2.jpg" width="400" height="300" alt="Second picture">
+    <img class="slide" src="images/pic3.jpg" width="400" height="300" alt="Third picture">
+    <img class="slide" src="images/pic4.jpg" width="400" height="300" alt="Fourth picture">
+    <img class="slide" src="images/pic5.jpg" width="400" height="300" alt="Fifth picture">
+    <p>Click the image to advance the slides.</p>
+  </body>
+</html>
diff --git a/lesson09/hello.js b/lesson09/hello.js
@@ -0,0 +1 @@
+alert('Helloooo!');
diff --git a/lesson09/images/pic1.jpg b/lesson09/images/pic1.jpg
diff --git a/lesson09/images/pic2.jpg b/lesson09/images/pic2.jpg
diff --git a/lesson09/images/pic3.jpg b/lesson09/images/pic3.jpg
diff --git a/lesson09/images/pic4.jpg b/lesson09/images/pic4.jpg
diff --git a/lesson09/images/pic5.jpg b/lesson09/images/pic5.jpg