VARIABLES AND SCOPE:
<!DOCTYPE> <html> <head> <title>Variables and Scope of the Variables</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <body> <header> <h1> Variables and Scope of the Variables </h1> </header> Hello <script> var global_es; function test(){ var message = "HOLA"; //LOCAL variable (because of the var) alert(message); mensaje2 = "OTRO"; //GLOBAL VARIABLE } test(); alert(mensaje2); var message3 = 6; function pr(){ alert(message3); } alert(message); //ERROR console.log(message); function test2(){ message2 = "hi"; //global variable } test2(); alert(message2); // message2 is a global variable console.log(message2); </script> <br> BYE <script> alert("SEGUIMOS "+message3); </script> </body> </html>
____________________________________________________________________________
CREATE A NODE AND APPEND <!DOCTYPE> <html> <head> <title>Create a Node with a text node inside and put it into a div</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <script> function alertContent(){ var aNode = document.getElementById("myId"); // get a node by its ID var newNode = document.createElement("a"); // create a "a" element (<a>) var newText = document.createTextNode(" NEW content"); //create text node newNode.appendChild(newText); //append a Child to the node to have this <a>NEW content</a> aNode.appendChild(newNode); //append a Child to the <div id="myId"> the node that we created } </script> <body> <header> <h1> Create a Node with a text node inside and put it into a div </h1> </header> <div id="myId"> SOME CONTENT <button onclick="alertContent()"> show the name of the </button> </div> </body> </html> ____________________________________________________________________________ CLONE NODE <!DOCTYPE> <html> <head> <title>Variables and Scope of the Variables</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <script> function alertContent(){ var aNode = document.getElementById("myId"); var another = aNode.cloneNode(); document.body.appendChild(another); } </script> <body> <header> <h1> Variables and Scope of the Variables </h1> </header> <div id="myId"> SOME CONTENT <button onclick="alertContent()"> show the name of the </button> </div> </body> </html>
----------------------------------------------------
VERSION 2.0
<!DOCTYPE> <html> <head> <title>Variables and Scope of the Variables</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> </head> <script> function alertContent(){ var aNode = document.getElementById("myId"); var another = aNode.firstChild.cloneNode(); document.body.appendChild(another); } </script> <body> <header> <h1> Variables and Scope of the Variables </h1> </header> <div id="myId"> SOME CONTENT <button onclick="alertContent()"> show the name of the </button> </div> </body> </html> ____________________________________________________________________________ CHANGE CSS <!DOCTYPE html> <html> <head> <style> .classOne{ background-color:#9A9; height:100px; } .classTwo{ font-size:20px; width:350px; } </style> <script> function changeCssClass(){ var aClassNode = document.getElementsByClassName("classOne"); aClassNode[0].className += " classTwo"; // we select aClassNode first child and put in the className the same one and a new one (classOne classTwo) } </script> </head> <body"> <div class="classOne"> With this code we can change the class or add a new class to a Node </div> <button onclick="changeCssClass()"> Change CSS!! </button> </body> </html> ____________________________________________________________________________ CARS TRAINS AND PLANES
<!DOCTYPE html>
<html>
<head>
<title>||Working with elements||</title>
</head>
<script>
var my_div = null;
var newDiv = null;
var c = 0;
var p = 0;
var t = 0;
function addElementV() {
// create a new div element
// and give it some content
var newDiv = document.createElement("div");
var newContent = document.createTextNode("NEW " + arguments[0] + " ! " + arguments[1]);
newDiv.style.backgroundColor = "#CCC";
newDiv.appendChild(newContent); //add the text node to the newly created div.
// add the newly created element and its content into the DOM
myCarDiv = document.getElementById(arguments[0]);
myCarDiv.appendChild(newDiv);
}
function borrarVehic(){
var myVehicDiv = document.getElementById(arguments[0]);
myVehicDiv.removeChild(myVehicDiv.lastChild);
}
</script>
<body>
<a href="http://www.w3schools.com/dom/dom_nodes_navigate.asp"> DOM NODES NAVIGATION -- http://www.w3schools.com/dom/dom_nodes_navigate.asp </a><br><br>
<button onclick="c++; addElementV('car', c)"> NEW CAR!</button>
<button onclick="p++;addElementV('plane', p)"> NEW PLANE!</button>
<button onclick="t++;addElementV('train', t)"> NEW TRAIN!</button>
<button onclick="borrarVehic('car', 2)"> DELETE CAR!</button>
<button onclick="borrarVehic('plane')"> DELETE PLANE!</button>
<button onclick="borrarVehic('train')"> DELETE TRAIN!</button>
<div id="car" class="vehiculos" style="background-color:#f99">
CARS
</div>
<div id="plane" class="vehiculos" style="background-color:#99f">PLANES</div>
<div id="train" class="vehiculos" style="background-color:#9f9">TRAINS</div>
</body>
</html>
No hay comentarios:
Publicar un comentario