Remarques sur les bases de JavaScript

Question

JavaScript

1. La relation entre JS et DOM

Le navigateur a pour fonction de restituer le code html. Le code source html forme un objet DOM dans la mémoire, qui est l'objet document

Il existe un interpréteur/exécution JS. / à l'intérieur du moteur du navigateur, comme Chrome utilise le moteur v8

Nous écrivons un code JS en HTML, le code JS est exécuté par le moteur, et le résultat de l'exécution est le fonctionnement du DOM, qui est les effets spéciaux que nous voir souvent, comme des images flottantes et du texte changeant de couleur.

Lorsque le navigateur est exécuté, il restituera le code HTML lorsqu'il le rencontrera, et l'interprétera et l'exécutera lorsqu'il rencontrera js. Par conséquent, afin d'assurer l'affichage global. de la page, js est généralement écrit à la fin, c'est-à-dire que la page est rendue en premier, puis le DOM est manipulé

2 Les variables déclarent

var name = 'jquery';

Remarque :

Strictement cas. -sensible ;

Nom de variable : chiffres, lettres, traits de soulignement. Les chiffres ne peuvent pas être utilisés comme début de noms de variables. Les noms de variables peuvent également être précédés de $ Start (non recommandé)

Ne pas utiliser var polluera les variables globales ;

Ajouter var signifie déclarer une variable locale à l'intérieur de la fonction et attribuer une valeur. Sinon, il s'agit simplement d'un processus d'affectation, et la variable sera recherchée à l'extérieur.

Débogage :

Console.log(); document.write(string);

alert(string);

3. Type de variable

Trois catégories (huit types de données)

- Type traditionnel

Number (type numérique)

        String (type de chaîne)

Booléen (Type booléen)

 

                                   ' ‐ ' s ‐ ‐ ‐ ‐ ‐ Type composite

​                                                    use using off using Through off off off ' s ‐ ‐ ‐ ‐ type composite

à }

              Array (type de tableau)                                                                                                                                                                                                       Type de définition)

                                                                                                                                                                                                 Si aucune valeur initiale n'est attribuée lors de la déclaration de la variable, le type de données de la variable n'est pas défini pour le moment. Fonction

Un morceau de code qui peut être exécuté à plusieurs reprises.

Fonction La. composition de :

1. Nom de la fonction

- Les chiffres, lettres, traits de soulignement, chiffres ne peuvent pas être utilisés comme début des noms de fonction

.

- Le nom de la fonction doit être aussi significatif que possible. Il est recommandé d'utiliser la règle de dénomination en cas de chameau pour les noms de fonction

2. Paramètres (facultatif), une fonction peut avoir jusqu'à 255 paramètres. .

4. Valeur de retour (facultatif)

Déclaration de fonction

1. nom de la fonction ([paramètres...]){

Corps de la fonction ;

Valeur de retour ;

}

2.var Nom de la fonction = new Function (Paramètre ... corps de la fonction);

3. Fonction anonyme

var test = function ([paramètre ...]) {

corps de la fonction

valeur de retour

}

appel de fonction ;

1. Appelez le nom de la fonction directement dans le segment de code.

2. Appelez la fonction personnalisée sous la forme d'un lien hypertexte :

])'>Text</a>

3. Appelez custom. fonctions sous forme d'événements.

Portée des variables

Portée globale et portée locale 1. Portée globale

En dehors du corps de la fonction La portée des variables déclarées est la portée globale

2. La portée locale

La portée. les variables déclarées dans le corps de la fonction sont la portée locale.

4. Les opérations

sont divisées selon les fonctions d'opération

- Calcul arithmétique + - * / % ++ - + (positif) - (négatif)

-opération logique (JS, opération logique, la valeur renvoyée est la première valeur pouvant juger du résultat de l'expression) & && |                                                                                        = += -= *= /= % =

                                                                                                                                                                                                     .

                                                                                        mais lorsque c'est vrai, exécutez exp2, sinon exécutez exp3.

5.

                                                                                                                      

                                            

                                                                                                                                                                         —             not not not been » —                        Le corps de la boucle ne sera pas exécuté si la condition de la boucle n'est pas remplie

7. objets intégrés

Tout en js peut être compris comme un objet. Lorsqu'une méthode est appelée, elle est empaquetée dans un objet à ce moment-là

1. Déclaration d'objet

var o = new Object();

var o = {};

var o = {name:'tom',age:10}

2. Méthodes d'accès aux membres dans les objets

Nom de l'objet (propriétés et méthodes) dans l'objet

-. Objet String

var s = new String();

var s = new String("hello");

var s = "hello";

Propriétés et méthodes

Propriété :

length Obtenez la longueur de la chaîne

Méthode :

Object.indexof (sous-chaîne)

Fonction : Détermine la position où la sous-chaîne apparaît en premier dans l'objet From 0 Start

Return: position Si la sous-chaîne n'apparaît pas dans l'objet. , return -1.

Object.toUpperCase();

Fonction : Convertir l'objet en majuscule

Object.toLowerCase();

Fonction : Convertir l'objet en minuscule

Object.substr(start [,length] )

Fonction : Interception de chaîne. Intercepte la longueur à partir de la position de départ

Le paramètre facultatif de longueur n'est pas intercepté jusqu'à la fin de la chaîne par défaut.

Object.slice(start[,end])

Fonction. : Interception de chaîne. Commencez l'interception à partir de la position de départ et interceptez jusqu'à la position de fin. Le paramètre facultatif de fin n'intercepte pas jusqu'à la fin de la chaîne par défaut.

Object.replace(str1,str2)

- Objet Array

Déclaration :

var a = new Array();

var a = [];

var a = new Array('team',1) ;

var a = ['team',1...];

var a = new Array(7); //7 est la longueur du tableau

Sortie du tableau :

document.write( nom du tableau ; :Connectez deux tableaux Object.

Renvoie : le tableau nouvellement fusionné L'ordre des éléments dans le nouveau tableau dépend de l'ordre des deux tableaux lors de la fusion.

Tableau object.pop()

. Fonction : Pop le dernier élément de l'objet tableau.

Renvoie : l'élément de tableau sauté (supprimé)

Array object.push (élément de tableau)

Fonction : Ajoute des éléments à la fin du tableau. Renvoie : la longueur du tableau après l'ajout de l'élément.

Array Object.shift()

Fonction : Pop un élément de la tête du tableau

Retour : L'élément du tableau sauté.

Array object.unshift( element name)

Fonction : Ajouter un élément en tête du tableau

Retour : La longueur du tableau après l'ajout des éléments

Array object.join(',')

Array object.split(. ',') Array object.reverse()

Array object.sort()

- Objet Date

var d = new Date()

Méthode :

Object.getFullYear()

Fonction : Obtenir les quatre -chiffre année

Objet.getMonth()

Fonction : Obtenez le mois, Mois (0~11)

Object.getDate()

Fonction : Obtenez le jour

Object.getHours()

Fonction : Obtenez les heures

Object.getMinutes()

Fonction : Obtenez les minutes

Object.getSeconds()

Fonction : Obtenez la valeur des secondes Object.getDay()

.

Fonction : Obtenez la valeur de la semaine en cours (0 dimanche ~ 6 samedi)

- Objet mathématique

Pas d'instanciation, équivalent à un appel statique via le nom de classe en PHP

Attributs :

Allocation de valeur PI

Méthode :

Math.ceil (variable)

Fonction : arrondir

Math.floor (variable)

Fonction : arrondir vers le bas

Math.round (variable)

Fonction : Arrondir

Math.abs (variable)

Fonction : Prendre la valeur absolue

Math.random()

Fonction : Renvoie une valeur pseudo-aléatoire supérieure ou égale à 0 et inférieure à 1 [0,1).

Math.max( Variable. .)

Fonction : renvoie la plus grande des variables.

Math.min(Variable..)

Fonction : renvoie la plus petite des variables.

8. Objet fenêtre du navigateur

Remarque : l'objet fenêtre est un objet hôte du navigateur et n'a rien à voir avec le langage JS

Les méthodes de l'objet window :

window.alert(message);

window.confirm(message);

window.prompt();

window.open();

window.close();

window.print();

window.setInterval();

window.setTimeout();

window.clearInterval();

window .clearTimeout( ;

3.history Historique

4.objet d'écran d'écran

5.objet document (objet DOM)

6. Objet de stockage

L'API de stockage Web fournit des sessions stockage ( stockage de session) et localStorage (stockage local) deux objets de stockage pour ajouter, supprimer, modifier et interroger les données sur la page Web.

sessionStorage est utilisé pour enregistrer temporairement les données de la même fenêtre (ou onglet). Les données seront supprimées après la fermeture de la fenêtre ou de l'onglet.

LocalStorage est utilisé pour sauvegarder les données de l'ensemble du site Web pendant une longue période. Les données enregistrées n'ont pas de délai d'expiration jusqu'à ce qu'elles soient supprimées manuellement.对 à propos de 9.Opération d'objet DOM

DOM (DOCUME Object Model Document Object Model)

Document HTML/XML

XML

Langage de balisage extensible

.

                                                                                                                                                                                                                                                .                                                                                                                                                                               Renvoyé : un tableau composé d'objets

-. document.getElementsByName (valeur de l'attribut nom de la balise HTML)

Renvoie : tableau d'objets

- document.getElementById (valeur de l'attribut id de la balise HTML)

Renvoie : objet

- document.getElementsByClassName (attribut de classe de balise HTML. value)

Renvoie : un tableau d'objets.

Pourquoi window.document peut-il omettre la fenêtre précédente ?

Réponse : C'est toujours un problème de portée. Si vous ne le trouvez pas à l'intérieur, recherchez-le dans la couche externe. Il existe window.document globalement

Model Model

considéré comme une structure arborescente. Les nœuds sont liés. Si vous trouvez l'un des nœuds, vous pouvez trouver tous les nœuds dans le. structure arborescente.

Remarque : un espace et un commentaire sont tous deux un nœud ;

Nœud : nom du nœud (nodeName), O Type de nœud (nodetype) .

Certains nœuds ont une valeur de nœud .

Nœuds père : objet nœud.

sous-nœud :

objet nœud .Childnodes a renvoyé un tableau (y compris un nœud vide)

H Nodes objets.enfants attributs non standard, mais bien compatible, hors nœuds vierges

                                                                                                                                                                                                                                                                                      Objet nœud.

document.createElement (balises HTML TAG)

Fonction : Créer un nouvel objet HTML

Retour : Objet

Père. )

Fonction : Ajouter l'objet enfant à l'objet parent

Objet parent.removeChild (objet parent.lastChild)

Fonction : Supprimer le dernier. Nœud enfant de l'objet. . Lecture

Object.innerText

Object.innerHTML // Tous les codes HTML dans les balises

2. Modifier

Object.innerText = Texte modifié

Object.innerHTML = Texte modifié

innerHTML analyse les balises HTML, innerText ne le fait pas. analyser les balises HTML.

Style

1 .Read (car l'attribut style est toujours suivi d'un objet, vous devez donc utiliser . pour continuer à accéder, et vous ne pouvez lire que la valeur du style interne et ne pouvez pas lire le value in <style>)

Object. style. Nom de l'attribut ;

2. Modifier

Object.style.Attribute name = valeur de l'attribut ;

Nom de l'attribut Remarque : la couleur d'arrière-plan nécessite de supprimer le "-" et de mettre une majuscule. la première lettre du mot suivant, c'est-à-dire un petit nom d'attribut camel case

3. Modifiez les styles par lots

Object.className = nom du style de classe

Obtenez l'objet style au moment de l'exécution :

Obj.currentStyle[attr] et getComputedStyle(obj, null)[attr] sont utilisés pour obtenir

Le premier n'est pris en charge que par IE et Opera, tandis que le second est également pris en charge par IE9 et supérieur dans les navigateurs standard. est un pseudo-élément

10 .Événements

1. Sources d'événements

Toutes les balises HTML peuvent être considérées comme des sources d'événements

2. Événements

Événement de clic de souris

Événement de double-clic dblclick

survol de la souris Stroke in

Grâce à la souris. Le clavier Y Keyup se lève

Le clavier enfoncé Appuyez sur la touche du clavier Appuyez sur le document CHARGER le chargement du document

DÉCHARGER le document a fermé l'avant

Form Focus submit submit (appartient à l'élément de formulaire return false empêche la soumission)

3. Gestionnaire d'événements

- <tag on event="event handler">

Le gestionnaire d'événements peut être du code javascript ou un automatique Définir le nom de la fonction.

                                   .                                                                                                               effacer la méthode Timeout() Peut annuler l'opération chronométrée définie par la méthode setTimeout().

Le paramètre de la méthode clearTimeout() doit être la valeur ID renvoyée par setTimeout().

Remarque : Pour utiliser la méthode clearTimeout(), utilisez des variables globales lors de la création et de l'exécution d'opérations planifiées :

Un timer qui s'exécute toutes les n secondes

La méthode setInterval() peut être utilisée selon la période spécifiée (en millisecondes) pour appeler une fonction ou évaluer une expression.

La méthode setInterval() continuera d'appeler la fonction jusqu'à ce que clearInterval() soit appelée ou que la fenêtre soit fermée. La valeur ID renvoyée par setInterval() peut être utilisée comme argument de la méthode clearInterval().

Astuce : 1000 millisecondes = 1 seconde.

Astuce : Si vous souhaitez l'exécuter une seule fois, vous pouvez utiliser la méthode setTimeout().