inserting firsts javascript studies

f2acode · Oct 1, 2017 · fc4ee94 · fc4ee94
1 parent c0e8aec
commit fc4ee94
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 7 deletions.
diff --git a/...ecure data/2 - Write code that interacts with UI controls/prog-add-modify-html/index.html b/...ecure data/2 - Write code that interacts with UI controls/prog-add-modify-html/index.html
@@ -4,17 +4,29 @@
 <head>
     <title>Javascript Training</title>
     <script src="./scripts.js"></script>
+    <style>
+    p, a {
+        border: 2px solid white;
+        background: lightgray;
+        display: block;
+        padding: 5px}
+    </style>
 </head>
 
 <body>
 
     <article>
-        <h1>Title</h1>
-        <a id="accessKey" href="https://www.google.com">Paragraph1</a><br>
-        <p>Paragraph1</p>
-        <p>Paragraph1</p>
-        <p>Paragraph1</p>
-        <p>Paragraph1</p>
+        <h1>Examples</h1>
+        <a id="accessKey" href="https://www.google.com">Access key - Press ALT + W</a><br>
+        <p id="eventListener">Event listener - Click here</p>
+        <p id="appendChild">Append child</p>
+        <p id="attributes">Attributes</p>
+        <a id="blur" href="">Blur - It's focused and unfocused when the page loads</a>
+        <p id="childElementCount">
+                Child element count
+            <a>Child 1</a><br/>
+            <a>Child 2</a> 
+        </p>
     </article>
 
 </body>

diff --git a/...ecure data/2 - Write code that interacts with UI controls/prog-add-modify-html/scripts.js b/...ecure data/2 - Write code that interacts with UI controls/prog-add-modify-html/scripts.js
@@ -1 +1,39 @@
-document.getElementById("accesskey").accessKey = "o";
+window.onload = function () {
+
+    //element.accessKey
+    document.getElementById("accessKey").accessKey = "o";
+
+    //element.addEventListener()
+    document.getElementById("eventListener").addEventListener("click", function () {
+        alert("Event listener activated!");
+    });
+
+    //element.appendChild()
+    var paragraph = document.createElement("P");
+    var textParagraph = document.createTextNode("Append child added inside");
+    paragraph.appendChild(textParagraph);
+    document.getElementById("appendChild").appendChild(paragraph);
+
+    //element.attributes
+    paragraph = document.createElement("P");
+    var attributes = document.getElementById("attributes").attributes;
+    textParagraph = document.createTextNode("Atributes: " + attributes
+        + " Size: " + attributes.length);
+    paragraph.appendChild(textParagraph);
+    document.getElementById("attributes").appendChild(paragraph);
+
+    //element.blur()
+    document.getElementById("blur").focus();
+    setTimeout(function () {
+        document.getElementById("blur").blur();
+    }, 2000);
+
+    //element.childElementCount
+    paragraph = document.createElement("P");
+    var childElements = document.getElementById("childElementCount").childElementCount;
+    textParagraph = document.createTextNode("Child elements: " + childElements);
+    paragraph.appendChild(textParagraph);
+    document.getElementById("childElementCount").appendChild(paragraph);
+
+    //
+};