Asesorías sitio web Introducción a JavaScript Ing. Tito Fernando Ale Nieto

Introducción JavaScript es un lenguaje que se ejecutal del lado del cliente y es interpretado por los browsers. La primera versión de JavaScript se liberó en diciembre de La versión actual de JavaScript es 1.7. Su nombre estandarizado es ECMAScript, pero la mayoría de la gente lo conoce como JavaScript. JavaScript fue desarrollado por Netscape. Jscript es un lenguaje desarrollado por Microsoft y es muy parecido a JavaScript. Las últimas versiones de JScript y JavaScript cumplen con las especificaciones de ECMAScript.

Introducción El código de JavaScript se ejecuta del lado del cliente, es decir, el navegador del usuario es el que lo ejecuta. JavaScript se utiliza generalmente para: Modificar contenido dinámicamente en las páginas html. Desplegar mensajes de alerta o de confirmación. Ejecutar algo al momento de que se cargue una página html. Reaccionar a eventos que el usuario active en la página html. (como dar click en un botón, pasar el mouse por una liga, etc.). Detectar el browser que está utilizando el usuario. Abrir ventanas nuevas con determinadas propiedades. Crear cookies. Algunos lo utiizan para validar información, pero no es recomendable porque el usuario puede deshabilitar el uso de JavaScript en su navegador y así saltarse dicha validación.

Creado por Brendan Eich para Netscapa aparece en Netscape 2.0B3 en Es un lenguaje de programación interpretado con base en la sintaxis del lenguaje C. Está basado en objetos y guiado por eventos. No tiene nada que ver con Java Las funciones Javascript se incluyen en los documentos HTML interactuando con el DOM (Document Object Model) de la página para realizar tareas no factibles de hacer con HTML sólo. DOM: Es una interface (independiente del lenguaje) que permite a los scripts acceder dinámicamente y actualizar el contenido, la estructura y el estilo de los documentos. Brendan Eich Creador del Javascript ORIGEN JAVASCRIPT

Capacidades de Javascript Algunas de las cosas que se pueden hacer con Javascript: Abrir nuevas ventanas controlando su tamaño, look & feel, controles, etc. Incorporar validaciones a los formularios. Cambios de imágenes al colocar el mouse sobre algún objeto de la página web. Generar respuestas ante distintos eventos Efectos visuales en la página. Crear, Eliminar o cambiar atributos de elementos de una página HTML en forma dinámica. Crear o Leer Cookies Detectar la configuración del Browser.

Cómo insertar JavaScript

Dónde insertar JavaScript Si el código de JavaScript se inserta en el encabezado de la página ( … ), el código se ejecutará cuando algún evento se dispare (por ejemplo, al pasar el mouse por alguna liga) o cuando se mande llamar directamente (por ejemplo, para actulizar el valor de una caja de texto). Si el código de JavaScript se inserta en el cuerpo de la página ( … ), el código se ejecutará mientras se carga la página. También se puede incluir código JavaScript que esté almacenado en un archivo externo:

Document.write Para escribir texto se utiliza la función: document.write(“texto...”) Ejemplo: Ejemplo 1 utilizando JavaScript document.write(“Hola mundo!")

Variables Las variables se utilizan para almacenar datos Para utilizar variables se utiliza la sintaxis: var nombre_var Para asignar el valor a una variable se utiliza la sintaxis: var nombre_var = valor Se puede omitar la palabra clave (keyword) var antes del nombre de la variable Ejemplo: Ejemplo 2 - Uso de Variables Ejemplo 2 - Uso de Variables var dia = "Lunes" var color1 color1 = "azul" document.write("La variable dia vale " + dia) document.write(" La variable color1 vale " + color1)

Condicionales Para verificar si una condición se cumple se utiliza la sintaxis: if(condicion) {... } Si la condición no se cumple, se ejecuta el código que está dentro de: else {... } Ejemplo: Ejemplo 3 - Uso de condicionales Ejemplo 3 - Uso de condicionaless var valor1 = 100 if(valor1 > 500) { document.write("Entre al if...") } else { document.write("Entre al else...") }

Cajas de alerta Las cajas de alerta (alerts) sirven para desplegar en la pantalla del usuario una caja de diálogo. La sintaxis que se utiliza es: alert(“Mensaje”) Ejemplo: Ejemplo 4 - Alerts Ejemplo 4 - Alerts var res = 10 * 5 if(res == 50) { alert("Resultado correcto") } else { alert("Resultado incorrecto") }

Eventos Los eventos son acciones que pueden ser detectadas por JavaScript, tales como el pasar el mouse por una liga o botón, el posicionarse en una caja de texto, el presionar una tecla, etc. Ejemplo: Ejemplo 5 - Eventos function mouseOver() { document.liga1.src ="./img_over.gif" } function mouseOut() { document.liga1.src ="./img_normal.gif" } Ejemplo 5 - Eventos Selecciona idioma:

Funciones Las funciones sirven para que el programador pueda mandarlas llamar las veces que quiera dentro del código y con distintos parámetros. Ejemplo: Ejemplo 6 - Funciones <!-- function abrir_ventana(url, titulo, ancho, alto) { var wintop = (screen.height - alto) / 2; var winleft = (screen.width - ancho) / 2; var winattribs = 'width=' + ancho + ',height=' + alto + ',top=' + wintop + ',left=' + winleft + ',scrollbars=yes,resizable=no'; var ventana=window.open(url,titulo,winattribs); if (parseInt(navigator.appVersion) >= 4) { ventana.window.focus(); } //--> Ejemplo 6 - Funciones Visita Google

Tips Para insertar comentarios en Javascript se utilizan 2 slashes: // Si se quiere insertar más de una línea de código JavaScript en una misma línea, cada línea de código se tiene que separar por punto y coma: ; Para que los navegadores viejos que no soportan JavaScript no desplieguen el código, se recomienda poner entre comentarios de html el código de JavaScript: <!-- document.write(“Hola mundo!") //-->

Referencias JavaScript operators: JavaScript Reference: JavaScript Reference: JavaScript MDC: JavaScript Event Reference: JavaScript Events: Understanding event handlers in JavaScript: