Publicado el 4 de Octubre del 2018
883 visualizaciones desde el 4 de Octubre del 2018
229,1 KB
50 paginas
Creado hace 21a (16/12/2002)
El lenguaje JavaScript
Índice
Introducción
¿Qué es JavaScript?
Normas del código en JavaScript
La ventana “alert”
Formas de introducir Scripts en un documento
Uso de funciones
Eventos
Variables y constantes
Operadores
Introducción de datos
Sentencias de control
Paso de parámetros a funciones
Matrices (arrays)
Controles
Animaciones
Objetos predefinidos
Métodos para fecha y hora
Métodos matemáticos
Métodos para cadenas
Pag. 1
Manual JavaScript
Introducción
Los lenguajes Script son una de las múltiples aplicaciones que han surgido para
extender las capacidades del Lenguaje HTML. Con ellos no se pueden realizar
programas, tan sólo mejorar sus páginas Web. Existen varios lenguajes Script: Jscript,
VBScript,... aunque el más utilizado es JavaScript.
Qué es JavaScript?
Javascript es un lenguaje de programación basado en objetos y en eventos de usuario.
Los 'scripts' de Javascript pueden ser introducidos dentro de las páginas de HTML. Con
Javascript se puede dar respuesta a eventos iniciados por el usuario (el observador de
nuestras páginas, por ejemplo), eventos tales como la entrada de datos en un
formulario o algún enlace. Esto sucede sin ningún tipo de transmisión. De tal forma
que cuando un usuario escribe algo en un formulario, no es necesario que sea
transmitido hacia el servidor, verificado y devuelto. Las entradas son verificadas por la
aplicación cliente y pueden ser transmitidas después.
Aunque JavaScript se parece a Java, no es lo mismo. Java es un lenguaje de
programación mucho más complejo que JavaScript. JavaScript está hecho para ser un
lenguaje bastante fácil de entender. A los autores del JavaScript no les debió haber
importado mucho el tema de la programación. Por esta razón, algunos elementos de
Java no son aceptados en JavaScript.
Normas del código en JavaScript
Las normas para poder escribir cualquier código de JavaScript se basan en 5 puntos
básicos y que debemos cumplir siempre. Estas normas son las siguientes:
1. Todo el código (sentencias) debe ir entre los tags <SCRIPT> y </SCRIPT>.
Esta etiqueta puede contener el atributo LANGUAGE para definir el tipo de
lenguaje Script que utilizamos o la versión de este:
<SCRIPT LANGUAGE=”JavaScript 1.2”>
</SCRIPT>
sentencias;
.....
Si no se usa el atributo, el navegador interpreta que el lenguaje utilizado es
JavaScript.
2. Javacript es casesensitive: sensible a mayúsculas y minúsculas.
3. Todas las instrucciones deben finalizar con “;” que indica el salto de línea.
4. JavaScript usa básicamente las funciones.
5. Es un LPBO (Lenguaje de Programación Basado en Objetos) En todo
momento usamos objetos, sus propiedades y sus métodos.
Pag. 2
Manual JavaScript
La ventana “alert()”
Más adelante veremos los objetos de JavaScript, aunque para empezar a ver ejemplos
introduciremos de un modo básico uno de los métodos de este lenguaje. Se trata de la
ventana estándar que se usa para mostrar información en pantalla. Se puede mostrar
texto, variables y texto en conjunto con variables. El diseño de la ventana ya esta
definido, lo único que podemos hacer es mostrar la información en una o varias líneas.
Su diseño y sintaxis es:
SINTAXIS:
alert(“texto de la ventana”);
alert(variable);
alert(“texto”+variable);
Formas de introducir Scripts en un documento:
Existen tres formas de usar Scripts:
1. Directamente en el cuerpo del documento:
<html>
</html>
<head>
</head>
<body>
</body>
<title>Mi primer JavaScript!</title>
Esto es HTML.
<br>
<script language="JavaScript">
alert("Esto es JavaScript!")
</script>
<br>
Otra vez en HTML.
Pag. 3
Manual JavaScript
2. Mediante el uso de eventos:
<title>Mi primer JavaScript!</title>
<head>
</head>
<body onLoad=”alert(‘Esto es JavaScript!’);”>
</body>
Esto es HTML.
3. Teniendo los Scripts en un archivo independiente (*.js)
<head>
</head>
<body>
</body>
<title>Mi primer JavaScript!</title>
<script src=”.../../archivo.js”>
Esto es HTML.
EJERCICIOS UNO, DOS Y TRES
<html>
</html>
<html>
</html>
Probar los códigos de los puntos 1 y 2 y observar el resultado en su navegador.
Grabar como ejercicio1.html y ejercicio2.html respectivamente. Abrir los archivos
grabados desde el Navegador
Pruebe el punto 3 creando un archivo.html con el código de dicho punto y un
archivo.js donde escriba sólo alert("Esto es JavaScript!") Sin etiquetas HTML ni los tags
<SCRIPT> </SCRIPT>.
Grabar como ejercicio3.html. Abrirlo desde el Navegador
Uso de Funciones
Las funciones son un conjunto de sentencias (bloque de código) que especifica al
programa las operaciones a realizar. Son útiles para evitar la repetición de líneas y
modular el código. Para trabajar con ellas hay que desarrollarlas y llamarlas cuando lo
necesitemos.
function nombre_funcion([var1,var2,varN])
{
}
sentencia(s);
SINTAXIS DEL DESARROLLO:
SINTAXIS DE LA LLAMADA:
b) nombre_funcion(valor1,valor2,valorN);
a) <elemento evento=nombre_funcion([val1,val2,valN]);>
Pag. 4
Manual JavaScript
En el primero de los casos la llamada se realiza desde un elemento del documento. En
el segundo caso la llamada se realiza desde el interior de otra función que también es
posible.
Ahora vamos paso a paso a construir nuestro primer programa usando una función:
EJERCICIO CUATRO
function hola( )
{
}
<script>
</script>
<html>
<head>
</head>
<body onLoad=hola();>
Escriba el siguiente código para efectuar una llamada a una función desde un
elemento del documento.
Se utiliza el evento onLoad, que se verá posteriormente, para ejecutar la función “hola”
en el momento de cargar la página.
Grabar como ejercicio4.html y abrir el archivo grabado desde el Navegador
alert("Hola a todos");
. . . . . . .
EJERCICIO CINCO
Pruebe el siguiente ejemplo para realizar una llamada de una función desde otra
función.
Grabar como ejercicio5.html y abrir el archivo grabado desde el Navegador
<head>
</head>
<body onLoad=hola();>
function hola()
{
}
function rehola()
{ alert(“hola de nuevo a todos”); }
<html>
<script>
</script>
alert("Hola a todos");
rehola();
. . . . . . .
Pag. 5
Manual JavaScript
Eventos
Un evento es un mecanismo por el cual podemos detectar las acciones que realiza el
usuario y llamar automáticamente a la función que tengamos asociada. Desde esta
función realizaremos las acciones que tengamos desarrolladas.
SINTAXIS:
<elemento nombre_evento=nombre_funcion([parametros]);>
La siguiente tabla muestra los eventos y manipuladores de JavaScript:
SE PRODUCE AL
Terminar de cargar una página o frame (entrar).
Descargar una página o frame (salir).
Abortar la carga de una página.
Producirse algún error en la carga de la página.
Pasar el ratón por encima de un enlace, area o frame.
Dejar de estar el ratón encima de un enlace, area o frame.
EVENTO
onLoad
onUnLoad
onAbort
onError
onMouseOver
onMouseOut
onMouseMove Mover el ratón por el documento.
onKeyUp
onClick
onResize
onMove
onChange
onSelect
onFocus
onBlur
onSubmit
onReset
Presionar una tecla.
Hacer click con el ratón.
Dimensionar la ventana del navegador.
Mover la ventana del navegador.
Modificar texto en un control de edición. Sucede al perder el foco.
Seleccionar texto en un control de edición.
Situar el foco en un control.
Perder el foco un control.
Enviar un formulario.
Inicializar un formulario.
Pag. 6
Manual JavaScript
EJERCICIO SEIS
Compruebe la funcionalidad del evento onLoad y del evento onUnLoad en la entrada y
la salida de una página WEB.
Grabar como ejercicio6.html y abrir el archivo grabado desde el Navegador.
<head>
</head>
<body onLoad=hola(); onUnload=adios();>
<html>
function hola()
{
}
function adios()
{
}
<script>
</script>
<title>Autor:GRUPO A+L</title>
alert("Adios a todos");
alert("Hola a todos");
. . . . . . .
Compruebe la funcionalidad de los eventos onClick, onFocus y onKeyPress a través del
siguiente código.
EJERCICIO SIETE
<html>
<head>
</head>
<body>
</body>
. . . . . . .
function pulsa(){alert("Autor:GRUPO A+L");}
function foco(){alert("Foco en la primera Caja");}
function tecla(){alert("Pulsada tecla");}
<script>
</script>
<title>Autor:GRUPO A+L</title>
<input type="button" value="Autor" onClick=pulsa();>
<input type="text" size=”5” onFocus=foco();>
<input type="text" size=”5” onKeyPress=tecla();>
Grabar como ejercicio7.html y abrir el archivo grabado desde el Navegador
Pag. 7
Manual JavaScript
EJERCICIO OCHO
Compruebe la funcionalidad del eventos onResize a través del siguiente código.
Compruebe el efecto que se produce cuando se
Crear cuenta
Comentarios de: Manual Autoaprendizaje de JavaScript (0)
No hay comentarios