|
|
| (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>
| + | |
