Computación en el cliente

Aprenda Usted mismo Jscript en 24 horas

Introducción

Jscript es uno los lenguajes más utilizados en la actualidad para el desarrollo de

aplicaciones web. Fue desarrollado por Netscape Communications Corporation. Se
llamaba originalmente LiveScript y fue introducido por primera vez en Netscape Navigator
2.0 en 1995. Es muy versatil y permite realizar una gama variada de acciones como: Añadir
desplazamiento o cambio de mensajes a la línea de estado del navegador, validar los
contenidos de una forma y hacer cálculos, mensajes en pantalla para el usuario, ya sea
como parte de una página Web o en cajas de alerta, crear banners publicitarios que
interactúan con el usuario en lugar de simplemente mostrar un gráfico, detectar el
navegador en uso y mostrar contenido diferente para los distintos navegadores.

En este resumen se ofrece un vistazo general sobre Jscript y sus principales elementos y
las aplicaciones que se pueden desarrollar.

El lenguaje JavaScript ha evolucionado desde su lanzamiento original en Netscape 2.0. ha

habido varias versiones de JavaScript: JavaScript 1.0, la versión original, con el apoyo de
Netscape 2.0 e Internet Explorer 3.0, luego JavaScript 1.1 es soportado por Netscape 3.0
y sobre todo con el apoyo de Internet Explorer 4.0, le siguió JavaScript 1.2 es soportado
por Netscape 4.0, y parcialmente con el apoyo de Internet Explorer 4.0. JavaScript 1.3 es
soportado por Netscape 4.5 e Internet Explorer 5.0. JavaScript 1.5 es soportado por
Netscape 6.0 e Internet Explorer 5.5 y versiones posteriores y por último la versión 6.0

Conceptos y Elementos Básicos de Jscript

JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas
web dinámicas. Es un lenguaje de programación interpretado, por lo que no es necesario
compilar los programas para ejecutarlos. En otras palabras, los programas escritos con
JavaScript se pueden probar directamente en cualquier navegador sin necesidad de
procesos intermedios.
Generalidades de JavaScript

Es un lenguaje Orientado a Objetos basado en prototipos, tiene un objeto denominado

“Object” a partir del cual por clonación se obtienen los demás objetos. Sólo se parece a
Java en aspectos sintácticos, pero no en su semántica, es un lenguaje dinámico.
Los objetos se pueden definir por el programador y es un lenguaje que también soporta
características de los lenguajes funcionales y tiene gran cantidad de API’s (Application
Programming Interface) desarrolladas por terceros.

Este programa se puede trabajar con la mayoría de los editores utilizados en la web. El
código se incluye entre las etiquetas <script>…..</script> y normalmente se incluye en la
cabecera del documento Html, y además debe definir el atributo type de la etiqueta <script>
la siguiente línea de código se usa para los navegadores antiguos que no soportan algunas
características nuevas de jscript.
<! -
document.write ("El navegador es compatible con JavaScript.");
// ->
Para incluir comentarios en un programa JavaScript, comience una línea con dos barras,
como en este ejemplo: // esto es un comentario. //
También puede iniciar un comentario con dos barras en el medio de una línea, comienzan
con / * y terminan con * /. Estos comentarios pueden extenderse a través de más de una
línea, como demuestra el siguiente ejemplo:
En jscript se utiliza tres tipos de mensajes:
 Emergentes: pop-ups tipo alert alert (“Cuidado con las manos")
 Confirm: confirm (“¿Estás seguro?")
 Prompt: prompt (“Dime tu nombre", “ponlo aquí")

Tipos de datos en JavaScript

Estos son los tipos de datos básicos de JavaScript:

Los números, como 3, 25, o 1,4142138. JavaScript soporta ambos enteros y números de
punto flotante.
Boole, o valores lógicos. Estos pueden tener uno de dos valores: verdadero o falso. Estos
son útiles para indicar si una determinada condición es verdadera.

Operadores de JavaScript comunes

Utiliza los operadores comunes, + para concatenar (combinar) cadenas, + para añadir, - para
sustraer, + para multiplicar, / para dividir, % modulo el resto, ++ para incrementar y – para
disminuir.

Variables
En Jscript las variables se denominan contenedores que pueden almacenar datos (por
ejemplo, un número, una cadena de texto, o un objeto). Cada variable tiene un nombre y al
elegir los nombres a una variable se debe tener en cuenta que:
 Los nombres de variables pueden incluir letras del alfabeto, tanto mayúsculas y
minúsculas. También pueden incluir los dígitos 0-9 y el guion bajo (_) carácter.
 Los nombres de variables no pueden incluir espacios ni tampoco caracteres de
puntuación.
 El primer carácter del nombre de la variable debe ser una letra o un guion bajo.
 Los nombres de variables distinguen entre mayúsculas.
 No hay límite oficial de la longitud de los nombres de variables, pero debe caber
dentro de una línea
Uso de las variables locales y globales

 Las variables globales tienen todo el guion (y otras secuencias de comandos en el

mismo HTML documento) como su ámbito de aplicación. Pueden ser utilizados en
cualquier lugar, incluso dentro de las funciones.
 Las variables locales tienen una función única como su ámbito de aplicación. Se
pueden usar sólo dentro de la función que se crean en.

Bucles.
Una de bucle normalmente utiliza una variable (llamado un contador o índice) para realizar
un seguimiento de las veces que se ha ejecutado el bucle, y se detiene cuando el contador
llegue a un cierto número. Un básico para la declaración es la siguiente:
for (var = 1; var <10; var ++) {
Hay tres parámetros a la de bucle, separados por punto y coma:

 El primer parámetro (var = 1 en el ejemplo) especifica una variable y le asigna un

valor inicial a la misma. Esto se llama la expresión inicial porque establece el estado
inicial para el bucle.
 El segundo parámetro (var = <10 en el ejemplo) es una condición que debe
permanecer fiel a mantener el bucle de ejecución. Esto se conoce como la condición
del bucle.
 El tercer parámetro (var= ++ en el ejemplo) es una declaración que se ejecuta con
cada iteración del bucle. Esto se conoce como la expresión de incremento, ya que
se utiliza generalmente para incrementar el contador.

Objetos

Al igual que las variables, los objetos pueden almacenar datos, dos o más piezas de datos
a la vez. Los elementos de datos almacenados en un objeto se denominan propiedades del
objeto. Las propiedades un objeto persona podrían incluir un nombre, dirección y número
de teléfono. Los objetos también pueden incluir métodos. Estas son funciones que trabajan
con los datos del objeto.

JavaScript soporta tres tipos de objetos:

 Objetos incorporados son objetos incorporados en el lenguaje JavaScript.

 Objetos predefinidos en JavaScript, entre ellos esta:
o String: cada vez que se asigna una cadena de caracteres a una variable, se
crea un objeto String
o Math: se usa para efectuar cálculos matemáticos
o Date: para el manejo de fechas y horas
o Array: almacena un conjunto de valores en un vector o matriz
 o Boolean: almacena “true” o “false”.
o Navigator: informa sobre el navegador que se está usando.
o Document: es el documento HTML y tiene asociados elementos del
documento (link, ancla, formulario, …).
o Objetos de navegador son objetos que representan diversos componentes
del navegador y la corriente HTML documento.
 Customer objetos, son objetos que cree usted mismo.

JavaScript utiliza una jerarquía de objetos de padres e hijos llamados el Document Object
Model o DOM. Estos objetos están organizados en una estructura en forma de árbol, y
representan todo el contenido y de los componentes de un documento Web. Los objetos
del DOM tienen propiedades que describen la página Web o documento, y métodos, que le
permiten trabajar con partes de la página Web.
La creación del Document Object Model o DOM es una de las innovaciones que más ha
influido en el desarrollo de las páginas web dinámicas y de las aplicaciones web más
complejas.
DOM permite acceder y manipular las páginas XHTML como si fueran documentos XML.
De hecho, DOM se diseñó originalmente para manipular de forma sencilla los documentos
XML. Cuando se hace referencia a un objeto, se utiliza el nombre del objeto padre seguido
del nombre del objeto secundario o nombres, separados por puntos.

Funciones
Las funciones proporcionan una forma sencilla de manejar una tarea, tales como la adición
de salida a una página Web. JavaScript incluye una amplia variedad de funciones
integradas. Una declaración que utiliza una función se conoce como una llamada de
función. Las funciones toman parámetros (la expresión entre paréntesis) para decirles qué
hacer. Además, una función puede devolver un valor a una variable de espera. Por ejemplo,
la siguiente llamada de función solicita al usuario una respuesta y lo almacena en el texto
de la variable:

text = prompt ("Escriba un texto.")

Las funciones son grupos de sentencias JavaScript que pueden ser tratadas como una sola
unidad. Para utilizar una función, primero hay que definirla.
 funcionar Greet () {

alert ("Saludos.");

EVENTOS

Un evento es un suceso que ocurre cuando el usuario realiza alguna acción, los eventos
hacen posible que los usuarios transmitan información. JavaScript define numerosos
eventos que permiten una interacción completa entre el usuario y las páginas/aplicaciones
web. La pulsación de una tecla constituye un evento, así como pinchar o mover el ratón,
seleccionar un elemento de un formulario, redimensionar la ventana del navegador, etc.

JavaScript permite asignar una función a cada uno de los eventos. De esta forma, cuando
se produce cualquier evento, JavaScript ejecuta su función asociada. Este tipo de funciones
se denominan "event handlers" en inglés y suelen traducirse por "manejadores de eventos".

Muchos eventos de JavaScript (como clics de ratón) son causados por el usuario. En lugar
de hacer las cosas en un orden establecido, la secuencia de comandos puede responder a
las acciones del usuario.

Cada evento tiene un nombre. Por ejemplo, el onMouseOver evento se produce cuando el
puntero del ratón se mueve sobre un objeto en la página. Cuando el puntero se mueve
sobre un vínculo particular, el onMouseOver evento es enviado al controlador de eventos
de ese vínculo, si tiene uno.

Para definir un controlador de eventos, se agrega la palabra en el comienzo del nombre del
evento. Por ejemplo, el onMouseOvercontrolador de eventos se llama cuando el ratón se
mueve sobre un enlace. Para definir el controlador de eventos, lo agrega al de ese vínculo
especial <a> HTML tag.

Arrays
JavaScript almacena cadenas como Cuerda objetos. Las dos sentencias siguientes crean
la misma cadena:
test = "Esto es una prueba";
 prueba = new String ("Esto es una prueba");

Se puede asignar un valor a una cadena en la misma forma que cualquier otra
variable. También se puede asignar un valor después de la cadena ya creada. Por ejemplo,
la siguiente declaración reemplaza el contenido de la prueba de variable con una nueva
cadena:

test = "Esto es sólo una prueba.";

Formularios.
JavaScript dispone de numerosas propiedades y funciones que facilitan la programación de
aplicaciones que manejan formularios. Cuando se carga una página web, el navegador crea
automáticamente un array llamado forms y que contiene la referencia a todos los
formularios de la página. Para acceder al array forms, se utiliza el objeto document, por lo
que document.forms es el array que contiene todos los formularios de la página. Como se
trata de un array, el acceso a cada formulario se realiza con la misma sintaxis de los arrays.

Los eventos más utilizados en el manejo de los formularios son los siguientes:
 Onclick: evento que se produce cuando se pincha con el ratón sobre un elemento.
Normalmente se utiliza con cualquiera de los tipos de botones que permite definir
XHTML (<input type="button">, <input type="submit">, <input type="image">).
 Onchange: evento que se produce cuando el usuario cambia el valor de un elemento
de texto (<input type="text"> o <textarea>).
 Onfocus: evento que se produce cuando el usuario selecciona un elemento del
formulario.
 Onblur: evento complementario de onfocus, ya que se produce cuando el usuario
ha deseleccionado un elemento por haber seleccionado otro elemento del
formulario. El elemento anterior "ha perdido el foco".

Además de los formularios y de todas las funciones y utilidades de JavaScript que se han
visto, existen muchas otras utilidades que es necesario conocer para desarrollar
aplicaciones completas: Relojes, contadores e intervalos de tiempo, calendrios, menus
desplegables, galería de imágenes, y tooltips que son pequeños recuadros de información
que aparecen al posicionar el ratón sobre un elemento. Normalmente se utilizan para
ofrecer información adicional sobre el elemento seleccionado o para mostrar al usuario
pequeños mensajes de ayuda.
Depuración de programas y visualización de errores en los navegadores

Al programar siempre se comenten errores, los navegadores tienen opciones para abrir
una consola donde podemos depurar los errores y visualizar el código JavaScript.
Opciones de depuración en los distintos navegadores
 IE – Herramientas (Alt+X) >> Herramientas de desarrollo F12
 Firefox – Firefox >> Desarrollador Web >> Consola Web
 Chrome – (Personalización y control) en la esquina superior derecha >>
Herramientas >> consola JavaScript
 Safari – Herramientas (icono rueda dentada) >> Preferencias >> vanzado >> Hacer
click en “Mostrar el menú de desarrollo en la barra de menús” >> Aparece en la barra
de menús “Desarrollo” >> mostrar
 inspector web (Control+Alt+I)
Bibliografía

http://www.w3.org/standards/webdesign/script
http://www.desarrolloweb.com/javascript
https://es.wikipedia.org/wiki/ECMAScript