Panduan JavaScript, Bagian 1: Program Pertama, Fitur Bahasa, Standar

Kami baru-baru ini melakukan survei tentang kelayakan menerjemahkan panduan JavaScript ini . Ternyata, sekitar 90% dari mereka yang memilih bereaksi positif terhadap ide ini. Karena itu, hari ini kami menerbitkan bagian pertama dari terjemahan.



Panduan ini, seperti yang dikandung oleh penulis, dirancang untuk mereka yang sudah sedikit terbiasa dengan JavaScript dan ingin menempatkan pengetahuan mereka dalam rangka dan juga mempelajari sesuatu yang baru tentang bahasa tersebut. Kami memutuskan untuk memperluas pemirsa materi ini sedikit, untuk memasukkan mereka yang sama sekali tidak tahu apa-apa tentang JS, dan memulainya dengan menulis beberapa versi "Halo, dunia!".

→ Bagian 1: program pertama, fitur bahasa, standar
→ Bagian 2: gaya kode dan struktur program
→ Bagian 3: variabel, tipe data, ekspresi, objek
→ Bagian 4: fitur
→ Bagian 5: array dan loop
→ Bagian 6: pengecualian, titik koma, literal wildcard
→ Bagian 7: mode ketat, kata kunci ini, acara, modul, perhitungan matematis
→ Bagian 8: Tinjauan Umum Fitur ES6
→ Bagian 9: Gambaran Umum Standar ES7, ES8, dan ES9

Halo dunia!

Program, yang secara tradisional disebut " Halo, dunia! "Sangat sederhana. Ini menampilkan suatu tempat frase "Halo, dunia!", Atau yang serupa lainnya, melalui bahasa tertentu.

JavaScript adalah bahasa tempat program dapat dijalankan di lingkungan yang berbeda. Dalam kasus kami, kami berbicara tentang browser dan platform server Node.js. Jika sejauh ini Anda belum menulis satu baris kode pun di JS dan membaca teks ini di browser, di komputer desktop, itu berarti Anda benar-benar dalam hitungan detik dari program JavaScript pertama Anda.

Untuk menulisnya, jika Anda menggunakan Google Chrome, buka menu browser dan pilih perintah > di dalamnya. Jendela browser akan dibagi menjadi dua bagian. Di salah satu dari mereka sebuah halaman akan terlihat, di panel lain dengan alat pengembang akan terbuka berisi beberapa bookmark. Kami tertarik pada tab Console . Klik itu. Jangan memperhatikan apa yang mungkin sudah ada di konsol (Anda dapat menggunakan kombinasi tombol Ctrl + L untuk menghapusnya). Kami sekarang tertarik untuk mengundang konsol. Di sinilah Anda dapat memasukkan kode JavaScript yang dijalankan dengan menekan tombol Enter . Mari masukkan yang berikut ini ke konsol:

 console.log("Hello, world!") 

Teks ini dapat dimasukkan dari keyboard, Anda dapat menyalin dan menempelkannya ke konsol. Hasilnya akan sama, tetapi jika Anda belajar untuk memprogram, Anda disarankan untuk memasukkan sendiri teks dari program, dan tidak menyalinnya.

Setelah teks program ada di konsol, tekan Enter .

Jika semuanya dilakukan dengan benar, teks Hello, world! Akan muncul di bawah baris ini Hello, world! . Jangan memperhatikan yang lainnya.


Program pertama di konsol browser adalah menampilkan pesan di konsol

Opsi peramban lain "Halo, dunia!" terdiri dalam menampilkan kotak pesan. Ini dilakukan seperti ini:

 alert("Hello, world!") 

Inilah hasil menjalankan program ini.


Tampilkan pesan di jendela

Perhatikan bahwa bilah alat pengembang sekarang terletak di bagian bawah layar. Anda dapat mengubah lokasi dengan menggunakan menu dengan tiga titik pada judulnya dan memilih ikon yang sesuai. Di sana Anda juga dapat menemukan tombol untuk menutup panel ini.

Alat pengembang, termasuk konsol, juga tersedia di browser lain. Konsolnya bagus karena selalu ada saat Anda menggunakan browser.

Ada cara lain untuk menjalankan kode JS di browser. Jadi, jika kita berbicara tentang penggunaan normal program JavaScript, mereka dimuat ke browser untuk memastikan operasi halaman web. Sebagai aturan, kode dieksekusi sebagai file terpisah dengan ekstensi .js , yang terhubung ke halaman web, tetapi kode program juga dapat dimasukkan langsung ke dalam kode halaman. Semua ini dilakukan dengan menggunakan <script> . Ketika browser mendeteksi kode semacam itu, ia menjalankannya. Detail tag skrip dapat dilihat di w3school.com. Secara khusus, pertimbangkan contoh yang menunjukkan cara menggunakan halaman web menggunakan JavaScript menggunakan sumber ini. Contoh ini juga dapat diluncurkan menggunakan sumber daya dari sumber ini (cari tombol Try it Yourself ), tetapi kami akan melakukannya sedikit berbeda. Yaitu, kami akan membuat file baru di beberapa editor teks (misalnya, dalam VS Code atau Notepad ++ ), yang kami sebut hello.html , dan menambahkan kode berikut ke dalamnya:

 <!DOCTYPE html> <html> <body>   <p id="hello"></p>   <script>     document.getElementById("hello").innerHTML = "Hello, world!";   </script> </body> </html> 

Di sini kita paling tertarik dengan document.getElementById("hello").innerHTML = "Hello, world!"; , yang merupakan kode JS. Kode ini terlampir dalam membuka dan menutup <script> . Ia menemukan elemen HTML dengan pengidentifikasi hello dalam dokumen dan mengubah properti innerHTML -nya (yaitu, kode HTML yang terkandung dalam elemen ini) menjadi Hello, world! . Jika Anda membuka file hello.html di browser, teks yang ditentukan akan ditampilkan di sana.


Output JavaScript ke elemen HTML

Seperti yang telah disebutkan, contoh-contoh yang disediakan di w3school.com dapat dicoba di sana. Ada lingkungan online khusus untuk pengembangan web, dan, khususnya, untuk mengeksekusi kode JS. Diantaranya, misalnya, codepen.io , jsfiddle.net , jsbin.com .

Di sini, misalnya, terlihat seperti contoh kita, diciptakan kembali dengan menggunakan CodePen.


Bidang HTML berisi kode yang menjelaskan elemen HTML, bidang JS berisi kode JavaScript, dan hasilnya ditampilkan di bagian bawah halaman.

Kami mengatakan di atas bahwa program JavaScript dapat dijalankan pada berbagai platform, salah satunya adalah lingkungan server Node.js. Jika Anda akan belajar JavaScript, dengan fokus khusus pada pengembangan sisi server, Anda mungkin harus menjalankan contoh menggunakan Node.js. Harap dicatat bahwa, dengan cara yang disederhanakan, dan tidak memperhitungkan dukungan khusus fitur bahasa tertentu yang digunakan oleh versi Node.js dan browser, kode yang sama akan berfungsi di Node.js dan di browser, menggunakan mekanisme dasar bahasa. Misalnya, perintah console.log("Hello, world!") Akan berfungsi di sana dan di sana. Program yang menggunakan mekanisme khusus browser tidak akan berfungsi di Node.js (hal yang sama berlaku untuk mencoba menjalankan program yang dirancang untuk Node.js di browser).

Untuk meluncurkan "Halo, dunia!" di lingkungan Node.js, instal Node.js dengan mengunduh paket distribusi yang sesuai dari sini . Sekarang buat file hello.js dan masukkan kode berikut ke dalamnya:

 console.log('Hello, World!'); 

Menggunakan baris perintah, kita akan pergi ke folder tempat file ini disimpan, dan jalankan perintah berikut:

 node hello.js 

Berikut ini adalah hasil implementasinya:


Pesan dicetak oleh Node.js

Ngomong-ngomong, Anda mungkin telah memperhatikan (dan kemungkinan besar memperhatikan jika Anda mengetik kode sendiri) bahwa beberapa contoh di atas menggunakan tanda titik koma di akhir baris, dan beberapa tidak. Dalam beberapa, teks yang ingin kami tampilkan di konsol atau sebagai pesan dikelilingi oleh tanda kutip ganda, dan dalam beberapa, tunggal. Mungkin sekarang Anda bertanya-tanya mengapa demikian, dan bagaimana, jika versi kode yang berbeda bekerja tanpa kesalahan, tulis kode ini dengan benar. Jika Anda menjawab pertanyaan ini tanpa masuk ke perincian dan tidak memperhitungkan perincian kecil, maka kita dapat mengatakan bahwa kedua opsi untuk menggunakan tanda kutip dan titik koma dapat diterima, dan keduanya bekerja dengan cara yang sama. Pilihan opsi tertentu tergantung pada gaya penulisan kode yang dipatuhi oleh programmer dan pada kebutuhan bagian tertentu dari program. Selain itu, dengan contoh-contoh sederhana ini, Anda dapat merasakan salah satu fitur karakteristik JavaScript, yaitu bahwa bahasa memberi kebebasan pada programmer.

Sekarang, setelah kenalan pertama Anda dengan JavaScript terjadi, kami menawarkan Anda untuk berbicara lebih banyak tentang bahasa ini.

Ikhtisar JavaScript

JavaScript adalah salah satu bahasa pemrograman paling populer di dunia. Itu, dibuat lebih dari 20 tahun yang lalu, telah datang jauh dalam perkembangannya. JavaScript dipahami sebagai bahasa scripting untuk browser. Pada awalnya, ia memiliki kemampuan yang jauh lebih sederhana daripada sekarang. Itu terutama digunakan untuk membuat animasi sederhana, seperti menu drop-down, mereka tahu tentang itu sebagai bagian dari teknologi Dynamic HTML (DHTML, dynamic HTML).

Seiring waktu, kebutuhan lingkungan web tumbuh, khususnya, API baru muncul, dan JavaScript, untuk mendukung pengembangan web, perlu untuk mengikuti teknologi lainnya.

Saat ini, JS digunakan tidak hanya di browser tradisional, tetapi juga di luar. Secara khusus, kita berbicara tentang platform server Node.js, tentang kemungkinan untuk menggunakan JavaScript dalam pengembangan aplikasi yang tertanam dan mobile, tentang menyelesaikan berbagai tugas yang belum pernah digunakan oleh JavaScript.

Fitur JavaScript Utama

JavaScript adalah bahasa yang memiliki fitur berikut:

• Tingkat tinggi Ini memberikan abstraksi programmer yang memungkinkan Anda untuk tidak memperhatikan fitur perangkat keras yang menjalankan program JavaScript. Bahasa ini secara otomatis mengelola memori menggunakan pengumpul sampah. Akibatnya, pengembang dapat berkonsentrasi untuk menyelesaikan tugasnya tanpa terganggu oleh mekanisme tingkat rendah (meskipun, harus dicatat, ini tidak menghilangkan kebutuhan untuk penggunaan memori yang rasional). Bahasa ini menawarkan alat yang ampuh dan nyaman untuk bekerja dengan data dari berbagai jenis.
• Dinamis Tidak seperti bahasa pemrograman statis, bahasa dinamis dapat, selama eksekusi program, untuk melakukan tindakan yang dilakukan bahasa statis selama kompilasi program. Pendekatan ini memiliki pro dan kontra, tetapi memberikan pengembang fitur yang kuat seperti pengetikan dinamis, pengikatan lambat, refleksi, pemrograman fungsional, mengubah objek selama eksekusi program, penutupan, dan banyak lagi.
• Diketik secara dinamis. Tipe variabel pengembangan JS adalah opsional. Dalam variabel yang sama, misalnya, Anda dapat terlebih dahulu menulis string, lalu integer.
• Ketikan yang lemah. Tidak seperti bahasa dengan pengetikan yang kuat, bahasa dengan pengetikan yang lemah tidak memaksa programmer, misalnya, untuk menggunakan objek dari tipe tertentu dalam situasi tertentu, melakukan, jika perlu, konversi tipe implisit. Ini memberikan lebih banyak fleksibilitas, tetapi program JS tidak aman untuk jenis, yang membuat tugas pemeriksaan tipe lebih rumit (TypeScript dan Flow ditujukan untuk menyelesaikan masalah ini).
• Diterjemahkan. Dipercaya secara luas bahwa JavaScript adalah bahasa pemrograman yang ditafsirkan, yang berarti bahwa program yang ditulis di dalamnya tidak perlu dikompilasi sebelum dieksekusi. JS dalam hal ini bertentangan dengan bahasa seperti C, Java, Go. Dalam praktiknya, browser, untuk meningkatkan kinerja program, kompilasi kode JS sebelum menjalankannya. Langkah ini, bagaimanapun, transparan bagi programmer, tidak memerlukan upaya tambahan darinya.
• Multiparadigma. JavaScript tidak membebani pengembang menggunakan paradigma pemrograman tertentu, tidak seperti, misalnya, Java (pemrograman berorientasi objek) atau C (pemrograman imperatif). Anda dapat menulis program JS menggunakan paradigma berorientasi objek, khususnya, menggunakan prototipe dan kelas yang muncul dalam standar ES6. Program dalam JS juga dapat ditulis dalam gaya fungsional, karena fakta bahwa fungsi di sini adalah objek kelas satu. JavaScript memungkinkan gaya imperatif yang digunakan dalam C.

Ya, omong-omong, perlu dicatat bahwa JavaScript dan Java tidak memiliki kesamaan. Ini adalah bahasa yang sama sekali berbeda.

JavaScript dan standar

ECMAScript, atau ES, adalah nama standar yang memandu pengembang mesin JavaScript, yaitu lingkungan tempat program JS dijalankan. Berbagai standar memperkenalkan fitur-fitur baru ke dalam bahasa tersebut, berbicara tentang nama standar dalam bentuk singkatan yang sering disebutkan, misalnya - ES6. ES6 sama dengan ES2015, hanya dalam kasus pertama angkanya berarti nomor versi standar (6), dan pada kedua - tahun adopsi standar (2015).

Kebetulan di dunia pemrograman web untuk waktu yang sangat lama standar ES3, yang diadopsi pada tahun 1999, relevan. Versi keempat dari standar tidak ada (mereka mencoba untuk menambahkan terlalu banyak fitur baru dan tidak pernah menerimanya). Pada tahun 2009, standar ES5 diadopsi, yang merupakan pembaruan besar untuk bahasa, yang pertama dalam 10 tahun. Setelah itu, pada tahun 2011, standar ES5.1 diadopsi, ia juga memiliki banyak hal baru. Standar ES6 yang diadopsi pada 2015 juga menjadi sangat signifikan dalam hal inovasi. Mulai tahun 2015, versi standar baru diadopsi setiap tahun.

Versi terbaru dari standar pada saat publikasi materi ini adalah ES9 , yang diadopsi pada Juni 2018.

Ringkasan

Hari ini kami menulis "Halo, Dunia!" pada JavaScript, memeriksa fitur-fitur utama bahasa dan berbicara tentang standarisasi. Lain kali kita akan berbicara tentang gaya teks JavaScript dan struktur leksikal program.

Pembaca yang budiman! Jika Anda, sebelum membaca materi ini, tidak terbiasa dengan JavaScript, beri tahu kami apakah Anda berhasil menjalankan "Halo, dunia!".