JavaScript

Duver Rene Acosta Orjuela

Fecha de actualización: 30 de agosto de 2019

 INTRODUCCIÓN

El curso HTML5 (HyperText Markup Language) forma parte de las asignaturas de

IV semestre de Ingeniería de Software de la Universidad Manuela Beltrán. Este
módulo ilustra conceptos con ejemplos y ejercicios en programación y diseño
utilizando de forma detallada los pasos para incluir JavaScript en una página web.

JavaScript es un potente lenguaje interpretado que proporciona interactividad a un

sitio web mejorando la comunicación con el usuario. Una de las características
principales de JavaScript es que es un lenguaje independiente de la plataforma; con
JavaScript se pueden crear programas y puede ser ejecutado desde cualquier
ordenador sin importar el sistema operativo.
El contenido del módulo se destina a utilizar material informativo, práctico y útil
donde el usuario encontrará los temas propuestos de la vida real para el aprendizaje
de JavaScript su estructura, sintaxis, ejemplos y ejercicios que debe realizar para
fortalecer su conocimiento. Es fundamental que el estudioso utilice las herramientas
del módulo como instrumentos de aprendizaje con el objetivo que explore y sea
autodidacta en su proceso de enseñanza-aprendizaje.

Figura 1, JAVASCRIPT y HTML5

Fuente:rolandocaldas.com, https://rolandocaldas.com/wp-content/uploads/2013/09/javascript-html5.png
 ESTRUCTURA TEMÁTICA

Tabla de Contenido
1. JAVASCRIPT.................................................................................................... 7
1.1 ¿QUE ES JAVASCRIPT? ............................................................................. 7
1.2 EL FUNCIONAMIENTO DE JAVASCRIPT. .................................................. 7
1.3 JAVASCRIPT EN HTML5. ............................................................................ 8
2. VARIABLES ...................................................................................................... 9
2.1 DECLARAR VARIABLES: ............................................................................ 9
2.2 TIPOS DE VARIABLES. ............................................................................. 10
2.3 OPERADORES MATEMÁTICOS: .............................................................. 11
2.4 ASIGNAR VALORES A UNA MATRIZ........................................................ 14
3. ESTRUCTURAS DE CONTROL .................................................................... 16
3.1 CONDICIÓNALES SIMPLES IF ................................................................... 16
3.2 CONDICIONALES IF ELSE - IF ELSE ......................................................... 18
3.3 ESTRUCTURA CONDICIONAL SWITCH .................................................... 21
3.4 ESTRUCTURA DE BUCLE FOR. ............................................................... 24
3.5 ESTRUCTURA WHILE. ............................................................................... 26
3.6 ESTRUCTURA DO...WHILE. ....................................................................... 28
4. GUÍA PRÁCTICA DE EJERCICIOS BÁSICOS EN JAVASCRIPT. ................. 30
4.1 VENTANA EMERGENTE. .......................................................................... 30
4.2 MENSAJE POR PANTALLA. ...................................................................... 31
4.3 FECHA: ........................................................................................................ 32
4.4 BOTÓN ATRÁS. ......................................................................................... 32
4.5 BOTÓN CON ENLACE. .............................................................................. 33
5. FUNCIONES ................................................................................................... 33
5.1 SINTAXIS DE UNA FUNCIÓN: ................................................................... 34
5.2 FUNCIONES CON ARGUMENTOS. .......................................................... 36
6. EJERCICIOS DE PRÁCTICA Y AUTOAPRENDIZAJE. ................................. 38
7. OBJETOS EN JAVASCRIPT .......................................................................... 43
7.1 METODOS EN JAVASCRIPT. .................................................................... 46
MATERIAL DE APOYO. ........................................................................................ 49
GLOSARIO............................................................................................................ 50
WEBGRAFIA. ........................................................................................................ 52
BIBLIOGRAFIA ..................................................................................................... 53
 IDEOGRAMA

JavaScript
Funciones
Estructuras de Control Variables Operadores Matemat
y Objetos

Con Sin Ejercicios Tipos de

if If-Else switch For While Do-While Asignacion Suma Resta Multiplicación División
argumentos argumentos Basicos variables
 1. JAVASCRIPT
Es un lenguaje de programación utilizado
por personas que sin importar la edad ni
profesión dan sus primeros pasos en
desarrollo y diseño de sitios Web. Este
lenguaje no requiere compilación, ya que el
lenguaje funciona de la mano con los
navegadores web, porque son los
encargados de interpretar este código.
Algunas personas suelen confundir Java Figura 2, JavaScript
https://redhoop.com/blog/wp-
con JavaScript pero son completamente content/uploads/2014/09/JavaScript.png
diferentes y tienen características únicas.
JavaScript tiene la ventaja de trabajar en
cualquier página web, y puede ser utilizado sin tener instalado otro programa para
ser visualizado es un lenguaje de programación libre y gratis.

1.1 ¿QUE ES JAVASCRIPT?

Es un lenguaje de programación manejado para la creación de páginas y sitios web

dinámicos; es decir, es una página que agrega en su contenido efectos de texto,
acciones que se activan al pulsar botones, animaciones y ventanas flotantes con
mensajes de advertencia aceptación o conexión entre páginas todo esto pensando
en el usuario y al combinarse con HTML% se pueden desarrollar grandes proyectos.
.
JavaScript es un lenguaje de programación interpretado que se embebe en una
página web desarrollada en HTML5; es decir que se incrusta en la página. Este
lenguaje interpretado nos dice que las instrucciones las analiza procesa el
navegador “Cliente” en el momento a ejecutar sin importar el sistema operativo:
Windows, Apple, Linux, etc. Por sus grandes características es utilizado para
trabajar en internet.

1.2 EL FUNCIONAMIENTO DE JAVASCRIPT.

JavaScript en internet presenta diferentes servicios como por ejemplo:

• Correo
• Buscadores de información
• Chat
Además se puede encontrar en la web o crear códigos “embed” para insértalos en
las páginas web personales como:
• Reloj
• Fechas
• Calculadoras
• Contadores de Visitas

1.3 JAVASCRIPT EN HTML5.

Este código se puede insertar en la etiqueta <body> </body> de nuestras páginas

web y por lo general se insertan entre las etiquetas <script> </script> las cuales
indican que en su interior está escrito un código JavaScript.
NOTA: Es importante mencionar que JavaScript es un lenguaje sensible a
mayúsculas y minúsculas
Veamos un ejemplo:

Figura 3 Primer ejemplo JavaScript

Fuente: Elaborada por el Autor

Y el resultado será el siguiente.

Figura 4 Ejecución del ejemplo JavaScript

Fuente: Elaborada por el Autor
 2. VARIABLES
Son espacios en memoria donde se almacenan datos que pueden variar durante o
al final del programa, se compone de un nombre y un valor, cuando una variable
tiene o se le asigna un valor y luego en otra línea de código se le asigna otro valor,
el anterior se pierde; es decir, que una variable no puede tener dos valores al mismo
tiempo.

2.1 DECLARAR VARIABLES:

En JavaScript es posible utilizar todas las variables necesarias para desarrollar un

programa, lo primero que debemos hacer es declararla es decir expresarle al
navegador que nos reserve un espacio en memoria para utilizar la variable, existen
dos formas para declarar una variable
Declaración Explícita: para ello escribimos la palabra var, seguida del nombre de
la variable

var variableA;

En este caso la variable se declaró y, ya se ha reservado el espacio en memoria el

segundo paso es darle un valor inicial, para ello asignamos un valor así:

var variableA=15;

También se pueden declarar varias variables en la misma línea de código.

var variableA; variableB; variableC;

O podemos asignarle el valor de la siguiente manera

var variableA;
variableA=15;

Declaración Implícita: Podemos también declarar una variable e inicializarla

directamente

variableA=15;
Se recomienda declarar e inicializar las variables con el fin de mantener una
organización de nuestro código.
Para nombrar Variables debemos tener normas claras:
• Todo identificador debe tener letras
• Puede llevar caracteres especiales como, $ y _
• Las palabras reservadas del lenguaje no se pueden utilizar.
• Una variable no puede iniciar con un número
Ejemplos
Variables declaradas de forma Variables declaradas de forma
correcta incorrecta
var num1; var 10num;
var _$a; var num;1_2;
var $_numero_$;
Figura 5 Variables tabla comparativa
Fuente: Elaborada por el Autor

2.2 TIPOS DE VARIABLES.

Numéricas: Son utilizadas para almacenar valores numéricos, como por ejemplo
enteros=integer, decimales=float, el valor se debe asignar así:

var edad = 40;

var estatura = 1.75;

Los números decimales deben utilizar el punto (.) para separar la parte decimal de
la parte entera
Cadenas de Texto: son utilizadas para almacenar frases o palabras, para ello se
utilizan comillas simples o dobles así

var producto = ’comida en lata’;

var nombrecliente = ”Jose”;
En el siguiente ejemplo de darán una serie de variables y mostramos como queda
en la página.

Figura 6 JavaScript -Variables

Fuente: Elaborada por el Autor

Y el resultado será el siguiente.

Figura 7 Ejecución JavaScript -Variables

Fuente: Elaborada por el Autor

2.3 OPERADORES MATEMÁTICOS:

Son utilizados para realizar operaciones matemáticas. En los ejemplos aparece el

código alert(); es una ventana flotante que aparece dando la respuesta de la
operación matemática.

Veamos:

Operador Descripción Ejemplo

var x;

+ Permite realizar la suma de x = 25;

dos o más datos de tipo var y = 20;
numérico var suma;
suma = x + y;
 alert(suma);

var x;

- Permite realizar la resta de x = 25;

dos datos de tipo numérico var y = 20;
var resta;
suma = x - y;
alert(resta);

var x;

* Permite realizar

de tipo numérico
la x = 25;
multiplicación de dos datos var y = 20;
var multiplicar;
suma = x * y;
alert(multiplicar);

var x;

/ Permite realizar la división x = 25;

de dos datos de tipo var y = 20;
numérico var dividir;
suma = x / y;
alert(dividir);

Figura 8 Tabla de Operadores Matemáticos

Fuente: Elaborada por el Autor

Veamos el ejemplo
 Figura 9 Código JavaScript de suma
Fuente: Elaborada por el Autor

Figura 10 Ejecución en Navegador google Chrome de suma

Fuente: Elaborada por el Autor

En la imagen muestra la ventana flotante con el resultado de:

x+y=suma, es decir 25+20=45

Ejercicio1.
El estudioso debe crear un programa en JavaScript donde realice la suma, resta,
multiplicación y división de dos números y mostrar en una ventana flotante.
Competencias
“El estudioso estará en capacidad de realizar una página web utilizando JavaScript
utilizando variables y operadores básicos para sumar, restar, multiplicar y dividir”

2.4 ASIGNAR VALORES A UNA MATRIZ

Una matriz es una estructura que contiene varios valores. En JavaScript estos
valores se indican entre corchetes separados por comas. Sin embargo, se pueden
almacenar varios valores en varias variables; también se puede hacer en una sola
variable según sea el caso.

Veamos el código del programa.

Figura 11 Código para insertar una matriz

Fuente: Elaborada por el Autor

Y el resultado será el siguiente.

 Figura 12 Ejecución en Navegador google Chrome de Matriz
Fuente: Elaborada por el Autor

Mediante JavaScript es posible recuperar uno de los valores de la matriz, para ello
debemos saber que a cada uno de los valores de la matriz se le asigna un número
de índice que inicia desde el número cero (0), en JavaScript el código es:

Figura 13 Código recuperando el índice 3 de la Matriz

Fuente: Elaborada por el Autor

Figura 14 Ejecución en Navegador google Chrome de índice 3 en la Matriz

Fuente: Elaborada por el Autor

Podemos ver que el navegador muestra por pantalla el número 40 que corresponde
al índice 3.
Ejercicio 2
-El estudioso debe crear un programa en JavaScript con una matriz que tendrá
como cadena de texto los 12 meses del año.
-Debe mostrar por pantalla la ventana de alerta (flotante) con el resultado de la
matriz (los 12 meses del año)
-Basado en el mismo programa debe modificar el código y recuperar en la ventana
de alerta (flotante) el mes de octubre.

Competencias
“El estudioso estará en capacidad de realizar una página web utilizando JavaScript
donde asigne valores a una matriz”

3. ESTRUCTURAS DE CONTROL

3.1 CONDICIÓNALES SIMPLES IF

La sentencia if es una estructura de control muy manejada en JavaScript. Esta

estructura es utilizada para la toma de decisiones; con If se puede evaluar una
expresión, luego verifica si su resultado es positivo y se realizan acciones
relacionadas. Veamos la sintaxis

Figura 15 Sintaxis col simple IF

Fuente: Elaborada por el Autor

Veamos el código en JavaScript.

 Figura 16 Código en Navegador google Chrome en condicional IF
Fuente: Elaborada por el Autor

Y el resultado será el siguiente.

Figura 17 Ejecución en Navegador google Chrome en condicional IF

Fuente: Elaborada por el Autor

De acuerdo con el resultado podemos analizar que el usuario puede ingresar su

nombre y una nota; esta nota será avaluada, si la nota es mayor o igual a 4, abra
una respuesta de: con el nombre el mensaje “está aprobado” y la nota respectiva.
3.2 CONDICIONALES IF ELSE - IF ELSE

Esta estructura nos permite ampliar más la toma decisiones en el programa. En

JavaScript es utilizada para ejecutar un código; si la condición es verdadera ejecuta
el código de la decisión, si es falsa ejecuta el código de la decisión, podemos
utilizarla también de forma anidada o sucesiva.

Veamos la sintaxis

Figura 17 Sintaxis Condicional anidado IF ELSE-IF ELSE

Fuente: Elaborada por el Autor

Veamos el código del programa.

 Figura 18 Código condicional Anidado IF ELSE-IF ELSE
Fuente: Elaborada por el Autor

Y el resultado será el siguiente.

Figura 19 Ejecución en cuadro de mensaje - condicional IF

Fuente: Elaborada por el Autor
 Figura 20 Ejecución en cuadro de mensaje - condicional IF
Fuente: Elaborada por el Autor

Vista en el navegador

Figura 21 Ejecución en navegador - condicional IF

Fuente: Elaborada por el Autor

Ejercicio 3.
El estudioso debe crear los siguientes programas utilizando JavaScript
• Programa que permita calcular cuál es el menor de dos números
• Programa que pida la edad de una persona. Si tiene más de 18 años envié un
mensaje que diga “eres mayor de edad” de lo contrario “eres menor de edad”
• Programa que pida por pantalla el nombre y la estatura de una persona,
o Si la estatura de la persona es menor a 1.60 envié el mensaje “Eres una
Persona de Baja Estatura”
o Si mide entre 1.61 y 1.75 envié el mensaje “Eres una Persona de Estatura
Normal”
o Si su estatura es mayor a 1.75 envié el mensaje “Eres una Persona de
Estatura Alta”
• El estudioso debe crear un programa que pida el nombre y apellido del
estudiante, el programa debe analizar y tomar la siguiente decisión:
o Si la nota es igual a 5 debe salir un mensaje que diga “Su Valoración es
Excelente”
 o Si la nota es mayor a 4 debe salir un mensaje que diga “Su Valoración es
Sobresaliente”
o Si la nota es mayor o igual a 3 debe salir un mensaje que diga “Su
Valoración es Aceptable”
o Si la nota es menor a 3 debe salir un mensaje que diga “Perdió la Materia”.

Competencias
“El estudioso estará en capacidad de analizar y utilizar condicionales (if-else / if-
else) con el fin aplicarlo de forma lógica utilizando JavaScript”

3.3 ESTRUCTURA CONDICIONAL SWITCH

La estructura switch es un poco más compleja que la anterior, nos da la posibilidad

de realizar diferentes operaciones dependiendo del estado de la variable.

Figura 22 Sintaxis de condicional switch

Fuente: Elaborada por el Autor

Cada vez que se haga una comparación de case se debe usar la palabra reservada
Break para romper el código e impedir que el intérprete siga comparando los
siguientes case que encuentre.

Veamos el código del programa.

 Figura 23 Código programa utilizando Case
Fuente: Elaborada por el Autor

Parseint es una función la cual hace una conversión rápida de los tipos de datos;
retorna un valor numérico cuando se le da una cadena como argumento. Esto lo
podemos ver en el anterior código.
Este es resultado cuando se ejecuta:

Figura 24 Ejecución del programa

Fuente: Elaborada por el Autor

Vista en el navegador

Figura 25 Ejecución en navegador

Fuente: Elaborada por el Autor

Ejercicio 4.
La Empresa CINE-CAPITAL realiza en la semana descuentos para sus clientes;
dependiendo el día, el cliente tiene un descuento especial en el valor de su entrada.
El estudioso debe realizar un programa que diga al usuario el valor del descuento
teniendo en cuenta que:
o El programa debe pedir por pantalla un número de 1 a 7 que corresponde al
día de la semana (1=Lunes, 2=Martes, 3-Miercoles…..)
 o De acuerdo al día el programa debe decir el descuento (Lunes=10%,
Martes=30%, Miércoles=50%, Jueves=20%, viernes, sábado y domingo NO
tienen descuento)
En el centro comercial realizan descuentos de acuerdo con cada mes del año; el
estudioso debe realizar un programa que diga al usuario el valor del descuento
teniendo en cuenta que:
o El programa debe pedir por pantalla un número de 1 a 12 que corresponde a
cada mes del año (1=Enero, 2=Febrero, 3-Marzo…..)
o De acuerdo con el mes el programa debe informar el descuento (Enero=40%,
Febrero=50%, Marzo=40%, Abril=30%, Mayo=20%, Julio=10%, Agosto= 30,
Septiembre =35%, Octubre= 50% Noviembre=20%, Junio y Diciembre NO
tienen descuento)

Competencias

“El estudioso estará en capacidad de analizar y utilizar la estructura condicional

switch y su estructura, aplicarlo de forma lógica utilizando JavaScript”

3.4 ESTRUCTURA DE BUCLE FOR.

El bucle for en JavaScript es parecido al de Java y al de C++ .For nos permite crear
bucles condicionales o iterativos, es decir for se repite en su sintaxis hasta que una
condición determinada llegue a su límite. Veamos la sintaxis:

Figura 26 sintaxis FOR

Fuente: Elaborada por el Autor

Cuando se ejecuta un bucle for sucede lo siguiente:

• Inicializar Variable: Es lo primero que se ejecuta en el programa, se hace una
sola vez, esta instrucción inicializa la variable, aquí también es posible declarar
variables si el desarrollador lo desea;
• Condición: Se evalúa la condición que se haya utilizado, si el valor de la
condición es verdadero, se ejecuta la sentencia del bucle for y por el contrario
es falso el for llega a su fin.
• Sentencias: Equivale al código que se ejecuta repetidas veces.
• Incremento: Si hay algún incremento lo ejecuta y el control vuelve a la condición.
Veamos el código del programa.

Figura 27 Código de sentencia FOR

Fuente: Elaborada por el Autor

Y el resultado será:

Figura 28 Ejecución en navegador - FOR

Fuente: Elaborada por el Autor

El programa realiza un ciclo inicializando la variable F en 1 y agrega un número

hasta que F sea mayor o igual a 10.
Ejercicio 5.
• Crear un programa en JavaScript que permita mediante un bucle mostrar por
pantalla los números pares del 0 al 50
• Crear un programa en JavaScript que permita mediante un bucle mostrar por
pantalla los números impares del 1 al 49
• Crea un programa en JavaScript que solicite al usuario un número y muestre la
tabla de multiplicar del número introducido.
• Una persona invierte en una cuenta de ahorros en un banco $1000.000 con un
6% de intereses anual, realice un programa que calcule el monto acumulado de
la cuenta en un periodo de 5 años.

Competencias

“El estudioso estará en capacidad de analizar y utilizar una estructura (for) aplicarlo
de forma lógica utilizando JavaScript”

3.5 ESTRUCTURA WHILE.

Esta estructura permite al desarrollador crear bucles que se ejecutan mientras que
la condición se evalúa. La sentencia while lleva la siguiente sintaxis:

Figura 29 sintaxis WHILE

Fuente: Elaborada por el Autor

Veamos el código del programa.

 Figura 30 Código de sentencia WHILE
Fuente: Elaborada por el Autor

Y el resultado será:

Figura 31 Ejecución en navegador - WHILE

Fuente: Elaborada por el Autor

Ejercicio 6.

La empresa Tutores S.A necesita realizar un programa que pida el número de años
que un trabajador ha estado en la empresa, el objetivo del programa es calcular un
porcentaje de acuerdo con el número de años para recibir un bono. El estudioso
debe realizar el programa teniendo en cuenta que
• Si el empleado lleva 1 año no tiene bono
 • Si el empleado lleva 2 años tendrá un bono de $100.000,
• Si el empleado lleva 3 años tendrá un bono de $200.000.
• Si el empleado lleva 4 años tendrá un bono de $500.000
• Si el empleado lleva 5 años o más tendrá un bono de $700.000

Competencias

“El estudioso estará en capacidad de analizar y utilizar una estructura (While)

aplicarlo de forma lógica utilizando JavaScript”

3.6 ESTRUCTURA DO...WHILE.

Esta estructura crea un bucle que ejecuta una sentencia especificada, hasta que la
condición se evalué, la condición se evalúa, realiza las acciones y luego pregunta

Figura 32 sintaxis DO-WHILE

Fuente: Elaborada por el Autor

Veamos el código del programa.

 Figura 33 Código de sentencia DO-WHILE
Fuente: Elaborada por el Autor

Y el resultado será:
 Figura 34 Ejecución en navegador – DO-WHILE
Fuente: Elaborada por el Autor

Ejercicio 7

• Crear un programa en JavaScript que permita mediante do-while mostrar por

pantalla los números pares del 0 al 50
• Crear un programa en JavaScript que permita mediante do-while mostrar por
pantalla los números impares del 1 al 49
• Crea un programa en JavaScript que solicite al usuario un número y muestre la
tabla de multiplicar del número introducido.

Competencias

“El estudioso estará en capacidad de analizar y utilizar una estructura (do…While)

y aplicarlo de forma lógica utilizando JavaScript”

4. GUÍA PRÁCTICA DE EJERCICIOS BÁSICOS EN JAVASCRIPT

La siguiente guía de ejercicios permite mostrar que con un código corto y preciso
podemos hacernos una idea más clara de la potencia del lenguaje.

4.1 VENTANA EMERGENTE

Podemos ejecutar mediante este pequeño código una ventana emergente sin barra
de menús, personalizar su ancho y alto y direccionar el sitio a una URL.
 Figura 35 Código Ventana emergente
Fuente: Elaborada por el Autor

Y el resultado será el siguiente

Figura 36 Ejecución en navegador ventana emergente

Fuente: Elaborada por el Autor

4.2 MENSAJE POR PANTALLA

Podemos mostrar una ventana de alerta con un mensaje a mi sitio web, con el
siguiente código.

Figura 37 Código Mensaje por pantalla.

Fuente: Elaborada por el Autor
Y el resultado será el siguiente.

Figura 38 Mensaje por pantalla.

Fuente: Elaborada por el Autor

4.3 FECHA

Script para insertar la fecha actual, esto hace que el visitante se dé cuenta que
nuestra página web está actualizada.

Figura 39 Código programa fecha.

Fuente: Elaborada por el Autor

Y el resultado será el siguiente.

Figura 40 Ejecución en navegador Código fecha.

Fuente: Elaborada por el Autor

4.4 BOTÓN ATRÁS

Aparecerá un botón que al hacer clic sobre él nos llevara a la página anterior

Figura 41 Código programa botón atrás.

Fuente: Elaborada por el Autor
Y el resultado será el siguiente

Figura 42 Ejecución de botón atrás

4.5 BOTÓN CON ENLACE

Aparecerá un botón que al hacer clic sobre él nos llevara a la página que indique el
desarrollador.

Figura 43 Código programa botón enlace.

Fuente: Elaborada por el Autor

Y el resultado será el siguiente.

Figura 44 Código programa botón enlace.

Fuente: Elaborada por el Autor

5. FUNCIONES

Cuando se hace un programa muy complejo, con muchas líneas de código, por lo
general sucede que el código creado por los desarrolladores se hace de forma
independiente y se repita una y otra vez; es decir, que el código se hace más largo
porque muchas instrucciones se repiten muchas veces. Si se quiere modificar
alguna de las instrucciones es necesario cambiar muchas veces la misma
instrucción lo que hace un trabajo muy tedioso y que se necesita mucho tiempo.
Las funciones se crean para dar solución a estos problemas en todos los lenguajes
de programación. Uno de los objetivos de las funciones es ver como una serie de
sentencias son manejadas dentro de un mismo proceso; esta función se puede
producir desde cualquier otro sitio con un solo llamado. Un ejemplo sería en una
página web donde hay una función para cambiar el color del fondo y en cualquier
parte de la página se puede hacer el llamado de esta función cuando se necesite.
En conclusión una función es un conjunto de instrucciones agrupadas para realizar
una tarea con la opción de que pueda ser reutilizada en el momento que se necesite.
5.1 SINTAXIS DE UNA FUNCIÓN

Una función de JavaScript muestra el siguiente aspecto:

Figura 45 Código sintaxis de una función.

Fuente: Elaborada por el Autor

• Function: Es la palabra reservada para este uso.

• Nombre de la Función: Nos muestre cual es el objetivo de esta
• Llaves { }: Se colocan entre llaves los códigos o sintaxis a ejecutar.

Veamos un ejercicio donde tenemos exponer tres mensajes en nuestra página web.
En primer lugar lo realizaremos sin utilizar la función y en segundo lugar utilizando
la función.

Figura 46 Código de un programa SIN utilizar la función.

Fuente: Elaborada por el Autor
En el ejercicio anterior podemos ver en el script como repetimos varias veces la
misma instrucción.

Figura 47 Código de un programa utilizando la función.

Fuente: Elaborada por el Autor

En este ejercicio podemos ver en el script como insertamos la función (Function)

haciendo que el código sea más corto y organizado.

Así se ve en el navegador:
 Figura 48 Ejecución del código en los dos programas.
Fuente: Elaborada por el Autor

En la figura 48 podemos ver el resultado para los dos programas antes vistos, es
importante mencionar que aunque el resultado sea el mismo, lo que nos interesa en
este caso es la forma como utilizamos la función.

5.2 FUNCIONES CON ARGUMENTOS

En algunos casos hay funciones muy sencillas las cuales no necesitan ninguna
información para facilitar los resultados, pero es recomendable que los
desarrolladores utilicen el valor de las variables con el fin de mostrar los resultados
esperados en la página web.
La sintaxis se explica de la siguiente manera;
• En primer lugar el nombre de la función.
• Las variables que necesitan las funciones son llamadas argumentos.
• La función creada debe indicar el número de argumentos necesarios al igual que
el nombre de los mismos, separados por comas.
• Cuando la función se ejecuta debe haberse invocado antes e incluir los valores
que se le van a pasar a la función

Figura 49 Sintaxis de las funciones con argumentos.

Fuente: Elaborada por el Autor
Los argumentos son las variables de entrada que recibe una función.
Debemos tener en cuenta lo siguiente:
• Cuando se envía una función con menos argumentos de los que se ha
detallado los argumentos que no han recibido valor son llamados como
“undefined”.
• El máximo de argumentos que puede especificar son 255.
• Cuando envían más argumentos que los que se necesitan los argumentos
que sobran serán ignorados.

Realizaremos un ejemplo con argumentos:

Figura 50 Código de JavaScript utilizando argumentos.

Fuente: Elaborada por el Autor

Así quedaría el después de ejecutarlo:

 Figura 51 Programa visto en navegador “función con argumentos”.
Fuente: Elaborada por el Autor

6. EJERCICIOS DE PRÁCTICA Y AUTOAPRENDIZAJE.

Ejercicio 8
A continuación encontrara un programa en JavaScript. El estudioso debe:
• Reescribir el programa en un editor de texto.
• Analizar el programa, en el caso que el programa tenga errores el estudioso
deberá corregirlos.
• Analizar la ejecución del programa.
• Identificar la función.
• Analizar las estructuras de control que hay.
• Por medio de comentarios escribir el desarrollo del programa línea a línea.
 Figura 52 Programa Ejercicio 1.
Fuente: Elaborada por el Autor

Ejercicio 9.
A continuación encontrara un programa en JavaScript, El estudioso debe:
• Reescribir el programa en un editor de texto.
• Analizar el programa, en el caso que el programa tenga errores el estudioso
deberá corregirlos.
• Analizar la ejecución del programa.
• Identificar la función.
• Analizar las estructuras de control que hay.
• Por medio de comentarios escribir el desarrollo del programa línea a línea.
 Figura 53 Programa Ejercicio 2.
Fuente: Elaborada por el Autor

Ejercicio 10.
El estudioso debe hacer un programa en JavaScript que calcule la nómina para una
persona donde el programa debe pedir:
DATOS PERSONALES
• Nombre del empleado:
• Documento de identidad.
• Días laborados
• Salario mensual:

DEVENGADOS
• Subsidio de Transporte: Valor del subsidio de transporte mensual definido
por el gobierno, para cada año.
• Salario a pagar; (este debe calcularse con base a los días laborados, es decir
si su salario mensual es $800.000 mensual y labora 15 días su salario a
pagar es $400.000)
DEDUCIDOS:
• Salud: 4% de su salario mensual
 • Pensión: 4% de su salario mensual-

TOTAL A PAGAR:
Calcular el total a pagar donde se tiene en cuenta DEVENGADOS-DEDUCIDOS.

Ejercicio 11:
A continuación encontrara un programa en JavaScript. El estudioso debe:
• Reescribir el programa en un editor de texto.
• Analizar el programa, en el caso que el programa tenga errores el estudioso
deberá corregirlos.
• Analizar la ejecución del programa.
• Identificar la función.
• Analizar las estructuras de control que hay.
• Por medio de comentarios escribir el desarrollo del programa línea a línea.

Figura 54 Programa Ejercicio 4.

Fuente: Elaborada por el Autor

Ejercicio 12
A continuación encontrara un programa en JavaScript. El estudioso debe:
• Reescribir el programa en un editor de texto.
• Analizar el programa, en el caso que el programa tenga errores el estudioso
deberá corregirlos.
• Analizar la ejecución del programa.
• Identificar la función.
• Analizar las estructuras de control que hay.
• Por medio de comentarios escribir el desarrollo del programa línea a línea.

Figura 55 Programa Ejercicio 5.

Fuente: Elaborada por el Autor
Competencias
“El estudioso estará en capacidad de codificar, analizar y utilizar javascript con
ejemplos y ejercicios adaptador al vida real”
 7. OBJETOS EN JAVASCRIPT

En JavaScript los objetos se crean con el fin organizar el código fuente de forma
clara y entendible a cualquier programador. Este proceso se hace de forma similar
a la creación de variables y estas a su vez son contenedores de valores de datos.
Inicialmente se declara la variable que va contener el objeto así:

Figura 56, objetos

Fuente: Elaborada por el Autor

Este código fuente le da el valor sencillo de (Chevrolet) a una variable llamada car.
• Los objetos pueden contener varios valores (propiedades).

Figura 57, objeto y variables

Fuente: Elaborada por el Autor

En este ejemplo a la variable car se le asigna tres valores (Chevrolet, 2014, Gris)
veamos el ejemplo.

Figura 58, código escrito

Fuente: Elaborada por el Autor
Para generar el objeto, es necesario declarar la variable donde está contenido (var
car); después de un signo igual, se insertan entre llaves, tres propiedades
nominadas para el objeto (marca, modelo, color); cada una de estas propiedades
tiene un valor determinado, que se muestra después del signo dos puntos (:).
Una vez creado un objeto, puede acceder a cada una de sus propiedades por
separado. Observemos la siguiente línea de código:

Figura 59, objeto creado

Fuente: Elaborada por el Autor

Para acceder al valor de la propiedad de un objeto, tenemos que mostrar el nombre

del objeto, seguido de un punto y el nombre de la variable.
Al ejecutarlo quedara así:

Figura 60, Ejecución de código

Fuente: Elaborada por el Autor

También es posible cargar nuevos valores a un objeto, así como modificar los
objetos previamente creados.

Figura 61, creación de nuevos valores a un objeto.

Fuente: Elaborada por el Autor

En el ejemplo anterior la primera línea de código se puede insertar la propiedad

placa, la siguiente modifica la propiedad nombre y la tercera arroja el cuadro de
alerta que muestra ambos valores.
Veamos un ejemplo.
 Figura 62, Código creación de nuevos valores a un objeto.
Fuente: Elaborada por el Autor

Al guardar y ejecutar podemos evidenciar que aparece el primer cuadro de alerta,

con una información y al dar clic en aceptar nos aparece un segundo cuadro.

Figura 63, Ejecución de código

Fuente: Elaborada por el Autor
 Figura 64, Ejecución de código después de aceptar el primero
Fuente: Elaborada por el Autor

7.1 METODOS EN JAVASCRIPT.

Cuando un objeto tiene una función, por ejemplo pedirle que realice una acción, es
llamado método. Podemos decir que un método es cuando el objeto es capaz de
realizar o ejecutar alguna acción de forma independiente.
Para generalizar, podemos ejemplificar así: un automóvil tiene un tamaño y color,
(variables denominadas propiedades) el automóvil es capaz de acelerar y frenar
(funciones denominadas métodos), cuando necesitamos agregar métodos a objetos
a un programa utilizamos funciones anónimas con la siguiente sintaxis:

Veamos el código.

Figura 65, Métodos en JavaScript

Fuente: Elaborada por el Autor

Examinemos el código anterior.

• Se creó un elemento llamado: “car”
• Dentro del objeto se definen tres propiedades (trabajadas en el ejemplo anterior)
• Se creó un método llamado “alertamarca”,
• Dentro del cual declaramos una “función anónima” (esto quiere decir función
sin nombre)
• Para terminar la definición de método y objeto cerramos las llaves.
• Para que imprima el resultado se le ingresa la siguiente línea de código antes de
cerrar la etiqueta script.

En el anterior código se ingresa el nombre del objeto y después de un punto, el

nombre del método, siempre con los dos paréntesis como en toda función.

Figura 66, Ejecución de código

Fuente: Elaborada por el Autor

Código fuente del ejercicio anterior:

 Figura 67, Código
Fuente: Elaborada por el Autor

Ejercicio 13

1. El estudioso debe crear un objeto llamado persona, debe asignarle al objeto

los siguientes valores (nombre, peso, estatura, sexo, edad),

2. Mostrar una ventana de alerta con el nombre de la persona, peso, estatura,

sexo, edad

3. Revise el código teniendo en cuenta que debe cargar nuevos valores al

objeto persona y mostrarlos en una ventana de alerta con los nuevos datos.

Competencias
“El estudioso estará en capacidad de crear objetos y asignar valores a los objetos
en JavaScript”
 MATERIAL DE APOYO

- Video Tutorial, ¿Que es JavaScript? Webfanatico, 2014, Curso de JavaScript

1º, disponible en https://www.youtube.com/watch?v=cy0sI_cXp3U.
Consultado (29 de abril de 2015)

- Video tutorial, Curso de Javascript 1 Introducción. falconmaster 2012,

disponible en https://www.youtube.com/watch?v=Mfmf83XC5Uw

- Video tutorial, Curso de Javascript 2 Variables. falconmaster 2012, disponible

en https://www.youtube.com/watch?v=fnaUwm81i2c

- sublimetext.com/2, 2013, download, descarga de software editor de texto y

de código fuente disponible en http://www.sublimetext.com/2 (Consultado el
1 de marzo de 2015).
 -

GLOSARIO

Compilador: Los compiladores son programas o herramientas encargadas de

compilar. Un compilador toma un texto (código fuente) escrito en un lenguaje de alto
nivel y lo traduce a un lenguaje comprensible por las computadoras (código objeto).
Básicamente, existen dos grandes formas de ejecutar programas: programas
compilados (previamente pasados por un compilador) y programas interpretados
(necesitan pasar por un intérprete para ejecutarse en tiempo real).
(http://www.alegsa.com.ar/Dic/compilador.php#sthash.FF8hEvlz.dpuf.)

Embeber: En programación o desarrollo de páginas web, embeber significa insertar

(incrustar) código de un lenguaje dentro de otro lenguaje. Generalmente el código
embebido es llamado script, y sirve para hacer más potente a un lenguaje. Por
ejemplo, las páginas web se desarrollan en lenguaje HTML, pero puede embeberse
códigos JavaScript o PHP para aumentar las posibilidades.
(http://www.alegsa.com.ar/Dic/embeber.php#sthash.e3g14d07.dpuf)

Sintaxis: proviene del término en latín syntaxis, que a su vez deriva de un vocablo
griego que se traduce al español como “coordinar”. Se trata de la rama de la
gramática que ofrece pautas creadas para saber cómo unir y relacionar palabras a
fin de elaborar oraciones y expresar conceptos de modo coherente. En la
informática, la sintaxis se entiende como el grupo de normas que marcan las
secuencias correctas de los elementos propios de un lenguaje de programación.
(http://definicion.de/sintaxis/)

Navegador Web: Un navegador es un software utilizado para acceder a internet.

Un navegador te permite visitar páginas web y hacer actividades en ella, como
iniciar sesión, ver contenido multimedia, enlazar de un sitio a otro, visitar una página
desde otra, imprimir, y enviar y recibir correo, entre muchas otras actividades. Los
nombres de los navegadores más comunes del mercado son: Microsoft Internet
Explorer, Mozilla Firefox, Apple Computer's Safari y Opera.
(http://www.allaboutcookies.org/es/faqs/navegador.html)

Ebooks: Es un libro en formato electrónico o digital. Está confeccionado para ser

leído en cualquier tipo de ordenador o en dispositivos específicos como los lectores
de tinta electrónica e, incluso, en ordenadores de bolsillo o teléfonos
móviles.(http://definicion.de)

Lenguaje de Programación: como lenguaje se entiende a un sistema de

comunicación que posee una determinada estructura, contenido y uso. La
programación es, en el vocabulario propio de la informática, el procedimiento de
escritura del código fuente de un software. De esta manera, puede decirse que la
programación le indica al programa informático qué acción tiene que llevar a cabo y
cuál es el modo de concretarla (http://definicion.de/lenguaje-de-
programacion/#ixzz3Z0R3oOpj)

Script: Un script en el lado del cliente es un programa que puede acompañar a un

documento HTML o que puede estar incluido en él. El programa se ejecuta en la
máquina del cliente cuando se carga el documento, o en algún otro instante, como
por ejemplo cuando se activa un vínculo. El soporte de scripts de HTML es
independiente del lenguaje de scripts.

Iteración: Es un vocablo que tiene su origen en el término latino iteratio. Se trata de

una palabra que describe el acto y consecuencia de iterar, un verbo que se emplea
como sinónimo de reiterar o repetir (entendidos como volver a desarrollar una acción
o pronunciar de nuevo lo que ya se había
dicho).(http://definicion.de/iteracion/#ixzz3Z0Rw2QZ2)

Bucle: Nos referimos a estructuras de repetición o bucles en alusión a instrucciones

que permiten la repetición de procesos un número n de veces. Los bucles se pueden
materializar con distintas instrucciones como for, while, etc. Un bucle se puede
anidar dentro de otro dando lugar a que por cada repetición del proceso exterior se
ejecute n veces el proceso interior. (
http://www.aprenderaprogramar.com/index.php?option=com_content&view=article
&id=624:tipos-de-bucles-java-bucle-for-operadores-y-sentencia-break-ejemplo-
ejercicio-resuelto-cu00658b&catid=68:curso-aprender-programacion-java-desde-
cero&Itemid=188)
 WEBGRAFIA.

- Librosweb, (Enero, 2015). JavaScript, Recuperado el 26 de marzo de 2015, en

http://www. librosweb.es/libro/javascript.htm

- Desarrollo web, programación en JavaScript 2001 curso de JavaScript, disponible

en http://www.desarrolloweb.com/articulos/495.php . Consultado (29 de abril de
2015)

- JavaScript Básico, 2011, Botón atrás, disponible en ,

https://winredblog.files.wordpress.com/2011/04/recursoshtml6.pdf Consultado (1 de
mayo de 2015)
-
- Librosweb.es programación en JavaScript 2015, diseño web, disponible en
http://librosweb.es/libro/javascript/capitulo_4/funciones.html, Consultado (1 de
mayo de 2015)

- Cursoenhd, Juan gomez (Febrero 2014) curso de HTML5 con CSS3 y java script,
(2014) Recuperado el 26 de marzo de 2015 en www.cursoenhd.com

-
 BIBLIOGRAFIA

- MediaActive. (2014). Aprender HTML5, CSS3 Y Javascript, con 100 ejercicios

prácticos Primera edición 2014. México: Alfaomega- Marcombo.

- Gauchat, Juan Diego (2012). El gran libro de HTML5, CSS3 y Javascript,

primera edición 2012, España: Alfaomega- Marcombo.

- Lopez Quijado Jose; (2011), Domine Javascript Con Apoyo Web Andrés,
tercera Edición, España, Salmandra.

- Jhon Freddy Vega, Christian Van Des Henst. (2011). Guía HTML5, El presente
de la web. HTML5, CSS3 y Javascript, Cristalab, Colombia, Creative Commons

- Emmanuel Gutierrez; (2009) JavaScript conceptos básicos y avanzados,

Barcelona España, Ediciones ENI