Tutorial JavaScript

**KenLego** · 24/07/2009, 21:38

Abro este tema para ver si quieren aprender JavaScript, si gana la opcion SI comenzare un tutorial...

**gjulian** · 27/07/2009, 08:51

Yo por mi parte estaría encantado de seguir un tuto sobre el tema, ya que por mucho que miro por ahi los que hay, no consigo enterarme bien.
Adelante

**yandrac** · 23/09/2009, 20:28

pues yo si (no se si es un pco tarde :? )

En fin, encantado de recibir un tuto

saludos

yandrac

**Alpolo** · 23/09/2009, 21:39

Hola a todos....

Interesante.....

Espero lo llaves a cavo ok..

Salu2....

**Barracuda** · 29/09/2009, 21:21

estaria bien aunque quiza sea algo tarde, a mi me iriri muy bien que lo necesito para un par de webs

**KenLego** · 18/10/2009, 12:51

Ya que gano el SI...
Comienza el tutorial de JavaScript
Leccion I: El objeto Document
En javascript se utilizan objetos y funciones, para utilizar una funcion con un objeto se utiliza objeto.funcion();
Al igual que en PHP, javascript debe terminar sus instrucciones con un punto y coma ";".
El objeto document, como lo dice la palabra, es el documento en el que nos encontramos, pero para aprender mas facil, un ejemplo:

Código:

<script type="text/javascript">
<!--
document.location='http://linkenforos.com.ar';
-->
</script>

Aqui hacemos un simple redirect, primero accedemos al objeto location que a su vez es objeto de document y lo cambiamos.
Leccion Ib: getElementById(ID de objeto)
Lo que a mi me costo aprender esta funcion...
Basicamente, esta funcion lo que hace es devolver el objeto al que le corresponda la ID ingresada en los parentesis, si el objeto no existiera devolveria false.
Supongamos que tengo un parrafo con el texto "Hola" y quiero modificarlo para que cambie a "Hola mundo", como lo hacemos?
Simple, le damos una ID a ese parrafo y despues lo cambiamos desde el JavaScript, es decir:

Código:

<html>
<head>
<script type="text/javascript">
<!--
document.getElementById('hola').innerHTML = 'Hola mundo';
-->
</script>
</head>
<body>
<p id="hola">Hola</p>
</body>
</html>

Como vemos ahi, dentro del html le ponemos la id al objeto

y en el javascript lo obtenemos mediante la funcion getElementById().
Lo importante aqui es que la funcion getElementById() debe escribirse bien, si se escribe getelementbyid() no va a funcionar, ya que es sensible a mayusculas y minusculas.
Espero que les haya gustado la primera leccion, cualquier duda avisen

**kevin** · 18/10/2009, 15:09

hola, muchas gracias ya aprendi como hacer un codigo redireccionador y uno que sustituye talvez lo aplique en mi pagina

saludos, buen dia

**Alpolo** · 18/10/2009, 15:15

Hola KenLego..

Esta muy bien la primera lesson..

SAludos..

Alpolo.. :D

**KenLego** · 18/10/2009, 15:24

Okey, aqui una segunda leccion y despues unos ejercicios:
Leccion II: Estructura condicional
Muchas veces necesitamos comprobar algo, y a partir de eso, hacer algo si lo que se comprueba es cierto u otra cosa si no lo es.
Esto es muy parecido a cualquier otro lenguaje de programacion web, es la estructura condicional if - else.
Aqui va el ejemplo, primero la estructura:

Código:

<script type="text/javascript">
<!--
// Estructura simple y completa
if ([condicion])
{
 [ instrucciones si es verdadero ]
} 
else
{
 [ instrucciones si es falso ]
}
// Estructura simple
if ([condicion])
{
 [ instrucciones]
}
// Estructura anidada
if ([condicion])
{
 [ instrucciones si es verdadero ]
}
else if ([condicion si es falsa la primera])
{
 [ instrucciones si la primera es falsa y la segunda verdadera ]
}
else
{
 [ instrucciones si ninguna coincide ]
}
-->
</script>

Esto es mas o menos lo basico, pero supongamos que necesitamos que dos condiciones sean ciertas para la instruccion, entonces utilizamos los operadores &&.
Y si necesitamos que solo una de dos condiciones coincidan? Entonces utilizamos estos otros operadores: ||
Por ultimo, que pasa si tenemos que verificar que una condicion NO sea cierta?
Agregariamos el operador ! despues del primer parentesis.
Es decir, algo asi:

Código:

<script type="text/javascript">
<!--
// Para verificar que ambas condiciones sean correctas
if ([condicion 1] && [condicion 2])
{
 [ instrucciones ]
}
// Para verificar que una de las condiciones sea correcta
if ([condicion 1] || [condicion 2])
{
 [ instrucciones ]
}
// Para verificar que la condicion NO sea correcta
if (![condicion])
{
 [ instrucciones ]
}
-->
</script>

Aparte de las estructuras anteriores que son simples, hay dos mas, una que llamaremos "media" y otra que llamaremos "corta":

Código:

<script type="text/javascript">
<!--
// Esta es la media, se caracteriza porque
// sus instrucciones ocupan solo 1 linea.
if ([condicion])
 [ instruccion si verdadero ]
else
 [ instruccion si falso ]
// Esta es la corta, se caracteriza porque
// la estructura completa ocupa 1 sola linea:
([condicion]) ? [instruccion si verdadero] : [instruccion si falso];
-->
</script>

**Alpolo** · 18/10/2009, 15:59

Hola de New..

Esta muy buenas las lesson, pero si dejas los ejercicios seria buenos que los presentaramos por aqui jaja, puede ser una forma..

Y asi si alguno tiene un error seria correjido por todos ok..

Saludos..

**KenLego** · 20/10/2009, 01:17

Leccion III: Variables, concatenacion y Estructuras de repeticion
Parte 1, Variables:
Que son las variables? Son informacion almacenadas en una palabra.
Los 3 tipos de variables mas famosos y ademas son comunes en otros lenguajes como php, python y como ahora en js son:
» String: Este tipo almacenan cualquier tipo de caracteres y deben ser escritas entre comillas.
» Int: Las variables int almacenan numeros enteros
» Boolean: Estas variables pueden almacenar dos palabras: true o false, pero no deben escribirse entre comillas
La estructura para nombrar una variable es la siguiente:

Código:

<script type="text/javascript">
<!--
// Tipo string:
var saludo = "Hola";
// Tipo int:
var siete = 7;
// Tipo boolean:
var encctw = true;
-->
</script>

Las string se usan mucho para la validacion de formularios y las boolean para estructuras condicionales.
Parte 2, Concatenacion:
Este tema es breve, pero aun asi es importante.
Imaginemos que yo necesito un texto, pero que al cambiar una variable, cambie una palabra de ese texto, como lo hacemos?
Lo hacemos concatenando, mediante el simbolo + (suma), de esta forma:

Código:

<script type="text/javascript">
<!--
var nombre = "Kenichi";
alert("Hola "+nombre+", como va?");
-->
</script>

Como se puede ver, ingresamos el valor de la funcion alert entre comillas, pero cuando llegamos al saludo, la cerramos y luego añadimos fuera de las comillas y entre los simbolos + el nombre de la variable.
Esto tambien se usa mucho en PHP, solo que en vez de el simbolo + se usa un punto (.)
Parte 3, estructuras de repeticion:
Las estructuras de repeticion son, en resumen, instrucciones que puedes repertirlas cuantas veces quieras sin tener que reescribirlas.
Ahora veremos 3 tipos de repeticion diferentes, el do, el while y el for.
Estas son asi:

Código:

<script type="text/javascript">
<!--
for ([inicio de la variable];[condicion];[alteracion de variable])
{
 [ instrucciones]
}
// Creo que no entendiste muy bien... Aqui va un ejemplo:
for (var f = 0;f < 5;f++)
{
 document.write("Esta es la clase de JS de Kenichi en CCTW
");
}
-->
</script>

El ejemplo anterior escribiria 5 veces la frase "esta es la clase de js de kenichi en cctw" y un salto de linea al final de ella.
Ahora el while.

Código:

<script type="text/javascript">
<!--
while ([condicion])
{
 [ instrucciones ]
}
// Un ejemplo
var i = 0;
while (i < 3)
{
 document.write("Kenichi es el mejor profe de JS
");
 // Aca incrementamos la variable para que la estructura no sea infinita
 i++;
}
-->
</script>

Una buena traduccion de aquello seria:

mientras (pase algo) { haz esto }

Y llegamos al final!! Jaja
Ahora nos queda un ultimo bucle, el do
Es algo asi:

Código:

<script type="text/javascript">
<!--
do {
 [ instrucciones ]
}
while ([condicion]);
// Un ejemplo:
var f = 0;
do {
 document.write("CCTW es la mejor web que existe!
");
 f++;
}
while (f < 10);
-->
</script>

Aqui es mucho mas logico el codigo si sabes un poquitin de ingles, la traduccion seria: haz { esto } mientras (pase esto);
Facil no?
Ahora, un extra, para hacer comparaciones y operaciones en bucles y condiciones, es necesario que te aprendas esto (te sera muy facil)

Comparaciones:
>= Mayor o igual que...
<= Menor o igual que...
> Mayor que...
< Menor que...
== Igual que...
!= Distinto que...
Operaciones:
variable++ suma de 1 a 1 una variable
++variable lo mismo
variable-- resta de 1 a 1 una variable
--variable lo mismo
variable += valor: suma un valor al valor actual de la variable
variable -= valor: resta un valor al valor actual de una variable
variable /= valor: divide de la forma anterior
variable *= valor: multiplica de la forma anterior

Por ultimo, doy problemas para resolver:
1) Mientras la variable a sea falsa, alertar "hola" y si la variable sigue siendo falsa, volverla a true, sino, hacer lo contrario
2) Escribir 10 veces "Kenichi es el mejor" (me rio al hacer esto jaja)
3) Si un valor es cierto, y otro valor es falso, crear un bucle for.
Si un valor es falso, o el otro valor es falso, crear un bucle while.
Si ningun valor es falso, crear el bucle do/while

**Alpolo** · 21/10/2009, 21:39

Hola...

La verdad nose si pude realizar las actividad..

Trate pero pues cualquier cosa corrigemelo ok, creo que estoy pésimo en JavaScript jajaja.....

Código:

<html>
	<head>
		<title> Ejemplo de JS..:::.. Alpolo </title>
	</head>
	<body>
	
	<script type="text/javascript">
	//Primera Activiad..
	var hola = "Hola";
	if(hola = "hola"){
		alert(hola);
	}else{
		if(hola == "Hola"){
			alert(hola);
		}
	}
	// Segundad actividad..
		for (var a = 0; a < 10; a++)
		{
			document.write("Kenichi es el mejor
");
		}
		
	//Tercera Actividad..
			var al = "Alpolo";
			//como es sentitive a mayuscaulas y menisculas lo tratara como otro y en ese caso es falso..
			//Entonce se ejecuta el else y como dentro del else esta el while, muestra Alpolo es el mejor 5 vece, jaja..
		if(al == "alpolo"){
			document.write("Escribir 10 veces 'Kenichi es el mejor' (me rio al hacer esto jaja)
");
		}else{
			for(var a = 0; a < 5; a++){
				document.write(" Si un valor es cierto, y otro valor es falso, crear un bucle for. 
")	
			}
		}
	//cuarta avtividad Actividad..	
	var valor = "valor";
	if(valor != "valor1"){
		var i = 0;
		while(i<2){
			document.write("Si un valor es falso, o el otro valor es falso, crear un bucle while.
");
			i++;
		}
	}
	
	//Quinta Actividad..
	
	var alp = false;
	if(alp != true){
		var i = 0;
		do{
			document.write("Si ningun valor es falso, crear el bucle do/while
"); 
			i++;
		}
		while(i<5);
	}
	</script>
	
	</body>
</html>

Saludos y espero el resto, por que creo que falta arto ok..

**KenLego** · 21/10/2009, 21:57

Te sacaste un 2! muahajahajaha
Nah mentira, pero tienes varias cosas mal. En el primer ejercicio, la consigna era

Mientras la variable a sea falsa, alertar "hola" y si la variable sigue siendo falsa, volverla a true, sino, hacer lo contrario

Es decir, hay que hacer un while con la condicion de que una variable llamada A sea falsa, dentro de eso alertar hola y despues un if para ver si la variable sigue falsa, si lo hace, dentro del if ponerla en true.
La segunda esta bien
Ahora la tercera, esta mal. La consigna era

Si un valor es cierto, y otro valor es falso, crear un bucle for.
Si un valor es falso, o el otro valor es falso, crear un bucle while.
Si ningun valor es falso, crear el bucle do/while

La solucion deberia haber sido:

// Los valores puedes cambiarlos como quieras
valor1 = true;
valor2 = false;
if (valor1 && !valor2)
{
// Si un valor es verdadero y el otro falso, crear un for
for (var i = 0;i < 5;i++)
{
// ...
}
}
else if (!vavalor2)
{
// Si un valor es falso, o el otro es falso, crear un while[/color]
var i = 0;
while (i < 10)
{
// ...
i++;
}
}
else if (valor1 && valor2)
{
// Si ningun valor es falso (o sea, si los dos son true) crear un do/while
var i = 0;
do {
// ...
i++;
}
while (i < 10);
}

**Alpolo** · 21/10/2009, 22:10

Hola..

Bueno para ser lo primero que hago me fue pésimo jaja..

Perohay que seguir ok..

**KenLego** · 07/12/2009, 16:00

Como crear un menu desplegable?
Es una pregunta que todos nos hicimos alguna vez...
La respuesta es simple: JavaScript
Es muy facil hacerlo, solo se necesita un poquitin de este lenguaje, html y css.
Primero usaremos tablas, de esta forma:

<table border="0" id="navegacion" cellpadding="0" cellspacing="0>
<tr>
<td>Seccion 1</td>
<td>Seccion 2</td>
</tr>
<tr>
<td>
<div id="menu1" style="display:none">
Sub seccion 1.1
Sub seccion 1.2
Sub seccion 1.3
</div>
</td>
<td>
<div id="menu2" style="display:none">
Sub seccion 2.1
Sub seccion 2.2
Sub seccion 2.3
</div>
</td>
</tr>
</table>

Como vemos, en una fila pondremos los enlaces, y en la otra los menus desplegables.
Cada menu es un div, y cada div debe tener un css de display:none; para que este oculto.
Despues, cada enlace de la primera fila debe tener el evento onmouseover, es decir, que cuando el mouse pase sobre el, se ejecuta alguna funcion, en nuestro caso la funcion menu() que la definiremos mas adelante.
Por ultimo, a cada objeto de la pagina que no sea la tabla de los menus, le agregamos el evento onmouseover="ocultartodos()" para ejecutar la funcion ocultartodos() que esconde todos los menus.
Ahora pasemos al CSS, hay que lograr que los menus desplegables se sobrepongan a lo que este debajo de ellos, hay que ponerle un borde y darle estilos a sus enlaces. Hagamosolo:

/* Los div de los menu estan dentro de la tabla con la ID navegacion */
#navegacion div {
display:none; /* Los ocultamos */
position:absolute; /* Con esto hacemos que se sobreponga */
background:#FFFFFF; /* Le ponemos un color de fondo */
border:1px solid #333333; /* y un borde */
z-index:99 /* El z-index sirve para posicionarlo en profundidad, es el numero de objetos al que se va a sobreponer, el maximo es 99 */
}
#navegacion div a:link, #navegacion div a:visited {
display:block;
padding:3px;
padding-left:15px;
padding-right:15px;
font-family:Arial, Verdana, sans-serif;
font-size:12px;
background:#FFFFFF;
color:#000000
}
#navegacion div a:hover, #navegacion a:active {
display:block;
padding:3px;
padding-left:15px;
padding-right:15px;
font-family:Arial, Verdana, sans-serif;
font-size:12px;
background:#E1E1E2;
color:#333333
}

Ahora que tenemos la estructura y el esitlo listos, nos falta la magia, el javascript, aqui va:

// Un array con todas las IDs de los menus
var menus = new Array('menu1','menu2');
// La funcion para mostrar el menu
function menu(id)
{
for (var i = 0;i < menus.length;i++)
{
if (menus[i] != id)
{
// Ocultamos todos los menus que no sean el que queremos mostrar
document.getElementById(menus[i]).style.display = 'none';
}
}
// Y mostramos el que queremos
document.getElementById(id).style.display = 'block';
}
// Funcion para ocultar todos los menus
function ocultartodos()
{
for (var f = 0;f < menus.length;f++)
{
document.getElementById(menus[f]).style.display = 'none';
}
}

Luego pueden ver un ejemplo editado desde aqui