HTML5 memperkenalkan banyak fitur dan peningkatan baru, salah satunya adalah semantik. HTML5 menambahkan elemen baru untuk meningkatkan semantik. Kami sekarang hanya menggunakan 2, header dan footer. Tag <teader> mendefinisikan header (informasi pengantar) dari dokumen, dan tag <tooter> mendefinisikan footer bagian atau dokumen. Biasanya, elemen ini akan berisi nama pencipta, tanggal pembuatan dokumen, dan/atau informasi kontak.
[Tag semantik memberikan informasi yang berarti dalam HTML, bukan hanya mendefinisikan efek visual. ]
Tempat terbaik untuk menempatkan kode javascriptAda alasan mengapa kami menempatkan kode JavaScript setelah semua konten halaman sebelum tag </body>, bukan di area <head> </head>.
Biasanya, browser memuat dan membuat konten dari atas ke bawah. Jika kode JavaScript ditempatkan di area kepala, isi dokumen HTML tidak akan dimuat sampai semua kode JavaScript dimuat. Bahkan, semua pemuatan dan rendering diblokir jika browser memuat kode JavaScript di halaman. Inilah sebabnya kami menempatkan kode JavaScript di akhir dokumen sehingga kami dapat memberikan kinerja yang lebih tinggi.
Saat menerjemahkan buku ini, versi jQuery terbaru adalah 1.7 (kata -kata aslinya adalah: pada saat menulis buku ini, versi jQuery yang paling besar adalah 1.4.4. JQuery memiliki versi Min dan versi pengembangan, Anda dapat memilih sesuka Anda). Inilah sebabnya mengapa nama file jQuery dalam contoh kode kami adalah jQuery-1..7.min.js. Nomor versi ini mungkin tidak berfungsi seperti yang Anda gunakan, tetapi penggunaannya sama kecuali jQuery memiliki modifikasi besar untuk membuat versi baru tidak lagi kompatibel ke belakang.
Jalankan kode kami setelah halaman siapKita perlu memastikan halaman sudah siap sebelum menjalankan kode JavaScript kami. Jika tidak, kami akan mendapatkan kesalahan ketika kami mencoba mengakses elemen yang tidak dimuat. JQuery memberi kami metode untuk memastikan bahwa halaman dimuat. Kodenya adalah sebagai berikut:
jQuery (dokumen) .ready (function () {
// cododere.
});
Bahkan, kita hanya perlu menulis ini:
$ (function () {
// cododere.
});
Tag $ ini adalah singkatan dari jQuery. Ketika kita menelepon (kata adalah arti panggilan, zhuangability) $ (sesuatu), kita sebenarnya memanggil jqery (sesuatu).
$ (function_callback) adalah singkatan lain untuk ReadyEvent.
Itu sama dengan kode berikut:
$ (dokumen) .ready (function_callback);
Demikian pula, sama seperti berikut:
jQuery (ducment) .ready (function_callbak);
Kuis1. Lokasi mana yang paling cocok untuk menempatkan kode JavaScript?
A. Sebelum tag <head>
B. Masukkan ke tengah elemen <head> </head>.
C. Setelah tag <body>
d. </body> Sebelum tag
Buat elemen game pingpong
Kami siap membuat game pingpong.
Bergerak
1. Kami akan melanjutkan dengan contoh instalasi jQuery kami dan membuka index.html di editor.
2. Lalu, gunakan Node Div di tubuh untuk membuat platform game, dengan 2 ketukan dan bola di platform game:
<Divid = "Game">
<Divid = "Playground">
<divid = "paddlea" class = "daddle"> </div>
<Divid = "Paddleb" class = "Paddle"> </div>
<Divid = "Ball"> </div>
</div>
</div>
3. Kami sekarang telah membangun objek game dan sekarang memberi mereka gaya. Masukkan kode ke dalam elemen kepala:
<tyle>
#tempat bermain{
Latar belakang:#e0ffe0;
Lebar: 400px;
Tinggi: 200px;
Posisi: kerabat;
meluap: tersembunyi;
}
#bola{
Latar Belakang: #FBB;
Posisi: Absolute;
Lebar: 20px;
Tinggi: 20px;
Kiri: 150px;
Atas: 100px;
Border-Radius: 10px;
}
.mendayung{
Latar belakang: #bbf;
Kiri: 50px;
Atas: 70px;
Posisi: Absolute;
Lebar: 30px;
Tinggi: 70px;
}
#paddleb {
Kiri: 320px;
}
</tyle>
4. Di bagian terakhir, kami menempatkan logika JavaScript di belakang referensi jQuery. Kami menulisnya ke file terpisah karena kode kami akan menjadi lebih besar dan lebih besar. Oleh karena itu, kita perlu membuat folder bernama html5/"> html5games.pingpong.js.
5. Setelah kami menyiapkan file JavaScript, kami perlu menghubungkannya ke file HTML kami. Tempatkan kode berikut di depan tag </body> dari file index.html:
<scriptSrc = "js/jQuery-1.7.min.js"> </script>
<scriptSrc = "js/html5games.pingpong.js"> </script>
[Tip Ramah Penerjemah: Coba
<ScriptSrc = "JS/JQuery-1.4.4.js"/>
<scriptsrc = "js/html5games.pingpong.js"/>
Anda akan menemukan bahwa menulis sesuai dengan spesifikasinya akan menghindari banyak masalah]
6. Kami memasukkan logika game ke dalam html5games.pingpong.js. Inilah satu -satunya logika kami sekarang, menginisialisasi raket:
// codeinside $ (function () {} willrunafterthedomisloadedand
siap
$ (function () {
$ ("#paddleb"). CSS ("Top", "20px");
$ ("#paddlea"). CSS ("Top", "60px");
});
7. Sekarang mari kita uji hasil kita di browser. Buka file index.html di browser, kita akan melihat tangkapan layar yang mirip dengan tangkapan layar berikut:
Apa yang terjadi?Ada 2 raket dan 1 bola dalam permainan kami. Kami juga menginisialisasi posisi 2 raket menggunakan jQuery.
[Itu saja hari ini, dan bagian selanjutnya adalah tentang pemilih jQuery dan fungsi CSS. Jika Anda memiliki kesalahan atau pertanyaan, silakan tinggalkan saya pesan]
Melihat komentar Anda adalah motivasi terbesar saya!