Tech School

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Desarrollo Web Lección 6 - Medios ======
===== Medios Javascript =====
==== Objetivos ====
En esta actividad, utilizará los medios de activación de Javascript en respuesta a la entrada del usuario.

==== Preparacion ====
  * Continuaremos usando 'media.php' y 'style.css' en Visual Studio Code. Si necesitas el código de nuevo, aquí está.
  * [[https://techschool.murraygunn.id.au/webdev/classes/media/3/media.es.php|media.php]]
  * [[https://techschool.murraygunn.id.au/webdev/classes/layout/3/cabecera.es.php|cabecera.php]]
  * [[https://techschool.murraygunn.id.au/webdev/classes/media/3/style.php|style.css]]

==== Botón de Entrada ====
  * Es posible que desee agregar audio cuando un usuario realiza una acción, como una respuesta correcta (o incorrecta) a una prueba. Para esto, usaría Javascript para controlar su archivo de audio.
  * Simplifiquemos esto agregando un botón y reproduciendo o pausando el audio cada vez que se haga clic en el botón.
<code>        <input type="button" value="Reproducir/Pausar audio" onclick="reproducirPausaAudio()"></code>
  * Un botón es un tipo de entrada.
  * El valuees el texto que se mostrará en el botón.
  * Finalmente, activaremos una función Javascript llamada 'playPauseAudio()' con cualquier clic del botón.
  * El botón ahora se encuentra en el medio de la nada (en línea con el reproductor de audio), pero me gustaría que estuviera en su propia línea debajo, así que agreguemos algo de CSS .
<code>input[type=button] {
  display: block;
}</code>
  * Este es un nuevo tipo de selector. Se refiere a cualquier entrada que cumpla las condiciones establecidas dentro de <html>[]</html> , en este caso, que el tipo de entrada sea 'botón'.
  * Luego lo configuramos para bloquear para que tome su propia línea.

Variables PHP

    Por supuesto, este botón no hace nada hasta que agregamos algo de Javascript, pero realmente no queremos usar 'lists.js' para nuestro archivo 'media.php', por lo que debemos agregar un enlace a un nuevo archivo en el encabezado
    Podríamos simplemente agregar la línea como HTML , pero imagina si hiciéramos esto para cada página en un sitio enorme. Mejor hacerlo dinámico.
    Actualice el primer bloque de código PHP de esta manera.
<code><?php
    $pagina = "media";
    include("cabecera.php");
    include("menu.php");
?></code>
  * Las variables en PHP siempre están representadas por <html>$</html> y el nombre de la variable.
  * En este caso, tenemos una variable llamada 'página' y le asignamos el valor de 'medios' que es el nombre de la página.
  * Ahora abra 'header.php' y reemplace la línea <html><script></html> con lo siguiente.
<code>    <script src="<?php echo $pagina; ?>.js"></script></code>
  * Note que el único cambio que hemos hecho es a la palabra 'listas'. Lo hemos reemplazado con código PHP que dice 'eco' (reproducir en el código) el valor de la variable 'página'.
  * Si guarda y carga 'media.php' y 'header.php', luego abre media.php e inspecciona el archivo, verá que la fuente del script ahora es 'media.js'.

==== Reproducir Audio ====
  * Ahora necesitamos crear la función que reproducirá el archivo de audio.
  * Cree un nuevo archivo llamado 'media.js'.
  * Agrega la función.
<code>function reproducirPausarAudio() {
    
}</code>
  * Ahora identifiquemos el archivo de audio y guárdelo como una variable. 
<code>function reproducirPausarAudio() {
    var audio = document.getElementsByTagName('audio')[0];
}</code>
  * El audio se puede reproducir usando la función '.play()'.
<code>function reproducirPausarAudio() {
    var audio = document.getElementsByTagName('audio')[0];
    audio.play();
}</code>
  * Pruébelo antes de agregar la opción de pausa.
  * Ahora, primero queremos verificar el estado del audio (reproduciendo o en pausa) antes de decidir qué acción tomar.
<code>    if (audio.paused) {}</code>

    Este código comprobará si nuestro audio está <html>.paused</html> y nos permitirá elegir nuestra acción en función del resultado. Si es cierto, queremos, de lo <html>.play</html> contrario, queremos <html>.pause</html>.
    ¿Puedes completar esta función sin mirar el código de abajo?
<code>function reproducirPausarAudio() {
    var audio = document.getElementsByTagName('audio')[0];
    if (audio.paused) {
        audio.play();
    } else {
        audio.pause();
    }
}</code>
  * Guardaremos el control del video por Javascript para un ejercicio.

==== Codigo Final ====
  * [[https://techschool.murraygunn.id.au/webdev/classes/media/4/media.es.php|media.php]]
  * [[https://techschool.murraygunn.id.au/webdev/classes/media/4/cabecera.es.php|cabecera.php]]
  * [[https://techschool.murraygunn.id.au/webdev/classes/media/4/style.css|style.css]]
  * [[https://techschool.murraygunn.id.au/webdev/classes/media/4/media.php|resultado]]
  * [[https://techschool.murraygunn.id.au/webdev/classes/media/4/js.php|media.js]]

[[es:web_development:media:flexbox|Siguiente: Flexbox]]
Tech School

User Tools

Site Tools

Page Tools
