Heim Web-Frontend js-Tutorial Einführung in JavaScript_Javascript-Kenntnisse

Einführung in JavaScript_Javascript-Kenntnisse

May 16, 2016 pm 04:14 PM
javascript 简介

Dieser Artikel ist kein Referenzhandbuch. Er eignet sich nur zum Erwerb eines allgemeinen Verständnisses von JS. Wenn Sie eine detaillierte Syntax und Anwendung von JS benötigen, gehen Sie bitte zu w3school.

Was ist JavaScript?

Die Geburt von JavaScript

Um 1995 betrug die weltweite Mainstream-Bandbreite 28,8 Kbit/s, und heute beträgt die weltweite durchschnittliche Download-Bandbreite 21,9 Mbit/s (Daten stammen von http://www.netindex.com). Damals mussten Internetnutzer jedes Mal, wenn sie ein Formular absendeten, lange auf eine Antwort vom Server warten. Es war sogar möglich, dass sie nach ein paar Minuten die Antwort erhielten, dass ein bestimmter Artikel fehlte. Um die Benutzererfahrung zu verbessern, wurde ein in den Browser-Client eingebettetes Skript entwickelt, das eine einfache Formularbeurteilung realisieren kann. Dies ist JavaScript.

JavaScript wurde zuerst von Brendan Eich, der bei Netscape arbeitete, für Netscape Navigator 2.0 (NN2.0) entwickelt, der 1995 veröffentlicht werden sollte. Damals hieß es LiveScript. Da es mit dem damals sehr beliebten Sun-Unternehmen zusammenarbeitete, wurde diese Sprache JavaScript genannt, um mit dem Trend der Zeit – der Java-Sprache – Schritt zu halten.

Welche Beziehung besteht zwischen JavaScript und Java?

Dies ist auch die erste Reaktion von Laien, wenn sie JavaScript hören, und es ist auch eines der am meisten kritisierten Probleme dieser Sprache.

Genau genommen spielt es keine Rolle. Wenn wir eine Verbindung herstellen müssen, sind möglicherweise einige Funktionen, objektorientierte Ideen, Beurteilungsstrukturen, Schleifenanweisungen usw. gleich, aber dies sind offensichtlich keine Java-Patente, sondern der Konsens der Programmiersprachen.

JavaScript-Standardisierung und Entwicklungsgeschichte

Als JavaScript eingeführt wurde, dominierte der NN-Browser mit der besseren Benutzererfahrung den Browsermarkt, und Microsoft hat aufgeholt. Als IE3 auf den Markt kam, veröffentlichte Microsoft VBScript unter dem Namen JScript, das sich eigentlich nicht viel von Netscapes JavaScript unterschied (in heutigen Begriffen ein Nachahmer). Angesichts der Konkurrenz von Microsoft reichten Netscape und Sun ihre JavaScript-Entwürfe bei ECMA (European Computer Manufacturers Association) ein, um JavaScript zu standardisieren, und erstellten schließlich die erste Version von ECMAScript (ECMA-262).

Interessanterweise traten nach der Standardisierung von JavaScript durch Netscape interne Probleme auf und die JavaScript-Forschung stagnierte und startete den IE4, der die erste JavaScript-Engine einbaute, die der ECMA-Spezifikation entsprach . Darüber hinaus besetzen Microsoft-Systeme nach und nach den Markt für Computerbetriebssysteme, und der Marktanteil vorinstallierter IE-Browser nimmt allmählich zu, und NN wird weiterhin vom Markt verdrängt. Als Microsoft jedoch seinen größten Konkurrenten verlor, verlor es die Motivation, IE6~IE8 zu entwickeln, was in Bezug auf die Schnittstellendarstellung und die Skriptausführung zu einer seltsamen Blüte in der Geschichte der Browser und zu einem Fluch für das Frontend wurde Entwickler. Albtraum.

Code kopieren Der Code lautet wie folgt:

1.v1 Juni 1997 Erstausgabe
2.v2 Juni 1998 Das Format wurde überarbeitet, um es mit dem internationalen Standard ISO/IEC16262 in Einklang zu bringen
3.v3 Dezember 1999 Leistungsstarke reguläre Ausdrücke, bessere Textkettenverarbeitung, neue Steueranweisungen, Ausnahmebehandlung, klarere Fehlerdefinitionen, Formatierung der Zahlenausgabe und andere Änderungen
4.v4 ist noch nicht fertig...vielleicht klarere Definition von Klassen, Namespaces usw...
5.v5 Dezember 2009 „Strikter Modus“ hinzugefügt, eine Teilmenge, die eine gründlichere Fehlerprüfung ermöglicht, um strukturelle Fehler zu vermeiden. Klärt viele mehrdeutige Spezifikationen von Version 3 und berücksichtigt das Verhalten realer Implementierungen, die durchweg von dieser Spezifikation abweichen. Es wurden einige neue Funktionen hinzugefügt, z. B. Getter und Setter, Unterstützung für JSON und eine umfassendere Reflexion der Objekteigenschaften.

****Im Juni 2004 veröffentlichte die European Computer Manufacturers Association den ECMA-357-Standard, eine Erweiterung von ECMAScript. Er wird auch E4X (ECMAScript für XML) genannt.

Welche Beziehung besteht zwischen JavaScript und ECMAScript?

Tatsächlich sollte die Frage lauten, welche Beziehung zwischen JavaScript, JScript und ECMAScript besteht. Tatsächlich ist ECMAScript die allgemeine Spezifikation. JavaScript und JScript werden gemäß dieser Spezifikation entwickelt und sind mit ECMAScript kompatibel, enthalten jedoch Funktionen, die über ECMAScript hinausgehen. Unabhängig davon, um welches es sich handelt, wird es heute allgemein als JavaScript bezeichnet, nur weil es zuerst erschien und den größten Einfluss hatte, und sein Name wurde bis heute weitergegeben.

Was kann JavaScript?

Auf der Webseite können alle Vorgänge, die eine logische Verarbeitung erfordern, mit JavaScript ausgeführt werden. Zum Beispiel:

Code kopieren Der Code lautet wie folgt:

• Formularvalidierung
•Animationseffekte
•Web-Spiele
•Countdown
•……

Es gibt viele, viele Anwendungen, auf die ich hier nicht näher eingehen werde. Ich glaube, dass Sie nach dem Erlernen dieser Sprache viele Anwendungen finden werden.

Warum sollten Sie JavaScript lernen?

1. Da Sie keine Wahl haben, kann nur JavaScript alle gängigen Browser steuern, und JavaScript ist eine der wichtigsten Programmiersprachen der Welt. Um Web-Technologie zu lernen, müssen Sie JavaScript lernen.

2. JavaScript ist eine schöne Sprache, es ist gut, also müssen wir es lernen

Positionierung von JavaScript

Code kopieren Der Code lautet wie folgt:

1. JavaScript ist eine leichte Skriptsprache, die keine Kompilierung erfordert und von einer JavaScript-Parsing-Engine analysiert und ausgeführt wird (bezieht sich im Allgemeinen auf den Browser, natürlich nicht auf Parser wie Node)
2. JavaScript verfügt über nichtfunktionale Sprachfunktionen, funktionale Sprachfunktionen und dynamische Sprachfunktionen und seine Syntax ist sehr flexibel
3. JavaScript ist eine objektorientierte Programmiersprache. In der JavaScript-Welt gibt es ein Sprichwort: Alles ist ein Objekt. Seine Vererbung basiert auf der Prototypenvererbung (ich habe zuvor einen Artikel geschrieben, der speziell die Prototypenvererbung erläutert)
4. JavaScript ist eine C-ähnliche Sprache, sodass jeder, der C gelernt hat, problemlos mit JavaScript beginnen kann
5. Zum Schreiben von JavaScript ist kein Compiler erforderlich, sondern nur ein Texteditor (Notepad ist nicht erforderlich, sublimer Text wird hier dringend empfohlen)

Was hat JavaScript?

Das von allen verwendete JavaScript besteht jetzt aus drei Teilen: DOM, BOM und ECMAScript (oder Core-JS).

DOM

Hier wird davon ausgegangen, dass jeder zumindest ein gewisses Verständnis von HTML und CSS hat. Wenn Sie HTML und CSS direkt überspringen möchten, um diesen Artikel zu lesen, lesen Sie zuerst hier.

DOM, Dokumentobjektmodell

Wir wissen, dass XHTML erfordert, dass Tags korrekt geschlossen und verschachtelt werden. Durch die Verschachtelung von Tags entsteht eine Eltern-Kind-Beziehung (oder Vorfahren-Nachkommen-Beziehung). Das DOM bietet eine große Anzahl von APIs, die es uns ermöglichen, den DOM-Baum einfach zu bedienen. Ich werde später einen Artikel speziell über JS DOM schreiben.

Mit DOM können wir Seiteninhalte dynamisch ändern, Stile anpassen usw. Dies ist auch ein Ausdruck der Vielfalt von JS.

Stückliste

Stückliste, Browserobjektmodell

Ähnlich wie DOM, außer dass der Hauptteil zum Browser wird. Der Browser bietet außerdem eine große Anzahl von APIs, von denen einige für JS offen sind, und bietet uns Methoden zum Bedienen des Browserfensters.

Häufige Verwendung:

Code kopieren Der Code lautet wie folgt:

1. Die Möglichkeit, ein neues Browserfenster zu öffnen; 2. Die Möglichkeit, das Browserfenster zu verschieben, zu schließen und seine Größe zu ändern; 3. Navigationsobjekt, das detaillierte Informationen zum WEB-Browser bereitstellen kann; 4. Ein lokales Objekt, das detaillierte Informationen über die vom Browser geladene Seite bereitstellen kann; 5. Ein Bildschirmobjekt, das detaillierte Informationen über die Bildschirmauflösung des Benutzers bereitstellt; 6.Unterstützungscookies
7. Internet Explorer erweitert das BOM um ActiveX-Objektklassen, und ActiveX-Objekte können über JavaScript implementiert werden.



ECMAScript-Kern

Auch JS-Kern genannt, egal wie Sie es nennen, die Bedeutung ist dieselbe. Sie stellen alle die Kernkomponenten der JS-Sprache dar, einschließlich Variablendefinition, Speicherbereinigung, Syntax, Umfang usw. Im Gegensatz zu den oben erwähnten DOM und BOM, die nur die Verwendung dieser APIs erfordern, ist der ECMAScript-Kern die Essenz der Sprache und erfordert kontinuierliches Lernen. Im nächsten Kapitel wird die Syntax von JS weiter erläutert.

Verwendung von JavaScript

Inline

Inline ist JavaScript, das in Tags geschrieben ist. Beispielsweise schreiben wir in HTML:

Code kopieren

Der Code lautet wie folgt:
Wenn wir auf die Schaltfläche klicken, wird in einem Popup-Fenster „geklickt“ angezeigt.
Beachten Sie jedoch, dass dies dringend nicht empfohlen wird, da dies zu großen Wartungsproblemen führt. Jedes Mal, wenn wir das Ereignis ändern müssen, müssen wir zuerst das Element finden und dann seinen Javascript-Inhalt ändern. Diese Javascript-Codes können nicht wiederverwendet werden.
Darüber hinaus müssen in Tags geschriebene Ereignisse aktiviert sein, und js kann nur über Ereignisse in Tags eingeführt werden, und einfache js-Ausdrücke können nicht geschrieben werden


Eingebettet

Eingebettet bedeutet, JS-Code in das Skript-Tag von HTML zu schreiben. Die Methode besteht darin, ein neues Skript-Tag in HTML hinzuzufügen und dann einen beliebigen JS-Code wie folgt in die Mitte des Tags einzufügen:

Code kopieren

Der Code lautet wie folgt:



          

<script><br> <span style="font-family: Arial, Helvetica, sans-serif;">var btn = document.getElementById("btn");</span><pre name="code" class="javascript ">         btn.onclick = function() {<br> alarm("angeklickt werden");<br> }<br> </script>
Wenn Sie Inline verwenden, sind Sie viel freier als Inline. Sie können mehr Code schreiben, Sie können auch das Problem des Entkommens von Anführungszeichen vermeiden und die Wartung wird einfacher. Es gibt jedoch auch ein Problem. Diese Codes können nur auf dieser Seite angewendet werden und können nicht von anderen Seiten verwendet werden.

Externer Link

Die externe Linkmethode behebt alle Mängel der beiden oben genannten Formen. So geht's:

Erstellen Sie zunächst eine neue Datei und ändern Sie das Suffix in .js. Beispielsweise erstellen wir eine neue click.js-Datei und kopieren dann den js-Code in die Inline-Datei, die wir gerade geschrieben haben (beachten Sie, dass das Skript-Tag nicht enthalten ist)

Code kopieren Der Code lautet wie folgt:
var btn = document.getElementById("btn");
btn.onclick = function() {
​​ Alert("angeklickt werden");
}

Dann führen Sie

in HTML über das Skript-Tag ein

Code kopieren Der Code lautet wie folgt:


          




Der Vorteil besteht darin, dass derselbe JS-Code von mehreren HTML-Seiten gemeinsam genutzt werden kann. Der Nachteil besteht darin, dass die Anzahl der Dateien zunimmt und die für Anfragen erforderliche Zeit zunimmt, sodass die Wiederverwendbarkeit des Codes verbessert werden sollte js-Dateien sollten am Ende zusammengeführt werden (verschiedene js-Dateien zu einer js-Datei zusammenführen)

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
2 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Abenteuer: Wie man riesige Samen bekommt
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌
Zwei -Punkte -Museum: Alle Exponate und wo man sie finden kann
1 Monate vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Mar 18, 2024 am 09:10 AM

Object-Relational Mapping (ORM)-Frameworks spielen eine wichtige Rolle in der Python-Entwicklung. Sie vereinfachen den Datenzugriff und die Datenverwaltung, indem sie eine Brücke zwischen Objekt- und relationalen Datenbanken schlagen. Um die Leistung verschiedener ORM-Frameworks zu bewerten, wird in diesem Artikel ein Vergleich mit den folgenden gängigen Frameworks durchgeführt: sqlAlchemyPeeweeDjangoORMPonyORMTortoiseORM Testmethode Der Benchmark verwendet eine SQLite-Datenbank mit 1 Million Datensätzen. Der Test führte die folgenden Vorgänge in der Datenbank durch: Einfügen: 10.000 neue Datensätze in die Tabelle einfügen. Lesen: Alle Datensätze in der Tabelle lesen. Aktualisieren: Ein einzelnes Feld für alle Datensätze in der Tabelle aktualisieren. Löschen: Alle Datensätze in der Tabelle löschen. Jeder Vorgang

Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Einfaches JavaScript-Tutorial: So erhalten Sie den HTTP-Statuscode Jan 05, 2024 pm 06:08 PM

JavaScript-Tutorial: So erhalten Sie HTTP-Statuscode. Es sind spezifische Codebeispiele erforderlich. Vorwort: Bei der Webentwicklung ist häufig die Dateninteraktion mit dem Server erforderlich. Bei der Kommunikation mit dem Server müssen wir häufig den zurückgegebenen HTTP-Statuscode abrufen, um festzustellen, ob der Vorgang erfolgreich ist, und die entsprechende Verarbeitung basierend auf verschiedenen Statuscodes durchführen. In diesem Artikel erfahren Sie, wie Sie mit JavaScript HTTP-Statuscodes abrufen und einige praktische Codebeispiele bereitstellen. Verwenden von XMLHttpRequest

Mar 18, 2024 am 09:19 AM

Object-Relational Mapping (ORM) ist eine Programmiertechnologie, die es Entwicklern ermöglicht, Objektprogrammiersprachen zum Bearbeiten von Datenbanken zu verwenden, ohne SQL-Abfragen direkt schreiben zu müssen. ORM-Tools in Python (wie SQLAlchemy, Peewee und DjangoORM) vereinfachen die Datenbankinteraktion für Big-Data-Projekte. Vorteile Einfachheit des Codes: ORM macht das Schreiben langwieriger SQL-Abfragen überflüssig, was die Einfachheit und Lesbarkeit des Codes verbessert. Datenabstraktion: ORM bietet eine Abstraktionsschicht, die Anwendungscode von Datenbankimplementierungsdetails isoliert und so die Flexibilität verbessert. Leistungsoptimierung: ORMs nutzen häufig Caching- und Batch-Vorgänge, um Datenbankabfragen zu optimieren und dadurch die Leistung zu verbessern. Portabilität: ORM ermöglicht Entwicklern

So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript So erhalten Sie auf einfache Weise HTTP-Statuscode in JavaScript Jan 05, 2024 pm 01:37 PM

Einführung in die Methode zum Abrufen des HTTP-Statuscodes in JavaScript: Bei der Front-End-Entwicklung müssen wir uns häufig mit der Interaktion mit der Back-End-Schnittstelle befassen, und der HTTP-Statuscode ist ein sehr wichtiger Teil davon. Das Verstehen und Abrufen von HTTP-Statuscodes hilft uns, die von der Schnittstelle zurückgegebenen Daten besser zu verarbeiten. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript HTTP-Statuscodes erhalten, und es werden spezifische Codebeispiele bereitgestellt. 1. Was ist ein HTTP-Statuscode? HTTP-Statuscode bedeutet, dass der Dienst den Dienst anfordert, wenn er eine Anfrage an den Server initiiert

Erhalten Sie ein umfassendes Verständnis von 7 häufig verwendeten Java-Designmustern Erhalten Sie ein umfassendes Verständnis von 7 häufig verwendeten Java-Designmustern Dec 23, 2023 pm 01:01 PM

Java-Entwurfsmuster verstehen: Eine Einführung in 7 häufig verwendete Entwurfsmuster. Es sind spezifische Codebeispiele erforderlich. Java-Entwurfsmuster sind eine universelle Lösung für Software-Entwurfsprobleme. Sie bieten eine Reihe allgemein akzeptierter Entwurfsideen und Verhaltenskodizes. Entwurfsmuster helfen uns, die Codestruktur besser zu organisieren und zu planen, wodurch der Code wartbarer, lesbarer und skalierbarer wird. In diesem Artikel stellen wir sieben häufig verwendete Entwurfsmuster in Java vor und stellen entsprechende Codebeispiele bereit. Singleton Patte

Mar 18, 2024 am 09:25 AM

Object-Relational Mapping (ORM) ist eine Technologie, die es ermöglicht, eine Brücke zwischen objektorientierten Programmiersprachen und relationalen Datenbanken zu schlagen. Die Verwendung von PythonORM kann Datenpersistenzvorgänge erheblich vereinfachen und dadurch die Effizienz und Wartbarkeit der Anwendungsentwicklung verbessern. Vorteile Die Verwendung von PythonORM bietet die folgenden Vorteile: Reduzierung des Boilerplate-Codes: ORM generiert automatisch SQL-Abfragen und vermeidet so das Schreiben einer großen Menge Boilerplate-Code. Vereinfachen Sie die Datenbankinteraktion: ORM bietet eine einheitliche Schnittstelle für die Interaktion mit der Datenbank und vereinfacht so Datenoperationen. Sicherheit verbessern: ORM verwendet parametrisierte Abfragen, die Sicherheitslücken wie SQL-Injection verhindern können. Datenkonsistenz fördern: ORM gewährleistet die Synchronisierung zwischen Objekten und Datenbanken und sorgt für die Datenkonsistenz. Wählen Sie ORM aus

So implementieren Sie ein elektronisches Online-Signatursystem mit WebSocket und JavaScript So implementieren Sie ein elektronisches Online-Signatursystem mit WebSocket und JavaScript Dec 18, 2023 pm 03:09 PM

Überblick über die Verwendung von WebSocket und JavaScript zur Implementierung eines elektronischen Online-Signatursystems: Mit dem Aufkommen des digitalen Zeitalters werden elektronische Signaturen in verschiedenen Branchen häufig verwendet, um herkömmliche Papiersignaturen zu ersetzen. Als Vollduplex-Kommunikationsprotokoll kann WebSocket eine bidirektionale Datenübertragung in Echtzeit mit dem Server durchführen. In Kombination mit JavaScript kann ein elektronisches Online-Signatursystem implementiert werden. In diesem Artikel wird erläutert, wie Sie mit WebSocket und JavaScript ein einfaches Online-Programm entwickeln

Verleihen Sie Ihren Projekten mit Python Tkinter GUI-Charme Verleihen Sie Ihren Projekten mit Python Tkinter GUI-Charme Mar 24, 2024 am 09:46 AM

Tkinter ist eine leistungsstarke Bibliothek zum Erstellen grafischer Benutzeroberflächen (GUIs) in Python. Es ist bekannt für seine Einfachheit, plattformübergreifende Kompatibilität und nahtlose Integration in das Python-Ökosystem. Durch die Verwendung von Tkinter können Sie Ihrem Projekt eine benutzerfreundliche Oberfläche hinzufügen, die Benutzererfahrung verbessern und die Interaktion mit Ihrer Anwendung vereinfachen. Erstellen einer Tkinter-GUI-Anwendung Um eine GUI-Anwendung mit Tkinter zu erstellen, führen Sie die folgenden Schritte aus: Importieren Sie die Tkinter-Bibliothek: importtkinterask Erstellen Sie das Tkinter-Hauptfenster: root=tk.Tk() Konfigurieren Sie das Hauptfenster: Legen Sie Fenstertitel, Größe und Position fest usw. GUI-Elemente hinzufügen: Mit Tki

See all articles