• Author / Uploaded
• Aldo Salinas Encinas

Citation preview

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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:

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

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 1

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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 \b \f \n \r \t \\ \’ \”

Significado Espacio hacia atrás Alimentación de línea Nueva línea Retorno de carro 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
.

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; } Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 2

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] 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

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 3

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] 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]);

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 4

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] 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

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 5

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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 toma valores solo hasta

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 6

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] 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

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 7

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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; nombreArray[1]=dato2; ……………………….. nombreArray[4]=dato5; Por ejemplo

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 8

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 9

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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.

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 10

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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. Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 11

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] 1.- Por ejemplo en nuestros ejemplos anteriores lo hemos definido nuestro script en el , 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 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 , esto se utiliza cuando queremos que se ejecute algo antes de llegar al .

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 12

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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 Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 13

DHTML [FUNDAMENTOS DEL LENGUAJE 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

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 14

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 15

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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:

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 16

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 17

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

4) Aquí se escribe algunos scripts de mucha utilidad en su página Web Colocar este script dentro de la etiqueta y agregarle un botón en con el nombre button

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 18

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] Colocar este script dentro de la etiqueta

Colocar este script dentro de la etiqueta

Colocar este script dentro de la etiqueta

Colocar este script dentro de la etiqueta y agregarle

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.

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 19

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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 defaultStatus frames length name self status top

Es un valor booleano que indica si la ventana esta o no cerrada Contiene el mensaje por defecto que aparece en la barra de estado del navegador Es un array que representa los objetos frames del objeto actual Es un valor entero que indica el numero de frames del objeto window actual Contiene el nombre del objeto window actual, o del frame actual Nombre alternativo del objeto window actual Determina el mensaje que aparece en la barra de estado Nombre alternativo para la ventana de nivel más superior

1.2 Métodos del objeto window Muestra el mensaje en una caja de dialogo Elimina el foco del objeto window actual Cancela el intervalo especificado por nombre Cierra el objeto window actual Muestra el mensaje en una caja de dialogo Evalúa la cadena como una sentencia, en referencia al objeto window Captura el foco sobre el objeto window actual focus() Mueve el objeto window actual al número de píxeles moveBy(x,y) especificados por x,y Mueve el objeto window actual a la coordenada (x,y) moveTo(x,y) Ajusta el tamaño del objeto window actual resizeBy(x,y) moviendo su esquina inferior derecha el número de píxeles x,y Ajusta el tamaño del objeto window actual resizeTo(ancho,alto) Desplaza el objeto actual a las coordenadas (x, y) scroll(x,y) Desplaza el objeto actual el número de píxeles x,y scrollBy(x,y) Desplaza el objeto actual a las coordenadas (x,y) scrollTo(x,y) Muestra un mensaje en una caja de dialogo el cual prompt(mensaje,respuesta) permite introducir información mediante una caja de texto. Evalúa la expresión especificada después de que setTimeout(expresión,tiempo) haya pasado el número en milisegundos (tiempo) Devuelve una cadena que representa al objeto toString() window Convierte el objeto a su tipo primitivo (number, valueOf() 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: alert(mensaje) blur() clearTimeout(nombre) close() confirm(mensaje) eval()

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 20

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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.

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 21

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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 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 anchors applets bgColor cookie domain embeds fgColor forms images linkColor title vlinkColor

Representa el color de los enlaces activos Es un array que contiene todos los enlaces internos que existen dentro del documento Es un array que contiene todos los applets que existen dentro del documento Representa el color de fondo del documento Es una cadena que contiene los valores de los cookies para el documento actual Es el nombre del servidor que ha servido el documento Es un array que contiene todos los elementos que existen dentro del documento Representa el color de primer plano del documento Es un array que contiene todos los objetos form que existen dentro del documento Es un array que contiene todas las imágenes que existen dentro del documento Representa el color de los enlaces del documento Es una cadena que contiene el título del documento actual Representa el color de los enlaces visitados del documento

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 22

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] 2.2 Métodos del objeto document clear() close() eval() toString() valueOf() write() writeln() open(mime,”reoplace”)

Limpia la ventana del documento Cierra la escritura sobre el documento actual Evalúa la cadena como una sentencia, en referencia al objeto document Devuelve una cadena que representa el objeto document Convierte el objeto a su tipo primitivo (number,bolean, string, o function) Escribe texto y HTML sobre el documento actual Escribe texto y HTML sobre el documento actual, seguido de una nueva línea 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 elements encoding method target

Es una cadena que especifica la URL donde la información del formulario debe ser procesada. 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. Es un cadena que contiene la codificación MIME especificada en el atributo ENCTYPE Es una cadena que contiene el nombre del método encargado de recibir/procesar la información del formulario. 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() submit() eval() toString() valueOf()

Resetea el formulario. Tiene el mismo resultado que pulsar sobre un botón de tipo RESET. Envia el formulario. Tiene el mismo resultado que pulsar sobre el botón de tipo SUBMIT Evalúa la cadena como una sentencia, en referencia al objeto form Devuelve una cadena que representa el objeto form Convierte el objeto a su tipo primitivo (number,bolean, string, o function)

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 23

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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 value

Es una cadena que contiene el nombre del objeto botón, es decir, contiene el valor del atributo NAME. 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() eval() toString() valueOf()

Simula la acción de pulsar sobre el botón Evalúa la cadena como una sentencia, en referencia al objeto botón. Devuelve una cadena que representa el objeto botón Convierte el objeto a su tipo primitivo (number,bolean, string, o function)

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

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 24

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] 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

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 25

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] 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.

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 26

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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.

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 27

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT]

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.

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 28

DHTML [FUNDAMENTOS DEL LENGUAJE JAVASCRIPT] 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).

Docente: Salinas Encinas Aldo http://webprofesional.blogspot.com

correo: [email protected] Página 29