Tutorial de javaScript [a pedido de hellsign]

bellaco69

INTRODUCCIÓN

JavaScript es una de las múltiples aplicaciones que han surgido para extender las capacidades del Lenguaje HTML. JavaScript es un lenguaje script orientado a documento. Nunca podrá hacer un programa, tan sólo podrá mejorar sus páginas Web.

NORMAS DEL CODIGO 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:

Todo el código (sentencias) esta dentro de funciones.
Las funciones se desarrollan entre las etiquetas <script> y </script>.
Las etiquetas "<script>" deben colocarse entre las etiquetas <head></head>. y
Las etiquetas "<title>" no pueden estar colocadas entre las de "<script>".
La llamada a la función se hace a través de un evento de un elemento del documento.

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.

SINTAXIS DEL DESARROLLO:

function nombre_funcion([var1,var2,varN])
{
sentencia(s);
}

SINTAXIS DE LA LLAMADA:

<elemento evento=nombre_funcion([val1,val2,valN]);>
nombre_funcion(valor1,valor2,valorN);
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.

LA VENTANA "ALERT"

Se trata de una ventana estándar que usamos 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 una o varias líneas. Su diseño y sintaxis es:

SINTAXIS:

alert("texto de la ventana");
alert(variable);
alert("texto"+variable);

PRIMER PROGRAMA

Ahora vamos paso a paso a construir nuestro primer programa, y así podremos ver los elementos principales del lenguaje y su colocación dentro del documento Web. Solo debemos seguir la teoría vista en los temas anteriores.

EJEMPLO 1: Llamada a una función desde un elemento del documento.

<html>
<head>
<script>
function hola()
{
alert("Hola a todos");
}
</script>
<title>Autor:Ricardo Amezua</title>
</head>

<body onLoad=hola();>
</body>
</html>

EJEMPLO 2: Llamada a una función desde otra.

<html>
<head>
<script>
function hola()
{
alert("Hola a todos");
rehola();
}
function rehola()
{
alert("hola de nuevo a todos");
}
</script>
<title>Autor:Ricardo Amezua</title>
</head>

<body onLoad=hola();>
</body>
</html>

bellaco69

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

EVENTO SE PRODUCE AL onLoad Terminar de cargar una página o frame (entrar). onUnLoad Descargar una página o frame (salir). onAbort Abortar la carga de una página. onError Producirse algún error en la carga de la página. onMouseOver Pasar el ratón por encima de un enlace, area o frame. onMouseOut Dejar de estar el ratón encima de un enlace, area o frame. onMouseMove Mover el ratón por el documento. onKeyUp Presionar una tecla. onClick Hacer click con el ratón. onResize Dimensionar la ventana del navegador. onMove Mover la ventana del navegador. onChange Modificar texto en un control de edición. Sucede al perder el foco. onSelect Seleccionar texto en un control de edición. onFocus Situar el foco en un control. onBlur Perder el foco un control. onSubmit Enviar un formulario. onReset Inicializar un formulario.

EJEMPLO 1:

<html>
<head>
<script>
function hola(){alert("Hola a todos");}
function adios(){alert("Adios a todos");}
</script>

<title>Autor:Ricardo Amezua</title>
</head>

<body onLoad=hola(); onUnload=adios();>
</body>
</html>

EJEMPLO 2:

<html>
<head>
<script>
function pulsa(){alert("Autor:RICARDO AMEZUA");}
function foco(){alert("Foco en la primera Caja");}
function tecla(){alert("Pulsada tecla");}
</script>

<title>Autor:Ricardo Amezua</title>
</head>

<body>
<input type="button" value="Autor" onClick=pulsa();>
<input type="text" size="5" onFocus=foco();>
<input type="text" size="5" onKeyPress=tecla();>
</body>
</html>

EJEMPLO 3:

<html>
<head>
<script>
function cambio(){alert("Cambiado el tamaño");}
</script>

<title>Autor:Ricardo Amezua</title>
</head>

<body onResize=cambio();>
</body>
</html>

bellaco69

VARIABLES Y CONSTANTES

VARIABLES:

Espacio de memoria con un nombre reservado para guardar información mientras la página este cargada. El primer paso para poder trabajar con variables es declararlas, que es lugar donde se les da su nombre y su ámbito.

Para dar nombre a una variable debemos tener en cuenta las siguientes normas:

No pueden contener espacios.
Distingue entre mayúsculas y minúsculas.
No pueden contener acentos, puntos o cualquier signo gramatical.
No pueden comenzar con un dígito ni contener la letra "ñ".
Nombre único y exclusivo para cada variable salvo que estén es 2 funciones distintas.

El ámbito de una variable define si la variable se podrá utilizar en cualquier parte del documento (es global). O si solo se podrá utilizar dentro de una función determinada (es local). La declaración de las variables globales se realiza dentro de las etiquetas "<script>" pero fuera de cualquier función. La declaración de las variables locales se realiza dentro de la función que nos interese usar esa variable.

La sintaxis para declarar una variable es igual en ambos casos, la única diferencia es el lugar donde las declaramos. La siguiente línea nos muestra como hacerlo:

var nombre_variable[=valor];

El tipo de variable es asignado automáticamente por JavaScript. Depende del primer valor que se guarde en la variable. Por tanto los tipos de variable existentes son los que mostramos en la siguiente tabla:

TIPO VALORES numérica Cualquier tipo numérico boolean True o False. string Texto o letra.

Otro aspecto importante, es la conversión de datos, que en JavaScript es automática. Transforma los datos de todas la variables en una expresión según el tipo de la primera variable. No es muy segura y puede acarrear muchos problemas.

EJEMPLO:

num1="12";
num2=10;

x=num1+num2; // daria como resultado 1210.
y=num2+num1; // daria como resultado 22.

Para evitar problemas en las conversiones, se pueden utilizar métodos ya implementados que realizan la conversión de una manera más segura.

TIPO DE CONVERSION SINTAXIS De texto a numero entero var_numerica=parseInt(var_texto); De texto a coma flotante (decimal) var_numerica=parseFloat(var_texto); De numérica a texto Es automática sin peligro.

EJEMPLO:

<html>
<head>
<script>
var global=100;

function uno()
{
var local_uno=1;
alert("Global " +global +" Local " +local_uno);
dos();
}

function dos()
{
var local_dos=2;
alert("Global " +global +" Local " +local_dos);
}
</script>

<title>Autor:Ricardo Amezua</title>
</head>

<body onLoad=uno();>
</body>
</html>

CONSTANTES ("literales")

Los valores iniciales que se les asigna son invariables. Estos no son variables, sino expresiones constantes. Los tipos de literales son los mismos que en las variables, según el primer dato que almacenemos será de un tipo u otro.

TIPO VALORES numérica Cualquier tipo numérico boolean True o False. string Texto o letra.

bellaco69

OPERADORES
JavaScript define TRES tipos de operadores: aritméticos, relacionales y lógicos. También hay definido un operador para realizar determinadas tareas, como las asignaciones.

ASIGNACION (=)

En JavaScript se puede utilizar el operador de asignación en cualquier expresión valida. Solo con utilizar un signo de igualdad se realiza la asignación. El operador destino (parte izquierda) debe ser siempre una variable, mientras que en la parte derecha puede ser cualquier expresión valida. Es posible realizar asignaciones múltiples, igualar variables entre si y a un valor.

SINTAXIS:

variable=valor;

variable=variable1;

variable=variable1=variable2=variableN=valor;

ARITMÉTICOS

Pueden aplicarse a todo tipo de expresiones. Son utilizados para realizar operaciones matemáticas sencillas, aunque uniéndolos se puede realizar cualquier tipo de operaciones. En la siguiente tabla se muestran todos los operadores aritméticos.

OPERADOR DESCRIPCIÓN - Resta + Suma * Multiplica / Divide % Resto de una división -- Decremento en 1 ++ Incrementa en 1 vari+=valor Incrementa el valor de vari. vari-=valor Decrementa el valor de vari. vari*=valor Multiplica el valor de vari.

LÓGICOS Y RELACIONALES

Los operadores relacionales hacen referencia a la relación entre unos valores y otros Los lógicos se refiere a la forma en que esas relaciones pueden conectarse entre si. Los veremos a la par por la estrecha relación en la que trabajan.

OPERADORES RELACIONALES

OPERADOR DESCRIPCIÓN < Menor que > Mayor que <= Menor o igual >= Mayor o igual == Igual !¡= Distinto

OPERADORES LÓGICOS.

OPERADOR DESCRIPCIÓN && Y (AND) | | O (OR) ¡! NO (NOT)

bellaco69

INTRODUCCIÓN DE DATOS
JavaScript permite interactuar al usuario por medio de la introducción de datos. La introducción de datos se puede realizar por medio de la ventana prompt o utilizando controles como cajas de texto.

VENTANA PROMPT:

SINTAXIS:

vari=prompt("Texto de la ventana","valor inicial caja");

Al pulsar el botón aceptar, el contenido de la caja pasa a vari. Si se pulsa el botón cancelar, el contenido de la caja se pierde y vari queda con valor null.

EJEMPLO:

<html>
<head>
<script>
function valor()
{
var nombre;
nombre=prompt("Introduce Nombre:","");
alert("hola "+nombre);
}
</script>
</head>

<body onload=valor();>
</body>
</html>

CAJA DE TEXTO:

Otro mecanismo por el cual se pueden introducir datos, es mediante las cajas de texto. Todo el trabajo con las cajas, esta basado en funciones y métodos ya implementadas en JavaScript. Estas son las funciones que podemos utilizar:

FUNCIÓN DESCRIPCIÓN variable=nombre_caja.value; Guarda el contenido de la caja nombre_caja.value=valor o variable; Muestra en la caja el valor nombre_caja.value=""; Limpia el contenido de la caja nombre_caja.sefocus(); Envía el foco a la caja

EJEMPLO:

<html>
<head>
<script>
function muestra()
{
var nombre=cnombre.value;
alert("Eres "+nombre);
cnombre.value="";
cnombre.focus();
}
</script>
</head>

<body>
Nombre:<input type="text" name="cnombre" size="20">
<input type="button" value="Ver" onClick=muestra();>
</body>
</html>

bellaco69

SENTENCIAS DE CONTROL

Es la manera que tiene JavaScript de provocar que el flujo de la ejecución avance y se ramifique en función de los cambios y estado de los datos.

IF-ELSE:

La ejecución atraviesa un conjunto de estados boolean que determinan que bloques de código se ejecutan. Con la utilización de esta sentencia nunca se realizarán ambos bloques de código.

SINTAXIS: En caso de ser una sola sentencia por parte las llaves son opcionales.

if (expresion-booleana)
{
Sentencia(s);
{
[else]
{
Sentencia(s);
}

La cláusula else es opcional. La expresión puede ser de cualquier tipo y más de una (siempre que se unan mediante operadores lógicos).Otra opción posible es la utilización de if anidados, es decir unos dentro de otros compartiendo la cláusula else.

EJEMPLO 1:

<html>
<head>
<script>
function ver()
{
var edad=parseInt(cedad.value);

if(edad<=18)
alert("No tienes acceso\nDebes tener 18");
else
alert("Bienvenido a la pagina");
}
</script>
<title>Pagina nueva 1</title>
</head>

EJEMPLO 2:

<html>
<head>
<script>
function ver()
{
var edad=parseInt(cedad.value);

if(edad<=18)
alert("Abono Joven");
else
{
if(edad>=65)
alert("Abono 3ª Edad");
else
alert("Abono normal");
}
}
</script>
<title>Pagina nueva 1</title>
</head>

SWITCH:

Es una sentencia muy similar a if-else. Si los valores con los que se compara son números se pone directamente el pero si es texto se debe encerrar entre comillas. La sintaxis de esta sentencia es:

SINTAXIS:

switch (expresión){
case constante1:
sentencia(s);
break;
case constante2:
sentencia(s);
break;
case constante3:
sentencia(s);
break;
case constanteN:
sentencia(s);
break;
[default:]
sentencia(s);
}

El valor de la expresión se compara con cada una de las constantes de la sentencia case, si coincide alguno, se ejecuta el código que le sigue, y cuando ejecuta break sale de este bloque hasta salir del switch. Si ninguno coincide se realiza el bloque default (opcinal), si no lo hay no se ejecuta nada.

En el caso que varias sentencias case realicen la misma ejecución se pueden agrupar, utilizando una sola sentencia break. Evitamos de este modo duplicar líneas de código. La sintaxis es la siguiente:

SINTAXIS:

switch (expresión){
case constante1:
case constante5:
sentencia(s);
break;
case constante3:
sentencia(s);
break;
[default:]
sentencia(s);
}

EJEMPLO:

<html>
<head>
<script>
function espe()
{
var tipo=cespe.value;
switch(tipo)
{
case "humano":
alert("Eres un Humano");
break;
case "planta":
alert("Eres un Vegetal");
break;
case "animal":
alert("Eres del reino Animal");
break;
default:
alert("Especie Desconocida");
break;
}
}
</script>
</head>
<body>
ESPECIE:
<input type="text" name="cespe" size="20" onBlur=espe();>
</body>
</html>

WHILE:

Ejecuta repetidamente el mismo bloque de código hasta que se cumpla una condición de terminación. Hay cuatro partes en todos los bucles. Inicialización, cuerpo, iteración y condición.

SINTAXIS:

[inicialización;]
while(condicion[es])
{
cuerpo;
[iteración;]
}

DO..WHILE:

Es lo mismo que en el caso anterior pero aquí como mínimo siempre se ejecutará el cuerpo del bucle una vez, en el tipo de bucle anterior es posible que no se ejecute ni una sola vez el contenido de este.

SINTAXIS:

[inicialización;]
do{
cuerpo;
[iteración;]
}while(condición);

bellaco69

FOR:

Realiza las mismas operaciones que en los casos anteriores pero la sintaxis es una forma compacta. Normalmente la condición para terminar es de tipo numérico. La iteración puede ser cualquier expresión matemática valida. Si de los 3 términos que necesita no se pone ninguno se convierte en un bucle infinito.

SINTAXIS: En caso de ser una sola sentencia por parte las llaves son opcionales.

for (inicio;cond_fin;iteración)
{
sentencia(S);
}

EJEMPLO: El tipo de bucle puede ser cualquiera de los 3 (for, while, do..while).

<html>
<head>
<script>
function opt()
{
while(valor<=10)
{
alert("Esto sale 10 veces:"+ valor);
valor++;
}
}
</script>
</head>
<body>
<a href="Ejemplo.htm" onMouseOver=opt();>ir a uno</a>
</body>
</html>

Dentro de las sentencias de control se pueden incluir las sentencias de ruptura ya que van muy ligadas a los bucles. Estas sentencias de ruptura son continue y break. A continuación vamos a ver como actúa cada una de ellas

La sentencia continue lo que hace es ignorar las sentencias que tiene el bucle y saltar directamente a la condición para ver si sigue siendo verdadera, si es así, sigue dentro del bucle, en caso contrario, saldría directamente de el.

La sentencia break tiene una operatoria más drástica que la sentencia continue, en vez de saltar a la línea de la condición para comprobar su estado, lo que hace es abandonar directamente el bucle dándolo por terminado.

EJEMPLO 1: Comparamos la actuación de continue y break.

CONTINUE El bucle terminara cuando muestre el 10.
BREAK El bucle terminara cuando muestre el 4.

<html>
<head>
<script>
function bucle()
{
var cont=1;
while(cont<=10)
{
alert(cont);
cont++;
if(cont==5)
continue;
}
}
</script>
</head>
<body onLoad=bucle();></body> </html> <html>
<head>
<script>
function bucle()
{
var cont=1;
while(cont<=10)
{
alert(cont);
cont++;
if(cont==5)
break;
}
}
</script>
</head>
<body onLoad=bucle();></body> </html>

EJEMPLO 2:

<html>
<head>
<script>
function bucle()
{
var cont=1;
while(cont<=10)
{
alert(cont);
cont++;
if(cont==5)
continue;
}
}
</script>
</head>
<body onLoad=bucle();>
</body>
</html> <html>
<head>
<script>
function bucle()
{
var cont=1;
while(cont<=10)
{
alert(cont);
cont++;
if(cont==5)
{
cont=30;
continue;
}
}
}
</script>
</head>
<body onLoad=bucle();>
</body>
</html>

También podríamos considerar como sentencia de ruptura (sin serlo), un tipo de ventana estándar llamada confirm. Este tipo de ventana nos permite elegir entre 2 opciones, cada una con un valor de retorno. Con lo que se puede llamar a las sentencias de ruptura (break, continue) según la opción que se elija.

SINTAXIS:

var_boolean=confirm("texto de la ventana");

BOTON PULSADO VALOR DE RETORNO ACEPTAR true CANCELAR false

EJEMPLO 1:

<html>
<head>
<script>
function confirma()
{
var respuesta=confirm("Pulsa un botón");

if (respuesta==true)
alert("Has pulsado ACEPTAR");
else
alert("Has pulsado CANCELAR");
}
</script>
</head>

<body onLoad=confirma();>
</body>
</html>

EJEMPLO 2:

<html>
<head>
<script>
function salida()
{
var cont=1;
var paso=1;
var res;

for(cont=1;cont<=100;cont++)
{
alert("Paso " +cont);
if(paso==10)
{
paso=0;
res=confirm("¿Desea Seguir?");
if (res==false)
break;
}
paso++;
}
}
</script>
</head>

<body onLoad=salida();>
</body>
</html>

bellaco69

PASO DE PARÁMETROS A FUNCIONES
Es el paso de información (parámetros) a una función. Cuando se realiza la llamada hay que indicar entre los paréntesis los valores que se van a enviar. Estos valores son recogidos por variables locales que son declaradas dentro de los paréntesis.

El utilizar este método de trabajo, evita duplicar líneas, agrupamos el código y nos hace más sencillo la modificación y detección de errores en el código. El modo de hacer esto es básicamente igual que cuando trabajos con las funciones, lo único que cambia son los valores.

SINTAXIS DE LA LLAMADA:

<elemento evento=nombre_funcion(valor1,valor2,valorN);>

nombre_funcion(valor1,valor2,valorN);

SINTAXIS DEL DESARROLLO:

function nombre_funcion(var1,var2,varN)
{
sentencia(s);
}

Solo debemos tener en cuenta, que en la llamada y el desarrollo, el número de parámetros coincida en ambos casos.

EJEMPLO 1:

<html>
<head>
<script>
function opt(valor)
{
if(valor==1)
alert("Vas a ir a uno");
else
alert("Vas a ir a dos");
}
</script>
<title>Autor:Ricardo Amezua</title>
</head>

<body>
<a href="Uno.htm" onMouseOver=opt(1);>ir a uno</a>
<a href="Dos.htm" onMouseOver=opt(2);>ir a dos</a>
</body>
</html>

EJEMPLO 2:

<html>
<head>
<script>
function opt(valor)
{
var cadena;
switch(valor){
case 1:
cadena="uno";
break;
case 2:
cadena="dos";
break;
case 3:
cadena="tres";
break;
case 4:
cadena="cuatro";
break;
}
alert("Vinculo " +cadena);
}
</script>
<title>Autor:Ricardo Amezua</title>
</head>

<body>
<a href="Uno.htm" onMouseOver=opt(1);>uno</a>
<a href="Dos.htm" onMouseOver=opt(2);>dos</a>
<a href="Tres.htm" onMouseOver=opt(3);>tres</a>
<a href="Cuatro.htm" onMouseOver=opt(4);>cuatro</a>
</body>
</html>

MATRICES (Arrays) Una matriz es una colección de variables del mismo tipo que tiene un nombre común. A un elemento especifico de un matriz se accede mediante su índice. Todos los arrays tienen como primer índice el valor 0. Hay que tener muy presente NO rebasar el valor del último índice.
SINTAXIS:
var nombre_array=new Array();

INICIALIZACIÓN DE UN ELEMENTO:
nombre_array[indice]=valor;

UTILIZACIÓN DE ELEMENTOS: Casi como si se tratase de una variable normal.
nombre_array[indice];

EJEMPLO:
<html>
<head>
<script>
function opt()
{
var tabla=new Array();

tabla[0]="hola";
tabla[1]="adios";
tabla[2]="tarde";
tabla[3]="noche";
tabla[4]=tabla[0]+tabla[1];
alert(tabla[0] +"\n" +tabla[1]);
alert(tabla[4]);
}
</script>
</head>

<body>
<input type="button" value="Ver" onClick=opt();>
</body>
</html>

	INICIO	CARÁTULAS	ARTISTAS	FOTOS	LÍRICAS	RADIO

VIDEOS › Top 10 › Videos Recientes › Sugerir Video › Diseño Digital › Entrevistas › Eventos › Fruity Loops › Graciosos › Perriando › Tiraera › Videos Musicales CD's › Top Cd's › Líricas FORO › Comunidad › Mundo Lirical › Reggaeton › Mp3 Music › Otros Temas › Mundo Reggaeton BATALLAS › Empezar una Batalla › Batallas Abiertas › Historial de Batallas [Tu Cuenta \| Regístrate]
Sonando en la Radio CONTRATAR PUBLICIDAD