Share
Hola y bienvenido a la primera parte de lo que esperamos sea una serie extensa que cubra aspectos básicos del lenguaje de programación JavaScript y la API DOM..
Si bien los marcos como jQuery, Prototype y MooTools son excelentes maneras de suprimir los errores del navegador y acelerar el desarrollo, es importante conocer y comprender las tecnologías subyacentes. Esta serie pretende informarle lo que necesita saber sobre JavaScript y el Modelo de objetos de documento (DOM). Incluso si juras por una biblioteca en particular, esto todavía te beneficiará, saber cómo funciona algo debajo de la piel solo puede ser algo bueno.!
JavaScript es un dinámica, vagamente escrito, basado en prototipo lenguaje de programación que se utiliza en muchos entornos diferentes. Además de ser el lenguaje de programación predominante en el lado del cliente de la web, también se utiliza para escribir complementos para IDE, en archivos PDF y como base para otras plataformas y abstracciones superiores..
JavaScript se basa en el estándar ECMAScript (ECMA-262) y fue creado por Brendan Eich de Netscape. Originalmente se llamaba LiveScript, pero luego se le cambió el nombre a JavaScript, probablemente con la única intención de causar confusión..
Aquí están algunas de sus características en un poco más de detalle:
Comprender los puntos anteriores no es importante para aprender sobre JavaScript; son solo algunas ideas para poner tu cerebro en marcha y te ayudarán a diferenciar JavaScript de otros lenguajes de programación que hayas experimentado..
El Modelo de objetos de documento, normalmente abreviado como DOM, es la API a través de la cual JavaScript interactúa con el contenido dentro de un sitio web. JavaScript y el DOM generalmente se ven como una sola entidad ya que JavaScript se usa más comúnmente para este propósito (interactuar con el contenido en la web). La API DOM se utiliza para acceder, atravesar y manipular documentos HTML y XML.
Aquí hay algunas cosas notables sobre el DOM:
') entonces se puede acceder a través del DOM como un nodo.
Si está utilizando Firefox y aún no tiene el complemento Firebug, le recomiendo que lo descargue e instale ahora. Es una herramienta muy útil para obtener una imagen decente de toda la estructura del documento..
Cuando desee utilizar JavaScript en un sitio web, debe incluirse dentro de un elemento SCRIPT:
JavaScript!
Como puede ver, tenemos un elemento SCRIPT en la parte inferior de nuestro documento. El atributo TYPE se debe establecer estrictamente en 'aplicación / javascript' pero no es de extrañar que no funcione en Internet Explorer, por lo que estamos atascados con 'text / javascript' o sin ningún atributo TYPE. Si le interesa la validación, la sugerencia anterior probablemente le convenga..
También habrá notado que dentro de ese elemento SCRIPT tenemos un par de líneas comentadas. Estos informan a los navegadores compatibles con XHTML que el contenido del elemento SCRIPT es "datos de caracteres" y no debe interpretarse como un marcado XHTML. Solo es realmente necesario si planeas usar el '<' or '>'caracteres en su código de JavaScript. Obviamente, puedes olvidarte de todo esto si estás usando HTML plano.
Cualquier JavaScript que pongamos dentro de ese elemento SCRIPT se ejecutará a medida que se cargue la página. La única excepción es cuando un elemento SCRIPT tiene un atributo 'diferir'. De manera predeterminada, cuando un navegador se encuentra con un elemento SCRIPT, se detendrá y ejecutará el código, luego continuará analizando el documento. El atributo DEFER informa al navegador que el código no contiene ningún código de modificación de documentos y, por lo tanto, puede ejecutarse más tarde. El único problema con esto es que solo funciona en IE, por lo que probablemente sea mejor evitar este atributo.
Si desea enlazar a un archivo de script externo, simplemente agregue un atributo SRC a su elemento SCRIPT correspondiente a su ubicación. Normalmente es una mejor idea tener archivos de script separados que escribir código en línea, ya que significa que el navegador puede almacenar el archivo en caché. Además, no tienes que preocuparte por ninguna de esas tonterías de CDATA:
Antes de continuar con el DOM, es una buena idea tener un conocimiento básico de algunos elementos esenciales de JavaScript. Si tiene problemas para entender algunos de estos, no se preocupe, eventualmente los recogerá!
En JavaScript puedes tener diferentes tipos de valores. Hay números, cadenas, booleanos, objetos, indefinidos y nulos:
Los comentarios de una sola línea se escriben con dos barras diagonales (//), todo el texto restante en esa línea se supone que es un comentario del analizador. Los comentarios de varias líneas se indican con '/ *' y '* /' para finalizar el comentario.
En JavaScript, todos los números se representan como valores de punto flotante. Al definir una variable numérica, recuerde no incluirla en ninguna cita.
// Nota: SIEMPRE use 'var' para declarar una variable: var leftSide = 100; var topSide = 50; var areaOfRectangle = leftSide * topSide; // = 5000
Cualquier cadena que defina se toma literalmente, JavaScript no la procesará. Una cadena es una secuencia de caracteres Unicode y se debe envolver en un par coincidente de comillas simples o dobles.
var firstPart = 'Hola'; var secondPart = '¡Mundo!'; var allOfIt = firstPart + "+ secondPart; // Hello World! // El signo + se usa como operador de concatenación de cadenas // (también se usa para la suma numérica)
Los tipos booleanos son útiles cuando desea evaluar una condición: para ver si cumple con un criterio específico. Solo hay dos valores booleanos posibles: verdadero y falso. Cualquier comparación, usando operadores lógicos, resultará en un booleano.
5 === (3 + 2); // = verdadero // Puedes asignar valores booleanos a las variables: var veryTired = true; // Puedes probarlo así: if (veryTired) // Sleep
El '===' que ves arriba es un operador de comparación, los cubriremos más adelante.
Una función es un objeto especializado:
Accentsconagua
// Utilizando el operador de función para crear una nueva función: function myFunctionName (arg1, arg2) // El código de función va aquí. // Si omite el nombre de la función, entonces // está creando una "función anónima": function (arg1, arg2) // El código de la función va aquí. // Ejecutar una función es simplemente un caso de referenciarla // y luego agregar un paréntesis (con argumentos): myFunctionName (); // Sin argumentos myFunctionName ('foo', 'bar'); // con argumentos // También puede ejecutar una función sin asignarla // a una variable: (function () // Esto se conoce como una función anónima de auto-invocación) (); Un Array también es un objeto especializado y puede contener cualquier número de valores de datos. Para acceder a los valores de datos dentro de una matriz, debe usar un número, denominado "índice" del elemento que está intentando recuperar:
// 2 formas diferentes de declarar una nueva matriz, // Literal: var fruit = ['apple', 'lemon', 'banana']; // Usando el constructor Array: var fruit = new Array ('apple', 'lemon', 'banana'); fruta [0]; // Acceda al primer elemento de la matriz (apple) fruit [1]; // Acceda al segundo elemento de la matriz (limón) fruta [2]; // Acceder al tercer elemento de la matriz (banana) Un objeto es una colección de valores con nombre (pares clave-valor). Es similar a una matriz, la única diferencia es que puede especificar un nombre para cada valor de datos.
// 2 formas diferentes de declarar un nuevo objeto, // Literal (llaves): var profile = nombre: 'Bob', edad: 99, trabajo: 'Freelance Hitman'; // Usando el constructor de objetos: var profile = new Object (); profile.name = 'Bob'; profile.age = 99; profile.job = 'Freelance Hitman';
Una de las construcciones más comunes en JavaScript es la 'IF' / 'ELSE' declaración. Es algo parecido a esto:
var legalDrinkingAge = 21; var yourAge = 29; if (yourAge> = legalDrinkingAge) // Podemos usar 'alert' para notificar al usuario: alert ('You be drink.'); else alert ('Lo siento, no puedes beber'); En lugar de enumerarlos todos aquí, le sugiero que visite el artículo de MDC sobre Operadores. Los explica con mucho detalle. He configurado algunos ejemplos para darle una idea de cómo se usan algunos de los operadores a continuación:
// additioa / substraction / multiply / divide var someMaths = 2 + 3 + 4 - 10 * 100/2; // Igualdad si (2 == (5 - 3) / * Hacer cosas * / // == comprueba la equidad // // Desigualdad si (2! = (5 - 3) / * Hacer cosas * / / / Operadores de igualdad estricta: // (sugiero usar estos) 2 === 2 // En lugar de 2 == 2 2 = = 3 // En lugar de 2! = 3 // Asignación: var numberOfFruit = 9; numberOfFruit - = 2; // Igual que "numberOfFruit = numberOfFruit - 2" numberOfFruit + = 2; // Igual que "numberOfFruit = numberOfFruit + 2"
El bucle es útil cuando necesitas recorrer todos los elementos de una matriz o todos los miembros de un objeto. La forma más común de realizar un bucle en JavaScript es mediante el uso de la instrucción FOR o WHILE.
var envatoTutSites = ['NETTUTS', 'PSDTUTS', 'AUDIOTUTS', 'AETUTS', 'VECTORTUTS']; // WHILE loop var counter = 0; var lengthOfArray = envatoTutSites.length; mientras < lengthOfArray) alert(envatoTutSites[counter]); counter++; // Same as counter += 1; // FOR loop // (The i stands for "iterator" - you could name it anything) for (var i = 0, length = envatoTutSites.length; i < length; i++) alert(envatoTutSites[i]);
Supongamos que tenemos un documento XHTML básico que contiene un párrafo y una lista sin ordenar:
JavaScript! Mi primer párrafo ...
En este primer ejemplo, vamos a acceder a nuestro párrafo utilizando el método DOM 'getElementById':
(Este código va dentro del elemento SCRIPT en la plantilla anterior).
var introParagraph = document.getElementById ('intro'); // Ahora tenemos una referencia al nodo DOM. Este nodo DOM // representa el párrafo de introducción. La variable 'introParagraph' ahora es una referencia al nodo DOM. Podemos hacer varias cosas con este nodo, podemos consultar su contenido y atributos, y podemos manipular cualquier aspecto de él. Podemos eliminarlo, clonarlo o moverlo a otras partes del árbol DOM.
Cualquier cosa que esté presente en un documento al que podamos acceder mediante JavaScript y la API DOM. Por lo tanto, podríamos querer acceder a la lista desordenada de una manera similar, el único problema es que no tiene una identificación. Puede darle una ID y luego usar el mismo método que el anterior o podríamos acceder usando 'getElementsByTagName':
var allUnorderedLists = document.getElementsByTagName ('ul'); // 'getElementsByTagName' devuelve una colección / lista de nodos activos // - Es muy similar a una matriz con algunas diferencias leves. El método 'getElementsByTagName' devuelve una colección / lista de nodos activos. Es similar a una matriz en que tiene una propiedad de longitud. Una cosa importante a tener en cuenta es que estas colecciones están "en vivo": si agrega un nuevo elemento al DOM, entonces la colección se actualizará. Ya que es un objeto similar a una matriz, podemos acceder a cada nodo a través de un índice, desde 0 hasta la longitud total de la colección (menos 1):
// Acceder a una sola lista desordenada: [0] index var unorderedList = document.getElementsByTagName ('ul') [0]; // Crear una lista de nodos de todos los elementos de la lista dentro de UL: var allListItems = unorderedList.getElementsByTagName ('li'); // Ahora, podemos recorrer cada elemento de la lista usando un bucle FOR: para (var i = 0, length = allListItems.length; i < length; i++) // Extract text node within and alert its content: alert( allListItems[i].firstChild.data ); 
El término "atravesar" se usa para describir la acción de viajar a través del DOM, encontrando nodos. La API DOM nos brinda muchas propiedades de nodo que podemos usar para subir y bajar a través de todos los nodos dentro de un documento.
Estas propiedades son inherentes a todos los nodos y le permiten acceder a los nodos relacionados / cercanos:
Entonces, como puede ver, atravesar el DOM es increíblemente fácil, es solo un caso de saber los nombres de las propiedades.
Una cosa a tener en cuenta sobre el gráfico anterior: los elementos de la lista solo se pueden recuperar de esa manera si no hay espacios en blanco entre ellos. Debido a que puede tener nodos de texto y nodos de elementos en un documento, el espacio entre los '
Así es como funcionan las principales bibliotecas de JavaScript detrás de escena; utilizando métodos y propiedades nativos de DOM para darle acceso a estos elementos a través de una abstracción bien pulida. Lo que te separa del marco es que ahora tienes una idea de cómo sobrevivir sin un marco (si es que todavía no lo has hecho)!
Bueno, eso es todo por la primera parte. Espero que hayas aprendido algo de todas mis divagaciones. En la siguiente parte de la serie, esperamos centrarnos en algunos ejemplos más aplicables; Probablemente estemos cubriendo el modelo de evento del navegador también.
Mientras tanto, y si aún no lo has hecho, echa un vistazo a estas charlas de Doug Crockford (sitio de videos de Yahoo!):
Gracias por leer!
