¿Cómo vinculo un archivo JavaScript a un archivo HTML?

187

¿Cómo se vincula correctamente un archivo JavaScript a un documento HTML?

En segundo lugar, ¿cómo utiliza jQuery dentro de un archivo JavaScript?

javascript jquery html firstofth300
fuente
3
Prefiero las respuestas aquí: ¿Dónde debo poner las etiquetas <script> en el marcado HTML?
caramba
@caramba ¿Pero qué pasa si necesito que el JS haga algo más complicado? Estoy tratando de que escriba un archivo, así que llamo const fs = require('fs');desde el nodo.
Nathan
1
@Nathan con node.js es una historia completamente diferente. lea esta esperanza que ayuda
caramba
Encontré una solución, ¡pero estoy seguro de que alguien más se alegrará por el enlace!
Nathan

Respuestas:

189

Primero debe descargar la biblioteca JQuery de http://jquery.com/ luego cargar la biblioteca jquery de la siguiente manera dentro de sus etiquetas de encabezado html

entonces puede probar si jquery funciona codificando su código jquery después del script de carga jquery

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<!--LINK JQUERY-->
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<!--PERSONAL SCRIPT JavaScript-->
<script type="text/javascript">
   $(function(){
      alert("My First Jquery Test");
   });
</script>

</head>
<body><!-- Your web--></body>
</html>

Si desea utilizar su archivo jquery scripts por separado, debe definir el archivo externo .js de esta manera después de cargar la biblioteca jquery.

<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script src="js/YourExternalJQueryScripts.js"></script>

Prueba en tiempo real

Mostrar fragmento de código

Swarne27
fuente
77
Muchas gracias. ¡Esta es exactamente la respuesta que finalmente descubrí! ¡Sé que la pregunta era elemental pero les agradezco por tomarse el tiempo para mostrarme esto! ¡Lo que me faltaba era colocar la biblioteca jQuery antes del archivo javascript!
firstofth300
53

Así es como se vincula un archivo JS en HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

<script> - La etiqueta se utiliza para definir un script del lado del cliente, como un JavaScript.

type - especifique el tipo de script

src - nombre del archivo de script y ruta

Muthu Kumaran
fuente
13

Puede agregar etiquetas de script en su documento HTML, idealmente dentro de los puntos que apuntan a sus archivos javascript. El orden de las etiquetas del script es importante. Cargue jQuery antes de sus archivos de script si desea usar jQuery desde su script.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="relative/path/to/your/javascript.js"></script>

Luego, en su archivo javascript, puede referirse a jQuery usando $sign o jQuery. Ejemplo:

jQuery.each(arr, function(i) { console.log(i); });
BuddhiP
fuente
12

Para incluir un archivo Javascript externo, use la <script>etiqueta. El srcatributo apunta a la ubicación de su archivo Javascript dentro de su proyecto web.

<script src="some.js" type="text/javascript"></script>

JQuery es simplemente un archivo Javascript, por lo que si descarga una copia del archivo, puede incluirlo dentro de su página utilizando una etiqueta de script. También puede incluir Jquery desde una red de distribución de contenido como la alojada por Google.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Kevin Bowersox
fuente
2

A continuación tiene un documento de ejemplo html5 VÁLIDO . El typeatributo en la scriptetiqueta no es obligatorio en HTML5.

Usas jquery por $charater. Coloque las bibliotecas (como jquery) en la <head>etiqueta, pero su secuencia de comandos se coloca siempre en la parte inferior del documento ( <body>etiqueta), debido a esto se asegurará de que todas las bibliotecas y documentos html se cargarán cuando comience la ejecución de la secuencia de comandos. También puede usar el srcatributo en la etiqueta de secuencia de comandos inferior para incluir su archivo de secuencia de comandos en lugar de poner un código js directo como el anterior.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
</head>
<body>
    <div>Im the content</div>

    <script>
        alert( $('div').text() ); // show message with div content
    </script>
</body>
</html>
Expandir fragmento

Kamil Kiełczewski
fuente
0 
this is demo code but it will help 

<!DOCTYPE html>
<html>
<head>
<title>APITABLE 3</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>


$(document).ready(function(){

$.ajax({
    type: "GET",
    url: "https://reqres.in/api/users/",

    data: '$format=json',

    dataType: 'json',
    success: function (data) {
 $.each(data.data,function(d,results){
     console.log(data);

 $("#apiData").append(
                        "<tr>"
                          +"<td>"+results.first_name+"</td>"
                          +"<td>"+results.last_name+"</td>"
                          +"<td>"+results.id+"</td>"
                          +"<td>"+results.email+"</td>"
  +"<td>"+results.bentrust+"</td>"
                        +"</tr>" )
                    })
 } 

});

});


</script>
</head>
<body>


    <table id="apiTable">

        <thead>
            <tr>
            <th>Id</th>
            <br>
            <th>Email</th>
            <br>
            <th>Firstname</th>
            <br>
            <th>Lastname</th>
        </tr>
        </thead>
        <tbody id="apiData"></tbody>    





</body>
</html>
Hozaifa
fuente