Bagaimana cara menautkan file JavaScript ke file HTML?

187

Bagaimana Anda menautkan file JavaScript dengan benar ke dokumen HTML?

Kedua, bagaimana Anda menggunakan jQuery dalam file JavaScript?

javascript jquery html firstofth300
sumber
3
Saya lebih suka jawaban di sini: Di mana saya harus meletakkan tag <script> di markup HTML?
caramba
@caramba Tapi bagaimana jika saya membutuhkan JS untuk melakukan sesuatu yang lebih rumit? Saya mencoba membuatnya menulis file jadi saya menelepon const fs = require('fs');dari node.
Nathan
1
@Nathan dengan node.js itu cerita yang sama sekali berbeda. baca harapan ini membantu
caramba
Saya menemukan solusi, tetapi saya yakin orang lain akan senang dengan tautannya!
Nathan

Jawaban:

189

Pertama, Anda perlu mengunduh JQuery library dari http://jquery.com/ lalu memuat jquery library dengan cara berikut dalam tag kepala html Anda

maka Anda dapat menguji apakah jquery bekerja dengan mengkode kode jquery Anda setelah skrip pemuatan 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>

Jika Anda ingin menggunakan file skrip jquery Anda secara terpisah, Anda harus mendefinisikan file .js eksternal dengan cara ini setelah pustaka jquery memuat.

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

Tes secara real time

Tampilkan cuplikan kode

Swarne27
sumber
7
Terima kasih banyak. Inilah jawaban yang akhirnya saya temukan! Saya tahu bahwa pertanyaannya mendasar tetapi saya berterima kasih telah meluangkan waktu untuk menunjukkan ini kepada saya! Apa yang saya lewatkan adalah menempatkan perpustakaan jQuery sebelum file javascript!
firstofth300
53

Ini adalah bagaimana Anda menautkan file JS dalam HTML

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

<script> - Tag digunakan untuk mendefinisikan skrip sisi klien, seperti JavaScript.

type - tentukan jenis skrip

src - nama dan jalur file skrip

Muthu Kumaran
sumber
13

Anda dapat menambahkan tag skrip di dokumen HTML Anda, idealnya di dalam yang menunjuk ke file javascript Anda. Urutan tag skrip itu penting. Muat jQuery sebelum file skrip Anda jika Anda ingin menggunakan jQuery dari skrip Anda.

<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>

Kemudian dalam file javascript Anda, Anda bisa merujuk ke jQuery baik menggunakan $tanda atau jQuery. Contoh:

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

Untuk memasukkan file Javascript eksternal Anda menggunakan <script>tag. The srcatribut menunjuk ke lokasi file Javascript Anda dalam proyek web.

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

JQuery hanyalah sebuah file Javascript, jadi jika Anda mengunduh salinan file tersebut, Anda dapat memasukkannya ke dalam halaman Anda menggunakan tag skrip. Anda juga dapat memasukkan Jquery dari jaringan distribusi konten seperti yang di-host oleh Google.

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

Di bawah ini Anda memiliki beberapa dokumen contoh VALID html5 . The typeatribut dalam scripttag ini tidak wajib di HTML5.

Anda menggunakan jquery oleh $charater. Masukkan pustaka (seperti jquery) di <head>tag - tetapi skrip Anda menempatkan allways di bagian bawah dokumen ( <body>tag) - karena ini Anda akan yakin bahwa semua pustaka dan dokumen html akan dimuat ketika eksekusi skrip Anda dimulai. Anda juga dapat menggunakan srcatribut dalam tag skrip bawah untuk menyertakan file skrip Anda alih-alih meletakkan kode js langsung seperti di atas.

<!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>
Luaskan cuplikan

Kamil Kiełczewski
sumber
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
sumber