Detaillierte Erläuterung der Javascript-Wissenspunkte

Inhaltsverzeichnis

1. Grundlegende Einführung in JavaScript
2. Grundlegende Javascript-Syntax
3. JavaScript-Ereignisse

Beispiel 2: Wenn auf ein Div-Tag geklickt wird, geschieht etwas, z. B. das Öffnen eines Dialogfelds nach dem Klicken. ——Verwenden Sie die ID-Klasse
Beispiel 3: Tag p hinzufügen und Klasse verwenden, um

4. Javascript-Schreibort (Einführungsmethode)

4.1 Eingebettetes js
4.2 Externer Link js
4.3 Inline-JS (verboten)

5. Häufige Spezialeffekte von js (Verständnis)

5.1 Navigationsfolge/Aufzugsnavigation
5.2 Zurück zum Anfang
5.3 Rollendes Folgen
5.4 Atemlicht/Fokusbild (Bannerbild)
5,5 js zum Erzielen von Animationseffekten
5.6 Modale Fenster
5.7 Zeitgesteuertes Schalten
5.8 Anpassen von Einzelauswahl-, Mehrfachauswahl- und Dropdown-Menüs

Zusammenfassen

1. Grundlegende Einführung in JavaScript

js entstand 1995 und ist die Abkürzung für Javascript. Es hat nichts mit der Sprache Java zu tun. Sein Hauptzweck bestand damals darin, zu überprüfen, ob die Daten im Formular legal waren.

Popular Science: Ursprünglich sollte Javascript Livescript heißen, aber am Vorabend seiner Veröffentlichung wurde der Name vorübergehend in Javascript geändert, um die Popularität von Java in den Medien auszunutzen. (Das heißt, js hat nichts mit Java zu tun, es wollte nur den Ruhm von Java ausnutzen)

Funktion: Verantwortlich für die Kontrolle der ersten beiden Web-Frontend-Standards. Struktur und Stil;

Zum Beispiel: Der Pfeil wechselt die Bildseite, und der Punkt in der unteren linken Ecke ist auch

Kein JS : Es ist sehr schwierig, Informationen auf einer Seite ohne JS korrekt zu übermitteln.

Antwort : js wurde erstellt, um die Rechtmäßigkeit von Formulardaten zu überprüfen. js fügt eine Überprüfung hinzu. Wenn die Eingabe korrekt ist, wird sie bestanden. Wenn sie nicht korrekt ist, wird ein Fehler angezeigt. js soll dieses Problem lösen.

Heutzutage kann js nicht nur Überprüfungen durchführen, sondern auch Spezialeffekte für Websites ausführen

2. Grundlegende Javascript-Syntax

1. Schreiben Sie das Skript-Tag und fügen Sie es am Ende der HTML-Seite ein. Der JS-Code wird in HTML in das Skript-Tag geschrieben.

2. Aus der Mitte des Skript-Tags: alert("Popup-Inhalt, was auch immer hier geschrieben steht, wird angezeigt");

<Skript>
    alert("Inhalt im Popup-Fenster anzeigen");
</Skript>

Ein Warnfeld und ein Dialogfeld werden angezeigt:

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
	</Kopf>
	<Text>
	</body>
</html>
<Skripttyp = "Text/Javascript">
	Alarm();
</Skript>

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
	</Kopf>
	<Text>
	</body>
</html>
<Skripttyp = "Text/Javascript">
	alert('Hinweis: Popup-Fenster');
</Skript>

Hinweis: Die im Browser enthaltenen Warndialogfelder können nicht vereinheitlicht werden. Sie sind alle in den Browser integriert und können nicht geändert werden.

3. JavaScript-Ereignisse

Definition: Unter welchen Umständen wird welcher Befehl ausgeführt

Funktion: Erfassen des Nutzerverhaltens (Einzelklick, Doppelklick, Mausbewegung rein und raus...)

Beispiel 1: Beim Klicken wird die Schnittstelle umgeschaltet und der Befehl unter Umständen ausgeführt.

Drei Elemente der Veranstaltung:

Die drei Elemente eines Ereignisses: Ereignisquelle. Ereignistyp = ausgeführter Befehl.

1. Ereignisquelle: „Erklärung ist, wem dieses Ereignis zugeschrieben wird)

2. Ereignistyp: (bezieht sich darauf, wann das Ereignis aufgetreten ist)

3. Ausgeführte Anweisungen: Feste Schreibfunktion (H Hier steht Ihr Befehl} Ereignisquelle "" Punkt Ereignisname = anonyme Funktion (anonyme Methode)

Beispiel 2: Wenn auf ein Div-Tag geklickt wird, geschieht etwas, z. B. das Öffnen eines Dialogfelds nach dem Klicken. ——Verwenden Sie die ID-Klasse

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
	</Kopf>
	<Text>
		<div id = "div1">Hahahaha</div>
	</body>
</html>
<Skripttyp = "Text/Javascript">
	// Klicken Sie auf das Div auf der Seite, ein Dialogfeld wird angezeigt // Schritt 1: Wenn Sie ein Tag steuern möchten, müssen Sie es zuerst finden. Verwenden Sie den Selektor, um es in CSS zu finden, und js, um es im Dokument der aktuellen Seite zu finden // Schritt 2: Klicken Sie auf das Div der Seite
	// Schritt 3: Dialogfeld öffnen document.getElementById('div1').onclick=function()
	{
		alert('Es wird nur angezeigt, wenn Sie klicken');
	}
	//Drei Elemente eines Ereignisses: Ereignisquelle. Ereignistyp = ausgeführter Befehl</script>

Beispiel 3: Tag p hinzufügen und Klasse verwenden, um

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
	</Kopf>
	<Text>
		<div id = "div1">Hahahaha</div>
		<p class = "p1">Ich bin p1-Tag</p>
		<p class = "p1"> Ich bin p2-Tag</p>
	</body>
</html>
<Skripttyp = "Text/Javascript">
	// Klicken Sie auf das Div auf der Seite, ein Dialogfeld wird angezeigt // Schritt 1: Wenn Sie ein Tag steuern möchten, müssen Sie es zuerst finden. Verwenden Sie den Selektor, um es in CSS zu finden, und js, um es im Dokument der aktuellen Seite zu finden // Schritt 2: Klicken Sie auf das Div der Seite
	// Schritt 3: Dialogfeld öffnen document.getElementById('div1').onclick=function()
	{
		alert('Es wird nur angezeigt, wenn Sie auf div klicken');
	}
	//Drei Elemente eines Ereignisses: Ereignisquelle. Ereignistyp = ausgeführter Befehl document.getElementsByClassName('p1')[0].ondblclick=function()
	{
		alert('Es wird nur angezeigt, wenn Sie auf p klicken.');
	}
	// getElementsByClassName verwendet die Klasse, um Elemente auf der Seite zu finden, und die Klasse kann mehrere wiederholte Klassennamen festlegen // Beim Abrufen müssen Sie am Ende [0] hinzufügen, um bei 0 mit dem Zählen zu beginnen</script>

Beachten:
Die ID ist eindeutig, also einmalig
Class ist eine Klasse, die Plural ist. In js wird getElementsByClassName verwendet, um Elemente auf der Seite nach Klasse zu suchen. Class kann mehrere wiederholte Klassennamen festlegen. Beim Abrufen müssen Sie am Ende [0] hinzufügen, um bei der Zahl 0 zu beginnen.

Prüfpunkte:
1. Das Popup-Dialogfeld wird nicht angeklickt
2. Klicken Sie auf das Dialogfeld, das nicht angezeigt wird

4. Javascript-Schreibort (Einführungsmethode)

4.1 Eingebettetes js

JS einbetten : in HTML-Datei. Setzen Sie es in das Script-Tag, das heißt, schreiben Sie es in HTML und setzen Sie es in das Script-Tag, das eingebettet heißt

<Skript>
    Warnung („Im Popup-Fenster angezeigter Inhalt“);
</Skript>

Beispiel:

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
	</Kopf>
	<Text>
	</body>
</html>
<Skripttyp = "Text/Javascript">
	Warnung ('Popup eingebettet');
</Skript>

4.2 Externer Link js

Externer Link js : Er kann sich in einer separaten js-Datei befinden und über das src-Attribut im Skript-Tag auf die Seite verweisen. Das heißt, er wird in eine separate js-Datei geschrieben und über das src im Skript mit der HTML-Seite verknüpft. Dies wird als externer Link bezeichnet.

<script src="js-Dateipfad>
    Schreiben Sie hier keinen Code, er wird nicht ausgeführt.</script>

Beispiel:

.html-Datei:
<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
	</Kopf>
	<Text>
	</body>
</html>
<!-- <Skripttyp = "Text/Javascript">
	Warnung ('Popup eingebettet');
</script> -->
<script type="text/javascript" src="js.js">
</Skript>
js.js-Datei:
alert('Popup-Link');

Beachten:

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
	</Kopf>
	<Text>
	</body>
</html>
<script type="text/javascript" src="js.js">
	//Wenn dies die Syntax eines externen Links ist, wird nichts ausgeführt alert('111111');
</Skript>

4.3 Inline-js (verboten)

Inline-JS : In den Tag-Attributen geschrieben, muss dieses Attribut ein Ereignisattribut sein. (Jedes Tag hat Ereignisattribute), genau wie Inline-CSS, es wird nicht empfohlen! Das heißt, das, was auf dem HTML-Tag geschrieben wird, heißt Inline-Stil

<div onclick-alert ( 'heihei');”> Schaltfläche</div>

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
	</Kopf>
	<Text>
		<div onclick = "alert('pop-up window line');">Nicht standardmäßiges Beispiel</div>
	</body>
</html>

Hinweis : Der Unterschied zwischen doppelten und einfachen Anführungszeichen liegt innerhalb der Zeile.

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
	</Kopf>
	<Text>
		<div onclick = "alert("pop-up window line");">Nicht standardmäßiges Beispiel</div>
	</body>
</html>

Innerhalb der Zeile dürfen nur einfache Anführungszeichen verwendet werden, sonst kann das js-Verhalten nicht ausgeführt werden

Notiz:

Inline-JS wird nicht empfohlen, genau wie Inline-CSS! Sie können nach Belieben eingebettete und externe Links verwenden. Es wird jedoch empfohlen, externe Links zu verwenden, da dadurch JS-Code und HTML-Code getrennt werden können, wodurch die Codeänderung bequemer wird.

5. Häufige Spezialeffekte von js (Verständnis)

Dabei ist eine Abstimmung der Fachbegriffe auf die Anzeigeeffekte notwendig.

5.1 Navigationsfolge/Aufzugsnavigation

Navigation: Klicken Sie hier, um zu gelangen

5.2 Zurück zum Anfang

Nach dem Klicken kehren Sie zum Seitenanfang zurück

5.3 Rollendes Folgen

Welcher Teil des animierten Bildes soll die Aufmerksamkeit des Benutzers auf sich ziehen?

5.4 Atemlicht/Fokusbild (Bannerbild)

Bildumschaltung, Ein- und Ausblendeffekt

5,5 js zum Erzielen von Animationseffekten

Achten Sie beim Testen darauf, die Animation mehrmals auszulösen, um zu sehen, ob es zu einer Ansammlung von Animationen kommt.

Hinweis: Wenn bei der Animation ein klassischer Fehler auftritt, der in JS geschrieben ist (Animationsakkumulationsfehler), wird die Animation so oft ausgeführt, wie sie ein- und ausgeblendet wird.
Wie testen Sie Animationen, wenn Sie darauf stoßen? Den Test immer wieder auslösen, da sich die sogenannte Animation nur beim Anklicken nicht bewegt.

5.6 Modale Fenster

Modales Fenster: Es werden zwei Ebenen angezeigt. Eine ist dafür verantwortlich, andere Seiteninhalte darunter abzudecken (die Hintergrundfarbe ist grau und andere darunterliegende Steuerelemente können nicht bedient werden). Die andere ist eine Ebene, die von Benutzern bedient wird. Benutzer dürfen nur die erste Ebene bedienen.

Der Zweck besteht darin, Benutzern zu ermöglichen, zuerst die oberste Ebene zu lösen

5.7 Zeitgesteuertes Schalten

5.8 Anpassen von Einzelauswahl-, Mehrfachauswahl- und Dropdown-Menüs

Im Lieferumfang des Systems enthalten (nativ):

Anpassung:

Solange es nicht nativ für den Systembrowser ist, erfordern diese Programme, selbst wenn sie angepasst sind, eine Kombination aus js + html + css zur Implementierung, was definitiv zeitaufwändiger ist als natives Schreiben. Für die Schönheit der Gesamtseite müssen Programmierer jedoch aufgefordert werden, sie gemäß den Anforderungen des Designers zu implementieren.

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!

Das könnte Sie auch interessieren:

Zusammenfassung von Beispielen für häufige Javascript-Fehler
Wissensaustausch über JS-Modularisierung
Zusammenfassung allgemeiner Wissenspunkte in der objektorientierten Programmierpraxis von Javascript
JavaScript fasst mehrere Wissenspunkte zusammen, um die Leistung zu verbessern (empfohlen)
Zusammenfassung der allgemeinen JS-Wissenspunkte
Wenig bekannte Wissenspunkte zu Microtask und Macrotask in Javascript

<<: Verschiedene Arten von MySQL-Indizes

>>: Detaillierte Erklärung zum Festlegen des Änderungswerts innerhalb einer bestimmten Zeit in Zabbix