Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Ubicación de etiqueta dentro del HTML y def. variables en JS

JavaScript - Ubicación de etiqueta dentro del HTML y def. variables en JS

Volver
Nuevo Tema
<<>>
 
Vista:

Ubicación de etiqueta dentro del HTML y def. variables en JS

Publicado por consultr (3 intervenciones) el 17/07/2020 22:27:26
hola foro. pregunta por favor y gracias por adelantado.

Si defino en el js variables utilizando let al principio del js fuera de una función y en el html
defino la etiqueta script (para vincular el js) dentro de la sección head no
ejecuta el js, pero, si la etiqueta script la pongo antes del </body> si lo
ejecuta. No entiendo cual es la relacion.

muchos saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ubicación de etiqueta dentro del HTML y def. variables en JS

Publicado por joel (895 intervenciones) el 18/07/2020 09:32:00
la verdad no entiendo muy bien a que te refieres... nos puedes mostrar un ejemplo?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Ubicación de etiqueta dentro del HTML y def. variables en JS

Publicado por consultr (3 intervenciones) el 18/07/2020 19:14:26
gracias joel. aquí va: te comento que es un simple reproductor de video, este es el js, fijate que tiene las asignaciones (let) al principio

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
let maximo = 600;
let medio = document.getElementById('medio');
let reproducir = document.getElementById('reproducir');
let barra = document.getElementById('barra');
let progreso = document.getElementById('progreso');
 
function iniciar() {
 
    reproducir.addEventListener('click', presionar);
    barra.addEventListener('click', mover);
}
 
function presionar(){
 
    if (!medio.paused && !medio.ended){
 
        medio.pause();
        reproducir.innerHTML = 'Reproducir';
        window.clearInterval(bucle);
 
    } else {
        medio.play();
        reproducir.innerHTML = 'pausa';
        bucle = setInterval(estado, 10)
 
    }
}
 
function estado(){
 
    if(!medio.ended) {
 
        let total = parseInt(medio.currentTime*maximo/medio.duration);
        progreso.style.width = total + 'px';
 
    } else {
 
        progreso.style.width = '0px';
        reproducir.innerHTML = 'reproducir'
        windows.clearInterval(bucle);
 
    }
}
 
function mover(e){
 
    if(!medio.paused && !medio.ended){
 
        let ratonX = e.pageX - barra.offsetLeft;
        let nuevoTiempo = ratonX * medio.duration/maximo;
 
        medio.currentTime = nuevoTiempo;
        progreso.style.width = ratonX + 'px';
    }
}
 
window.addEventListener('load', iniciar())


Aqui va el html fijate que la etiqueta <script > para el js está al final antes del </body>, si le pones un video cualquiera funciona bien. Ahora si la etiqueta <script> la saco de alli y la pongo arriba en el <head> donde está comentada, no funciona. Esto es lo que no entiendo pq pasa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="Styles/estilos.css" type="text/css">
<!--	<script src="js/reproductor.js"></script>-->
    <title>Reproductor de video</title>
</head>
 
<body>
 
    <header id="principal">
        <span id="titulo">
            Video
        </span>
    </header>
 
    <section id="reproductor">
 
        <video id="medio" width="720" height="400">
            <source src="video/Atardecerá.Finale.mp4">
        </video>
 
        <nav>
            <div id="botones">
                <button id="reproducir" type="button">Play</button>
            </div>
 
            <div id="barra">
                <div id="progreso">
 
                </div>
            </div>
            <div style="clear:both"></div>
        </nav>
 
    </section>
 
    <script src="js/reproductor.js"></script>
</body>
 
</html>

Ahora si saco las let y asigno dentro de la primera función, funciona indistintamente en donde este la etiqueta <script>
No se si es claro
gracias
saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Ubicación de etiqueta dentro del HTML y def. variables en JS

Publicado por joel (895 intervenciones) el 18/07/2020 21:19:36
Ah, bien, bien, ahora lo entiendo... gracias por mostrarlo

Si, es muy sencillo... cuando el JS esta en la cabecera, se ejecuta antes de cargar el contenido HTML, por lo que cuando tiene que asignar una variable con parte del contenido de la web, no puede, porque todavia no esta ese contenido... por ejemplo esta linea:
1
let medio = document.getElementById('medio');
Si cuando se ejecuta, todavia no se ha creado el elemento con el id "medio", es imposible que obtenga dicho valor!!!

No se si me he sabido explicar...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Ubicación de etiqueta dentro del HTML y def. variables en JS

Publicado por consultr (3 intervenciones) el 19/07/2020 01:40:06
ah, ok, muchas gracias joel. me quedó claro! buen fin de semana. saludos ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar