JavaScript (IV) - la programmation orientée objet, nomenclature, DOM, validation du formulaire, jQuery

1. La programmation orientée objet

(1) objet prototype
javascript, Java, c #. . . . orienté objet, javascript quelques différences dans JavaScript nous avons besoin de changer ma façon de penser!

• Classe: objet prototype de modèle
• Objet: exemples spécifiques
  
  

(2) classe hérite
le mot - clé de classe, introduit dans ES6

• Définir une classe, propriété, méthode
  
• Héritage
  nature: Voir le prototype d'objet
  
  
• Prototype chaîne proto __ __ :
  

2. Fonctionnement des objets de nomenclature (focus)

JavaScript est né afin de lui permettre de fonctionner dans un navigateur

BOM: modèle objet du navigateur pour faire navigateur compatible avec JavaScript « dialogue »

• IE 6 ~ 11
• Chrome
• Safari
• FireFox

tripartite

• QQ navigateur
• 360 navigateur

(1) fenêtre
fenêtre représente la fenêtre du navigateur

(2) navigateur (non recommandé)
navigateur encapsule des informations sur le navigateur

la plupart du temps, nous ne pas utiliser l'objet navigateur, parce que les gens seront modifiés
écran (3)
représente la taille de l'écran

( 4) l' emplacement
représente l' URL de l'information de la page courante
window.location.href page en cours de retours (URL)
nom de domaine hébergeur window.location.hostname retour
le chemin de retour de window.location.pathname de la page en cours ou le nom du fichier
window.location.protocol retours protocole Web (http: :) ou HTTPS
window.location.assign charger un nouveau document

(5) le document (contenu, DOM)
le document représente la page en cours , arborescence du document DOM HTML

• Pour nœud d'arborescence de document spécifique
  
  
  - Obtenez le cookie
  document.cookie
  Cookie est vos données stockées dans un petit fichier texte sur votre ordinateur .
  Lorsque le serveur Web envoie la page au navigateur, la connexion est fermée, le serveur oublie tous les utilisateurs. Cookie est de résoudre l'invention « comment mémoriser des informations de l' utilisateur » de: ① Lorsqu'un utilisateur accède à la page, son nom peut être stocké dans un cookie. ② La prochaine fois que l'utilisateur visite la page, cookie « se souvient » de son nom.
  (6) Histoire (non recommandé)
  Histoire au nom de l' histoire du navigateur
  de history.back () // Retour
  history.forward () // Transférer

3. objet DOM fonctionnement (mise au point)

• HTML DOM (Model Document Object)
  lorsque la page est chargée, le navigateur va créer une page d' un modèle d'objet de document (le modèle de Document Object)
  modèle DOM HTML est structuré arborescence d'objets :
  objets HTML DOM arbre
  
  ① mise à jour: noeud Mise à jour Dom
  ② traversal noeud dom: get Dom noeud
  ③ supprimer: supprimer un noeud Dom
  ④ ajouter: ajouter un nouveau nœud
  à utiliser un nœud Dom, vous devez d' abord obtenir le nœud Dom
  (1) pour obtenir le noeud dom
  
  
  qui est le code natif, et nous essayons d'avoir utilise jQuery ()

(2) mettre à jour le nœud

• Manipulation de texte
  id1.innerText = « 456 » = valeur de texte modifié id1.innerHTML « 123 » peut analyser l'étiquette de texte HTML
• Opération CSS
  id1.style.color = 'jaune'; // chaîne d'attribut enveloppé
  id1.style.fontSize = '20px'; // - tour problème notationsCamel
  id1.style.padding '2em' =
  supprimer le noeud (3).
  supprimer un nœud: pour obtenir le nœud parent, puis retirez - vous par le parent
  
  
  Remarque: lors de la suppression de plusieurs noeuds, les enfants sont en constante évolution, la suppression de nœuds doivent accorder une attention
  (4) inséré dans le noeud
  pour obtenir un certain Dom noeud, en supposant que le nœud dom est vide, nous pouvons augmenter la innerHTML d'un élément, mais cet élément du nœud DOM existe déjà, il ne peut pas être si sec, devra couvrir, utiliser alors la plus façon
  
  

(5) créer une nouvelle étiquette, insérer atteindre

Avant d' effectuer le JavaScript

après l'exécution de JavaScript

• insertBefore
  pour inclure le noeud .insertBefore (newNode, targetNode)
  
  

4. Formulaires d'opération (vérification)

JavaScript à utiliser avant que les données sont envoyées au serveur dans les données d'entrée de formulaire HTML est vérifiée, dans le but de la forme: soumission d' informations
données de formulaire nécessite souvent l'utilisation de JavaScript pour vérifier son exactitude :

• Vérifiez que les données de formulaire est vide
• Vérifiez si l'entrée est une adresse e-mail valide
• Vérifiez que la date a été correctement saisi
• Valider le contenu d'entrée de formulaire est un type de numéro

Des contrôles spécifiques comprennent:

• texte Zone de texte
• liste déroulante <select>
• bouton radio Radio
• checkbox
• Caché Champ caché
• Mot de passe zone Mot de passe
  .......
  (1) accès à l' information à soumettre
  
  
  (2) soumettre le formulaire md5 mots de passe cryptés, optimisation de forme
  
  

5. jQuery

bibliothèque jQuery, il y a beaucoup de l' intérieur de la fonction Javascript
(1) obtenir jQuery
formule: $ event (sélecteur) (fonction d'événement)


sélecteur (2)

événement (3)
la page a appelé l'événement une réponse aux différents visiteurs

• événements communs DOM:
  
  par exemple
  
  
  (4) d' exploitation DOM
• manipulation de texte noeud
  
• opérations css
  
• éléments Masquer et d'affichage: la nature de display: none;
  
• Test de divertissement