Scribd
Cargar
13 vistas

Capitulo 4 Fundamentos de JavaScript

Cargado por

johe67
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
13 vistas

Capitulo 4 Fundamentos de JavaScript

Cargado por

johe67
Derechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 27

Fundamentos de Programación Web

Capitulo 4

4. Fundamentos de JavaScript
4.1. Temática a desarrollar
• Variables
• Condicionales
• Ciclos
• Arreglos

4.2. Introducción
En la programación web, se utiliza JavaScript como un lenguaje de
programación similar a otros de la especie, como PHP; claro está, con
varias diferencias importantes. Este lenguaje se utiliza principalmente
del lado del cliente, es decir, se ejecuta en nuestro computador, no en
el servidor, permitiendo crear efectos atractivos y dinámicos en las
páginas web.

En este capítulo se abordarán los siguientes temas:


• JavaScript como un lenguaje de programación orientado al
desarrollo de software del lado del cliente, el cual se integra con
HTML5.
• JavaScript requiere para el almacenamiento de datos en
memoria, el manejo de variables.
• Para efectos de realizar comparaciones, evaluar datos, repetir
sentencias; se hace uso de las estructuras de control.
• Las funciones son partes del código que realizan tareas
específicas y pueden ser invocadas las veces que sea necesario,
en lugar de digitar esas mismas sentencias en diferentes partes
del programa.

106
Fundamentos de Programación Web

JavaScript permite la construcción de programas conformados por


funciones, dentro de las cuales se desarrolla la lógica de actividades
específicas, utilizando las sentencias condicionales para evaluar o
comparar expresiones y variables, por medio del uso de sentencias de
control para la ejecución y verificación de condiciones, ya sean de una
sola pasada o dentro de un determinado número de veces, mientras se
cumple con la condición específica, según sea el caso.

Dado que JavaScript dispone de fuertes capacidades de


programación orientada a objetos, en este capítulo también se abordará
el fundamento de este paradigma de la programación como lenguaje
interpretado basado en objetos, ya que no posee clases donde los
scripts manipulen los objetos propios del lenguaje, como: Math, String,
Date, Los Arrays, entre otros; y los que le proporciona el navegador.
Otros elementos a tener en cuenta, son los eventos que suceden
cuando el usuario pasa el mouse por una imagen, o al hacer clic en un
botón, dichos eventos son los que sirven para que se ejecuten las
instrucciones de JavaScript de una página o un programa.

Javascript no tiene todas las características de los lenguajes


orientados a objetos como Java o C++, pero si está en capacidad de
manejar objetos e inclusive crearlos.

Javascript tiene algunas clases predefinidas u objetos intrínsecos,


como son: Array, Boolean, Date, Function, Global, Math, Number,
Object, RegExp y String.

En ambientes de desarrollo, se pueden crear objetos nuevos con


métodos y propiedades adaptados a las necesidades concretas de la
aplicación a desarrollar. La figura -7- detalla, mediante un mapa mental,
este concepto de JavaScript. La figura -7- amplía varios conceptos
inherentes a este lenguaje de programación para la web.

107
Fundamentos de Programación Web

Ilustración 7: JavaScript.

4.3. Fundamentos de JavaScript


JavaScript es un lenguaje interpretado, basado en objetos que
permite incluir macros en páginas web. Estas macros se ejecutan en el
computador, en páginas web del cliente, y no en el servidor (algo muy
interesante, porque los servidores web están sobrecargados con el
procesamiento propio de la aplicación, mientras que los computadores
de los usuarios no suelen estarlo, pues solo realizan las peticiones y
esperan las respuestas del lado del servidor).

4.4. Ingreso de códio JavaScript en las páginas web


Para añadir un código JavaScript en una página HTML5, debe
incluirse el código entre las etiquetas <head> y </head> de la página,
que es la forma correcta de registrar la funcionalidad, aunque también
puede ir en el cuerpo de la misma.

El tag para adelantar esta labor es:

108
Fundamentos de Programación Web

4.5. Comentarios en JavaScript


Los comentarios se utilizan en los lenguajes de programación para
realizar explicaciones del código, para que una o varias líneas no sean
tenidas en cuenta cuando el intérprete de comandos las encuentre. En
JavaScript los comentarios pueden ser:
• Comentario de una línea //
• Comentario de varias líneas, se usan los caracteres /* (inicio de
comentario) y */ (fin de comentario):

Los bloques de código que integran una unidad, están encerrados


entre las llaves (y) (por ejemplo, el código de una función, las sentencias
incluidas dentro de un condicional o ciclo). Por otra parte, JavaScript
hace diferencia entre mayúsculas y minúsculas para los nombres de
variables y funciones.

4.6. Variables
Por la naturaleza de JavaScript, las variables permiten almacenar
información en memoria y pueden pasar de contener un tipo de dato
a otro tipo sin necesidad de estar definiendo el cambio o haciendo la
conversión.

JavaScript cuenta con siete tipos de datos que son:

• Números: Corresponde a valores numéricos, con o sin


fracción decimal, ya sean positivos o negativos.

Ejemplos:

• Cadenas de caracteres: Se encuentran delimitados por


comillas simples o dobles. Además, pueden incluir caracteres
especiales como:
• \' (comilla)
• \" (comilla doble)
109
Fundamentos de Programación Web

• \n Nueva línea
• \t Tabulador
• \r Retorno de carro
• \f Alimentación de formulario
• \b Retroceso de un espacio

Ejemplo:

Las cadenas de texto en JavaScript pueden ir entre comillas dobles


o simples; lo único a tener en cuenta, es utilizar el mismo tipo de
comillas en la apertura y cierre de la cadena de texto.

Adicionalmente a esto, se debe tener en cuenta el uso de las tildes y


los caracteres especiales, pues por defecto, trabaja con el juego de
caracteres en inglés.

• Booleanos: Permiten solo el manejo de dos valores: verdadero


(true) y falso (false). Se digitan sin comillas.
Ejemplo:

• Objetos: Corresponden a una agrupación de variables y


funciones definidas en JavaScript o por el usuario, como, por
ejemplo: Image y Array, que son objetos predefinidos. Para
definir un objeto, se hace uso del operador new y los paréntesis
redondos.
Ejemplo:

110
Fundamentos de Programación Web

• Nulos: Son datos vacíos que se generan cuando se ha definido


una variable como null para borrarla.
Ejemplo:

• Indefinidas: Son variables que aún no se les ha asignado algún


valor.
Ejemplo:

• No numérico: Son valores generados cuando se realiza una


operación determinada, porque los datos no son compatibles.
Su valor es NaN (not a number):
Ejemplo:

4.7. Entrada y salida de datos


Para la entrada de datos, se utiliza el método prompt () del objeto
windows, conformado por los botones “Aceptar” y “Cancelar”, junto
a una caja de texto donde el usuario ingresa los datos.
Ejemplo:

111
Fundamentos de Programación Web

Para realizar la impresión o salida de datos, se utiliza el método


write().
Ejemplo:

4.8. Operadores
Los operadores permiten manejar el valor de las variables, realizar
operaciones matemáticas con sus valores y comparar diferentes
variables.

Se distinguen los siguientes tipos de operadores:

• Operador de asignación
Este operador se utiliza para almacenar un valor específico en
una variable. El símbolo utilizado es un igual (=).
• Operadores relacionales
Los operadores relacionales definidos por JavaScript son
similares a los que definen las matemáticas: mayor que (>),
menor que (<), mayor o igual (>=), menor o igual (<=), igual
que (==) y diferente (!=).

No confundir con el operador de asignación (un igual =), el


operador relacional (doble igual ==).
• Operadores ariméticos
Los operadores aritméticos definidos por JavaScript son
similares a los que definen las matemáticas: suma (+), resta (-),
producto (*), división (/) y residuo o módulo de la división (%).
• Operadores de incremento y decremento
Estos operadores actúan de la siguiente manera: solamente son
válidos para las variables numéricas y se utilizan para
incrementar doble más (++) o decrementar doble menos (–)
en una unidad el valor de una variable.
Ejemplo:

112
Fundamentos de Programación Web

• Operadores lógicos
Estos operadores actúan de la siguiente manera:

Tabla 7: Operadores lógicos.

Ejemplo:

4.9. Estructuras de control


Para efectos de controlar la ejecución de una acción o bloque de
acciones (una o más veces), se hace uso de las estructuras de control,
dentro de las que están:

113
Fundamentos de Programación Web

4.9.1. Condicionales
El condicional if realiza un bloque de acciones si se cumple una
condición y si no se realiza el bloque de acciones de la sentencia else.

4.9.2. Estructura de “if”


La estructura if (en JavaScript), se emplea para tomar decisiones en
función de una condición. La sintaxis formal es:

if(condición) {
...
}

La condición es una expresión booleana (true y false), que si la


condición es verdadera, se ejecutan todas las instrucciones que se
encuentran dentro del if. Si la condición no se cumple (es decir, si su
valor es false) no se ejecuta ninguna instrucción contenida en el if, y el
programa continúa ejecutando el resto de las instrucciones del script.

Ejemplos:
1) Se evalúa si el valor de dos variables es igual:

114
Fundamentos de Programación Web

2) Página web, que haciendo uso de JavaScript, se evalúa si una persona


es mayor de edad:

3) Programa donde se involucre el manejo de variables:

4.9.3. Eestructura “if else”


Al evaluar la expresión “si la condición se cumple” (es decir, si su
valor es verdadero), se ejecutan todas las instrucciones que se

115
Fundamentos de Programación Web

encuentran dentro de las llaves del if. Si la condición no se cumple (es


decir, si su valor es falso), se ejecutan todas las instrucciones contenidas
en else . La sintaxis formal es:

if(condición) {
...
}
else {
...
}

Ejemplo: A partir del ejemplo anterior, se agrega la sentencia “else”,


y en caso de que la edad sea menor de 18, se ejecutarán las sentencias
correspondientes.

116
Fundamentos de Programación Web

4.9.4. Sentencia Switch


El condicional switch selecciona uno de muchos bloques de código
para ejecutar, según una evaluación o un valor. La sintaxis formal es:

switch([evaluación | valor]) {
case 1:
ejecuta este bloque si el valor o la evaluación es igual a 1. break;
case 2:
ejecuta este bloque si el valor o la evaluación es igual a 2. break;
default:
ejecuta este bloque si no ingresa a ninguno de los çase.anteriores.
}

Ejemplo: Programa en JavaScript que a partir del número del día de


la semana imprime el nombre.

117
Fundamentos de Programación Web

Se recomienda digitar el anterior código en una página web,


ejecutarlo en un browser y observar el resultado a partir de los datos
ingresados.

4.10. Ciclos o estructuras repetitivas


Son estructuras que permiten la ejecución de una o más sentencias
en un determinado número de veces y tiene las siguientes
características:
• La inicialización es el espacio donde se establecen los valores
iniciales de las variables que controlan el ciclo.
• La condición es el único elemento que decide si continúa o se
detiene el ciclo.
• La actualización puede ser el incremento o decremento de una
variable que se asigna después de cada iteración a las variables
que controlan el ciclo.

Las estructuras cíclicas en JavaScript son:


• While
• Do while
• For
• For in

4.10.1. La estructura while


La sintaxis general es while (condición), donde se ejecuta la
expresión mientras la condición sea verdadera (while (true) {...} ), y en
caso contrario continúa con el resto del script.

Ejemplo: Programa que muestra los números del 1 hasta 10.

118
Fundamentos de Programación Web

4.10.2. La estructura do…while


El ciclo de tipo do...while es muy similar a la estructura while, con
la diferencia que para este caso, se ejecutan las instrucciones del ciclo
(al menos la primera vez). La sintaxis general es:

do {
...
} while(condición);

Ejemplo: Utilizando este bucle, calcular el factorial de un número:

4.10.3. La estructura for


Estructura repetitiva que tiene la siguiente forma:

for(inicialización; condición; actualización) {


...
}

La sentencia de inicialización se ejecuta una única vez al ingresar al


ciclo; las iteraciones se realizan mientras la condición indicada sea

119
Fundamentos de Programación Web

verdadera, repite las instrucciones definidas dentro del for. Además, en


cada iteración se actualiza el valor de las variables que se utilizan en la
condición de terminación.

Ejemplo:

4.10.4. Estructura for...in


Una estructura de control derivada de for es la estructura for...in.
Su definición exacta implica el uso de objetos, aplicada al uso de arrays.
La sintaxis formal es:

for(indice in array) {
...
}

Si se quiere recorrer todos los elementos que forman un array, la


estructura for...in es la forma más eficiente de hacerlo, como se
muestra en los siguientes ejemplos:

4.10.5. Funciones
Permiten agrupar sentencias una sola y única vez dentro de una
función para realizar una tarea específica y que se pueda reutilizar
fácilmente. Las funciones son la solución al proceso de repetir el
mismo código en varias partes de un programa.

120
Fundamentos de Programación Web

La estructura general de una función de JavaScript es:

function nombre_de_la_función(){
... enunciados a ejecutar...
}

Algunas funciones no necesitan ninguna información para generar


resultados, sin embargo, una función puede recibir tantos parámetros
como se requieran y para representarlo, se colocan los nombres de los
parámetros separados por comas, dentro de los paréntesis.

function mi_funcion(parametro1, parametro2, parametro3) {

En caso de que se requiera retornar un valor, se hace uso de la


sentencia return que permite devolver el resultado de una función.

Ejemplo: En el ejemplo que se verá a continuación, se muestra una


función que se vuelve verdadero si un número es divisible por dos y
falso en caso contrario.

Se sugiere construir una aplicación para el manejo de una


contraseña de acceso a una página web (establecida con antelación)
mediante el uso de sentencias repetitivas, donde el usuario tendrá tres
oportunidades para ingresar.

4.10.6. Manejo de objetos


Un objeto es el concepto clave de la Programación Orientada a
Objetos. La idea de objeto es similar a la del mundo real como, por
ejemplo: un computador, un celular, una persona, una silla, un sofá;
entonces, un objeto está conformado por un conjunto de atributos y

121
Fundamentos de Programación Web

funciones (métodos) los cuales deben ser genéricos para toda la familia
de dicha clase.

JavaScript es un lenguaje de programación que permite optimizar y


mejorar las posibilidades de las páginas HTML5. El navegador se
encarga de interpretar el código escrito y no hay necesidad de
compilación.

En el lenguaje JavaScript no existen las clases para crear un nuevo


objeto que tenga los mismos atributos que otro, estos deben ser
copiados. A esta forma de trabajar se le llama “herencia”, basada en
prototipos. Los objetos que copian sus propiedades de otros objetos
son llamados prototipos.

Para crear objetos en JavaScript, existen diferentes opciones. En el


siguiente ejemplo, se hace por medio de una función:

Para instanciar un objeto de ese tipo, se utiliza la palabra clave new.


var unEstudiante = new Estudiante ();

Al pasar los parámetros a los objetos, se deben dar nombres cuando


se crea el objeto con el constructor. Posteriormente, se indica el valor
concreto cuando se solicite.

La definición de objeto, como instancia de una clase, no está


definida hasta el momento en JavaScript. Con el siguiente caso, el
programador puede utilizar una rutina como la siguiente:

122
Fundamentos de Programación Web

La otra forma de crear objetos es mediante el concepto de prototipo


(prototype). Su utilidad es almacenar los métodos de los prototipos. A
continuación, se presenta su uso:

El siguiente código fuente corresponde a un ejemplo donde se


programa una página web que incluye la utilización de objetos en
JavaScript:

123
Fundamentos de Programación Web

4.10.7. Clases predefinidas


JavaScript tiene una serie de clases predefinidas, entre las que están:

Clase Date: Permite el manejo de fechas y horas, para lo cual se debe


definir un objeto de la “Clase Date”.

Ejemplo:
Creación de un objeto de la clase:
fecha = new Date();

Un programa “web complete” sería:

Clase Array: Un Array o arreglo, es una estructura que permite


almacenar una lista finita de datos de un mismo tipo.

La creación de un array se puede realizar de la siguiente manera:


var nombr_array = new Array(tamaño_array)

124
Fundamentos de Programación Web

El tipo de dato de la variable Array puede ser: cadenas, enteros,


booleanos y su tamaño se establece según el requerimiento de la
cantidad de datos a almacenar, como en el siguiente ejemplo:
var numeros = new Array(10);

La definición de arreglos se puede realizar de dos maneras


diferentes:
• La primera forma define el arreglo con la información
registrada en el array: var ciudades = new
Array("Bogotá","Barranquilla",Cartagena","Villavicencio");
• La segunda, es asignando los valores a cada una de las
posiciones del array:
var ciudades = new Array (4);
ciudades[0] = "Bogotá"; c
iudades[1] = "Barranquilla";
ciudades[2] = “Cartagena";
ciudades[3] = "Villavicencio";

Un array puede verse como una lista de datos registrados bajo el


mismo nombre, donde se accede a cada elemento individual del array
por medio de un número entero denominado índice, 0 es el índice del
primer elemento. Por otro lado, n-1 es el índice del último elemento;
donde n, es el tamaño del array.

Con los arreglos, se pueden implementar una serie de propiedades


o métodos como:

La propiedad “length” especifica cuántos elementos tiene el arreglo


y se actualiza automáticamente para mantener su consistencia cuando
se agregan nuevos elementos o se sobreescribe el arreglo.

Ejemplo:

El método join() de un arreglo convierte todos los elementos de un


arreglo a un string y los une, como en el siguiente caso:

125
Fundamentos de Programación Web

Lo anterior producirá la siguiente salida:


1,2,3,4
1234

El método reverse() de un arreglo ordena al revés los elementos de


un arreglo.

Por ejemplo:

Salida:
4,3,2,1

El método sort() de un arreglo permite ordenar los elementos de un


arreglo.

Por ejemplo:

Salida:
Ángela, Flor, Jefferson, Julieth, Miguel, Oscar

126
Fundamentos de Programación Web

Los métodos push() y pop() de un arreglo, permiten anexar uno o


más elementos al final del arreglo y regresa el último valor que anexó.
El método pop() de un arreglo, elimina el último elemento de un
arreglo y reduce la longitud del arreglo, retornando el valor que
eliminó.

Clase Math: JavaScript tiene una serie de funciones asociadas a esta


clase para realizar diferentes tipos de operaciones matemáticas.

Ejemplos:
• Math.exp(x) //Exponenciación.
• Math.sqrt(x) //Raíz cuadrada.
• Math.pow(x, y) //Potencia base (x) con exponente (y)
• Math.floor() //Redondea al número entero más cercano y
menor.
• Math.ceil() //Redondea al número entero más cercano y
mayor.
• Math.round() //Redondea al entero más próximo.
• Math.random() //Número aleatorio entre 0 y 1.
• Math.sin(x) //Seno, x expresada en radianes.
• Math.cos(x) //Coseno, x expresada en radianes.

Clase String: Esta clase se utiliza para la gestión de cadenas de


caracteres, por ejemplo, cuando se requiere juntar o dividir cadenas,
buscar texto o extraer parte de un texto. En JavaScript, todo texto debe
estar encerrado entre comillas, dobles o simples. Por ejemplo, la
cadena ’37’ no es el número tres y siete, sino la cadena formada por los
caracteres 3 y 7.

Formularios y controles: Un formulario digital está diseñado con la


finalidad que el usuario ingrese datos personales como: el nombre,
apellidos, teléfono, correo, entre otros; con el propósito de ser
almacenados y gestionados posteriormente. Los controles son cada
uno de los diferentes componentes que se integran al formulario, como
cajas de texto, etiquetas, link, imágenes, botones, etc; elementos con
los que va a interactuar el usuario.

Eventos: Los eventos en JavaScript son una forma de controlar las

127
Fundamentos de Programación Web

acciones de los usuarios, cuando estos realizan una visita a una página
web. Por ejemplo, al pulsar clic en un botón, editar un campo de texto
o cerrar la página.

El manejo de eventos permite el desarrollo de páginas interactivas,


porque de esta manera, se puede responder a las acciones que los
usuarios ejecutan.

Ejemplos:
1) Página web que permite ingresar los datos del nombre y la edad de
una persona. También, al pulsar clic en el botón correspondiente,
presenta los datos ingresados.

El evento “onclick” se ejecuta al pulsar clic al botón. Para


incorporarlo en HTML, basta con utilizar el atributo “onclick” en un
elemento HTML y especificar el código o función de JavaScript a
ejecutar.

2) Página web que al pasar el mouse sobre los links, cambia de color el

128
Fundamentos de Programación Web

fondo de la pantalla.

La descripción de los eventos utilizados para la página web del


segundo ejemplo son los siguientes:

Tabla 8: Eventos utilizados en la página web.

3) Página web que implementa eventos del teclado. Para este ejemplo,
se utilizan dos tipos de archivos.

129
Fundamentos de Programación Web

Código del archivo tipo CSS (estilos.css):

Código del archivo tipo html:

130
Fundamentos de Programación Web

Para la aplicación del ejemplo anterior, existen tres eventos


diferentes para las pulsaciones de las teclas (onkeyup, onkeypress y
onkeydown), y dos tipos de teclas: las teclas normales (como letras,
números y símbolos normales) y las teclas especiales (como ENTER,
Alt, Shift, F1, F2, entre otras.)

Expresiones regulares: Una expresión regular, es un patrón que se


crea utilizando caracteres del alfabeto con la ayuda de operaciones de
unión, concatenación, etc. En JavaScript se emplean para validar
información.

Ejemplos:
1) Página web que válida el ingreso de una cuenta de correo, teniendo
en cuenta que solo debe tener caracteres, por ejemplo:
[email protected].

131
Fundamentos de Programación Web

El significado de los símbolos utilizados para validar el correo en el


ejercicio anterior es:
• ^: Comienzo de la cadena.
• $: Final de la cadena.
• \: Permite usar caracteres especiales.
• [a-z]: Indica una opción de la letra "a" hasta la "z".

2) Programa que permite validar el formato de la fecha en


dd/mm/aaaa.

Se recomienda digitar los códigos de los ejemplos anteriores,


ejecutarlos en un browser y observar los resultados generados.

4.11. Lecturas recomendadas


• Manejadores de eventos en línea en JavaScript.
• Otros tipos de manejadores de eventos.
• El método addEventListener().
• Consultar otras notaciones con la descripción y ejemplo de las
expresiones regulares utilizadas en JavaScript para validar
información.
132

También podría gustarte