Javascript

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

Docente: Salinas Encinas Aldo correo: [email protected] http://webprofesional.blogspot.com Página 1

LENGUAJE

JAVASCRIPT

JavaScript es un lenguaje de alto nivel,

basado en objetos, diseñado para permitir a

los programadores Web la generación de

documentos Web interactivos de un modo

sencillo.

El vocabulario de JavaScript, relativamente

pequeño, es fácil de comprender y nos da un

amplio número de posibilidades, antes no

disponibles. JavaScript nos proporciona un conjunto de herramientas compactas propias que

realzan las interacciones entre los usuarios y las páginas HTML. Estas herramientas nos permiten

responder a las pulsaciones del ratón, a las entradas de los formularios, a la navegación de la

página y a otros eventos.

Una de las características principales de JavaScript es su capacidad para capturar un número

limitado de acciones del usuario, conocidas por la mayoría de los programadores como eventos.

JavaScript se inserta dentro de los documentos HTML por medio de las etiquetas de comienzo y

final de script. El navegador comienza buscando la primera etiqueta de script:

<SCRIPT LANGUAGE=”JavaScript”>

y continua leyendo todo lo que encuentra hasta llegar a la etiqueta de finalización del script:

</SCRIPT>

Por ejemplo El siguiente inserta JavaScript en la sección BODY



CARACTERES ESPECIALES Cuando se escriben scripts, a veces es necesario decirle al ordenador que utilice caracteres

especiales o teclas, tales como la tabulación o retorno de carro. Para hacer esto se utiliza la

siguiente tabla:

Código de escape Significado

\b Espacio hacia atrás

\f Alimentación de línea

\n Nueva línea

\r Retorno de carro

\t Tabulación

\\ Backslash

\’ Comilla simple

\” Comilla doble

Hay que tener presente que en algunos navegadores no funcionara algunos de ellos, por ejemplo

si queremos hacer salto de línea podemos utilizar código HTML eso lo reconoce, ver en la imagen

la etiqueta <br>.

ESTRUCTURA DE CONTROL

Las estructuras de control nos permiten modificar el flujo de ejecución básico de los scripts.

if

if(condición){

sentencias;

}

if...else

if(condición){

sentencias;

}else{

sentencias;

}



BUCLES

La utilización de los bucles dentro de un script sirve para mejorar la programación.

for

for(valor inicial; condición; incremento[decremento]){

sentencias;

}

while

while(condición){

sentencias;

}

do..while

do{

sentencias;

}while(condición)

TIPOS DE VENTANAS POPUS EN JAVASCRIPT En JavaScript existen 3 tipos de ventanas popup que tienen diferentes usos y sintaxis:

1. Alert:

Muestra un cuadro de dialogo de alerta con un botón ACEPTAR y sonido (beep). Se utiliza para

enviar mensajes al usuario.

Sintaxis

alert(MensajeDeAlerta);

Por ejemplo



2. Confirm:

Muestra un cuadro de dialogo, para que el usuario pueda confirmar o cancelar una acción de

proceso.

Por ejemplo

El resultado será el siguiente teniendo presente que después de elegir alguna de las dos opciones

(OK) o (CANCELAR) se ejecutara la condicional.

Si el botón es Aceptar, se mostrara la ventana de la izquierda, caso contrario se mostrara la

ventana de la derecha.

3. Prompt:

Muestra un cuadro de dialogo, para que el usuario pueda ingresar un dato. Se puede especificar un

valor por defecto.

prompt(MensajeDePrompt[,valor predeterminado]);



Por ejemplo

VARIABLES EN JAVASCRIPT

Las variables en JavaScript pueden almacenar cualquier tipo de datos (cadenas o valores). Se

considera un lenguaje de programación de tipos libres, la declaración de una variable se hace con

la sentencia var.

Var NombreDeVariable [=valor/expresion];

Por ejemplo



Otro ejemplo

Para este presente ejemplo vamos a utilizar concatenación de cadenas, es decir, sumar cadenas

Cadena=cadena1+cadena2+…+cadenaN;

Ahora si concatenamos una cadena con un número por ejemplo predomina el de mayor jerarquía

es decir la cadena.

El resultado será:

Tenga presente que a pesar que

nuestra variable i toma valores

desde 1 hasta 10 pero la etiqueta

<h1> toma valores solo hasta <h6>



OPERADORES

La idea general para escribir un script es introducir, evaluar, manipular y mostrar información.

Para crear programas útiles necesitamos evaluar, incluso cambiar la información con la que

trabajan los scripts.

Operador Precedencia Asignación = += -= *= /= %=

<<= >>= >>>= &= ^= |=

Condicional ?: “o” lógica || “y” lógica && “o” nivel bit | “xor” nivel bit ^ “y” nivel bit & Igualdad = |= Comparación < <= > >= Desplazamiento << >> >>> Suma/Resta + - Multiplicación/

División * /

Negación/

Incremento ! ~ - ++ --

Por ejemplo

Vamos a crear una tabla de multiplicar, para ello ingresaremos un número por teclado el que será

leído por la ventana prompt, veamos el ejemplo



ARRAYS

Un arreglo es una matriz ya sea unidimensional o multidimensional visto

de manera matemática, sin embargo en un lenguaje coloquial seria un

conjunto de elementos el cual tiene un orden, ya sea mediante filas o

columnas, veamos los diferentes tipos de crear una matriz:

1.- Arreglo estático, es un conjunto de dos o más expresiones (números, cadenas, objetos, etc)

encerradas entre corchetes, con una cantidad ya definida.

nombreArray=[dato1,dato2,..,datoN];

o también se puede realizar de la siguiente manera:

nombreArray=new Array[5];

nombreArray[0]=dato1;


………………………..


Por ejemplo



2.- Arreglo dinámico, es un conjunto de dos o más expresiones (números, cadenas, objetos, etc)

encerradas entre corchetes, la cantidad se define según vallamos ingresando los datos.

nombreArray=new Array( );

esto deja libre al arreglo a almacenar la cantidad de datos libremente.

Por ejemplo



Veamos el resultado del código anterior, primero se irán mostrándose las ventanas para ingresar

los valores del arreglo.

Al final del proceso nos mostrara el resultado, como se muestra en la siguiente ventana

CADENAS

Algo que se utiliza a menudo son las cadenas, son importantes ya que con ellas podemos

concatenar (como ya hemos visto) pero no es lo único que podemos hacer, veamos:

1.- length, define la longitud del texto

2.- indexOf, indica la posición de una frase a partir de una posición dada, sino lo encuentra resulta

ser -1.

3.- substring, extrae parte del texto desde una posición inicial hasta una posición final.

4.- charAt, extrae un carácter de un texto en una posición indicada.

5.- toUpperCase, muestra al texto en mayúscula.

6.- toLowerCase, muestra al texto en minúscula.



El resultado se muestra en la siguiente imagen

UBICACIÓN DEL CODIGO JAVASCRIPT La ubicación del código javascript va a depender de cuando uno quiere que se ejecute y cuantas

veces quiere reutilizar dicho código.

Debemos tener presente que los navegadores “leen” el código HTML línea por línea, entonces

van ejecutando o mostrando según hayamos definido nuestro código.



1.- Por ejemplo en nuestros ejemplos anteriores lo hemos definido nuestro script en el <body>,

esto indica que se ejecutara cuando el navegador “lea” nuestro script al pasar por esa sección de

línea, pero solo ocurrirá una vez, ya que el <body> se lee una sola vez.

2.- Pero también podemos definirlo al final, que ocurra cuando haya acabado de leer todo el

documento.

3.- Ahora podemos definirlo dentro de la cabecera <head>, esto se utiliza cuando queremos que se

ejecute algo antes de llegar al <body>.



En esta última parte hemos utilizado el script en la cabecera, debemos decir que todavía se puede

escribir código javascript pero fuera de nuestra página HTML, para ello debemos enlazar

mediante una línea de código que se muestra a continuación:

CREANDO CODIGO JAVASCRIPT EXTERNO Acabamos de indicar que se puede escribir código javascript externo y “llamarlo” a nuestra

página Web, veamos cómo realizarlo, primero que en Dreamweaver, presiona CTRL+N o menú

Archivo nuevo documento, en cualquiera de los dos casos se mostrara la siguiente ventana:

Mostrándose la siguiente ventana para escribir nuestro código javascript



Observe que ya se ha hecho una copia en nuestra página HTML, es decir, ya estamos listos para

usar el código javascript, y si deseamos modificarlo solamente habrá que hacer clic donde dice

código.as (ver imagen)

FUNCIONES

Algo que se utiliza a menudo en JavaScript son las funciones para realizar un llamado un número

ilimitado de veces durante su ejecución en el script para que realice la ejecución de una

determinada tarea. Una función es simplemente una sección de código a la que se le ha asignado

un nombre.

function nombreFuncion([argumento1],[argumento2],...,[argumentoN]){

sentencias;

}

Por ejemplo



EJERCICIOS 1) Vamos a desarrollar un ejercicio el cual muestre el mayor de 3 números.



2) Vamos a desarrollar un ejercicio el cual muestre una imagen que se mueve cada vez que se

mueve el mouse del a lo largo de la pantalla para ello utilizaremos el evento “onmousemove”

Pero este código solo es ejecutable en Internet Explorer, pero buscamos que siempre funcione en

todos los navegadores, por eso aquí le participo de un código que encontré en la Web, espero les

guste:



Veamos el resultado en dos navegadores como Internet Explorer, Google Chrome, también

funciona en Mozilla Firefox, Opera, etc.

3) Vamos a crear un efecto para un texto, utilizaremos el evento onload. Dicho efecto lo podemos

encontrar en muchos libros, allí hay un problema que solo funciona en Internet Explorer



4) Aquí se escribe algunos scripts de mucha utilidad en su página Web

Colocar este script dentro de la etiqueta <head>y agregarle un botón en <body> con el nombre

button



Colocar este script dentro de la etiqueta <body>



Colocar este script dentro de la etiqueta <head> y agregarle <body onload=terremoto(5)>

EL MODELO DE OBJETOS DE JAVASCRIPT

JavaScript tiene diferentes objetos propios ya construidos que el

programador puede utilizar. Posee una librería básica de objetos

que podemos instanciar y con los que podemos trabajar. Estos

objetos tiene propiedades, métodos y pueden responder a eventos,

pero no tiene la capacidad de herencia ya que no es un lenguaje

orientado a objetos.



1.- El objeto window Es el objeto más alto en jerarquía de objetos de JavaScript. Todos los

objetos con que el usuario interactúa se hallan dentro de una ventana

1.1 Propiedades del objeto window.

closed Es un valor booleano que indica si la ventana esta o no cerrada

defaultStatus Contiene el mensaje por defecto que aparece en la barra de estado del

navegador

frames Es un array que representa los objetos frames del objeto actual

length Es un valor entero que indica el numero de frames del objeto window

actual

name Contiene el nombre del objeto window actual, o del frame actual

self Nombre alternativo del objeto window actual

status Determina el mensaje que aparece en la barra de estado

top Nombre alternativo para la ventana de nivel más superior

1.2 Métodos del objeto window

alert(mensaje) Muestra el mensaje en una caja de dialogo

blur() Elimina el foco del objeto window actual

clearTimeout(nombre) Cancela el intervalo especificado por nombre

close() Cierra el objeto window actual

confirm(mensaje) Muestra el mensaje en una caja de dialogo

eval() Evalúa la cadena como una sentencia, en referencia

al objeto window

focus() Captura el foco sobre el objeto window actual

moveBy(x,y) Mueve el objeto window actual al número de píxeles

especificados por x,y

moveTo(x,y) Mueve el objeto window actual a la coordenada (x,y)

resizeBy(x,y) Ajusta el tamaño del objeto window actual

moviendo su esquina inferior derecha el número de

píxeles x,y

resizeTo(ancho,alto) Ajusta el tamaño del objeto window actual

scroll(x,y) Desplaza el objeto actual a las coordenadas (x, y)

scrollBy(x,y) Desplaza el objeto actual el número de píxeles x,y

scrollTo(x,y) Desplaza el objeto actual a las coordenadas (x,y)

prompt(mensaje,respuesta) Muestra un mensaje en una caja de dialogo el cual

permite introducir información mediante una caja de

texto.

setTimeout(expresión,tiempo) Evalúa la expresión especificada después de que

haya pasado el número en milisegundos (tiempo)

toString() Devuelve una cadena que representa al objeto

window

valueOf() Convierte el objeto a su tipo primitivo (number,

boolean, string, o function)

open(url,nombre,característica) Abre la url especificada en la ventana llamada

nombre. Si no existe tal ventana, la url se abrirá en

una nueva ventana con las características

especificadas:



Toolbar=[yes,no,,1,0]:Indica si la nueva ventana

deberá tener barra de herramientas o no

location=[yes,no,1,0]:Indica si la nueva ventana

deberá tener campo de localización o no

directories=[yes,no,1,0]:Indica si la nueva ventana

deberá tener botones de dirección o no

status=[yes,no,1,0]:Indica si la nueva ventana

deberá tener barra de estado o no.

scrollbar=[yes,no,1,0]:Indica si la nueva ventana

deberá tener barra de desplazamiento o no

menubar=[yes,no,1,0]:Indica si la nueva ventana

deberá tener barra de menús o no

resizable=[yes,no,1,0]:Indica si la nueva ventana

podrá cambiar de tamaño o no

width=píxeles:Indica el ancho de la ventana cliente

height=píxeles:Indica el alto de la ventana cliente

outerWidth=píxeles:Indica el ancho total de la

ventana en píxeles

outerHeight=píxeles:Indica el alto total de la

ventana en píxeles

left=píxeles:Indica la distancia en píxeles desde el

lado izquierdo de la pantalla a la que se deberá

colocar la ventana

top=píxeles:Indica la distancia en píxeles desde el

lado superior de la pantalla a la que se deberá

colocar la ventana

alwaysRaised=[yes,no,1,0]:Indica si la ventana

deberá permanecer siempre en frente de cualquier

otra.

z-lock=[yes,no,1,0]:Indica si se debe bloquear o no

la ventana en su z-index actual.

Por ejemplo

El siguiente ejemplo muestra la apertura y cierre básicos de una nueva ventana.



2.- El objeto document

A pesar de que el objeto window es el de nivel más alto en la

jerarquía de JavaScript, su función principal es la de ser contenedor

del resto de los objetos. El contenido del documento web que está

visualizando realmente esta asociado al objeto document. El objeto

document, como ya vimos, es el equivalente a la etiqueta <body> de

HTML, pues todas las acciones que ocurren dentro de una página

Web se dan dentro del objeto document.

2.1 Propiedades del objeto document.

alinkColor Representa el color de los enlaces activos

anchors Es un array que contiene todos los enlaces internos que existen dentro

del documento

applets Es un array que contiene todos los applets que existen dentro del

documento

bgColor Representa el color de fondo del documento

cookie Es una cadena que contiene los valores de los cookies para el

documento actual

domain Es el nombre del servidor que ha servido el documento

embeds Es un array que contiene todos los elementos <embed> que existen

dentro del documento

fgColor Representa el color de primer plano del documento

forms Es un array que contiene todos los objetos form que existen dentro del

documento

images Es un array que contiene todas las imágenes que existen dentro del

documento

linkColor Representa el color de los enlaces del documento

title Es una cadena que contiene el título del documento actual

vlinkColor Representa el color de los enlaces visitados del documento



2.2 Métodos del objeto document

clear() Limpia la ventana del documento

close() Cierra la escritura sobre el documento actual


al objeto document

toString() Devuelve una cadena que representa el objeto

document

valueOf() Convierte el objeto a su tipo primitivo

(number,bolean, string, o function)

write() Escribe texto y HTML sobre el documento actual

writeln() Escribe texto y HTML sobre el documento actual,

seguido de una nueva línea

open(mime,”reoplace”) Abre la escritura sobre un documento. El parámetro

mime especifica el tipo de documento soportado por

el navegador. Si la cadena replace se pasa como

segundo parámetro, se reutliza el documento anterior

dentro del historial.

3.- El objeto form

Uno de los usos principales de JavaScript es proporcionar una

forma en la que el usuario pueda interaccionar en el lado del

cliente. Este tipo de interacción se produce en HTML a través de

los formularios, que se corresponden con el objeto form de

JavaScript.

3.1 Propiedades del objeto form.

action Es una cadena que especifica la URL donde la información del

formulario debe ser procesada.

elements Es un array que contiene cada uno de los objetos que aparecen en el

formulario, y en el mismo orden en que aparecen en el HTML.

encoding Es un cadena que contiene la codificación MIME especificada en el

atributo ENCTYPE

method Es una cadena que contiene el nombre del método encargado de

recibir/procesar la información del formulario.

target Es una cadena que contiene el nombre de la ventana a la que se deben

enviar las respuestas del formulario.

3.2 Métodos del objeto form

reset() Resetea el formulario. Tiene el mismo resultado que

pulsar sobre un botón de tipo RESET.

submit() Envia el formulario. Tiene el mismo resultado que

pulsar sobre el botón de tipo SUBMIT


al objeto form

toString() Devuelve una cadena que representa el objeto form





4.- El objeto Button (Submit,Reset y Button)

Los objetos de tipo botón (Submit, Reset y Button) nos

permiten manejar botones dentro de los formularios. A

traves de estos objetos los usuarios normalmente suelen

desencadenar las posibles acciones relacionadas con el manejo del documento.

4.1 Propiedades del objeto botón.

name Es una cadena que contiene el nombre del objeto botón, es decir,

contiene el valor del atributo NAME.

value Es un cadena que contiene el valor del objeto botón, es decir, contiene

el valor del atributo VALUE

4.2 Métodos del objeto botón.

click() Simula la acción de pulsar sobre el botón


al objeto botón.

toString() Devuelve una cadena que representa el objeto botón



Ejercicios variados

1. Crear un ejemplo el cual permita copiar el texto de una caja de texto a otra e utilizando el

evento onfocus.



Aunque preferiremos trabajar utilizando un identificador mejor de Objetos en HTML,

denominado DOM (el cual este material no profundizara).

Tiene su ventaja ya que solo habrá que escribir el ID del objeto y nada más, no habrá que rutear

dicho objeto pasando por todos sus objetos que lo contienen.

2. Crear un ejemplo el cual permita sumar 2 números y tiene 2 botones con eventos el cual

llamaran a las funciones determinadas



3.- Desarrollemos una ventana que sirva para loguearse y comprobar el usuario y la contraseña.

Aunque aquí los eventos están basados por medio de botones, pero podemos cambiarlo ya que un

formulario posee sus propios sus eventos.



4.- Desarrollemos una página el cual cargue una imagen en dicha página, pero dicha imagen se

halla en nuestro sitio, dentro de la carpeta imagen.



5.- Desarrollemos una página que permita cargar una cantidad de imágenes, después de ellos se

muestre con eventos de agrandar y encoger de manera proporcional.

Note que se puede

modificar la cantidad de

imágenes al cargar, en

este caso son 6.



6.- Mejoraremos el ejercicio anterior haciendo una muestra de dicha imagen en otra capa un poco

más grande, pero debemos tener presente que hay que crear 2 tipos de imágenes una de un tamaño

grande y otro de un tamaño más pequeño, en nuestro ejemplo tenemos dos carpetas las imágenes

pequeñas (carpeta chicas) y las imágenes normales (carpeta imagen).

Javascript

Documents

Transcript of Javascript