Heim > Web-Frontend > js-Tutorial > Hauptteil

Die Entwicklung von JavaScript

Linda Hamilton
Freigeben: 2024-11-22 16:19:16
Original
145 Leute haben es durchsucht

Die bescheidenen Anfänge (1995)

JavaScript wurde von Brendan Eich bei Netscape entwickelt, um Interaktivität auf Websites zu bringen. Ursprünglich hieß es Mocha, dann LiveScript und erhielt seinen heutigen Namen, um der Popularität von Java gerecht zu werden. Die frühe Nutzung war grundlegend, beispielsweise das Hinzufügen einfacher Formularvalidierungen.

Beispiel für den Code von 1995:

<script>
  alert('Welcome to the 90s Web!');
</script>
Nach dem Login kopieren
Nach dem Login kopieren

Lesen Sie mehr über die Einführung von JavaScript in MDN Web Docs.

Die ECMAScript-Standardisierung (1997)

Um die Syntax zu vereinheitlichen, wurde ECMAScript eingeführt. ECMAScript 3 (1999) führte Verbesserungen ein, die den Grundstein für die Browserkonsistenz legten. ECMAScript 5 (2009) hat JavaScript mit dem strikten Modus und nativen Array-Methoden wie forEach weiter modernisiert.

Beispiel für eine Array-Methode:

['apple', 'banana', 'cherry'].forEach(fruit => console.log(fruit));
Nach dem Login kopieren
Nach dem Login kopieren

Entdecken Sie ECMAScript-Details bei ECMA International.

The Evolution of JavaScript

AJAX und das dynamische Web (2000er Jahre)

AJAX (Asynchronous JavaScript and XML) ermöglichte es Webanwendungen wie Gmail und Google Maps, Daten ohne Neuladen der Seite zu aktualisieren, was den Wandel hin zu umfassenderen Weberlebnissen markierte.

AJAX-Anfragebeispiel:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://example.com/data', true);
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText);
  }
};
xhr.send();
Nach dem Login kopieren

Frameworks revolutionieren JavaScript

Das Aufkommen von jQuery (2006) und MooTools vereinfachte DOM-Interaktionen und führte eine robuste Cross-Browser-Kompatibilität ein.

Vanilla JS vs. jQuery-Beispiel:

// Vanilla JavaScript (2005)
document.querySelector('#btn').addEventListener('click', () => alert('Clicked!'));

// jQuery (2006)
$('#btn').click(() => alert('Clicked!'));
Nach dem Login kopieren

Tauchen Sie in der jQuery-Dokumentation in die Auswirkungen von jQuery ein.

Die Moderne: ES6 und darüber hinaus (2015)

ECMAScript 2015 (ES6) brachte wichtige Updates und verbesserte Codierungspraktiken mit let, const, Vorlagenliteralen, Pfeilfunktionen, Klassen und Modulen.

ES6-Beispiel mit Klassensyntax:

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}
const person = new Person('Alice');
person.greet(); // Hello, my name is Alice
Nach dem Login kopieren

Referenz für ES6-Updates bei MDN ECMAScript 2015.

Node.js bringt JavaScript auf Server (2009)

Node.js ermöglichte es JavaScript, sich von den Browserbeschränkungen zu befreien, sodass es auf Servern ausgeführt werden konnte und den Weg für Full-Stack-JavaScript ebnete.

Node.js-Beispiel (Servererstellung):

const http = require('http');
http.createServer((req, res) => {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello, world!');
}).listen(3000);
console.log('Server running at http://localhost:3000/');
Nach dem Login kopieren

Entdecken Sie Node.js auf der offiziellen Website von Node.js.

7. Frameworks und Bibliotheken: React, Vue und Angular

React.js (2013) brachte eine komponentenbasierte Architektur, während Vue.js (2014) den Schwerpunkt auf Benutzerfreundlichkeit legte. Angular (2016) hat die Web-App-Entwicklung mit TypeScript und leistungsstarker Zustandsverwaltung überarbeitet.

Beispiel für eine Reaktionskomponente:

function App() {
  return <h1>Hello, React!</h1>;
}
Nach dem Login kopieren

Mehr über React unter React Docs.

TypeScript: Typsicherheit für JavaScript (2012)

TypeScript führte die statische Typisierung ein, wodurch es einfacher ist, Fehler während der Entwicklung zu erkennen.

TypeScript vs. JavaScript-Beispiel:

<script>
  alert('Welcome to the 90s Web!');
</script>
Nach dem Login kopieren
Nach dem Login kopieren
The Evolution of JavaScript

TypeScript: Weil JavaScript etwas mehr Disziplin gebrauchen könnte

Shafayet Hossain ・ 14. Okt.

#javascript #webdev #Anfänger #Programmierung



Erfahren Sie mehr über TypeScript auf der offiziellen TypeScript-Website.

Revolution der asynchronen Programmierung

Von der Callback-Hölle zu Promises und Async/Await hat sich der Ansatz von JavaScript zur asynchronen Programmierung weiterentwickelt, um die Lesbarkeit und Wartbarkeit zu verbessern.

Beispielübergang:

['apple', 'banana', 'cherry'].forEach(fruit => console.log(fruit));
Nach dem Login kopieren
Nach dem Login kopieren

Details zur asynchronen Entwicklung bei MDN Async Functions.

JavaScript im Jahr 2024 und darüber hinaus

Die Zukunft von JavaScript hält Vorschläge wie Dekoratoren, Datensatz- und Tupeltypen und Mustervergleich bereit, was seine Anpassungsfähigkeit an die Bedürfnisse der Entwickler widerspiegelt.

Lesen Sie mehr über kommende Funktionen unter TC39 Proposals.


Meine Website: https://Shafayet.zya.me


Ein Meme für dich???

The Evolution of JavaScript

Das obige ist der detaillierte Inhalt vonDie Entwicklung von JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage