Diferencia entre revisiones de «Usuario:Juanda/javascript/Dom»

De WikiEducator
Saltar a: navegación, buscar
 
(17 revisiones intermedias por el mismo usuario no mostrado)
Línea 20: Línea 20:
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Propiedades===
+
====Propiedades====
 
Valores que se asocian con los objetos. Ejemplo con el objeto String:
 
Valores que se asocian con los objetos. Ejemplo con el objeto String:
 
<source lang="javascript">
 
<source lang="javascript">
Línea 30: Línea 30:
 
</div>
 
</div>
 
<div class="slide">
 
<div class="slide">
−
===Métodos===
+
 
 +
====Métodos====
 
Acciones que se ejecutan sobre objetos. Ejemplo con el objeto String:
 
Acciones que se ejecutan sobre objetos. Ejemplo con el objeto String:
 
<source lang="javascript">
 
<source lang="javascript">
Línea 41: Línea 42:
  
 
<div class="slide">
 
<div class="slide">
 +
 
===Objeto Date===
 
===Objeto Date===
 
Para trabajar con fechas y horas.
 
Para trabajar con fechas y horas.
Línea 100: Línea 102:
 
Borge,Hege,Jani,Kai Jim,Stale,Tove
 
Borge,Hege,Jani,Kai Jim,Stale,Tove
 
</div>
 
</div>
 +
<div class="slide">
 +
===Algunos objetos referidos al navegador===
 +
'''Window''': Representa la ventana del navegador.<br>
 +
'''Navigator''': Contiene información sobre el navegador Web<br>
 +
'''Screen''': Contiene información sobre la pantalla del ordenador<br>
 +
'''History''' : Contiene información sobre las URLs visitadas <br>
 +
'''Location''': Contiene información sobre la URL actual en el navegador <br>
 +
Un ejemplo:
 +
<source lang="javascript">
 +
<html>
 +
<head>
 +
<script type="text/javascript">
 +
function printpage()
 +
  {
 +
  window.print()
 +
  }
 +
</script>
 +
</head>
 +
<body>
 +
<input type="button" value="Print this page" onclick="printpage()" />
 +
</body>
 +
</html>
 +
</source>
 +
</div>
 +
<div class="slide">
  
 +
===DOM===
 +
</div>
 +
<div class="slide">
 +
====Qué es el DOM====
 +
*Es un estándar de la W3C.
 +
*Es una abreviatura de HTML Document Object Model.
 +
*Consiste en un conjunto de objetos para los html y una forma estándar para acceder y manipular las páginas (documentos html).
 +
*HTML DOM no depende de ninguna plataforma ni lenguaje de programación determinado. DOM es una utilidad disponible también para otros lenguajes como Java y PHP.
 +
*Alguno de los objetos son Document, Image, Body, Form, Frame, Iframe, etc.
 +
*Cada objeto puede tener una colección de objetos asociados, unas propiedades y unos métodos.
 +
</div>
 +
<div class="slide">
 +
====Ejemplo: Objeto document====
 +
<source lang="html4strict">
 +
<html>
 +
<body>
 +
<img border="0" src="imagen1.gif" width="48" height="48">
 +
<br />
 +
<img border="0" src="imagen2.gif" width="107" height="98">
 +
<br /><br />
 +
<script type="text/javascript">
 +
document.write("Este documento contiene: ")
 +
document.write(document.images.length + " imágenes.")
 +
</script>
 +
</body>
 +
</html>
 +
</source>
 +
</div>
  
 +
<div class="slide">
 +
 +
====Arbol de nodos====
 +
[[Archivo:dom_html.png|300px|thumb|left|Estructura de documento html según estándar DOM ]]
 +
<source lang="html4strict">
 +
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 +
<html xmlns="http://www.w3.org/1999/xhtml">
 +
<head>
 +
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 +
<title>Página sencilla</title>
 +
</head>
 +
<body>
 +
<p>Esta página es <strong>muy sencilla</strong></p>
 +
</body>
 +
</html>
 +
 +
</source>
 +
</div>
 +
<div class="slide">
 +
 +
====Acceso a los nodos====
 +
*Acceso directo
 +
*A través de sus nodos padre
 +
<source lang="javascript">
 +
//buscaremos todos los parrafos a partir del elemento document
 +
var parrafos = document.getElementsByTagName("p");
 +
 +
var primerParrafo = parrafos[0];
 +
 +
for(var i=0; i<parrafos.length; i++) {
 +
  var parrafo = parrafos[i];
 +
}
 +
 +
var parrafoEspecial = document.getElementsByName("especial");
 +
var cabecera = document.getElementById("cabecera");
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
====Creación de nodos====
 +
<source lang="javascript">
 +
// Crear nodo de tipo Element
 +
var parrafo = document.createElement("p");
 +
// Crear nodo de tipo Text
 +
var contenido = document.createTextNode("Hola Mundo!");
 +
// Añadir el nodo Text como hijo del nodo Element
 +
parrafo.appendChild(contenido);
 +
// Añadir el nodo Element como hijo de la pagina
 +
document.body.appendChild(parrafo);
 +
 +
</source>
 +
</div>
 +
 +
<div class="slide">
 +
====Eliminación de nodos====
 +
<source lang="javascript">
 +
var parrafo = document.getElementById("provisional");
 +
parrafo.parentNode.removeChild(parrafo);
 +
 +
<p id="provisional">...</p>
 +
 +
</source>
 +
</div>
 +
<div class="slide">
 +
====Acceso directo a atributos====
 +
<source lang="javascript">
 +
var enlace = document.getElementById("enlace");
 +
alert(enlace.href); // muestra http://www...com
 +
....
 +
<a id="enlace" href="http://www...com">Enlace</a>
 +
</source>
 +
</div>
 +
<div class="slide">
 +
*Para obtener las propiedades CSS, mediante el atributo style:
 +
<source lang="javascript">
 +
var imagen = document.getElementById("imagen");
 +
alert(imagen.style.margin);
 +
....
 +
<img id="imagen" style="margin:0; border:0;" src="logo.png" />
 +
</source>
 +
 +
*Si el nombre de una propiedad CSS es compuesto, se accede a su valor modificando ligeramente su nombre:
 +
:font-weight se transforma en fontWeight<br>
 +
:line-height se transforma en lineHeight
 +
 +
</div>
 +
 +
<div class="slide">
 +
<source lang="html4strict">
 +
<html>
 +
<head>
 +
<script type="text/javascript">
 +
function getValue()
 +
{
 +
var x=document.getElementById("Titulo");
 +
alert(x.innerHTML);
 +
}
 +
</script>
 +
</head>
 +
<body>
 +
<h1 id="Titulo" onclick="getValue()">Este es el título</h1>
 +
<p>Pulsa en el título para que te salga una alert box con su valor.</p>
 +
</body>
 +
</html>
 +
</source>
 +
 +
</div>
 +
 +
<div class="slide">
 +
 +
====Ejemplos====
 +
<source lang="html4strict">
 +
<html>
 +
<head>
 +
<script type="text/javascript">
 +
function startTime()
 +
{
 +
var today=new Date();
 +
var h=today.getHours();
 +
var m=today.getMinutes();
 +
var s=today.getSeconds();
 +
m=checkTime(m);// add a zero in front of numbers<10
 +
s=checkTime(s);// add a zero in front of numbers<10
 +
document.getElementById('txt').innerHTML=h+":"+m+":"+s;
 +
t=setTimeout('startTime()',500);
 +
}
 +
function checkTime(i)
 +
{
 +
if (i<10)
 +
  {
 +
  i="0" + i;
 +
  }
 +
return i;
 +
}
 +
</script>
 +
</head>
 +
<body onload="startTime()">
 +
<p> prueba </p>
 +
<div id="txt"></div>
 +
</body>
 +
</html>
 +
</source>
 +
 +
</div>
  
 
</div>
 
</div>

Última revisión de 11:40 20 jul 2016



Programación Orientada a Objetos. DOM.

JavaScript es un lenguaje POO*

  • Presenta objetos que se pueden usar
  • Permite crear tus propios objetos y tus propios tipos de variables (JavaScript Avanzado)
  • Un objeto es un tipo especial de dato que tiene
Propiedades
Métodos 
*POO = programación orientada a objetos
 OOP = object oriented programming

Propiedades

Valores que se asocian con los objetos. Ejemplo con el objeto String: 

<script type="text/javascript">
	var txt="¡Hola Pepito!";
	document.write(txt.length);
</script>

Métodos

Acciones que se ejecutan sobre objetos. Ejemplo con el objeto String: 

<script type="text/javascript">
	var str="¡Hola Pepito!";
	document.write(str.toUpperCase());
</script>

Objeto Date

Para trabajar con fechas y horas. Se inicializa automáticamente en la declaración, con la fecha y hora actuales. 

var miFecha=new Date()
//Ejemplos de uso:
miFecha.setFullYear(2010,0,14); //fija la fecha a 14 de Enero de 2010
miFecha.setDate(myDate.getDate()+5); //aumenta la fecha guardada en 5 días
 
var miFecha=new Date(); //vamos a hacer una comparación de fechas
miFecha.setFullYear(2010,0,14);
var hoy = new Date();
if (miFecha>hoy)
{
	alert("Hoy es antes del 14 de Enero del 2010");
}
else
{
	alert("Hoy es después del 14 de Enero de 2010");
}

Objeto Array

Varias posibilidades para declararlas e inicializarlas: 

var misCoches=new Array();
misCoches[0]="Saab";
misCoches[1]="Volvo";
misCoches[2]="BMW";
 
 
var misCoches=new Array(3);
misCoches[0]="Saab";
misCoches[1]="Volvo";
misCoches[2]="BMW";
 
var misCoches=new Array("Saab","Volvo","BMW");

Presentan numerosos métodos para hacer las operaciones más habituales, por ejemplo, ordenamiento (método sort): 

var arr = new Array(6);
	arr[0] = "Jani";
	arr[1] = "Hege";
	arr[2] = "Stale";
	arr[3] = "Kai Jim";
	arr[4] = "Borge";
	arr[5] = "Tove";
	document.write(arr + "<br />");
	document.write(arr.sort());

Resultado:
Jani,Hege,Stale,Kai Jim,Borge,Tove
Borge,Hege,Jani,Kai Jim,Stale,Tove

Algunos objetos referidos al navegador

Window: Representa la ventana del navegador.
Navigator: Contiene información sobre el navegador Web
Screen: Contiene información sobre la pantalla del ordenador
History : Contiene información sobre las URLs visitadas
Location: Contiene información sobre la URL actual en el navegador
Un ejemplo: 

<html> 
	<head>
		<script type="text/javascript">
			function printpage()
  			{
  				window.print()
  			}
		</script>
	</head>
	<body>
		<input type="button" value="Print this page" onclick="printpage()" />
	</body>
</html>

DOM

Qué es el DOM

  • Es un estándar de la W3C.
  • Es una abreviatura de HTML Document Object Model.
  • Consiste en un conjunto de objetos para los html y una forma estándar para acceder y manipular las páginas (documentos html).
  • HTML DOM no depende de ninguna plataforma ni lenguaje de programación determinado. DOM es una utilidad disponible también para otros lenguajes como Java y PHP.
  • Alguno de los objetos son Document, Image, Body, Form, Frame, Iframe, etc.
  • Cada objeto puede tener una colección de objetos asociados, unas propiedades y unos métodos.

Ejemplo: Objeto document

<html>
	<body>
		<img border="0" src="imagen1.gif" width="48" height="48">
		<br />
		<img border="0" src="imagen2.gif" width="107" height="98">
		<br /><br />
		<script type="text/javascript">
			document.write("Este documento contiene: ")
			document.write(document.images.length + " imágenes.")
		</script>
</body>
</html>

Arbol de nodos

Estructura de documento html según estándar DOM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>Página sencilla</title>
	</head>
 	<body>
		<p>Esta página es <strong>muy sencilla</strong></p>
	</body>
</html>

Acceso a los nodos

  • Acceso directo
  • A través de sus nodos padre 
//buscaremos todos los parrafos a partir del elemento document
var parrafos = document.getElementsByTagName("p");
 
var primerParrafo = parrafos[0];
 
for(var i=0; i<parrafos.length; i++) {
  var parrafo = parrafos[i];
}
 
var parrafoEspecial = document.getElementsByName("especial");
var cabecera = document.getElementById("cabecera");

Creación de nodos

// Crear nodo de tipo Element
var parrafo = document.createElement("p");
// Crear nodo de tipo Text
var contenido = document.createTextNode("Hola Mundo!");
// Añadir el nodo Text como hijo del nodo Element
parrafo.appendChild(contenido);
// Añadir el nodo Element como hijo de la pagina
document.body.appendChild(parrafo);

Eliminación de nodos

var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);
 
<p id="provisional">...</p>

Acceso directo a atributos

var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com
....
<a id="enlace" href="http://www...com">Enlace</a>
  • Para obtener las propiedades CSS, mediante el atributo style: 
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);
....
<img id="imagen" style="margin:0; border:0;" src="logo.png" />
  • Si el nombre de una propiedad CSS es compuesto, se accede a su valor modificando ligeramente su nombre:
font-weight se transforma en fontWeight
line-height se transforma en lineHeight 
<html>
	<head>
		<script type="text/javascript">
			function getValue()
			{
				var x=document.getElementById("Titulo");
				alert(x.innerHTML);
			}
		</script>
	</head>
	<body>
		<h1 id="Titulo" onclick="getValue()">Este es el título</h1>
		<p>Pulsa en el título para que te salga una alert box con su valor.</p>
	</body>
</html>

Ejemplos

<html>
	<head>
		<script type="text/javascript">
			function startTime()
			{
				var today=new Date();
				var h=today.getHours();
				var m=today.getMinutes();
				var s=today.getSeconds();
				m=checkTime(m);// add a zero in front of numbers<10
				s=checkTime(s);// add a zero in front of numbers<10
				document.getElementById('txt').innerHTML=h+":"+m+":"+s;
				t=setTimeout('startTime()',500);
			}
			function checkTime(i)
			{
				if (i<10)
  				{
  					i="0" + i;
  				}
				return i;
			}
		</script>
	</head>
	<body onload="startTime()">
		<p> prueba </p>
		<div id="txt"></div>
	</body>
</html>
Obtenido de «https://es.wikieducator.org/index.php?title=Usuario:Juanda/javascript/Dom&oldid=19948»