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="[Link]"> </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<[Link]; i++)
{
alert(dias[i]);
}
Estructuras
Elementos Entradas y de
JavaScript salidas selección
El método [Link]:
<script>
[Link]('Ancho de la pantalla: '+[Link]+' 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=[Link]();
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){
[Link]("Propiedad :"+i);
[Link](" valor: ": +navigator[i]);
}
21
Bibliografia
Fundamentos de JavaScript.
1. [Link]
2. [Link]
3. [Link]
[Link]
4. [Link]
Estructuras de selección y repetición.
1. [Link]
de_flujo.html
2. [Link]
[Link]
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
[Link]
