Sebelum membaca buku ini, saya ingin mengucapkan terima kasih kepada tim teknis Taobao atas terjemahan inti Javascript ini dan Flanagan karena telah menulis buku ini. Terima kasih atas berbagi tanpa pamrih Anda, dan hanya catatan ini yang didedikasikan untuk kerja keras Anda.
1: Inti bahasa JavaScript
Setelah bab ini, kami akan fokus terutama pada dasar -dasar JavaScript. Bab 2 Kami akan menjelaskan komentar komentar, titik koma dan unicode dari JavaScript; Bab 3 akan lebih menarik, terutama menjelaskan variabel dan penugasan JavaScript
Berikut adalah beberapa contoh kode untuk menggambarkan konten kunci dari dua bab pertama.
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
// Konten setelah tebasan ganda milik komentar
// Baca komentar di sini dengan cermat, itu akan menjelaskan kode JavaScript
// Variabel adalah nama simbolis yang mewakili nilainya
// Variabel dideklarasikan melalui kata kunci var
var x; // menyatakan variabel x
// nilainya dapat ditetapkan ke variabel melalui simbol
x = 0; // Nilai variabel x sekarang 0
x // Dapatkan nilainya dengan nama variabel.
// JavaScript mendukung banyak tipe data
x = 1; //Nomor
x = 0,01; // bilangan bulat dan bilangan real berbagi tipe data
x = "halo dunia"; // Bangun string teks dalam kutipan ganda
x = 'halo dunia'; // Kutipan tunggal juga membentuk string.
x = true; // boolean
x = false; // nilai boolean lainnya
x = null; // NULL adalah nilai khusus. Artinya kosong
x = tidak terdefinisi; // tidak ditentukan dan nol sangat mirip
</script>
Dalam JavaScript, tipe yang paling penting adalah objek dan array. Bab 6 memperkenalkan objek dan Bab 7 memperkenalkan array. Objek dan array sangat penting dalam JavaScript. Sedemikian rupa sehingga mereka dapat dilihat di mana -mana di buku ini.
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
// Tipe terpenting dalam JavaScript adalah objeknya
// Objek adalah kumpulan pasangan nama/nilai, atau kumpulan nilai string ke nilai yang dipetakan.
var book = {// objek tertutup dalam kawat gigi keriting
Topik: "JavaScript", // Nilai Atribut "Topik" adalah JavaScript
Fat: Benar // Nilai Properti Lemak Benar
}; // Curly Braces di ujung kanan.
// Akses properti objek melalui "." atau "[]".
book.topic // => "javascript"
Pesan ["Fat"] // => Benar Cara Lain Untuk Mendapatkan Atribut,
Book.Author = "AHTHW"; // Buat atribut baru berdasarkan penugasan
book.content = {}; // {} adalah objek kosong. Itu tidak memiliki atribut
// JavaScript juga mendukung array (daftar diindeks oleh array)
var primes = [2, 3, 5, 7]; // Memiliki kombinasi 4 nilai, batas ditarik oleh "[" ""] "
Primes [0] // => 2: Objek pertama dari array, indeks adalah 0
Primes.length // => 4, jumlah elemen dalam array
Primes [primes.length-1] // => 7: Elemen terakhir dalam array
Primes [4] = 9; // Tambahkan elemen baru berdasarkan penugasan
Primes [4] = 11; // Ubah elemen yang ada dengan penugasan
var kosong = []; // array kosong, dengan 0 elemen
kosong.length // =>: 0
// Array dan objek dapat berisi array atau objek lain.
var point = [// array dengan dua elemen
{x: 0, y: 0}, // Setiap elemen adalah objek
{x: 1, y: 1}
];
var data = {// Objek yang berisi dua atribut
Trial1: [[1,2], [3,4]], // Setiap objek adalah array
Trial2: [[2,3], [4,5]] // Elemen array juga array
};
</script>
Sintaks kode di atas yang mendefinisikan elemen array melalui tanda kurung persegi dan mendefinisikan hubungan pemetaan antara nama atribut objek dan nilai atribut melalui kurung keriting. Bab 4 secara khusus diperkenalkan. Ekspresi adalah frasa dalam JavaScript. Frasa ini dapat dihitung untuk mendapatkan nilai, dan merujuk nilai atribut objek atau elemen array melalui "," dan "[]" untuk membentuk ekspresi.
Metode penulisan ekspresi yang paling umum dalam JavaScript adalah operator seperti kode berikut (Oprator)
Salinan kode adalah sebagai berikut:
// Operator sebagai operator menghasilkan nilai baru
// operator aritmatika yang paling umum
3+2 // => 5 tambahan
3-2 // => pengurangan
3*2 // => Multiple
3/2 // => Divisi
Poin [1] .x -Point [0] .x // => Operasi yang kompleks juga dapat bekerja seperti biasa
"3"+"2" // => 32. Anda dapat menyelesaikan operasi tambahan atau splicing string.
// JavaScript mendefinisikan beberapa operator aritmatika sebagai singkatan
var count = 0; // Tentukan variabel
Count ++; // Tingkatkan 1
menghitung--; // penurunan 1
Hitung += 2; // Increment Auto 2 sama dengan "Hitung = Hitung + 2;"
Hitung *= 3 // Gandakan 3. Cara yang sama seperti "hitung = hitung *3;" ditulis
Count // => 6: Nama variabel itu sendiri juga merupakan ekspresi
// Operator hubungan kesetaraan digunakan untuk menentukan apakah kedua nilai tersebut sama atau tidak
// tidak setara, lebih besar dari, kurang dari hasil operasi operator benar atau salah
var x = 2, y = 3; // Tanda yang sama di sini berarti penugasan, tidak relatif sama
x == y; // => false sama
X! = y; // => true
x <y; // => true: kurang dari
x <= y; // Benar kurang dari atau sama dengan
x> y; // false lebih besar dari
x> = y; // false lebih besar dari atau sama dengan
"dua" == "tiga"; // Salah dua string tidak sama
"dua"> "tiga"; // Benar indeks "tw" dalam alfabet lebih besar dari "th"
false == (x> y); // ture false = false;
// Operator logis digabungkan atau terbalik dari nilai boolean
(x == 2) && (y == 3); // => benar kedua perbandingan itu benar. && adalah "dan"
(x> 3) || (y <3); // => false tidak ada perbandingan yang benar. || berarti "atau"
Lai (x == y); // => Benar! Menunjukkan pencarian terbalik
Jika "frasa" dalam JavaScript adalah ekspresi, maka seluruh kalimat disebut pernyataan, yang akan dijelaskan secara rinci dalam Bab 5.
Dalam kode di atas, baris yang diakhiri dengan titik koma adalah semua pernyataan. Dengan cara yang kasar, ekspresi hanya menghitung satu nilai (atau nilai yang dikandungnya tidak peduli) tetapi mereka mengubah keadaan program yang sedang berjalan. Dalam hal di atas, pernyataan deklarasi variabel dan pernyataan penugasan telah terlihat. Jenis pernyataan lain adalah "struktur kontrol", seperti penilaian dan lingkaran bersyarat. Setelah memperkenalkan fungsi, kami memberikan kode contoh yang relevan.
Fungsi adalah cuplikan kode JavaScript dengan nama dan parameter yang dapat didefinisikan dan digunakan beberapa kali sekaligus. Bab 8 akan secara resmi menjelaskan fungsi secara rinci. Seperti objek dan array, fungsi disebutkan di banyak tempat dalam buku ini, jadi berikut adalah beberapa kode contoh sederhana.
Salinan kode adalah sebagai berikut:
// Fungsi ini adalah segmen kode JavaScript dengan parameter Treat, yang dapat ditransfer beberapa kali
fungsi plus1 (x) {// Tentukan fungsi bernama plus1 dengan parameter x
mengembalikan x + 1; // mengembalikan nilai yang 1 lebih besar dari yang dilewati.
} // Blok kode fungsi adalah bagian yang dibungkus dengan kawat gigi keriting
plus1 (y) //
var square = fungsi (x) {// fungsi adalah nilai yang dapat ditetapkan ke variabel
mengembalikan x*x; // Hitung nilai fungsi
}; // titik titik koma menunjukkan akhir dari pernyataan penugasan
persegi (plus1 (y)); // Satu dua fungsi dalam satu ekspresi
Ketika fungsi dan objek ditulis bersama, fungsi diprogram dengan "metode" (metode)
Salinan kode adalah sebagai berikut:
// Saat fungsi ditetapkan ke atribut objek, kami menyebutnya
// "Metode", semua objek JavaScript berisi metode
var a = []; // Buat array kosong
A.Push (1,2,3); // tambahkan objek ke array ke metode push ()
A.Reverse (); // Pembalikan Data
// document.write (a)
// kita dapat mendefinisikan metode sub- , kata kunci "ini" adalah metode definisi
Referensi ke objek //, contoh di sini adalah array yang berisi dua informasi posisi titik yang disebutkan di atas.
points.dist = function () {// Tentukan metode untuk menghitung jarak antara dua titik
var p1 = ini [0]; // Dapatkan referensi ke array saat ini melalui kata kunci ini
var p2 = ini [1]; // dan dapatkan dua elemen pertama dari array yang disebut
var a = p2.x- p1.y; // Jarak pada x sumbu koordinat
var b = p2.y - p1.y; // Jarak pada sumbu koordinat Y
return math.sqrt (a * a + "kami menyebutnya" + b * b); // Teorema Pythagoras
}; //Math.sqrt () menghitung root kuadrat
points.dist () // => temukan jarak antara dua titik
Sekarang, berikan beberapa contoh pernyataan kontrol. Di sini fungsi contoh berisi pernyataan kontrol JavaScript yang paling umum dalam tubuh.
Salinan kode adalah sebagai berikut:
// Di sini pernyataan JavaScript menggunakan sintaks ini untuk memasukkan penilaian dan loop bersyarat
// Sintaks yang mirip dengan Java C ++ dan bahasa lain digunakan
fungsi abs (x) {// temukan fungsi nilai absolut
if (x> = 0) {// jika
mengembalikan x; // Jika benar, jalankan kode ini
} else {// false execute
return -x;
}
}
function factprial (n) {// menghitung faktorial
produk var = 1; // Tetapkan nilai 1 ke produk
While (n> 1) {// loop untuk mengeksekusi {} konten saat ekspresi nilai () benar
Produk *= n; // Produk = Produk * Singkatan
N--; // N = N-1 Metode Penulisan
} // loop berakhir
produk pengembalian; // mengembalikan produk
}
FactPrial (4) // => 24 1*4*3*2 Document.write (Factival (4))
Function factoral2 (n) {// Cara lain untuk menulis loop
var i, produk = 1; //
untuk (i = 2; i <= n; i ++) // Tingkatkan i dari 2 hingga n
Produk *= i; // loop body, ketika hanya ada satu kalimat kode di badan loop, olos {}
produk pengembalian; // Hitung dan kembalikan faktorial yang baik;
}
FacTorial2 (5) //document.write(factorial2(5)) => 120: 1*2*3*4*5
JavaScript adalah bahasa pemrograman yang berorientasi objek, tetapi sangat berbeda dari objek halaman tradisional. Bab 9 akan menjelaskan JavaScript yang berorientasi objek secara rinci. Bab ini akan memiliki banyak kode sampel, yang merupakan bab terpanjang dalam buku ini.
Berikut adalah contoh sederhana, kode ini menunjukkan cara mendefinisikan kelas dalam JavaScript untuk mewakili titik -titik dalam geometri wajah 2D. Objek yang dipakai dalam kelas ini memiliki metode yang disebut r () untuk menghitung jarak dari mengubah titik ke asal.
Salinan kode adalah sebagai berikut:
// Tentukan konstruktor untuk menginisialisasi objek titik baru
titik fungsi (x, y) {// konstruktor umumnya dimulai dengan huruf kapital
this.x = x; // Kata kunci ini mengacu pada instance yang diinisialisasi
this.y = y; // parameter fungsi penyimpanan sebagai atribut suatu objek
}
// Buat instance menggunakan kata kunci dan konstruktor baru
var p = titik baru (1, 1); // poin 1, 1 dalam geometri pesawat,
// Tetapkan nilai melalui objek prototipe konstruktor
// Untuk mendefinisikan metode untuk objek titik
Point.prototype.r = function () {
return math.sqrt (// kembalikan akar kuadrat x square + y square
this.x * this.x + // ini mengacu pada objek yang mengangkut metode ini
this.y * this.y);
};
// Objek instance titik P (dan semua objek instan titik) mewarisi metode r ()
pr () // => 1.4142135623730951 /document.write (pr ())
Bab 9 adalah inti dari bagian pertama . Bab -bab selanjutnya telah diperpanjang secara sporadis, yang akan membawa kita ke akhir eksplorasi JavaScript kita.
Bab 10 terutama berbicara tentang pola pencocokan teks yang dilakukan oleh ekspresi reguler.
Bab 11 Subset inti bahasa utama dan superset gypsum JavaScript .
Sebelum memasukkan konten JavaScript pada klien, Bab 12 kami hanya memperkenalkan dua lingkungan JavaScript yang menjalankan di luar web.
2. Klien JavaScript
Ada banyak referensi silang pada titik-titik pengetahuan konten di bagian inti dari bahasa JavaScript, dan rasa pengetahuan tidak jelas. Orkestrasi konten JavaScript di sisi klien telah banyak berubah. Menurut bab ini, Anda dapat menggunakan JavaScript di browser web. (Tetapi jika Anda ingin mempelajari JavaScript dengan membaca buku ini, Anda tidak bisa hanya fokus pada bagian kedua) Bab 13 adalah bagian pertama dari bagian kedua, yang memperkenalkan cara membuat JavaScript berjalan di browser web. Bab 14 menjelaskan teknologi skrip browser web dan mencakup fungsi global penting dari klien Javascipt.
Misalnya:
Salinan kode adalah sebagai berikut:
function moveon () {
// Ajukan pertanyaan melalui kotak dialog
var answer = konfirmasi ("Apakah Anda siap?");
// Klik OK dan browser akan memuat halaman baru
if (jawab) window.location = "http://www.baidu.com";
}
// Jalankan fungsi ini setelah 1 menit (60000 milidetik)
setTimeout (Moveon, 300);
Bab 15 akan memberi tahu Anda bagaimana JavaScript dapat memanipulasi gaya HTML untuk menentukan metode tampilan konten . Isi Bab 15 akan lebih pragmatis. Melalui skrip, ini akan menunjukkan cara memilih elemen halaman web tertentu, cara mengatur atribut untuk elemen html, jika konten elemen dimodifikasi, dan cara menambahkan node baru ke dokumen
Fungsi contoh berikut menunjukkan jika Anda menemukan dan memodifikasi konten artikel dasar
Salinan kode adalah sebagai berikut:
// Informasi tertentu dalam dokumen dan pohon area lebih dari informasi debugging
// Jika elemen ini tidak ada pada dokumen, buat a
fungsi debug (msg) {
// Temukan bagian debugging dari dokumen dengan melihat atribut ID dari elemen HTML
var log = document.getElementById ("debuglog");
// Jika elemen tidak ada, buat a
if (! log) {
log = document.createelement ("div"); // Buat elemen Div baru
log.id = "debuglog"; // Tetapkan nilai ke ID dari setiap elemen
log.innerHtml = "<h1> log debug </h1>"; // Sesuaikan konten awal
document.body.appendChild (log); // Tambahkan ke akhir dokumen
}
// Sertakan pesan di <pre> dan tambahkan ke log
var pre = document.createElement ("pre"); // Buat elemen pra
var text = document.createElement (msg); // Sertakan msg pada node teks
pre.AppendChild (teks); // tambahkan teks ke pra
log.appendChild (pra); // pra tambahkan ke log
}
Bab 16 akan berbicara tentang cara menggunakan JavaScript untuk mengoperasikan elemen , yang biasanya menggunakan atribut gaya dan kelas elemen.
Salinan kode adalah sebagai berikut:
fungsi sembunyikan (e, reflow) {// memanipulasi elemen dan menyembunyikan elemen e melalui jvascript
if (reflow) {// jika parameter kedua benar
e.style.display = "none" // sembunyikan elemen ini, dan ruang yang dibutuhkan juga dijual
} kalau tidak {
E.Style.visibility = "tersembunyi"; // Sembunyikan E, mempertahankan ruang yang dibutuhkan
}
}
Sorotan fungsi (e) {// Sorot E dengan mengatur CSS
if (! e.classname) e.classname = "highcss";
kalau tidak
E.ClassName += "HighCSS";
}
Konten dan gaya elemen CSS dapat dikontrol melalui JavaScript, dan perilaku dokumen juga dapat didefinisikan melalui penangan acara. Penanganan acara adalah fungsi JavaScript yang terdaftar di pusat browser. Ketika peristiwa tertentu terjadi, browser dapat memanggil fungsi ini.
Biasanya jenis acara yang kami fokuskan adalah klik mouse dan acara kunci keyboard (smartphone adalah berbagai acara sentuh). Atau ketika browser menyelesaikan pemuatan dokumen, acara seseorang akan dipicu ketika pengguna mengubah ukuran jendela atau ketika pengguna memasukkan data ke dalam formulir.
Bab 17 akan menjelaskan secara rinci cara mendefinisikan, mendaftarkan penangan waktu, dan bagaimana browser menyebutnya ketika peristiwa terjadi.
Cara termudah untuk menyesuaikan penangan acara adalah dengan mengikat panggilan balik ke atribut yang diawali oleh HTML. Saat menulis beberapa tes program sederhana, cara yang paling praktis adalah dengan mengikat panggilan balik ke penangan "OnClick". Dengan asumsi bahwa fungsi debug () dan hide () di atas disimpan ke file debug.js dan hide.js di atas, Anda dapat menentukan event handler untuk atribut OnClick. sebagai berikut
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
// Informasi tertentu dalam dokumen dan pohon area lebih dari informasi debugging
// Jika elemen ini tidak ada pada dokumen, buat a
fungsi debug (msg) {
// Temukan bagian debugging dari dokumen dengan melihat atribut ID dari elemen HTML
var log = document.getElementById ("debuglog");
// Jika elemen tidak ada, buat a
if (! log) {
log = document.createelement ("div"); // Buat elemen Div baru
log.id = "debuglog"; // Tetapkan nilai ke ID dari setiap elemen
log.innerHtml = "<h1> log debug </h1>"; // Sesuaikan konten awal
document.body.appendChild (log); // Tambahkan ke akhir dokumen
}
// Sertakan pesan di <pre> dan tambahkan ke log
var pre = document.createElement ("pre"); // Buat elemen pra
var text = document.createElement (msg); // Sertakan msg pada node teks
pre.AppendChild (teks); // tambahkan teks ke pra
log.appendChild (pra); // pra tambahkan ke log
}
fungsi sembunyikan (e, reflow) {// memanipulasi elemen dan menyembunyikan elemen e melalui jvascript
if (reflow) {// jika parameter kedua benar
e.style.display = "none" // sembunyikan elemen ini, dan ruang yang dibutuhkan juga dijual
} kalau tidak {
E.Style.visibility = "tersembunyi"; // Sembunyikan E, mempertahankan ruang yang dibutuhkan
}
}
Sorotan fungsi (e) {// Sorot E dengan mengatur CSS
if (! e.classname) e.classname = "highcss";
kalau tidak
E.ClassName += "HighCSS";
}
</script>
Halo
<tombol onClick = "Sembunyikan (ini, true); debug ('Sembunyikan tombol 1');"> hide1 </button>
<tombol onClick = "sembunyikan (ini); debug ('hide button 2');"> hide2 </butotn>
JavaScript klien berikut menggunakan acara, yang memberikan acara yang sangat penting: acara "muat" mendaftarkan acara untuk menangani chenxing. Kolega juga menunjukkan cara yang lebih maju untuk mendaftarkan penangan acara "klik"
Salinan kode adalah sebagai berikut:
<type skrip = "Teks/JavaScript">
// Acara "Muat" hanya dapat dipecat setelah dokumen dimuat
// Jika Anda biasanya perlu menunggu acara muat terjadi sebelum Anda dapat menjalankan kode JavaScript
window.onload = function () {
// Temukan semua tag IMG di dokumen
var images = document.geteLementsbyTagname ("img");
// Transfer melalui gambar dan tambahkan pawang ke acara klik setiap node
// Sembunyikan gambar saat mengkliknya
untuk (var i = 0; i <gambar.length; i ++) {
var imge = gambar [i];
if (imge.addeventlistener) // cara lain untuk mendaftarkan penangan waktu
imge.addeventListener ("klik", sembunyikan, salah);
else // kompatibel dengan operasi IE8 sebelumnya
imge.attachevent ("onClick", hide);
}
// Ini adalah fungsi pemrosesan acara terdaftar di atas
fungsi hide (evNet) {
event.target.style.visibility = "tersembunyi";
}
};
</script>
Bab 15-17 menceritakan cara menggunakan JavaScript untuk mengontrol konten, gaya, dan perilaku halaman web (pemrosesan acara). Bab ini membahas API yang sedikit rumit, dan sejauh ini memiliki kompatibilitas browser yang buruk. Inilah sebabnya mengapa banyak programmer JavaScript memilih untuk menggunakan "perpustakaan" atau "kerangka kerja" untuk menyederhanakan pekerjaan pengkodean mereka. Yang paling populer adalah jQuery. Bab 19 Memperkenalkan Perpustakaan JQuery
Salinan kode adalah sebagai berikut:
fungsi debug (msg) {
var log = $ ("#debuglog");
if (log.length == 0) {
log = $ ("<div id = 'debuglog'> <h1> debuglog </h1> </div>");
log.appendto (document.body);
}
Document.write (log)
log.append ($ ("<pre />"). Teks (msg));
};
Empat bab dari bagian kedua yang kami sebutkan semuanya dibahas di sekitar halaman web. Empat bab berikutnya akan fokus pada toko dan beralih ke aplikasi web. Isi ini tidak dibahas bagaimana menulis dan memanipulasi konten. Gaya dan skrip yang berkembang menggunakan browser web untuk membuat dokumen; Alih -alih menjelaskan cara menggunakan browser web sebagai platform aplikasi. Dan menjelaskan API untuk mendukung aplikasi web klien yang lebih kompleks dan halus dan browser modern.
Bab 18 menjelaskan cara menggunakan JavaScript untuk memulai permintaan HTTP.
Bab 20 menjelaskan mekanisme penyimpanan data dan pemeliharaan status sesi dari aplikasi klien . Bab 21 mencakup generasi baru Aplikasi API/Grafik Penyimpanan Jaringan yang Didorong oleh HTML5. Ini didasarkan pada pengembangan browser yang mendukung API baru. Zhejiang adalah momen paling menarik Anda sebagai programmer JavaScript. Tidak ada banyak kode sampel dalam 4 bab terakhir. Contoh berikut menggunakan API baru ini.