Sesión 6

Agenda 

• ¿Qué es JavaScript?
• Historia
• Glosario básico
• Sintaxis
• Posibilidades y limitaciones
• Introducción
• Variables 
• Tipos de datos
• Condicionales
• Ciclo For
• Ciclo While
• Funciones
• Scope de JavaScript
• Métodos y propiedades para las cadenas de texto
• Introducción al DOM(Document object model)
• Bibliografía

¿Qué es JavaScript?

Es un lenguaje de programación que se utiliza principalmente para crear páginas web dinámicas.

Para entrar en contexto una página dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de avisos al usuario.

Se puede decir que JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlo. 

Historia

A principios de los años 90, la mayoría de usuarios que se conectaban a Internet lo hacían con modems a una velocidad máxima de 28.8 kbps. En ese tiempo se empezaban a desarrollar las primeras aplicaciones web y por tanto, las páginas web comenzaban a incluir formularios complejos.

Estas aplicaciones web cada vez más complejas y con una velocidad de navegación tan lenta, surgíó la necesidad de un lenguaje de programación que se ejecutará con el navegador del usuario. De esta forma, si el usuario no rellenaba correctamente un formulario, no se le hacía esperar mucho tiempo hasta que el servidor volviera a mostrar el formulario indicando los errores existentes.

Brendan Eich, un programador que trabajaba en Netscape, pensó que podría solucionar este problema

adaptando las tecnologías de ese momento, surgiendo así lo que se conoce como LiveScript.

Posteriormente, Netscape le cambio el nombre a JavaScript. La razón de cambio fue exclusivamente por marketing, ya que Java estaba de moda en el mundo informático en esa época.

Glosario básico

Script:

cada uno de los programas, aplicaciones o trozos de código creados con el lenguaje JavaScript. Unas pocas líneas de código forman un script y un archivo de miles de líneas de código JavaScript también se considera un script.

Sentencia:

Cada una de las instrucciones que forman un script.

Palabras reservadas:

Son las palabras que se utilizan para construir las sentencias de JavaScript y que por lo tanto no pueden ser utilizadas libremente. Las palabras actualmente reservadas por este lenguaje son:
break, case, catch, continue, default, delete, do ,else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeof, var, void, while y with.

Sintaxis

Las normas básicas que definen la sintaxis de JavaScript son las siguientes:

No se tienen en cuenta los espacios en blanco y las nuevas líneas

Como sucede con XHTML, el intérprete de JavaScript ignora cualquier espacio en blanco sobrante, por lo que el código se puede ordenar de forma adecuada para entenderlo mejor (tabulando las líneas, añadiendo espacios, creando nuevas líneas,etc.)

Se distinguen las mayúsculas y minúsculas

Al igual que sucede con la sintaxis de las etiquetas y elementos XHTML. Sin embargo, si en una página XHTML se utilizan indistintamente mayúsculas y minúsculas, la página se visualiza correctamente, siendo el único problema la no validación de la página. Por otro lado, si en JavaScript se intercambian mayúsculas y minúsculas el script no funciona.

No se define el tipo de las variables

Al crear una variable, no es necesario indicar el tipo de dato que almacenará. De esta forma, una misma variable puede almacenar diferentes tipos de datos durante la ejecucución del script.

No es necesario terminar cada sentencia con el carácter de punto y coma

En la mayoría de los lenguajes de progamación, es obligatorio terminar cada sentencia con el carácter (;). Aunque JavaScript no obliga a hacerlo, es conveniente seguir la tradición de terminar cada sentancia con el carácter del punto y coma.

Se pueden incluir comentarios

Los comentarios se utilizan para añadir información en el código fuente del programa. Aunque el contenido de los comentarios no se visualiza por pantalla, si que se envía al navegador del usuario junto con el resto del script, por lo que es necesario extremar las precauciones sobre la información incluida en los comentarios.

Posibilidades y limitaciones 

Desde su aparición, este lenguaje siempre fue utilizado de forma masiva por la mayoría de sitios de internet. La aparición de Flash disminuyó su popularidad, ya que Flash permitía realizar algunas acciones imposibles de llevar cabo en JavaScript. No obstante, la aparición de las aplicaciones AJAX programadas con JavaScript le ha devuelto una popularidad sin igual dentro de los lenguajes de programación web.

En cuanto a las limitaciones, JavaScript fue diseñado de forma que se ejecutara en un entorno muy limitado que permitiera a los usuarios confiar en la ejecución de los scripts.

De esta forma, los scripts de JavaScript no pueden comunicarse con recursos que no pertenezcan al mismo dominio desde el que se descargó el script. Además estos tampoco pueden cerrar ventanas que no hayan abierto esos mismos scripts. Las ventanas, que se crean no pueden ser demasiado pequeñas ni demasiado grandes ni colocarse fuera de la vista del usuario(los detalles concretos dependen de cada navegador).

También los scripts no pueden acceder a los archivos del ordenador del usuario y tampoco pueden leer o modificar las preferencias del navegador.

A pesar de todo, existen alternativas para poder saltarse algunas de las limitaciones anteriores. La alternativa más usada y conocida consiste en firmar digitalmente el script y solicitar al usuario el permiso para realizar esas acciones.

 Introducción

Para empezar a trabajar se recomienda usar un editor de texto de preferencia. Luego para al tener nuestro archivo HTML creado, procedemos a importar nuestro archivo de JavaScript, el se recomienda colocarlo al final antes del body, como se muestra a continuación:

Variables 

En JavaScript las variables se representan de la siguiente manera:

ejemplo:

var x = 5;
var y = 6;
var z = x + y;

Como podemos observar en el ejemplo anterior se usa la palabra "var" antes del nombre de la variable no obstante podemos omitir esta palabra y de igual forma nuestra variable funciona, sin embargo no se recomienda omitirla ya que tendríamos variables globales y nos podría generar problemas con el scope.

Algunos elementos adicionales:

 alert(""): El cual nos ayuda a mostrar mensajes en la página en forma de alerta.

prompt(text, value):  Nos permite almacenar un texto y un valor en forma de input desde el teclado.El value es opcional solo sirve para colocar dentro de la entrada un texto por defecto.

document.write(var): Similar al alert pero muestra directamente el mensaje en la página.

console.log(var): Muestra mensajes como un alert y un document.write pero en la consola del inspector de elementos del navegador.


Comentarios: JavaScript usa para comentar una línea de código  "//" y para bloques
                        de código "/*     */".

Tipos de datos

Ejemplos

                     

Condicionales

Ejemplo del uso de condicionales if y else.

Una variante agregando el operador lógico && que es el y lógico. También tenemos el || para el o lógico. Ejemplos:

Ejemplo donde se usa el else if:

Ciclo FOR

Estructura que nos permite repetir nuestro código o estructura n veces. A continuación se muestra un ejemplo del uso de esta estructura en la que se imprimen en pantalla los días de la semana, esto mediante el ciclo for que recorre el arreglo de días del inicio.

Ciclo WHILE

Similar al anterior pero usado dependiendo del problema a resolver, se diferencia porque usualmente usa serie de condicionales dentro de su estructura. Adicionalmente tenemos el "do" el cual funciona para ejecutar un ciclo al menos una vez.Siguiendo el ejemplo anterior tenemos de mostrar en pantalla los días de la semana tenemos.

Funciones

Son fragmentos de código que podemos reutilizar cuantas veces se quiera, para darle un enfoque más dinámico a los programas desarrollados. Como ejemplo tenemos una función que resibe como entrada dos números y retorna el mayor de estos.

Scope de JavaScript

Determina la accesibilidad del código(variables) se calsifican en globales y locales.

Global: Podemos acceder a ellas desde cualquier parte del código.

Local: Varriables creadas dentro de una función, solo pueden ser accedidas desde su función o una función anidada.

Métodos  y propiedades para cadenas de texto

length:

Retorna la longitud de una cadena de texto(string).

indexOf():

Retorna el índice de (la posición de ) la primera aparición de un texto especificado en una cadena.

lastIndexOf():

Devuelve el índice de la última aparición de un texto especificado en una cadena.

search():

Busca una cadena para un valor específico y retorna la posición de la coincidencia.

slice():

Extrae una parte de una cadena y retorna la parte extraída en una nueva cadena. El método toma 2 parámetros: la posición inicial y la posición final(final no incluido).En este caso mostrando un ejemplo donde se corta una parte de un string desde la posición 7 a la posición 12 (13-1).

El resultado sería : Banana

substring():

Similar al slice(), la diferencia es que la sub cadena no puede aceptar índices negativos.

substr():

Similar al slice(), la diferencia es que el segundo parámetro especifica la longitud de la parte extraída.

replace():

Reemplaza un valor especificado con otro valor en una cadena. Ejemplo:

toUpperCase():

Una cadena de texto se convierte a mayúsculas con toUpperCase().

toLowerCase():

Una cadena de texto se convierte a minúsculas con toLowerCase().

concat():

Une dos o más cadenas, se puede usar como sustituto del operador más para el caso de strings.

string.trim():

Elimina los espacios en blanco de ambos lados de una cadena.

charAt():

Retorna el carácter en un índice (posición) específico de un string.

charCodeAt():

Devuelve el código Unicode del carácter en un índice especificado en una cadena:

split():

Converter un string en una mariz. Ejemplo:

DOM(Document Object Model)

Nos permite acceder y poder manipular los elementos de nuestro sitio web. El DOM es la estructura del sitio web conforma por elementos llamadas nodos. Consta de dos elementos primarios el head y el body.
Su objetivo es poder acceder a los elementos con JavaScript y poder obtener valores y trabajar con ellos. Para entender mejor el concepto consultar el siguiente video:  Introducción al DOM

Bibliografía

Libro JavaScript

Documentación JavaScript

Curso Básico JavaScript