Bagaimana Anda mendapatkan data dari js ke html?

Question

Karena JavaScript telah menjadi bagian terintegrasi dari Front End Development, Anda harus mempelajari cara membaca dan menulis ke dokumen HTML

Table of Contents Show

Bagaimana JavaScript berintegrasi dengan HTML?
Bagaimana cara mendapatkan data dari JavaScript situs web?
Bagaimana cara mengambil input dari JavaScript?

Sebelum kita masuk ke pengkodean yang sebenarnya, mari kita diskusi singkat tentang DOM - Model Objek Dokumen, karena itu akan membantu Anda untuk memahami topik dengan lebih baik.

Catatan singkat tentang DOM

Model Objek Dokumen adalah antarmuka yang memungkinkan skrip dan program mengakses dan memperbarui konten secara dinamis (mis. g. teks, gambar dll. ), struktur dan gaya dokumen HTML, XHTML dan XML. Untuk pembahasan kali ini, kita akan fokus pada dokumen HTML saja. Model Objek Dokumen adalah rekomendasi W3C

Mari kita ambil halaman HTML sederhana seperti berikut

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>A simple HTML document</title>
</head>
<body>
<h1>This is a simple HTML document</h1>
<p>w3resource web development tutorial</p>
</body>
</html>

Sekarang, representasi DOM dari kode di atas adalah sebagai berikut

Semua kotak biru itu disebut sebagai Nodes

Menulis data ke dokumen HTML

Sekarang, kita akan melihat bagaimana Anda dapat menulis beberapa teks dalam dokumen HTML. Kode JavaScript berikut dapat digunakan untuk membuat paragraf baru dalam dokumen HTML dan menambahkan beberapa teks di dalamnya

var w3r_text = "This text will be added to HTML";
var newParagraph = document.createElement("p"); //creates a new paragraph element
var newText = document.createTextNode(w3r_text); //creates text along with output to be displayed 
newParagraph.appendChild(newText); //created text is appended to the paragraph element created
document.body.appendChild(newParagraph); // created paragraph and text along with output is appended to the document body

_

Kami telah menambahkan komentar di samping setiap baris kode, sehingga Anda dapat memahaminya. Anda dapat menggunakan bagian komentar kami untuk memberi tahu kami jika Anda memiliki pertanyaan. Jika kode di atas ditambahkan ke kode HTML yang telah kita mulai, itu akan datang

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>A simple HTML document</title>
</head>
<body>
<h1>This is a simple HTML document</h1>
<p>w3resource web development tutorial</p>
<script src="add_text.js"></script>
</body>
</html>

Lihat keluaran daring

Apakah Anda melihat teks baru di keluaran HTML sekarang?

Membaca data dari dokumen HTML

Ingin membaca data dari dokumen HTML? . Mari kita lihat bagaimana Anda bisa melakukannya. Ini adalah kode JavaScript yang akan kita gunakan untuk contoh ini

var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);

Jadi, di baris pertama, kami mengumpulkan teks di dalam paragraf, yang idnya adalah - shtxt. 'dokumen' mengacu pada dokumen tempat skrip dijalankan, 'getElementById' memilih elemen yang id-nya adalah 'shtxt' dan innerHTML memilih teks yang sebenarnya. Kami menyimpan nilai itu dalam variabel 'shdata' dan kemudian, dengan menggunakan perintah peringatan, teks ditampilkan

Berikut adalah kode HTML tempat JavaScript di atas ditambahkan

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<title>A simple HTML document</title>
</head>
<body>
<h1>This is a simple HTML document</h1>
<p id="shtxt">w3resource web development tutorial</p>
<p><a href="#" onclick="Showdata();">Show text</a></p>
<script src="fetch_text.js"></script>
</body>
</html>

_

Lihat hasilnya secara online

Perhatikan bahwa saat Anda mengeklik tautan, kode di dalam Showdata() dipanggil

Ini adalah bentuk paling sederhana untuk mengakses data dari dokumen HTML. Ada banyak perintah DOM yang dapat digunakan untuk mengakses data dari dokumen HTML

Tugas di sini adalah untuk menunjukkan bagaimana Fetch API dapat digunakan untuk mendapatkan data dari API. Saya akan mengambil API palsu yang berisi detail karyawan sebagai contoh dan dari API itu. Saya akan menunjukkan untuk mendapatkan data dengan metode fetch() API.

JavaScript mengambil () metode. Metode fetch() modern dan serbaguna dan didukung dengan sangat baik di antara browser modern. Itu dapat mengirim permintaan jaringan ke server dan memuat informasi baru kapan pun dibutuhkan, tanpa memuat ulang browser

Sintaksis. Metode fetch() hanya memiliki satu argumen wajib, yaitu URL sumber daya yang ingin Anda ambil

let response = fetch(api_url, [other params])

JavaScript Asinkron Menunggu. Dalam contoh ini, kita akan menggunakan metode Async Await dengan metode fetch() untuk membuat janji dengan cara yang lebih ringkas. Fungsi async didukung di semua browser modern

Sintaksis

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

_

Prasyarat. Di sini, Anda memerlukan API untuk melakukan operasi fetch() untuk mendapatkan data dari API tersebut. Anda juga dapat membuat API atau mengambil API tiruan gratis
Di sini API yang saya gunakan adalah. API ini berisi detail karyawan dalam bentuk kunci. pasangan nilai. https. //detail karyawan. Gratis. reseptor lebah. com/my/api/path

Mendekati. Pertama buat file JavaScript, file HTML, dan file CSS yang diperlukan. Kemudian simpan URL API dalam variabel (di sini api_url). Tentukan fungsi async (di sini getapi()) dan berikan api_url dalam fungsi tersebut. Tetapkan respons konstan dan simpan data yang diambil dengan metode await fetch(). Tentukan data konstan dan simpan data dalam bentuk JSON dengan menunggu respons. metode json(). Sekarang kami mendapatkan data dari API dengan metode fetch() dalam variabel data. Lewati variabel data ini ke fungsi yang akan menampilkan data yang diambil.

Pertunjukan fungsi mengambil variabel data dan dengan menerapkan loop pada data. list dan menampilkan semua baris, ini menyimpan semua data ke variabel tab yang mengatur properti innerHTML untuk karyawan kelas dalam file HTML. Saya juga telah menambahkan loader yang memuat hingga respons datang

berkas JavaScript.

Javascript

// api url

const api_url =

"https://employeedetails.free.beeceptor.com/my/api/path";

// Defining async function

async

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

0

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

1

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

_2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

4

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

6

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

_2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

9

________6

var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);

_103_______1 // api url2

________6

var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);

_103_______4

________6

var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);

_103_______6 // api url7

// api url8// api url9

________6

var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);

_104_______1

________6

var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);

_104_______3

const api_url = _1

const api_url = _5

const api_url = _6

const api_url = _8

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

0 0

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3 2 3 4 5;

const api_url = _1

_8

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

0 "https://employeedetails.free.beeceptor.com/my/api/path"0

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3"https://employeedetails.free.beeceptor.com/my/api/path"2

// api url8"https://employeedetails.free.beeceptor.com/my/api/path"4

"https://employeedetails.free.beeceptor.com/my/api/path"5"https://employeedetails.free.beeceptor.com/my/api/path"6

"https://employeedetails.free.beeceptor.com/my/api/path"5"https://employeedetails.free.beeceptor.com/my/api/path"8

"https://employeedetails.free.beeceptor.com/my/api/path"5;0

"https://employeedetails.free.beeceptor.com/my/api/path"5;2

;3;4

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

_2

________6

var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);

_107_______7

________6

var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);

_107_______9 0

// api url8 2

________6

var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);

_108_______4

________6

var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);

_108_______6

________6

var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);

_108_______8

________6

var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);

_109_______0

;_4

________6

var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);

_104_______1

________6

var shdata = document.getElementById('shtxt').innerHTML;
alert(shdata);

_109_______5

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3 2// Defining async function8// Defining async function9

const api_url = _1

berkas HTML.

HTML

async_1

async2async3 async4async5async6async7

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3async2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

00async7

// api url8async2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

04

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

05________110______5

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

07

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

08

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

04async7

________103______8async2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

13

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

14async5

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

16

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

17async5

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

19 ________6______20

________103______8async2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

23

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

24async5

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

26

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

20

// api url8async2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

23

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

31async5

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

33

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

34

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

35async5

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

37 ________6______20

// api url8async2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

41

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

42________6______41async7

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

46

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

00async7

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3async2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

51async7

// api url8

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

54

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

_55

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

56

________103______8async2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

59

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

60________110______5

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

62async7

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

_64async2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

59

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

60async5

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

69

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

70

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

71async5

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

73 ________6______74async5

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

76async7

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

78async2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

80

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

60async5

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

83

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

84

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

80async7

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

64

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

46

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

59async7

________103______8

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

46

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

59async7

// api url8async2

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

97

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

98

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

97async7

// api url8// api url02

// api url8async2// api url05

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

74async5// Defining async function8

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

08// api url05async7

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

3

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

46

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

51async7

async function funcName(url){
    const response = await fetch(url);
    var data = await response.json();
    }

_46async3async7

Keluaran

Di konsol, data di JSON akan terlihat seperti ini.

Keluaran HTML.

JavaScript terkenal untuk pengembangan halaman web tetapi juga digunakan di berbagai lingkungan non-browser. Anda dapat mempelajari JavaScript dari awal dengan mengikuti Tutorial JavaScript dan Contoh JavaScript ini

Bagaimana JavaScript berintegrasi dengan HTML?

javascript disematkan ke dalam html dengan tag skrip . jika Anda membuka file javascript mentah, browser tidak akan menjalankannya, itu hanya akan menampilkan kodenya. itu sama dengan mengimpor sumber daya ke proyek java.

Bagaimana cara mendapatkan data dari JavaScript situs web?

Langkah-Langkah yang Diperlukan untuk Pengikisan Web .

Membuat paket. file json

Instal & Panggil perpustakaan yang diperlukan

Pilih Situs Web & Data yang diperlukan untuk Mengikis

Tetapkan URL dan Periksa Kode Respons

Periksa dan Temukan tag HTML yang Tepat

Sertakan tag HTML dalam Kode kita

Periksa ulang Data Tergores

Bagaimana cara mengambil input dari JavaScript?

Dalam JavaScript, kami menggunakan fungsi prompt() untuk meminta input dari pengguna . Sebagai parameter, kita menginputkan teks yang ingin kita tampilkan kepada pengguna. Setelah pengguna menekan "ok", nilai input dikembalikan. Kami biasanya menyimpan input pengguna dalam sebuah variabel sehingga kami dapat menggunakan informasi dalam program kami.

kode html