2016/11/11

Notes for JavaScript Tutorial for Beginners - Create Attribute

The source of this post is from "JavaScript Tutorial for Beginners - 39 - Create attribute" located at
https://youtu.be/FbcB8CroByk?list=PLr6-GrHUlVf96NLj3PQq-tmEB6woZjwEl


template.html

Note, This part of the code is the same as the one in my previous post at
http://wei48221.blogspot.tw/2016/11/notes-for-javascript-tutorial-for_11.html.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
 <head>
  <script src="external.js"> </script>
  <link type="text/css" rel="stylesheet" href="stylesheet.css">
 </head>
<body>
 <div id="main">
  <h2>HANNIBAL - THE BATTLE OF CANNAE</h2>
   <p>After defeating the Romans at the Battle of Lake Trasimene, Hannibal now moved his forces down south. There was panic in Rome and 
      Quintus Fabius Maximus was appointed dictator to deal with Hannibal.  Fabius, however, refused to meet Hannibal in the open field 
      and this strategy became highly unpopular in Rome. Romans were used to attacking, not hiding.  The Romans were forced to go on the 
      offensive after Hannibal positioned his forces betweeen Rome and it's vital grain supply. This setup the epic Battle of Cannae. 
      Here Hannibal defeated the Romans inflicting the worst single day defeat in Rome's history.</p>
   <p>The Romans were then forced to retreat to Rome. It was a total defeat.</p>
  
  <h2>AFTERMATH OF THE BATTLE OF CANNAE</h2>
   <p>After the horrific defeat at the Battle of Cannae, the Romans reinstituted Fabius' avoidance strategy. The Romans no longer refused 
      to meet Hannibal in head on collisons.  Rather the Roman army kept a watchful eye on Hannibal, but always at a close distance.</p>
   <p>The avoidance strategy worked but it took forever.  It took almost two long decades to drive Hannibal out of Italy. And even then 
      Hannibal was never defeated in Italy. The Romans, adopting a tactic out of Hannibal's playbook, launched an attack against Carthage 
      itself. This forced Hannibal to travel back to Africa to defend the city. Here he was defeated at the Battle of Zama.</p>
 </div>
 &nbsp&nbsp
 <button onclick="newParagraph()">Click if you want to read about another battle </button>
 <br></br>
 &nbsp&nbsp
 <button onclick="removeParagraph()">Click here to remove section</button>
</body>
</html>

stylesheet.css

Modify the file to include the parts highlighted in yellow.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
body {
background-color: #9c9f84;
margin: 0px;
font-family: Verdana, Georgia, serif;
font-size: 14px;
}
 
#main {
background-color: #e5e4d7;
margin: 10px;
border-radius: 5px;
padding: 20px;
font-size: 110%;
}
 
h2 {
font-size: 120%;
color: #ce282e;
}

#test {
color: darkblue;
}

external.js


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
function newParagraph() {

    var para = document.getElementsByTagName("p");
 
 if (para.length <= 4) {        //there are 4 paragraphs (<p>) in the original web page

  var main = document.getElementById("main");  //get the id of <div>

  var h2header = document.createElement("h2"); //create a new element <h2>
  var element = document.createElement("p");  //create a new element <p>
  
  main.appendChild(h2header);      //attached the newly created <h2> to the end of <div>
  main.appendChild(element);      //attach the newly created <p> to the end of <div>

  //put the title to be placed into <h2> in a variable h
  var h = document.createTextNode("THE BATTLE OF SALAMIS");
 
  //put the text to be placed into <p> in a variable t
  var t = document.createTextNode("The Battle of Salamis was fought between an alliance of Greek cities and the Persian Empire in 480 BC. The Greeks decisively defeated the Persian navy.");
  
  h2header.appendChild(h);      //attach h to the newly created <h2>
  element.appendChild(t);       //attach t to the newly created <p>
  
  //set the attribute of the newly created paragraph element
  var pAttribute = document.createAttribute("id");
  pAttribute.value = "test";  //the newly created attribute in the css file
  element.setAttributeNode(pAttribute);  
 }
}

function removeParagraph() {
 
 var para = document.getElementsByTagName("p");
 
 //don't remove the original headers and elements if the newly added ones
 //are gone or don't exist
 if (para.length > 4) {
  //getting the position of the last h2 header in the h2 header list
  var h2header = document.getElementsByTagName("h2");
  var lasth2post = h2header.length-1;
  //getting the last h2 header
  var lasth2header = document.getElementsByTagName("h2")[lasth2post];
  //finding the parent of the last h2 header
  var parent = lasth2header.parentNode;
  //removing the last h2 header from its parent
  parent.removeChild(lasth2header);
  
  //getting the position of the last p element in the p element list
  var lastparapost = para.length-1;
  //getting the last p element
  var lastparaelement = document.getElementsByTagName("p")[lastparapost];
  //finding the parent of the last p element
  //var parent = lastparaelement.parentNode;
  //removing the last p element from its parent
  parent.removeChild(lastparaelement);
 } 
}

Result


HTML Attributes - http://www.w3schools.com/html/html_attributes.asp
Posted by at
Labels: , , ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)