CONCEPTOS INTRODUCTORIOS DE JAVASCRIPT Preparado por: Prof. Nelliud D. Torres 14/octubre/2004
AL FINAL DEL SEMINARIO EL ESTUDIANTE PODRÁ: Comprender que es JavaScript y sus diferencias con Java. Un poco de Historia sobre Javascript. Qué puede hacer Javascript y que no. Entender el formato de un programa en JavaScript. Conocer los Tipos de Datos que se utiliizan. Entender los Operadores. Conocer Instrucciones básicas. Saber las palabras reservadas. Conocer los caracteres especiales (“escape secuence”). Saber los objetos pre-definidos. Entender y diferenciar los dos tipos de funciones. Observar en el seminario cómo se ejecutan algunos “scripts”.
¿Qué es Javascript? Lenguaje de programación que se puede insertar en el “Header” de las páginas Web (“Web pages”) y se ejecuta a nivel del cliente. JavaScript es un lenguaje interpretado, es decir, no require compilación. Lenguaje orientado a eventos. Lenguaje orientado a objetos.
Historia de Javascript El lenguaje fue inventado por Brendan Eich en Netscape. El nombre original de JavaScript fue LiveScript, pero se modificó a último momento. Se utilizó por primera vez en la versión 2.0 de Netscape.
Historia de Javascript – cont. Netscape introduce JavaScript y trata de establecer un estándar de programación de código en el navegador(“Browser”). MicroSoft por su parte, apoya una versión parcial de JavaScript, con el nombre de JScript, en su Internet Explorer. Cuando mencione Javascript, me voy a referir a ambos “scripts” (Javascript y Jscript).
¿Qué puede hacer Javascript? Ejecutar cálculos matemáticos. Validar datos entrados en una forma. Juegos interactivos. Maneja efectos especiales en las pantallas. Manejo de gráficas en la página. Manejar seguridad (“Password”).
¿Qué más se puede hacer con Javascript ? Mejorar la interactividad y el dinamismo de una página Web. Dar apoyo a las aplicaciones orientadas al Internet. Controlar las ventanas del navegador y el contenido que muestran. Capturar los eventos generados por el usuario y responder a ellos sin la necesidad de que el servidor intervenga o salir al Internet.
¿Algo más? Comunicarse con el usuario mediante diversos métodos. Evitar depender del servidor Web para cálculos sencillos. Puede ser utilizado como un lenguaje introductorio para enseñar conceptos básicos de programación.
¿Qué no se puede hacer con Javascript? No puede crear aplicaciones autónomas. Solo puede ejecutarse dentro de un documento tipo HTML. Tiene ciertas peculiaridades y limitaciones que no se encuentran en un lenguaje de programación común como por ejemplo la definición de variables.
Java vs Javascript En lo único que se parecen es en el nombre y en su estilo heredado de C++. Son dos lenguajes con enfoques diferentes. Se compilan y ejecutan de forma diferente. Por lo tanto, no relacione ambos lenguajes.
TABLA COMPARATIVA JAVA VS JAVASCRIPT JAVASCRIPTJAVA Interpretado por el cliente. Compilado (bytecodes). Se descarga del servidor y se ejecuta en el cliente Orientado a Objetos.Basado en Clases. El código se integra e incrusta en documentos HTML. Se utilizan APPLETS. Se accede a ellos desde documentos. Los tipos de datos de las variables no se declaran. Es necesario definir los tipos de datos de las variables. No puede escribir automáticamente en el disco duro.
Comando que indica que comienza el código XHTML Comentarios “Header” de la página. Título de la página. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " Mi primer programa en JavaScript FORMATO DE UN PROGRAMA EN JAVASCRIPT Indica tipo de documento y lenguaje.
Comando de Javascript que se va a ejecutar. Final de código Javascript (script) Esta parte se deja en blanco si es que no se va a incluir comandos de HTML para la página. <!-- document.writeln(" Hello World! " ); // --> FORMATO DE UN PROGRAMA EN JAVASCRIPT – CONT.
PANTALLA CON LA CORRIDA DEL SCRIPT
TIPOS DE DATOS (“DATA TYPES”) JavaScript apoya los tipos de datos más importantes que se utilizan en los lenguajes de programación más comunes. Tiene la peculiaridad de que no hay que indicar el tipo de dato cuando declaramos las variables. (Ejemplo: real, entero, char) Una variable puede cambiar su composición (tipo de dato) durante la ejecución del programa en forma dinámica.
TIPOS DE DATOS – CONT. TipoEjemplos NuméricoCualquier número, como 12, 22.5 o 2e8 “String” (Cadena) "Hola" u 'Hola' Booleano Verdadero (true) o falso (false) Objeto Más adelante hablaremos sobre esto. Función NULLPalabra clave para indicar ningún valor
DECLARACIÓN DE VARIABLES Permiten declarar variables dentro del código ya sean globales o locales. Ejemplo: var area,// area del rectángulo ancho_s,// ancho del rectángulo alto_s; // alto del rectángulo
ARREGLOS JavaScript provee apoyo para arreglos. Se define igual que una variable pero utilizando el operador “new” (se explicará en el próximo seminario) que permite crear instancias de objetos. En este caso me permite crear una instancia de un arreglo llamado miArreglo. Ejemplo: var miArreglo = new Array(10); for (i = 0; i < 20; i++) { miArreglo[i] = i; } Define un arreglo de 11 posiciones (0-10). Trabaja en base 0. Le está asignando el valor del suscrito dentro del arreglo.
OPERADORES BINARIOS OperadorDescripciónEjemplo = Asigna el valor del operando de la izquierda al operando de la derecha variable = 5; + = Suma el operando de la izquierda al de la derecha y asigna el resultado al operando de la derecha varNum += contador - = Resta al operando de la izquierda el de la derecha y asigna el valor al operando de la derecha varNum -= contador * = Multiplica el operando de la derecha por el de la izquierda y asigna el valor al operando de la derecha varNum *= contador / = Divide el operando de la izquierda por el de la derecha y asigna el valor al operando de la derecha varNum /= contador % = Divide el operando de la izquierda por el de la derecha y asigna el valor del resto de la división al operando de la derecha varNum %= contador
OperadorDescripción ++x Incrementa x en una unidad y devuelve el valor. x++ Devuelve el valor de x y lo deja incrementado en una unidad. -xDevuelve x negado. OPERADORES UNARIOS
OperadorDescripción && AND lógico (devuelve verdadero si los dos operandos son verdaderos, y falso en caso contrario) || OR lógico (devuelve verdadero si uno de los dos operandos o ambos son verdaderos, y falso en caso contrario) ! No lógico (devuelve verdadero si el operando es falso, y falso si es verdadero) OPERADORES LÓGICOS
OperadorDescripción == Devuelve verdadero si los dos operandos son iguales != Devuelve verdadero si los dos operadores son distintos > Devuelve verdadero si el primer operando es mayor que el segundo < Devuelve verdadero si el primer operando es menor que el segundo >= Devuelve verdadero si el primer operando es mayor o igual que el segundo <= Devuelve verdadero si el primer operando es menor o igual que el segundo OPERADORES DE COMPARACIÓN
PRECEDENCIA DE LOS OPERADORES Prioridad OperadorDescripción 1() [] Paréntesis, corchetes y el operador punto que sirve para los objetos. 2! negación, negativo e incrementos. 3* / % Multiplicación división y módulo. 4+-Suma y resta. 5 > >>> Cambios a nivel de bit.
PRECEDENCIA DE LOS OPERADORES – CONTINUACIÓN PrioridadOperadorDescripción 6 >= Operadores condicionales. 7== != Operadores condicionales de igualdad y desigualdad. 8& ^ |Lógicos a nivel de bit. 9&& ||Lógicos boleanos. 10 = += -= *= /= %= >= >>>= &= ^= != Asignación
INSTRUCCIONES JavaScript tiene un conjunto de instrucciones similares a otros lenguajes de programación como por ejemplo C++. Estas instrucciones ayudan en la programación e interactividad que el programador desea que su página posea. A continución explicamos algunas de ellas.
Es similar a la de C++. Puede utilizar if-then o if-then-else Apoya if anidados Sintaxis: if (condicion) { instrucciones } [else { instrucciones }] INSTRUCCIÓN – IF
Ejemplo - 1: if (studentGrade >= 60) document.writeln(“Paso el examen”); else document.writeln(“No paso el examen”); INSTRUCCIÓN – IF - CONT. - 1
Ejemplo - 2: if (studentGrade >= 60) } document.writeln(“Paso el examen”); document.writeln(“¡Estas en las papas!”); { else } document.writeln(“No paso el examen”); document.writeln(“A repetir estructura”); { INSTRUCCIÓN – IF - CONT. - 2
Ejemplo - 3: if ( grade >= 90 ) document.writeln(“A”); else if ( grade >= 80 ) document.writeln(“B”); else if ( grade >= 70 ) document.writeln(“C”); else if ( grade >= 60 ) document.writeln(“D”); else document.writeln(“F”); INSTRUCCIÓN – IF - CONT. - 3
INSTRUCCIONES – CICLOS - FOR Permite ciclos repetitivos sabiendo de antemano el número de ejecuciones que se van a utilizar. Similar también a C++. Sintaxis: for ([inicial;][final;][incremento]) {instrucciones }
INSTRUCCIONES – CICLOS – FOR - CONTINUACIÓN EJEMPLO-1: for (i=0; i<4; i++) {alert("Ahora van "+i)} EJEMPLO-2: for (i= 0; i < 10; i = i + 1) { document.write(“valor de i =”); document.writeln(i); }
INSTRUCCIONES – CICLOS - WHILE Permite crear ciclos repetitivos cuyo numero de repeticiones dependerá de una condicion. Se ejecuta de 0 a N veces. Sintaxis: while (condicion) { instrucciones }
INSTRUCCIONES – CICLOS – WHILE - CONTINUACIÓN Ejemplo: var producto = 1; while (producto <=1000) { producto = 2 * producto; document.writeln(producto); }
INSTRUCCIONES – CICLOS – DO-WHILE Permite crear ciclos repetitivos cuyo número de repeticiones dependerá de una condición. Se ejecuta de 1 a N veces. Sintaxis: do { instrucciones; } while (condición);
INSTRUCCIONES – CICLOS – DO-WHILE Ejemplo: var counter = 1; do { document.writeln( “ This is “ + “an h” + counter + “level head” + “</H” + counter + “>”); ++counter; } while (counter <= 6);
INSTRUCCIONES – SWITCH switch (opcion) { case “1”: instrucciones si el valor es 1; break; case “2”: instrucciones si el valor es 2; break; case “3”: instrucciones si el valor es 3; break; default: instrucciones si el valor no esta entre los anteriores; }
INSTRUCCIONES – COMENTARIOS Los comentarios son líneas que coloca el autor para propósitos de documentación interna en el programa. El interpretador del “Browser” ignora los comentarios por completo. Comentarios de una línea Sintaxis: // comentario Comentarios de varias líneas Sintaxis: /* comentario */
PALABRAS RESERVADAS abstractbooleanbreakbyte casecatchcharclass constcontinuedeaultdo doubleelseextendsfalse finalfinallyfloatfor functiongotointimplements inputininstanceofinterface longnativenewnull packageprivateprotectedpublic returnshortstaticsuper switchsynchronizedthisthrow throwstransienttruetry varvalwhilewith
CARACTERES ESPECIALES (ESCAPE SEQUENCE) Permiten insertar caracteres especiales dentro de un “string”. Los más comunes son: \n – Posiciona el cursor en una nueva línea. \t – Ejecuta un “Tab” horizontal. \r – Pone el cursor al principio de la misma línea (no de la próxima). \\ - Cuando se quiere poner el “Backslash” como parte del “String”. \” – Poner doble comilla dentro del “String”. \’ – Poner comilla sencilla dentro del “String”.
OBJETOS PREDEFINIDOS (BUILT-IN) La programación orientada a objetos, está tomando más auge e importancia cada día. Es una nueva visión que nos permite programar de una forma diferente a la que ya conocemos. Por el momento solo vamos a mostrar algunos objetos de JavaScript que son imprecindibles. En la próxima presentación vamos a abundar más en este tema.
OBJETOS PREDEFINIDOS - 1 document.write Escribe el texto en la página y se va a quedar el cursor al final de esa línea. Ejemplo: document.write(“ Hello World! ”); El Cursor se queda aquí.
OBJETOS PREDEFINIDOS - 2 document.writeln Escribe el texto en la página y se va a quedar el cursor al principio de la próxima línea. Ejemplo: document.writeln(“ Hello World! ”); El Cursor se mueve a la próxima línea.
OBJETOS PREDEFINIDOS - 3 window.alert Escribe el texto que se indique en una ventana de window separada del “browser”. Incluye un botón de OK para continuar Ejemplo: window.alert(“Welcome to\nJavaScript\nProgramming!”);
OBJETOS PREDEFINIDOS - 4 window.prompt Muestra una pantalla con el mensaje indicado y en el “Text Box” aparece un valor inicial de cero (0). Ejemplo: window.prompt(“Enter first integer”,”0”);
FUNCIONES Existen dos tipos de funciones: Funciones globales Funciones de usuario
FUNCIONES GLOBALES eval Convierte de “string” a un valor numérico. Si es una expresión, se evalúa primero. Ejemplo: resultado = eval(“5 + 7”) isNaN Evalúa un argumento para determinar si es "NaN“ (“Not a Number”) Ejemplo: resultado = isNaN(variable)
FUNCIONES GLOBALES – CONT. parseFloat Convierte de un “string” a número real. Si encuentra un caracter que no es numero, signo (+ o -), punto decimal o exponente, la funcion ignora la cadena a partir de esa posicion. Ejemplo: numeroReal = parseFloat(valorEntradoUsuario) parseInt Convierte un “string” a entero. Si se encuentra un caracter que no es numerico, la funcion ignora la cadena a partir de esa posicion. Ejemplo: numeroEntero = parseInt(valorEntradoUsuario)
FUNCIONES GLOBALES escape Convierte cualquier carácter no alfanumérico (Ej. espacio, semicolon) a su equivalente hexadecimal del código ASCII precedido del símbolo ‘%’. Ejemplo: valor = escape(“Pepito Huertas”) El contenido de valor va a ser: “Pepito%20Huertas” porque el código ASCII del espacio en blanco es 20. unescape Hace lo contrario de escape. Cambia los códigos ASCII por caracteres. Ejemplo: valor = escape(“Pepito%20Velez”) El contenido de valor va a ser: “Pepito Velez” porque cambia %20 a espacio en blanco.
FUNCIONES DE USUARIO JavaScript permite al usuario definir sus propias funciones, las cuales pueden tomar parámetros y devolver valores. FUNCTION Se usa para declarar la función. Hay que asignarle un nombre y te provee hasta un máximo de 255 parámetros. Sintáxis: function nombre ([parametro1][,parametro2]...[,parámetro n]) {instrucciones }
EJEMPLO DE UN PROGRAMA SIN FUNCIONES DE USUARIOS Tomado del libro Internet & World Wide Web How to Program de Deitel & Deitel Página 188 <!-- ************************************************************************** * (C) Copyright by Deitel & Associates, Inc. and * * Pearson Education, Inc. All Rights Reserved. * * * * DISCLAIMER: The authors and publisher of this book have used their * * best efforts in preparing the book. These efforts include the * * development, research, and testing of the theories and programs * * to determine their effectiveness. The authors and publisher make * * no warranty of any kind, expressed or implied, with regard to these * * programs or to the documentation contained in these books. The authors * * and publisher shall not be liable in any event for incidental or * * consequential damages in connection with, or arising out of, the * * furnishing, performance, or use of these programs. * ************************************************************************** -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " An Addition Program EJEMPLO SIN FUNCIONES - 2
EJEMPLO SIN FUNCIONES - 3 <!-- var firstNumber, // first string entered by user secondNumber, // second string entered by user number1, // first number to add number2, // second number to add sum; // sum of number1 and number2 // read in first number from user as a string firstNumber = window.prompt( "Enter first integer", "0" ); // read in second number from user as a string secondNumber = window.prompt( "Enter second integer", "0" ); // convert numbers from strings to integers number1 = parseInt( firstNumber ); number2 = parseInt( secondNumber );
EJEMPLO SIN FUNCIONES - 4 // add the numbers sum = number1 + number2; // display the results document.writeln( " The sum is " + sum + " " ); // --> Click Refresh (or Reload) to run the script again
EJEMPLO DE UN PROGRAMA CON FUNCIONES DE USUARIOS Javascript con modulos //**********************************************// // Definicion de variables// //**********************************************// var area,// area del rectangulo ancho_s,// ancho del rectangulo alto_s; // alto del rectangulo
EJEMPLO CON FUNCIONES - 2 //**********************************************// // Modulo principal del programa ejecuta los // // demas modulos. // //**********************************************// function main() { PedirValores(); // Pide el ancho y el alto al usuario CalcularArea(); // Calcula el area del rectangulo MostrarResultados(); // Muestra el area del rectangulo en el browser } //************************************************// // Solicita los valores al usuario. estos datos // // se tienen que convertir de string a nummerico.// //************************************************// function PedirValores() { alto_s = window.prompt( "Entre el alto del rectangulo", "0" ); alto_n = parseInt( alto_s ); ancho_s = window.prompt( "Entre el ancho del rectangulo", "0" ); ancho_n = parseInt( ancho_s ); }
//**********************************************// // Calcula el area del rectangulo. // //**********************************************// function CalcularArea() { area = ancho_n * alto_n; } //**********************************************// // Muestra en el browser el area del rectángulo// // al usuario. // //**********************************************// function MostrarResultados() { document.writeln( " El area del rectangulo es: " + area + " " ); } Presione el boton BACK para volver e correr el script EJEMPLO CON FUNCIONES - 3 Este comando es el que ejecuta el módulo control.
EXAMINAR EJEMPLOS DE CÓDIGOS HECHOS EN JAVASCRIPT Ahora procedemos a evaluar ejemplos de códigos creados en JavaScript hasta donde el tiempo nos permita.
PRÓXIMA PRESENTACIÓN Abundaremos en conceptos de Objetos. Funciones avanzadas. COOKIES. Sección de chulerías. Integrar un formulario con código de JavaScript para ver un ejemplo de como podemos validar.
FIN