Apa itu JavaScript?

JavaScript adalah bahasa pemrograman dinamis yang digunakan untuk pengembangan web, dalam aplikasi web, untuk pengembangan game, dan banyak lagi. Ini memungkinkan Anda untuk menerapkan fitur dinamis pada halaman web yang tidak dapat dilakukan hanya dengan HTML dan CSS. Banyak browser menggunakan JavaScript sebagai bahasa skrip untuk melakukan hal-hal dinamis di web. Setiap kali Anda melihat menu tarik-turun klik-untuk-tampilkan, konten tambahan ditambahkan ke halaman, dan mengubah warna elemen secara dinamis pada halaman, untuk menyebutkan beberapa fitur, Anda melihat efek JavaScript.

Seperti Apa Tampilan Web Tanpa JavaScript?

Tanpa JavaScript, semua yang Anda miliki di web hanyalah HTML dan CSS. Ini saja membatasi Anda pada beberapa implementasi halaman web. 90% (jika tidak lebih) halaman web Anda akan statis, dan Anda hanya akan memiliki perubahan dinamis seperti animasi yang disediakan CSS.

Bagaimana JavaScript Membuat Hal-Hal Dinamis

HTML mendefinisikan struktur dokumen web Anda dan konten di dalamnya. CSS mendeklarasikan berbagai gaya untuk konten yang disediakan di dokumen web.

HTML dan CSS sering disebut bahasa markup daripada bahasa pemrograman, karena pada intinya mereka menyediakan markup untuk dokumen dengan sedikit dinamisme.

JavaScript, di sisi lain, adalah bahasa pemrograman dinamis yang mendukung perhitungan Matematika, memungkinkan Anda menambahkan konten HTML ke DOM secara dinamis, membuat deklarasi gaya dinamis, mengambil konten dari situs web lain, dan banyak lagi. Sebelum kita membahas bagaimana JavaScript melakukan semua hal ini, mari kita lihat contoh singkatnya. Di codepen, Anda akan melihat bahwa saat Anda mengetik di kolom input, teks akan ditampilkan di layar. Itu dimungkinkan oleh JavaScript. Anda tidak bisa mendapatkan ini dengan HTML, CSS, atau keduanya sekaligus.JavaScript dapat melakukan lebih dari apa yang dapat saya bahas dalam artikel ini. Tetapi untuk memulai dengan JS, kita akan melihat:

• cara menggunakan JavaScript di HTML
• tipe data
• variabel
• komentar
• fungsi

Cara Menggunakan JavaScript di HTML

Sama seperti CSS, JavaScript dapat digunakan dalam HTML dengan berbagai cara, seperti:

1. JavaScript sebaris

Di sini, Anda memiliki kode JavaScript dalam tag HTML di beberapa atribut khusus berbasis JS.

Misalnya, tag HTML memiliki atribut peristiwa yang memungkinkan Anda mengeksekusi beberapa kode sebaris saat peristiwa dipicu. Inilah yang saya maksud:

<button onclick="alert('You just clicked a button')">Click me!</button>

Ini adalah contoh JavaScript sebaris. Nilai dari onclickdapat berupa kalkulasi Kecocokan, tambahan dinamis pada DOM – kode JavaScript apa pun yang valid dengan sintaks.

2. JavaScript internal, dengan  script tag

Sama seperti styletag untuk deklarasi gaya dalam laman HTML, scripttag ada untuk JavaScript. Berikut cara penggunaannya:

<script>
	function(){
	    alert("I am inside a script tag")
	}
</script>

3. JavaScript eksternal

Anda mungkin ingin memiliki kode JavaScript di file yang berbeda. JavaScript eksternal memungkinkan ini. Untuk kasus penggunaan seperti itu, begini caranya:

<!-- index.html -->
<script src="./script.js"></script>

// script.js
alert("I am inside an external file");

Atribut srctag scriptmemungkinkan Anda menerapkan sumber untuk kode JavaScript. Referensi itu penting karena memberi tahu browser untuk juga mengambil konten script.js.

script.jsbisa dalam direktori yang sama dengan index.html, atau bisa didapat dari website lain. Untuk yang terakhir, Anda harus memberikan URL lengkap ( https://.../script.js).

Perhatikan .jsekstensinya? Itu adalah ekstensi untuk file JavaScript, seperti yang dimiliki HTML .html.

Sekarang kita telah melihat cara untuk menerapkan JavaScript ke HTML kita, mari kita lihat beberapa fitur JavaScript.

Tipe Data dalam JavaScript

Dalam JavaScript, data harus dari satu jenis atau lainnya. JavaScript perlu mengetahui hal ini agar mengetahui cara menggunakannya dengan data lain atau cara mengoperasikan data tersebut.

Berikut adalah tipe data dasar yang didukung JavaScript:

• Angka (misalnya, 6, 7, 8.9): tempat Anda dapat menerapkan operasi aritmatika (seperti penjumlahan) dan banyak lagi
• String (seperti "javascript", 'a long sentence', a short paragraph): apa pun yang ditemukan di antara tanda kutip tunggal ( '...'), tanda kutip ganda ( "...") dan backticks ( ...). Tidak ada perbedaan antara tanda kutip tunggal dan ganda, tetapi tanda kutip balik memiliki lebih banyak fitur, seperti:
  • variabel interpolasi dalam string, seperti: My name is ${name}. namedi sini adalah variabel, disuntikkan ke dalam string.
  • string multi baris. Dengan tanda kutip normal, Anda perlu menambahkan karakter escape seperti \nuntuk baris baru, tetapi tanda kutip memungkinkan Anda melanjutkan string di baris lain, seperti:

let str = `I am a
    multiline string`;

• Boolean (hanya bisa dua nilai: trueatau false): lebih seperti ya ( true) atau tidak ( false)
• Larik (misalnya, [1, 2, "hello", false]): sekelompok data (yang dapat bertipe apa pun, termasuk larik) yang dipisahkan dengan koma. Pengindeksan dimulai dari 0. Mengakses konten grup semacam itu bisa seperti ini: array[0], yang untuk contoh ini akan mengembalikan 1, karena ini adalah item pertama.
• Objek (misal {name: 'javascript', age: 5}): juga sekelompok data tetapi berbentuk key:valuepasangan. Itu keyharus berupa string, dan nilainya bisa berupa tipe apa pun termasuk objek lain. Mengakses konten grup dilakukan dengan kunci, misalnya obj.ageatau obj["age"]akan kembali5.
• Tidak terdefinisi (satu-satunya data yang didukung tipe ini adalah undefined): Data ini dapat diberikan ke variabel secara eksplisit, atau secara implisit (oleh JavaScript) jika variabel telah dideklarasikan tetapi tidak diberi nilai. Nanti di artikel ini, kita akan melihat deklarasi variabel dan penetapan nilai.
• Null (satu-satunya data yang didukung tipe ini adalah null): Null berarti tidak ada nilai. Itu memegang nilai, tetapi bukan nilai sebenarnya – lebih tepatnya, nol.
• Fungsi (misalnya, function(){ console.log("function") }): Fungsi adalah tipe data yang memanggil blok kode saat dipanggil. Lebih lanjut tentang fungsi nanti di artikel ini.

Tipe data JavaScript bisa sedikit rumit untuk dipahami. Anda mungkin pernah mendengar bahwa array dan fungsi juga merupakan objek, dan itu benar.

Memahami ini melibatkan pemahaman sifat dari prototipe JavaScript . Namun, pada tingkat dasar, ini adalah tipe data yang perlu Anda ketahui terlebih dahulu di JavaScript.

Variabel dalam JavaScript

Variabel adalah wadah untuk nilai dari semua tipe data. Mereka menyimpan nilai sedemikian rupa sehingga ketika variabel digunakan, JavaScript menggunakan nilai yang mereka wakili untuk operasi itu.

Variabel dapat dideklarasikan dan dapat diberi nilai. Saat Anda mendeklarasikan variabel, Anda melakukan ini:

let name;

Untuk yang di atas, namesudah dideklarasikan, tetapi belum ada nilainya.

Seperti yang Anda harapkan dari bagian tipe data, JavaScript secara otomatis menetapkan nilai undefinedto name. Jadi jika Anda mencoba menggunakan namedi mana saja, undefinedakan digunakan untuk operasi itu.

Inilah yang dimaksud dengan menetapkan nilai ke variabel:

let name;
name = "JavaScript";

Sekarang jika Anda menggunakan name, itu akan mewakili JavaScript.

Deklarasi dan penugasan dapat dilakukan pada satu baris seperti ini:

let name = "JavaScript";

Mengapa let? Anda mungkin bertanya pada diri sendiri, dan inilah alasannya: JavaScript mendukung tiga metode deklarasi variabel, yaitu:

• operator var: ini sudah dengan JavaScript sejak awal. Anda dapat mendeklarasikan variabel dan memberikan nilai padanya yang dapat diubah nanti dalam kode. Inilah yang saya maksud:

var name = "JavaScript";
name = "Language";

• operator let: ini juga sangat mirip dengan var– mendeklarasikan dan menetapkan nilai ke variabel yang dapat diubah nanti dalam kode. Perbedaan utama antara operator-operator ini adalah bahwa mengerek varvariabel tersebut, sementara lettidak mengerek. Konsep hoisting dapat dijelaskan secara singkat dengan kode berikut:

function print() {
	console.log(name);
	console.log(age);
	var name = "JavaScript";
	let age = 5;
}

print();

Saat memanggil printfungsi ( print()), yang pertama console.logmencetak undefinedsementara yang kedua console.logmelempar kesalahan yang “Tidak dapat diakses agesebelum inisialisasi”.

Ini karena namedeklarasi variabel diangkat (diangkat) ke atas fungsi dan penugasan untuk variabel tetap pada baris yang sama sementara agedeklarasi dan penugasan tetap pada baris yang sama.

Beginilah cara kode di atas dikompilasi:

function print() {
	var name;
	console.log(name);
	console.log(age);
	name = "JavaScript";
	let age = 5;
}

print();

Masalah hoist dapat terjadi secara tidak terduga, dan itulah mengapa Anda harus letmenggunakan var.

• operator const: ini juga tidak mengangkat variabel, tetapi melakukan satu hal lagi: memastikan bahwa variabel tidak dapat diberi nilai lain selain dari apa yang ditugaskan selama inisialisasi.

Sebagai contoh:

let name = "JavaScript"
name = "Language" // no errors

const age = 5
age = 6 // error, cannot reassign variable

Sumber  : www.freecodecamp.org