Hinweise zu JavaScript-Grundlagen

Question

JavaScript

1. Die Beziehung zwischen JS und DOM

Der Browser hat die Funktion, HTML-Code zu rendern. Der HTML-Quellcode bildet ein DOM-Objekt im Speicher, das das Dokumentobjekt ist. Es gibt einen JS-Interpreter/eine JS-Ausführung / Innerhalb der Browser-Engine verwendet Chrome beispielsweise die v8-Engine

Wir schreiben einen JS-Code in HTML, der JS-Code wird von der Engine ausgeführt und das Ergebnis der Ausführung ist die Operation des DOM, bei der es sich um die von uns erstellten Spezialeffekte handelt B. schwebende Bilder und sich ändernde Textfarben.

Wenn der Browser darauf stößt, rendert er den HTML-Code und interpretiert und führt ihn aus, wenn er auf js trifft Am Ende der Seite wird im Allgemeinen js geschrieben, das heißt, die Seite wird zuerst gerendert und dann wird das DOM manipuliert -sensitive;

Variablenname: Zahlen, Buchstaben, Unterstriche können nicht als Anfang von Variablennamen verwendet werden (nicht empfohlen)

Die Nichtverwendung von var führt zu einer Verunreinigung globaler Variablen

Das Hinzufügen einer Variablen bedeutet, dass eine lokale Variable innerhalb der Funktion deklariert und ein Wert zugewiesen wird. Andernfalls wird nach der Variablen außerhalb gesucht.

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

Alert(string);

3. Variablentyp

Drei Hauptkategorien (acht Datentypen)

- Traditioneller Typ

Zahl (numerischer Typ)

        String (Zeichenfolgentyp)

      Boolean (Boolescher Typ)

 

                                '   ' s ‐ ‐ ‐ ‐ ‐ Zusammengesetzter Typ

​                                                      verwenden verwenden verwenden verwenden aus verwenden durch durch aus aus aus ist ‐ ‐ ‐ ‐ ‐ zusammengesetzter Typ

bis }

Array (Array-Typ)                                                                                                                                                                                        Definitionstyp)

                                                                                                                                             Wenn bei der Deklaration der Variablen kein Anfangswert zugewiesen wird, ist der Variablendatentyp undefiniert. Funktion

Ein Codesegment, das wiederholt ausgeführt werden kann.

1. Funktionsname

– Zahlen, Buchstaben, Unterstriche und Zahlen können nicht als Anfang von Funktionsnamen verwendet werden

- Der Funktionsname sollte so aussagekräftig wie möglich sein.

2. Parameter (optional), eine Funktion kann bis zu 255 Parameter haben .

4. Rückgabewert (optional)

Funktionsdeklaration

1. Funktionsfunktionsname ([Parameter...]){

Funktionskörper;

Rückgabewert;

}

2.var Funktionsname = neue Funktion (Parameter ... Funktionskörper);

3. Anonyme Funktion

var test = Funktion ([Parameter ...]) {

Funktionskörper; 1. Rufen Sie den Funktionsnamen direkt im Codesegment auf.

2. Rufen Sie die benutzerdefinierte Funktion in Form eines Hyperlinks auf. Zum Beispiel:

])'>Text</a>

3. Rufen Sie benutzerdefinierte Funktionen in Form von Ereignissen auf

Globaler Geltungsbereich und lokaler Geltungsbereich 1. Globaler Geltungsbereich

Außerhalb des Funktionskörpers Der Geltungsbereich der deklarierten Variablen ist der globale Geltungsbereich

2. Der lokale Geltungsbereich

Die im Funktionskörper deklarierten Variablen sind der lokale Geltungsbereich

. Operationen

werden nach den Operationsfunktionen unterteilt

- Arithmetische Berechnung + - * / % ++ - + (positiv) -(negativ)

-logische Operation (JS, logische Operation, der Wert, der zurückgibt Kann das Ergebnis des Ausdrucks frühestens beurteilen) && |. | !

                                                                                                                                                                                                                                                                                          .

                                                                     aber Wenn wahr, exp2 ausführen, andernfalls exp3 ausführen. 分5. Verzweigungssatz

if

if ... else ...

if ... else if ....

switch ()

6 .

                                                                                                                                                    —             not not not been“ —                        Der Schleifenkörper wird nicht ausgeführt, wenn die Schleifenbedingung nicht erfüllt ist.

7. In JavaScript integrierte Objekte

Alles in js kann als Objekt verstanden werden aufgerufen wird, wird es in diesem Moment in ein Objekt verpackt

1. Objekt deklarieren

var o = new Object();

var o = {};

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

2. Methoden für den Zugriff auf Mitglieder in Objekten

Objektname. Mitglieder (Eigenschaften und Methoden) im Objekt

- String-Objekt

var s = new String();

var s = new String(" hello");

var s = "hello";

Eigenschaften und Methoden

Eigenschaft:

length Ermittelt die Länge der Zeichenfolge

Methode:

Object.indexof (substring)

Funktion: Bestimmen die Position, an der die Teilzeichenfolge zum ersten Mal im Objekt erscheint Großbuchstabe

Object.toLowerCase();

Funktion: Konvertieren Sie das Objekt in Kleinbuchstaben

Object.substr(start [,length])

Funktion: Abfangen der Länge von der Startposition Der optionale Parameter wird standardmäßig nicht bis zum Ende der Zeichenfolge abgefangen.

Object.slice(start[,end])

Funktion: Abfangen der Zeichenfolge ab der Startposition und Abfangen bis zur Endposition fängt standardmäßig nicht bis zum Ende der Zeichenfolge ab.

Object.replace(str1,str2)

- Array-Objekt

Deklaration:

var a = new Array();

var a = [];

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

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

var a = new Array(7); //7 ist die Länge des Arrays

Ausgabe des Arrays:

document.write( Name des Arrays: Verbinden Sie zwei Arrays. Object.

Gibt zurück: das neu zusammengeführte Array. Die Reihenfolge der Elemente im neuen Array hängt von der Reihenfolge der beiden Arrays beim Zusammenführen ab Funktion: Das letzte Element im Array-Objekt einfügen.

Gibt zurück: das entfernte (gelöschte) Array-Element

Array-Objekt.push (Array-Element)

Funktion: Fügt Elemente am Ende des Arrays hinzu Rückgabe: Die Länge des Arrays, nachdem das Element hinzugefügt wurde.

Array Object.shift()

Funktion: Ein Element aus dem Kopf des Arrays entfernen.

Rückgabe: Das entfernte Array-Element.

Array object.unshift( Elementname)

Funktion: Fügen Sie ein Element zum Kopf des Arrays hinzu.

Rückgabe: Die Länge des Arrays, nachdem Elemente hinzugefügt wurden.

Array object.join(',')

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

Array object.sort()

- Datumsobjekt

var d = new Date()

Methode:

Object.getFullYear()

Funktion: Die vier abrufen -stelliges Jahr

Objekt. getMonth()

Funktion: Holen Sie sich den Monat, Monat (0~11)

Object.getDate()

Funktion: Holen Sie sich den Tag

Object.getHours()

Funktion : Stunden abrufen

Object.getMinutes()

Funktion: Minuten abrufen

Object.getSeconds()

Funktion: Sekundenwert abrufen

Funktion: Ermitteln Sie den aktuellen Wochenwert (0 Sonntag ~ 6 Samstag)

- Mathe-Objekt

Keine Instanziierung, äquivalent zum statischen Aufruf über den Klassennamen in PHP

Attribute:

PI-Wertzuweisung

Methode :

Math.ceil (Variable)

Funktion: Aufrunden

Math.floor (Variable)

Funktion: Abrunden

Math.round (Variable)

Funktion: Runden

Math.abs (Variable)

Funktion: Nimm den Absolutwert

Math.random()

Funktion: Gibt einen Pseudozufallswert zurück, der größer oder gleich 0 und kleiner als 1 [0,1) ist.

Math.max( Variable. .)

Funktion: Gibt die größere der Variablen zurück.

Math.min(Variable..)

Funktion: Gibt die kleinere der Variablen zurück.

8. Browserfensterobjekt

Hinweis: Das Fensterobjekt ist ein Browser-Hostobjekt und hat nichts mit der JS-Sprache zu tun

Die Methoden des Fensterobjekts:

window.alert(message);

window.confirm(message);

window.prompt();

window. open();

window.close();

window.print();

window.setInterval();

window.setTimeout();

window.clearInterval();

window .clearTimeout( ;

3.history History

4.screen screen object

5.document object (DOM object)

6. Storage object

Web Storage API. Bietet s sessionStorage ( Sitzungsspeicher) und localStorage (lokaler Speicher) zwei Speicherobjekte zum Hinzufügen, Löschen, Ändern und Abfragen der Daten auf der Webseite.

sessionStorage wird verwendet, um die Daten desselben Fensters (oder Tabs) vorübergehend zu speichern. Die Daten werden nach dem Schließen des Fensters oder Tabs gelöscht.

LocalStorage wird verwendet, um die Daten der gesamten Website für einen langen Zeitraum zu speichern. Die gespeicherten Daten haben keine Ablaufzeit, bis sie manuell entfernt werden.对 om 9.DOM Object Operation

DOM (DOCUME Object Model Document Object Model)

Document HTML/XML

XML

Extensionable Markup Language

.

                                                                                                                                                                                                                                                                                                                                                                                                                    Zurückgegeben: Ein aus Objekten bestehendes Array

- document.getElementsByName (Name-Attributwert des HTML-Tags)

Gibt zurück: Array von Objekten.

– document.getElementById (ID-Attributwert des HTML-Tags)

Gibt zurück: Objekt.

– document.getElementsByClassName (HTML-Tag-Klassenattribut value)

Gibt zurück: ein Array von Objekten.

Warum kann window.document das vorherige Fenster weglassen?

Antwort: Es ist immer noch ein Bereichsproblem, wenn Sie es nicht im Inneren finden können, suchen Sie es in der äußeren Ebene. Es gibt window.document global.

Knoten werden als Baumstruktur betrachtet Baumstruktur.

Hinweis: Ein Leerzeichen und ein Kommentar sind beide ein Knoten.

Knoten: Knotenname (nodeName), O Knotentyp (nodetype).

Einige Knoten haben einen Knotenwert

Unterknoten:

Knotenobjekt .Childnodes gab ein Array zurück (einschließlich leerem Knoten)

H-Knoten-Objekte.Kinder sind keine Standardattribute, aber gut kompatibel, ausgenommen leere Knoten

                                                                                                                                                                                                                                                                        Knotenobjekt. Letzter untergeordneter Knoten:

Knotenobjekt. previousSibling

Vorheriger Geschwisterknoten 点

Knotenobjekt .nextSIBLING

Nächster Landsmann Knoten

document.createElement (HTML-TAG-Tags)

Funktion: Erstellen ein neues HTML-Objekt

Rückgabe: Objekt

Vater )

Funktion: Untergeordnetes Objekt zum übergeordneten Objekt hinzufügen

Übergeordnetes Objekt.removeChild (übergeordnetes Objekt.lastChild)

Funktion: Den letzten untergeordneten Knoten löschen des Objekts.

Operationsobjekt

Attribute

1. Lesen von Attributen

Objekt.Attributname

2. Ändern von Attributen

Objekt.Attributname = Attributwert

Text

1. Lesen

Object.innerText

Object.innerHTML // Alle HTML-Codes in Tags

2. Ändern

Object.innerText = Geänderter Text

Object.innerHTML = Geänderter Text

innerHTML analysiert HTML-Tags, innerText analysiert kein HTML Tags.

Stil

1 .Read (da auf das Stilattribut noch ein Objekt folgt, müssen Sie also . verwenden, um weiter darauf zuzugreifen, und Sie können nur den Wert des internen Stils lesen und den Wert nicht einlesen <style>)

Objektstil.

2. Ändern Sie

Object.style.Attribute name = Attributwert. Hinweis: Für die Hintergrundfarbe muss das „-“ entfernt und das erste großgeschrieben werden Buchstabe des nächsten Wortes, d. h. ein Attributname in Kleinbuchstabenform

3. Stile stapelweise ändern

Object.className = Klassenstilname

Rufen Sie das Stilobjekt zur Laufzeit ab:

Obj.currentStyle[attr] und getComputedStyle(obj, null)[attr] werden verwendet, um

Ersteres wird nur von IE und Opera unterstützt, und letzteres wird auch von Standardbrowsern mit IE9 und höher unterstützt. Der zweite Parameter ist ein Pseudoelement

10 .Events

1. Ereignisquelle

Alle HTML-Tags können als Ereignisquellen betrachtet werden

2. Ereignisse

Mausklick-Ereignis

dblclick-Doppelklick-Ereignis

Mouseover-Strich in

Durch aus mit der Maus. Y Taste nach oben Tastatur Tastatur hebt

Taste nach unten Tastatur Drücken Sie die Taste. Drücken Sie die Tastatur. Drücken Sie das Dokument. Dokument wird geladen.

3. Event-Handler

- <tag on event="event handler">

Der Event-Handler kann Javascript-Code oder ein automatischer Name der Funktion sein                                                                                            clearTimeout()-Methode Kann abbrechen die zeitgesteuerte Operation, die durch die Methode setTimeout() festgelegt wird.

Der Parameter der Methode clearTimeout() muss der von setTimeout() zurückgegebene ID-Wert sein.

Hinweis: Um die Methode „clearTimeout()“ zu verwenden, verwenden Sie beim Erstellen und Ausführen geplanter Vorgänge globale Variablen:

Ein Timer, der alle n Sekunden ausgeführt wird

Die Methode „setInterval()“ kann gemäß dem angegebenen Zeitraum (in) verwendet werden Millisekunden), um eine Funktion aufzurufen oder einen Ausdruck auszuwerten.

Die setInterval()-Methode ruft die Funktion so lange auf, bis clearInterval() aufgerufen oder das Fenster geschlossen wird. Der von setInterval() zurückgegebene ID-Wert kann als Argument für die Methode clearInterval() verwendet werden.

Tipp: 1000 Millisekunden = 1 Sekunde.

Tipp: Wenn Sie es nur einmal ausführen möchten, können Sie die Methode setTimeout() verwenden.