FUNDAMENTOS DE

JAVASCRIPT

Curso: Desarrollo de Entornos Web

Equipo de Profesores del Curso
 Caso

Dada la siguiente página, mostrar la fecha y hora

del sistema en el párrafo, al hacer clic en el botón
Contenido
1.1 Tema 1: Fundamentos de JavaScript
1.1.1 Elementos de un programa en JavaScript.
1.1.2 Entradas y salidas: alert, input.
1.1.3 Estructuras de condicional y selección
1.1.4 Estructura repetitiva

Logro del curso

Al término de la sesión, el alumno diseña páginas
interactivas para un sitio web aplicando conceptos
básicos de javascript.
• Una página web dinámica es una
página que se 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”.
 ¿Qué es JavaScript?

• JavaScript (JS) es un lenguaje de programación

interpretado, que se utiliza principalmente para crear
páginas web dinámicas.
• Se puede probar directamente en cualquier navegador
sin necesidad de procesos intermedios.
• Para interactuar con una página web se provee al
lenguaje JavaScript de una implementación del
Document Object Model (DOM).
 Integración del código JS

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

• JavaScript en los elementos, incluyendo código en los

eventos. Ej: onLoad="alert('hola’)”

• 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
Integración del código JS
• JavaScript en un archivo externo. 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>
 Estructuras
Elementos Entradas y
de
JavaScript salidas
selección

• 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
• 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.
 Estructuras
Elementos Entradas y
de
JavaScript salidas
selección

• Las variables en JavaScript se utilizan mediante la palabra reservada

‘var’.
• El nombre de una variable también se le conoce como identificador
y debe cumplir la siguiente normativa:
• El identificador únicamente puede estar formado por números, letras, y los
símbolos ‘$’ y ‘_’ a lo sumo.
• El primer carácter del identificador no debe ser un número.
 Estructuras
Elementos Entradas y
de
JavaScript salidas
selección

• Tipos de datos. A diferencia de otros lenguajes, En JavaScript

dependiendo de los valores que almacenen las variables pueden ser
de un tipo u otro.
• Numéricos, se usan para contener valores numéricos enteros (llamados integer) o
decimales (llamados float).

var cantidad= 30; var precio= 15.6;

• Cadenas de Texto, se usan para contener caracteres, palabras y/o frases de texto

var nombreCompleto="José Atúncar";

• Array, es una colección de variables, sin importar los tipos de los que sean cada una.

var dias = ["Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado", "Domingo"]

• Booleanos, o variables de tipo lógico.

var mayorDeEdad=true;
 Estructuras
Elementos Entradas y
de
JavaScript salidas
selección

• Operadores. Los operadores manipulan los valores de las variables,

realizan cálculos matemáticos y comparan los valores de diferentes
variables..
• Asignación, Sirve para asignar un valor a una variable.
cantidad= 30;
• Incremento y decremento, Ambos operadores sirven para decrementar o incrementar el
valor de una variable.
cont++;
• Lógicos, Los operadores lógicos son adecuados para realizar condiciones y lógica
matemática. Negación (!), AND, OR.
• Matemáticos, Los operadores declarados son: suma (+), resta (-), multiplicación (*) y
división (/).
• Relacionales, Los relacionales: mayor que (>), menor que (<), mayor o igual (>=), menor o
igual (<=), igual que (==) y distinto de (!=).
 Estructuras
Elementos Entradas y
de
JavaScript salidas
selección

Funciones:
function impCom(precio,cantidad){
return precio*cantidad:
}

function impDes(cant,ic){
if ( cant<20)
return ic*0.1;
else
return ic*0.3;
}
 Estructuras
Elementos Entradas y de
JavaScript salidas selección

El método prompt y alert:

<script>
// Pedimos al usuario que introduzca su nombre
var nombre = prompt(“Introduzca su nombre”);
// Mostramos texto concatenado con el nombre ingresado
alert(“Hola ”+nombre);
</script>
 Estructuras
Elementos Entradas y de
JavaScript salidas selección

Ejemplo:
var dias = ["Lunes", "Martes", "Miércoles", "Jueves",
"Viernes", "Sábado“, "Domingo"];

for(var i=0; i<dias.length; i++)

{
alert(dias[i]);
}
 Estructuras
Elementos Entradas y de
JavaScript salidas selección

El método document.write:
<script>
document.write('Ancho de la pantalla: '+screen.width+' pixeles')
</script>
El método confirm:
<script>
var a=1,b=5;
var opcion=confirm(a+" es mayor que "+b+"?");

if(opcion)
alert("hizo clic en Aceptar");
else
alert("hizo clic en Cancelar");
</script>
 Estructuras
Elementos Entradas y
JavaScript salidas de
selección

Estructura if Estructura if else if

var mostrado = false; if(edad < 12) {
var mensaje = true; alert("Todavía eres muy pequeño");
if(!mostrado &&mensaje) { }
alert(“primera vez que se muestra el mensaje"); else if(edad < 19) {
} alert("Eres un adolescente");
}
Estructura if else else if(edad < 35) {
alert(“Eres un joven");
var nombre = ""; }
if(nombre == "") { else {
alert("No has ingresado tu nombre"); alert(“Eres un adulto");
} }
else {
alert("Nombre ingresado");
}
 Estructuras
Elementos Entradas y
JavaScript salidas de
selección

Estructura switch

var a = new Date();

dia=a.getDay();
switch (dia)
{
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");
}
 Estructuras
Elementos Entradas y
JavaScript salidas de
repetición

Estructura while: Estructura do while:

while (condición) { do {
código código
} }
while (condición);
Ejemplo:
Ejemplo:
while (i < 10) {
do {
imprimir(“" + i);
imprimir(“" + i);
i++;
i++;
}
}while (i < 10);
19
 Estructuras
Elementos Entradas y
JavaScript salidas de
repetición

Estructura for:
for (inicialización; condición; incremento)
código
}

Ejemplo:
for (var i=1; i<10; i++){
imprimir(“" + i);
}

20
 Estructuras
Elementos Entradas y
JavaScript salidas de
repetición

Estructura for in:

for (índice en objeto) {
código
}

Ejemplo:
for (i in navigator){
document.write("Propiedad :"+i);
document.write(" valor: ": +navigator[i]);
}

21
Bibliografia
Fundamentos de JavaScript.
1. https://msdn.microsoft.com/es-es/library/6974wx4d(v=vs.94).aspx
2. http://www.desarrolloweb.com/javascript/
3. http://www.desarrolloweb.com/articulos/tipos-datos-variables-entrada-
salida.html
4. http://www.desarrolloweb.com/manuales/20/
Estructuras de selección y repetición.
1. http://librosweb.es/libro/javascript/capitulo_3/estructuras_de_control_
de_flujo.html
2. http://librosweb.es/libro/javascript/capitulo_4/otras_estructuras_de_co
ntrol.html
 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. Benvides 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: 633-5555 Bellavista – Callao Paucarpata - Arequipa
Teléfono: 633-5555 Teléfono: (054) 60-3535

www.cibertec.edu.pe