Introducción JavaScript
-
Upload
esteban-chanto-sanchez -
Category
Education
-
view
61 -
download
1
description
Transcript of Introducción JavaScript
Introducción a JavaScript
Existen diversos lenguajes Script (lenguajes interpretados) que se utilizan para programación en la web: uno de ellos es JavaScript. Como su nombre lo indica su base de sintaxis es el famoso lenguaje “Java”.
Este lenguaje de programación es utilizado en Internet debido a que se crean pequeñas rutinas destinadas a realizar acciones en el ámbito de una página web. Como se lo denomina comúnmente, este código se ejecuta “del lado del cliente”, debido a que el navegador es el que interpreta este lenguaje, por lo cual todo sucede en el ordenador del cliente.
JavaScript es un recurso muy potente para lograr mejorar las páginas web así como lograr un óptimo funcionamiento de sus proyectos web.
Lo importante de JavaScript es la posibilidad de funcionar en ambos sistemas operativos, tanto Windows como Linux.
Las diferencias entre JavaScript y Java son muchas e importantes, pero sólo nos limitaremos a enunciar las ventajas de JavaScript.
Es un código “interpretado” por el cliente Es un lenguaje abierto Es un código orientado a objetos Es un código integrado a HTML Reutilización de código de programación
Existe un concepto básico para programar en JavaScript al igual que en otros lenguajes de programación, que es sumamente importante: el OBJETO.
Un objeto es una entidad que agrupa características propias y se le pueden realizar ciertos cambios a dichas características a través de sus métodos.
Por lo cual un objeto tiene asociados atributos y métodos.
Ejemplo:
La pantalla (screen) es un objeto, sus atributos son sus dimensiones, su posición, etc. “screen.widht” es el ancho del objeto pantalla.
Asignarle un nuevo valor a este atributo es tan sencillo como hacer “screen.widht = 800”.
Estos atributos se pueden modificar mediante métodos como: open y close: Abre y cierra respectivamente ventanas del navegador. alert: despliega un mensaje de alerta. confirm: despliega un mensaje de confirmación con un botón de Aceptar y uno de
Cancelar. prompt: despliega un mensaje de diálogo para ingresar un valor. blur y focus: remueve o asigna da el foco a una ventana. scroll: desplaza una pantalla hasta una coordenada específica. setTimeout: evalúa una expresión después de un determinado tiempo.
Eventos
Existen diferentes eventos que se producen ante ciertas acciones del ratón o de algunas teclas que son presionadas por el usuario.
Todos los objetos no poseen los mismos atributos ni responden a los mismos eventos. Es importante consultar que métodos posee cada objeto. Más adelante hay tabla en donde se detallan los objetos más utilizados con todas sus referencias. La respuesta a estos eventos es posible programarlas mediante JavaScript.
Los diferentes eventos son: OnMouseOver – se lanza cuando el mouse pasa sobre un objeto - OnMouseOut – se lanza cuando el mouse se aleja de un determinado objeto - OnBlur – ocurre cuando un elemento pierde el foco - OnChange – se invoca cuando se modifica un objeto - OnFocus – sucede cuando un elemento recibe el foco mediante el ratón o el teclado - OnClick – ocurre cuando se hace click sobre un objeto con el ratón - OnLoad – se invoca cuando se carga la página web - OnMouseDown – se lanza al presionar el botón - OnSubmit – ocurre al enviar un formulario - OnReset – sucede al limpiar un formulario - Por ejemplo:
Si el ratón pasa sobre algún hipervínculo (se disparará en dicho caso un evento) desplegaremos un mensaje de alerta.
<A HREF="noplace" OnMouseOver="alert('Anímese!')">
PRESIONE AQUI PARA ENCONTRAR SU PREMIO!
</A>
Lo que se encuentra dentro de los paréntesis del alert es lo que el cliente observará dentro de un cuadro de diálogo cuando pase con el ratón sobre el link.
JavaScript trata a cada elemento HTML como si fuese un objeto, por ende una etiqueta <image> será tratada como un objeto en el ámbito de JavaScript para su programación, con sus atributos, métodos y eventos asociados.
Variable
Una variable es un elemento que tiene la capacidad de almacenar un valor asignado.
El valor a guardar puede ser de cualquier tipo: una fecha, una palabra, un valor de verdad, etc. En un script pueden existir diversas variables, por lo cual es necesario definir las variable para su posterior identificación. En realidad se trata de darle un nombre descriptivo y asignarle, de ser necesario, un valor inicial.
Para ello existe la palabra reservada* var, ejemplo: var fecha_actual
Tanto en los scripts como en cualquier otro lenguaje de programación, existen palabras reservadas que el sistema interpreta como instrucciones, por lo cual no pueden ser utilizadas como nombre de variables.
Una particularidad de JavaScript es la capacidad de poder declarar variables en el momento de utilizarlas, por lo cual la programación es mucho menos detallista.
Ejemplo: var fecha_actual = ‘26/06/2002’
Existe en programación el concepto de variable local y variable global, que en JavaScript también se aplica.
Operadores
Como su nombre lo indica, los operadores permiten realizar diferentes operaciones (aritméticas, lógicas, de comparación) entre cualquier valor, almacenado en una variable o no, dentro de nuestro bloque de código JavaScript.
La siguiente tabla contiene una lista de operadores aritméticos que son utilizados en JavaScript:
Operador Descripción Nro. de operandos Ejemplo+ Suma 2 A + B- Resta 2 A + B* Multiplicación 2 A * B/ División 2 A / B% Resto de div. entera 2 A % B++ Incremento en 1 1 A++, ++A-- Decremento en 1 1 A--, --A
La siguiente tabla contiene una lista de operadores lógicos que son utilizados en JavaScript:
Operador Descripción Nro. de operandos Ejemplo&& “y” lógico 2 (condición) AND
(condición)|| “o” lógico 2 (condición) OR (condición)! Negación lógica 1 NOT (condición)
La siguiente tabla contiene una lista de operadores de comparación lógicos que son utilizados en JavaScript:
Operador Descripción Nro. de operandos Ejemplo== Igualdad 2 A == B!= Desigualdad 2 A ¡= B> “es mayor que” 2 A > B>= “es mayor o igual que” 2 A >= B< “es menor que” 2 A < B<= “es menor o igual que” 2 A <= B
Referencia
Esta tabla es una referencia de los objetos, sus atributos y sus eventos:
Objeto Propiedades Métodos Eventos
Button form name type value
blur click focus
onBlur onClick onFocus
Botón utilizado en el
formulario
Checkbox checked defaultChecked form name type value
blur click focus
onBlur onClick onFocus
Es un elemento del
formulario
document alinkColor Area bgColor cookie fgColor Form forms Image images lastModified linkColor Link links referrer title URL vlinkColor
close open write writeln
none Toda la pagina web
Form action Button Checkbox elements Hidden length method name Password Radio Reset Select Submit
reset submit
onReset onSubmit
Es el formulario,
cuando se crea un formulario en realidad se
genera un objeto form
target Text Textarea
Frame frames name length parent self window
blur clearTimeout focus setTimeout
onBlur onFocus
Image border height hspace lowsrc name prototype src width
none onAbort onError onLoad
Link and Area
hash host hostname href pathname port protocol search target
none onClick onMouseOut onMouseOver
Password defaultValue form name type value
blur focus select
onBlur onFocus
Select form length name options selectedIndex text type
blur focus
onBlur onChange onFocus
Es un elemento del
formulario
String length prototype
blink bold fixed fontcolor fontsize indexOf
none Es una cadena de caracteres
italics link small split strike
Submit form name type value
blur click focus
onBlur onClick onFocus
Es un elemento del formulario
Text defaultValue form name type value
blur focus select
onBlur onChange onFocus onSelect
Es un elemento del formulario
Textarea defaultValue form name type value
blur focus select
onBlur onChange onFocus onSelect
Es un elemento del formulario
window closed defaultStatus document Frame frames history length location name opener parent self status top window
alert blur clearTimeOut close confirm focus open prompt setTimeOut
onBlur onError onFocus onLoad onUnload
Es el objeto que engloba a la ventana del
navegador.
Sintaxis
Como cualquier lenguaje de programación, el JavaScript posee una sintaxis propia.
Inicio de JavaScripts
Mediante el siguiente par de “etiquetas” HTML se indica el inicio y el fin de un bloque de código JavaScript dentro de una página web:
<script language="JavaScript" type="text/javascript">
Estructuras de control
IF – ELSE
Esta es una estructura de decisión que permite, según la evaluación de la condición obtener uno u otro resultado.
Por ejemplo, si la variable contiene un valor nulo y es evaluada de la siguiente manera:
if (variable == null){
alert(‘Atención: valor nulo’);}
Aparecerá en pantalla un cuadro de diálogo diciendo “Atención: valor nulo”, ya que la variable cumplía con dicha condición.
Los bloques de instrucciones se encierran entre llaves:
if (condición)
{ }
else
{ }
Comentarios
Un comentario es un texto dentro del código que no es interpretado por el navegador y cuya utilidad radica en facilitar la lectura al programador. El programador, a medida que desarrolla el script, va dejando frases o palabras sueltas, llamadas comentarios, que le ayudan a él o a cualquier otro a leer más fácilmente el script a la hora de modificarlo o depurarlo.Ya se vió anteriormente algún comentario JavaScript, pero ahora vamos a mostrarlos de nuevo. Existen dos tipos de comentarios en este lenguaje. Uno de ellos, la doble barra, sirve para comentar una línea de código. El otro comentario lo podemos utilizar para comentar varias líneas a la vez y se indica con los signos /* para empezar el comentario y */ para terminarlo. Veamos unos ejemplos:
<SCRIPT>//Este es un comentario de una línea/*Este comentario se puede extenderpor varias líneas.
Todas las que sean necesarias!*/</SCRIPT>
Ejemplos
Ahora desarrollaremos un par de ejemplos útiles en JavaScript.
Detectar la resolución del monitor
Al diseñar una página web se decide una resolución de pantalla para la cual su visualización será óptima, por ejemplo 800x600 pixeles. Sin embargo, es un buen detalle que si el usuario posee una resolución diferente, siga viendo la página de manera adecuada y no demasiado grande ni demasiado pequeña.
Para lograr este excelente detalle estético es posible escribir un bloque de código JavaScript que varíe la imagen que será mostrada dependiendo de la resolución de pantalla detectada en el ordenador del usuario. Para ello se toma del objeto screen (pantalla) su ancho; esto se hace a través del atributo widht de dicho objeto. Finalmente comparamos dicho valor con uno preestablecido y decidimos que imagen mostrar dependiendo el caso:
<script language="JavaScript" type="text/javascript">var scrwidth = screen.width;if (scrwidth <= 800)
{ document.write("<IMG ALT=’’ BORDER=’0’ SRC=’img800.jpg’>"); }else
{ document.write("<IMG ALT=’’ BORDER=’0’ SRC=’img1024.jpg’>"); }</script>
Bloquear el botón derecho del ratón
En muchas ocasiones deseamos o bien que el código fuente de una página no pueda ser fácilmente visto o bien que no sea tan simple para los usuarios que visiten nuestra página grabar las imágenes de la misma a su disco rígido. Para ello, con una pequeña sección de código JavaScript logramos atrapar el evento que se genera al presionar el botón derecho del ratón, evitando que aparezca el menú contextual habitual, siendo éste reemplazado por un mensaje nuestro:
<html><head><script language="JavaScript" type="text/javascript">
function mouse(){
if (event.button == 2) alert(‘Copyright 2002’);}
</script></head>
<body OnMouseDown='mouse()'>
...
...
...
</body></html>
Se destaca en el código fuente (en amarillo) la sección que asocia al evento OnMouseDown con la función JavaScript que hemos escrito.