Dasar-dasar JavaScript. Bagian 2 Kursus JavaScript dari Pemula hingga Mahir

Ini adalah bagian kedua dari seri pos blog JavaScript yang akan membawa Anda dari pemula hingga mahir. Pada akhir seri ini, Anda akan mengetahui semua dasar yang perlu Anda ketahui untuk mulai coding di JavaScript. Tanpa basa-basi lagi, mari kita mulai dengan tutorial kedua.

Dasar-dasar JavaScript – daftar isi:

1. Dasar-dasar JavaScript
2. Eksekusi baris demi baris
3. Dua cara untuk mengakhiri instruksi
4. Komentar

Dalam pos blog ini, kita akan melanjutkan dari tempat kita tinggalkan di pos blog pertama. Pada tahap ini, Anda seharusnya sudah membuka browser Google Chrome Anda dan lebih spesifik lagi, membuka konsol JavaScript Anda. Jika karena suatu alasan Anda menutupnya, ini adalah waktu yang baik untuk membukanya kembali. Mari kita mulai belajar dasar-dasar JavaScript.

Jika Anda menggunakan Mac, pintasan keyboard untuk membuka konsol adalah dengan menekan “option + command + J”, setelah Anda membuka Chrome. Jika Anda menggunakan perangkat Windows, Anda dapat menggunakan pintasan keyboard “Control + Shift + J” untuk membuka Konsol JavaScript, setelah Anda membuka Chrome. Atau Anda juga bisa pergi ke menu di bagian atas dan pergi ke View -> Developer -> JavaScript Console.

Dasar-dasar JavaScript

JavaScript, seperti semua bahasa pemrograman lainnya, adalah bahasa yang Anda gunakan untuk berkomunikasi dengan komputer. Seperti bahasa alami memiliki tata bahasa dan kata-kata yang dikenal untuk membentuk kalimat yang benar, bahasa pemrograman juga memiliki aturan tertentu yang harus Anda ikuti untuk berkomunikasi secara efektif dengan komputer.

Misalnya, kata-kata tertentu memiliki arti tertentu bagi mesin JavaScript yang menjalankan kode kita, seperti kata kunci “alert” yang kita gunakan di tutorial sebelumnya memiliki arti menampilkan peringatan kepada pengguna dengan kata-kata spesifik yang mereka masukkan di dalam tanda kurung tepat setelahnya. Dalam kasus kita, kita menulis “Hello, World!” sehingga kita mendapatkan peringatan yang mengatakan “Hello, World!”.

Ada juga kata kunci yang dicadangkan lainnya dalam JavaScript yang harus kita ketahui agar kita dapat berkomunikasi secara efektif dengan komputer menggunakan kata-kata dan tata bahasa yang tepat. Juga, seperti tata bahasa yang kita miliki dalam bahasa alami, ada juga tata bahasa dalam bahasa pemrograman. Tata bahasa itu biasanya disebut “sintaks” dalam bahasa pemrograman dan JavaScript tidak terkecuali. Itulah sebabnya penting untuk memahami kata kunci utama dan tata bahasa yang kita miliki dalam JavaScript saat kita mulai belajar tentang dasar-dasar JavaScript. Mari kita lihat beberapa hal utama yang harus kita ketahui tentang JavaScript.

Eksekusi baris demi baris

Ketika datang ke dasar-dasar JavaScript, salah satu hal pertama yang harus Anda ketahui adalah bahwa kode yang Anda tulis akan dieksekusi baris demi baris, dari atas ke bawah. Gaya eksekusi kode ini juga disebut sebagai JavaScript sebagai “bahasa pemrograman yang diinterpretasikan”.

Di sisi lain, beberapa bahasa pemrograman adalah “bahasa pemrograman yang dikompilasi”. Beberapa contoh bahasa yang dikompilasi adalah: C, C++, C#, Swift, Java, dan seterusnya. Perbedaan utama adalah bahwa dengan bahasa pemrograman yang dikompilasi, semua kode yang Anda tulis akan “dikompilasi” dan akan dieksekusi dalam satu kesatuan oleh komputer. Itulah juga mengapa bisa lebih sulit untuk mulai belajar bahasa pemrograman yang dikompilasi karena bisa lebih sulit untuk menemukan di mana Anda membuat kesalahan dalam program Anda.

Beberapa contoh bahasa pemrograman yang diinterpretasikan adalah JavaScript, Python, Bash, dan Matlab. Dengan bahasa pemrograman yang diinterpretasikan, Anda memiliki keuntungan inheren untuk melihat baris mana yang Anda buat kesalahan, misalnya melupakan titik koma atau tidak mencocokkan tanda kurung dalam kode Anda. Memiliki karakteristik ini mungkin tidak membuat perbedaan besar dalam aplikasi tertentu, tetapi ketika kita mencoba memuat situs web dengan koneksi internet yang lambat, Anda lebih suka setiap baris JavaScript dieksekusi secepat mungkin.

Dua cara untuk mengakhiri instruksi

Sebuah program komputer pada akhirnya adalah sekumpulan instruksi untuk komputer. Tetapi di mana satu program berakhir dan di mana instruksi berikutnya dimulai? Ada berbagai pendekatan untuk masalah ini. JavaScript menggunakan dua hal utama, titik koma dan tanda kurung.

Tergantung pada jenis instruksi yang kita tulis, kita umumnya akan menggunakan salah satu untuk mengakhiri atau mengemas sekumpulan instruksi. Kita akan menggunakan jenis tanda kurung yang berbeda untuk fungsionalitas dan tipe data yang berbeda. Misalnya, dalam kode alert(“Hello, World”); yang sebelumnya kita eksekusi, tanda kurung yang mengelilingi tulisan hello world memberi tahu komputer apa yang harus dikatakan oleh peringatan, dan titik koma di akhir instruksi memberi tahu komputer bahwa instruksi ini berakhir di sini, Anda dapat melanjutkan ke instruksi berikutnya. Ini sangat mirip dengan bagaimana kita menggunakan titik “.” untuk mengakhiri kalimat dalam bahasa Inggris.

Komentar

Menambahkan komentar ke kode adalah bagian penting dari pemrograman. Mungkin mudah untuk memahami kode yang Anda tulis saat Anda menulisnya, tetapi tergantung pada kompleksitas kode, Anda mungkin memiliki sedikit ide enam bulan kemudian, ketika Anda kembali ke kode tersebut.

Menambahkan komentar tidak hanya membuatnya jauh lebih mudah untuk memahami kode Anda untuk diri Anda di masa depan, tetapi juga membuatnya jauh lebih mudah bagi siapa pun yang Anda ajak bekerja untuk memahami kode tersebut juga. Ini juga dapat membantu Anda mengembangkan pemahaman yang lebih baik tentang masalah yang Anda kerjakan, karena biasanya jauh lebih mudah untuk menyelesaikan masalah dengan membaginya menjadi potongan-potongan kecil. Bagian kode Anda yang dikomentari akan diabaikan oleh interpreter dan tidak akan dieksekusi.

Ada dua cara Anda dapat menambahkan komentar di JavaScript. Yang pertama adalah menambahkan komentar “satu baris” sederhana dengan dua garis miring ke depan seperti ini:

// ini adalah komentar

Dengan cara ini, apa pun yang Anda tulis setelah dua garis miring ke depan akan diabaikan pada baris tertentu yang Anda letakkan garis miring ke depan. Anda dapat mengulangi ini sebanyak yang Anda mau untuk memiliki beberapa baris yang ditutupi dengan komentar seperti ini:

// ini adalah komentar.
// ini adalah komentar lainnya.
// Anda dapat terus mengomentari seperti ini.

Alasan lain mengapa kita menggunakan komentar adalah untuk mengomentari sepotong kode untuk bereksperimen dengan kode. Misalnya, Anda dapat menulis fungsionalitas yang sama dengan beberapa cara dan Anda mungkin ingin mengomentari satu versi dari kode yang sama untuk membandingkan kinerja atau hasil individu mereka. Mari kita lihat itu dengan contoh juga.

Silakan salin dan tempel kode berikut ke konsol JavaScript yang Anda buka di Chrome.

// sapa pengguna
alert("Hello, User!");
alert("Hi, User!");

Jika Anda ingin latihan ekstra menulis seluruh kode sendiri, Anda juga bisa melakukannya. Satu hal yang harus Anda ketahui tentang menulis beberapa baris kode di konsol adalah bahwa untuk berpindah ke baris berikutnya tanpa mengeksekusinya, Anda dapat menekan “shift + enter” untuk melakukannya. Jika tidak, setelah menulis satu baris kode, jika Anda hanya menekan enter, itu akan menjalankan baris kode tersebut. Dalam contoh ini, ini bukan masalah besar dan sebenarnya baik untuk mengeksekusinya baris demi baris juga, karena kita memiliki contoh sederhana yang juga dapat bekerja dalam gaya itu.

Setelah menyalin dan menempel atau menulis kode sendiri, silakan tekan “enter” untuk menjalankan kode. Hasilnya harus memberi Anda dua peringatan terpisah. Juga untuk menutup peringatan, Anda dapat mengklik “OK”, dalam hal ini mereka tidak akan melakukan apa pun karena ini adalah peringatan sederhana dan tidak memicu apa pun setelah menampilkan pesan yang ingin kita tampilkan.

Ketika kita mengeksekusi kode seperti ini, kita mengeksekusi fungsionalitas yang sama dua kali. Tetapi apa yang harus Anda lakukan jika Anda ingin melihat hanya satu implementasi pada satu waktu? Nah, Anda tahu persis apa yang harus dilakukan dalam hal ini karena kita sudah membicarakannya. Silakan komentari salah satu baris setelah menempel atau menulis kode sehingga hanya implementasi kedua dari “Hi, User!” yang dieksekusi.

Setelah Anda menyelesaikan tantangan, atau jika Anda terjebak selama tantangan, Anda dapat melihat kode solusi untuk tantangan di bawah ini. Sebelum melihat solusi, saya selalu sangat merekomendasikan untuk mencobanya sendiri karena Anda akan belajar dengan baik ketika Anda benar-benar mempraktikkannya. Jika Anda berhasil menyelesaikan tantangan, Anda seharusnya melihat layar seperti ini:

Perhatikan bahwa ketika Anda mengomentari satu baris kode, itu berubah menjadi warna yang sama dengan baris yang dikomentari sebelumnya. Perbedaan warna ini tidak membuat perbedaan bagi komputer, tetapi ini adalah fitur yang cukup membantu bagi kita saat menulis kode. Dengan cara ini, jauh lebih mudah jika Anda secara tidak sengaja mengomentari satu baris kode karena warnanya akan membuatnya jelas.

Cara lain untuk mengomentari kode adalah dengan menggunakan garis miring dan karakter asterisk. Dengan cara ini kita dapat membuat komentar satu baris atau komentar multiline dalam kode kita.

/* komentar satu baris */
/* komentar dimulai ketika kita meletakkan garis miring dan asterisk
dan area yang dikomentari berakhir
ketika kita menutup komentar dengan asterisk dan garis miring
seperti ini */

Sekarang Anda tahu dasar-dasar JavaScript. Di tutorial berikutnya, kita akan melihat konsep yang sangat umum dalam pemrograman yang disebut “variabel” bersama dengan tipe data dasar dalam JavaScript.