PROGRAMACIÓN FRONT END

UNIDAD Nº II
Utilizando JQuery

www.iplacex.cl
SEMANA 3

Introducción
Hoy muchas personas utilizan Internet como una fuente de información para sus
necesidades. Por lo mismo, existen personas que trabajan desarrollando contenido,
aplicaciones y sitios web que permiten satisfacer los requerimientos de los usuarios.

Para construir páginas web, se requiere de un análisis y planificación que permitan que
la interacción con el contenido de un sitio sea lo más amigable y usable posible. Para
lograr una experiencia de usuario satisfactoria se deben conocer herramientas que nos
permitan programar un sitio en un lenguaje que el computador sepa interpretar.

¡Es ahí donde JavaScript entra en juego!

JavaScript, conocido como JS, es un lenguaje con una gran cantidad de adeptos y con
una gran comunidad de usuarios que lo respalda. Es conocido como el “lenguaje de
internet” y sin dudas, desde su creación en 1995, se ha posicionado como tal. Es
utilizado en una gran cantidad de proyectos por eso su importancia de manejar esta
herramienta clave en la construcción de un sitio web.

En esta semana, se dará a conocer la sintaxis del lenguaje, con el fin de construir
programas que cumplan con los requerimientos solicitados.

2 www.iplacex.cl
 Ideas Fuerza
1. Conceptos fundamentales de JavaScript: Se comenzará a conocer
las bases de este lenguaje de programación y sus características
fundamentales.

2. Funcionamiento de JavaScript: Se verá cómo insertar y utilizar

JavaScript en documentos HTML en una arquitectura cliente
servidor.

3. Sintaxis y estructuras de JavaScript: Se aprenderá a construir

correctamente una aplicación en JavaScript a través del uso de las
reglas de forma y estilo y sus principales componentes sintácticos.

3 www.iplacex.cl
 Desarrollo
1. ¿Qué es JavaScript?

Es un lenguaje de programación, que junto HTML y CSS conforman una de las tres
tecnologías principales utilizadas en las páginas web.

Es un lenguaje interpretado, es decir, es “transformado” a un lenguaje que asimile el

computador en tiempo real, no se compila antes. Las instrucciones en los archivos
JavaScript son cargadas y procesadas por un navegador web para así transformar
aquellas instrucciones en algo que el computador sea capaz de entender y ejecutar.

Su principal diferencia con HTML y CSS es que los anteriores corresponden a una
forma de estructurar contenido: no podemos indicarle al computador que hacer solo
con estos lenguajes. JavaScript, en cambio, es un lenguaje lo suficientemente completo
para decirle a nuestro computador qué hacer y poder así desarrollar en la web.

Sus características principales son:

. Es un lenguaje interpretado: Las instrucciones escritas en JavaScript son procesadas

por un motor interno de un navegador web para traducirlas a una instrucción que sea
capaz de interpretar el computador.

Es orientado a prototipos: La programación orientada a prototipos, es un tipo de

programación orientada a objetos. Los lenguajes de programación clásicos orientados
a objetos, están basados en clases, las cuales sirven como plantillas para crear
objetos. Se pueden crear múltiples instancias de un objeto a partir de una clase, los
cuales poseen atributos y acciones basados en las especificaciones de la clase en la
que están basados. En la programación orientada a prototipos, se cuenta con objetos
que poseen atributos y acciones. La creación de nuevos objetos se basa en la creación
de uno nuevo a partir de uno ya existente, donde el objeto nuevo hereda los atributos y
acciones de su objeto padre.

. Es multiplataforma: Se puede utilizar en cualquier plataforma.

. Es un lenguaje de tipado débil: En un lenguaje de tipado débil, como JavaScript, una

variable puede contener un tipo de información en un punto del programa, y en otro
punto, un tipo de información totalmente distinta. No se declaran las variables, sólo se
le asigna un valor y asume el tipo de dato asignado.

4 www.iplacex.cl
JavaScript forma parte de las 3 tecnologías que conforman la Web. Revisemos
brevemente cada una a continuación:

. HTML corresponde a la capa de contenido, en donde se define la información que

queremos mostrar. Por ejemplo, textos, imágenes o videos.

. CSS corresponde a la capa de presentación. En esta capa se define el estilo y la

apariencia de la información. Algunos ejemplos pueden ser los tipos de fuente para los
títulos, aplicar colores a los párrafos o al fondo.

. JavaScript es la capa de interacción, donde se indican las acciones ante un cierto

evento gatillado en la web. Por ejemplo, mostrar información al presionar un botón,
permitir arrastrar una imagen de lugar o mostrar/ocultar información después de
posicionar el mouse sobre un elemento.

¿Cómo insertar y utilizar JavaScript en documentos HTML?

Cuando un archivo HTML se carga, se resuelven todas sus dependencias, tales como
imágenes, videos u otros archivos. Es posible encontrar JavaScript de tres formas en
los documentos HTML:

1) Dentro de elementos HTML:

Esta forma no es la más óptima, pero es posible agregar JavaScript dentro de un

atributo de etiqueta HTML.

Al hacer click en el botón, se envía el siguiente mensaje:

5 www.iplacex.cl
2) Embebido en una etiqueta <script> en el HTML:

Es posible añadir JavaScript en los documentos HTML mediante la utilización de la

etiqueta ˂script˃˂/script˃. Todo el contenido presente entre estas etiquetas será
evaluado por el motor de JavaScript. Esta forma de utilización es poco escalable y
mantenible en el tiempo, por lo que no es la más recomendada.

Al ejecutar, envía el siguiente mensaje:

3) En un archivo externo:

Se puede indicar que se cargue uno o varios archivos externos que contengan
JavaScript. Para utilizar esta forma se debe utilizar la etiqueta ˂script˃, pero
agregando un atributo src que contenga el nombre del archivo JS y su extensión,
ejemplo: ˂script src=”script.js”˃˂/script˃

6 www.iplacex.cl
 El archivo script.js contiene:

Al ejecutar, envía el siguiente mensaje:

Siempre se debe agregar JavaScript al final de nuestro documento, dentro de la

etiqueta ˂body˃˂/body˃. Esto es una buena práctica, ya que la carga de JavaScript no
bloquea la carga del contenido declarado en el documento HTML.

2. ¿Cómo desarrollar en JavaScript?

Para poder escribir programas en JavaScript necesitaremos al menos dos

componentes fundamentales: un editor de código y un navegador web. Normalmente,
los computadores siempre vienen con un navegador incluido, sin embargo, los editores
de código no son programas que se encuentran instalados por defecto.

Actualmente, existen muchos editores de código como Sublime Text, Atom, Visual
Studio Code, Brackets, entre otros. Se puede elegir el que más se acomode a las
necesidades, ya que todos los editores generarán archivos .js. Lo ideal es elegir un
editor que ofrezcan características que faciliten la escritura de los programas, como el
autocompletado.

7 www.iplacex.cl
3.El navegador

Usar la consola del navegador, es un procedimiento útil cuando nos encontramos

desarrollando en JavaScript. Permite la ejecución de expresiones en JavaScript de
forma rápida y sencilla. Cuando se ingresa una instrucción a la consola de un
navegador, es posible visualizar el resultado inmediatamente. De esta manera,
podemos inspeccionar en tiempo real, qué es lo que está ocurriendo con el código y si
obtenemos un error, se mostrará un feedback inmediato.

Las herramientas de desarrollo están presentes en todos los navegadores web

modernos (Chrome, Firefox, Safari). Podemos acceder a una serie de opciones que
nos permiten depurar código de forma integrada.

En Google Chrome cada una de esas opciones está separada en distintos paneles:

• “Elements”: que nos permite inspeccionar el DOM (Document Object Model)

• “Sources”: para acceder a los archivos fuentes CSS y JS asociados
• “Performance”: para la visualización de recursos utilizados por la página actual
• “Network” para la visualización de recursos de red, entre otros. En esta sección,
encontraremos una pestaña u opción llamada “Console” que corresponde a la
“Consola de JavaScript del Navegador”. En este lugar podremos ejecutar código
JavaScript en nuestra página actual.

8 www.iplacex.cl
 4. Sintaxis y estructura de JavaScript

Al igual que cualquier lenguaje en el mundo, un lenguaje de programación posee una

estructura gramatical que debe respetarse. Existen reglas del lenguaje que le otorgan
su validez y entendimiento, así como otro conjunto de reglas de estilo.

La gran mayoría de las veces las reglas gramaticales son estrictas, ya que el
computador hará solo lo que se instruya, no es capaz de inferir instrucciones como lo
hace el ser humano.

Un programa de computador, corresponde a una lista de instrucciones agrupadas que

le indican a nuestro computador las tareas debe realizar.

Las reglas de formato y combinaciones de palabras válidas determinan la sintaxis de

un lenguaje de programación. JavaScript posee una sintaxis sencilla a la que es fácil
adaptarse.

Al conjunto de palabras, operadores y números agrupados para realizar cierta tarea se

le conoce con el nombre de declaración. Un conjunto de declaraciones es lo que
determinará el código fuente de nuestro programa JavaScript. Normalmente las
declaraciones se diferencian unas de otras separadas con el carácter punto y coma (;)

var edad = 10;

Componentes sintácticos en JavaScript

Las declaraciones en JavaScript están compuestas por los siguientes componentes:

• Operadores: Corresponden a uno o más símbolos que permiten realizar una

operación matemática, lógica o de asignación dentro del programa. En el
ejemplo anterior, se utilizó el operador (=), que permite realizar la asignación de
un valor a un contenedor de información o variable.
• Expresiones: Las expresiones en JavaScript corresponden a cualquier referencia
escrita de una variable o valor combinada con un operador. En el ejemplo
anterior, las palabras var edad = 10; corresponden a una expresión en sí misma.
• Valores: Los valores corresponden a información almacenada en las variables.
• JavaScript es un lenguaje que permite a una variable contener distintos tipos de
información durante la ejecución de un programa. Esto es un término en
informática conocido como lenguaje de tipado débil.

9 www.iplacex.cl
• Comentarios: Los comentarios corresponden a mensajes dejados en el código
fuente de nuestro programa sin sentido semántico para el motor de JavaScript,
pero con mucho significado para los programadores o personas que leen el
código. Permiten a otras personas saber lo que está ocurriendo en ciertos
puntos de ejecución del programa, por lo mismo son muy útiles.

Existen dos tipos de comentarios en Javascript: los comentarios de una línea y

los comentarios de varias líneas.

Los comentarios de una línea se inician con los caracteres //. Todo lo escrito
posteriormente en la misma línea pasará a ser parte de comentario de código.

Los comentarios multilínea se inician con los caracteres /* y terminan con los
caracteres */. Todo lo escrito entre los caracteres iniciales y finales pasará a
formar parte del comentario.

// Esto es un comentario de una línea.

/*
* Esto es un comentario de múltiples líneas.
*/

• Palabras reservadas: Las palabras reservadas corresponden a una serie de

palabras que cumplen una función determinada en JavaScript. A continuación se
adjunta una lista con algunas de las palabras reservadas en JavaScript:

break for case

if boolean for
float try yield
in while throw
null let false
true private int
implement class default

10 www.iplacex.cl
 5. Conceptos fundamentales de JavaScript

Variables

A lo largo de la ejecución de nuestro programa es necesario almacenar información

que le permita al código tomar una decisión respecto a la ejecución de las instrucciones
presentes en él. Ese componente corresponde a las variables.

Las variables son contenedores identificables que almacenan información en memoria

durante la ejecución de nuestros programas. Poseen un nombre, lo que les permite
diferenciarse unas de otras. Adquieren su nombre ya que el valor que contienen puede
variar a lo largo de la ejecución del programa.

Al trabajar con variables podemos diferenciar dos procesos:

• Declaración de una variable: Este proceso permite la creación de una nueva

variable en nuestro programa. Para declarar una variable y así utilizarla
posteriormente, se debe usar la palabra reservada var, seguida del nombre de la
variable a declarar. Al declarar una variable podemos decidir si asignarle un
valor inicial o no. En el caso de no asignarle un valor, por defecto el valor de la
nueva variable será undefined.
• Invocación de una variable: Este proceso permite llamar a una variable para así
utilizarla en una expresión.

Declaración
Invocación

11 www.iplacex.cl
JavaScript posee una serie de reglas para el nombre de las variables:

• El nombre de las variables puede contener letras de la a - z, mayúsculas o

minúsculas.
• El nombre de las variables puede contener números del 0 - 9.
• El nombre de las variables no puede contener espacios.
• El nombre de las variables es sensible a mayúsculas y minúsculas, es decir: la
variable edad es distinta a eDad.
• El nombre de las variables puede empezar con los caracteres $ o _, pero nunca
otros.
• El nombre de una variable no puede comenzar con un número.

Ejemplo:

Nombres válidos de Nombre inválidos de

Explicación de invalidez
variables variables
edadPaciente 1cajaPrincipal Contiene número al principio.
ApellidoMaterno apellidoMaterno y paterno Contiene espacios entre palabras.
Contiene un símbolo no permitido al inicio del nombre de la
$miContenedor ~CantidadPersonas
variable.
Contiene un símbolo no permitido al final del nombre de la
_MiCarroCompras MICONTENEDOR!
variable.
Contiene un símbolo no permitido al final del nombre de la
EDAD temperaturaCº
variable.

Tipos de Datos

Tipo de Dato Navegador

null Tipo de dato que indica ausencia de información.
undefined Tipo de dato que se obtiene al declarar una variable y no asignarle un valor inicial.
boolean Tipo de dato que puede representar únicamente dos valores posibles: true o false.
Tipo de dato utilizado para representar números. JavaScript permite la utilización de números enteros positivos o negativos
number
(ej: 12, 0, -456) y números decimales positivos o negativos (ej: 3.12, -0.1).
Tipo de datos utilizado para representar cadenas de texto. Para utilizarlo se debe escribir la palabra o letras entre comillas
string
simples ('') o comillas dobles ("").
Tipo de datos para representar información compleja. Un objeto puede poseer propiedades y métodos. Se declara utilizando
object
llaves { }.
symbol Tipo de dato cuyo valor es único e inmutable.

12 www.iplacex.cl
Ejemplo:

Operadores

Nos permiten realizar operaciones dentro del lenguaje. Las operaciones a realizar
corresponden a:

• Asignación: Cuando a una variable asignamos un valor. Ej: var color = 'Azul';
• Aritméticas: Cuando deseamos realizar una operación matemática sobre dos
valores. Ej: 10 * 2;
• Lógicas: Cuando se requiere realizar una comparación entre dos valores. Las
comparaciones entre dos valores en JavaScript entregará un valor booleano
(true o false) como resultado.

13 www.iplacex.cl
A continuación una serie de operadores disponibles en JavaScript:

= Asignación
+ Suma
- Resta
* Multiplicación
/ División
% Módulo
> Mayor a
< Menor a
>= Mayor o igual a
<= Menor o igual a
== Igual a
!= Distinto a
&& Y..
|| O..
++ Incremento
-- Decremento

Condicionales

Los condicionales, permiten modificar la ejecución de un programa basado en la toma

de una decisión lógica, utilizando valores presentes en sus variables o como resultado
de una operación. Podríamos decir, que un condicional representa a la elección que
realiza un viajero, donde llegado a un cruce, debe determinar si ir a la izquierda o
derecha basado en una decisión.

En JavaScript tenemos disponibles dos tipos de condicionales:

• if... else: Este tipo de condicional permite la evaluación de una o múltiples

condiciones booleanas, es decir, condiciones que retornen true (verdadero) o
false (falso). Si la condición se cumple, permite la ejecución de un bloque de
código.

La siguiente imagen muestra cómo funciona if:

condición

14 www.iplacex.cl
 o Dentro de los paréntesis de if, se debe cumplir una condición booleana (true
o false).
o Se evalúan (normalmente dos valores) con un operador. Puede darse el caso
que se utilice la evaluación de un solo valor, o múltiples valores, utilizando los
operadores && ó || (y o respectivamente).
o Se ejecutará el código presente en el bloque de código declarado al lado de if
solo si el resultado de la condición lógica es true (verdadera).
o El bloque de else se ejecuta si la condición no se cumple.

• switch: El condicional switch se utiliza cuando se requiere evaluar múltiples

valores posibles para una variable. Se declaran “casos posibles” para el valor de
esa variable utilizando las palabras case y break. Es posible declarar un caso
por defecto utilizando la palabra default.

La siguiente imagen muestra cómo funciona switch:

o Se somete a evaluación el valor de una variable entre los paréntesis.

o Se define un bloque de código en donde se someten a evaluación los casos.
Cada bloque de código correspondiente a un caso empieza con la palabra
case: y termina con la palabra break;. Se evaluarán todos los casos hasta
encontrar uno que cumpla la condición. Si no se cumple ninguna condición
declarada en los casos, se ejecutará el caso default si está presente.

15 www.iplacex.cl
Bucles

Los bucles permiten la ejecución de bloques de código en forma repetitiva. Están

presentes en la mayoría de los lenguajes de programación y JavaScript no es la
excepción. Permiten optimizar nuestros programas para repetir tareas una y otra vez
dada una condición de inicio y una condición de fin.

Los bucles disponibles son los siguientes:

• for: Utilizado para cuando se desea iterar N cantidad de veces, en base a un

contador definido localmente. Este bucle se ejecutará hasta que la evaluación de
una condición sea falsa. Para utilizar este bucle, se debe escribir la palabra for,
seguido de paréntesis y un bloque de código. Las partes son las siguientes:

o Se define una variable contadora con una valor numérico inicial.

o Se evaluará una condición establecida por el usuario. Para el ejemplo
“cuando la variable contadora sea inferior a 10. Si se cumple la condición,
se ejecutará el bloque de código que está entre llaves {}.
o Al terminar la ejecución del código se aplicará un incremento o
decremento a la variable contadora.
o Si la condición se cumple, la ejecución del bucle vuelve a repetirse. Si la
condición no se cumple, la ejecución del bucle termina.

• while: Utilizado para ejecutar un bloque de código siempre y cuando la condición

a evaluar sea verdadera (true). Cuando la condición cambia a falsa, el bucle
detiene su ejecución. Para utilizar este bucle, se debe escribir la palabra while,
seguido de paréntesis y un bloque de código. Las partes son las siguientes:

o Se define una evaluación de condición entre los paréntesis de while.

o Se ejecutará el bloque de código siempre y cuando la condición evaluada
sea verdadera. Si la condición no es verdadera, el bucle detiene su
ejecución.

16 www.iplacex.cl
 • do...while: Este bucle es idéntico a while. La diferencia radica en que el bloque
de código se ejecuta antes de la evaluación de la condición del bucle. Para
utilizar este bucle, se debe escribir la palabra do, seguido de un bloque de
código y paréntesis. Las partes son las siguientes:

o Se ejecutará un bloque de código, ya que la condición se evalúa al final.

o Se realizará una evaluación booleana de una condición. Si el resultado de
la evaluación es verdadero (true), el bucle volverá a ejecutarse. Si el
resultado de la evaluación es falso (false), el bucle detendrá su ejecución.

Funciones

Las funciones en JavaScript corresponden a una forma de modularizar código que

deseamos reutilizar a futuro. Corresponden a bloques de código con un nombre, el cual
es invocado tantas veces como queramos.

Una función está compuesta por una serie de declaraciones en un bloque de código,
conocido como cuerpo de la función.

En Javascript, la información de entrada de una función es llamada argumento. Los

argumentos son opcionales: una función puede contar con muchos, separados por el
carácter coma (,), o ningún argumento. La función puede devolver un resultado de
forma opcional.

Las funciones tienen dos formas de uso en JavaScript:

• Declaración: Cuando escribimos el código que compone la función.

• Invocación: Cuando se llama la función para así ejecutar el bloque de código. La
invocación se realiza llamando el nombre de la función, seguido por paréntesis
().

17 www.iplacex.cl
Las partes son:

o Nombre de la función: El nombre de la función corresponde al nombre con

el cual se identifica la función en nuestro programa.
o Parámetros (opcionales): Los parámetros corresponden a variables de
entrada, las cuales pueden ser utilizadas dentro del cuerpo de la función.
Su presencia es opcional en la definición de una función.
o Cuerpo de la función: Corresponde al código que ejecutará la función
cuando es invocada.
o Retorno (opcional): Corresponde al resultado que arrojará la ejecución de
la función. Una función puede (o no) devolver información.

Ejemplo:

En HTML se invoca a la función:

<script type="text/javascript" src="script.js"></script>

En script.js, se declara la función:

function validarFormulario(){

event.preventDefault(); //evita que se recargue la página

var val1 = parseFloat(document.getElementById('valor1').value);

var val2 = parseFloat(document.getElementById('valor2').value);

suma = val1 + val2;

resta = val1 - val2;

multi = val1 * val2;

divi = val1 / val2;

document.getElementById("resultado").innerHTML = "suma:"+suma+" resta:"+resta+" multiplicación:"+multi+" división:"+divi;

};

18 www.iplacex.cl
 Conclusión
En esta semana, se revisaron los conceptos fundamentales de JavaScript, su sintaxis y
estructuras, las cuales permitirán darle dinamismo a las páginas html. Es un lenguaje de
programación que se utiliza en una gran cantidad de proyectos, por eso su importancia de
manejar esta herramienta es fundamental en la construcción de un sitio web.

A través JavaScript, se quiere poder cumplir los requerimientos solicitados por el cliente,
utilizando buenas prácticas en la programación y utilizando los recursos de la forma más óptima
posible.

En este proceso, se revisaron conceptos relevantes como variables, tipos de datos, operadores,
estructuras condicionales y de repetición, que son la base de la construcción de código. El
alumno debe ser prolijo y ordenado al momento de programar para cumplir con los
requerimientos solicitados.

19 www.iplacex.cl
 Bibliografía
Manual programación web en el entorno cliente | Ribes Alba, Purificación | E-LIBRO
Desarrollo web en entorno cliente | Vara Mesa, Juan Manuel; López Sanz, Marcos | E-LIBRO

http://www.desarrolloweb.com/
https://developer.mozilla.org/docs/Web/JavaScript
https://es.wikipedia.org/wiki/JavaScript

HTML5, CSS3 Y Javascript. Meloni, Julie C. Madrid: Anaya multimedia, 2012. 655 p.

20 www.iplacex.cl
21 www.iplacex.cl