Panduan Dasar Belajar JavaScript

Febri Hidayan Komentar

Panduan Dasar Belajar JavaScript

Pada setiap pembelajaran bahasa pemograman kita diharuskan, untuk melalui panduan dasar belajar bahasa pemograman apapun itu. Belajar JavaScript sangatlah mudah apabila kita tahu dasar penggunaannya dan cara menjalankannya. Maka dengan ini kita harus mengetahui beberapa tahapan berikut ini. Javascript banyak memiliki manfaat seperti mengubah konten HTML, mengubah nilai atribut dan bahkan memberikan atribut.

Baca juga: Belajar JavaScript Untuk Pemula

Meletakan Kode JavaScript

Ada beberapa cara untuk meletakkan JavaScript pada HTML ataupun menyisihkannya.

Tag <script>

Dalam HTML kode JavaScript harus di masukan antara tag <script> dan </script>.

Contohnya:

Tag <script>
<script>
	document.getElementById("demo").innerHTML = "My First JavaScript";
</script>

Pada JavaScript lama dapat menggunakan atribut type: <script type = “text / javascript”>. Atribut type tidak lagi diperlukan. JavaScript adalah bahasa skrip default dalam HTML.

Catatan: apabila kita membuat file dengan ekstensi .js maka kita tidak perlu tag <script>.

JavaScript Tag <head>

Dalam contoh ini, function JavaScript ditempatkan di bagian <head> dari halaman HTML. Fungsi dipanggil ketika sebuah tombol button diklik:

Tag <head>
<!DOCTYPE html><html><head><script>function myFunction() {document.getElementById("demo").innerHTML = "paragraf kedua";}</script></head><body><h1>halaman web</h1><p id="demo">paragraf utama</p><button type="button" onclick="myFunction()">ganti</button></body></html>

JavaScript Tag <body>

Dalam contoh ini, function JavaScript ditempatkan di bagian <body> dari halaman HTML. Fungsi dipanggil ketika sebuah tombol button diklik:

Tag <body>
<!DOCTYPE html><html><body><h1>halaman utama</h1><p id="demo">paragraf pertama</p><button type="button" onclick="myFunction()">ganti</button><script>function myFunction() {document.getElementById("demo").innerHTML = "paragraf kedua";}</script></body></html>

Catatan: Menempatkan skrip di bagian bawah elemen <body> dapat meningkatkan kecepatan tampilan, karena interpretasi skrip memperlambat tampilan halaman web.

JavaScript Eksternal

JavaScript juga dapat digunakan di file eksternal. Skrip eksternal lebih praktis dan lebih mudah ketika kode yang sama digunakan di banyak halaman web yang berbeda.
File JavaScript memiliki ekstensi file .js .
Untuk menggunakan skrip eksternal, letakkan nama file skrip di atribut src (source) dari tag <script>:

Cara Eksternal JavaScript
<script src="contoh.js"></script>

Kita dapat menempatkan referensi skrip eksternal di dalam <head> ataupun <body> yang sesuai bagi kita, tetapi umumnya di letakan di bagian tag <body>. Script akan berperilaku seolah-olah itu terletak persis di mana tag <script> berada.

Catatan: Skrip eksternal tidak boleh berisi <script>.

Beberapa keuntungan JavaScript eksternal

Menempatkan skrip dalam file eksternal memiliki beberapa keunggulan:

  • Ini memisahkan HTML dan kode.
  • Itu membuat HTML dan JavaScript lebih mudah dibaca dan dipelihara.
  • File JavaScript yang di-cache dapat mempercepat pemuatan halaman.

Untuk menambahkan beberapa file skrip ke satu halaman - gunakan beberapa tag skrip:

<script src="contoh1.js">
</script><script src="contoh2.js"></script>

Referensi Eksternal

Skrip eksternal dapat dirujuk dengan URL lengkap atau dengan path relatif ke halaman web saat ini.
Contoh ini menggunakan URL lengkap untuk menautkan ke skrip:

<script src="https://www.domain.com/js/contoh.js"></script>

Contoh ini menggunakan skrip yang terletak di folder tertentu di situs web saat ini:

<script src="/js/contoh.js"></script>

Contoh ini menghubungkan ke skrip yang terletak di folder yang sama dengan halaman saat ini:

<script src="contoh.js"></script>

Baca juga: Belajar Dasar HTML5

Output JavaScript

Ada beberapa cara untuk menampilkan hasil dari JavaScript, seperti halnya dibawah ini:

  • innerHTML yaitu menulis menjadi elemen HTML.
  • write() yaitu menulis ke dalam output HTML.
  • alert() yaitu menulis ke dalam tampilan peringatan.
  • log() yaitu menulis ke konsol web browser.

Menggunakan innerHTML

Untuk mengakses elemen HTML, JavaScript dapat menggunakan metode document.getElementById(id). Atribut id mendefinisikan elemen HTML. Properti innerHTML mendefinisikan konten HTML:

innerHTML
<!DOCTYPE html><html><body><h1>Halaman Web</h1><p>Contoh paragraf isi</p><p id="demo"></p><script>document.getElementById("demo").innerHTML = 5 + 6;</script></body></html>

Catatan: Mengubah properti innerHTML dari elemen HTML adalah cara umum untuk menampilkan data dalam HTML.

Menggunakan document.write()

Untuk tujuan pengujian, lebih mudah menggunakan document.write():

document.write()
<!DOCTYPE html><html><body><h1>Halaman Web</h1><p>Contoh paragraf isi</p><script>document.write(5 + 6);</script></body></html>

Peringatan: Menggunakan document.write() setelah dokumen HTML dimuat, akan menghapus semua HTML yang ada:

<!DOCTYPE html><html><body><h1>Halaman Web</h1><p>Contoh paragraf isi</p><button type="button" onclick="document.write(5 + 6)">ganti</button></body></html>

Catatan: Metode document.write() seharusnya hanya digunakan untuk pengujian.

Menggunakan window.alert()

Kita dapat menggunakan kotak peringatan untuk menampilkan data:

window.alert()
<!DOCTYPE html><html><body><h1>Halaman Web</h1><p>Contoh paragraf isi</p><script>window.alert(5 + 6);</script></body></html>

Menggunakan console.log()

Untuk keperluan debugging, kita dapat menggunakan metode console.log() untuk menampilkan data.

Catatan: kita akan belajar lebih banyak tentang debugging pada bagian konsol.

console.log()
<!DOCTYPE html><html><body><script>console.log(5 + 6);</script></body></html>

Sintaks JavaScript

JavaScript memiliki sebuah aturan dalam setiap sintaks dan bagaimana program JavaScript dibuat:

Sintaks JavaScript
var x, y, z; // Bagaimana cara mendeklarasikan variabel
x = 5; y = 6; // Bagaimana cara menetapkan nilai
z = x + y; //Bagaimana cara menghitung nilai

Nilai JavaScript

Sintaks JavaScript mendefinisikan dua jenis nilai, yaitu nilai tetap dan nilai variabel. Nilai tetap disebut dengan literal dan nilai variabel disebut dengan variabel.

Literal JavaScript

Aturan paling penting untuk menulis nilai tetap adalah angka ditulis dengan atau tanpa desimal:

Nilai Tetap
10.50
1001

String adalah teks, ditulis dalam tanda kutip ganda atau tunggal:

String Ganda dan Tunggal
"Dhika Putra"
'Dhika Putra'

Variabel JavaScript

Dalam bahasa pemrograman, variabel digunakan untuk menyimpan nilai data. JavaScript menggunakan kata kunci var untuk mendeklarasikan suatu variabel. Tanda sama (=) digunakan untuk menetapkan nilai ke variabel. Dalam contoh ini, x didefinisikan sebagai variabel. Kemudian, x diberikan nilai 6:

Mendefinisikan Variabel
var x;
x = 6;

Operator JavaScript

JavaScript menggunakan operator aritmatika ( + - * / ) untuk menghitung nilai:

Operator Aritmatika
(5 + 6) * 10

JavaScript menggunakan operator penugasan ( = ) untuk menetapkan nilai ke variabel:

Operator Penugasan
var x, y;
x = 5;
y = 6;

Ekspresi JavaScript

Ekspresi adalah kombinasi dari nilai, variabel, dan operator, yang menghitung nilai.

Perhitungannya disebut evaluasi.
Misalnya, 5 * 10 mengevaluasi hingga 50:

5 * 10

Ekspresi juga dapat berisi nilai variabel:

x * 10

Nilai bisa dari berbagai jenis, seperti angka dan string.
Misalnya, “Dhika” + “” + “Putra”, dievaluasi menjadi “Dhika Putra”:

"Dhika" + " " + "Putra"

Kata kunci JavaScript

Kata kunci JavaScript digunakan untuk mengidentifikasi tindakan yang harus dilakukan.

Kata kunci var memberi tahu browser untuk membuat variabel:

var x, y;
x = 5 + 6;
y = x * 10;

Komentar JavaScript

Tidak semua pernyataan JavaScript “dieksekusi”, apabila suatu skrip diberikan komentar.

Kode setelah garis miring ganda // atau antara /* dan */ diperlakukan sebagai komentar.

Komentar diabaikan, dan tidak akan dieksekusi:

var x = 5;   // akan dieksekusi
// var x = 6;   TIDAK akan dieksekusi

Kita akan belajar lebih banyak tentang komentar di tutorial selanjutnya.

Pengidentifikasi JavaScript

Pengidentifikasi adalah nama. Dalam JavaScript, pengidentifikasi digunakan untuk memberi nama variabel (dan kata kunci, dan fungsi, dan label). Aturan untuk nama resmi hampir sama di sebagian besar bahasa pemrograman. Dalam JavaScript, karakter pertama harus berupa huruf, atau garis bawah (_), atau tanda dolar ($).
Karakter selanjutnya dapat berupa huruf, angka, garis bawah, atau tanda dolar. Angka tidak diizinkan sebagai karakter pertama. Dengan cara ini JavaScript dapat dengan mudah membedakan pengidentifikasi dari angka.
JavaScript adalah Huruf Besar-Kecil
Semua pengidentifikasi JavaScript peka huruf besar-kecil.

Variabel lastName dan lastname , adalah dua variabel yang berbeda:

var lastname, lastName;
lastName = "Febri";
lastname = "Hidayan";

JavaScript tidak menafsirkan VAR atau Var sebagai kata kunci var.

Kasus JavaScript dan Unta

Secara historis, programmer telah menggunakan berbagai cara untuk menggabungkan beberapa kata menjadi satu nama variabel:
Tanda hubung:
nama depan, nama belakang, kartu master, antar kota.
Tanda hubung tidak diizinkan dalam JavaScript. Mereka dicadangkan untuk pengurangan.
Menggarisbawahi:
first_name, last_name, master_card, inter_city.
Casing Unta Atas (Pascal Case):
FirstName, LastName, MasterCard, InterCity.
Kasing Unta Bawah:
Programmer JavaScript cenderung menggunakan case unta yang dimulai dengan huruf kecil:
firstName, lastName, masterCard, interCity.

Baca juga: Elemen Yang Dihapus Pada HTML5

Komentar Pada JavaScript

Komentar JavaScript dapat digunakan untuk menjelaskan kode JavaScript, dan membuatnya lebih mudah dibaca. Komentar JavaScript juga dapat digunakan untuk mencegah eksekusi, saat menguji kode alternatif.

Single Line Komentar

Komentar satu baris dimulai dengan // .Teks apa pun antara // dan akhir baris akan diabaikan oleh JavaScript (tidak akan dieksekusi).

Contoh ini menggunakan komentar satu baris sebelum setiap baris kode:

Single Line Komentar
// Change heading:
document.getElementById("myH").innerHTML = "My First Page";
// Change paragraph:
document.getElementById("myP").innerHTML = "My first paragraph.";

Contoh ini menggunakan komentar satu baris di akhir setiap baris untuk menjelaskan kode:

Single Line Komentar
var x = 5; // Variabel x memberikan nilai 5
y = x + 2; // Deklarasi y, memberikan x + 2

Multi Line Komentar

Komentar multi-baris dimulai dengan /* dan diakhiri dengan */ .Teks apa pun antara /* dan */ akan diabaikan oleh JavaScript.
Contoh ini menggunakan komentar multi-baris (blok komentar) untuk menjelaskan kode:

Multi Line Komentar
/ * Kode di bawah ini akan mengubah judul dengan id = "demo"
dan paragraf dengan id = "demo" di halaman website saya: * /
document.getElementById("demo").innerHTML = "Halaman Judul";
document.getElementById("demo").innerHTML = "Paragraf artikel saya.";

Catatan: Paling umum menggunakan komentar satu baris. Blok komentar sering digunakan untuk dokumentasi formal.

Komentar Untuk Mencegah Eksekusi

Menggunakan komentar untuk mencegah eksekusi kode cocok untuk pengujian kode. Menambahkan // di depan baris kode mengubah baris kode dari baris yang dapat dieksekusi ke komentar.

Contoh ini menggunakan // untuk mencegah eksekusi salah satu dari baris kode:

Mencengah Eksekusi Script - Komentar
//document.getElementById("home").innerHTML = "halaman web";
document.getElementById("article").innerHTML = "isi paragraf web.";

Contoh ini menggunakan blok komentar untuk mencegah eksekusi beberapa baris:

Mecegah Eksekusi Script - Komentar
/*
document.getElementById("home").innerHTML = "halaman web";
document.getElementById("article").innerHTML = “isi paragraf web.";
*/

Membuat Variabel JavaScript

Variabel JavaScript adalah wadah untuk menyimpan nilai data.
Dalam contoh ini, x , y , dan z , adalah variabel:

Variabel JavaScript
var x = 5;
var y = 6;
var z = x + y;

Dari contoh di atas, Anda dapat mengharapkan:

  • x menyimpan nilai 5
  • y menyimpan nilai 6
  • z menyimpan nilai 11

Banyak Suka Aljabar

Dalam contoh ini, price1 , price2 , dan total , adalah variabel:

var price1 = 5;
var price2 = 6;
var total = price1 + price2;

Dalam pemrograman, seperti halnya dalam aljabar, kami menggunakan variabel (seperti price1) untuk menyimpan nilai.
Dalam pemrograman, seperti halnya dalam aljabar, kami menggunakan variabel dalam ekspresi (total = price1 + price2).
Dari contoh di atas, Anda dapat menghitung total menjadi 11.
Catatan: variabel JavaScript adalah wadah untuk menyimpan nilai data apa saja, selama tidak melanggar ketentuan variabel.

Pengidentifikasi JavaScript

Semua variabel JavaScript harus diidentifikasi dengan nama unik. Nama-nama unik ini disebut pengidentifikasi. Pengidentifikasi dapat berupa nama pendek (seperti x dan y) atau lebih banyak nama deskriptif (usia, jumlah, total Volume).
Aturan umum untuk membuat nama untuk variabel (pengidentifikasi unik) adalah:

  • Nama dapat berisi huruf, angka, garis bawah, dan tanda dolar.
  • Nama harus dimulai dengan huruf.
  • Nama juga dapat dimulai dengan $ dan _ (tetapi kami tidak akan menggunakannya dalam tutorial ini).
  • Nama-nama adalah case-sensitive (y dan Y adalah variabel yang berbeda).
  • Kata-kata yang dicadangkan (seperti kata kunci JavaScript) tidak dapat digunakan sebagai nama.

Catatan: Pengidentifikasi JavaScript peka huruf besar-kecil.

Operator Penugasan

Dalam JavaScript, tanda sama dengan ( = ) adalah operator “penugasan”, bukan operator “sama dengan”.
Ini berbeda dari aljabar. Berikut ini tidak masuk akal dalam aljabar:

x = x + 5

Namun, dalam JavaScript, ini masuk akal: ia menetapkan nilai x + 5 hingga x.

(Ini menghitung nilai x + 5 dan menempatkan hasilnya ke x. Nilai x bertambah sebesar 5.)

Catatan: Operator “sama dengan” ditulis seperti == dalam JavaScript.

Jenis Data JavaScript

Variabel JavaScript dapat menampung angka seperti 100 dan nilai teks seperti “Febri Hidayan”. Dalam pemrograman, nilai teks disebut string teks. JavaScript dapat menangani banyak jenis data, tetapi untuk saat ini, pikirkan saja angka dan string. String ditulis dalam tanda kutip ganda atau tunggal. Angka ditulis tanpa tanda kutip. Jika Anda memasukkan angka dalam tanda kutip, itu akan diperlakukan sebagai string teks.

Jenis Data JavaScript
var pi = 3.14;
var person = "Febri Hidayan";
var answer = 'Selamat pagi dunia!';

Mendeklarasikan (Membuat) Variabel JavaScript

Membuat variabel dalam JavaScript disebut “mendeklarasikan” variabel. Anda mendeklarasikan variabel JavaScript dengan kata kunci var:

var carName;

Setelah deklarasi, variabel tidak memiliki nilai (secara teknis memiliki nilai undefined).
Untuk menetapkan nilai ke variabel, gunakan tanda sama dengan:

carName = "Toyota";

Anda juga dapat menetapkan nilai ke variabel saat Anda mendeklarasikannya:

var carName = "Toyota";

Pada contoh di bawah ini, kami membuat variabel bernama carName dan menetapkan nilai “Toyota” untuknya.
Lalu kami “menampilkan” nilai di dalam paragraf HTML dengan id = “demo”:

<p id="demo"></p>
<script>
	var carName = "Toyota";
	document.getElementById("demo").innerHTML = carName;
</script>

Catatan: Ini adalah praktik pemrograman yang baik untuk mendeklarasikan semua variabel di awal skrip.

Satu Pernyataan, Banyak Variabel

Anda dapat mendeklarasikan banyak variabel dalam satu pernyataan.
Mulai pernyataan dengan var dan pisahkan variabel dengan koma:

var person = "Febri Hidayan", carName = "Toyota", price = 200;

Deklarasi dapat menjangkau beberapa baris:

var person = "Febri Hidayan",
carName = "Toyota",
price = 200;

Nilai = tidak ditentukan

Dalam program komputer, variabel sering dideklarasikan tanpa nilai. Nilai dapat berupa sesuatu yang harus dihitung, atau sesuatu yang akan disediakan nanti, seperti input pengguna.
Variabel yang dideklarasikan tanpa nilai akan memiliki nilai yang undefined (tidak diketahui).
Variabel carName akan memiliki nilai yang undefined setelah eksekusi pernyataan ini:

var carName;

Menyatakan Ulang Variabel JavaScript

Jika kita mendeklarasikan ulang variabel JavaScript, itu tidak akan kehilangan nilainya.
Variabel carName akan tetap memiliki nilai “Volvo” setelah eksekusi pernyataan ini:

var carName = "Volvo";
var carName;

Aritmatika JavaScript

Seperti halnya aljabar, kita dapat melakukan aritmatika dengan variabel JavaScript, menggunakan operator seperti = dan + :

var x = 5 + 2 + 3;

Kita juga dapat melakukan menambahkan string, tetapi string akan digabungkan dengan cara ini:

var x = "Dian" + " " + "Dhika";

Coba juga hal ini:

var x = "5" + 2 + 3;

Catatan: Jika kita memasukkan angka dalam tanda kutip, sisa angka akan diperlakukan sebagai string, dan digabungkan.

Sekarang coba ini:

var x = 2 + 3 + "5";
Category JavaScriptTags Dasar JavaScript Web Programming

Mari Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *