7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

JavaScript dan DOM seri: pelajaran 1

Scroll to top
Read Time: 13 mins

Indonesian (Bahasa Indonesia) translation by graywest (you can also view the original English article)

Halo dan Selamat datang ke bagian pertama dari apa yang akan mudah-mudahan menjadi seri yang luas mencakup aspek inti pemrograman bahasa dan DOM API JavaScript.

Sementara kerangka seperti jQuery, Prototype dan MooTools adalah cara yang bagus untuk menekan browser bug dan mempercepat pengembangan, sangat penting untuk mengetahui dan memahami teknologi yang mendasari. Seri ini bermaksud untuk memberitahu Anda apa yang perlu Anda ketahui tentang JavaScript dan Document Object Model (DOM). Bahkan jika Anda bersumpah dengan sebuah perpustakaan khusus ini masih akan menguntungkan Anda - mengetahui bagaimana sesuatu bekerja di bawah kulit dapat hanya menjadi hal yang baik!

Perkenalan

JavaScript

JavaScript adalah bahasa pemrograman dinamis diketik longgar, berbasis prototipe yang digunakan dalam banyak berbagai lingkungan. Selain bahasa pemrograman sisi klien yang lazim di web, hal ini juga digunakan untuk menulis plugin untuk IDEs, dalam file PDF dan sebagai dasar untuk platform lain dan lebih tinggi abstraksi.

JavaScript didasarkan pada standar ECMAScript (ECMA-262) dan diciptakan oleh Brendan Eich Netscape. Awalnya disebut LiveScript tapi kemudian berganti untuk JavaScript, mungkin dengan tujuan tunggal menyebabkan kebingungan.

Berikut adalah beberapa fitur dalam sedikit lebih detail:

  • Bahasa pemrograman dinamis mengeksekusi pada saat runtime; mereka tidak dikompilasi. Karena ini, JavaScript kadang-kadang dianggap sebagai bahasa scripting sebagai lawan sejati pemrograman bahasa (kesalahpahaman jelas). Bila Anda memiliki JavaScript dalam dokumen HTML itu akan diurai sebagai halaman load dalam browser, maka pada "saat runtime".
  • Bahasa diketik longgar tidak memaksa setiap sistem mengetik yang kuat. Jika Anda sudah diprogram dalam C atau Java (tidak sama dengan JavaScript) Anda akan tahu bahwa ketika mendeklarasikan variabel Anda harus menentukan jenis seperti 'int' (bulat). JavaScript berbeda dalam bahwa Anda tidak perlu menetapkan jenis.
  • Untuk melakukan warisan dalam JavaScript, Anda harus menggunakan sesuatu yang disebut prototipe. JavaScript tidak mendukung kelas.
  • JavaScript adalah juga bahasa fungsional. Ini memperlakukan fungsi sebagai objek kelas pertama; ini adalah ide di balik lambda.

Memahami poin di atas tidak penting dalam belajar tentang JavaScript; ini adalah hanya beberapa ide untuk mendapatkan otak Anda dalam gigi, dan akan membantu Anda membedakan JavaScript dari bahasa pemrograman lain yang mungkin Anda alami.

Document Object Model

Document Object Model, biasanya disingkat DOM, adalah API yang melaluinya JavaScript berinteraksi dengan konten dalam sebuah situs web. JavaScript dan DOM biasanya dilihat sebagai satu kesatuan sejak JavaScript ini paling sering digunakan untuk tujuan ini (berinteraksi dengan konten di web). DOM API digunakan untuk mengakses, melintasi dan memanipulasi dokumen HTML dan XML.

Typical structure of a DOM hierarchyTypical structure of a DOM hierarchyTypical structure of a DOM hierarchy
Garis dasar dari hirarki DOM khas (sederhana)

Berikut adalah beberapa hal penting tentang DOM:

  • Jendela objek berfungsi sebagai objek global, Anda mengaksesnya dengan hanya mengetik "jendela". Dalam hal ini objek bahwa semua kode JavaScript dijalankan. Seperti semua benda memiliki properti dan metode.
    • Properti adalah variabel disimpan di bawah objek. Semua variabel yang dibuat pada halaman web authomatically menjadi properti dari objek jendela.
    • Metode adalah fungsi disimpan di bawah objek. Karena semua fungsi disimpan di bawah (setidaknya) objek jendela mereka semua dapat disebut sebagai 'metode'.
  • DOM menciptakan hierarcy yang sesuai dengan struktur masing-masing dokumen web. Hirarki ini terdiri dari node. Ada beberapa jenis DOM node, yang paling penting adalah 'Elemen', 'Teks', dan 'Dokumen'.
    • ' Elemen ' mewakili node elemen dalam halaman. Jadi jika Anda memiliki sebuah elemen ayat ('<p>') kemudian dapat diakses melalui DOM node.
    • Sebuah node 'Teks' mewakili semua teks (dalam unsur-unsur) dalam halaman. Jadi jika paragraf Anda memiliki sedikit teks di dalamnya dapat diakses langsung melalui DOM.
    • Node 'Dokumen' mewakili seluruh dokumen. (it's akar hirarki/pohon DOM).
    • Juga mencatat bahwa elemen atribut adalah DOM node sendiri.
  • Masing-masing layout engine memiliki implementasi DOM standar yang sedikit berbeda. Sebagai contoh, Firefox web browser, yang menggunakan Gecko layout engine, memiliki implementasi yang cukup baik (meskipun, tidak sepenuhnya sejalan dengan spesifikasi W3C) tetapi Internet Explorer, yang menggunakan mesin layout Trident dikenal untuk itu kereta dan lengkap implementasi; penyebab banyak penderitaan dalam komunitas pengembangan web!

Download Firebug

Jika Anda menggunakan Firefox dan Anda belum memiliki Firebug add-on saya sarankan Anda men-download dan install sekarang. Ini adalah alat yang sangat berguna untuk mendapatkan gambar yang baik dari struktur seluruh dokumen.

JavaScript di Web

Elemen naskah

Bila Anda ingin menggunakan JavaScript pada sebuah situs web itu harus dimasukkan dalam elemen naskah:

Seperti yang Anda lihat kami punya SCRIPT elemen di bagian bawah dokumen kami. Atribut TYPE harus diatur secara ketat 'aplikasi/javascript' tapi tidak mengherankan bahwa tidak bekerja di Internet Explorer, sehingga kita terjebak dengan ' text/javascript' atau atribut TYPE tidak sama sekali. Jika Anda peduli tentang validasi kemudian saran mantan mungkin akan cocok Anda.

Specify CDATA if you're using XHTMLSpecify CDATA if you're using XHTMLSpecify CDATA if you're using XHTML

Ingatlah untuk menentukan skrip sebagai CDATA!

Anda akan juga telah memperhatikan bahwa dalam elemen naskah bahwa kita memiliki beberapa baris berkomentar-out. Ini memberitahu browser XHTML-mendukung bahwa isi dari elemen naskah ' karakter data ' dan tidak boleh ditafsirkan sebagai XHTML markup. Hal ini hanya benar-benar diperlukan jika Anda berencana untuk menggunakan baik ' <' atau ' >' karakter dalam kode JavaScript Anda. Jelas Anda dapat lupa tentang semua ini jika Anda menggunakan plain HTML.

Atribut menunda

Setiap JavaScript yang kita dimasukkan ke dalam elemen naskah itu akan berjalan sebagai halaman load. Satu-satunya pengecualian adalah ketika sebuah elemen SCRIPT memiliki atribut 'menunda'. Secara default, ketika browser bertemu elemen naskah, itu akan berhenti dan menjalankan kode, maka akan membawa mengenai parsing dokumen. Atribut menunda memberitahu browser bahwa kode berisi kode tidak mengubah dokumen dan sehingga dapat menjalankan kemudian. Satu-satunya masalah dengan ini adalah bahwa ia hanya bekerja di IE, sehingga mungkin yang terbaik untuk menghindari atribut ini.

Menghubungkan ke skrip eksternal

Jika Anda ingin link ke file skrip eksternal kemudian hanya menambahkan SRC atribut untuk elemen SCRIPT Anda sesuai dengan lokasinya. Ianya biasanya ide yang lebih baik untuk memiliki file script terpisah daripada untuk menulis kode inline yang artinya dapat cache browser file. Plus Anda tidak perlu khawatir tentang CDATA omong kosong:

JavaScript essentials

Sebelum kita melanjutkan dengan DOM adalah ide yang baik untuk memiliki pemahaman dasar dari beberapa JavaScript penting. Jika Anda memiliki kesulitan memahami beberapa ini, jangan khawatir - Anda akan akhirnya menjemput mereka!

Dalam JavaScript, Anda dapat memiliki berbagai jenis nilai-nilai. Ada angka, string, Boolean, objek, Undefined dan Null:

Single-line komentar ditulis menggunakan dua garis miring maju (/ /), semua sisa teks pada baris tersebut dianggap Komentar oleh parser. Multi-baris komentar yang menandakan menggunakan ' / *' dan ' * /' untuk menyelesaikan komentar.

Nomor

Dalam JavaScript semua nomor direpresentasikan sebagai nilai-nilai floating-point. Kapan mendefinisikan variabel nomor ingat tidak untuk bungkus dalam kutipan apapun.

String

String apapun Anda menentukan secara harfiah, JavaScript tidak akan memproses itu. String adalah urutan Unicode karakter dan harus dibungkus dalam sepasang pencocokan tanda kutip tunggal atau ganda.

Boolean

Jenis Boolean sangat berguna ketika Anda ingin mengevaluasi kondisi - untuk melihat jika memenuhi kriteria tertentu. Ada hanya dua nilai-nilai Boolean yang mungkin: true dan false. Perbandingan apapun, menggunakan logical operator, akan mengakibatkan Boolean.

' ===' Anda lihat di atas adalah operator perbandingan, kita akan menutupi mereka nanti.

Fungsi

Fungsi adalah objek khusus:

Array

Array juga sebuah objek khusus dan dapat berisi jumlah nilai data. Untuk mengakses data nilai dalam sebuah array, Anda harus menggunakan nomor, disebut sebagai 'indeks' item yang Anda mencoba untuk mengambil:

Objek

Objek adalah kumpulan nilai bernama (tombol - pasangan nilai). Hal ini mirip dengan array, satu-satunya perbedaan adalah bahwa Anda dapat menentukan nama untuk setiap nilai data.

Jika/lain pernyataan

Salah satu konstruksi yang paling umum dalam JavaScript adalah 'IF' / 'ELSE' pernyataan. Ia pergi sesuatu seperti ini:

Operator JavaScript:

Alih-alih daftar mereka semua keluar di sini saya sarankan Anda mengunjungi artikel MDC pada operator. Ini menjelaskan mereka di banyak detail. Aku sudah setup beberapa contoh untuk memberi Anda gambaran tentang bagaimana beberapa operator yang digunakan di bawah ini:

Perulangan

Perulangan berguna ketika Anda perlu untuk pergi melalui semua item dalam array atau semua anggota suatu objek. Cara yang paling umum untuk loop dalam JavaScript adalah dengan menggunakan untuk baik atau saat pernyataan.

About the FOR loop in JavaScriptAbout the FOR loop in JavaScriptAbout the FOR loop in JavaScript

UNTUK loop lebih populer untuk mengulang melalui array.

Kembali ke DOM

Mengakses DOM node

Mari kita asumsikan kita memiliki XHTML dasar dokumen yang mengandung ayat dan daftar unordered:

Dalam contoh pertama ini kita akan mengakses paragraph kita dengan menggunakan metode DOM 'getElementById':

(Kode ini pergi dalam SCRIPT elemen dalam template di atas).

Variabel 'introParagraph' kini referensi ke DOM node. Kita bisa melakukan beberapa hal dengan simpul ini, - kami dapat permintaan isi dan atribut, dan dapat memanipulasi setiap aspek itu. Kami dapat menghapusnya, klon itu atau memindahkannya ke bagian lain dari DOM pohon.

Sesuatu yang hadir dalam sebuah dokumen yang kita dapat mengakses menggunakan JavaScript dan DOM API. Jadi, kita mungkin ingin mengakses unordered list dengan cara yang sama, satu-satunya masalah adalah bahwa tidak ada ID. Anda bisa memberikan ID dan kemudian menggunakan metode yang sama seperti di atas atau kita bisa mengaksesnya menggunakan 'getElementsByTagName':

getElementsByTagName

'GetElementsByTagName' metode mengembalikan hidup node koleksi/daftar. Hal ini mirip dengan array yang properti panjangnya. Satu hal yang penting untuk dicatat adalah koleksi "hidup" - jika Anda menambahkan elemen baru untuk DOM koleksi maka akan memperbarui sendiri. Karena itu adalah sebuah objek array-seperti yang kita dapat mengakses setiap node melalui indeks, dari 0 sampai total panjang koleksi (minus 1):

Accessing nodes and attributes within the DOMAccessing nodes and attributes within the DOMAccessing nodes and attributes within the DOM

Mengakses node dan atribut dalam DOM

Melintasi DOM

Istilah "melintasi" digunakan untuk menggambarkan tindakan perjalanan melalui DOM, mencari bening. DOM API memberikan kita banyak sifat node yang dapat kita gunakan untuk bergerak naik dan turun melalui semua node dalam dokumen.

Properti ini melekat dari semua node dan memungkinkan Anda untuk mengakses node berhubungan dekat:

  • Node.childNodes: Anda dapat menggunakan ini untuk mengakses semua node anak langsung dari satu elemen. Ini akan menjadi sebuah array-seperti objek, yang Anda dapat loop melalui. Node dalam array ini akan mencakup semua jenis berbeda node yang termasuk teks node dan node elemen lain.
  • Node.firstChild: Ini adalah sama dengan mengakses item pertama dalam array 'childNodes' ('Element.childNodes[0]'). Hal ini hanya jalan pintas.
  • Node.lastChild: Ini adalah sama dengan mengakses item terakhir dalam array 'childNodes' ('Element.childNodes[Element.childNodes.length-1]'). Hal ini hanya jalan pintas.
  • Node.parentNode: Ini memberi Anda akses ke orangtua node node Anda saat ini. Hanya akan ada satu simpul induk. Untuk mengakses kakek Anda hanya akan menggunakan 'Node.parentNode.parentNode' dll.
  • Node.nextSibling: Ini memberi Anda akses ke node berikutnya pada tingkat yang sama dalam DOM pohon.
  • Node.previousSibling: Ini memberi Anda akses ke node terakhir pada tingkat yang sama dalam DOM pohon.
Traversing the DOMTraversing the DOMTraversing the DOM

Melintasi dokumen (sederhana - silakan baca di bawah ini)

Jadi, seperti yang Anda lihat, melintasi DOM sangat mudah, hal ini hanya terjadi untuk mengetahui nama properti.

Satu hal yang perlu diperhatikan tentang di atas grafis: Daftar item hanya bisa diambil dalam mode bahwa jika tidak ada spasi antara mereka. Karena Anda dapat memiliki teks node dan node elemen dalam dokumen ruang di antara '<ul>' dan yang pertama '<li>' benar-benar dianggap sebagai sebuah node itu sendiri.</li></ul> Similarily unordered list tidak benar-benar paragraf di depan saudara - karena baris baru ada adalah ruang antara dua elemen - oleh karena itu, node lain! Biasanya, apa yang akan Anda lakukan dalam situasi ini akan loop melalui array 'childNodes' dan menguji 'nodeType'. 'NodeType' berarti 1 ini adalah elemen, 2 berarti itu adalah atribut, 3 berarti itu adalah sebuah teks node. Anda dapat melihat daftar lengkap di sini: https://developer.mozilla.org/En/DOM/Node.nodeType.

Itu adalah semua itu!

Ini adalah bagaimana semua utama kerja perpustakaan JavaScript dibelakang layar; menggunakan metode DOM asli dan properti untuk memberikan Anda akses ke unsur-unsur tersebut melalui sebuah abstraksi baik dipoles. Memisahkannya apa Anda dari kerangka diehards adalah bahwa Anda sekarang memiliki beberapa ide tentang bagaimana untuk bertahan hidup tanpa kerangka kerja (jika Anda tidak sudah)!

Hingga lain waktu...

Yah, itu saja untuk bagian satu. Saya harap Anda telah belajar sesuatu dari semua ramblings. Dalam bagian selanjutnya dari seri kita akan mudah-mudahan berfokus pada beberapa contoh lebih berlaku; kami mungkin akan mencakup model acara browser juga.

Dalam waktu yang berarti dan jika Anda belum sudah kemudian check out pembicaraan ini oleh Doug Crockford (Yahoo! Video situs):

Terima kasih untuk membaca!

  • Berlangganan ke NETTUTS RSS Feed untuk harian web pengembangan tuts dan artikel.


Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.