Desarrollo de Entornos

Web
UNIDAD 1. Programación en lenguaje JavaScript
Tema 1: JavaScript
1.1. Tema 1: JavaScript
Figura 1
JavaScript

Nota. Adaptado de JavaScript logo por

Henri Bergius.
https://bergie.iki.fi/blog/11272210057/

2
Índice
1.1. Tema 1: JavaScript
1.1.1. Introducción
1.1.2. Elementos de un programa en JavaScript
1.1.3. Estructuras de control: condicionales, selectivas y repetitivas, sintaxis

3
Capacidades
• Diseña y programa páginas web para un sitio web utilizando etiquetas
HTML5 y el lenguaje JavaScript.

4
Introducción
Figura 2
• Una página web dinámica es una página que se Página web

actualiza conforme el usuario va haciendo peticiones,

navegando por la página o actualizando su contenido.
• Esto se hace posible porque una página dinámica tiene
asociada una aplicación web o una Base de Datos
desde la que se permite visualizar el contenido.
• Para la creación de este tipo de páginas deberán
utilizarse etiquetas HTML y algún lenguaje de
programación que se ejecute tanto del “lado servidor”
como del “lado cliente”.

Nota. Adaptado de Cibertec, 2023,

https://www.cibertec.edu.pe/

5
1.1.1. Introducción
JavaScript
• JavaScript (JS) es un lenguaje de programación interpretado, 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.
• La integración de JavaScript es muy flexible, ya que existen al menos tres formas para incluir código
JavaScript en las páginas web:
o JavaScript en los elementos, incluyendo código en los eventos. Ej.: onLoad="alert('hola')"
o JavaScript en el mismo documento, inserta el código dentro de las etiquetas <script> </script>. Se
recomienda definir el código JavaScript dentro de la cabecera del documento
o Usando un archivo externo. Esta opción permite la reutilización de código y una mejor organización. El
archivo externo tiene la extensión .js y utiliza la etiqueta <script src="archivo.js"> </script>

6
1.1.2. Elementos de un programa en JavaScript
• Utiliza llaves {} para delimitar los bloques de instrucciones.
• Las líneas terminan en ;.
• Admite estructuras de selección y de repetición.
• Reconoce diversos tipos de datos como String, Number, Boolean, Array, sin necesidad de una
declaración explícita. Realiza las conversiones automáticamente cuando es necesario.
• Las cadenas se pueden definir entre ' ' o " ".
• Admite fechas, funciones trigonométricas, aritméticas y expresiones regulares.
• Usa prototipos en vez de clases. Puede definir un objeto creando una función constructora.
• Las variables en JavaScript se definen con var, let y const.
• El nombre de una variable también se le conoce como identificador y debe cumplir la siguiente
normativa:
o El identificador únicamente puede estar formado por números, letras, y los símbolos $ y _ a lo sumo.
o El primer carácter del identificador no debe ser un número.

7
1.1.2. Elementos de un programa en JavaScript
• Tipos de datos
o Numéricos, se usan para contener valores numéricos enteros (llamados integer) o decimales (llamados float).
var cantidad = 30; var precio = 15.6;
o Cadenas de Texto, se usan para contener caracteres, palabras y/o frases de texto
var nombreCompleto = "José Atúncar";

o Array, es una colección de variables, sin importar los tipos de los que sean cada una.
var días = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado",
o Booleanos,"Domingo"] ; tipo lógico.
o variables de
var mayorDeEdad = true;

8
1.1.2. Elementos de un programa en JavaScript
• Operadores. Los operadores manipulan los valores de las variables, realizan cálculos matemáticos y
comparan los valores de diferentes variables.
o Asignación, Sirve para asignar un valor a una variable.
cantidad= 30;
o Incremento y decremento, Sirven para incrementar (++) o decrementar (--) el valor de una variable.
cont++;
o Lógicos, Los operadores lógicos son adecuados para realizar condiciones y lógica matemática. Negación (!), and, or.

o Matemáticos, Los operadores declarados son: suma (+), resta (-), multiplicación (*) y división (/).

o Relacionales, Los relacionales: mayor que (>), menor que (<), mayor o igual (>=), menor o igual (<=), igual que (==) y
distinto de (!=).

9
1.1.3. Estructuras control: condicionales, selectivas y
repetitivas, sintaxis
• Estructura condicional, permite determinar la ejecución de un bloque según el valor de verdad de las
expresiones booleanas a evaluar. Puede ser condicionales simples, dobles y anidadas.

Condicional simple (if)

var mostrado = false;
var mensaje = true; Condicional anidado
if (!mostrado && mensaje) { if (edad < 12) {
alert(“primera vez que se muestra el mensaje"); alert("Todavía eres muy pequeño");
} } else if(edad < 19) {
alert("Eres un adolescente");
Condicional doble (if .. else) } else if(edad < 35) {
var nombre = ""; alert(“Eres un joven");
if (nombre == "") { } else {
alert("No ingresó su nombre"); alert(“Eres un adulto");
} else { }
alert("Nombre registrado");
}

10
1.1.3. Estructuras control: condicionales, selectivas y
repetitivas, sintaxis
• Estructura selectiva, permite evaluar directamente una variable respecto a sus posibles valores. Cada
posible valor ejecutará bloques de código los cuales se limitarán con la instrucción break esta
estructura cuenta además con una opción default en caso el valor a evaluar no corresponda a los
anteriores.

Estructura switch
var a = new Date();
día=a.getDay();
switch (día) {
case 5: alert("Viernes social"); break;
case 6: alert("Sábado deportivo"); break;
case 0: alert("Domingo familiar"); break;
default: alert("Día de Semana");
}

11
1.1.3. Estructuras control: condicionales, selectivas y
repetitivas, sintaxis
• Estructura repetitiva, estas estructuras permiten repetir un bloque de código mientras se cumplan
determinadas condiciones o completa la lectura de elementos.

Estructura while (evaluar antes de ejecutar) Estructura for (recorrer desde … hasta)
while (i < 10) { for (var i=1; i<10; i++){
imprimir("" + i); imprimir(“" + i);
i++; }
}

Estructura do while (ejecuta, después evaluar) Estructura for .., each (recorrer en )
do { for (i in navigator){
imprimir("" + i); document.write("Propiedad :"+i);
i++; document.write(" valor: ": +navigator[i]);
} while (i < 10); }

12
Ejercicio

• Se desea programar en una página HTML aplicando los

fundamentos básicos de la programación en JavaScript.
• Dicha programación deberá definirlo en un archivo externo y
enlazarlo, a la página HTML, con la etiqueta <script>.

13
Conclusiones
• JavaScript es un lenguaje de programación que se utiliza para crear páginas web dinámicas: páginas que incorpora
efectos como texto que aparece y desaparece, animaciones, acciones.
• Para incluir JavaScript a una página HTML:
• Encerrar entre etiquetas <script>.
• Incluir en un archivo externo de tipo JavaScript y se enlaza mediante la etiqueta <script>.
• JavaScript utiliza objetos de Entrada:
• alert, permite visualizar mensajes
• prompt, permite el ingreso de datos
• confirm, interacción de operaciones a través de botones
• document.write y document.writeln, permite escriben texto u otros elementos al cargar la página.

• innerHTML permite escribir en solo una sección específica, sin alterar el resto de los elementos, es la opción ideal
y más empleada en la actualidad.

14
Referencias bibliográficas
• Álvarez García, A. (2019). Manual Imprescindible: HTML 5.2. Anaya Multimedia.
Centro de Información: Código 006.74HTML ALVA/M
• Gauchat, J. D. (2019). El gran libro de HTML5, CSS3 y JavaScript. 3a ed. Marcombo.
https://repositorio.uci.cu/jspui/bitstream/123456789/10129/1/Gran_Libro_HTML5_CSS3_Javascript.pdf
• Meloni, J. C. (2015). Html5, CSS3 y JavaScript. Anaya Multimedia.
Centro de Información: Código 006.74HTML MELO 2016
• Rubiales Gómez, M. (2018). Curso de desarrollo web: HTML, CSS y JavaScript. Anaya Multimedia.
Centro de información: 006.74HTML RUBI/C

15
 GRACIAS

SEDE INDEPENDENCIA SEDE BREÑA SEDE TRUJILLO

Av. Carlos Izaguirre 233 Av. Brasil 714 – 792 (CC La Rambla – Piso 3) Calle Borgoño 361
Independencia – Lima Breña – Lima Trujillo
Teléfono: 633-5555 Teléfono: 633-5555 Teléfono: (044) 60-2000

SEDE SAN JUAN DE LURIGANCHO SEDE LIMA CENTRO SEDE BELLAVISTA SEDE AREQUIPA
Av. Próceres de la Independencia 3023-3043 Av. Uruguay 514 Av. Mariscal Oscar R. Benavides 3866 – 4070 Av. Porongoche 500
San Juan de Lurigancho – Lima Cercado – Lima (CC Mall Aventura Plaza) (CC Mall Aventura Plaza)
Teléfono: 633-5555 Teléfono: 419-2900 Bellavista – Callao Paucarpata - Arequipa
Teléfono: 633-5555 Teléfono: (054) 60-3535

www.cibertec.edu.pe