Introducción a la Programación Multimedial Javascript
Importante: Javascript NO es Java Java es un lenguaje interpretado creado por Sun Microsystem que se ejecuta en una JVM y era muy popular en aplicaciones móviles hace unos años. .
¿Qué es Javascript? Es un lenguaje de programación que se inserta dentro de un documento HTML. El navegador web es quién se encarga de interpretarlo (similar a lo que en algunos lenguajes se conoce como “compilar”).
¿Qué es Javascript? Documento HTML Etiquetas HTML (strong, p, div, etc). Imágenes Javascript
Sintaxis <html> <body> </body> </html> <script> // código Javascript </script> </body> </html>
Sintaxis general Var Se usa para definir una variable. Ejemplo: var num; También se puede inicializar y definir a la vez. Ejemplo: var num = 10; Comentarios Se usan para explicar algo del código sin que el navegador lo lea. Por lo general son comentarios o recordatorios para otros programadores. Ejemplo: // Esto es un comentario Punto y coma (;) Se usan siempre para finalizar una instrucción. No se usa para estructuras condicionales, para eso se usan llaves de apertura { y cierre } Ejemplo: var num = 10; // Está bien usado el punto y coma. If(num>10); // Está mal usado el punto y coma.
Input y Output Alert( frase ) Se usa para imprimir en pantalla algo. Ejemplo: alert (“hola alumnos”); Prompt ( frase ) Se usa para solicitar datos al usuario, y se debe guardar en una variable para no perderlo. Ejemplo: var numero= prompt (“Ingrese un numero”);
Ejemplo #1 Solicitar al usuario que ingrese su nombre, y mostrar en pantalla el mensaje “Hola XXX”.
<html> <body> <script> var nombre = prompt (“Ingrese su nombre”); var mensaje = “Hola “ + nombre; alert (mensaje); </script> </body> </html>
Integer vs String Integer (número) Es un número, y como tal, permite realizar operaciones aritméticas como sumar, restar, etc. String (palabra) Es una letra o palabra que no permite realizar operaciones aritméticas.
Ejercicio #1: ¿Qué imprime cada caso? Var num1 = 1; Var num2 = 2; Var str1 = “Hola”; Var str2 = “123”; Alert (num1 + num2); Alert (num2 + str2); Alert (str1 + str2); Alert (num1 + str2); Alert (str1 + num1 + “ “);
ParseInt Sirve para intentar convertir una palabra en un número. Si puede convertirlo, devolverá el número correspondiente. Sino, devolverá la palabra NaN (Not a Number).
Ejercicio #2: ¿Qué imprime cada caso? Var num1 = 1; Var num2 = 2; Var str1 = “Hola”; Var str2 = “123”; Str1 = parseInt(str1); Str2 = parseInt(str2); Alert (num1 + num2); Alert (num2 + str2); Alert (str1 + str2); Alert (num1 + str2); Alert (str1 + num1 + “ “);
Ejercicio #3 Solicitar al usuario que ingrese un número y mostrar el cuadrado de ese número.
<html> <body> <script> var str = prompt(“Ingrese un numero”); var num = parseInt(str); alert(num*num); </script> </body> </html>
Condicionales IF (SI) if ( condición ) { // Instrucciones si la condición es verdadera. } IF / ELSE (SI / SINO) If (condición) { // Instrucciones si la condición es verdadera. } else { // Instrucciones si la condición es falsa. }
Ejemplo #2 Escribir un código en javascript que valide si un número es mayor a 10 e imprima “mayor” o “menor”.
<html> <body> <script> var num = 4; if(num>10){ alert(“Es mayor”); } else{ alert(“Es menor”); </script> </body> </html>
Ejercicio #4 Realizar en Javascript los puntos 2 y 3 del TP1.
Bucle FOR (repetir) for(contador=0; contador<10; contador++){ // Instrucciones que se repetirán 10 veces. // Por cada vuelta del for, la variable “contador” se irá sumando de a uno. }
Bucle WHILE (mientras) var contador = 0; while (contador < 10){ // Instrucciones que se repetirán 10 veces. // Por cada vuelta del while, la variable se irá sumando de a uno, pero debo escribirla yo mismo sino entro en un bucle infinito. contador = contador + 1; }
Ejercicio #5 Escriba un código que le pida un número al usuario e imprima esa cantidad de veces la palabra “HOLA”.
<html> <body> <script> var num = parseInt ( prompt (“ingrese un numero”)); for( contador = 0; contador < num; contador ++){ alert (“hola”); } </script> </body> </html>
Ejercicio #6 Escriba un código que le pida números al usuario hasta que ingrese un número mayor a 20.
<html> <body> <script> var num = 0; while(num < 20){ num = parseInt ( prompt (“Ingrese un numero”) ); } </script> </body> </html>