Escribir HTML desde JS (document.write)

Clase 12 de 50 • Curso de Programación Básica 2014

Comentarios

Omar Alejandro Torres

student•

Que tal compañeros, aquí les dejo una forma de escribir HTML dentro de una etiqueta especifica.

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>innerHTML</title>  
    <script type="text/javascript">  
    var edad = 28;  
    document.getElementById("edad").innerHTML = "Tu edad es "+edad;  
    </script>  
</head>  
<body>  
    <p>¡Hola niños!</p>  
<p id="edad"></p>  
</body>  
</html>  
  
<!--  de esta forma, se le indica a JavaScript que insertará ese texto dentro de las etiquetas que tengan el id "edad", el resultado sería algo así -->

Diego Zazueta

student•

Me divertí mucho codeando este pequeño programa jajaja pruebenlo les calcula la esperanza de vida y la causa de muerte!!! saludos.

confirm("Quieres saber hasta a que edad vivirás?");  
  
//capturamos la edad del usuario  
var edad = prompt("Cual es tu edad?",20);  
  
//convertimos el valor del prompt a numero entero  
parseInt(edad);  
  
//Se define un arreglo con las posibles muertes  
var tipoMuerte = ["Arrollado por camion de basura","Estrangulado por una anciana","Te resbalaste en el baño","Infarto por exceso de viagra"];  
  
// se crea una funcion que calcule un numero de esperanza de vida aleatorio  
function aleatorio (min,max) {  
    var numero = Math.floor(Math.random() * (max - min + 1) + min);  
    var numeroRandom = numero * edad;  
    return numeroRandom;  
}  
  
//se crea una funcion que calcule el tipo de muerte que tendra el usuario  
function muerteRandom (min,max) {  
    var numeroMuerte =  Math.floor(Math.random() * (max - min + 1) + min);  
    return numeroMuerte;  
}  
  
//se declaran las variables que tendran los valores maximos y minimos y el calculo de la funciones respectivas  
var esperanzaVida = aleatorio(1,5);  
var muerte = muerteRandom(0,3);  
  
//se procede a verificar el flujo de las condicionales  
if (edad < 18 ) {  
    alert("Debes ser mayor de edad para poder jugar");  
}else if (edad > 50) {  
    alert("No se por que aun no has muerto!! ya estas en horas...");  
}else{  
    document.write("<center><br/>"+"Moriras a los: " + esperanzaVida + " años" + "<br/><br/> Causa de muerte: " + tipoMuerte[muerte] + "</center>");  
}

Alessandro Degiusti

student•

Es genial :)

Joshua Enríquez Orquera

student•

El video se salta de la nada y se avanza

Raúl Astete

student•

Lo que pasa es que esta editado. Sin embargo, el contenido principal y lo que servirá para aprender programación básica esta incluido.

Deivid Rojas

student•

Muy interesante, y cada ves me parece mas fácil la programación, te recomiendo practicar con sublime text 2, crear tus propias variables, y que el programa corra según tus condiciones, "QUE LA FUERZA TE ACOMPAÑE"

Tatiana María Tobón Arteaga

student•

Hola,
Les comparto mi código de Piedra :: Papel :: Tijera :: Lagarto :: Spock con html.

PPTLS.html

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <title>Piedra :: Papel :: Tijeras :: Lagarto :: Spock</title>  
          
        <script type="text/javascript" src="js/reglas.js"></script>  
    </head>  
    <body>  
        <h1 style="text-align: center; font-family: 'Indie Flower', cursive;">Piedra :: Papel :: Tijeras :: Lagarto :: Spock</h1>  
          
        <div style="display: table;margin: 0 auto;">  
            <table>  
                <tr align="center">  
                    <td colspan="5" style="font-family: 'Indie Flower'; font-size: 18px;"><p>Para iniciar el juego selecciona alguna de las siguientes imagenes</p></td>  
                </tr>  
                <tr align="center">  
                    <td><a href="#" id="rock" onclick="optionSelectedUser(0);"><img src="img/rock.png" height="120" width="120"></a></td>  
                    <td><a href="#" id="paper" onclick="optionSelectedUser(1);"><img src="img/paper.png" height="120" width="120"></a></td>  
                    <td><a href="#" id="scissors" onclick="optionSelectedUser(2);"><img src="img/scissors.png" height="120" width="120"></a></td>  
                    <td><a href="#" id="lizard" onclick="optionSelectedUser(3);"><img src="img/lizard.png" height="120" width="120"></a></td>  
                    <td><a href="#" id="spock"onclick="optionSelectedUser(4);"><img src="img/spock.png" height="120" width="120"></a></td>  
                </tr>  
                <tr align="center">  
                    <td colspan="2"><div id="user"><img src="img/qm.png" height="120" width="120"></div></td>  
                    <td><div><img src="img/versus-vs.png" height="70" width="70"></div></td>  
                    <td colspan="2"><div id="pc"><img src="img/qm.png" height="120" width="120"></div></td>  
                </tr>  
                <tr align="center">  
                    <td colspan="2" style="font-family: 'Indie Flower'; font-size: 14px;"><b>User</b></td>  
                    <td></td>  
                    <td colspan="2" style="font-family: 'Indie Flower'; font-size: 14px;"><b>Pc</b></td>  
                </tr>  
                <tr>  
                    <td colspan="5">  
                        <div id="result" style="text-align: center;"></div>  
                    </td>  
                </tr>  
            </table>  
        </div>  
          
          
    </body>  
</html>

reglas.js

var game = {rock: {option: 0, img: 'img/rock.png'},   
            paper: {option: 1, img: 'img/paper.png'},   
            scissors: {option: 2, img: 'img/scissors.png'},   
            lizard: {option: 3, img: 'img/lizard.png'},   
            spock: {option: 4, img: 'img/spock.png'}, };  
function randomOptionComputer(minimo, maximo){  
    var numero = Math.floor( Math.random() * (maximo - minimo + 1) + minimo );  
    return numero;  
}  
function optionSelectedUser(optionUser){  
    var optionComputer = randomOptionComputer(0, 4);  
      
    document.getElementById("user").innerHTML = "<a href='#'><img src=" + getImagen(optionUser) + " height='120' width='120'></a>";  
    document.getElementById("pc").innerHTML = "<a href='#'><img src=" + getImagen(optionComputer) + " height='120' width='120'></a>";  
      
    if(optionUser == optionComputer){  
        document.getElementById("result").innerHTML = "<span style='font-family: Indie Flower, cursive; font-size: 60px; color: green;'>Empatados!!! :|</span>";  
    }else if(optionUser == game.scissors.option && (optionComputer == game.paper.option || optionComputer == game.lizard.option)){  
        document.getElementById("result").innerHTML = "<span style='font-family: Indie Flower, cursive; font-size: 60px; color: blue;'>Ganaste!!! :-D</span>";  
    }else if(optionUser == game.paper.option && (optionComputer == game.rock.option || optionComputer == game.spock.option)){  
        document.getElementById("result").innerHTML = "<span style='font-family: Indie Flower, cursive; font-size: 60px; color: blue;'>Ganaste!!! :-D</span>";  
    }else if(optionUser == game.rock && (optionComputer == game.lizard.option || optionComputer == game.scissors.option)){  
        document.getElementById("result").innerHTML = "<span style='font-family: Indie Flower, cursive; font-size: 60px; color: blue;'>Ganaste!!! :-D</span>";  
    }else if(optionUser == game.lizard.option && (optionComputer == game.spock.option || optionComputer == game.paper.option)){  
        document.getElementById("result").innerHTML = "<span style='font-family: Indie Flower, cursive; font-size: 60px; color: blue;'>Ganaste!!! :-D</span>";  
    }else if(optionUser == game.spock.option && (optionComputer == game.scissors.option || optionComputer == game.rock.option)){  
        document.getElementById("result").innerHTML = "<span style='font-family: Indie Flower, cursive; font-size: 60px; color: blue;'>Ganaste!!! :-D</span>";  
    }else{  
        document.getElementById("result").innerHTML = "<span style='font-family: Indie Flower, cursive; font-size: 60px; color: red;'>Perdiste!!! :-(</span>";  
    }  
}  
function getImagen(option){  
    if(option == game.rock.option){  
        return game.rock.img;  
    }else if(option == game.paper.option){  
        return game.paper.img;  
    }else if(option == game.scissors.option){  
        return game.scissors.img;  
    }else if(option == game.lizard.option){  
        return game.lizard.img;  
    }else if(option == game.spock.option){  
        return game.spock.img;  
    }  
    return null;  
}

Camilo Saavedra

student•

Las notas no sirven off-line

Sergio Josué

student•

var primerNumero;
var segundoNumero;
var multiplicacion;

alert("Vamos a Multiplicar!");

primerNumero = prompt("Escriba el Primer Numero a Multiplicar: ", "50" );
segundoNumero = prompt("Escriba el Segundo Numero a multiplicar: ", "50");

primerNumero = parseInt(primerNumero);
segundoNumero = parseInt(segundoNumero);

multiplicacion = primerNumero * segundoNumero;

alert("Tu respuesta es: " + multiplicacion);

Similar! a Peso en Marte

Usuario anónimo

user•

por que usa parseint?

Yehoshua Cabrera Juárez

student•

Similar al de Piedra, Papel, Tijeras.... sin los Alerts!

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset = "utf-8" />  
    <title>document write</title>  
    <script type="text/javascript">  
  
    var color;  
    var Azul = 0;  
    var Naranja = 1;  
    var Amarillo = 2;  
    var answers = ["Azul", "Naranja", "Amarillo"]  
  
    color = prompt("¿Cual es tu color favorito?\nAzul: 0 \nNaranja: 1\nAmarillo: 2",0);  
  
    document.write("Tu color favorito es el " + answers[color] + "<br>");  
    if(color == Azul)  
    {  
        document.write("Eres de alma tranquila");  
    }  
    else if(color == Naranja)  
    {  
        document.write("Eres de alma Ferviente");  
    }  
    else if(color == Amarillo)  
    {  
        document.write("Eres de alma noble");  
    }  
    else  
    {  
        document.write("Pos que Pitos");  
    }  
  
    </script>  
</head>  
<body>  
    <p>Hola niños!!!</p>  
</body>  
<html>

EDWARD SILVA ROJAS

student•

tarea . . .
Primera parte html....... archivo: WORKBAZINGA1.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>MI TAREA PROYECTO PIEDRA - PAPEL - TIJERA -COCODRILO - SPOCK </title> </head> <body> <H1> TAREA 2 CLASE DE PROGRAMACION BASICA CON PLATZI.COM </H1> <p>JUGUEMOS ¡¡¡¡BAZINGA!!!! <br/> PIEDRA - PAPEL - TIJERA -COCODRILO - SPOCK</p> </body> <script type="text/javascript" src="JS/WORKBAZINGA1.js"> </script> </html>

Parte 2 . .. . .archivo: WORKBAZINGA1.js

DANIEL MEDINA ARMADA Medina

student•

Anexo el código con una simplificación de los if.

function patito(minimo,maximo)

{

var numero= Math.floor(Math.random()*(maximo-minimo+1)+minimo);

return numero;

}

var piedra=0;

var papel=1;

var tijera=2;

var opciones = ["piedra","papel","tijera"];

var opcionUsuario;

var opcionMaquina=patito(0,2);

var resultado;

opcionUsuario= prompt("Qué eliges? \nPiedra: 0\nPapel: 1\nTijera: 2",0);

alert("Elegiste: " + opciones[opcionUsuario]);

alert("Javascript eligió: " + opciones[opcionMaquina]);

resta= opcionUsuario - opcionMaquina

//el usuario empata a la maquina cuando la resta de las ocpciones son iguales es decir 0

//el usuario pierde contra la maquina cuando la resta de las opciones son -1 y +2

//el usuario gana a la maquina cuando la resta de las opciones son +1 y -2

if (resta==0)

{

resultado="Empate con Javascript";

alert(resultado);

} else if (resta==-1 ||resta==2)

{

resultado="Perdio frente a Javascript";

alert("Perdio! Gano Javascript!");

} else if (resta==1 ||resta==-2)

{

resultado="Gano frete a Javascript.";

alert("Gano! Felicitaciones!");

}

José David Ortega Izarra

student•

Gente hice este humilde código que les muestra su edad dentro de 15 años, espero les guste:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>Aprenderé document.write</title>  
    <script type="text/javascript">  
      
    alert("¿Quieres saber cuál será tu edad en 15 años?");  
    var edad;  
    edad = prompt("¿Cuántos años tienes?", "10");  
    edad = parseInt(edad)  
      
    </script>  
</head>  
<body>  
    <h1>Aquí tienes tu resultado!</h1>  
    <script type="text/javascript">  
    document.write("Tu edad en 15 años será " + (edad + 15))  
    </script>  
</body>  
</html>

JR Alberto

student•

como ago pana

JR Alberto

student•

como ago pana

Cristián Mac Donald Góngora

student•

Ya se que es tarde... mi juego...

function randonMaquina(minimo, maximo)  
{  
    var numero = Math.floor( Math.random() * (maximo - minimo + 1) + minimo );  
    return numero;  
}  
  
  
// de acá los valores  
var piedra = 0;  
var papel = 1;  
var tijera = 2;  
var lagarto = 3;  
var spock = 4;  
  
var opciones = ["Piedra", "Papel", "Tijera", "Lagarto", "Spock"];  
//alert( opciones[1] );  
  
var respuesta = ["Ganaste","Empate","Perdiste","¿Pos qué carajo cabron?! lea"];  
  
var opcionUsuario;  
var opcionMaquina = randonMaquina(0,4);  
  
  
opcionUsuario = prompt("¿Qué eliges?\nPiedra: 0\nPapel: 1\nTijera: 2\nLagarto: 3\nSpock: 4", "Ingresa tu número");  
  
alert("Elegiste " + opciones[opcionUsuario]);  
alert("Javascript eligió " + opciones[opcionMaquina]);  
  
  
// acá las condiciones para mostrar  
  
if (opcionUsuario == opcionMaquina) {  
    alert( respuesta[1] );  
}   
else if (opcionUsuario != opcionMaquina) {  
      
    if (opcionUsuario == piedra) {  
        if ( opcionMaquina == tijera || opcionMaquina == lagarto ) {  
            alert( respuesta[0] );  
        }else{  
            alert( respuesta[2] );  
        }  
    }  
  
    if (opcionUsuario == papel) {  
        if ( opcionMaquina == piedra || opcionMaquina == spock ) {  
            alert( respuesta[0] );  
        }else{  
            alert( respuesta[2] );  
        }  
    }  
  
    if (opcionUsuario == tijera) {  
        if ( opcionMaquina == papel || opcionMaquina == lagarto ) {  
            alert( respuesta[0] );  
        }else{  
            alert( respuesta[2] );  
        }  
    }  
      
  
    if (opcionUsuario == lagarto) {  
        if ( opcionMaquina == papel || opcionMaquina == spock ) {  
            alert( respuesta[0] );  
        }else{  
            alert( respuesta[2] );  
        }  
    }  
  
    if (opcionUsuario == spock) {  
        if ( opcionMaquina == tijera || opcionMaquina == piedra ) {  
            alert( respuesta[0] );  
        }else{  
            alert( respuesta[2] );  
        }  
    }    
}  
else {  
    alert(respuesta[3]);  
}

Jeyson Vargas

student•

Buenas noches,
En esta parte del código como hago para que cuando se elija mal un numero mayor que dos me diga que "elegiste mal" y luego vuelva a preguntar que quieres elegir con esta instrucción que coloco aca:

usuario = prompt("Que quieres elegir: \nPiedra: 0\nPapel:1 \nTijera: 2,", 0);

while(usuario > 2)
{
usuario = prompt("Que quieres elegir: \nPiedra: 0\nPapel:1 \nTijera: 2,", 0);
}
Muchas gracias por su ayuda...

Victor Rincón

student•

Para esto tendrías que usar un do while, seria algo como esto :

// Pregunta la opcion

do {  
    var usuario = prompt("Que quieres elegir: \nPiedra: 0\nPapel:1 \nTijera: 2,", 0);  
}  
// Mientras la opcion sea mayor que 2  
while ( usuario > 2) {  
}

Santiago Montoya Suarez

student•

Encontre un complemento de Firefox llamado DownloadHelper q te descarga los videos de platzi.

Abraham

student•

En resumen:
-La función de document.write es para poder escribir Javascript dentro de html.
-También se pueden agregar etiquetas html como <br> (salto de linea) dentro del codigo javascript

Oscar Pérez

student•

Puedes agregar el HTML que quieras con JS y enviarlo a una parte del HTML para que en la página se vea el HTML que envias desde JS. BOOOM

Dario

student•

El document.write nos sirve para imprimir en pantalla dentro del lenguaje de etiquetado html y no en ventanas emergentes como el caso del alert, en un determinado punto de la lectura en secuencia del html.

Diego Ivan Perdomo Leon

student•

Les comparto mi piedra, papel, tijera, lagarto, spock pensado para hacer un VERSUS y ademas son 2 de 3 rondas para ganar la partida. Ojalá les guste y comenten.

function ganadorRonda(usuario1,usuario2)  
    {  
        if (usuario2 == piedra)   
        {  
            alert('Empate');  
        }  
        else if (usuario2 == papel)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == tijera)   
        {  
            alert('El jugador 1 ganó!!');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == lagarto)   
        {  
            alert('El jugador 1 ganó!!');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == spock)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
    }  
    else if (usuario1 == papel)   
    {  
        if (usuario2 == piedra)   
        {  
            alert('El jugador 1 ganó!!');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == papel)   
        {  
            alert('Empate');  
        }  
        else if (usuario2 == tijera)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == lagarto)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == spock)   
        {  
            alert('El jugador 1 ganó!!');  
            return contadorUsuario1 ++;  
        }  
    }  
    else if (usuario1 == tijera)   
    {  
        if (usuario2 == piedra)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == papel)   
        {  
            alert('El jugador 1 ganó!!');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == tijera)   
        {  
            alert('Empate');  
        }  
        else if (usuario2 == lagarto)   
        {  
            alert('El jugador 1 ganó!!');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == spock)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
    }  
    else if (usuario1 == lagarto)   
    {  
        if (usuario2 == piedra)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == papel)   
        {  
            alert('El jugador 1 ganó');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == tijera)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == lagarto)   
        {  
            alert('Empate');  
        }  
        else if (usuario2 == spock)   
        {  
            alert('El jugador 1 ganó');  
            return contadorUsuario1 ++;  
        }  
    }  
    else if (usuario1 == spock)   
    {  
        if (usuario2 == piedra)   
        {  
            alert('El jugador 1 ganó');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == papel)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == tijera)   
        {  
            alert('El jugador 1 ganó!!');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == lagarto)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == spock)   
        {  
            alert('Empate');  
        }  
    }  
}  
function ganadorPartida(contadorUsuario1,contadorUsuario2)  
{  
    if (contadorUsuario1 == 2)   
    {  
        alert('El jugador 1 GANÓ LA PARTIDA!!!');  
    }  
    else if (contadorUsuario2 == 2)   
    {  
        alert('El jugador 2 GANÓ LA PARTIDA!!!');  
    }  
}  
var opciones = ['piedra','papel','tijera','lagarto','spock'];  
var piedra = opciones[0];  
var papel = opciones[1];  
var tijera = opciones[2];  
var lagarto = opciones[3];  
var spock = opciones[4];  
var contadorJuegos = 0;  
var contadorUsuario1 = 0;  
var contadorUsuario2 = 0;  
alert('Juega Piedra - Papel - Tijera - Lagarto - Spock contra tus amigos.\nEl jugador que gane 2 de 3, es el GANADOR!!');  
while(!(contadorUsuario1 == 2 || contadorUsuario2 == 2))  
{  
    if (!contadorJuegos == 0)   
    {  
        alert('El jugador 1 tiene '+contadorUsuario1+' partidas ganadas\nEl jugador 2 tiene '+contadorUsuario2+' partidas ganadas');  
    }  
    alert('Es el turno del jugardor 1');  
    opcionUsuario1 = prompt('¿Qué eliges?\nPiedra: 0\nPapel: 1\nTijera: 2\nLagarto: 3\nSpock: 4',0);  
    opcionUsuario1 = opciones[opcionUsuario1];  
    alert('Es el turno del jugador 2');  
    opcionUsuario2 = prompt('¿Qué eliges?\nPiedra: 0\nPapel: 1\nTijera: 2\nLagarto: 3\nSpock: 4',0);  
    opcionUsuario2 = opciones[opcionUsuario2];  
    alert('El jugador 1 eligió '+opcionUsuario1+'\nEl jugador 2 eligió '+opcionUsuario2);  
    if (!(opcionUsuario1 == opcionUsuario2))   
    {  
        contadorJuegos ++;  
    }  
    ganadorRonda(opcionUsuario1,opcionUsuario2);  
}  
ganadorPartida(contadorUsuario1,contadorUsuario2);

if (usuario1 == piedra)

Juan Carlos Espinoza Zurita

student•

Este es mi tarea, le agregue una sentencia while para asegurarme de que el usuario ingrese una opción valida.

function aleatorio(minimo, maximo)
{
var numero = Math.floor(Math.random() * (maximo - minimo + 1) + minimo);
return numero;
}

var piedra = 0;
var papel = 1;
var tijera = 2;
var lagarto = 3;
var spock = 4;
var opciones = ["Piedra", "Papel", "Tijera", "Lagarto", "Spock"]

var opcionUsuario;
var opcionMaquina = aleatorio(0,4);
var resultado;

Rodrigo Ventura

student•

Hola no entiendo bien porque usas el incremento de n++, ese contador para que se usa?

Mauricio Patiño Patiño

student•

Este es el código que he realizado y esto fue lo máximo que logre reducirlo, si alguien puede reducirlo más, por favor compartirlo para aprender mas y mejorar nuestras habilidades. Al código le añadi una validaciones para que los datos ingresados sean correctos:

Codigo HTML:

<!DOCTYPE html> <html> <head> <title>Piedra-Papel-Tijera-Lagarto-Spock</title> <script type="text/javascript" src="codigo.js"/></script> </head> <body> <h1>Juego 1</h1> <p>Piedra, Papel, Tijera, Lagarto, Spock</p> </body> </html>

Codigo JS:

/*Reglas:
- La Piedra aplasta las Tijeras y al Lagarto
- El Papel cubre a la Piedra y refuta a Spock
- Las Tijeras cortan el Papel y decapitan al Lagarto
- El Lagarto envenena a Spock y come papel
- Spock destroza las Tijeras y evaporiza la piedra

var seleccion = ['Piedra','Papel','Tijera','Lagarto','Spock'];

var usuario = parseInt(prompt('Seleccione: \n\n'+
'0. Piedra.\n'+
'1. Papel.\n'+
'2. Tijera.\n'+
'3. Lagarto.\n'+
'4. Spock.\n'));

function opcion(argument) {
var opcionMaquina = Math.floor((Math.random() * argument)-1);
return opcionMaquina;
}

var gano = false;

if(usuario < 0 || usuario > 4 || isNaN(usuario)){
alert('Por favor digita una seleccion correcta :|');
}
else
{
alert('Tu elegiste: '+seleccion[usuario]);

var maquina = opcion(seleccion.length);
alert('Patito elegió: '+seleccion[maquina]);

alert('Asi que...');

    if(usuario == maquina){
alert('Hubo un empate... te quieres arriesgar... intentalo de nuevo...!!!');
}
else if(usuario == 0){
gano = maquina == 2 || maquina == 3 ? true : false;
}
else if(usuario == 1){
gano = maquina == 0 || maquina == 4 ? true : false;
}
else if(usuario == 2){
gano = maquina == 1 || maquina == 3 ? true : false;
}
else if(usuario == 3){
gano = maquina == 1 || maquina == 4 ? true : false;
}
else if(usuario == 4 ){
gano = maquina == 0 || maquina == 2 ? true : false;
}
if(gano){
alert('Acabas de ganarme... estuviste de suerte...!!!');
}else{
alert('Tu acabas de perder... jejeje...!!!');
}
}

Ricardo Garrido Cruz

student•

Zaz!! =( , cuando voy a leer los comentarios, hay un buen de compañeros que usan código que aún no se explica en los cursos básicos =/, pero bueno, nimodo, a darle. saludos.

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>innerHTML</title>  
    <script type="text/javascript">  
    var edad = 28;  
    document.getElementById("edad").innerHTML = "Tu edad es "+edad;  
    </script>  
</head>  
<body>  
    <p>¡Hola niños!</p>  
<p id="edad"></p>  
</body>  
</html>  
  
<!--  de esta forma, se le indica a JavaScript que insertará ese texto dentro de las etiquetas que tengan el id "edad", el resultado sería algo así -->

confirm("Quieres saber hasta a que edad vivirás?");  
  
//capturamos la edad del usuario  
var edad = prompt("Cual es tu edad?",20);  
  
//convertimos el valor del prompt a numero entero  
parseInt(edad);  
  
//Se define un arreglo con las posibles muertes  
var tipoMuerte = ["Arrollado por camion de basura","Estrangulado por una anciana","Te resbalaste en el baño","Infarto por exceso de viagra"];  
  
// se crea una funcion que calcule un numero de esperanza de vida aleatorio  
function aleatorio (min,max) {  
    var numero = Math.floor(Math.random() * (max - min + 1) + min);  
    var numeroRandom = numero * edad;  
    return numeroRandom;  
}  
  
//se crea una funcion que calcule el tipo de muerte que tendra el usuario  
function muerteRandom (min,max) {  
    var numeroMuerte =  Math.floor(Math.random() * (max - min + 1) + min);  
    return numeroMuerte;  
}  
  
//se declaran las variables que tendran los valores maximos y minimos y el calculo de la funciones respectivas  
var esperanzaVida = aleatorio(1,5);  
var muerte = muerteRandom(0,3);  
  
//se procede a verificar el flujo de las condicionales  
if (edad < 18 ) {  
    alert("Debes ser mayor de edad para poder jugar");  
}else if (edad > 50) {  
    alert("No se por que aun no has muerto!! ya estas en horas...");  
}else{  
    document.write("<center><br/>"+"Moriras a los: " + esperanzaVida + " años" + "<br/><br/> Causa de muerte: " + tipoMuerte[muerte] + "</center>");  
}

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="utf-8"/>  
        <title>Piedra :: Papel :: Tijeras :: Lagarto :: Spock</title>  
          
        <script type="text/javascript" src="js/reglas.js"></script>  
    </head>  
    <body>  
        <h1 style="text-align: center; font-family: 'Indie Flower', cursive;">Piedra :: Papel :: Tijeras :: Lagarto :: Spock</h1>  
          
        <div style="display: table;margin: 0 auto;">  
            <table>  
                <tr align="center">  
                    <td colspan="5" style="font-family: 'Indie Flower'; font-size: 18px;"><p>Para iniciar el juego selecciona alguna de las siguientes imagenes</p></td>  
                </tr>  
                <tr align="center">  
                    <td><a href="#" id="rock" onclick="optionSelectedUser(0);"><img src="img/rock.png" height="120" width="120"></a></td>  
                    <td><a href="#" id="paper" onclick="optionSelectedUser(1);"><img src="img/paper.png" height="120" width="120"></a></td>  
                    <td><a href="#" id="scissors" onclick="optionSelectedUser(2);"><img src="img/scissors.png" height="120" width="120"></a></td>  
                    <td><a href="#" id="lizard" onclick="optionSelectedUser(3);"><img src="img/lizard.png" height="120" width="120"></a></td>  
                    <td><a href="#" id="spock"onclick="optionSelectedUser(4);"><img src="img/spock.png" height="120" width="120"></a></td>  
                </tr>  
                <tr align="center">  
                    <td colspan="2"><div id="user"><img src="img/qm.png" height="120" width="120"></div></td>  
                    <td><div><img src="img/versus-vs.png" height="70" width="70"></div></td>  
                    <td colspan="2"><div id="pc"><img src="img/qm.png" height="120" width="120"></div></td>  
                </tr>  
                <tr align="center">  
                    <td colspan="2" style="font-family: 'Indie Flower'; font-size: 14px;"><b>User</b></td>  
                    <td></td>  
                    <td colspan="2" style="font-family: 'Indie Flower'; font-size: 14px;"><b>Pc</b></td>  
                </tr>  
                <tr>  
                    <td colspan="5">  
                        <div id="result" style="text-align: center;"></div>  
                    </td>  
                </tr>  
            </table>  
        </div>  
          
          
    </body>  
</html>

var game = {rock: {option: 0, img: 'img/rock.png'},   
            paper: {option: 1, img: 'img/paper.png'},   
            scissors: {option: 2, img: 'img/scissors.png'},   
            lizard: {option: 3, img: 'img/lizard.png'},   
            spock: {option: 4, img: 'img/spock.png'}, };  
function randomOptionComputer(minimo, maximo){  
    var numero = Math.floor( Math.random() * (maximo - minimo + 1) + minimo );  
    return numero;  
}  
function optionSelectedUser(optionUser){  
    var optionComputer = randomOptionComputer(0, 4);  
      
    document.getElementById("user").innerHTML = "<a href='#'><img src=" + getImagen(optionUser) + " height='120' width='120'></a>";  
    document.getElementById("pc").innerHTML = "<a href='#'><img src=" + getImagen(optionComputer) + " height='120' width='120'></a>";  
      
    if(optionUser == optionComputer){  
        document.getElementById("result").innerHTML = "<span style='font-family: Indie Flower, cursive; font-size: 60px; color: green;'>Empatados!!! :|</span>";  
    }else if(optionUser == game.scissors.option && (optionComputer == game.paper.option || optionComputer == game.lizard.option)){  
        document.getElementById("result").innerHTML = "<span style='font-family: Indie Flower, cursive; font-size: 60px; color: blue;'>Ganaste!!! :-D</span>";  
    }else if(optionUser == game.paper.option && (optionComputer == game.rock.option || optionComputer == game.spock.option)){  
        document.getElementById("result").innerHTML = "<span style='font-family: Indie Flower, cursive; font-size: 60px; color: blue;'>Ganaste!!! :-D</span>";  
    }else if(optionUser == game.rock && (optionComputer == game.lizard.option || optionComputer == game.scissors.option)){  
        document.getElementById("result").innerHTML = "<span style='font-family: Indie Flower, cursive; font-size: 60px; color: blue;'>Ganaste!!! :-D</span>";  
    }else if(optionUser == game.lizard.option && (optionComputer == game.spock.option || optionComputer == game.paper.option)){  
        document.getElementById("result").innerHTML = "<span style='font-family: Indie Flower, cursive; font-size: 60px; color: blue;'>Ganaste!!! :-D</span>";  
    }else if(optionUser == game.spock.option && (optionComputer == game.scissors.option || optionComputer == game.rock.option)){  
        document.getElementById("result").innerHTML = "<span style='font-family: Indie Flower, cursive; font-size: 60px; color: blue;'>Ganaste!!! :-D</span>";  
    }else{  
        document.getElementById("result").innerHTML = "<span style='font-family: Indie Flower, cursive; font-size: 60px; color: red;'>Perdiste!!! :-(</span>";  
    }  
}  
function getImagen(option){  
    if(option == game.rock.option){  
        return game.rock.img;  
    }else if(option == game.paper.option){  
        return game.paper.img;  
    }else if(option == game.scissors.option){  
        return game.scissors.img;  
    }else if(option == game.lizard.option){  
        return game.lizard.img;  
    }else if(option == game.spock.option){  
        return game.spock.img;  
    }  
    return null;  
}

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset = "utf-8" />  
    <title>document write</title>  
    <script type="text/javascript">  
  
    var color;  
    var Azul = 0;  
    var Naranja = 1;  
    var Amarillo = 2;  
    var answers = ["Azul", "Naranja", "Amarillo"]  
  
    color = prompt("¿Cual es tu color favorito?\nAzul: 0 \nNaranja: 1\nAmarillo: 2",0);  
  
    document.write("Tu color favorito es el " + answers[color] + "<br>");  
    if(color == Azul)  
    {  
        document.write("Eres de alma tranquila");  
    }  
    else if(color == Naranja)  
    {  
        document.write("Eres de alma Ferviente");  
    }  
    else if(color == Amarillo)  
    {  
        document.write("Eres de alma noble");  
    }  
    else  
    {  
        document.write("Pos que Pitos");  
    }  
  
    </script>  
</head>  
<body>  
    <p>Hola niños!!!</p>  
</body>  
<html>

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8" />  
    <title>Aprenderé document.write</title>  
    <script type="text/javascript">  
      
    alert("¿Quieres saber cuál será tu edad en 15 años?");  
    var edad;  
    edad = prompt("¿Cuántos años tienes?", "10");  
    edad = parseInt(edad)  
      
    </script>  
</head>  
<body>  
    <h1>Aquí tienes tu resultado!</h1>  
    <script type="text/javascript">  
    document.write("Tu edad en 15 años será " + (edad + 15))  
    </script>  
</body>  
</html>

function randonMaquina(minimo, maximo)  
{  
    var numero = Math.floor( Math.random() * (maximo - minimo + 1) + minimo );  
    return numero;  
}  
  
  
// de acá los valores  
var piedra = 0;  
var papel = 1;  
var tijera = 2;  
var lagarto = 3;  
var spock = 4;  
  
var opciones = ["Piedra", "Papel", "Tijera", "Lagarto", "Spock"];  
//alert( opciones[1] );  
  
var respuesta = ["Ganaste","Empate","Perdiste","¿Pos qué carajo cabron?! lea"];  
  
var opcionUsuario;  
var opcionMaquina = randonMaquina(0,4);  
  
  
opcionUsuario = prompt("¿Qué eliges?\nPiedra: 0\nPapel: 1\nTijera: 2\nLagarto: 3\nSpock: 4", "Ingresa tu número");  
  
alert("Elegiste " + opciones[opcionUsuario]);  
alert("Javascript eligió " + opciones[opcionMaquina]);  
  
  
// acá las condiciones para mostrar  
  
if (opcionUsuario == opcionMaquina) {  
    alert( respuesta[1] );  
}   
else if (opcionUsuario != opcionMaquina) {  
      
    if (opcionUsuario == piedra) {  
        if ( opcionMaquina == tijera || opcionMaquina == lagarto ) {  
            alert( respuesta[0] );  
        }else{  
            alert( respuesta[2] );  
        }  
    }  
  
    if (opcionUsuario == papel) {  
        if ( opcionMaquina == piedra || opcionMaquina == spock ) {  
            alert( respuesta[0] );  
        }else{  
            alert( respuesta[2] );  
        }  
    }  
  
    if (opcionUsuario == tijera) {  
        if ( opcionMaquina == papel || opcionMaquina == lagarto ) {  
            alert( respuesta[0] );  
        }else{  
            alert( respuesta[2] );  
        }  
    }  
      
  
    if (opcionUsuario == lagarto) {  
        if ( opcionMaquina == papel || opcionMaquina == spock ) {  
            alert( respuesta[0] );  
        }else{  
            alert( respuesta[2] );  
        }  
    }  
  
    if (opcionUsuario == spock) {  
        if ( opcionMaquina == tijera || opcionMaquina == piedra ) {  
            alert( respuesta[0] );  
        }else{  
            alert( respuesta[2] );  
        }  
    }    
}  
else {  
    alert(respuesta[3]);  
}

function ganadorRonda(usuario1,usuario2)  
    {  
        if (usuario2 == piedra)   
        {  
            alert('Empate');  
        }  
        else if (usuario2 == papel)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == tijera)   
        {  
            alert('El jugador 1 ganó!!');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == lagarto)   
        {  
            alert('El jugador 1 ganó!!');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == spock)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
    }  
    else if (usuario1 == papel)   
    {  
        if (usuario2 == piedra)   
        {  
            alert('El jugador 1 ganó!!');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == papel)   
        {  
            alert('Empate');  
        }  
        else if (usuario2 == tijera)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == lagarto)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == spock)   
        {  
            alert('El jugador 1 ganó!!');  
            return contadorUsuario1 ++;  
        }  
    }  
    else if (usuario1 == tijera)   
    {  
        if (usuario2 == piedra)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == papel)   
        {  
            alert('El jugador 1 ganó!!');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == tijera)   
        {  
            alert('Empate');  
        }  
        else if (usuario2 == lagarto)   
        {  
            alert('El jugador 1 ganó!!');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == spock)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
    }  
    else if (usuario1 == lagarto)   
    {  
        if (usuario2 == piedra)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == papel)   
        {  
            alert('El jugador 1 ganó');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == tijera)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == lagarto)   
        {  
            alert('Empate');  
        }  
        else if (usuario2 == spock)   
        {  
            alert('El jugador 1 ganó');  
            return contadorUsuario1 ++;  
        }  
    }  
    else if (usuario1 == spock)   
    {  
        if (usuario2 == piedra)   
        {  
            alert('El jugador 1 ganó');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == papel)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == tijera)   
        {  
            alert('El jugador 1 ganó!!');  
            return contadorUsuario1 ++;  
        }  
        else if (usuario2 == lagarto)   
        {  
            alert('El jugador 2 ganó!!');  
            return contadorUsuario2 ++;  
        }  
        else if (usuario2 == spock)   
        {  
            alert('Empate');  
        }  
    }  
}  
function ganadorPartida(contadorUsuario1,contadorUsuario2)  
{  
    if (contadorUsuario1 == 2)   
    {  
        alert('El jugador 1 GANÓ LA PARTIDA!!!');  
    }  
    else if (contadorUsuario2 == 2)   
    {  
        alert('El jugador 2 GANÓ LA PARTIDA!!!');  
    }  
}  
var opciones = ['piedra','papel','tijera','lagarto','spock'];  
var piedra = opciones[0];  
var papel = opciones[1];  
var tijera = opciones[2];  
var lagarto = opciones[3];  
var spock = opciones[4];  
var contadorJuegos = 0;  
var contadorUsuario1 = 0;  
var contadorUsuario2 = 0;  
alert('Juega Piedra - Papel - Tijera - Lagarto - Spock contra tus amigos.\nEl jugador que gane 2 de 3, es el GANADOR!!');  
while(!(contadorUsuario1 == 2 || contadorUsuario2 == 2))  
{  
    if (!contadorJuegos == 0)   
    {  
        alert('El jugador 1 tiene '+contadorUsuario1+' partidas ganadas\nEl jugador 2 tiene '+contadorUsuario2+' partidas ganadas');  
    }  
    alert('Es el turno del jugardor 1');  
    opcionUsuario1 = prompt('¿Qué eliges?\nPiedra: 0\nPapel: 1\nTijera: 2\nLagarto: 3\nSpock: 4',0);  
    opcionUsuario1 = opciones[opcionUsuario1];  
    alert('Es el turno del jugador 2');  
    opcionUsuario2 = prompt('¿Qué eliges?\nPiedra: 0\nPapel: 1\nTijera: 2\nLagarto: 3\nSpock: 4',0);  
    opcionUsuario2 = opciones[opcionUsuario2];  
    alert('El jugador 1 eligió '+opcionUsuario1+'\nEl jugador 2 eligió '+opcionUsuario2);  
    if (!(opcionUsuario1 == opcionUsuario2))   
    {  
        contadorJuegos ++;  
    }  
    ganadorRonda(opcionUsuario1,opcionUsuario2);  
}  
ganadorPartida(contadorUsuario1,contadorUsuario2);

Escribir HTML desde JS (document.write)

Bienvenido

Aprender a programar es fácil

La Web con Visión Profesional

Aprende sobre Algoritmos

Condicionales y operadores en programación

Qué lenguaje de programación aprender primero

Material del curso / Archivos del curso

Introducción básica a HTML y Javascript para programar

Uso del sistema de vídeo y notas

Lenguajes y compiladores

HTML y Javascript

Variables y funciones

Piedra, papel y tijera con Javascript

Variables, Matrices y Objetos en Javascript

Escribir HTML desde JS (document.write)

Matrices

Juego campo minado

Objetos del navegador

Objetos en JS

Preguntas

Ciclos y Dibujos con Canvas

Ciclos

Dibujos con canvas

Dibujar con eventos

Preguntas y respuestas

Programando juegos con canvas

Tipos de imágenes

Insertar imágenes en canvas

Dibujo de múltiples imágenes en canvas

Dibujar al enemigo y controlar a Diana

Sesión de preguntas y respuestas

Uso de Objetos, Prototype y juego de ahorcado en Canvas

Objetos en JavaScript con Prototype

Creando el juego del Ahorcado

Dibujo de un ahorcado usando Canvas

Sesión de preguntas y respuestas

Cómo crear un algoritmo para el juego del ahorcado

Extendiendo la funcionalidad de los Strings

Creando nuestro algoritmo para el juego del ahorcado

Sesión de preguntas y respuestas

Pregúntale a Freddy lo que quieras ... acerca de programación ;)

Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 1

Todo lo que siempre quisiste saber sobre este curso y no te atrevías a preguntar - Parte 2

Conceptos básicos de programación: Frontend-Backend

¿Qué es Frontend y Backend?

Ejemplo de un login usando POST y GET

Ejemplo de un login usando AJAX

Sesión de preguntas y respuestas

Crea tu primer servidor web con Node.JS

Instalación de Node.js

Instalación de librerías de Node con npm

Modelo cliente servidor y seguridad web básica

Servidor web con Express y Node.js

Formulario de login con Node.js

Sesión de preguntas y respuestas

Aprende a volar un dron con Javascript

Introducción a los drones

Bases de Node.js para drones

Vuela un dron con Node.js

Sesión de preguntas y respuestas

Complementos del curso

Publica tu sitio web usando GitHub Pages