Bagaimana kita menambahkan javascript ke halaman web

dimulai dengan dasar yang kuat dalam pemrograman komputer dan menguasai bahasa pemrograman utama. Salah satu bahasa pemrograman tersebut adalah JavaScript

JavaScript telah digunakan untuk membangun beberapa situs web dan aplikasi paling populer di dunia, itulah sebabnya pengembang web yang dapat membuat kode dalam bahasa ini sangat diminati.

Artikel ini akan menunjukkan kepada Anda cara menambahkan JavaScript ke HTML dalam dua langkah mudah . Kami juga akan membahas dasar-dasar JavaScript dan memeriksa banyak kegunaannya di dunia teknologi.

Apa itu JavaScript?

JavaScript (atau JS) adalah bahasa skrip atau pemrograman yang memungkinkan Anda menerapkan elemen dinamis dan interaktif pada laman web. JS juga digunakan untuk membuat aplikasi web dan game browser . Ini cukup serbaguna untuk berbagai aplikasi, termasuk server, kontrol perangkat keras, dan perangkat lunak.

JavaScript memfasilitasi interaksi antara browser web pengguna dan situs web yang dikunjungi pengguna. Semua browser web utama memiliki mesin JavaScript khusus untuk mengeksekusi kode JS di perangkat pengguna.  

Pada dasarnya, JavaScript mencegah halaman web menjadi statis dan memungkinkan pengembang menambahkan elemen dinamis dan interaktif ke halaman web. Beberapa contohnya termasuk menyisipkan animasi, audio, dan video ke dalam halaman web (dengan tombol stop, pause, dan play) dan secara otomatis menempatkan kursor teks ke dalam kotak pencarian saat memuat Google Penelusuran

Bersama dengan HTML dan CSS, JavaScript adalah bagian dari tiga teknologi inti yang diperlukan untuk membuat situs web. HTML (singkatan dari HyperText Markup Language) menyediakan struktur untuk konten web. Contohnya termasuk menentukan judul, tabel data, dan daftar poin berpoin.

CSS (Cascading Style Sheets) menerapkan gaya dan tata letak ke konten HTML. Contohnya termasuk mengatur latar belakang dan warna font, menstandarkan jarak antar elemen, dan menambahkan gambar latar belakang.     

Meskipun Java dan JavaScript memiliki sintaksis dan pustaka standar yang serupa, kedua bahasa pemrograman ini cukup berbeda—dengan Java sebagai bahasa OOP pemrograman . e. , berjalan di mesin virtual atau browser). Di sisi lain, JavaScript adalah bahasa OOP skrip (i. e. , hanya berjalan di browser).

Lihat entri blog penuh wawasan kami jika Anda ingin mempelajari lebih lanjut tentang JavaScript.

Untuk Apa JavaScript Digunakan?

Anda dapat menggunakan JavaScript untuk membuat situs web, game browser, dan aplikasi yang rumit. Anda juga dapat menggunakannya untuk menghubungkan server ke situs web dan aplikasi web. Banyak situs web dan aplikasi yang paling banyak digunakan di internet menggunakan JavaScript—termasuk Facebook, Netflix, Google, dan YouTube.

Banyak teknologi bermunculan dalam beberapa tahun terakhir untuk memanfaatkan kekuatan JavaScript. JS sekarang memiliki koleksi kerangka kerja yang luas yang dapat Anda gunakan untuk membuat aplikasi seluler dan web.  

Kerangka kerja adalah pustaka kode JS yang telah ditulis sebelumnya. Mereka berfungsi mirip dengan cetak biru dan membantu pengembang membangun aplikasi dan situs web dengan fungsionalitas yang lebih besar.  

Ini adalah tiga framework aplikasi JS yang paling populer.  

  • React, yang dapat Anda gunakan untuk membangun antarmuka pengguna untuk aplikasi web 
  • React Native, yang dapat Anda gunakan untuk membuat aplikasi seluler 
  • Simpul. js, yang memungkinkan komunikasi dua arah dengan server untuk pertukaran data 

JavaScript diperlukan untuk membuat halaman web dinamis dan interaktif. Dengan JS dimasukkan ke dalam coding mereka, developer dapat mengimplementasikan fitur-fitur berikut.

  • Tampilkan pembaruan konten yang tepat waktu dan relevan
  • Tampilkan peta interaktif
  • Sisipkan menu drop-down dan menu bergaya hamburger
  • Putar audio dan video
  • Memperbesar dan memperkecil gambar
  • Tambahkan grafik dan animasi 2D/3D
  • Tampilkan galeri gambar dalam format carousel
  • Sisipkan efek hover
  • Menampilkan dan menyembunyikan menu
  • Beri tahu pengguna tentang karakter yang tidak valid saat mengetik kata sandi

JS juga digunakan untuk membuat game dalam browser yang rumit. Beberapa game berbasis browser paling populer di dunia menggunakan JS, termasuk Angry Birds, Bejeweled, dan Tetris.  

Karena keserbagunaan dan keberadaannya sebagai alat pengembangan web, JavaScript tetap menjadi bahasa pemrograman yang paling banyak digunakan di kalangan pengembang, menurut Statista. Pada tahun 2021, hampir 65% developer menggunakan JavaScript. Terlebih lagi, 98% situs web menggunakan JS di sisi klien untuk menangani perilaku halaman web, menurut W3Techs.

Cara Menambahkan JavaScript ke HTML

Kita telah menjelajahi bagaimana HTML, CSS, dan JavaScript dibutuhkan untuk membuat halaman web yang fungsional dan dinamis. Metafora yang keren adalah menganggap situs web Anda sebagai kue tiga lapis—dengan HTML sebagai fondasi, CSS sebagai lapisan tengah, dan JavaScript sebagai lapisan atas.  

Anda pertama-tama menyusun konten Anda di halaman web dengan HTML, lalu menambahkan elemen gaya dan tata letak yang tepat dengan CSS. Selanjutnya, Anda perlu menambahkan fungsi dinamis dan interaktif dengan HTML

Ada dua cara untuk menambahkan JavaScript ke HTML . yang pertama adalah menyematkan kode JS sebaris ke dalam HTML , sedangkan yang kedua mengharuskan Anda untuk membuat file JS eksternal< . .

1. Sematkan Kode JavaScript Sebaris dalam HTML

Saat bekerja dengan file untuk internet, JS perlu dimuat dan dijalankan bersama markup HTML. Anda dapat melakukan ini sebaris dalam dokumen HTML. untuk melakukannya.

2. Buat File JavaScript Eksternal

Cara lain untuk memuat JS dan menjalankannya bersama markup HTML adalah dengan membuat file JS eksternal. Browser akan mengunduh file JS ini di samping dokumen HTML saat pengguna mengunjungi halaman web. untuk menyertakan JavaScript eksternal.

Cara Menyematkan Kode JavaScript Sebaris

Kode JavaScript dapat disematkan sebaris ke dalam dokumen HTML dengan menggunakan tag HTML khusus

</skrip>

</head>

<tubuh>

<h2>JavaScript Demo di Head<</h2>

 

<p id=”demo”>A</p>

<tombol ketik=”tombol” klik<=”myFunction()”>Try it</button>

</body>

</html>

Coba dan jalankan di editor HTML gratis W3Schools. Anda akan melihat bahwa itu memanggil fungsi ketika tombol "Try It" diklik.

Add Javascript in the Tags

Jika skrip Anda perlu dijalankan pada titik tertentu dalam tata letak halaman web Anda, Anda harus menyisipkannya pada titik di mana ia harus memanggil fungsi. Penempatan biasanya dalam bagian .

Dalam kode contoh dari W3School ini, fungsi JS ditempatkan di section of the HTML document:

<. DOCTYPE html>

<html>

<tubuh>

<h2>JavaScript Demo dalam Isi<</h2>

<p id=”demo”>A</p>

<tombol ketik=”tombol” klik<=”myFunction()”>Try it</button>

<skrip>

fungsi myFunction() {

  dokumen. getElementById(“demo”). innerHTML = “Paragraf diubah. ”;

}

</skrip>

</body>

</html>

Saat Anda menjalankan kode di editor HTML gratis W3Schools, Anda akan melihat fungsi yang dipanggil saat tombol "Cobalah" diklik.

Cara Memasukkan JavaScript Eksternal dalam HTML

Jika skrip Anda besar atau Anda perlu menyebarkannya ke beberapa laman web, biasanya Anda akan menambahkan kode JS ke satu atau beberapa file JavaScript, yang direferensikan dalam dokumen HTML.  

Menggunakan file JS terpisah memungkinkan pengembang memisahkan markup HTML dari kode JS, mencegah kebingungan. Itu juga membuat pemeliharaan berkelanjutan lebih mudah dan memungkinkan halaman web memuat lebih cepat saat menyimpan file JS ke dalam cache.  

Berikut adalah contoh skrip eksternal JS, seperti yang disediakan oleh W3School.

fungsi myFunction() {

  dokumen. getElementById(“demo”). innerHTML = “Paragraf diubah. ”;

}

Untuk menggunakan skrip eksternal ini, Anda harus menambahkan nama file skrip di atribut src (sumber) dari a .