Usuario:ManuelRomero/JavaScript/dom/conceptosGenerales - Historial de revisiones

ManuelRomero: Página reemplazada por «{{Usuario:ManuelRomero/JavaScript/dom/nav}} TOC»

2016-03-08T07:39:49Z

Página reemplazada por «{{Usuario:ManuelRomero/JavaScript/dom/nav}} __TOC__»

ManuelRomero en 22:28 6 mar 2016

2016-03-06T22:28:15Z

Mostrar los cambios

ManuelRomero en 22:25 6 mar 2016

2016-03-06T22:25:58Z

ManuelRomero en 22:11 6 mar 2016

2016-03-06T22:11:47Z

ManuelRomero en 10:09 6 mar 2016

2016-03-06T10:09:44Z

ManuelRomero: Página creada con « {{#widget:Slides}} {{MiTitulo| Curso de JavaScript}}

== Programación Orientada a Objetos. DOM....»

2016-03-06T10:03:09Z

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 nueva

{{#widget:Slides}} {{MiTitulo| Curso de JavaScript}}
<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>

← Revisión anterior		Revisión de 07:39 8 mar 2016
Línea 2:		Línea 2:

	__TOC__		__TOC__
−	~~===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">~~

← Revisión anterior		Revisión de 22:25 6 mar 2016
Línea 1:		Línea 1:
	{{Usuario:ManuelRomero/JavaScript/dom/nav}}		{{Usuario:ManuelRomero/JavaScript/dom/nav}}
−	~~<br />~~

−	~~{{#widget:Slides}} {{MiTitulo\| Curso de JavaScript}}~~
−	~~<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* ===~~
−	*JavaScript es un lenguaje que tiene un gran biblioteca de funciones para utilizar
−	*Esta biblioteca de funciones se organizan en objetos
−	*Un objeto va a ser como un tipo de datos
−	*Los objetos serán programas independientes que puedo utilizar cuando los necesite
−	*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===		===Objeto Date===

@@ Línea 139: / Línea 139: @@
 *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.

@@ Línea 1: / Línea 1: @@
 {{#widget:Slides}} {{MiTitulo| Curso de JavaScript}}
@@ Línea 8: / Línea 10: @@
 <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)