Desarrollo de Entornos

Web
Unidad 1: Programación Básica en Lenguaje JavaScript
Tema 1: Fundamentos de JavaScript
1.1.Tema 1: Fundamentos de JavaScript

2
Índice
1.1. Tema 1: Fundamentos de JavaScript
1.1.1 Introducción al JavaScript
1.1.2 Elementos de un programa en JavaScript
1.1.2.1 Entradas y salidas: alert, prompt, confirm
1.1.2.2 Escritura de datos: document.write
1.1.2.3 Ámbito de las variables
1.1.2.4 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
• Para conocer como programar en JavaScript, vamos a aprender los fundamentos básicos del programa.
• En dicho proceso vamos a utilizar archivos externos de tipo JS para definir la programación.

5
1.1. Fundamentos de JavaScript

6
1.1.1 Introducción al JavaScript
• JavaScript es un lenguaje de programación que se utiliza
principalmente para crear páginas web dinámicas.
• Una página web dinámica es aquella que incorpora efectos
como texto que aparece y desaparece, animaciones, acciones
que se activan al pulsar botones y ventanas con mensajes de
aviso al usuario.

7
1.1.1 Introducción al JavaScript
Para incluir JavaScript a una página HTML:
• Encerrar entre etiquetas <script>, se recomienda definir el
código dentro de la cabecera del documento.
• Se puede incluir en un archivo externo de tipo JavaScript y se
enlaza mediante la etiqueta <script>. La principal ventaja es
reutilizar el código en todas las paginas del sitio web.

8
1.1.2 Elementos de un programa en JavaScript

9
1.1.2.1 Entradas y salidas: alert
El método alert:
<script>
alert(“Hola Mundo”);
</script>

10
1.1.2.1 Entradas y salidas: prompt
El método prompt
<script>
let nombre = prompt(“Su nombre”);

alert(“Hola ”+nombre);

</script>

11
1.1.2.1 Entradas y salidas: confirm
El método confirm:
<script>
let a=1,b=5;
var opcion=confirm(a+“> “+b+"?");
if(opcion)
alert("hizo clic en Aceptar");
else
alert("hizo clic en Cancelar");
</script>

12
1.1.2.2 Escritura de datos: document.write
• Existen funciones que permiten escribir y representar texto en
una página web, son: document.write, document.writeln y
innerHTML.

• Los dos primeros escriben texto u otros elementos al cargar la

página, si son llamados posteriormente, será necesario volverla a
cargar.

• 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.

• <script>
document.write('Ancho de pantalla: ‘ + screen.width + ' pixeles')
</script>

13
1.1.2.3 Ámbito de las variables

• La palabra reservada var, permite definir por primera vez la

variable. Cuando se utilizan las variables en el resto de las
instrucciones del script, solamente es necesario indicar su
nombre.
• La palabra reservada let, permite definir la variable dentro de un
alcance más específico: dentro de un método o estructura de
control

14
1.1.2.3 Ámbito de las variables

Variables:
var nombre=“Maria”;
var cantidad= 30;

let precio= 15.6;

let ic=impCom(precio,cantidad);

15
1.1.2.4 Estructuras de control: condicionales,
selectivas y repetitivas, sintaxis

16
Estructura de control: condicionales

17
Estructura de control: condicionales

18
Estructura de control: condicionales

19
Estructura de control: selectivas

20
Estructura de control: repetitivas

21
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>

22
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.

23
Conclusiones
• JavaScript, como lenguaje de programación, utiliza:
• Variables, las cuales las declaramos utilizando las palabras reservadas: var o let
• Estructuras de control: uso de condicionales (if), selectivas (switch), repetitivas (for, while)

24
Referencias bibliográficas
• Álvarez García, Alonso (2019) Manual Imprescindible: HTML 5.2. Madrid: 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. Recuperado de
https://elevaciondigital.pe/wp-content/uploads/2019/06/El-gran-libro-de-HTML5-CSS3-y-JavaScript.pdf
• Meloni, Julie C. (2015) Html5, CSS3 y JavaScript. Madrid: Anaya Multimedia.
Centro de Información: Código 006.74HTML MELO 2016
• Rubiales Gómez, Mario (2018) Curso de desarrollo web: HTML, CSS y JavaScript. Madrid: Anaya Multimedia.
Centro de información: 006.74HTML RUBI/C
• Desarrollo Web (s.f.) Manual de React JS. Recuperado de https://desarrolloweb.com/manuales/manual-de-
react.html

25
 GRACIAS

SEDE MIRAFLORES SEDE INDEPENDENCIA SEDE BREÑA SEDE TRUJILLO

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

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