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 . Tag HTML ini membungkus kode JS.
Tag dapat ditempatkan di section of your HTML or in the section. The placement entirely depends on when you want the JS code to load.
Add Javascript in the Tags
Kode JS dapat dimasukkan ke dalam bagian dokumen HTML. Anda melakukan ini untuk menjaga agar fungsi tetap terkandung dan jauh dari konten utama dokumen HTML Anda.
kode contoh dari W3Schools ini menunjukkan cara menambahkan tag into the HTML document’s section:
fungsi myFunction() {
dokumen. getElementById(“demo”). innerHTML = “Paragraf diubah. ”;
}
JavaScript Demo di Head