Taller programación inicial

Ejercicio 45: 1. Crear una página en HTML, agregar mínimamente:     a.  Un nombre a la página     b.  Un botón accione un prompt que consulte al usuario ¿Cuál comida típica argentina es su favorita     c.  Los casos son (Locro, Buseca, Tortas Fritas, Asado, default) index.html <!DOCTYPE html> <html>   <head>     <title>JS prompt y switch</title>     <meta charset="UTF-8">   </head>   <body>     <h1>JS prompt y switch</h1>     <button onclick="comidasArgentinas()">Inserte una comida</button>     <p id="demo"></p>     <script>       function comidasArgentinas() {         let frase;         let comidaFavArg = prompt(           "¿Cuál es tu comida favorita argentina?",           "L...

 Ejercicio 44: 1. Crear una página en HTML, agregar mínimamente:     a.  Un nombre a la página     b.  Un botón accione un alert y otro un confirm, que al elegir la respuesta nos avise que clickeamos index.html <!DOCTYPE html> <html>   <head>     <title>JS alert y confirm</title>   </head>   <body>     <h1>JS alert y confirm</h1>     <button onclick="alerta()">Recibe un alerta</button>     <button onclick="confirmacion()">Confirmación de cookies</button>     <p id="demo"></p>     <script>       function alerta() {         alert("Hiciste click en el botón de alerta");       }       function confirmacion() {         let frase;         if (confirm("¿Aceptás las cookies?") == true) { ...

Ejercicio 43: 1. Crear una página en HTML, agregar mínimamente:     a.  Un nombre a la página     b.  Definir 1 objeto persona.           PROPIEDADES: Nombre, Apellido, Edad           MÉTODOS: Nombre completo     c.  Mostrar Nombre completo y edad index.html <!DOCTYPE html> <html>   <head>     <title>JS Objetos</title>   </head>   <body>     <h1>JS Objetos</h1>     <p id="demo"></p>     <script>       const persona = {         nombre: "Juan",         apellido: "Perez",         edad: 38,         nombreCompleto: function () {           return this.nombre + " " + this.apellido;         },       };   ...

 Ejercicio 42: 1. Crear una página en HTML, agregar mínimamente:     a.  Un nombre a la página     b.  Utilizar distintos eventos para aparecer (onclick, onmouseover) y desaparecer (onmouseout, onload) una frase  index.html <!DOCTYPE html> <html>      <head>          <title>JS eventos</title>     </head>      <body>           <h1>Eventos de JS</h1>           <p>Pulse el botón para desaparecer y aparecer el texto</p>           <button onclick="mostrar()">Onclick</button>           <button onload="esconder()">Onload</button>           <button onmouseover="mostrar()" onmouseout="esconder()">Onmouseover y Onmouseout</button>    ...

 Ejercicio 41: 1. Crear una página en HTML, agregar mínimamente:          a.  Un nombre a la página          b.  Al cargar la página me regrese a través de una función el pasaje de:               -  5 Metros a pulgadas               -  5 Metros a pies index.html <!DOCTYPE html> <html>   <head>     <title>JS función return</title>   </head>   <body>     <h1>JS función "return"</h1>     <p>En este ejemplo veremos el pasaje de 5 metros a pulgadas y pies</p>     <p id="pulgada"> in</p>     <p id="pie"> ft</p>     <script>       function aPulgada(metros) {         return (metros*39.37);       }       functio...

Ejercicio 40:  1. Crear una página en HTML, agregar mínimamente:     a.  Un nombre a la página     b.  Al cargar la página me regrese a través de una función el resultado de 4-3 index.html <!DOCTYPE html> <html>      <head>           <title>JS función return - restar</title>      </head>   <body>     <h1>JS función "return"</h1>     <p>En este ejemplo vamos a comprobar como funciona la funcion return</p>     <p id="cuenta"></p>     <script>       var x = myFunction(4, 3);       document.getElementById("cuenta").innerHTML = x;       function myFunction(a, b) {         return a - b;       }     </script>   </body> </html>

Ejercicio 39:      1.  Crear una página en HTML, agregar mínimamente:          a.  Un nombre a la página          b.  Un párrafo “En el taller de programación”          c.  Con un botón que pueda completar la frase “aprendemos HTML, CSS y JS” index.html <!DOCTYPE html> <html>     <head>         <title>JS escribiendo frases</title>         <meta charset="UTF-8">     </head>     <body>         <p id="inicio"></p>         <button onclick="fraseCompleta()">Completar frase</button>         <script>             let frase = "En el taller de programación";             document.getElementById("inicio").innerHTML=frase; ...

Ejercicio 38:      1.  Crear una página en HTML, agregar mínimamente:          a.  Un nombre a la página          b.  Un valor inicial en una variable numérica          c.  6 botones que realicen, cada uno de ellos, una de las operaciones aritméticas vistas index.html <!DOCTYPE html> <html>     <head>         <title>JS asignar operaciones aritméticas</title>     </head>     <body>         <p id="Cuenta"></p>         <button onclick="Sumar()">+100</button>         <button onclick="Restar()">-50</button>         <button onclick="Dividir()">/2</button>         <button onclick="Multiplicar()">*2</button>         ...

  Ejercicio 7b      1. Crear una página en HTML, agregar mínimamente:          a.  Un nombre a la página          b.  JS de forma interna, a través de dos botones. Los cuales cambien la imagen que quiera visualizar. A diferencia del ejercicio 6b, hacerlo a través de una variable ... index.html <!DOCTYPE html> <html>   <head>     <title>Cambiar imagen</title>     <script>         function clima(estado) {           var pic;           if (estado == 1) {             pic = "sol.jpg";           } else {             pic = "nube.jpg";           }           document.getElementById("Imagen").src = pic;         }       <...

 Ejercicio 38     1.  Crear una página en HTML, agregar mínimamente:          a.  Un nombre a la página          b.  JS de forma externa, a través de un botón. El cual haga desaparecer visualmente el párrafo ... index.html <!DOCTYPE html> <html>     <head>         <title>JS externo</title>         <script src="myScript.js"></script>     </head>     <body>         <p id="ocultarParrafo">Este párrafo es visible</p>         <button onclick="myFunction()">Ocultar párrafo</button>     </body> </html> ... myScript.js function myFunction(){     document.getElementById('ocultarParrafo').style.display='none'; } ...

Ejercicio 37     1.  Crear una página en HTML, agregar mínimamente:          a.  Un nombre a la página          b.  JS de forma interna, a través de un botón. El cual haga cambiar el párrafo ... <!DOCTYPE html> <html>     <head>         <title>JS interno</title>         <script>             function myFunction() {                 document.getElementById("parrafo").innerHTML = "Se cambió el párrafo";             }         </script>     </head>     <body>         <p id="parrafo">Este es el párrafo antes de ser cambiado</p>         <button type="button" onclick="myFunction()">Cambiar párrafo</button>    ...

 Ejercicio 6b      1. Crear una página en HTML, agregar mínimamente:          a.  Un nombre a la página          b.  JS de forma en línea, a través de dos botones. Los cuales cambien la imagen que quiera visualizar ... index.html <!DOCTYPE html> <html>     <head>         <title>JS en línea - cambio imagen</title>     </head>     <body>         <h1>Cambiar imagen con dos botones</h1>         <img id="clima" src="sol.jpg" style="width:500px">         <p>             <button onclick="document.getElementById('clima').src='sol.jpg'">Soleado</button>             <button onclick="document.getElementById('clima').src='nube.jpg'">Nubblado</button>     ...

 Ejercicio 36     1.  Crear una página en HTML, agregar mínimamente:          a.  Un nombre a la página          b.  JS de forma en línea, a través de un botón. El cual haga cambiar el estilo de un párrafo ... index.html <!DOCTYPE html> <html>   <head>     <title>JS en línea</title>   </head>   <body>     <h1>Cambiar el estilo del párrafo</h1>     <p id="estilo">       En este página podés cambiar el estil de este párrafo haciendo click en el       botón de abajo     </p>     <!-- <button onclick="document.getElementById('estilo').style.fontSize='250%'">         Cambiar estilo del párrafo     </button> -->     <button       onclick="document.getElementById('estilo').style.fon...

Ejercicio 35 Viendo las características de la siguiente página, resolverla de la misma manera index.html <!DOCTYPE html> <html>     <head>         <title>Pagina visual</title>         <style>             * {             box-sizing: border-box;             }             header{                 background-color: darkslategray;                 padding: 30px;                 text-align: center;                 font-size: 35px;                 color: white;             }             nav{             ...

 Ejercicio 34 Viendo las características de la siguiente página, resolverla de la misma manera --- index.html <!DOCTYPE html> <html lang="es">   <head>     <title>Formulario de prueba</title>   </head>   <body style="background: lightcoral">     <h1>Formulario de prueba</h1>     <form id="form-order"> <!-- Formulario -->       <p>         <label for="name">Nombre (obligatorio) </label>         <input           type="text"           name="name"           id="name"           placeholder="Dafne Perron"           autofocus           autocomplete           required         />       </p> ...

 Ejercicio 33 Viendo las características de la siguiente página, resolverla de la misma manera --- index.html <html>   <head>     <title>Formulario de prueba 2</title>   </head>   <body>     <form>       <fieldset>         <legend>Datos personales</legend>         <label for="nombre">Nombre</label>         <input type="text" id="nombre" name="nombre" value="Dafne" />         <label for="apellido">Apellido</label>         <input type="text" id="apellido" name="apellido" value="Perron" />       </fieldset>       <p>         <label for="color">Elija un color</label>         <select name="color" id="color"> <!--podría hacerlo con un datalist--...

 Ejercicio 32: Crear una página en html, agregar minimamente:     1.  Un nombre a la página     2. Un video desde un archivo, con los controles y en silencio     3. Un audio desde un archivo, con los controles     4. Insertar otra página en la misma página     5. Un video desde Youtube index.html <!DOCTYPE   html > <html>      <head>           <title> HTML - Media </title>      </head>     <body >           <main>               <h1 > Media con HTML </h1>                <p > Video y audio desde archivo </p>               <video  src = "marimonias.mp4"  width = "150"  height = "300"  controls muted > Video ...

 Ejercicio 31: Crear una página en html, agregar minimamente:     1.  Un nombre a la página     2.  Escribir una página que contenga "5 capítulos" y 2 que se dirijan desde la parte superior del body a sus respectivos capítulos (simulando un índice de drive o word) index.html <!DOCTYPE   html > <html>      <head>           <title> Marcador o índice </title>      </head>     <body >           <main>                <p > <a   href = "#C2" >  Ir al capítulo 2 </a > </p>                <p > <a   href = "#C5" >  Ir al capítulo 5 </a > </p>               <h2 > Capítulo 1 </h2>       ...

Ejercicio 30: Crear una página en html, agregar minimamente:     1.  Un nombre a la página y un favicon     2.  CSS de forma interna:          a. U na clase, que contenga: fondo, letra de color y espacio          b. Otra clase, que contenga: distinto tamaño, y letra de color     3. Escribir una página usando las clases en partes de párrafos, títulos, etc. Utilizando las clases al menos 2 veces en 2 tipos de textos, y una vez utilizar 2 clases en el mismo framento index.html <!DOCTYPE   html > <html>      <head>           <title> Atributos Class y Span </title>           <link  rel = "icon"   size = "16x16"  href = "favicon-16x16.png" >           <style>               .backgroundStyle {   ...

Ejercicio 29: Crear una página en html, agregar minimamente:     1.  Un nombre a la página     2.  CSS de forma interna:          a. U n menú de navegación de al menos 3 páginas index.html <!DOCTYPE   html > <html>      <head>           <title> HTML - Menú de navegación </title>         <!-- OVERFLOW - hidden : recorta nuestro texto/imagen/etc, scroll : añade una barra por lo que no recorta nuestro texto/imagen/etc, auto : añade o no la barra dependiendo si es o no necesario por lo que no recorta nuestro texto/imagen/etc                     DISPLAY - block : uno debajo del otro (en nuestro caso responde el padding), inline-block : uno al lado del otro  -->           <style>           ...