fenêtre
L'objet de fenêtre agit non seulement comme une portée globale, mais représente également une fenêtre de navigateur.
L'objet de fenêtre a des propriétés innermeuses et intérieures, qui peuvent obtenir la largeur intérieure et la hauteur de la fenêtre du navigateur. La largeur et la hauteur internes se réfèrent à la largeur et à la hauteur nettes utilisées pour afficher la page Web après avoir retiré les éléments d'espace réservé tels que la barre de menus, la barre d'outils, la bordure, etc. Il y a aussi une largeur et des attributs extérieurs, ce qui peut obtenir toute la largeur et la hauteur de la fenêtre du navigateur.
Remplir:
La largeur de zone visible de la page Web: document.body.clientwidth La hauteur visible de la zone de la page Web: document.body.clientheight La largeur de zone visible de la page Web: document.body.offsetwidth (y compris la largeur de la barre Edge et de défilement) La hauteur de la zone visible de la page Web: Document.Body. Document.Body.ScrollWidth La hauteur du texte intégral de la page Web: document.body.scrollHeight La hauteur de la page Web en cours de déploiement: document.body.scrolltop ou jQuery (document) .scrolltop () Le côté gauche de la page Web en cours de déploiement: document.body.scrollleft sur la page Web Part body: window.Screentop Page Web partie: fenêtre: fenêtre. Window.Screen.Height La largeur de résolution de l'écran: Window.Screen.Width L'écran Disponible Espace de travail Hauteur: Window.Screen.AvailHeight L'écran Disponible Espace de travail Largeur: Window.Screen.AvailWidth Les Digits de Color de la dépist $ (fenêtre) .Height () La largeur de la fenêtre du navigateur: $ (fenêtre) .Width ()
Spécial 1: Solution à Document.Body.ScrollTop est toujours 0 var ScrollPos; if (typeof window.pageyoffset! = 'undefined') {scrollpos = window.pageyoffset; } else if (typeof document.compatMode! = 'undefined' && document.compatmode! = 'backcompat') {scrollpos = document.documentElement.scrolltop; } else if (typeof document.body! = 'undefined') {scrollpos = document.body.scrolltop; } alert (scrollPos); Special 2: La largeur du texte complet de la page Web: "+ document.body.scrollwidth; La hauteur du texte intégral de la page Web:" + document.body.scrollHeight; Les fonctions ci-dessus ne peuvent parfois pas être obtenues, alors utilisez la méthode suivante. 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) {// tout sauf explorateur mac xscroll = document.body.scrollwidth; yscroll = document.body.scrollHeight; } else {// explorateur mac ... fonctionnerait également dans Explorer 6 Strict, Mozilla et Safari xscroll = document.body.offsetwidth; yscroll = document.body.offsetheight; }navigateur
L'objet Navigator représente les informations du navigateur. Les propriétés les plus couramment utilisées comprennent:
• Navigator.Appname: nom du navigateur;
• Navigator.Appversion: version du navigateur;
• Navigator.Language: la langue définie par le navigateur;
• Navigator.Platform: type de système d'exploitation;
• Navigator.UserAgent: la chaîne utilisateur-agent définie par le navigateur.
Afin d'écrire différents code pour différents navigateurs, les débutants aiment utiliser si pour juger la version du navigateur, par exemple:
var width; if (getIEVERSION (NAVIGATOR
Mais cela peut être inexact dans le jugement et il est également difficile de maintenir le code. La bonne façon consiste à utiliser pleinement la fonctionnalité de JavaScript de retour undefined pour les propriétés inexistantes et d'utiliser directement l'opérateur de court-circuit || Pour calculer:
var width = window.innerwidth || document.body.clientwidth;
écran
L'objet d'écran représente les informations de l'écran. Les propriétés courantes comprennent:
• Écran.Width: largeur d'écran, en pixels;
• Screen.Height: Hauteur de l'écran, en pixels;
• Screen.Colordepth: renvoie le nombre de chiffres de couleur, tels que 8, 16, 24.
emplacement
L'objet de localisation représente les informations URL de la page actuelle. Par exemple, une URL complète:
http://www.example.com:8080/path/index.html?a=1&b=2#top
Il peut être obtenu en utilisant location.href . Pour obtenir les valeurs de chaque partie de l'URL, vous pouvez l'écrire comme ceci:
emplacement.protocol; // 'http'location.host; // "www.example.com" location.port; // '8080'location.pathname; // '/path/index.html'location.search; // '? a = 1 & b = 2'location.hash; // 'HAUT'
Pour charger une nouvelle page, vous pouvez appeler Emplacement.Assign (). Si vous souhaitez recharger la page actuelle, il est très pratique d'appeler la méthode emplacement.reload ().
document
L'objet de document représente la page actuelle. Étant donné que le HTML est représenté comme une structure d'arbre dans le navigateur sous la forme de DOM, l'objet de document est le nœud racine de l'ensemble de l'arborescence DOM.
L'attribut de titre du document est lu à partir de <Title> xxx </Title> dans le document HTML, mais peut être modifié dynamiquement:
L'objet document a également un attribut cookie, qui peut obtenir les cookies de la page actuelle.
Un cookie est un identifiant de valeur clé envoyé par le serveur. Étant donné que le protocole HTTP est apatride, le serveur peut distinguer la demande de l'utilisateur envoyé par elle et elle peut être distinguée par les cookies. Lorsqu'un utilisateur se connecte avec succès, le serveur envoie un cookie au navigateur, tel que user = ABC123XYZ (chaîne cryptée). Après cela, lorsque le navigateur visite le site Web, il attachera ce cookie à l'en-tête de demande et le serveur peut distinguer l'utilisateur en fonction du cookie.
Les cookies peuvent également stocker certains paramètres du site Web, tels que la langue de la page affichée, etc.
JavaScript peut lire les cookies sur la page actuelle via Document.cookie:
document.cookie; // 'v = 123; rappelez-vous = true; préférer = zh '
Étant donné que JavaScript peut lire des cookies sur la page et que les informations de connexion de l'utilisateur existent généralement également dans les cookies, cela crée un énorme risque de sécurité. En effet, l'introduction du code JavaScript tiers dans les pages HTML est autorisée:
<! - La page actuelle se trouve sur wwwexample.com -> <html> <éadfr> <script src = "http://www.foo.com/jquery.js"> </ script> </ head> </html>
Si un code malveillant existe en JavaScript du tiers introduit introduit, le site Web www.foo.com obtiendra directement les informations de connexion de l'utilisateur du site Web www.example.com.
Pour résoudre ce problème, le serveur peut utiliser httponly lors du définition de cookies. Les cookies qui définissent httponly ne seront pas lus par JavaScript. Ce comportement est implémenté par le navigateur et les navigateurs grand public prennent en charge l'option httponly. Afin d'assurer la sécurité, le serveur doit toujours insister sur l'utilisation de Httponly lors de la définition des cookies.
document.write () publie juste un nouveau contenu au document
Si Document.Write est exécuté après le chargement du document, toute la page HTML sera écrasée:
Référence: http://www.w3school.com.cn/tiy/t.asp?f=js_write_over
Dom | Document
// Renvoie le nœud avec id 'test': var test = document.getElementById ('test'); // Obtenez tous les nœuds enfants directs sous test de nœud: var cs = test.children; var first = test.firstElementChild; La deuxième méthode consiste à utiliser querySelector() et querySelectorAll() . Vous devez comprendre la syntaxe du sélecteur, puis utiliser des conditions pour obtenir le nœud, ce qui est plus pratique:
// Obtenez le nœud avec ID Q1 via QueySelector: var Q1 = document.QuerySelector ('# Q1'); // Obtenez tous les nœuds dans le nœud Q1 qui remplissent les conditions via QuerySelectorAll: var ps = q1.QuerySelectorall ('div.Highlighted> P');À strictement parler, le nœud DOM fait ici référence à l'élément, mais le nœud Dom est en fait le nœud. Dans HTML, le nœud comprend de nombreux types d'éléments, commentaires, CDATA_SECTION, etc., ainsi que le type de document de nœud racine. Cependant, la plupart du temps, nous ne nous soucions que de l'élément, c'est-à-dire le nœud qui contrôle réellement la structure de la page et ignorez les autres types de nœuds. Le document du nœud racine a été automatiquement lié à un document variable global.
Modifier DOM
La modification du CSS est également une opération commune. L'attribut de style du nœud DOM correspond à tous les CSSS et peut être directement récupéré ou défini. Parce que CSS permet des noms comme la taille de la police, mais ce n'est pas un nom de propriété valide pour JavaScript, il doit être réécrit sur un nom de style camel dans JavaScript:
// get <p id = "p-id"> ... </p> var p = document.getElementById ('p-id'); // set css: p.style.color = '# ff0000'; p.style.fontsize = '20px'; p.style.paddingTop = '2em';Insérer DOM
Il existe deux façons d'insérer un nouveau nœud. L'une consiste à utiliser APPENDCHILD pour ajouter un nœud enfant au dernier nœud enfant du nœud parent. Par exemple:
<! - Html Structure -> <p id = "js"> javascript </p> <div id = "list"> <p id = "schéma> schéma </p> </div>
Ajouter <p id="js">JavaScript</p> au dernier élément de <div id="list"> :
var js = document.getElementById ('js'), list = document.getElementById ('list'); list.appendChild (js);Maintenant, la structure HTML devient ceci:
<! - Html Structure -> <div id = "list"> <p id = "schéma"> schéma </p> <p id = "js"> javascript </p> </div>
Étant donné que le nœud js que nous avons inséré existe déjà dans l'arbre de document actuel, ce nœud sera d'abord supprimé de son emplacement d'origine, puis inséré dans un nouvel emplacement.
Plus souvent qu'autrement, nous créerons un nouveau nœud à partir de zéro et l'insérerons à l'emplacement spécifié:
Haskell = document.CreateElement ('P'); La création de nœud dynamiquement puis l'ajouter à l'arborescence DOM peut atteindre de nombreuses fonctions. Par exemple, le code suivant crée dynamiquement un nœud <style> et l'ajoute à la fin <head> , ajoutant ainsi dynamiquement une nouvelle définition CSS au document:
var d = document.createElement ('style'); d.setAttribute ('type', 'text / css'); d.innerhtml = 'p {colore: red}'; document.getElementsByTagName ('head') [0] .APPEndChild (d);insérer avant
Et si nous voulons insérer des nœuds enfants dans l'emplacement spécifié? Vous pouvez utiliser Parentement.InsertBefore (Newelement, ReferenceElement); et le nœud enfant sera inséré avant la référence.
Plusieurs fois, il est nécessaire de parcourir tous les enfants d'un nœud parent, qui peut être mis en œuvre en itérant sur l'attribut des enfants:
var i, c, list = document.getElementById ('list'); for (i = 0; i <list.children.length; i ++) {c = list.children [i]; // Obtenez le nœud enfant du I -th}Supprimer Dom
Pour supprimer un nœud, vous devez d'abord obtenir le nœud lui-même et son nœud parent, puis appeler le Node parent du Node RemoveChild pour se supprimer:
// Obtenez le nœud à supprimer: var self = document.getElementById ('to-be-re-semoved'); // Obtenez le nœud parent: var parent = self.pare -Entiment; // delete: var supprime = parent.reMoveChild (self); supprimé === self; // vraiJ'ai remarqué que bien que le nœud supprimé ne soit plus dans l'arborescence des documents, il est en fait toujours en mémoire et peut être ajouté à un autre endroit à tout moment.
Lorsque vous traversez un enfant d'un nœud parent et effectuez une opération de suppression, sachez que l'attribut des enfants est un attribut en lecture seule et qu'il sera mis à jour en temps réel lorsque le nœud enfant change. Par conséquent, lors de la suppression de plusieurs nœuds, il est important de noter que les attributs des enfants changent tout le temps.
Formulaire d'opération
L'utilisation de JavaScript pour manipuler les formulaires est similaire à DOM de fonctionnement, car la forme elle-même est également un arbre Dom.
Cependant, la boîte d'entrée du formulaire, la boîte déroulante, etc. peuvent recevoir une entrée utilisateur, donc l'utilisation de JavaScript pour utiliser le formulaire peut obtenir le contenu entré par l'utilisateur ou définir un nouveau contenu pour une boîte d'entrée.
Il existe principalement les contrôles d'entrée suivants pour les formulaires HTML:
• Zone de texte, la <input type = "texte"> correspondante, est utilisée pour entrer du texte;
• Boîte de mot de passe, la <input type = "mot de passe"> correspondante, est utilisée pour entrer les mots de passe;
• Radio Box, la <input type = "radio"> correspondante, est utilisée pour sélectionner un élément;
• La case à cocher, la <entrée type = "Checkbox"> est utilisée pour sélectionner plusieurs éléments;
• La boîte déroulante, le <lelect> correspondant, est utilisée pour sélectionner un élément;
• Texte caché, le <input type = "Hidden"> correspondant n'est pas visible pour l'utilisateur, mais le texte caché sera envoyé au serveur lorsque le formulaire sera soumis.
Obtenez la valeur
Si nous obtenons une référence à un nœud <fort>, nous pouvons appeler directement la valeur pour obtenir la valeur d'entrée utilisateur correspondante:
// <input type = "text" id = "e-mail"> var input = document.getElementById ('e-mail'); input.value; // Valeur saisie par l'utilisateur ' Cette méthode peut être appliquée au text , password , hidden et select . Cependant, pour la radio et les cases à cocher, value renvoie toujours la valeur préréglage HTML, et ce que nous devons obtenir, c'est réellement si l'utilisateur a l'option "vérifiée", donc checked doit être utilisé pour juger:
// <Babeld> <Input Type = "Radio" name = "Weekday" id = "lundi" value = "1"> lundi </ labe> // <label> <input type = "radio" name = "weekday" id = "mardi" value = "2"> mardi </ label> var mon = document.getElementById ('lundi'); var tue = document.getElementyId ('mardi'); Mon.Value; // '1'Te.Value; // '2'Mon.Crisé; // vrai ou fauxValeur réglée
La définition de la valeur est similaire à l'obtention de la valeur. Pour le texte, le mot de passe, caché et sélectionner, vous pouvez définir directement la valeur:
// <input type = "text" id = "email"> var input = document.getElementByid ('e-mail'); input.value = '[email protected]'; // Le contenu de la zone de texte a été mis à jourPour la radio et les cases à cocher, définissez vérifié sur true ou false.
Contrôles HTML5
HTML5 a ajouté un grand nombre de commandes standard, celles couramment utilisées incluent la date, le DateTime, le DateTime-local, les couleurs, etc. Ils utilisent tous la balise <fort>:
<input type = "date" value = "2015-07-01">
<input type = "DateTime-Local" Value = "2015-07-01T02: 03: 04">
<input type = "colore" value = "# ff0000">
Les navigateurs qui ne prennent pas en charge HTML5 ne peuvent pas reconnaître les nouveaux contrôles et les afficheront comme type = "texte". Les navigateurs qui prennent en charge HTML5 obtiendront des chaînes formatées. Par exemple, la valeur de l'entrée de type = "date" sera garantie d'être une date valide au format Yyyy-mm-dd ou une chaîne vide.
Soumettre un formulaire
Enfin, JavaScript peut gérer la soumission de formulaire de deux manières (la méthode AJAX est introduite dans le chapitre suivant).
La première méthode consiste à soumettre un formulaire via la méthode Soumide () de l'élément <form>. Par exemple, en réponse à un événement <fruit> cliquez sur, soumettez le formulaire dans le code JavaScript:
<form id = "test-form"> <input type = "text" name = "test"> <bouton type = "bouton" onClick = "DosubmitForm ()"> soumider </fitton> </ form> <script> function DosubmitForm () {var form = document.getElementById ('test-form'); // Vous pouvez modifier l'entrée du formulaire ici ... // Soumettre le formulaire: form.Submit ();} </ script> L'inconvénient de cette méthode est qu'il perturbe la soumission normale du navigateur à la forme. Le navigateur soumet le formulaire lorsque vous cliquez sur <button type="submit"> Par défaut, ou l'utilisateur appuye sur la touche Entrée dans la dernière case d'entrée. Par conséquent, la deuxième façon est de répondre à l'événement onsubmit de <form> lui-même et d'apporter des modifications lors de la soumission du formulaire:
<form id = "test-form" onSubmit = "return checkform ()"> <input type = "text" name = "test"> <button type = "soumider"> soumider </fonton> </ form> <script> function checkForm () {var form = document.getElementById ('test-form'); // Vous pouvez modifier l'entrée du formulaire ici ... // continue à l'étape suivante: return true;} </ script> Notez que return true est nécessaire pour dire au navigateur de continuer à soumettre. Si return false , le navigateur ne continuera pas à soumettre le formulaire. Cette situation correspond généralement à l'erreur d'entrée de l'utilisateur, et l'utilisateur est invité à des messages d'erreur et le formulaire est terminé.
Lors de la vérification et de la modification <input> , utilisez pleinement <input type="hidden"> pour passer les données.
Par exemple, de nombreux formulaires de connexion souhaitent que les utilisateurs entrent dans les noms d'utilisateur et les mots de passe, mais, pour des raisons de sécurité, ne transmettent pas les mots de passe en texte clair lors de la soumission du formulaire, mais MD5 du mot de passe. Les développeurs JavaScript ordinaires modifieront directement <input> :
<form id = "login-form" metheth = "post" onsubmit = "return chèchform ()"> <input type = "text" id = "username" name = "username"> <input type = "mot de passe" id = "mot de passe" name = "mot de passe"> <bouton type = "soumettre"> soumettre </ bouton> </ form> </ script> functionworm () {var pwd = document.gelement // modifie le texte en clair entré par l'utilisateur en MD5: pwd.value = tomd5 (pwd.value); // Continue à l'étape suivante: return true;} </cript> Cette méthode semble bien, mais lorsque l'utilisateur entre le mot de passe à soumettre, la boîte de mot de passe s'affiche soudainement de plusieurs * à 32 * (car MD5 a 32 caractères).
Pour ne pas modifier l'entrée de l'utilisateur, vous pouvez utiliser <input type="hidden"> pour implémenter:
<form id = "login-form" metheth = "post" onSubmit = "return checkForm ()"> <input type = "text" id = "username" name = "username"> <input type = "password" id = "input-password"> <input type = "Hidden" id = "md5-password" name = "mot de passe"> <bouton type = "soumettre"> soumettre </ / bouton> input_pwd = document.getElementById ('input-password'); var md5_pwd = document.getElementById ('md5-password'); // modifie le texte en clair entré par l'utilisateur en MD5: md5_pwd.value = tomd5 (input_pwd.value); // Continue à l'étape suivante: return true;} </cript>Notez que le <poing> avec l'ID de MD5-Password marqué name = "Mot de passe", tandis que l'ID entré par l'utilisateur est un mot de passe d'entrée sans l'attribut de nom. Données sans nom d'attribut <fort> ne seront pas soumises.
Fichiers d'opération
Dans les formulaires HTML, le seul contrôle qui peut télécharger des fichiers est <entrée type = "file">.
Remarque: Lorsqu'un formulaire contient <input type = "file">, l'EnCType du formulaire doit être spécifié sous forme de multipartiel / format de formulaire, et la méthode doit être spécifiée en tant que post, afin que le navigateur puisse coder correctement et envoyer les données du formulaire au format multipartite / format.
Pour des raisons de sécurité, le navigateur permet uniquement aux utilisateurs de cliquer sur <entrée type = "fichier"> pour sélectionner les fichiers locaux. L'utilisation de JavaScript pour attribuer de la valeur à <input type = "file"> n'a aucun effet. Lorsque l'utilisateur choisit de télécharger un fichier, JavaScript ne peut pas obtenir le chemin réel vers le fichier:
Fichier à télécharger:
Habituellement, les fichiers téléchargés sont traités par le serveur backend. JavaScript peut vérifier l'extension du fichier lors de la soumission du formulaire pour empêcher les utilisateurs de télécharger des fichiers dans des formats non valides:
var f = document.getElementById ('test-file-upload'); var filename = f.value; // 'c: /fakepath/test.png'if (! Filename ||! (Filename.endswith ('. Jpg ') || filename.endswith ('. Png ') || filename.endswith ('. Gif '))) {alert (' ne peut que télécharger le fichier d'image. '); retour false;}File API
Étant donné que JavaScript a des opérations très limitées sur les fichiers téléchargés par les utilisateurs, en particulier l'incapacité de lire le contenu des fichiers, de nombreuses pages Web qui nécessitent des fichiers de fonctionnement doivent être implémentées à l'aide de plug-ins tiers tels que Flash.
Avec la popularité de HTML5, l'API de fichier nouvellement ajouté permet à JavaScript de lire le contenu du fichier et d'obtenir plus d'informations sur le fichier.
L'API de fichier de HTML5 fournit deux objets principaux: fichier et fichier, qui peut obtenir des informations de fichier et lire des fichiers.
L'exemple suivant montre comment lire un fichier image sélectionné par l'utilisateur et prévisualiser l'image dans un <v>:
Aperçu de l'image:
var fileInput = document.getElementById ('test-image-file'), info = document.getElementById ('test-file-info'), préview = document.getElementById ('test-image-preview'); // Écoutez les événements de modification: fileInput.adDeventListener ('Change', function () {// Clear Background Image: Preview.style.backgroundMage = ''; // Vérifiez si le fichier est sélectionné: if (! FileInput.value) {info.innerhtml = 'No Fichier sélectionné'; return;} // obtenir une référence de fichier: var fichier = fileInput.files [0]; // info.innerhtml = 'file:' + file.name + '<br>' + 'size:' + file.size + '<br>' + 'modifié:' + file.lastModifiedDate; Fichier d'images! '); sous la forme de dataUrl: reader.readaSDataurl (fichier);});Le code ci-dessus montre comment lire le contenu des fichiers via l'API de fichier de HTML5. Le fichier lu sous la forme de DataUrl est une chaîne, similaire à Data: Image / JPEG; Base64, / 9J / 4AAQSK ... (Base64 Encoding). Il est souvent utilisé pour définir des images. Si le traitement côté serveur est requis, envoyez les caractères après la chaîne Base64 au serveur et décodez-le avec Base64 pour obtenir le contenu binaire du fichier d'origine.
Rappel
Le code ci-dessus démontre également une caractéristique importante de JavaScript, qui est le mode d'exécution à fil unique. Dans JavaScript, le moteur d'exécution JavaScript du navigateur s'exécute toujours en mode unique lors de l'exécution du code JavaScript, ce qui signifie qu'à tout moment, il est impossible que le code JavaScript ait plus d'un thread exécuté en même temps.
Vous pourriez vous demander comment gérer le multitâche en mode unique?
Dans JavaScript, le multitâche est en fait appelé de manière asynchrone, comme le code ci-dessus:
Reader.ReadAsDataurl (fichier);
Une opération asynchrone sera lancée pour lire le contenu du fichier. Parce qu'il s'agit d'une opération asynchrone, nous ne savons pas quand l'opération se termine par du code JavaScript, nous devons donc définir d'abord une fonction de rappel:
reader.onload = function (e) {// Lorsque le fichier est lu, cette fonction est automatiquement appelée:};Une fois la lecture du fichier terminée, le moteur JavaScript appellera automatiquement la fonction de rappel que nous définissons. Lorsque la fonction de rappel est exécutée, le fichier a été lu, nous pouvons donc obtenir en toute sécurité le contenu du fichier dans la fonction de rappel.
L'article ci-dessus parle brièvement de l'objet de navigateur JavaScript est tout le contenu que je partage avec vous. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.