FUNDAMENTOS

DE
JAVASCRIPT

Curso: Desarrollo de Entornos Web

Semana 1
 Logro del curso

Al término de la unidad, el alumno, con el lenguaje

JavaScript, diseña programas, incorporados en una
página del Sitio Web y para validar formularios.
Contenido

1 Introducción al javaScript
2 Elementos de un programa en javascript.
2.1 Entradas y salidas: alert, input.
2.2 Escritura de datos: document.write
2.3 Ámbito de las variables
2.4 Estructuras de control: condicionales y
selección, sintaxis
 Introducción
Estructuras
al Elementos
de Control
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.
 Introducción
Estructuras
al Elementos
de Control
JavaScript

JavaScript es parecido a Java y admite lo siguiente:

1. Estructuras de selección y de repetición.
2. Utiliza llaves {} para delimitar los bloques de instrucciones.
3. Varios tipos de datos, como String, Number, Boolean, Array.
4. Admite fechas, funciones aritméticas y expresiones
regulares.
5. Usa prototipos en vez de clases. Puede definir un objeto
creando una función constructora.
6. JavaScript no declara explícitamente los tipos de datos de
las variables, realiza las conversiones automáticamente
cuando es necesario.
 Introducción
Estructuras
al Elementos
de Control
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.
 Introducción
Estructuras
al Elementos
de Control
JavaScript

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>
 Introducción
Estructuras
al Elementos
de Control
JavaScript

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>
 Introducción
Estructuras
al Elementos
de Control
JavaScript

Función document.write
• Existen varias 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 la pantalla: '+screen.width+' pixeles')
</script>
 Introducción
Estructuras
al Elementos
de Control
JavaScript

Ámbito de las variables

• Las variables se crean mediante la palabra reservada var.
• La palabra reservada var solamente se debe indicar al definir por
primera vez la variable, lo que se denomina declarar una
variable.
• Cuando se utilizan las variables en el resto de las instrucciones
del script, solamente es necesario indicar su nombre.

Variables:
var nombre=“Maria”;
var cantidad= 30;
var precio= 15.6;
var ic=impCom(precio,cantidad);
 Introducción
Estructuras
al Elementos
de Control
JavaScript

Estructura if

var mostrado = false;

var mensaje = true;
if(!mostrado &&mensaje) {
alert(“primera vez que se muestra el mensaje");
}

Estructura if else

var nombre = "";

if(nombre == "") {
alert("No has ingresado tu nombre");
}
else {
alert("Nombre ingresado");
}
 Introducción
Estructuras
al Elementos
de Control
JavaScript

Estructura if else if

if(edad < 12) {

alert("Todavía eres muy pequeño");
}
else if(edad < 19) {
alert("Eres un adolescente");
}
else if(edad < 35) {
alert(“Eres un joven");
}
else {
alert(“Eres un adulto");
}
 Introducción
Estructuras
al Elementos
de Control
JavaScript

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");
}
 Introducción
Estructuras
al Elementos
de Control
JavaScript

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

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