Actividades JS
Actividades JS
Actividades JS
Javascript
-3er Parcial-
Alejandro Muñoz Bonilla y
Karla noemi godinez ramirez
Actividad 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<input type="button" value="Boton 1" onclick="Cont1()">
<input type="button" value="Boton 2" onclick="Cont2()">
<input type="button" value="Boton 3" onclick="Cont3()">
</form>
<script>
function Cont1(){
alert("Usted presiono el boton 1");
}
function Cont2(){
alert("Usted presiono el boton 2");
}
function Cont3(){
alert("Usted presiono el boton 3");
}
</script>
</body>
</html>
Actividad 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<p>Ingrese el primer numero: <input type="text" id="numero1"
name=""></p>
<p>Ingrese el segundo numero: <input type="text" id="numero2"
name=""></p>
<p><input type="button" value="Confirmar" onclick="valor()"></p>
</form>
<script>
function valor(){
let num1=document.getElementById("numero1").value;
num1=parseInt(num1);
let num2=document.getElementById("numero2").value;
num2=parseInt(num2);
if(num1>num2){
alert("El numero " + num1 + " es mayor");
}else{
alert("El numero " + num2 + " es mayor");
}
}
</script>
</body>
</html>
Actividad 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<p>Ingrese el nombre: <input type="text" id="nombre" name=""></p>
<p>Ingrese el apellido: <input type="text" id="apellido"
name=""></p>
<p><input type="button" value="Concatenar datos ingresados"
onclick="concatenar()"></p>
<p><input type="text" id="resultado"></p>
</form>
<script>
function concatenar(){
let nombr=document.getElementById('nombre').value;
let apelli=document.getElementById('apellido').value;
document.getElementById('resultado').value=nombr + ' ' + apelli;
}
</script>
</body>
</html>
Actividad 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<input type="password" id="clave"><br>
<input type="button" value="Configurar" onClick="verificar()">
</form>
<script>
function verificar(){
let clave = document.getElementById('clave').value;
if(clave.lenght<5){
alert('La clave no puede ser de menos de 5 caracteres we ');
}else{
alert('La clave esta incorrecta paps');
}
}
</script>
</body>
</html>
Actividad 5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<p><select id="select1" onchange="cambiaColor()">
<option value="200">Hawaiana</option>
<option value="250">Carne Molida</option>
<option value="300">Pepperoni</option>
</select></p>
<p>Número de pizza<input type="text" id="text1"></p>
<p>Ingrediente<input type="text" id="text2"></p>
<p>Precio<input type="text" id="text3"></p>
</form>
<script type="text/javascript">
function cambiaColor(){
let seleccion=document.getElementById("select1");
document.getElementById("text1").value=seleccion.selectedIndex;
document.getElementById("text2").value=seleccion.options[seleccion.selectedI
ndex].text;
document.getElementById("text3").value=seleccion.options[seleccion.selectedI
ndex].value;
}
</script>
</body>
</html>
Actividad 6:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<p>PROCESADOR:</p>
<p><select id="procesador">
<option value="3000">Intel i3</option>
<option value="4000">Intel i7</option>
<option value="5500">Intel i9</option>
</select></p>
<p>MONITOR:</p>
<p><select id="monitor">
<option value="3500">Monitor razer 20'</option>
<option value="4500">Monitor razer 25'</option>
<option value="6000">Monitor razer 35'</option>
</select></p>
<p>DISCO SSD:</p>
<p><select id="disco" >
<option value="400">Disco SSD 250GB</option>
<option value="700">Disco SSD 500GB</option>
<option value="1200">Disco SSD 1TB</option>
</select></p>
<p><input type="button" value="Calcular presupuesto"
onclick="calcular()"></p>
<p><input type="text" id="resultado"></p>
</form>
<script type="text/javascript">
function calcular(){
let ele1=document.getElementById("procesador");
let precio1=ele1.options[ele1.selectedIndex].value;
let ele2=document.getElementById("monitor");
let precio2=ele2.options[ele2.selectedIndex].value;
let ele3=document.getElementById("disco");
let precio3=ele3.options[ele3.selectedIndex].value;
precio1=parseInt(precio1);
precio2=parseInt(precio2);
precio3=parseInt(precio3);
document.getElementById("resultado").value=precio1+precio2+precio3 ;
}
</script>
</body>
</html>
Actividad 7:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<p>Cómo se dice rojo en ingles?:</p>
<p><select id="pregunta1">
<option value="1">Red</option>
<option value="0">Blue</option>
<option value="0">Green/option>
</select></p>
<p>Cómo se dice ventana en ingles?:</p>
<p><select id="pregunta2">
<option value="1">Window</option>
<option value="0">Windowmaker</option>
<option value="0">Door</option>
</select></p>
<p>Cómo se dice gato en ingles?:</p>
<p><select id="pregunta3" >
<option value="0">Dog</option>
<option value="0">Bird</option>
<option value="1">Cat</option>
</select></p>
<p>Cómo se dice hombre en ingles?:</p>
<p><select id="pregunta4" >
<option value="1">Men</option>
<option value="0">Women</option>
<option value="0">Computer</option>
</select></p>
<p><input type="button" value="Calificación"
onclick="calcular()"></p>
<p><input type="text" id="resultado"></p>
</form>
<script type="text/javascript">
function calcular(){
let correcto=0;
let ele=document.getElementById('pregunta1');
if(ele.options[ele.selectedIndex].value==1){
correcto ++
}
let ele2=document.getElementById('pregunta1');
if(ele2.options[ele2.selectedIndex].value==1){
correcto ++
}
let ele3=document.getElementById('pregunta1');
if(ele3.options[ele3.selectedIndex].value==1){
correcto ++
}
let ele4=document.getElementById('pregunta1');
if(ele4.options[ele4.selectedIndex].value==1){
correcto ++
}
document.getElementById("resultado").value=correcto;
}
</script>
</body>
</html>
Ejercicio 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<input type="button" value="Sumar 1?" onclick="Incrementar()">
</form>
<script>
let contador=0;
function Incrementar(){
contador++;
alert("La suma vale: "+contador);
}
</script>
</body>
</html>
Ejercicio 2:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<p>Ingresa tu nombre:<input type="text" id="nombre" name=""></p>
<p>Ingresa tu edad:<input type="text" id="edad" name=""></p>
<p><input type="button" value="Confirmar" onclick="mostrar()"></p>
</form>
<script type="text/javascript">
function mostrar(){
let nombr=document.getElementById("nombre").value;
let eda=document.getElementById("edad").value;
alert("Tu nombre es: "+ nombr);
alert("Tu edad es: "+ eda);
}
</script>
</body>
</html>
Ejercicio 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<p><select id="select1" onchange="cambiaColor()">
<option value="ff0000">Rojo</option>
<option value="00ff00">Verde</option>
<option value="0000ff">Azul</option>
</select></p>
<p>Número de indice seleccionado del objeto SELECT<input type="text"
id="text1"></p>
<p>Texto Seleccionado:<input type="text" id="text2"></p>
<p>Valor asociado:<input type="text" id="text3"></p>
</form>
<script type="text/javascript">
function cambiaColor(){
let seleccion=document.getElementById("select1");
document.getElementById("text1").value=seleccion.selectedIndex;
document.getElementById("text2").value=seleccion.options[seleccion.selectedI
ndex].text;
document.getElementById("text3").value=seleccion.options[seleccion.selectedI
ndex].value;
}
</script>
</body>
</html>
Ejercicio 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<form>
<p>A cuál le sabes rey (o reina)</p>
<input type="checkbox" id="checkbox1">javascript
<br>
<input type="checkbox" id="checkbox2">Php
<br>
<input type="checkbox" id="checkbox3">Python
<br>
<input type="checkbox" id="checkbox4">C++
<br>
<input type="button" value="Mostrar"
onclick="contarSeleccionados()">
</form>
<script>
function contarSeleccionados(){
let lenguaje="";
if(document.getElementById("checkbox1").checked){
lenguaje = lenguaje + " Javascript ";
}
if(document.getElementById("checkbox2").checked){
lenguaje = lenguaje + " Php ";
}
if(document.getElementById("checkbox3").checked){
lenguaje = lenguaje + " Python ";
}
if(document.getElementById("checkbox4").checked){
lenguaje = lenguaje + " C++ ";
}
alert("Pues los que se supones que dominas son: "+lenguaje);
}
</script>
</body>
</html>