Cursillo básico sobre JavaScript.
Las pautas del cursillo que estrenaremos esta Semana.
1) Es un cursillo sobre javaScript,así que se supone que sabes algo de programación ( te va a hacer falta,si no no comprenderas muchas cosas).
2) Los cursillos se publicarán con una cadencia de 1 semana más o menos. 3) Todos llevarán la siguiente cabecera:
>-----------------------------------------------------------------------------<
Capitulo Nº............: 000
Tenmatica..............: JavaScript
Por....................: Manuel Barea 2:345/428@fidonet.org
Bibliogrfia............: GCI/Perl y JavaScript Isaac Cohen
>-----------------------------------------------------------------------------<
4) Constaran de teorica y ejemplos,y si quereis,podemos detenernos en algun cursillo y hacer algunas practicas antes de seguir.
5) Quisiera que fueseis testigos activos,no quisiera ser el unico que participara en el area..
6) Este cursillo no será el unico Topic del area,así que si necesitas/quieres hablar de algo que no sea JavaScript y que esté dentro de la temática del area, ¡ adelante ! :-)
7) El cursillo está basado en su totalidad del libro CGI/Perl y JavaScript de Isaac Cohen,editorial Eyrolles I.S.B.N.: 84 - 8088 - 143 - 7, más algunas cosillas de mi propia cosecha :-)
8) No se me ocurren más cosas 8-)
>----------------------------------------------------------------------------<
Capitulo Nº............: 001
Tenmatica..............: JavaScript
Por....................: Manuel Barea 2:345/428@fidonet.org
Bibliogrfia............: GCI/Perl y JavaScript Isaac Cohen
>----------------------------------------------------------------------------<
> 6. El lenguaje JavaScript.
JavaScript es un lenguaje Script que permite mejorar la gestión de la interfaz cliente/servidor. Un Script JavaScript insertado en un documento HTML permite reconocer y tratar localmente (es decir,en el cliente) los eventos generados por el usuario como el recorrido de un doc HTML o la gestión de un formulario.
JavaScript utiliza un gran numero de las funcionalidades de Java pero es más asequible porque no requiere conocimientos de programación orientada a objetos. El lenguaje JavaScript tiene una sintaxis simplificada que permite descripción mínima de los objetos utilizados.
A partir de ahora abreviaremos JavaScrip como JS
> 6.1 Utilización de JS en un doc HTML
La inserción de un script JS en un doc HTML se realiza mediante la marca SCRIPT utilizando la sintaxis
> <SCRIPT>
> codigo del script
> </SCRIPT>
Los atributos de esta marca son:
> LANGUAGE="JavaScript"
Este atributo es obligatorio en ausencia del atributo SRC. Precisa el lenguaje del script.
> SRC
El atributo SRC precisa el URL del script a insertar en el documento. Este atributo es opcional,porque el script puede insertarse directamente dentro del propio doc HTML.
Estos dos atributos pueden especificarse simultameamenre.. por ejemplo:
> <SCRIPT LANGUAJE="lenguaje" SCR=url>
> codigo del script
> </SCRIPT>
podrá utilizarse para especificar el lenguaje y el URL de un scrip a insertar en un doc. Veamos algunas observaciones respecto a la inte_ racción entre JS y HTML:
% El Script insertado mediante la marca SCRIPT es evaluado por el cliente tras la vosualización de una página HTML. Las funciones definidas no se ejecutan inmediatamente. Dependen de los eventos asociados a la página.
% Cuando el script se inserta mediante el atributo SRC,se evalúa como anteriormente- Si se definen varios scripts simultáneamente,el cliente evaluará en primer lugar el intertado mediante el atributo SRC y después los incluidos en el documento. Hay que estar atentos en esto,para no sufrir consecuencias con el orden de ejecución de los scripts,con los consiguientes posibles errores.
% Los URL correspondientes a un script JS poseen generalmente la extensión .js.
% Es preferible delimitar los scripts insertados en un documento por comentarios HTML para asegurarse de que el contenido del script no aparecerá en los clientes que no reconozcan la marca SCRIPT. Por Ejemplo:
> <SCRIPT LANGUAGE="JavaScript"
> <!--Disimula el contenido del script para los browsers
> // no compatibles
> codigo JavaScript
> //-->
> </SCRIPT>
% El lenguaje JS no distingue MAYUSCULAS de minusculas,salvo en las cadenas de literales,claro está.
> 6.2 Ejemplo 1: Visualizar un Texto.
El ejemplo siguiente permite visualizar el mensje "Hello World" en un doc HTML mediante un script JS. Este se representa por el objeto 'document' y la visualización se realiza mediante el método 'write' asociado al objeto.
> <HTML>
> <HEAD>
> <SCRIPT LANGUAGE="JavaScript">
> document.write("Hello World");
> </SCRIPT>
> </HEAD>
> <BODY>
> </BODY>
> </HTML>
> 6.3 Ejemplo 2: Definición de una función.
El ejemplo siguientye define una función que calcula el cuadrado de un numero y visualiza el resultado en una pagina HTML.
> <HTML>
> <HEAD>
> <SCRIPT LANGUAGE="JavaScript">
> <!-- Esconde el contenido del scrip a los browsers
> // no compatibles
> // definicion de la funcion square
> function square(i) {
> // mensaje que visualiza el parametro de la funcion
> document.write("Argumento pasado a la funcion: ", i,"<BR>");
> // valor devuelto por la funcion
> return i * i;
> }
> // llamada a la funion square
> document.write("el valor devuelto es: ",square(5),".");
> // fin del comentario para esconder -->
> </SCRIPT>
> </HEAD>
> <BODY>
> <BR>
> Finalizado.
> </BODY>
> </HTML>
El resultado de este ejemplo,seria una pagina HTML con este contenido :
> Argumento pasado a la funcion: 5
> El valor devuelto es: 25.
> Finalizado.
Logicamente hemos tomado como ejemplo calcular el cuadrado de 5.
>-----------------------------------------------------------------------------<
Capitulo Nº............: 002
Tenmatica..............: JavaScript
Por....................: Manuel Barea 2:345/428@fidonet.org
Bibliogrfia............: GCI/Perl y JavaScript Isaac Cohen
>-----------------------------------------------------------------------------<
> 6.4 Ejemplo 3: Interacción con un Formulario
Este Ejemplo,JS ilustra la interacción de un script con marcas HTML,presentes en la página. En este ejemplo,utilizamos también una ventana de diálogo que permite confirmar la validez del contenido del formulario antes de su trata- miento.
> <HTML>
> <HEAD>
> <SCRIPT LANGUAGE="JavaScrip">
> <!--
> function compute(form) {
> if (confirm("¿Está seguro?"))
// Evaluación de una expresión entrada por el user
// y asignación del resultado al campo de edición result
> form.result.value = eval(form.expr.value);
>
> else
> alert("Inténtelo de nuevo.");
// Esta funcion abre una ventana en el Browser anunciando el error
> }
> //-->
> </SCRIPT>
> </HEAD>
> <BODY>
> <CENTER><FORM>
> <TABLE>
> <TR> <TD>Escriba una expresión:
> <TD><INPUT TYPE="text" NAME="expr" SIZE=15 >
> <TD><INPUT TYPE="button" VALUE="Evaluar"
> ONCLICK="compute(this.form)">
> <TR> <TD>Resultado:
> <TD><INPUT TYPE="text" NAME="result" SIZE=15 >
> </TABLE>
> </FORM></CENTER>
> </BODY>
> </HTML>
Fin del ejemplo.
> 6.5 Ejemplo 4: Interacción con un formulario ( II )
En este ejemplo.el script verifica la edición realizada por el usuario y crea una ventana de diálogo para indicar al usuario si los datos son válidos o no y guiarlo.
> <HTML>
> <HEAD>
> <SCRIPT LANGUAGE="JavaScript">
> <!--
// Función que verifica comparando el argumento srt
// con los limites min y max pasados como parámetros
> function checkNumber(srt, min, max) {
> if (str == "" ) {
// Si no se introduce nada,abre ventana de error
> alert("Introduzca un número, por favor.");
> return false;
> }
// Verificación del contenido de la cadena de caracteres
// de entrada. Se examina un caracter cada vez.
> for (var i = 0; i < str.length; i++) {
> var ch = str.substring(i, i + 1);
> if ch < "0" || ch > "9") {
// presencia de un carácter no numérico,abre ventana de error
> alert("Introduzca un número, por favor.");
> return false;
> }
> }
// Conversión de la cadena de caracteres de entrada en un numero
> var = 0 + str;
// comparación del número con los limites
// min y max pasados como parámetros, si error,abre ventana
> if (num < min || num > max) {
> alert("Intente una cifra entre " + min + " y " + max "");
> return false;
> }
> return true;
> >
> function thanks() {
> alert("Gracias por su colaboración 8-) .");
> }
> </SCRIPT>
> </HEAD>
> <BODY>
> <FORM>
> Introduzca un valor numérico (seguido de TAB) :
> <INPUT NAME "num"
> ONCHANGE="if (!checkNumber(this.value, 1,
> 10)){this.focus();this.select();} else {thanks()}"
> VALUE="0">
> </FORM>
> <SCRIPT LANGUAGE="JavaScript">
> document.write("<PRE>");
> document.writeln("nombre del campo: "
> + document.forms[0].num.name);
> document.writeln("valor del campo: "
> + document.forms[0].num.value);
> document.write("</PRE>");
// Manejos del objeto documment que estudiaremos más adelante >
> </SCRIPT>
> </BODY>
> </HTML>
Fin del Ejemplo
>---------------- Fin del Capitulo------------------------------------------<
>-----------------------------------------------------------------------------<
Capitulo Nº............: 003
Tenmatica..............: JavaScript
Por....................: Manuel Barea 2:345/428@fidonet.org
Bibliogrfia............: GCI/Perl y JavaScript Isaac Cohen
>-----------------------------------------------------------------------------<
> 6.6 La representación de los datos en JS
El lenguaje JS permite tres formas de representación de datos,a saber: los valore,las variables y los valores literales. Seguidamenre describiremos estas tres formas y la sintaxis que llevan asociada.
> 6.6.1 Los Valores
JS reconoce los tipos de valores siguientes:
# los números,como 12 o 3.589724;
# los booleanos compuestos de true y false.
# las cadenas de caracteres,como "Hola Mundo";
# el tipo null que representa un valor nulo.
Este número restringido de tipos permire generar funciones diversas para las aplicaciones cliente/servidor. Es importante observar que JS,como PERL,no distingue los enteros de los reales. Por el contrario,no existe en JS un tipo predeterminado.
JS no es un lenguaje con tipos;por consiguiente,cuando se declara una variable no es necesario precisar su tipo. El contenido de la variable se convertirá automáticamente en el transcurso del programa según su uso.
El esquema de conversión del tipo se basa en el principio siguiente: el tipo asociado corresponde al del operando de la izquierda. Estp se debe a que la evaluación se realiza de izquierda a derecha. Por ejemplo supongamos la deficinión de las variable siguientes:
> var astring = "7";
> var anumber = 42
y evaluemos las expresiones siguientes:
> x = astring + anumber;
> y = anumber + astring;
La primera expresión convertirá la variable anumber en una cadena de caracteres porque el operando de la izquierda astring es una cadena de caracteres. Esta expresion concatena las dos cadenas de caracteres y resulta x es= "742"
Por el contrario,la segunda expresión convierte astring en un valor númerico porque el operando de la inzquierda anumber es un número. Esta segunda expre- siónm suma los numeros y resulta y= "49".
La conversión de tipos no puede hacerse en todos los casos posibles,ciertas cadenas de caracteres no pueden convertirse en número. Tales conversiones generan un error. Por ejemplo:
> var anumber = 42;
> var astring = "Lolo";
> y = anumber + astring;
generará un error,porque la cadena de caracteres "Lolo" no puede convertirse en un múmero.
> Tabla de conversiones de tipos en JS
o***************************************************************************o
! !
!Tipo Funcion Objeto Numero Booleano String !
o===========================================================================o
! !
!Funcion - funcion error error descompila!
!---------------------------------------------------------------------------!
!Objeto error - error true toString !
!Objeto nulo funobj OK - 0 false "null" !
!---------------------------------------------------------------------------!
!Numero error Numero - true toString !
!Numero=0 error null - false "0" !
!---------------------------------------------------------------------------!
!Booleano=true error Booleano 1 - "true" !
!Booleano=false error Booleano 0 - "false" !
!---------------------------------------------------------------------------!
!string funstr OK String numstr OK true - !
!string nula error String error false - !
! !
o***************************************************************************o
> ($) NOTA la palabra string es una abreviatura de "cadena de caracteres"
> 6.6.2 Las Variables
Las variables se utilizan para representar valores en una aplicación. Los Nombres que permiten referenciarlas deben seguir ciertas reglas...:
% El nombre d ela variable debe empezar por una letra o por el caracter "_".
% Los caracteres siguientes pueden ser cifras.
El uso de mayusculas o minusculas no es importante,porque javaScript no hace diferencias entre ellas en los nombres de variables.
Ejemplos de nombres de variables:
> access_number
> temp99
> _user
> _0123
> 6.6.3 Los valores literales
Los valores literales son la representación de los valores en JS. Son fijos y corresponden a los datos trascritos literalmente. Ejemplo..:
> 778
> 123.456
> "Me llamo Pepe"
Los datos pueden transcribirse de modo distinto y representar el mismo valor. Por ejemplo,un número entero puede representarse en decimal (base 10),hexade_ cimal (base 16) u octal (base 8),de tal forma que si el entero empieza por 0 se considerará en octal y si empieza por 0x en hexadecimal. Lo mismo ocurre con los reales,que pueden estar con o sin exponente. Por ejemplo: 3.1415 y 31.415E-1. Las cadenas alfanumericas has de delimitarse por comillas (") o apóstrofes ('),ejemplo : " Me llamo Pepe"
Las cadenas de caracteres,pueden contener delimitadores de formato. Estos son...:
o-----------------------------------------o
! Caracter ! Descripción !
o-----------------------------------------o
! \b ! Espacio atrás !
-------------------------------------------
! \f ! Cambio de Pagina !
-------------------------------------------
! \n ! Nueva Linea !
-------------------------------------------
! \r ! Retorno de carro !
-------------------------------------------
! \t ! Tabulación !
o-----------------------------------------o
>---------------- Fin del Capitulo -------------------------------------------<
Capitulo Nº............: 004
Tematica...............: JavaScript
Por....................: Manuel Barea 2:345/428@fidonet.org
Bibliografia...........: CGI/Perl y JavaScript - Isaac Cohen
Programación en JavaScript - Danny Goodman
>-----------------------------------------------------------------------------<
> 6.7 Las Expresiones y operadores de JS.
Solo reseñar que son indenticos a los operadores de C.
> 6.7.1 Expresiones Condicionales
Una Expresion condicional tiene dos valores posibles. Estos se seleccionan a partir del resultado de la evaluación de una prueba. La sintaxis es..:
> (prueba) ? val0 : val1
Cuando la prueba se verifica la expresión condicional tiene como valor val0. En caso contrario tiene como valor val1. Otro ejemplo...:
> max = ( a > b ) ? a : b;
Asigna a max el mayor de a ó b .
> 6.7.2 Operadores Aritmeticos o connubiales.
o---------------------------------------------------------------------o
! Sintaxis ! Nombre ! Descripción !
o---------------------------------------------------------------------o
! + ! Mas ! Suma.Trabaja tambien con cadenas !
-----------------------------------------------------------------------
! - ! Menos ! Resta. Solo enteros o de coma Flotante !
-----------------------------------------------------------------------
! * ! Multiplicación ! Multiplica. Enteros o coma Flotante !
-----------------------------------------------------------------------
! / ! Division ! Divide. Enteros o coma Flotante !
-----------------------------------------------------------------------
! % ! Modulo ! Resto de una División. Ent. Coma Flot. !
-----------------------------------------------------------------------
! ++ ! Incremento ! Icrenmenta el valor de 1 en 1 !
-----------------------------------------------------------------------
! -- ! Disminución ! Drecrementa el valor de 1 en 1 !
-----------------------------------------------------------------------
* ! -val1 ! Negación ! Calcula la negación de la variable !
o---------------------------------------------------------------------o
(*) La Negación se usa anteponiendo el signo menos (-) delante de la variable.
> 6.7.3 Operadores lógicos de Bits.
En JS se puede operar con los Bits. Estos operadores trabajan sobre la repre_ sentación binaria de los operandos. Por ejemplo,100 representa el decimal 8. Tabla de operadores de Bits.
o-----------------------------------------------------o
! Operador ! Descripción !
o-----------------------------------------------------o
! & ! Y lógico de Bits !
-------------------------------------------------------
! | ! O (inclusivo) lógico de Bits !
-------------------------------------------------------
! ^ ! O (exclusivo) lógico de Bits !
-------------------------------------------------------
! >> ! Desplazamiento a la Derecha !
-------------------------------------------------------
! << ! Desplazamiento a la Izquierda !
-------------------------------------------------------
! >>> ! Desplazamiento a la Derecha con Ceros !
o-----------------------------------------------------o
> 6.7.4 Operadores lógicos o Booleanos.
Estos operadores tienen como operandos valores Booleanos y devuelven true o false.
o----------------------------------------------------------------o
! Operador ! Descripción !
o----------------------------------------------------------------o
! && ! Y devuelve True si los dos operandos son true !
------------------------------------------------------------------
! || ! O devuelve true si uno de los operandos es true !
------------------------------------------------------------------
! ! ! NOY Negación. Convierte el valor al opuesto ! ------------------------------------------------------------------
El operador NOY cambia el valor de la expresión de true a false o viceversa. Por ejemplo....:
> !true Devuelve False
> !(10 > 5) Devuelve False
> !<10 < 5) Devuelve True
> 6.7.5 Operadores de relación.
Estos operadores permiten comparar operandos y devuelven true o false en función del resultado de la prueba.
o--------------------------------------------------------------------------o
! Operador ! Descripción !
o---------------------------------------------------------------------------
! == ! true si los operandos son iguales !
----------------------------------------------------------------------------
! != ! true si los operandos NO son iguales !
----------------------------------------------------------------------------
! > ! true si el operando izquierdo es mayor que el derecho !
----------------------------------------------------------------------------
! < ! true si el operando izquierdo es menor que el derecho !
----------------------------------------------------------------------------
! >= ! true si el operando izquierdo es mayor o igual que el derecho!
----------------------------------------------------------------------------
! <= ! true si el operando izquierdo es menor o igual que el derecho!
o--------------------------------------------------------------------------o
> 6.7.6 Operadores de Asignación.
o--------------------------------------------------------------------------o
! Sintaxis ! Nombre ! Ejemplo ! Significado !
o--------------------------------------------------------------------------o
! = ! igual a ! x=y ! x = y !
----------------------------------------------------------------------------
! += ! añade su valor a ! x+=y ! x = x + y !
----------------------------------------------------------------------------
! -= ! Sustrae su valor a ! x-=y ! x = x - y !
----------------------------------------------------------------------------
! *= ! Multiplica su valor por ! x*=y ! x = x * y !
----------------------------------------------------------------------------
! /= ! Divide su valor por ! x/=y ! x = x / y ! ----------------------------------------------------------------------------
! %= ! Modulo de su valor por ! x%=y ! x = x % y !
----------------------------------------------------------------------------
! <<= ! Despl. Izqui. por valor ! x<<=y ! x = x << y !
----------------------------------------------------------------------------
! >>= ! Despl. Derec. por valor ! x>>=y ! x = x >> y !
----------------------------------------------------------------------------
! >>>= ! Llenado de ceros valor ! x>>>=y ! x = x >>> y !
----------------------------------------------------------------------------
! &= ! Y de Bits por el valor ! x&=y ! x = x & y !
----------------------------------------------------------------------------
! ^= ! O de Bits por el valor ! x^=y ! x = x ^ y !
----------------------------------------------------------------------------
! |= ! O Exclusivo por valor ! x|=y ! x = x | y !
o---------------------------------------------------------------------------
Datos del autor:
Nombre: Lolo Barea
E-mail: (mbarea@arrakis.es)
[Indice general] - [Sexo] - [linux] - [humor] - Chat entre usuarios - [miscelanea] - [Novedades] -
