¿Por qué estudiar JavaScript?

JavaScript es el lenguaje de programación de HTML y la Web.

JavaScript es un lenguaje de programación que se utiliza 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 que se activan al pulsar botones y
ventanas con mensajes de aviso al usuario.

Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que

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, como se puede ver en
http://www.sun.com/suntrademarks/.

JavaScript es uno de los 3 idiomas que todos los desarrolladores

web deben aprender:

1. HTML para definir el contenido de las páginas web

2. CSS para especificar el diseño de las páginas web

3. JavaScript para programar el comportamiento de las páginas web

Las páginas web no son el único lugar donde se usa JavaScript. Muchos programas
de escritorio y servidor usan JavaScript. Node.js es el más conocido. Algunas bases
de datos, como MongoDB y CouchDB, también usan JavaScript como su lenguaje de
programación.

Breve historia
A principios de los años 90, la mayoría de usuarios que se conectaban a Internet
lo hacían con módems a una velocidad máxima de 28.8 kbps. En esa época,
empezaban a desarrollarse las primeras aplicaciones web y por tanto, las páginas
web comenzaban a incluir formularios complejos.

Con unas aplicaciones web cada vez más complejas y una velocidad de
navegación tan lenta, surgió la necesidad de un lenguaje de programación que se
ejecutara en 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 otras tecnologías existentes
(como ScriptEase) al navegador Netscape Navigator 2.0, que iba a lanzarse en
1995. Inicialmente, Eich denominó a su lenguaje LiveScript.

Posteriormente, Netscape firmó una alianza con Sun Microsystems para el

desarrollo del nuevo lenguaje de programación. Además, justo antes del
lanzamiento Netscape decidió cambiar el nombre por el de JavaScript. La razón
del cambio de nombre fue exclusivamente por marketing, ya que Java era la
palabra de moda en el mundo informático y de Internet de la época.

La primera versión de JavaScript fue un completo éxito y Netscape Navigator 3.0

ya incorporaba la siguiente versión del lenguaje, la versión 1.1. Al mismo tiempo,
Microsoft lanzó JScript con su navegador Internet Explorer 3. JScript era una copia
de JavaScript al que le cambiaron el nombre para evitar problemas legales.

Para evitar una guerra de tecnologías, Netscape decidió que lo mejor sería
estandarizar el lenguaje JavaScript. De esta forma, en 1997 se envió la
especificación JavaScript 1.1 al organismo ECMA European Computer
Manufacturers Association).

ECMA creó el comité TC39 con el objetivo de "estandarizar de un lenguaje de

script multiplataforma e independiente de cualquier empresa". El primer estándar
que creó el comité TC39 se denominó ECMA-262, en el que se definió por primera
vez el lenguaje ECMAScript.

Por este motivo, algunos programadores prefieren la

denominación ECMAScript para referirse al lenguaje JavaScript. De hecho,
JavaScript no es más que la implementación que realizó la empresa Netscape del
estándar ECMAScript.

La organización internacional para la estandarización (ISO) adoptó el estándar

ECMA-262 a través de su comisión IEC, dando lugar al estándar ISO/IEC-16262.

Ejercicio: Por favor consulte un poco más de la historia de JavaScript y realice un

resumen a través de un mapa mental o conceptual utilizando herramientas TIC.
Incluir JavaScript en el mismo
documento XHTML
El código JavaScript se encierra entre etiquetas <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 etiqueta <head>):

Ejercicio: Por favor consulte que significa XHTML, ¿cuáles son sus bondades?

Glosario básico
En JavaScript como en otros lenguajes de programación se maneja un vocabulario
muy técnico. De acuerdo a su experiencia, describa con sus propias palabras cada
uno de los siguientes términos:

Script:

Sentencia:

Palabras reservadas:

Break:

Case:

catch:

continue:

default:

delete:

do:

else:

finally:

for:

function:

if:
in:

instanceof:

new:

return:

switch:

this:

throw:

try:

typeof:

var:

void:

while:

with:

Sintaxis
La sintaxis de un lenguaje de programación se define como el conjunto de reglas
que deben seguirse al escribir el código fuente de los programas para
considerarse como correctos para ese lenguaje de programación.

La sintaxis de JavaScript es muy similar a la de otros lenguajes de programación

como Java y C. 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. En cambio,
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
ejecución del script.
 No es necesario terminar cada sentencia con el carácter de punto y
coma (;): en la mayoría de lenguajes de programació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 sentencia 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.
JavaScript define dos tipos de comentarios: los de una sola línea y los que ocupan
varias líneas.

Ejemplo de comentario de una sola línea:

// a continuación se muestra un mensaje

alert("mensaje de prueba");

Los comentarios de una sola línea se definen añadiendo dos barras oblicuas ( //) al
principio de la línea.

Ejemplo de comentario de varias líneas:

/* Los comentarios de varias líneas son muy útiles

cuando se necesita incluir bastante información

en los comentarios */

alert("mensaje de prueba");

Los comentarios multilínea se definen encerrando el texto del comentario entre los
símbolos /* y */.

JavaScript puede cambiar el contenido

HTML
Uno de los muchos métodos HTML JavaScript es getElementById().
Este ejemplo utiliza el método para "encontrar" un elemento HTML (con id = "demo") y
cambia el contenido del elemento ( innerHTML) a "Hola JavaScript":

Ejemplo:

JavaScript puede cambiar los valores de

los atributos HTML
En este ejemplo, JavaScript cambia el valor del src atributo (fuente) de
una <img>etiqueta:

JavaScript puede cambiar los estilos

HTML (CSS)
Cambiar el estilo de un elemento HTML es una variante de cambiar un atributo HTML:
Ejemplo

JavaScript puede mostrar elementos

HTML
Mostrar elementos HTML ocultos también se puede hacer cambiando el estilo display:

Ejemplo

JavaScript a dónde?
La etiqueta <script>
En HTML, el código JavaScript debe insertarse entre la etiquetas <script>y la
etiqueta </script>
Ubicación del código de JavaScript dentro de HTML 5

1. El código puede ir en tres partes:

 Dentro de la página web, en el body después de una función entre las
etiquetas <script> </script>.
 En la cabecera de la página web, en el head entre las etiquetas <script>
</script>.
 En archivos externos utilizando la extensión .js.

Código insertado en la cabecera: el código que insertemos en esta parte

aparecerá antes de mostrar los que está dentro del body. Comentado [G1]:

Instrucción ALERT: Sirve para crear una salida en la página web (una ventana
emergente), digitamos el código, guardamos ejemplo primer codigo.html, corremos
la página.

Instrucción PROMPT: solicita una entrada por teclado, escribir igual que la
instrucción anterior, simplemente se debe cambiar la línea alert por prompt, ejemplo:
prompt (“digite su nombre”);
Funciones y eventos de JavaScript
Un JavaScript function es un bloque de código JavaScript, que se puede ejecutar
cuando se le "solicita".

Por ejemplo, se puede llamar a una función cuando ocurre un evento, como cuando
el usuario hace clic en un botón.

JavaScript en <head> o <body>

Puede colocar cualquier número de scripts en un documento HTML.
Los scripts se pueden colocar en <body>, o en la <head>sección de una página HTML,
o en ambos.

JavaScript en <head>
En este ejemplo, functionse coloca un JavaScript en la <head>sección de una página
HTML.

La función se invoca (se llama) cuando se hace clic en un botón:

JavaScript en <body>
En este ejemplo, la function se coloca en un JavaScript en la etiqueta <body> de una
página HTML.

La función se invoca (se llama) cuando se hace clic en un botón:

JavaScript externo
Los scripts también se pueden colocar en archivos externos:

Los scripts externos son prácticos cuando se usa el mismo código en

muchas páginas web diferentes.

Los archivos JavaScript tienen la extensión de archivo .js .

Para usar un script externo, coloque el nombre del archivo de script en

el srcatributo (fuente) de una <script>etiqueta:

Se guarda el archivo en la ruta donde está la página html, con extensión

“js”, para este ejemplo sería: (myScript.js)

Por otro lado, la página quedaría de la siguiente manera:

Ventajas externas de JavaScript
Colocar scripts en archivos externos tiene algunas ventajas:

 Separa HTML y código

 Hace que HTML y JavaScript sean más fáciles de leer y mantener
 Los archivos JavaScript en caché pueden acelerar las cargas de
página

Para agregar varios archivos de script a una página, use varias etiquetas de
script:
 VARIABLES

Todas las variables de JavaScript deben identificarse con nombres

únicos .

Estos nombres únicos se denominan identificadores.

Los identificadores pueden ser nombres cortos (como x e y) o nombres más

descriptivos (edad, suma, volumen total).

Las reglas generales para construir nombres para variables (identificadores

únicos) son:

 Los nombres pueden contener letras, dígitos, guiones bajos y signos

de dólar.
 Los nombres deben comenzar con una letra
 Los nombres también pueden comenzar con $ y _
 Los nombres distinguen entre mayúsculas y minúsculas (y e Y son
variables diferentes)
 Las palabras reservadas (como las palabras clave de JavaScript) no
se pueden usar como nombres

VARIABLES STRING

Algunas funciones usando variables String:

Función toUpperCase(): para cambiar a mayúsculas los valores dados en la

variable
Función toLowerCase(): para cambiar a minúsculas los valores dados en la
variable

Función charAt(0): De acuerdo a la sub_posición se muestra la letra del valor dado

en la variable Ejemplo: el valor de la variable nombre es Isabella y se está haciendo
referencia a la posición 0, es decir se mostrará la primera letra, en este caso es “I”

En el siguiente ejemplo se muestra como una variable muestra la cantidad de

caracteres del valor que tiene la variable

Como usamos dos variables, para mostrar el nombre completo:

Ahora, se quiere ver el nombre y el apellido en mayúsculas:

Acceder a un substring dentro de un string:

También podemos hacerlo de la siguiente manera:

VARIABLES CON NUMEROS

Asignemos un valor a una variable. Ejemplo:

Podemos incrementar en 1 esta variable de dos maneras:

Crear la siguiente variable:

Ahora decrementar 2 valores a una variable, se puede hacer de la siguiente manera:

Sumar o restar 2 variables:

Crear la variable “sándwich” y hacerla igual a 1

Crear la variable “JugarAlFutbol” y hacerla igual a 3

Ejercicio: Debe dar 74

Ejercicio:

USANDO DECIMALES

Crear la variable “PrecioVino” y hacerla igual a 200.3

Multiplicarla * 3 y crear la variable “Total”

Para redondear el valor total a 600.9 debemos hacer lo siguiente:

Ahora convertir el total en un texto, teniendo en cuenta que va a mostrar solo dos
decimales:
Por último, se transformará de un String a un decimal:

FUNCIONES

Una función de JavaScript es un bloque de código diseñado para realizar una

tarea en particular.

Una función de JavaScript se ejecuta cuando "algo" lo invoca (lo llama).

Sintaxis de la función de JavaScript

Una función de JavaScript se define con la functionpalabra clave, seguida de

un nombre , seguido de paréntesis () .

Los nombres de funciones pueden contener letras, dígitos, subrayados y signos de

dólar (las mismas reglas que las variables).

Los paréntesis pueden incluir nombres de parámetros separados por comas:

( parámetro1, parámetro2, ... )

El código que se ejecutará, por la función, se coloca dentro de llaves: {}

FUNCIONES PREDEFINIDAS.
EJEMPLO:

Se creará una función que imprima el nombre y la edad

Ahora vamos a ponerle parámetros a la función:

EL ALCANCE DE LAS FUNCIONES:

Crear la siguiente función donde mostraremos el nombre en mayúsculas:

Ejercicio 1: realizar un programa sencillo; utilizando una función que nos muestre
el día de hoy.

Creamos un código en html que centre un título, y que le agregue negrilla.

Dentro del head incluimos la función.

Utilizamos el objeto Date el cual contiene las funciones necesarias para manipular
fechas.
Llamamos nuevamente la función al final.
Guardar cambios, actualizar el navegador para ver los resultados:

Modificaremos la fecha para que se muestre más corta.

Método ToDateString Cambia el formato de fecha aún formato más cortó.

Guardar cambios, actualizar el navegador para ver los resultados:

Necesitamos que esta fecha aparezca más veces dentro de la página web.

Una vez dada la instrucción esta se puede llamar varias veces.

La función anterior es muy sencilla y tiene solo dos líneas de código dentro de ella,
pero hay funciones que tienen varias líneas dentro de ella.
Ejercicio 2: realizar un programa que escriba nuestro nombre, utilizando
funciones, parámetros.

Guardar cambios, actualizar el navegador para ver los resultados:

Solicitar el nombre por medio de prompt, a cualquier usuario.

Guardar cambios, actualizar el navegador para ver los resultados:

Guardar cambios, actualizar el navegador para ver los resultados:

La función se puede llamar varias veces.

Ejercicio 3: realizar una calculadora utilizando funciones y parámetros.
Guardar cambios, actualizar el navegador para ver los resultados, revisar todas las
operaciones.
Por último, como reto crear un programa donde aplique como mínimo 5 funciones.
Sustentarlo a su instructora