Regresar a la página www.ComoCrearTuWeb.com

Ver Resultados de Encuesta: Te gustaria Aprender JavaScript?

Votantes
27. No puedes votar en esta encuesta
  • Si

    27 100.00%
  • No

    0 0%
Página 1 de 2 12 ÚltimoÚltimo
Resultados 1 al 15 de 17

Tema: Tutorial JavaScript - Editor: KenLego

  1. #1
    Me va gustando esto... Habitante
    Fecha de Ingreso
    27 nov, 08
    Ubicación
    Rosario, Argentina
    Mensajes
    227
    Poder de Reputación
    18

    Tutorial JavaScript - Editor: KenLego

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

  2. #2
    Esto empieza a ser un vicio... Habitante Avatar de gjulian
    Fecha de Ingreso
    29 ene, 09
    Ubicación
    Sevilla
    Mensajes
    558
    Poder de Reputación
    19
    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
    Lo mejor de caerse al tropezar, es volverse a levantar.

  3. #3
    Recien Llegado! Habitante
    Fecha de Ingreso
    24 jun, 09
    Mensajes
    23
    Poder de Reputación
    16
    pues yo si (no se si es un pco tarde :? )

    En fin, encantado de recibir un tuto

    saludos

    yandrac

  4. #4
    Me va gustando esto... Habitante
    Fecha de Ingreso
    01 feb, 09
    Ubicación
    colombia
    Mensajes
    148
    Poder de Reputación
    17
    Hola a todos....

    Interesante.....

    Espero lo llaves a cavo ok..


    Salu2....
    <!--------- Mis web -------->
    http://alpolo-natural.freevar.com
    http://alpolo-natural.ueuo.com
    Alfonso G P::

  5. #5
    Esto empieza a ser un vicio... Habitante
    Fecha de Ingreso
    20 abr, 09
    Mensajes
    582
    Poder de Reputación
    19
    estaria bien aunque quiza sea algo tarde, a mi me iriri muy bien que lo necesito para un par de webs
    SE VENDE(pagina+dominio)
    .........................
    http://frikiwebs.com
    http://youhavebeenowned.com/es
    http://antiSPAMers.com
    ...........................
    mp, los interesados

  6. #6
    Me va gustando esto... Habitante
    Fecha de Ingreso
    27 nov, 08
    Ubicación
    Rosario, Argentina
    Mensajes
    227
    Poder de Reputación
    18
    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

  7. #7
    Me va gustando esto... Habitante
    Fecha de Ingreso
    07 oct, 09
    Ubicación
    Maracay, Venezuela
    Mensajes
    231
    Poder de Reputación
    17
    hola, muchas gracias ya aprendi como hacer un codigo redireccionador y uno que sustituye talvez lo aplique en mi pagina

    saludos, buen dia
    Att. Kevin

  8. #8
    Me va gustando esto... Habitante
    Fecha de Ingreso
    01 feb, 09
    Ubicación
    colombia
    Mensajes
    148
    Poder de Reputación
    17
    Hola KenLego..

    Esta muy bien la primera lesson..

    SAludos..

    Alpolo.. :D
    <!--------- Mis web -------->
    http://alpolo-natural.freevar.com
    http://alpolo-natural.ueuo.com
    Alfonso G P::

  9. #9
    Me va gustando esto... Habitante
    Fecha de Ingreso
    27 nov, 08
    Ubicación
    Rosario, Argentina
    Mensajes
    227
    Poder de Reputación
    18
    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>

  10. #10
    Me va gustando esto... Habitante
    Fecha de Ingreso
    01 feb, 09
    Ubicación
    colombia
    Mensajes
    148
    Poder de Reputación
    17
    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..
    <!--------- Mis web -------->
    http://alpolo-natural.freevar.com
    http://alpolo-natural.ueuo.com
    Alfonso G P::

  11. #11
    Me va gustando esto... Habitante
    Fecha de Ingreso
    27 nov, 08
    Ubicación
    Rosario, Argentina
    Mensajes
    227
    Poder de Reputación
    18
    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

  12. #12
    Me va gustando esto... Habitante
    Fecha de Ingreso
    01 feb, 09
    Ubicación
    colombia
    Mensajes
    148
    Poder de Reputación
    17
    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..

    <!--------- Mis web -------->
    http://alpolo-natural.freevar.com
    http://alpolo-natural.ueuo.com
    Alfonso G P::

  13. #13
    Me va gustando esto... Habitante
    Fecha de Ingreso
    27 nov, 08
    Ubicación
    Rosario, Argentina
    Mensajes
    227
    Poder de Reputación
    18
    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);
    }

  14. #14
    Me va gustando esto... Habitante
    Fecha de Ingreso
    01 feb, 09
    Ubicación
    colombia
    Mensajes
    148
    Poder de Reputación
    17
    Hola..

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

    Perohay que seguir ok..

    <!--------- Mis web -------->
    http://alpolo-natural.freevar.com
    http://alpolo-natural.ueuo.com
    Alfonso G P::

  15. #15
    Me va gustando esto... Habitante
    Fecha de Ingreso
    27 nov, 08
    Ubicación
    Rosario, Argentina
    Mensajes
    227
    Poder de Reputación
    18
    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

Página 1 de 2 12 ÚltimoÚltimo

Temas Similares

  1. [SECCION PHP] Editor:::Linkgl --- APRENDE PHP [TUTORIAL]
    Por linkgl en el foro Php Bases de Datos y MySQL (Nuevo!)
    Respuestas: 87
    Último Mensaje: 22/05/2012, 13:50
  2. tutorial JavaScript
    Por gjulian en el foro Scripts
    Respuestas: 2
    Último Mensaje: 28/07/2009, 07:07

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •