Panduan Dasar JavaScript untuk Pemula
Diterjemahkan oleh
ScribdTranslationsPanduan Dasar JavaScript untuk Pemula
Diterjemahkan oleh
ScribdTranslationsBelajar
JavaScript
Shelley Powers
Novatec
BAB 1
Halo, JavaScript!
Salah satu alasan mengapa JavaScript sangat populer adalah karena relatif mudah untuk ditambahkan
berada di halaman web. Yang perlu Anda lakukan adalah menyertakan setidaknya satu
elemen HTML skrip di halaman, spesifikasikanteks/javascriptuntuk atributjenis e
tambahkan JavaScript apa pun yang Anda mau:
<script type="text/javascript">
...kode sumber JavaScript
</script>
Tidak diperlukan instalasi danAnda juga tidak perlu menghadapi pengaturan.
estranhas dari jalur (paths) dari beberapa perpustakaan. JavaScript berfungsi secara langsung
secara efektif dan di sebagian besar browser web, termasuk empat yang paling penting:
Firefox, Internet Explorer, Opera dan Safari. Yang perlu Anda lakukan hanyalah menambahkan
sebuah blok skrip dan sudah beraksi.
Secaratradisional,AndamenambahkanblokyangditulisdalamJavaScriptkeelemenkepala
(kepala) dokumen (dibelah oleh tagkepalade abertura e fechamento do
cabeçalho), mas você também pode incluí-los no elementotubuh– atau bahkan keduanya
seksi. Namun, menambahkan skrip ke bagian tubuh biasanya tidak dianggap sebagai
teknik yang baik, karena menyulitkan untuk menemukan skrip ini ketika Anda ingin memodifikasinya di
masa depan. Pengecualian untuk aturan ini adalah ketika kinerja menjadi masalah, yang
akan dilihat di bab 6. Semua contoh dalam buku ini menambahkan blok skrip
hanya pada bagiankepala(kepala) halaman web.
Halo Dunia!
Juga umum bahwa contoh pertama saat belajar bahasa baru
pemrograman dikenal sebagai "HelloWorld" – sebuah aplikasi yang sangat sederhana
yang mencetak pesan ini di antarmuka pengguna, apapun itu. Dalam hal
JavaScript, antarmuka pengguna adalah halaman web. Contoh 1.1 menunjukkan sebuah halaman
web dengan sebuah blok dalam JavaScript yang, menggunakan hanya satu baris yang ditulis dalam lin-
guagem, membuka jendela kecil yang biasanya disebut kotak peringatan dengan
HaloDunia!
19
20 Belajar JavaScript
ð Contoh 1.1 – Aplikasi terkecil dalam JavaScript: "Halo Dunia!"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transisi//EN" "[Link]
<html xmlns="[Link] xml:lang="id" lang="id">
<kepala>
Halo, Dunia!
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
peringatan("Halo, Dunia!");
</script>
<body>
</body>
</html>
Salin contoh1.1 ke sebuah file dan buka di browser web yang mendukung
JavaScript harus menghasilkan sebuah kotak peringatan yang bertuliskan “HelloWorld!”. Jika itu
jangan terjadi, Anda harus memastikan bahwa JavaScript diaktifkan.
Versi yang lebih lama dari Internet Explorer juga menonaktifkan skrip jika Anda membuka
halaman melalui menu File Open alih-alih menggunakan alamat halaman web seperti
[Link]
Aplikasi ini, meskipun sangat terbatas dalam fungsionalitasnya, menunjukkan sedikit tentang
komponen minimal dari sebuah aplikasi JavaScript: anda memiliki sebuah halaman web, sebuah
elemennaskahIni adalah satu baris dalam JavaScript. Cobalah sendiri, kecuali mengedit.
sebuah string menggantikan kata "Dunia" dengan namanya.
Tentu saja, jika Anda ingin melakukan lebih dari sekadar mencetak pesan
Di browser, Anda perlu memperluas contoh ini dengan cara tertentu.
Halo Dunia! sekali lagi
Variasi lain dari aplikasi "HelloWorld!" menulis pesan sebenarnya di halaman
web, alih-alih dalam kotak peringatan. Untuk melakukan ini, gunakan empat komponen im-
pentingnya JavaScript: objek internaldokumendo navegador, variáveis JavaScript,
sebuah fungsi JavaScript dan sebuah penangan acara. Yang mengejutkan, Anda
masih dapat mengkodekan aplikasi dalam tujuh baris JavaScript, seperti yang ditunjukkan
contoh1.2.
ð Contoh 1.2 – "Halo Dunia!" ditampilkan di halaman web
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
[Link]
Bab 1 Hai,
■ JavaScript! 21
<html xmlns="[Link] xml:lang="id">
<kepala>
Halo, Dunia!
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
fungsi halo() {
// ucapkan halo kepada dunia
Halo, Dunia!
[Link]();
[Link](msg);
[Link]();
}
</head>
<body onload="hello()">
<p>Halo</p>
</body>
Meskipun contoh 1.2 adalah aplikasi yang sangat kecil, ia menunjukkan berbagai komponen.
dasar-dasar sebagian besar aplikasi di JavaScript yang saat ini digunakan, masing-masing dari
yang layak mendapatkan pemeriksaan yang lebih mendetail. Di sisa bab ini, kita akan melakukan itu.
periksa lebih dekat, satu komponen pada satu waktu.
Belum dibahas dalam bab ini adalah Deklarasi Jenis Dokumen (DOC-TYPE)
digunakan dalam contoh 1.1 dan 1.2, yang dapat mempengaruhi bagaimana berbagai peramban
prosesam JavaScript. Saya akan membahas dampak dari sebuah DOCTYPE di bab 6.
Sebuah skrip tag
JavaScript sering digunakan dalam konteks bahasa lain, seperti
bahasa penandaan HTML dan XHTML. Namun, Anda tidak dapat begitu saja
menempatkan JavaScript pada markup di mana saja dan bagaimana saja.
Dalam contoh 1.2, elemennaskahmengandung kode JavaScript. Ini memberi tahu nave-
gador o que, ketika menemukan tag pembuka elemen skrip, tidak boleh
memproses konten Anda sebagai HTML atau XHTML. Saat ini, kontrol atas
konten disampaikan ke mesin scripting browser.
Tidak semua skrip yang ada dalam halaman web adalah JavaScript, dan tag
pembukaan elemennaskahmengandung atribut yang mendefinisikan tipe skrip. Dalam hal ini
contoh, ini disajikan sebagaiteks/javascript. Di antara nilai-nilai lain yang diizinkan
untuk atributtipeada:
22 Belajar JavaScript
• teks/ecmascript
• teks/jscript
• teks/vbscript
• teks/vbs
Nilai pertamajenisdaftar spesifikasi bahwa skrip diinterpretasikan sebagai ECMAScript,
berdasarkan pada pola scripting ECMA-262. Nilai berikut membuat skrip menjadi
ditafsirkan sebagai JScript, suatu variasi ECMAScript yang diimplementasikan oleh Microsoft
tidak ada Internet Explorer. Dua nilai terakhir adalah untuk VBScript dari Microsoft, sebuah
bahasa skrip yang sepenuhnya berbeda.
Semua nilai ini daritipemenjelaskan tipe MIME dari konten. MIME, atau Multi-
tujuan Internet Mail Extension, adalah cara untuk mengidentifikasi bagaimana konten tersebut
terkode (misalnya,teks) dan bentuk spesifiknya (javascript). Menyediakan jenis
MIME, browser yang mampu memproses tipe tersebut melakukannya, sementara yang lain menjelajahi
gadores pulam a seção. Isso garante que apenas aplicações que possam processar o
skrip benar-benar diakses atau tidak.
Versi sebelumnya dari tagnaskahmenerima suatu atributbahasa, yang digunakan untuk
menetapkan versi bahasa, serta jenisnya:javascript1.2dalam perbandingan dengan
javascript 1.1. Sementara itu, penggunaanbahasaficou obsoleto em HTML 4.01, embora
masih muncul dalam banyak contoh JavaScript. Ini adalah salah satu teknik awal
multinavigator
Saya menggunakan istilah multinavigator untuk menunjuk pada JavaScript yang berfungsi di semua
penjelajah-target, atau yang menggunakan fitur untuk mengelola perbedaan apapun
sehingga aplikasi berfungsi di "berbagai browser".
Beberapa tahun lalu, saat bekerja dengan masalah yang terkait dengan kompatibilitas multiplatform
penjelajah, tidak jarang dibuat skrip khusus untuk setiap penjelajah
dalam suatu bagian atau file terpisah dan kemudian jika menggunakan atributbahasauntuk memastikan
yang hanya dapat diakses oleh browser yang kompatibel. Memeriksa beberapa
dari contoh-contoh lama saya (sekitar tahun 1997), saya menemukan hal berikut:
<script src="ns4_obj.js" language="javascript1.2">
</script>
<script src="ie4_obj.js" language="jscript">
</script>
Sebuah filosofi dari pendekatan ini adalah bahwa hanya sebuah penyemak imbas yang mampu memproses JavaS
cript1.2 bisa mengambil file pertama (terutama Netscape Navigator
4.x pada waktu itu) dan hanya sebuah browser yang mampu memproses JScript yang bisa mengambil
Bab 1 Halo,
■ JavaScript! 23
file kedua (Internet Explorer 4). Kurang praktis? Tentu saja, tetapi juga berfungsi-
pada tahun-tahun awal percobaan untuk menangani efek halaman dinamis
sering gagal di beberapa browser.
Atribut lain dari skrip yang sah adalahsumber , tunda e set karakter. Atributcharsetdefinisikan a
kodifikasi karakter yang digunakan dengan skrip. Biasanya tidak ditetapkan kecuali
que você precise de uma codificação diferente de caracteres da que estiver definida
untuk dokumen.
Sebuah atribut yang bisa sangat berguna adalahtunda. Jika Anda mengonfigurasimenundadengan suatu nilai
demenunda, ini menunjukkan kepada browser bahwa skrip tidak akan menghasilkan konten apapun dari
dokumen dan bahwa browser dapat melanjutkan memproses sisa konten dari
halaman, kembali ke skrip setelah halaman diproses dan ditampilkan:
<script type="text/javascript" defer="defer">
... tidak ada konten yang dihasilkan
</script>
AtributMenundadapat membantu mempercepat pemuatan halaman ketika Anda memiliki
sebuah blok lebih besar dari JavaScript atau menyertakan pustaka yang lebih besar dari JavaScript.
Atribut terakhir,sumber,berkaitan dengan pemuatan file JavaScript eksternal,
apa yang akanAnda lihat lebih lanjut. Pertama, bagaimanapun, kita akan memeriksa lebih dekat atribut tersebut
jenisteks/javascriptdan apa artinya ini untuk setiap peramban.
Penambahan skrip ke dalam tubuh dokumen
Saya sebutkan sebelumnya bahwa elemennaskahbiasanya ditambahkan ke elemen
kepaladi sebuah halaman web karena lebih mudah untuk melakukan pemeliharaan halaman web
ketika elemennaskahterorganisir di satu tempat. Namun, ada sebuah alasan
sah untuk menyertakan skrip di dalam elementubuhkinerja.
Ketika skrip ditambahkan ke elemenkepala, sisa dokumen tidak perlu
dibawa hingga skrip selesai dimuat karena browser
memuat banyak sumber daya secara paralel dari domain yang sama. Selain itu, browser
anda mungkin perlu menunggu untuk menampilkan sisa halaman karena mungkin ada satu elemen
[Link] dalam skrip. Jika file JavaScript besar, gambar dari
halaman web dan informasi penting lainnya mungkin memakan waktu, mungkin melebihi yang layak.
Bahkan penggunaan atributmenundatidak ada elemennaskahtidak akan berdampak pada masalah
de pengisian paralel atau rendering halaman.
Di dalam bukuSitus Web Berkinerja Tinggi(O'Reilly), Steve Souders merekomendasikan untuk menempatkan
penyusunan elemennaskahdi bagian bawah dokumen, untuk memungkinkan bahwa
agar sisa halaman web dimuat terlebih dahulu, sebelum skrip. Para pengembang
aplikasi web yang lebih kompleks memprioritaskan pendekatan ini. Kerugian dari
menempatkan skrip di akhir halaman membuat skrip lebih sulit untuk ditemukan,
dan pemeliharaan halaman, lebih sulit.
24 Belajar JavaScript
Apa pendekatan terbaik? Saya menemukan bahwa sebagian besar situs web tidak menggabungkan
perpustakaan JavaScript yang begitu besar sehingga penempatan skrip menjadi sebuah
masalah, tidak dibandingkan dengan pentingnya mampu memastikan bahwa halaman-halaman
sejam lebih mudah untuk dipelihara. Meskipun demikian, jika Anda mengembangkan pustaka JavaScript
lebih kompleks, mungkin harus mempertimbangkan perubahan ke skrip berbasis
papan alas.
Apa pun pendekatan yangAnda gunakan, tetap konsisten: letakkan skripAnda
selalu pada elemenkepalakamu selalu di bagian bawah elementubuh .
JavaScript versus ECMAScript versus JScript
Contoh 1.2 menggunakan tipeteks/javascriptdengan elemennaskahaplikasi ini berfungsi
tidak di Firefox, IE, Opera, dan Safari. Namun, tidak semua peramban mengimplementasikan
JavaScript.
Meskipun nama "JavaScript" telah menjadi omnipresent untuk scripting berbasis
di browser sisi klien, hanya Mozilla dan browser populernya, Firefox,
implementasi JavaScript, apa nama asli dari sebuah instance dari spesifikasi
pemrograman yang lebih luas, ECMAScript. ECMAScript adalah, sebenarnya, suatu spesifikasi
de scripting di sisi klien yang mencakup seluruh pasar. Versi terbaru dari
ECMAScript adalah ECMA-262, Edisi 3.
Namun, sebagian besar browser menghormati jenisnyateks/javascript, Selain itu
sesuai (meskipun jauh lebih tidak umum)teks/ecmascript, meskipun mungkin ada
perbedaan, bahkan signifikan, dalam tepatnya apa yang setiap browser atau lainnya
aplikasi mendukung.
ECMAScript tidak terbatas hanya pada peramban: dukungan ActionScript dari
Adobe Flash didasarkan pada ECMA-262, Edisi 3.
Semua peramban yang digunakan untuk menguji aplikasi dalam buku ini - Firefox3.x, Safari
3.x, Opera9.x dan IE8 – mendukung sebagian besar, jika tidak semua, ECMA-262, Edisi 3, sampai
sebuah bagian dari generasi berikutnya dari ECMAScript, ECMAScript3.1 (dan yang lebih baru). Di sini
buku, saya akan memberikan catatan setiap kali ada perbedaan di peramban atau saya akan menyediakan
cara untuk mengatasi masalah yang berkaitan dengan penggunaan di lebih dari satu browser.
Saya juga akan menggunakanteks/javascriptlebih akrab untuk atribut tipe elemen
naskah, sesuai dengan yang ditunjukkan pada contoh1.2.
Bab 1 Halo,
■ JavaScript! 25
Definisi fungsi di JavaScript
Pada contoh 1.2, bagian JavaScript yang benar-benar membuat pesan "Hello, World!"
ada di dalam sebuah fungsi yang disebuthaloFungsi adalah cara untuk memodularisasi satu atau
lebih banyak baris skrip sehingga dapat dijalankan satu atau lebih [Link] juga
bém dapat menggunakan fungsi untuk mengontrol kapan skrip yang dimodulasi dieksekusi. Oleh karena itu
contoh, pada contoh1.2, fungsi dipanggil hanya setelah halaman web dimuat.
Berikut adalah sintaksis khas untuk membuat sebuah fungsi:
fungsi nomeFunção(parameter) {
...
}
Kata kuncifungsidiikuti oleh nama fungsi dan tanda kurung yang berisi
nol atau lebih parameter (argumen fungsi). Di contoh 1.2, tidak ada parameter
Kita akan melihat banyak contoh dengan parameter di seluruh buku ini. Oscript yang
konstitusi fungsi berada di antara kunci.
Saya mengatakan "tipikal" ketika saya menyediakan sintaks fungsi karena itu bukan satu-satunya sin.
pajak yang dapat Anda gunakan untuk membuat sebuah fungsi. Namun, kita akan melihat variasi lainnya
mulai dengan bab 5, yang membahas fungsi JavaScript secara rinci.
Tentu saja, begitu Anda memiliki sebuah fungsi, Anda harus memanggilnya untuk menjalankan skrip.
apa yang dimilikinya, yang membawa kita kepada pengendali acara.
Pengendali acara
Na tagtubuhde abertura dari contoh1.2, sebuah atribut HTML yang disebutsaatmemuatdiberikan
fungsihalo. Atributpada muatadalah apa yang dikenal sebagai pengendali peristiwa.
Pengendali acara ini, dan yang lainnya, adalah bagian dari model objek yang terkait yang
setiap browser menyediakan.
Anda menggunakan pengendali acara untuk memetakan sebuah fungsi ke sebuah acara.
spesifik sehingga, ketika peristiwa terjadi, skrip fungsi diproses.
Salah satu pengendali acara yang paling sering digunakan adalah yang baru saja diperlihatkan, acara
pada muatterlampir pada elementubuhKetika halaman web telah dimuat, acara
ditembak, dan pengendali memanggil fungsi yang dipetakan.
Lihat beberapa pemetaan peristiwa yang biasanya digunakan:
klik
Dijalankan ketika elemen menerima klik mouse.
onmouseover
Dipicu ketika kursor mouse berada di atas elemen.
26 Mempelajari JavaScript
ketika mouse keluar
Dihentikan ketika kursor mouse tidak lagi berada di atas elemen.
fokus
Dijalankan ketika elemen menerima fokus (melalui mouse atau keyboard).
onblur
Disparado ketika elemen tidak lagi memiliki fokus.
Ini hanya beberapa dari pengendali acara, dan tidak semua elemen
kami mendukung semua pemanipul. Pemanipul acarapada pemuatanDidukung
hanya beberapa elemen, seperti elementubuh e gambar- apa yang tidak mengejutkan,
karena acara tersebut terkait dengan pemuatan sesuatu.
Menambahkan pengendali acara langsung ke tag pembuka adalah cara
de anexá-lo. Uma segunda técnica ocorre diretamente dentro de JavaScript usando
sintaksis seperti berikut:
<script type="text/javascript">
[Link]=hello;
fungsi hello(??) {
sapa dunia
Halo, Dunia!
[Link]();
[Link](msg);
[Link]();
}
</script>
O manipulador de eventospada muatanmerupakan properti dari objek internal lainnya dari
penjelajah, ojendelaBaris pertama dari skrip menetapkan fungsihalolangsung ke
manipulator acaraketika dimuatdari jendela.
Fungsi dalam JavaScript juga merupakan objek di JavaScript, sehingga Anda
Anda dapat menetapkan fungsi, baik dengan nama atau langsung, ke sebuah variabel atau yang lain
kepemilikan objek.
Dengan menggunakan pendekatan properti objek, Anda tidak perlu menambahkan mani-
penarik acara seperti atribut dalam tag elemen, tetapi bisa sebaliknya
menggabungkan mereka ke dalam JavaScript itu sendiri. Kami akan membahas lebih rinci tentang manipulasi
pengeras acara dan cara yang lebih canggih untuk memanipulasi acara di awal
[Link] itu, kita akan memeriksa objek lebih dekatdokumen .
Bab 1 Hai,
■ JavaScript! 27
Objek dokumen peramban
Contoh 1.2, meskipun kecil, menggunakan salah satu objek paling kuat yang tersedia di
peramban Anda: objekdokumenObjek ini adalah, untuk semua niat dan tujuan,
sebuah representasi halaman, termasuk semua elemen di dalamnya. Itu melalui
lakukandokumenkita dapat mengakses konten halaman dan, seperti yang baru saja Anda lihat,
dan melalui dia kita juga dapat memodifikasi konten yang sama.
O dokumenmengandung koleksi yang dipetakan ke elemen halaman, seperti semua gambar
elemen formulir halaman. Juga berisi metode yang dapat Anda gunakan
baik untuk mengakses maupun untuk mengubah halaman web, termasuk metode-metodebuka , tuliskan
e tutupdigunakan di contoh1.2.
Metodebukabuka dokumen untuk perekaman. Dalam contoh 1.2, dokumen terbuka
era yang sama di mana skrip itu berada. Metodenyatuliskanmerupakan variasi dari metode
tulis, yang mencetak sebuah string teks pada dokumen. Satu-satunya perbedaan antara mereka adalah
apatuliskanjuga menyisipkan karakter baris baru setelah teks. Ométodotutup
tanggal dokumen dan juga memaksa tampilan segera dari konten tersebut.
Salah satu konsekuensi negatif dari merekam di atas dokumen yang ada adalah bahwa, dengan
o IE, setidaknya dengan versi beta IE8, Anda akan kehilangan fungsionalitas Anda
tombol kembali.
Metodebuka e tutuptidak diperlukan untuk contoh1.2, karena navigator-
pintu akan membuka dan menutup secara otomatis dokumen ketika metodetuliskan
untuk dipanggil setelah ia telah dimuat. Jika Anda menggunakan skrip di dalam tubuh
halaman, harus secara eksplisit memanggil metodebuka .
O dokumen, sama seperti metodejendelasebutkan sebelumnya, merupakan bagian dari sebuah
hierarki objek yang dikenal sebagai Model Objek Browser (BOM). Model ini adalah
seperangkat objek dasar yang diimplementasikan di sebagian besar peramban modern.
Saya akan membahas tentangdokumendan objek BOM lainnya di bab 9.
BOM adalah versi paling awal dari Document Object Model (DOM), yang lebih formal, dan
kadang-kadang disebut DOM Tingkat 0.
Operator properti
Pada contoh 1.2, Anda mengakses metode objek tersebutdokumenmelalui salah satu dari
banyak operator yang didukung di JavaScript: operatorproperti, diwakili oleh
sebuah operator titik sederhana (.)
Berbagai operator tersedia di JavaScript: operator aritmatika (+, -), operator eks-
tekanan kondisional (>, <) dan lainnya yang akan saya jelaskan lebih lanjut di buku ini. Salah satu dari
28 Belajar JavaScript
yang paling penting, namun, adalah operatorpropertiElemen data, pemanipulasi
de eventos dan metode objek dianggap sebagai properti objek
dalam JavaScript, dan semua dapat diakses melalui operatorproperti .
Anda juga menggunakan operator ini dalam proses yang disebut penggabungan
metode, atau terkadang hanya rantai, melalui mana Anda dapat menerapkan
panggilan ke beberapa metode, satu setelah yang lain, semuanya berada di dalam yang sama
instruksi. Kita akan melihat contoh berikut dalam buku:
var tstValue = [Link]("test").[Link]="#ffffff";
Dalam contoh ini, sebuah elemenhalamandiakses menggunakan metodegetElementByIddo docu-
mento, dan objeknyagayadiakses untuk mengonfigurasi warna latar belakang elemen ini.
PropertiwarnaLatarBelakangmilik objekgayayang merupakan sifat dari
objekdokumen .
Saya akan membahas semua metode dan objek ini di bab-bab berikutnya, tetapi saya ingin memperkenalkan
Ayo pelajari rantai metode sekarang, karena Anda akan melihatnya cukup sering.
Anda tidak dapat mengaitkan semua properti dari semua objek - hanya yang itu
yang mengembalikan sebuah objek.
Salah satu pustaka Ajax yang paling populer, jQuery, sangat memanfaatkan chaining.
metode. Saya akan membahas JQuery dengan cepat di bab 14.
Kata kunci var dan cakupan
Sebuah string "HelloWorld!" yang saya gunakan di contoh 1.2 diberikan kepada sebuah objek bernama
pesanapa itu contoh variabel [Link] variabel hanyalah sebuah
referensi yang dinamai untuk data tertentu. Data dapat berupa string, seperti
pada contoh 1.2, sebuah angka, atau nilai booleanbenarAndasalahMereka juga bisa
menjadi referensi ke sebuah fungsi, array, atau objek lain.
Di contoh, tetapkan variabel dengan kata kuncivarKapan Anda menggunakanvardengan sebuah
variabel, sedang mendefinisikan variabel ini dengan cakupan lokal, yang berarti bahwa Anda dapat
akseslah hanya di dalam fungsi di mana saya mendefinisikannya. Jika saya tidak menggunakannyavar, variabel
pesanvariabel global dan akan memiliki lingkup di dalam dan di luar fungsi. Menggunakan variabel global di
sebuah konteks lokal bukanlah sesuatu yang buruk - dan kadang-kadang mungkin diperlukan - tetapi tidak
ini adalah praktik yang baik dan harus dihindari, jika memungkinkan.
Alasan mengapa Anda harus menghindari variabel global adalah karena, jika aplikasi
fizer adalah bagian dari aplikasi JavaScript yang lebih besar,pesanmungkin sedang digunakan di bagian lain
do código em outro arquivo e você terá sobrescrito os dados que ela continha ori-
Akhirnya. Atau, jika Anda membuat variabel global yang disebutpesan, skrip dari beberapa
Bab 1 Halo,
■ JavaScript! 29
perpustakaan lain bisa menimpanya tidak menggunakan kata kunci dengan cara yang benar
var, dan data yang Anda catat akan hilang.
Menetapkan lingkup variabel itu penting jika Anda memiliki variabel global
e lokasi dengan nama yang sama. Contoh1.2 tidak memiliki variabel global dengan beberapa
nama, tetapi penting untuk mengembangkan praktik pengkodean JavaScript yang baik
dari awal.
Berikut adalah aturan mengenai ruang lingkup:
• Jika Anda mendeklarasikan sebuah variabel dengan kata kuncivardalam sebuah fungsi atau di
sebuah blok kode, penggunaannya bersifat lokal pada fungsi itu.
• Jika Anda menggunakan variabel tanpa mendeklarasikannya dengan kata kuncivareexistir uma
variabel global dengan nama yang sama, variabel lokal dianggap sebagai
global yang sudah ada.
• Jika Anda mendeklarasikan variabel secara lokal dengan kata kuncivar, tetapi tidak
setelah diinisialisasi (misalnya, memberikan nilai padanya), ia akan bersifat lokal dan akan dapat diakses, tetapi
tidak ditentukan.
• Jika Anda mendeklarasikan variabel secara lokal tanpa kata kuncivar, atau se
menyatakannya secara eksplisit sebagai global tetapi tidak menginisialisasi, itu akan dapat diakses
secara global, tetapi juga tidak akan terdefinisi.
Menggunakanvardi dalam sebuah fungsi, Anda dapat menghindari masalah dengan menggunakan variabel global
dan lokasi dengan nama yang sama. Ini sangat penting saat menggunakan pustaka
JavaScript – seperti Dojo, jQuery, dan Prototype – karena Anda tidak akan tahu nama-nama dari
variabel yang digunakan oleh kode JavaScript lainnya.
Instruksi (pernyataan)
JavaScript juga mendukung berbagai jenis instruksi pemrosesan, ko-
dikenal sebagai instruksi. Contoh1.2 menunjukkan jenis dasar instruksi
di JavaScript: atribusi, di mana sebuah nilai diberikan ke dalam sebuah variabel. Lainnya
tipe instruksi adalah loopuntuk, yang memproses sebuah blok skrip yang tertentu
jumlah iterasi; instruksi bersyaratjika...lainnya, yang memverifikasi sebuah kondisi
untuk melihat apakah sebuah blok skrip dijalankan; instruksialih, yang memverifikasi sebuah nilai
di dalam suatu kumpulan tertentu dan kemudian menjalankan blok skrip yang terkait
nilai ini; dan seterusnya.
Setiap jenis instruksi mengandung persyaratan sintaksis tertentu. Pada contoh 1.2, a
instruksi penugasan diakhiri dengan titik koma. Gunakan titik koma
Untuk mengakhiri sebuah instruksi bukanlah persyaratan di JavaScript, kecuali Anda
Anda ingin mengetik banyak instruksi dalam satu baris. Jika Anda melakukannya, Anda harus memasukkan sebuah
titik koma untuk memisahkan instruksi individu.
30 Belajar JavaScript
Ketika Anda mengetik instruksi lengkap dalam satu baris, gunakan pemisah baris
untuk menyelesaikannya. Namun, sama halnya dengan penggunaanvariabel, itu adalah praktik yang baik
gunakan titik koma untuk mengakhiri semua instruksi, jika tidak, untuk membuat kode
lebih mudah [Link] lebih lanjut tentang titik koma, operator lain, dan instruksi
tidak ada bab 3.
Komentar
Seperti yang saya harapkan, bab ini akan menunjukkan bahwa ada banyak hal di JavaScript, bahkan
dalam aplikasi kecil seperti contoh 1.2. Tunggu sebentar, namun, sudah
kita belum selesai. Akhirnya, tetapi pasti tidak kalah penting, kita akan melihat
sedikit lebih tentang komentar di JavaScript.
Komentar memberikan ringkasan atau penjelasan tentang kode yang mengikuti. Co-
Komentar dalam JavaScript adalah cara yang sangat berguna untuk membuat catatan
secara cepat tentang apa yang dilakukan sebuah blok kode atau ketergantungan apa yang dimilikinya.
Mereka membuat kode lebih mudah dibaca dan lebih mudah dipelihara.
Anda dapat menggunakan dua jenis komentar yang berbeda dalam aplikasi Anda. Yang pertama,
menggunakan garis miring ganda (//), komentar apa pun yang ada di sebelah kanan pada baris yang sama:
// Ini adalah baris yang dikomentari
var i = 1; // ini adalah komentar baris
Yang kedua menggunakan pembatas pembukaan dan penutupan komentar di
JavaScript/* */e, untuk menandai sebuah blok komentar yang dapat diperluas oleh
satu atau lebih baris:
/* Ini adalah komentar multi-baris */
yang membentang selama tiga baris. Komentar multilini sangat berguna untuk
mengomentari sebuah fungsi
Komentar satu baris relatif aman untuk digunakan, tetapi yang multi-baris
garis dapat menyebabkan masalah jika karakter awal atau akhir hilang secara tidak sengaja.
Secara umum, kami menggunakan komentar satu baris sebelum blok skrip yang dieksekusi
sebuah proses tertentu atau membuat objek spesifik; kami menggunakan komentar dari
blok multiline di awal file JavaScript. Praktik baik yang harus diadopsi
dengan JavaScript adalah memulai setiap blok, fungsi, atau definisi objek di JavaScript dengan
setidaknya satu baris komentar. Selain itu, berikan satu blok komentar
lebih rinci di awal semua file pustaka di JavaScript; sertakan
informasi tentang penulis, tanggal, dan ketergantungan, serta tujuan yang terperinci
buat skrip.
Kami telah menjelajahi apa yangAnda lihat pada contoh 1.2. Sekarang kami akan memeriksa apa yang tidakAnda lihat.
Bab 1 Halo,
■ JavaScript! 31
Apa yang tidak Anda lihat: bagian CDATA dan komentar dalam HTML
Sepuluh tahun yang lalu, ketika sebagian besar peramban berada di versi pertama atau kedua
versi, dukungan untuk JavaScript tidak jelas, dengan setiap peramban mengimplementasikan sebuah
versi berbeda. Ketika peramban, seperti Lynx yang berbasis teks, menemukan
sebuah tagnaskah, biasanya hanya mencetak output di halaman.
Untuk menghindari ini, konten skrip ditempatkan di dalam komentar HTML:<!-- e
-->. Ketika komentar dalam HTML digunakan, browser yang tidak mendukung
JavaScript mengabaikan skrip di dalam komentar tersebut, tetapi peramban lebih
baru tahu melaksanakannya.
Itu adalah sesuatu yang tidak terlalu canggih, tetapi sangat digunakan. Mayoritas halaman web dengan
JavaScript saat ini menampilkan komentar HTML yang ditambahkan karena itu lebih
Ada kemungkinan skrip disalin daripada tidak. Sayangnya, beberapa browser baru
hari ini dapat memproses halaman web sebagai XHTML, dan secara ketat sebagai XML,
artinya bahwa kode yang dikomentari diabaikan. Sebagai akibatnya, penggunaan
komentar dalam HTML untuk "menyembunyikan" skrip tidak disarankan.
Cara lain untuk "menyembunyikan" skrip, namun, dianjurkan: melalui penggunaan bagian
XMLCDATA, terutama jika skrip akan digunakan dalam XHTML. Contoh 1.3 adalah
modifikasi contoh1.2 dengan penambahan satu bagianCDATA, ditampilkan dengan huruf tebal.
ð Contoh 1.3 – Modifikasi contoh 1.2 untuk menambahkan bagian CDATA untuk "menyembunyikan" skrip
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
[Link]
<html xmlns="[Link] xml:lang="id">
<kepala>
Halo, Dunia!
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
fungsi halo() {
// ucapkan halo kepada dunia
Halo, <em>Dunia!</em>
[Link]();
[Link](msg);
[Link]();
}
//]]>
</script>
</head>
<body onload="hello()">
<p>Halo</p>
</body>
</html>
32 Belajar JavaScript
Alasan untuk bagianCDATAitu adalah prosesor XHTMLyang menginterpretasikan markup, seperti
tag pembuka dan penutupemdalam contoh baru ini, bahkan ketika mereka sedang
di dalam string JavaScript. Meskipun skrip dapat diproses dengan benar dan
juga menampilkan halaman dengan benar, jika Anda mencoba untuk memvalidasinya tanpa bagianCDATA
akan mendapatkan kesalahan validasi, sebagaimana ditunjukkan pada gambar 1.1.
Figura 1.1 – Kesalahan validasi tanpa menggunakan seksi CDATA.
Diperkirakan bahwa JavaScript yang diimpor ke halaman menggunakan atributsumber
do elementonaskahsejalan dengan XHTML dan tidak memerlukan bagianCDATAAnda
Namun, harus membatasi JavaScript in-line atau yang disematkan dengan CDATA, terutama
jika berada di dalam elementubuh. Untuk sebagian besar peramban, Anda juga
anda perlu menyembunyikan tag pembuka dan penutup bagianCDATAdengan komentar
(//), sesuai yang ditunjukkan sebelumnya pada contoh 1.3, atau akan mendapatkan kesalahan JavaScript.
Tentu saja cara terbaik untuk menjaga halaman web Anda terorganisir adalah dengan menghapus in-
sepenuhnya JavaScript yang sama, melalui penggunaan file JavaScript.
Amaioria dari contoh-contoh di buku ini dimasukkan di halaman terutama untuk membuat
yang paling mudah dibaca dan diikuti. Namun, Yayasan Mozilla merekomendasikan (dan
saya setuju) bahwa semua JavaScript in-line atau tertanam harus dihapus dari sebuah halaman
ditempatkan dalam berkas JavaScript terpisah. Menggunakan berkas terpisah, apa itu
coberto na próxima seção, evita problemas com validação e interpretação incorreta
de texto, terlepas dari apakah halaman tersebut diproses sebagai HTML atau XHTML.
File JavaScript juga lebih efisien, karena browser menyimpannya di
cache pada kali pertama ketika mereka dimuat. Referensi tambahan ke yang sama
arsip diambil dari cache.
Bab 1 Hai,
■ JavaScript! 33
Berita JavaScript
Penggunaan JavaScript semakin menjadi lebih berorientasi objek dan kompleks.
menyederhanakan pekerjaan Anda, serta untuk membagikannya, pengembang JavaScript
sedang membuat objek JavaScript yang dapat digunakan kembali yang dapat dimasukkan ke dalam mui-
tas aplikasi, termasuk yang dibuat oleh pengembang lain. Satu-satunya cara
Efisien untuk membagikan objek-objek ini adalah dengan membuatnya dalam berkas terpisah dan menyediakan
satu tautan untuk setiap file di halaman web. Sekarang dengan kode dalam file, semuanya
Apa yang perlu dilakukan pengembang adalah menghubungkan kode ke halaman web. Jika kode
harus diubah kemudian, itu hanya ada di satu tempat.
Saat ini, bahkan JavaScript yang paling sederhana dibuat dalam file skrip sepa-
rados. Setiap overhead yang dihasilkan oleh penggunaan beberapa file akan dikompensasi
untuk menyertakan sebuah pustaka JavaScript atau file skrip
di halaman web Anda, gunakan sintaksis ini:
<script type="text/javascript" src="[Link]"></script>
Elemennaskahtidak mengandung konten, tetapi tag penutup tetap ada
diperlukan.
Pengunduh memuat file skrip untuk halaman dalam urutan di mana mereka muncul.
recem na mesma e os processa em ordem a menos quemenundaseharusnya [Link] berkas
skrip harus diperlakukan seolah-olah kode benar-benar dimasukkan ke dalam halaman: o
perilakunya tidak berbeda antara file skrip blok JavaScript yang disematkan.
Contoh 1.4 adalah modifikasi lain dari aplikasi "Hello, World!", kecuali bahwa, dari ini
vez, skrip tersebut dipindahkan ke file terpisah, [Link]. Ekstensi
.jsini diperlukan, kecuali Anda mengarahkan server web untuk menggunakan yang lain
ekstensi untuk mewakili jenis MIME JavaScript. Namun, karena fakta [Link]
digunakan sebagai standar selama bertahun-tahun, lebih baik tidak mencoba hal baru.
Setiap aturan selalu memiliki pengecualian, dan penggunaan .js adalah salah satunya. Jika JavaScript adalah
dihasilkan secara dinamis menggunakan aplikasi di sisi server yang dibangun di
Dalam bahasa seperti PHP, file tersebut akan memiliki ekstensi yang berbeda.
Contoh 1.4 berisi skrip, dan contoh 1.5 menunjukkan halaman web yang sekarang telah diubah.
ð Contoh 1.4 – Skrip Hello World dalam file terpisah
/*
fungsi: halo
Shelley
Halo, dunia!
*/
34 Belajar JavaScript
fungsi halo() {
// ucapkan halo kepada dunia
Halo, <em>Dunia!</em>
[Link]();
[Link](msg);
[Link]();
}
ð Contoh 1.5 – Halaman web, sekarang memanggil sebuah berkas skrip eksternal
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN">
[Link]
<html xmlns="[Link] xml:lang="id">
<kepala>
Halo, Dunia!
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="[Link]">
</script>
</head>
<body onload="hello()">
<p>Halo</p>
</html>
Seperti yang Anda lihat, halaman ini menjadi jauh lebih bersih, dan aplikasi menjadi lebih efisien.
berangkat dari perspektif pemeliharaan. Selain itu, aplikasi lain sekarang dapat
menggunakan kembali kode. Meskipun tidak mungkin Anda akan menggunakan kembali sesuatu yang begitu sederhana
berapa skrip "Hello, World!" akan membuat contoh lebih lanjut di buku ini yang mana
reutilisasi menjadi lebih penting.
Kita memiliki satu bagian terakhir dari materi yang perlu dibahas di bab ini sebelum beralih ke
variabel dan tipe data di bab 2.
Aksesibilitas dan praktik terbaik dalam JavaScript
Dalam dunia ideal, semua orang yang mengunjungi situs web Anda akan menggunakan jenis yang sama dari
sistem operasi dan peramban dan memiliki JavaScript diaktifkan. Situs Anda tidak akan pernah menjadi
diakses melalui telepon seluler atau perangkat lain yang berbeda, orang-orang
com defisiensi visual tidak perlu menggunakan pembaca layar dan yang memiliki masalah dengan
paralisis tidak perlu navigasi yang diaktifkan oleh suara.
Ini bukan dunia yang ideal, tetapi banyak pengembang JavaScript mengkodekan seperti
seandainya. Kami begitu terlibat dengan keajaiban yang dapat mereka ciptakan sehingga kami lupa
bahwa tidak semua orang bisa membagikannya.
Bab 1 Halo,
■ JavaScript! 35
Banyak dari praktik terbaik terkait dengan JavaScript tetapi, jika ada satu untuk
se gunakan buku ini, adalah sebagai berikut: apapun fungsi JavaScript yang Anda
buatlah, itu tidak boleh mengganggu penggunaan situs Anda oleh pengunjung.
Apa yang saya maksud dengan "mengganggu penggunaan situs Anda oleh pengunjung"? Saya maksudkan bahwa
Anda harus menghindari penggunaan JavaScript dengan cara yang membuat mereka yang tidak bisa, atau
tidak akan, mengaktifkan JavaScript, akan terhalang untuk mengakses sumber daya penting dari situs.
Jika Anda membuat menu dropdown menggunakan JavaScript, Anda juga perlu menyediakan sebuah
alternatif yang tidak menggunakan skrip. Jika pengunjung Anda memiliki keterbatasan visual, JavaScript
tidak boleh mengganggu pemutar audio, apa yang terjadi ketika instruksi diberi
ditambahkan ke halaman secara dinamis.
Banyak pengembang tidak mengikuti prinsip-prinsip ini karena mereka menganggap bahwa praktik-praktik
memerlukan pekerjaan tambahan dan, sebagian besar, memerlukannya. Namun, pekerjaan
tidak perlu menjadi beban - tidak ketika hasilnya dapat meningkatkan aksesibilitas
dari situs Anda. Selain itu, banyak perusahaan sekarang mengharuskan bahwa situs web mereka memenuhi
tingkat aksesibilitas tertentu. Adalah lebih baik untuk mengembangkan kebiasaan dalam membuat halaman-
nas yang dapat diakses sejak awal daripada mencoba memperbaikinya, atau kebiasaan Anda, kemudian.
Pedoman aksesibilitas
O siteWebAIM ([Link]) berisi tutorial hebat tentang pembuatan
di JavaScript yang dapat diakses (tersedia di[Link]
Ini mencakup cara-cara di mana Anda tidak boleh menggunakan JavaScript, seperti penggunaan JavaScript
para menu dan jenis navigasi lainnya. Namun, situs ini menyediakan cara bagi Anda untuk menggunakan
JavaScript untuk membuat situs web lebih dapat diakses.
Sebuah saran adalah untuk mendasarkan jawaban pada peristiwa yang dapat dipicu baik Anda
gunakan mouse atau tidak. Misalnya, alih-alih menangkap klik mouse, Anda harus
menangkap peristiwa yang dipicu jika Anda menggunakan keyboard atau mouse, seperti
fokus e onblurJika Anda memiliki menu drop-down, tambahkan tautan ke sebuah halaman
separada e forneça um menu estático nessa segunda página.
Setelah meninjau tutorial di WebAIM, Anda mungkin ingin meluangkan waktu.
Inisiatif Aksesibilitas Web Konsorsium Dunia (W3C) (dalamInvalid inputw.
[Link]/WAI/) Mulai dari sana, Anda juga dapat mengakses situs web Bagian 508 dari
pemerintah Amerika Utara[Link] yang membahas apa itu dikenal-
do como "kompatibilitas 508". Situs yang kompatibel dengan Bagian 508 adalah
dapat diakses tanpa batasan fisik. Di situs web ini, Anda dapat mengakses
berbagai alat yang mengevaluasi situs Anda terkait aksesibilitas, seperti Cynthia Says
(em[Link]
36 Belajar JavaScript
Apakah situs web Anda terletak di dalam Amerika Serikat atau tidak, Anda ingin itu menjadi
aksesibel. Dengan demikian, kunjungan ke Seksi 508 berguna terlepas dari lokasi Anda.
Tentu saja tidak semua masalah aksesibilitas terkait dengan yang itu
navegadores di mana JavaScript dibatasi atau dinonaktifkan secara default, seperti
dengan pembaca layar. Banyak orang tidak percaya pada JavaScript, atau tidak peduli tentang
bahasa dan lebih memilih untuk menonaktifkannya. Untuk kedua kelompok orang - mereka yang
lebih suka tidak menggunakan JavaScript dan yang tidak memiliki pilihan - penting untuk memberikan
ada alternatif ketika tidak ada skrip yang ada. Salah satu alternatif adalahnoscript .
tidak ada skrip
Beberapa browser atau aplikasi lain tidak siap untuk memproses Ja-
vaScript atau mereka terbatas dalam mode interpretasi skrip. Jika JavaScript tidak
penting untuk navigasi atau interaksi, dan browser mengabaikan skrip, tidak ada
kerugian. Namun, jika JavaScript diperlukan untuk mengakses sumber daya situs dan
Anda tidak memberikan alternatif, Anda pada dasarnya mengusir orang-orang ini.
Bertahun-tahun yang lalu, ketika JavaScript cukup baru, sebuah pendekatan
era populer menyediakan halaman sederhana atau hanya teks yang dapat diakses melalui
Sebuah tautan, biasanya ditempatkan di bagian atas halaman. Namun, jumlah pekerjaan
untuk melakukan pemeliharaan kedua situs bisa jadi sangat mahal dan para pengembang
mereka harus terus-menerus khawatir untuk menjaga situs web tetap disinkronkan.
Sebuah teknik yang lebih baik adalah memberikan alternatif statis untuk konten dinamis yang dihasilkan.
por skrip. Ketika Anda menggunakan JavaScript untuk membuat menu drop-down, juga
nece sebuah menu dengan tautan hierarkis standar; ketika Anda menggunakannaskahuntuk menunjukkan
elemen formulir untuk pengeditan yang berbasis pada interaksi dengan pengguna, menyediakan
tautan yang paling tradisional untuk halaman kedua melakukan hal yang sama.
Elemen yang memungkinkan semua ini adalahnoscriptDi mana pun Anda membutuhkan konten
statis, tambahkan yang elegannoscriptdengan konten di dalam tag pembuka dan
penutupan. Jadi, jika sebuah browser atau aplikasi lain tidak dapat memproses skrip
(karena JavaScript tidak diaktifkan karena suatu alasan), kontennoscript é
diproses; jika tidak, ia diabaikan.
Contoh 1.6 adalah variasi terakhir dari "Hello, World!" yang menunjukkan contohnya.
dilindungi olehCDATAdimodifikasi dengan penambahannoscriptMengakses halaman dengan sebuah
peramban yang diaktifkan dengan JavaScript harus menampilkan halaman dengan “Hello, Dunia!”
Namun, jika Anda mengakses halaman ini dengan peramban yang mendukung skrip
dinonaktifkan, pesan yang berbeda akan ditampilkan.
Bab 1 Halo,
■ JavaScript! 37
ð Contoh 1.6 – Penggunaan noscript untuk browser tanpa JavaScript yang diaktifkan
[Link]
<html xmlns="[Link] xml:lang="id">
<head>
Halo, Dunia!
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
fungsi halo() {
// sapa dunia
Halo, <em>Dunia!</em>
[Link]();
[Link](msg);
[Link]();
}
//]]>
</script>
</head>
<body onload="hello()">
<noscript>
<p>Saya masih di sini, Dunia!</p>
</body>
</html>
Tentu saja contoh 1.6 hanyalah penggunaan yang disederhanakan darinoscript; Anda akan melihat penggunaan
lebih canggih lebih lanjut di buku ini, serta metode alternatif dengan pro-
teção untuk skrip.
Untuk menguji contoh 1.6, saya menggunakan ekstensi Firefox yang disebut Web Developer
Toolbar. Di bilah ini terdapat opsi untuk menonaktifkan dukungan JavaScript.
Jika JavaScript diaktifkan, pesan asli "Halo, Dunia!" ditampilkan. Namun,
ketika saya menggunakan alat untuk menonaktifkan dukungan JavaScript, pesan lain
tampilkanSaya masih di sini, dunia!Meskipun Anda dapat menonaktifkan scripting langsung di
peramban, saya menemukan bahwa alat pengembang seperti aWeb Developer
Toolbar membuat pengujian jauh lebih mudah.
AlatapayangAndagunakantergantungpadabrowseryangAndapilihuntukmengembangkan.
Saya lebih suka mengembangkan dengan Firefox dan memanfaatkanToolbar PengembangWeb secara ekstensif dan dari
Firebug, alat pemrograman canggih untuk debugging. Lebih lanjut, di bab 6, yang mencakup
deteksi dan solusi masalah serta debugging, kita akan memeriksa lebih dekat ini
topik, begitu juga dengan alat dan opsi lain yang tersedia untuk browser lain.