4.1 Introducción al Lenguaje
JavaScript es un lenguaje de programación usado principalmente para crear páginas web dinámicas. Una página web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones activadas al pulsar botones y ventanas con mensajes de aviso al usuario.
Técnicamente, JavaScript es un lenguaje de programación interpretado, y no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador sin necesidad de procesos intermedios.
A pesar de su nombre, JavaScript no guarda ninguna relación directa con el lenguaje de programación Java. Legalmente, JavaScript es una marca registrada de la empresa Sun Microsystems. Su nombre es exclusivamente por marketing, ya que Java era la palabra de moda en el mundo informático y de Internet de la época de desarrollo.
Cómo incluir JavaScript en documentos XHTML
La integración de JavaScript y XHTML es muy flexible, ya que existen al menos tres formas para incluir código JavaScript en las páginas web en esta sección solo se presentaran dos de ellas.
Incluir JavaScript en el mismo documento XHTML
El código JavaScript se encierra entre etiquetas <script></script> y se incluye en cualquier parte del documento. Aunque es correcto incluir cualquier bloque de código en cualquier zona de la página, se recomienda definir el código JavaScript dentro de la cabecera del documento (dentro de la etiquetas <head></head>):
Este método se emplea cuando se define un bloque pequeño de código o cuando se quieren incluir instrucciones específicas en un determinado documento HTML que completen las instrucciones y funciones que se incluyen por defecto en todos los documentos del sitio web.
El principal inconveniente es que si se quiere hacer una modificación en el bloque de código, es necesario modificar todas las páginas que incluyen ese mismo bloque de código JavaScript.
Definir JavaScript en un archivo externo.
Las instrucciones JavaScript se pueden incluir en un archivo externo de tipo JavaScript que los documentos XHTML enlazan mediante las etiquetas <script></script> . Colocadas entre las etiquetas <head></head>.
Se pueden crear todos los archivos JavaScript (*.js) que sean necesarios y cada documento XHTML puede enlazar tantos archivos JavaScript como necesite.
Este método requiere definir el atributo src, que es el que indica la URL correspondiente al archivo JavaScript que se quiere enlazar.
Los archivos de tipo JavaScript son simples documentos de texto con la extensión js que se pueden crear con cualquier editor de texto como Notepad, Wordpad, UltraEdit, Vi, etc.
La principal ventaja de enlazar un archivo JavaScript externo es que se simplifica el código XHTML de la página, además de la capacidad de reutilizar el mismo código JavaScript en páginas del sitio web y que cualquier modificación realizada en el archivo JavaScript se refleja inmediatamente en todas las páginas XHTML que lo enlazan
4.2 Elementos de Programación
Variables
Las variables o identificadores se utilizan para almacenar valores en un programa; cada variable tiene un nombre que permite referenciarla, nombre que se da en base a unas reglas. En JavaScript un nombre o identificador debe comenzar siempre con una letra o un subrayado; los siguientes caracteres pueden ser dígitos o letras; y nunca se puede usar una palabra reservada como identificador (por ejemplo: true, false, null y undefined).
Una variable se puede declarar en JavaScript, de dos formas:
Forma explícita: var nombre_Variable;
Forma implícita: var nombre_Variable = valor;
En el último caso no es imprescindible escribir var, pero es necesario por razones de compatibilidad entre navegadores.
Tipos de variables
Aunque todas las variables de JavaScript se crean de la misma forma (mediante la palabra reservada var), la forma en la que se les asigna un valor depende del tipo de valor que se quiere almacenar (números, textos, etc.).
Variables numéricas
Almacenan valores numéricos enteros (integer en inglés) o decimales (float en inglés). En este caso, el valor se asigna indicando directamente el número entero o decimal. Los números decimales usan el carácter ( . punto) en vez de ( , coma) para separar la parte entera y la parte decimal:
JavaScript define 3 valores especiales muy útiles cuando se trabaja con números. En primer lugar se definen los valores ±Infinity para representar números demasiado grandes (positivos y negativos) y con los que JavaScript no puede trabajar.
El otro valor especial definido por JavaScript es NaN, cuyo nombre viene de “Not a Number”. De esta forma, si se realizan funciones matemáticas con variables no numéricas, el resultado será de tipo NaN.
Cadenas de texto
Almacenan caracteres, palabras y/o frases de texto. Para asignar el valor a la variable, se encierra el valor entre comillas dobles o simples, para delimitar su comienzo y su final:
Algunos caracteres especiales son difíciles de incluir en una variable de texto (tabulador, ENTER, etc.) Por otra parte, como las comillas se utilizan para definir el contenido de la variable, no es posible incluir comillas dentro de la propia cadena de texto.
Variables de tipo boolean
Son un tipo de variables que solo pueden tomar uno entre dos valores especiales que representan el valor 'verdadero' y el valor'falso'.
JavaScript convierte automáticamente el resto de variables a sus valores boolean si es necesario. En el caso de los números, el 0 se convierte en false y cualquier otro número distinto de 0 se convierte en true.
Conversión entre tipos de variables
JavaScript incluye un método llamado toString() que permite convertir variables de cualquier tipo a variables de cadena de texto.
JavaScript también incluye métodos para convertir los valores de las variables en valores numéricos. Los métodos definidos son parseInt() y parseFloat(). Cada uno de ellos convierte la variable que se le indica en un número entero o un número decimal. La conversión numérica de una cadena se realiza carácter a carácter empezando por el de la primera posición. Si ese carácter no es un número, la función devuelve el valor NaN.
Si el primer carácter es un número, se continúa con los siguientes caracteres mientras estos sean números.
En el caso de parseFloat(), el comportamiento es el mismo salvo que también se consideran válidos los caracteres que indican la parte decimal del número.
Palabras reservadas
Son palabras especiales que se utilizan para aumentar la legibilidad y separar las entidades sintácticas. Estas palabras no pueden usarse como identificadores.
Constantes
Se definen con la palabra clave const. La sintaxis de un identificador de constante es la misma que la de un identificador de variable: debe empezar con una letra o un guión bajo '_' [underscore] y puede contener caracteres alfanuméricos y/o guiones bajos.
const x = 48;
Una constante es asignada en el momento de la declaración y no puede cambiar el valor mediante una asignación o ser re-declarada mientras el script está en ejecución.
Las reglas de ámbito [scope] para constantes son las mismas que para las variables, excepto que la palabra clave const es siempre requerida, incluso para constantes globales. Si la palabra clave es omitida, se asume que el identificador representa a una variable.
No se puede declarar una constante con el mismo nombre de una función o de una variable en el mismo ámbito [scope].
Existen tres constantes predefinidas: true, false y undefined.
Expresiones
Una expresión es cualquier conjunto válido de literales, variables, operadores y expresiones que se evalúan como un único valor; el valor puede ser un número, una cadena o un valor lógico (booleano).
Conceptualmente, hay dos tipos de expresiones: las que asignan un valor a una variable y las que simplemente tienen un valor.
Por ejemplo, la expresión x = 7 es una expresión que asigna a x el valor 7. Esta expresión se evalúa como siete. Dicha expresión usa un operador de asignación.
Por otra parte, la expresión 3 + 4 simplemente se evalúa como siete; no se realiza ninguna asignación. Los operadores usados en dichas expresiones se les llaman simplemente operadores.
JavaScript tiene los siguientes tipos de expresiones:
Aritméticas: se evalúan como un número, por ejemplo 3.14159. (Generalmente usan operadores aritméticos.)
De cadena: se evalúan como una cadena de caracteres, por ejemplo, 'Sofía' o '234'. (Generalmente usan operadores de cadena de caracteres (string).)
Lógicas: se evalúan como verdadero o falso. (A menudo emplean operadores lógicos.)
De objeto: se evalúan como un objeto.
Operadores
Símbolo matemático que denota un conjunto de operaciones que han de realizarse. En JavaScript los operadores permiten manipular el valor de las variables, realizar operaciones matemáticas o de manejo de texto con sus valores y comparar diferentes variables. De esta forma, los operadores permiten a los programas realizar cálculos complejos y tomar decisiones lógicas en función de comparaciones y otros tipos de condiciones.
Operador de asignación.
Un operador de asignación asigna un valor a su operando izquierdo basándose en el valor de su operando derecho. El operador básico de asignación es el igual (=), el cual asigna el valor de su operador derecho a su operador izquierdo. Esto es, x = y asigna el valor de y a x.
Operadores de comparación
Un operador de comparación compara sus operandos y devuelve un valor lógico en función de si la comparación es verdadera.
Los operandos pueden ser valores numéricos, de cadena de caracteres, lógicos u objetos. Las cadenas se comparan basándose en el orden lexicográfico estándar, usando los valores Unicode.
Si dos operandos no son del mismo tipo, JavaScript intentará convertir los operandos a un tipo apropiado para la comparación, excepto para los operandos === y !==. Esto acostumbra a resultar en una comparación numérica.
Operadores aritméticos
Los operadores aritméticos toman valores numéricos (tanto literales como variables) como operandos y devuelven un único valor numérico. Los operadores aritméticos estándar son el de suma (+), el de resta (-), el de multiplicación (*) y el de división (/). Estos operadores trabajan igual que en la mayoría de lenguajes de programación, excepto el operador / que devuelve la división real (de coma flotante), no la división entera como sucede en C o en Java.
Operadores lógicos
Los operadores lógicos son generalmente empleados con valores lógicos (booleanos); estos operadores devuelven un valor booleano. Sin embargo, los operadores && y || realmente devuelven el valor de uno de sus operandos, por esto si se emplean con valores no booleanos, podrían devolver un valor no booleano.
Operadores de cadena de caracteres (String)
Además de los operadores de comparación, los cuales pueden ser empleados con los valores de cadena, el operador de concatenación (+) genera otra cadena que es la unión de los dos operandos de tipo cadena. Por ejemplo, 'mi ' + 'cadena' retorna la cadena 'mi cadena'.
El operador abreviado de asignación += también puede usarse para concatenar cadenas. Por ejemplo, si la variable micadena tiene el valor 'Vera', la expresión micadena += 'cruz' se evalúa como 'Veracruz' y asigna este valor a micadena.
Sentencias condicionales
En JavaScript, como en muchos lenguajes, la sentencia para verificar si una condición se cumple y realizar una acción u otra es if.
switch
Esta expresión se utiliza cuando tenemos múltiples posibilidades como resultado de la evaluación de una sentencia.
Ciclos
Los ciclos son sentencias esenciales en cualquier lenguaje de programación. JavaScript cuenta con tres: while, do while y for. Hay cuatro partes en todos los bucles. Inicialización, cuerpo, iteración y condición.
while: Ejecuta repetidamente el mismo bloque de código hasta que se cumpla una condición de terminación.
do..while: Como mínimo siempre se ejecutará el cuerpo del bucle una vez, en el bucle while es posible que no se ejecute ni una sola vez el contenido de este.
for:Es el ciclo más común, en el una variable se fija a un valor inicial, que se actualiza con cada ciclo, y cuando el valor cumple una determinada condición, el ciclo se termina.
Hay dos formatos más de ciclos for, aunque no todas se aplican en todos los navegadores y se expondrán en incisos posteriores.
break: La sentencia break se puede colocar dentro de un ciclo o ciclos anidados. Cuando se ejecuta la sentencia break se abandona el ciclo más interno. A todos los efectos la sentencia breakactúa como un salto a la instrucción siguiente al ciclo en el que se ejecuta.
continue: La sentencia continue, no abandona el ciclo si no hace que se ejecute la siguiente iteración. En el ciclo whilela ejecución del continue hace que el flujo del programa salte a la condición. En el bucle for la ejecución del continue ejecuta la expresión de incremento (decremento), para después continuar normalmente con la condición. Es decir, la ejecución del continue evita que se ejecute durante una interacción el resto del cuerpo del ciclo.
Funciones
Una función es un bloque de código con un nombre. Cada vez que se usa el nombre, se llama a la función y el código de la función es ejecutado. Las funciones pueden llamarse con valores, conocidos como parámetros, que se usan como variables.
Las funciones tienen dos objetivos: organización del programa (archivo o documento) y ejecución del código de la función.
El nombre de una función se escribe inmediatamente después del comando function. Todos los nombres de funciones deben ser únicos y diferentes de los nombres de los comandos que usa JavaScript. No puede haber dos funciones con el mismo nombre.
La lista de parámetros (argumentos) de una función se separa por comas. La función usa esos parámetros en las sentencias de su cuerpo que la configuran.
Los argumentos que se le pasan a una función no pueden ser cambiados en su interior pues se pasan por valor.
Hay tres enfoques principales para la creación de funciones en JavaScript: declarativo/estático, dinámico/anónima, y literal.
Muchas tareas de programación que se puede lograr con el enfoque declarativo. Sin embargo es importante comprender el impacto de cada tipo de declaración antes de usarlas.
Los parámetros de una función se pasan por valor, los arrays se pasan por referencia.
Nota:Las funciones pueden regresar más de un valor en la versión 1.7. Sin embargo Internet Explorer no acepta completamente esta especificación.
Javascript tiene por característica no tipificar sus variables y cuando de operaciones matemáticas en particular en la suma dicha característica podría producirnos errores inesperados
4.3 Manipulación de Objetos
El Modelo de Objetos de Documento (DOM - Document Object Model -) describe cómo todos los elementos en una página HTML, tales como campos de entrada, imágenes, etc, se relacionan con la estructura más alta: el propio documento. Llamando al elemento por su nombre correcto DOM, podemos influir en él mediante un lenguaje de programación, e,g. Javascript, Java, etc.
JavaScript por si solo tiene muchas limitaciones pero se han desarrollado muchas y excelentes librerias que le han dado realmente contenido dinámico al desarrollo web. jQuery es uno de los complementos más esenciales para el desarrollo web, usado en millones de sitios en toda la web, ya que nos facilita mucho el desarrollo de aplicaciones enriquecidas del lado del cliente, en Javascript, compatibles con todos los navegadores.
jQuery no es un lenguaje, sino una serie de funciones y métodos de Javascript. Por tanto, Javascript es el lenguaje y jQuery es una librería que podemos usar opcionalmente si queremos facilitar nuestra vida cuando programamos en Javascript. A veces nos podemos referir a jQuery como framework o incluso como un API de funciones, útiles en la mayoría de proyectos web.
write
Permite escribir texto html desde Javascript. El texto se escribe directamente el body del html.
Es la forma más fácil de escribir HTML desde Javascript, lo cual no quiere decir que es la mejor manera de escribir código HTML desde Javascript o incluso que va a trabajar en todas las situaciones. De hecho, el método document.write es muy limitado en lo que puedes hacer con él.
El lector debe considerar que document.write sólo funciona con las página que el navegador procesa como HTML.
innerHTML
Sirve para obtener o modificar el HTML del documento HTML. Se utiliza la propiedad InnerHtml para modificar mediante programación el contenido interno entre las etiquetas de apertura y cierre de un control de servidor HTML.
La propiedad InnerHtml no codifica automáticamente los caracteres especiales en entidades HTML, es el programador el responsable de hacerlo.
Crear y accesar elementos
Para crear etiquetas "tag" html debemos usar el método createElement(). Cuya sintaxis es la siguiente:
createElement( tag )
Donde tag es una etiqueta valida en html.
Si necesitamos agregar un nodo es necesario usar el método appendChild(). El cual agrega un nodo al final del arbol. La sintaxis es
appendChild( tag )
El método insertBefore tiene un comportamiento similar al de appendChield, solo que el nodo agregado es puesto antes del padre. La sintaxis es
insertBefore( nuevo tag, referencia )
Ejemplo: Agregar elementos a un documento
HTML
Los elementos son agregados mediante el evento onclick (Línea 7)
La línea 8 declara un elemento div vacio cuya función es servir de contenedor
Javascript
En la línea 5 se crea un objeto de tipo div
El objeto nuevoElemento hereda todas las características de div, por ejemplo innerHTML, color, fontSize.
Se crea una instancia del contenedor
Para agregar los elementos al contenedor usamos appenChild
No hay comentarios.:
Publicar un comentario