jendela
Objek jendela tidak hanya bertindak sebagai ruang lingkup global, tetapi juga mewakili jendela browser.
Objek jendela memiliki properti bagian dalam dan bagian dalam, yang bisa mendapatkan lebar dalam dan ketinggian jendela browser. Lebar dan tinggi internal mengacu pada lebar dan tinggi bersih yang digunakan untuk menampilkan halaman web setelah menghapus elemen placeholder seperti bilah menu, bilah alat, perbatasan, dll. Ada juga atribut luar dan luar, yang bisa mendapatkan seluruh lebar dan tinggi jendela browser.
Mengisi kembali:
Lebar area yang terlihat dari halaman web: document.body.clientwidth ketinggian area yang terlihat dari halaman web: document.body.clientHeight Lebar area yang terlihat dari halaman web: document.body.offsetwidth (termasuk lebar edge dan bilah gulir) Tepi Web Telphe dari Web: Document.Body.offsetheight (termasuk Wellsth) The Edge) The Edge THE FLEPS TEPS: DOCORY.OCERBODY.OFFSEIGHTHEIGHTHEIGHTHEIGHTHEIGHTHEIGHTS (THE WELADTH) THE TEGE FLEPS TEGU TEGN TEGU TEGUR) document.body.scrollwidth Tinggi teks lengkap dari halaman web: document.body.scrollheight ketinggian halaman web yang diluncurkan: document.body.scrolltop atau jQuery (dokumen) .scrolltop () Sisi kiri page: window level. window.screen.height Lebar resolusi layar: window.screen.width layar tersedia ruang kerja: window.screen.availheight layar tersedia ruang kerja: window.screen.availwidth Window Digit: window.screen.colordepth screen pixel/inch Ratio: window.creer. $ (window) .height () Lebar jendela browser: $ (window) .width ()
Khusus 1: Solusi untuk mendokumentasikan.body.scrolltop selalu 0 var scrollpos; if (typeof window.pageyoffset! = 'tidak terdefinisi') {scrollpos = window.pageyoffset; } else if (typeof document.compatmode! = 'tidak terdefinisi' && dokumen.compatmode! = 'backcompat') {scrollpos = document.documentelement.scrolltop; } lain jika (typeof document.body! = 'tidak terdefinisi') {scrollpos = document.body.scrolltop; } peringatan (scrollpos); Khusus 2: Lebar teks lengkap dari halaman web: "+ document.body.scrollwidth; tinggi teks lengkap halaman web:"+ document.body.scrollheight; Fungsi di atas kadang -kadang tidak dapat diperoleh, jadi gunakan metode berikut. var xscroll, yscroll; if (window.innerheight && window.scrollmaxy) {xscroll = document.body.scrollwidth; yscroll = window.innerheight + window.scrollmaxy; } else if (document.body.scrollheight> document.body.offsetheight) {// semua kecuali penjelajah mac xscroll = document.body.scrollwidth; yscroll = document.body.scrollheight; } else {// Explorer Mac ... juga akan bekerja di Explorer 6 Strict, Mozilla dan Safari xscroll = document.body.offsetWidth; yscroll = document.body.offsetHeight; }navigator
Objek Navigator mewakili informasi browser. Properti yang paling umum digunakan meliputi:
• navigator.appname: nama browser;
• navigator.appversion: versi browser;
• navigator.banguage: bahasa yang ditetapkan oleh browser;
• navigator.platform: jenis sistem operasi;
• Navigator.UserAgent: String agen pengguna yang diatur oleh browser.
Untuk menulis kode yang berbeda untuk browser yang berbeda, pemula suka menggunakan jika menilai versi browser, misalnya:
var width; if (getEeversion (navigator.useragent) <9) {width = document.body.clientwidth;} else {width = window.innerwidth;} Tetapi ini mungkin tidak akurat dalam penilaian dan juga sulit untuk mempertahankan kode. Cara yang benar adalah dengan memanfaatkan fitur JavaScript penuh untuk mengembalikan undefined untuk properti yang tidak ada dan secara langsung menggunakan operator sirkuit pendek || untuk menghitung:
var width = window.innerwidth || document.body.clientwidth;
layar
Objek layar mewakili informasi layar. Properti umum meliputi:
• Screen.width: Lebar layar, dalam piksel;
• screen.height: tinggi layar, dalam piksel;
• screen.colordepth: Mengembalikan jumlah digit warna, seperti 8, 16, 24.
Lokasi
Objek lokasi mewakili informasi URL dari halaman saat ini. Misalnya, URL lengkap:
http://www.example.com:8080/path/index.html?a=1&b=2#top
Dapat diperoleh dengan menggunakan location.href . Untuk mendapatkan nilai dari setiap bagian URL, Anda dapat menulisnya seperti ini:
location.protocol; // 'http'location.host; // 'www.example.com' location.port; // '8080'location.pathname; // '/path/index.html'location.search; // '? a = 1 & b = 2'location.hash; // 'ATAS'
Untuk memuat halaman baru, Anda dapat menghubungi location.assign (). Jika Anda ingin memuat ulang halaman saat ini, sangat nyaman untuk menghubungi metode location.reload ().
dokumen
Objek dokumen mewakili halaman saat ini. Karena HTML direpresentasikan sebagai struktur pohon di browser dalam bentuk DOM, objek dokumen adalah simpul akar dari seluruh pohon DOM.
Atribut judul dokumen dibaca dari <title> xxx </iteme> dalam dokumen HTML, tetapi dapat diubah secara dinamis:
Objek dokumen juga memiliki atribut cookie, yang bisa mendapatkan cookie dari halaman saat ini.
Cookie adalah pengidentifikasi nilai kunci yang dikirim oleh server. Karena protokol HTTP adalah stateless, server dapat membedakan antara permintaan pengguna mana yang dikirim olehnya, dan dapat dibedakan dengan cookie. Ketika pengguna masuk dengan sukses, server mengirim cookie ke browser, seperti user = ABC123XYZ (string terenkripsi). Setelah itu, ketika browser mengunjungi situs web, itu akan melampirkan cookie ini ke header permintaan, dan server dapat membedakan pengguna berdasarkan cookie.
Cookie juga dapat menyimpan beberapa pengaturan situs web, seperti bahasa halaman yang ditampilkan, dll.
JavaScript dapat membaca cookie di halaman saat ini melalui dokumen.cookie:
document.cookie; // 'v = 123; ingat = true; lebih suka = zh '
Karena JavaScript dapat membaca cookie di halaman, dan informasi login pengguna biasanya juga ada dalam cookie, ini menciptakan risiko keamanan yang sangat besar. Ini karena memasukkan kode javascript pihak ketiga ke dalam halaman HTML diperbolehkan:
<!-Halaman saat ini ada di wwwexample.com-> <html> <head> <script src = "http://www.foo.com/jquery.js"> </script> </adeph> </html>
Jika kode berbahaya ada dalam JavaScript dari pihak ketiga yang diperkenalkan, situs web www.foo.com akan secara langsung mendapatkan informasi login pengguna dari situs web www.example.com.
Untuk mengatasi masalah ini, server dapat menggunakan httpOnly saat mengatur cookie. Cookie yang mengatur httpOnly tidak akan dibaca oleh JavaScript. Perilaku ini diimplementasikan oleh browser, dan browser arus utama mendukung opsi httpOnly. Untuk memastikan keamanan, server harus selalu bersikeras menggunakan httponly saat mengatur cookie.
document.write () Hanya mengeluarkan konten baru ke dokumen
Jika Document.Write dieksekusi setelah dokumen dimuat, seluruh halaman HTML akan ditimpa:
Referensi: http://www.w3school.com.cn/tiy/t.asp?f=js_write_over
Dom | Dokumen
// kembalikan node dengan ID 'test': var test = document.geteLementById ('test'); // Dapatkan semua node anak langsung di bawah node tes: var cs = test.children; var first = test.firstelementchild; Metode kedua adalah menggunakan querySelector() dan querySelectorAll() . Anda perlu memahami sintaks pemilih dan kemudian menggunakan kondisi untuk mendapatkan node, yang lebih nyaman:
// Dapatkan simpul dengan ID Q1 melalui QuerySelector: var q1 = document.queryselector ('#q1'); // Dapatkan semua node di simpul Q1 yang memenuhi kondisi melalui QuerySelectorAll: var ps = q1.queryselectorall ('div.highlighted> p');Sebenarnya, simpul Dom di sini mengacu pada elemen, tetapi simpul DOM sebenarnya adalah simpul. Dalam HTML, Node mencakup banyak jenis elemen, komentar, CDATA_Section, dll., Serta jenis dokumen Node Root. Namun, sebagian besar waktu kita hanya peduli tentang elemen, yaitu, simpul yang benar -benar mengontrol struktur halaman, dan mengabaikan jenis node lainnya. Dokumen Node Root telah secara otomatis terikat pada dokumen variabel global.
Memodifikasi dom
Memodifikasi CSS juga merupakan operasi umum. Atribut gaya dari simpul DOM sesuai dengan semua CSS dan dapat langsung diambil atau diatur. Karena CSS memungkinkan nama seperti font-size, tetapi itu bukan nama properti yang valid untuk JavaScript, itu perlu ditulis ulang ke nama bergaya unta di JavaScript:
// dapatkan <p id = "p-id"> ... </p> var p = document.geteLementById ('p-id'); // atur css: p.style.color = '#ff0000'; p.style.fontsize = '20px'; p.style.paddingtop = '2em';Masukkan dom
Ada dua cara untuk memasukkan simpul baru. Salah satunya adalah menggunakan AppendChild untuk menambahkan simpul anak ke simpul anak terakhir dari simpul induk. Misalnya:
<!-Struktur html-> <p id = "js"> javascript </p> <div id = "list"> <p id = "skema"> skema </p> </div>
Tambahkan <p id="js">JavaScript</p> ke item terakhir <div id="list"> :
var js = document.getElementById ('js'), list = document.geteLementById ('list'); list.applchild (js);Sekarang, struktur HTML menjadi seperti ini:
<!-Struktur html-> <div id = "list"> <p id = "skema"> skema </p> <p id = "js"> javascript </p> </div>
Karena simpul js yang kami masukkan sudah ada di pohon dokumen saat ini, node ini pertama -tama akan dihapus dari lokasi aslinya dan kemudian dimasukkan ke lokasi baru.
Lebih sering daripada tidak, kami akan membuat simpul baru dari nol dan memasukkannya ke lokasi yang ditentukan:
haskell = document.createelement ('p'); Secara dinamis membuat node dan kemudian menambahkannya ke pohon DOM dapat mencapai banyak fungsi. Sebagai contoh, kode berikut secara dinamis membuat simpul <style> dan menambahkannya ke ujung simpul <head> , sehingga secara dinamis menambahkan definisi CSS baru ke dokumen:
var d = document.createElement ('style'); d.setAttribute ('type', 'text/css'); d.innerhtml = 'p {color: red}'; document.geteLementsbyTagname ('head') [0] .AppendChild (d);INSERTBEFOR
Bagaimana jika kita ingin memasukkan node anak ke lokasi yang ditentukan? Anda dapat menggunakan ParentElement.insertbefore (NewElement, ReferenceElement); dan simpul anak akan dimasukkan sebelum ReferenceElement.
Sering kali, perlu untuk mengulangi semua anak dari simpul orang tua, yang dapat diimplementasikan dengan mengulangi atribut anak -anak:
var i, c, list = document.geteLementById ('list'); for (i = 0; i <list.children.length; i ++) {c = list.children [i]; // Dapatkan simpul anak i-th}Hapus dom
Untuk menghapus node, pertama -tama Anda perlu mendapatkan simpul itu sendiri dan node induknya, dan kemudian hubungi Node Parent Node untuk menghapus dirinya sendiri:
// Dapatkan simpul yang akan dihapus: var self = document.geteLementById ('to-be-removed'); // Dapatkan node induk: var parent = self.parentElement; // hapus: var dihapus = parent.removechild (self); dihapus === diri; // BENARSaya perhatikan bahwa meskipun simpul yang dihapus tidak lagi ada di pohon dokumen, itu sebenarnya masih dalam memori dan dapat ditambahkan ke lokasi lain kapan saja.
Saat Anda melintasi seorang anak dari simpul induk dan melakukan operasi penghapusan, ketahuilah bahwa atribut anak-anak adalah atribut read-only dan akan diperbarui secara real time ketika simpul anak berubah. Oleh karena itu, ketika menghapus banyak node, penting untuk dicatat bahwa atribut anak -anak berubah sepanjang waktu.
Formulir Operasi
Menggunakan JavaScript untuk memanipulasi formulir mirip dengan pengoperasian DOM, karena bentuk itu sendiri juga merupakan pohon DOM.
Namun, kotak input formulir, kotak drop-down, dll. Dapat menerima input pengguna, jadi menggunakan JavaScript untuk mengoperasikan formulir dapat memperoleh konten yang dimasukkan oleh pengguna, atau mengatur konten baru untuk kotak input.
Terutama ada kontrol input berikut untuk formulir HTML:
• Kotak teks, <input type = "Text"> yang sesuai, digunakan untuk memasukkan teks;
• Kotak Kata Sandi, <Input Type = "Kata Sandi"> yang sesuai, digunakan untuk memasukkan kata sandi;
• kotak radio, <input type = "Radio"> yang sesuai, digunakan untuk memilih item;
• kotak centang, <input type = "kotak centang"> yang sesuai digunakan untuk memilih beberapa item;
• Kotak drop-down, yang sesuai <COCT>, digunakan untuk memilih item;
• Teks tersembunyi, <input type = "tersembunyi"> yang sesuai tidak terlihat oleh pengguna, tetapi teks tersembunyi akan dikirim ke server ketika formulir dikirimkan.
Dapatkan nilainya
Jika kami mendapatkan referensi ke simpul <Input>, kami dapat secara langsung memanggil nilai untuk mendapatkan nilai input pengguna yang sesuai:
// <input type = "text" id = "email"> var input = document.geteLementById ('email'); input.value; // 'nilai yang dimasukkan oleh pengguna' Metode ini dapat diterapkan pada text , password , hidden dan select . Namun, untuk kotak radio dan centang, pengembalian atribut value selalu nilai preset HTML, dan yang perlu kita dapatkan sebenarnya adalah apakah pengguna memiliki opsi "diperiksa", jadi checked harus digunakan untuk menilai:
// <label> <input type = "Radio" name = "Weekday" id = "Monday" value = "1"> Monday </label> // <label> <input type = "Radio" name = "weekday" id = "tuesday" value = "2"> Selasa </label> var mon = document.getElementById ('Monday "); var tue = document = documentel> var mon = document.getElementById (' Senin '); var tue = document = document. // '1'tue.value; // '2'mon.Checked; // Benar atau SalahMenetapkan nilai
Mengatur nilainya mirip dengan mendapatkan nilainya. Untuk teks, kata sandi, tersembunyi dan pilih, Anda dapat mengatur nilainya secara langsung:
// <input type = "text" id = "email"> var input = document.geteLementById ('email'); input.value = '[email protected]'; // Konten kotak teks telah diperbaruiUntuk radio dan kotak centang, atur diperiksa ke true atau false.
Kontrol HTML5
HTML5 telah menambahkan sejumlah besar kontrol standar, yang umum digunakan termasuk tanggal, datetime, datetime-lokal, warna, dll. Mereka semua menggunakan tag <sput>:
<input type = "date" value = "2015-07-01">
<input type = "dateTime-local" value = "2015-07-01T02: 03: 04">
<input type = "color" value = "#ff0000">
Browser yang tidak mendukung HTML5 tidak dapat mengenali kontrol baru dan akan menampilkannya sebagai tipe = "teks". Browser yang mendukung HTML5 akan mendapatkan string yang diformat. Misalnya, nilai input "date" akan dijamin akan menjadi tanggal yang valid dalam format yyyy-mm-dd, atau string kosong.
Kirim formulir
Akhirnya, JavaScript dapat menangani pengiriman formulir dalam dua cara (metode AJAX diperkenalkan dalam bab berikut).
Metode pertama adalah mengirimkan formulir melalui metode submit () dari elemen <sorm>. Misalnya, sebagai respons terhadap acara <Tolly> klik, kirimkan formulir dalam kode JavaScript:
<Form id = "Test-Form"> <input type = "text" name = "test"> <tombol type = "tombol" onclick = "doSubMitform ()"> Kirim </butted> </form> <script> function doSubMitform () {var form = document.getElementById ('test-form'); // Anda dapat memodifikasi input formulir di sini ... // Kirim Formulir: Form.submit ();} </script> Kerugian dari metode ini adalah bahwa ia mengganggu pengiriman normal browser untuk membentuk. Browser mengirimkan formulir saat mengklik <button type="submit"> secara default, atau pengguna menekan tombol ENTER di kotak input terakhir. Oleh karena itu, cara kedua adalah menanggapi peristiwa onsubmit dari <form> sendiri dan membuat perubahan saat mengirimkan formulir:
<Form id = "uji-form" onsubmit = "return checkForm ()"> <input type = "text" name = "test"> <Tombol type = "kirim"> Kirim </button> </form> <script> function checkForm () {var form = document.getElementById ('test-Form'); // Anda dapat memodifikasi input formulir di sini ... // Lanjutkan ke langkah berikutnya: return true;} </script> Perhatikan bahwa return true diperlukan untuk memberi tahu browser untuk terus mengirimkan. Jika return false , browser tidak akan terus mengirimkan formulir. Situasi ini biasanya sesuai dengan kesalahan input pengguna, dan pengguna diminta untuk pesan kesalahan dan formulir diakhiri.
Saat memeriksa dan memodifikasi <input> , memanfaatkan penuh <input type="hidden"> untuk meneruskan data.
Misalnya, banyak formulir login ingin pengguna memasukkan nama pengguna dan kata sandi, tetapi, untuk alasan keamanan, tidak mengirimkan kata sandi plaintext saat mengirimkan formulir, tetapi MD5 dari kata sandi. Pengembang JavaScript biasa akan secara langsung memodifikasi <input> :
<Form ID = "Metode Login-Form" = "Posting" OnSubMit = "Return CheckForm ()"> <input type = "text" id = "username" name = "username"> <input type = "kata sandi" id = "kata sandi" name = "kata sandi" (tombol type = "kirim"> Kata sandi </kata sandi> </kata sandi> </kata sandi ') <) <) <) {varpor) {kirimkan (KOMPORT> </form kata sandi> </form ’’ ’’. // ubah plaintext yang dimasukkan oleh pengguna ke md5: pwd.value = tomd5 (pwd.value); // Lanjutkan ke langkah selanjutnya: kembalikan true;} </script> Metode ini tampaknya baik -baik saja, tetapi ketika pengguna memasukkan kata sandi untuk dikirim, kotak kata sandi akan tiba -tiba ditampilkan dari beberapa * hingga 32 * (karena MD5 memiliki 32 karakter).
Untuk tidak mengubah input pengguna, Anda dapat menggunakan <input type="hidden"> untuk mengimplementasikan:
<form id="login-form" method="post" onsubmit="return checkForm()"> <input type="text" id="username" name="username"> <input type="password" id="input-password"> <input type="hidden" id="md5-password" name="password"> <button type="submit">Submit</button></form><script>function checkForm () {var input_pwd = document.geteLementById ('input-password'); var md5_pwd = document.geteLementById ('md5-password'); // Ubah plaintext yang dimasukkan oleh pengguna ke md5: md5_pwd.value = tomd5 (input_pwd.value); // Lanjutkan ke langkah selanjutnya: kembalikan true;} </script>Perhatikan bahwa <Input> dengan ID MD5-Password bertanda nama = "Kata sandi", sedangkan ID yang dimasukkan oleh pengguna adalah input-password tanpa atribut nama. Data tanpa atribut nama <Input> tidak akan dikirimkan.
File operasi
Dalam formulir HTML, satu -satunya kontrol yang dapat mengunggah file adalah <input type = "file">.
Catatan: Ketika suatu formulir berisi <input type = "file">, enctype formulir harus ditentukan sebagai multipart/form-data, dan metode harus ditentukan sebagai postingan, sehingga browser dapat mengkode dengan benar dan mengirim data formulir dalam format multipart/form-data.
Untuk alasan keamanan, browser hanya memungkinkan pengguna untuk mengklik <input type = "file"> untuk memilih file lokal. Menggunakan JavaScript untuk menetapkan nilai ke <input type = "file"> tidak berpengaruh. Ketika pengguna memilih untuk mengunggah file, JavaScript tidak dapat memperoleh jalur nyata ke file:
File yang akan diunggah:
Biasanya, file yang diunggah diproses oleh server backend. JavaScript dapat memeriksa ekstensi file saat mengirimkan formulir untuk mencegah pengguna mengunggah file dalam format yang tidak valid:
var f = document.getElementById ('uji-file-ucload'); var filename = f.value; // 'c: /fakepath/test.png'if (! FILENAME ||! (FileName.endswith ('. Jpg ') || filename.endswith ('. mengembalikan false;}File API
Karena JavaScript memiliki operasi yang sangat terbatas pada file yang diunggah oleh pengguna, terutama ketidakmampuan untuk membaca konten file, banyak halaman web yang memerlukan file operasi harus diimplementasikan menggunakan plug-in pihak ketiga seperti flash.
Dengan popularitas HTML5, file API yang baru ditambahkan memungkinkan JavaScript untuk membaca konten file dan mendapatkan lebih banyak informasi file.
File API HTML5 menyediakan dua objek utama: File dan FileReader, yang dapat memperoleh informasi file dan membaca file.
Contoh berikut menunjukkan cara membaca file gambar yang dipilih pengguna dan melihat pratinjau gambar dalam <verv>:
Pratinjau Gambar:
var fileInput = document.getElementById ('test-image-file'), info = document.getElementById ('test-file-info'), preview = document.geteLementById ('test-image-preview'); // Dengarkan Acara Ubah: FileInput.addeventListener ('ubah', function () {// CLEAR LAYANGAN: Preview.Style.BackgroundImage = ''; // Periksa apakah file tersebut dipilih: if (! FileInput.value) {info.innerHtml = 'tidak ada file yang dipilih'; return;}// hancur 0; info.innerHtml = 'file:' + file.name + '<br>' + 'size:' + file.size + '<br>' + 'dimodifikasi:' + file.lastModifiedDate; if (file. File! ' dalam bentuk dataUrl: reader.readasDataurl (file);});Kode di atas menunjukkan cara membaca konten file melalui file API HTML5. File yang dibaca dalam bentuk dataUrl adalah string, mirip dengan data: gambar/jpeg; base64,/9j/4aaqsk ... (encoding base64). Sering digunakan untuk mengatur gambar. Jika pemrosesan sisi server diperlukan, kirim karakter setelah string base64 ke server dan memecahkan kode dengan base64 untuk mendapatkan konten biner dari file asli.
Panggilan balik
Kode di atas juga menunjukkan fitur penting dari JavaScript, yang merupakan mode eksekusi utamanya. Dalam JavaScript, mesin eksekusi JavaScript browser selalu dieksekusi dalam mode tunggal saat menjalankan kode JavaScript, yang berarti bahwa kapan saja, tidak mungkin bagi kode JavaScript untuk memiliki lebih dari 1 utas yang dieksekusi pada saat yang sama.
Anda mungkin bertanya, bagaimana cara menangani multitasking dalam mode tunggal?
Dalam JavaScript, multitasking sebenarnya disebut secara tidak sinkron, seperti kode di atas:
reader.readasdataurl (file);
Operasi asinkron akan dimulai untuk membaca konten file. Karena ini adalah operasi yang tidak sinkron, kami tidak tahu kapan operasi berakhir dengan kode JavaScript, jadi kami perlu mengatur fungsi panggilan balik terlebih dahulu:
reader.onload = function (e) {// Saat file dibaca, fungsi ini secara otomatis disebut:};Ketika file yang dibaca selesai, mesin JavaScript akan secara otomatis memanggil fungsi panggilan balik yang kami atur. Ketika fungsi callback dijalankan, file telah dibaca, sehingga kami dapat dengan aman mendapatkan konten file di dalam fungsi callback.
Artikel di atas secara singkat berbicara tentang objek JavaScript Browser adalah semua konten yang saya bagikan dengan Anda. Saya harap ini dapat memberi Anda referensi dan saya harap Anda dapat mendukung wulin.com lebih lanjut.