Diferencia entre revisiones de «Usuario:ManuelRomero/JavaScript/dom/conceptosGenerales»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con « {{#widget:Slides}} {{MiTitulo| Curso de JavaScript}} <div class="slides layout-regular template-default"> <div class="slide"> == Programación Orientada a Objetos. DOM....»)
 
(Página reemplazada por «{{Usuario:ManuelRomero/JavaScript/dom/nav}} __TOC__»)
 
(4 revisiones intermedias por el mismo usuario no mostrado)
Línea 1: Línea 1:
 +
{{Usuario:ManuelRomero/JavaScript/dom/nav}}
  
{{#widget:Slides}} {{MiTitulo| Curso de JavaScript}}
+
__TOC__
<div class="slides layout-regular template-default">
+
<div class="slide">
+
 
+
== Programación Orientada a Objetos. DOM. ==
+
</div>
+
<div class="slide">
+
=== 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
+
<pre>
+
*POO = programación orientada a objetos
+
OOP = object oriented programming
+
</pre>
+
</div>
+
<div class="slide">
+
====Propiedades====
+
Valores que se asocian con los objetos. Ejemplo con el objeto String:
+
<source lang="javascript">
+
<script type="text/javascript">
+
var txt="¡Hola Pepito!";
+
document.write(txt.length);
+
</script>
+
</source>
+
</div>
+
<div class="slide">
+
 
+
====Métodos====
+
Acciones que se ejecutan sobre objetos. Ejemplo con el objeto String:
+
<source lang="javascript">
+
<script type="text/javascript">
+
var str="¡Hola Pepito!";
+
document.write(str.toUpperCase());
+
</script>
+
</source>
+
</div>
+
 
+
<div class="slide">
+
 
+
===Objeto Date===
+
Para trabajar con fechas y horas.
+
Se inicializa automáticamente en la declaración, con la fecha y hora actuales.
+
<source lang="javascript">
+
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");
+
}
+
</source>
+
</div>
+
 
+
<div class="slide">
+
===Objeto Array===
+
Varias posibilidades para declararlas e inicializarlas:
+
<source lang="javascript">
+
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");
+
</source>
+
</div>
+
 
+
<div class="slide">
+
Presentan numerosos métodos para hacer las operaciones más habituales, por ejemplo, ordenamiento (método sort):
+
<source lang="javascript">
+
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());
+
</source>
+
Resultado:<br>
+
Jani,Hege,Stale,Kai Jim,Borge,Tove <br>
+
Borge,Hege,Jani,Kai Jim,Stale,Tove
+
</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>
+
</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>
+

Última revisión de 20:39 8 mar 2016