Einführung in die Computer-Grundlagen

Programmiersprache

Computer-Grundlagen

Einführung in JavaScript

Erste Einführung in JavaScript

Der Browser führt den js-Prozess aus

js besteht aus drei Teilen

js drei Schreibpositionen

Kommentar

Eingabe- und Ausgabeanweisungen

Einführung in Variablen

Was ist eine Variable?

Verwendung von Variablen

Variabler Fall

Popup-Benutzername mit variabler Groß- und Kleinschreibung

Erweiterung der Variablensyntax

Konvention zur Benennung von Variablen

Transformieren Sie die Werte von 2 Variablen

Zusammenfassung der Variablen

Einführung in Datentypen

Einführung in Datentypen

NumerischeNummer

ist NaN

String-Typ

Popup-Warnfeld für die Webseite

Stringlänge und Verkettung

Verbesserung des String-Spleißens

Altersfall anzeigen

boolean sowie undefiniert und null

typeof erkennt den variablen Datentyp

wörtlich

In String-Typ konvertieren

In numerisches parseInt und parseFloat konvertieren

Konvertieren Sie in eine numerische Zahl und implizite Konvertierung

Altersfall berechnen

Einfacher Addiererfall

In booleschen Wert konvertieren

Ausführlichere Lektüre zum Unterschied zwischen kompilierten und interpretierten Sprachen

Erweiterte Lektüre: Bezeichnerschlüsselwörter Reservierte Wörter

Hausaufgaben

Einführung in die Operatoren

Arithmetische Operatoren

Ausdrücke und Rückgabewerte

vorangestellter Inkrementoperator

Postfix-Inkrementoperator

Übung zum Inkrementoperator

Zusammenfassung von Pre-Inkrement und Post-Inkrement

Vergleichsoperator

Logische Operatoren

Übungen zu logischen Operatoren

Logischer Interrupt, logisches UND

logischer Interrupt, logischer oder

Zuweisungsoperator

Vorrang des Operators

Einführung in die Zweigstruktur der Prozesssteuerung

Prozesskontrolle

if-Verzweigungsanweisung

Betreten Sie den Fall Internetcafé

ifelse-Doppelzweiganweisung

Bestimmen Sie die Fälle von Schaltjahren

if else if Anweisung mit mehreren Zweigen

Beurteilung von Gradfällen

ternärer Ausdruck

Digitaler 0-Füllkoffer

switch-Anweisung

Vorsichtsmaßnahmen für den Wechsel

Obstkisten abfragen

Der Unterschied zwischen switch und ifelseif

Lesezyklus

Zweck der Schleife

for-Schleifensyntaxstruktur

for-Schleifenausführungsprozess

Schalten Sie das Debuggen aus

Die for-Schleife führt denselben Code wiederholt aus

Die for-Schleife führt wiederholt verschiedene Codes aus

for-Schleife wiederholt bestimmte Vorgänge

für Schlaufenkoffer

Fallstudie zur Schülerleistung (Teil 1)

Fallstudie zu Schülerergebnissen (Teil 2)

Drucken Sie fünf Sterne in einer Zeile

Double for-Schleifenausführungsprozess

Drucken Sie Sterne in 5 Zeilen und 5 Spalten

Sterne in n Zeilen und n Spalten drucken

Umgekehrtes Dreiecksgehäuse drucken

Multiplikationstabelle

Zusammenfassung der for-Schleife

while-Schleife

während Fall

mache eine While-Schleife

tun während case

Zusammenfassung des Zyklus

Schlüsselwort fortsetzen

Schlüsselwort break

Namenskonvention und Syntaxformat

Zyklusarbeit

Einführung in Arrays

Was ist ein Array und wie wird es erstellt?

Auf Array-Elemente zugreifen

Array durchqueren

Array-Länge

Berechnen Sie die Summe und den Durchschnitt der Arrays

Finden Sie den Maximalwert in einem Array

Konvertieren Sie ein Array in einen String

Neues Element zum Array hinzufügen

Das Array speichert 1 bis 10 Werte

Filter-Array-Methode

Filterarray-Methode 2

Löschen Sie das angegebene Element aus dem Array (Array-Deduplizierung).

Array umdrehen

Sehen Sie sich den Abschnitt „Zwei Variablenwerte austauschen“ an

Prinzip der Blasensortierung

Blasensortierung

Funktionseinführung

Warum Funktionen benötigt werden

Funktionsnutzung

Verwenden Sie Funktionen, um die kumulative Summe von 1 bis 100 zu ermitteln

Funktionsparameter

Verwenden Sie Funktionen, um die Summe zweier beliebiger Zahlen und die Gesamtsumme zu ermitteln

Matching-Problem zwischen Funktionsparametern und tatsächlichen Parametern

Rückgabewert der Funktion

Verwenden Sie Funktionen, um das Maximum zweier Zahlen zu ermitteln

Verwenden Sie die Funktion, um den Maximalwert in einem Array zu finden

return beendet die Funktion und kann nur einen Wert zurückgeben

2 Dinge, die Sie über Funktionsrückgabewerte beachten sollten

Funktionen durch einen Entsafter durchschauen

Verwendung von Argumenten

Verwenden Sie Funktionen, um den Maximalwert einer beliebigen Zahl zu ermitteln

Spiegeln Sie ein Array mithilfe einer Funktion um

Funktionskapselungsblasensortierung

Verwenden Sie die Funktion, um das Schaltjahr zu bestimmen

Eine Funktion kann eine andere Funktion aufrufen

Geben Sie die Anzahl der Tage im Februar aus

Zwei Möglichkeiten, Funktionen zu deklarieren

Einführung in den Geltungsbereich

Javascript-Bereich

Globale Variablen und lokale Variablen

Javascript hat keinen Gültigkeitsbereich auf Blockebene

Scope-Kette

Scope Kettenkasten

Anleitung zum Vorparsen von JavaScript

vorbereiten

Vorbereitungskoffer

Objekteinführung

Was sind Objekte und warum werden sie benötigt?

Erstellen Sie Objekte mithilfe von Objektliteralen

Der Unterschied zwischen der variablen Attributfunktionsmethode

Erstellen Sie Objekte mit einem neuen Objekt

Warum brauchen wir Konstrukteure?

Konstruktor erstellt Objekt (Teil 1)

Konstruktor erstellt Objekt (Teil 2)

Der Unterschied zwischen Konstruktor und Objekt

neuer Keyword-Ausführungsprozess

Objekte durchqueren

Zusammenfassung und Aufgaben

Integrierter Objektführer

Was sind integrierte Objekte?

Erfahren Sie, wie Sie die MDN-Dokumentation abfragen

Mathematische Maximalwertmethode eines mathematischen Objekts

Errate das Zahlenspiel

Verwendung des Date-Objekts

Formatieren Sie Datum, Jahr, Monat, Tag, Woche

Datum, Stunden, Minuten, Sekunden formatieren

Gesamtzahl des Datums in Millisekunden (Zeitstempel)

Countdown (Teil 1)

Countdown (Teil 2)

Zwei Möglichkeiten, ein Array zu erstellen

Zwei Möglichkeiten, um zu erkennen, ob es sich um ein Array handelt

Fügen Sie Array-Elemente hinzu

Array-Elemente löschen

Filterarray

Array-Sortierung

Array-Elementindex abrufen

Fall einer Array-Deduplizierung

Konvertieren Sie ein Array in einen String

Grundlegende Verpackungsarten

String ist unveränderlich

Rückgabeposition basierend auf dem Zeichen

Finden Sie die Position und Häufigkeit des Vorkommens eines bestimmten Zeichens

Gibt Zeichen basierend auf der Position zurück

Zählen Sie die am häufigsten vorkommenden Zeichen (Teil 1)

Zählen Sie die am häufigsten vorkommenden Zeichen (Teil 2)

Spleißen und Abfangen von Saiten

Ersetzen Sie Zeichenfolgen und konvertieren Sie sie in Arrays

Einführung in einfache Datentypen und komplexe Datentypen

Speicherzuordnung für Datentypen

Einfache Übergabe von Datentypparametern

Übergabe von Parametern komplexer Datentypen

Einführung in Web-APIs

Die Korrelation zwischen den beiden Phasen von JS-Grundlagen und Web-APIs

API und Web-APIs

Einführung in DOM

Einführung in DOM

getElementByid ruft das Element ab

getElementsByTagName Ruft einen bestimmten Typ eines Tag-Elements ab

H5 fügt eine neue Möglichkeit zum Erhalten von Elementen hinzu

Holen Sie sich Body- und HTML-Elemente

Drei Elemente des Vorfalls

Ereignisprozess ausführen

Bearbeiten Sie Elemente, um den Elementinhalt zu ändern

Der Unterschied zwischen innerText und innerHTML

Elemente manipulieren – Elementattribute ändern

Time-Sharing-Begrüßungsfall

Vorgangselement-Formulareigenschaften ändern

Beispiel für die Nachahmung von JD.com, um versteckte Passwörter im Klartext anzuzeigen (Teil 1)

Beispiel für die Nachahmung von JD.com, um versteckte Passwörter im Klartext anzuzeigen (Teil 2)

Elemente manipulieren – Stilattribute ändern

Fall einer Nachahmung des schließenden QR-Codes von Taobao

Looping-Sprites

Verborgenen Textfeldinhalt anzeigen

Verwenden Sie className, um Stilattribute zu ändern

Informationen zur Passwortfeldüberprüfung

Zusammenfassung der betrieblichen Elemente und Aufgaben

Exklusiver Gedanke (Algorithmus)

Baidu-Hauterneuerungseffekt

Farbwechseleffekt der abwechselnden Tabellenzeile

Formular „Alles auswählen“ Abbrechen „Alles auswählen“ (Teil 1)

Formular „Alles auswählen“ Abbrechen „Alles auswählen“ (Teil 2)

Benutzerdefinierten Attributwert abrufen

Legen Sie fest, dass benutzerdefinierte Eigenschaften entfernt werden sollen

Analyse des Wechsellayouts der Tab-Leiste (wichtig)

Tab-Bar-Switching-Produktion (Teil 1)

Tab-Bar-Switching-Produktion (Teil 2)

Benutzerdefinierte H5-Attribute

Warum Knotenoperationen und Knoteneinführung lernen?

Der übergeordnete Knoten der Knotenoperation

untergeordneter Knoten

erstes untergeordnetes Element und letztes untergeordnetes Element

Sina-Dropdown-Menü

Der Geschwisterknoten der Knotenoperation

Knotenoperationen: Knoten erstellen und hinzufügen

Einfache Version des Posting-Message-Falls

Knotenvorgang – Knoten löschen

Nachrichtenfall löschen

Knotenoperation-Kopierknoten

Tabellen dynamisch generieren – Schülerdaten erstellen

Tabellen dynamisch generieren – Zeilen erstellen

Tabellen dynamisch generieren – Zellen erstellen

Tabellen dynamisch generieren – Zellen mit Daten füllen

Tabellen dynamisch generieren – Zellen erstellen und löschen

Tabellen dynamisch generieren – Vorgänge hinzufügen und löschen

document.write erstellt Elemente (verstehen)

Vergleich der Effizienz zwischen innerHTML und createElement

DOM-Schlüsselkern

Erweiterter Leitfaden zu Veranstaltungen

Zwei Möglichkeiten, Ereignisse zu registrieren

attachmentEvent-Registrierungsereignis

Ereignis löschen

DOM-Ereignisflusstheorie

Überprüfung des DOM-Ereignisflusscodes

Was ist ein Ereignisobjekt?

Der Unterschied zwischen e.target und this

Standardverhalten blockieren

Verhindern Sie, dass Ereignisse übersprudeln

Veranstaltungsdelegation

Deaktivieren Sie die Textauswahl und das Rechtsklick-Menü

Holen Sie sich die Koordinaten der Maus auf der Seite

Engel folgt der Maus

Häufig verwendete Tastaturereignisse

keyCode bestimmt, welche Taste der Benutzer gedrückt hat

Fallstudie zur Simulation von JD-Schlüsseleingabeinhalten

Simulieren Sie die JD-Express-Tracking-Nummernabfrage (Teil 1)

Simulieren Sie die Abfrage der Jingdong-Express-Tracking-Nummer (Teil 2)

Einführung in die Stückliste

Stücklistenübersicht

Seitenladeereignis

Fenstergrößenänderungsereignis

Timer setTimeout

Rückruffunktion und Anzeigen, die nach 5 Sekunden automatisch geschlossen werden

klarer Timer

Timer setInterval

Countdown-Effekt

klarer Timer

SMS-Fall senden

das weist auf das Problem hin

Synchron und asynchron

Synchroner Aufgaben- und asynchroner Aufgabenausführungsprozess

js-Ausführungsmechanismus

Allgemeine Eigenschaften von Standortobjekten

Nach 5 Sekunden zur Seite springen

URL-Parameter abrufen

Gängige Ortungsmethoden

Navigatorobjekt

Geschichtsobjekt

Einführung in Webseiten-Spezialeffekte auf dem PC

offsetLeft und offsetTop ermitteln den Element-Offset

offsetWidth und offsetHeight ermitteln die Elementgröße

Der Unterschied zwischen Offset und Stil

Holen Sie sich die Koordinaten der Maus in der Box

Modalfeld ziehen (oben)

Modalfeld ziehen (Mitte)

Ziehen Sie das modale Feld (unten)

Erstellen einer Seitenstruktur, die den Lupeneffekt von Jingdong imitiert

Imitierter Jingdong-Lupeneffekt, der versteckte Barrieren und große Kisten zeigt

Nachahmung der Jingdong-Lupeneffekt-Okklusionsschicht folgt der Maus

Der Jingdong-Lupenimitationseffekt begrenzt den Bewegungsbereich der Okklusionsschicht

Nachahmung der Jingdong-Lupe mit großem Bildbewegungseffekt

Kundenserie

Funktion sofort ausführen

Die Grundprinzipien der Taobao FlexiJS-Quellcode-Analyse

Taobao flexibleJS-Quellcode-Analyseseitenshow-Ereignis

Scroll-Serie

Nachahmung der festen Taobao-Seitenleiste (Teil 1)

Nachahmung der festen Taobao-Seitenleiste (unten)

Zusammenfassung von drei großen Serien

Der Unterschied zwischen Mouseover und Mouseenter

Animationsprinzipien

Einfache Kapselung der Animationsfunktion

Die Animationsfunktion zeichnet unterschiedliche Timer für verschiedene Elemente auf

Prinzip der Erleichterung der Animation

Grundlegende Code-Implementierung der Beschleunigungsanimation

Vereinfachte Animation zum Wechseln zwischen mehreren Zielwerten

Fügen Sie eine Rückruffunktion hinzu, um die Animation zu vereinfachen

Nutzung von Animationsfunktionen

Aufbau einer Webseiten-Karusselldiagrammstruktur

Webseitenkarussell – linke und rechte Schaltfläche ein- und ausblenden, wenn die Maus bewegt wird

Webseitenkarussell-dynamisch generierte kleine Kreise

Webseiten-Karussell-kleiner Kreis exklusiver Gedanke

Webseitenkarussell – klicken Sie auf den kleinen Kreis, um durch die Bilder zu scrollen

Webseitenkarussell – nahtloses Scrollen auf der rechten Schaltfläche

Webseitenkarussell – Klonen Sie das erste Bild

Der kleine Kreis des Webseitenkarussells ändert sich mit der Schaltfläche rechts

Webseitenkarussell – zwei kleine BUG-Lösungen

Webseitenkarussellbild-linke Tastenfunktionsproduktion

Funktion zum automatischen Abspielen von Webseitenkarussells

Drosselventil- und Logik-Interrupt-Anwendung

Rückkehr nach oben mit Animation

Salto-Wolkenfall

Einführung in Spezialeffekte für mobile Webseiten

Mobile Touch-Veranstaltung

Mobile TouchEvent-Touch-Ereignisobjekt

Ziehen Sie Elemente auf Mobilgeräten

Aufbau einer Karussell-Kartenstruktur für mobile Terminals

Analyse des mobilen Karussell-Diagrammlayouts

Mobile Karussell-Scrollbilder

Mobiles Karussell – nahtloses Scrollen

classList-Klassennamenoperation

Mobiles Karusselldiagramm – kleine Punkte folgen Änderungen

Karusselldiagramm auf dem mobilen Endgerät – Karusselldiagramm mit dem Finger ziehen

Mobiles Karussell – streichen Sie mit dem Finger, um das vorherige und nächste Bild abzuspielen

Mobiler Karussell-Image-Rebound-Effekt

Zurück zur obersten Modulproduktion

Lösung für das 300-ms-Verzögerungsproblem von Klickereignissen auf mobilen Endgeräten

Verwendung des Faskclick-Plugins

Referenzdateien zur Verwendung des Swiper-Plug-ins

Mobiles Karussellbild – gemäß Grammatikvorgaben verwendet

Änderung der Nutzungsparameter des Swiper-Plug-ins

Weitere mobile Plug-ins und Nutzungsübersicht

Verwendung des Video-Plugins zy.media.js

Bootstrap-Karussell

Alibaba 100 zeigt Karussell-Bildproduktion

Leitfaden zur lokalen Lagerung

Lokaler Speicher sessionStorage

localStroge des lokalen Speichers

Denken Sie an die Groß-/Kleinschreibung des Benutzernamens

Eine Einführung in jQuery

JavaScript-Bibliothek

jQuery-Übersicht

Grundlegende Verwendung der jQuery-Eingabefunktion

jQuery-Objekt der obersten Ebene

DOM-Objekte und jQuery-Objekte

Konvertieren Sie DOM-Objekte und jQuery-Objekte ineinander

Leitfaden zur allgemeinen jQuery-API

Grundlegende und hierarchische jQuery-Selektoren

Implizite jQuery-Iteration

jQuery-Filterauswahl

jQuery-Filtermethode – Wählen Sie übergeordnete und untergeordnete Elemente aus

Sina-Dropdown-Menü

jQuery andere Filtermethoden

Exklusive jQuery-Idee

Taobao Bekleidungsboutique-Koffer

jQuery-Kettenprogrammierung

jQuery-Stil-CSS-Methode ändern

jQuery-Operationsklasse zum Ändern des Stils

Tab-Bar-Umschaltgehäuse

Der Unterschied zwischen jQuery-Klassenoperationen und className

jQuery-Effekte ein- und ausblenden

jQuery-Gleiteffekt und Ereignisumschaltung

jQuery stoppt die Animationswarteschlange

jQuery einblenden und Groß-/Kleinschreibung hervorheben

Benutzerdefinierte jQuery-Animationsmethode

Analyse des Akkordeonkoffer-Layouts zu Honor of Kings

Herstellung von King of Glory Akkordeonkoffern

Manipulation von jQuery-Attributen

Warenkorb-Modul – Alle auswählen (Teil 1)

Warenkorb-Modul – Alle auswählen (Teil 2)

jQuery-Inhaltstextwert

Warenkorbmodul – Anzahl der Artikel erhöhen oder verringern

Warenkorbmodul – Produktzwischensumme ändern (Teil 1)

Warenkorbmodul – Produktzwischensumme ändern (mittel)

Warenkorbmodul – Produktzwischensumme ändern (Teil 2)

jQuery durchläuft Objekte mit jeder Methode

jQuery iteriert durch Daten

Warenkorbmodul – Gesamtanzahl und Gesamtsumme berechnen

Elemente erstellen, hinzufügen und löschen

Warenkorb-Modul – Warenkorb reinigen

Warenkorbmodul – Hintergrundfarbe zu ausgewählten Artikeln hinzufügen

jQuery-Größenmethode

jQuery-Positionsmethoden

jQuery wird auf die Head-Methode übertragen

Rückkehr nach oben mit Animation

Aufzugsnavigation Case-Show Hide Aufzugsnavigation

Aufzugnavigationskoffer – klicken Sie, um zum Zielort zu scrollen

Aufzugnavigationsfall – Klicken Sie auf die aktuelle Linie, um die aktuelle Klasse hinzuzufügen

Aufzugsnavigation – Schiebeseiten-Aufzugsnavigation fügt automatisch die aktuelle Klasse hinzu

Drosselklappe des Aufzugnavigationsgehäuses (Mutex-Sperre)

Einführung in jQuery-Ereignisse

Die Ereignisverarbeitung bindet ein oder mehrere Ereignisse

on implementiert die Ereignisdelegation und bindet Ereignisse an dynamische Elemente

Weibo-Veröffentlichungsfall

aus unverbindlichem Ereignis

jQuery löst automatisch Ereignisse aus

jQuery-Ereignisobjekt

Einführung in andere Methoden von jQuery

jQuery-Objekt copyextend (optional)

jQuery-Koexistenz mehrerer Bibliotheken

Verwendung des Wasserfall-Plug-ins

Bild-Lazy-Loading-Technologie

Nutzung des Vollbild-Bildlauf-Plugins (optional)

Bootstrap-Komponente

BootstrapJS-Plugin

Ali Baixiu

Analyse der funktionalen Anforderungen des Totlistenlayouts

todilist-Kernideen und lokales Speicherformat

todolist drücken Sie die Eingabetaste, um die lokalen Speicherdaten zu lesen

todolist drücken Sie die Eingabetaste, um die neuesten Daten im lokalen Speicher zu speichern

Die lokalen Speicherdaten von todolist werden gerendert und in die Seite geladen

todolist Klicken Sie auf die Schaltfläche „Löschen“, um die aktuelle Indexnummer abzurufen

todolist Klicken Sie auf die Schaltfläche „Löschen“, um den Löschvorgang abzuschließen

Klicken Sie auf das Kontrollkästchen, um das Done-Attribut der entsprechenden Daten zu ändern

Todolist ist in Bearbeitung und wurde abgeschlossen

todolist zählt die Anzahl der laufenden und abgeschlossenen Elemente

Einführung in die Funktion der Videoaufzeichnung

Punktflächen-Layoutstil

Layoutstil des Kartenbereichs

Layoutstil des Benutzerbereichs

Layoutstil des Bestellbereichs

Layoutstil des Verkaufsbereichs

Kanal- und Viertellayoutstile

Stilreferenz für das Ranking-Bereichslayout

Einführung in Datenvisualisierungsprojekte

Welche Datenvisualisierung

Übersicht über das Datenvisualisierungsprojekt

Einführung in ECharts

Grundlegende Verwendung von ECharts

Wählen Sie verschiedene Diagrammtypen

ECharts-Projektkonfiguration (Teil 1)

ECharts-Gitterkonfiguration

ECharts-bezogene Konfiguration (Mitte)

ECharts-Projektkonfiguration (Teil 2)

Rabattdiagrammerstellung und Konfigurationsartikelzusammenfassung

Analyse der Datenvisualisierungsprojektanpassungslösung

Anpassungsplan für das Datenvisualisierungsprojekt

Projektvorbereitung und Befolgen des Auto-Refresh-Browser-Plug-Ins

Visualisierungsprojektkörper- und Ansichtsfensterproduktion

Spaltencontainer für Visualisierungsprojekte

Anwendungsszenarien und Schnittprinzipien für Randbilder

Syntax für die Verwendung von Rahmenbildern

Produktion im öffentlichen Panel-Stil (Teil 1)

Produktion im öffentlichen Panel-Stil (Teil 2)

Rufen Sie das Schriftartsymbol nach Klassennamen auf

Datenvisualisierung Projektübersicht Bereich Modulproduktion

Datenvisualisierungsprojekt-Überwachungsbereichslayoutanalyse

Datenvisualisierung, Analyse des Wechsels der Registerkartenleiste des Projektüberwachungsbereichs

Datenvisualisierungsprojekt – nahtloses Scrollen des Überwachungsbereichs

Punktverteilungspunktmodul-Layout

Punktverteilungspunkt-Einführungsdiagramm

ECharts Kreisdiagramm-Tooltip-Parameterbedeutung

ECharts-Kreisdiagramm-Serienparameterbedeutung

Positionierung der kundenspezifischen Konfiguration des Verteilungsmoduls (Teil 1)

Positionierungsverteilungsmodul-kundenspezifische Konfiguration (Teil 2)