Vanille-JavaScript
- Setzen Sie Vanilla JavaScript auf die Webseite
- Vanille-JavaScript-Selektoren
- Vanille-JavaScript mit Arrays
- Klassen für ein Element hinzufügen, entfernen, umschalten und überprüfen
- CSS-Stil mit Vanilla JavaScript
- Abschluss
JavaScript ist die beliebteste Sprache für das Webdesign mit HTML- und CSS-Technologien. Dieser Artikel enthält Vanilla JS, was sich auf einfaches JavaScript bezieht.
Mit anderen Worten, wir können JavaScript ohne zusätzliche Bibliotheken verwenden. Jeder initialisiert Vanilla JavaScript als eines der leichtesten Frameworks.
Wir können Vanilla JavaScript leicht lernen. Vanilla JavaScript erstellt signifikante und wirkungsvolle Webanwendungen, und die meisten bekannten Websites verwenden derzeit Vanilla JS für ihre Websites.
Facebook, Google, YouTube, Yahoo, Wikipedia, LinkedIn, Microsoft, Apple usw. sind Websites, die Vanilla Script auf ihrer Homepage erwähnen. Schauen wir uns an, wie man Vanilla JavaScript einrichtet.
Setzen Sie Vanilla JavaScript auf die Webseite
JavaScript wird mit CSS und HTML ausgeführt. Damit eine JavaScript-Funktion funktioniert, sollte sie also in einem HTML-Dokument enthalten sein oder sich mit einem HTML-Dokument verbinden.
<!DOCTYPE html>
<html>
<title>Vanilla JavaScript</title>
</html>
<body>
<script>
var myName = "Rashmi";
alert(myName);
</script>
</body>
Fügen Sie irgendwo zwischen dem Tag <body> ein <script> ein. Außerdem gibt es eine andere Möglichkeit, eine JavaScript-Datei zu einer HTML-Datei hinzuzufügen.
Wir können eine JavaScript-Quelldatei innerhalb des <head>-Tags des HTML-Dokuments hinzufügen.
<head>
<script src="script.js"></script>
</head>
Hinzufügen des Tags <script> mit dem Pfad der JavaScript-Quelldatei mit dem Tag src.
Vanille-JavaScript-Selektoren
Selektoren werden verwendet, um Elemente in DOM abzurufen. Einige von ihnen beinhalten getElementById, getElementByClassName, getElementByTagName usw.
Wir können getElementById() verwenden, um Elemente anhand ihrer ID zu erhalten. HTML verwendet eine ID für jede benötigte Komponente.
Wenn wir diesem Element eine JavaScript-Funktion hinzufügen, können wir dieses Element in der Skriptdatei mit der Funktion getElementById aufrufen.
Schauen wir uns das folgende Beispiel an.
<!DOCTYPE html>
<html>
<title>Vanilla JavaScript</title>
<body>
<h3>Hello Vanilla Javascript</h3>
<p id="demo">vanilla javascript</p>
<script>
document.getElementById("demo").innerHTML= 5+6;
console.log('no errors');
</script>
</body>
</html>
Sein Hauptziel ist das Erstellen einer ID und das Abrufen dieser durch Aufrufen der Funktion getElementById. Die ID wurde als Namensgebung demo erstellt.
Innerhalb eines Skripts haben wir document.getElementById("demo") aufgerufen, um ein Demo-Element anhand seiner ID abzurufen.
Diese JavaScript-Funktion fügt also zwei Zahlen hinzu und gibt ein Ergebnis aus, indem sie ihre ID aufruft.
Ausgang:
Vanille-JavaScript mit Arrays
JavaScript Vanilla bietet eine for-Schleife, um Werte innerhalb der Array- und Knotenlistenelemente zu durchlaufen und darauf zuzugreifen.
<!DOCTYPE html>
<html>
<title>Vanilla JavaScript</title>
<body>
<h3>My javascript</h3>
<p id="demo">vanilla javascript</p>
<script>
var countries = ["Netherlands","Canada","USA"];
for(var i=0;i<countries.length;i++)
console.log(i)
</script>
</body>
</html>
Der obige Code verwendete eine for-Schleife zum Durchlaufen des String-Arrays von Ländern.
Innerhalb der for-Schleife wurde eine Zählervariable deklariert, die den aktuellen Wert des Arrays darstellt. Es hat den Wert 0 zugewiesen.
Die for-Schleife iteriert mit dem Schlüsselwort length über das Ende der Elemente im Array.
Nach jeder Iteration sollte i++ ausgeführt werden. Dies bedeutet, dass nach jeder Iteration eins zum Zähler hinzugefügt werden sollte.
Ausgang:
Klassen für ein Element hinzufügen, entfernen, umschalten und überprüfen
Vanilla JavaScript bietet die classList-API, ähnlich der jQuery-Klassenmanipulations-API. Die classList ist schreibgeschützt, führt aber add, remove, toggle und check für Klassen durch.
<!DOCTYPE html>
<html>
<head>
<title>class list</title>
</head>
<style>
.myStyle {
background-color: cornflowerblue;
padding: 16px;
}
</style>
<body>
<button onclick="addFunc()">Add</button>
<button onclick="removeFunc()">Remove</button>
<button onclick="toggleFunc()">Toggle</button>
<div id="classlist" class="myStyle">
<p>Classlist perform</p>
</div>
<script>
function addFunc() {
const list = document.getElementById("classlist").classList;
list.add("myStyle");
}
function removeFunc() {
const listRemove = document.getElementById("classlist").classList;
listRemove.remove("myStyle");
}
function toggleFunc() {
const listToggle = document.getElementById("classlist").classList;
listToggle.toggle("myStyle");
}
</script>
</body>
</html>
In Anbetracht des obigen Codes führt es die DOM-Elemente add, remove und toggle für das Absatzelement <p>Classlist perform</p> aus. Beim Klicken auf die Schaltfläche wird das Aussehen der <p>-Elemente geändert.
Innerhalb eines <script> gibt es drei Funktionen, die für add, remove und toggle erstellt wurden. Die Funktion addFunc() fügt dem Element <p> einen CSS-Stil hinzu.
Dazu können wir getElementByID für die classlist eine Variable zuweisen.
Danach können wir die Methode add für die deklarierte Variable (list.add()) aufrufen. Sie fügt dem <p>-Element eine Hintergrundfarbe und eine Padding-Eigenschaft hinzu.
Die removeFunc entfernt Stileigenschaften aus dem <p>-Element und toggleFunc schaltet myStyle ein und aus, wenn Sie auf die toggle-Schaltfläche klicken. Wir können Ausgaben wie folgt erhalten.
Hinzufügen:
Entfernen:
Umschalten:
Denken Sie daran, dass die Eigenschaft classList frühere Versionen der Version Internet Explorer 9 nicht unterstützt.
CSS-Stil mit Vanilla JavaScript
Wir verwenden das Element <style>, um den CSS-Stil für HTML-Elemente festzulegen. Daher bietet Vanilla JavaScript eine Camel-Case-Version zum Hinzufügen von CSS-Stilen.
Verwenden Sie .style, um den Inline-Stil für HTML-Elemente zu erhalten und festzulegen. Sehen Sie sich das folgende Beispiel an.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JS Set Inline Styles Demo</title>
</head>
<body>
<p id="intro">Inline style setting with Vanilla Javascript</p>
<script>
const phara = document.getElementById("intro");
// Appling inline styles on element
phara.style.color = "blue";
phara.style.fontSize = "30px";
phara.style.backgroundColor = "yellow";
</script>
</body>
</html>
In diesem Beispiel wird der Inline-Stil mit Vanilla JavaScript festgelegt, indem die Eigenschaft .style hinzugefügt wird. Wir können die Ausgabe wie folgt erhalten.
Abschluss
In diesem Artikel wurden einige der JavaScript-Attribute und -Methoden von Vanilla behandelt.
Es gibt noch mehr Methoden und Funktionen in Vanilla JavaScript als diese. Vanilla JavaScript ist schneller als andere Sprachen.
Es wird empfohlen, Vanilla JavaScript zu lernen, bevor Sie das JS-Framework studieren. Daher ist Vanilla JavaScript eine allgemeine Übersicht für Anfänger.
Es gibt ein paar Vorteile bei der Verwendung von Vanilla JavaScript. Wir können umfangreiche Schnittstellen erstellen und die Ausführung und Ausführung auf der Clientseite beschleunigen, wodurch die Beteiligung des Servers reduziert wird.
Außerdem benötigen kleine Anwendungen überhaupt keinen Server.
Nimesha is a Full-stack Software Engineer for more than five years, he loves technology, as technology has the power to solve our many problems within just a minute. He have been contributing to various projects over the last 5+ years and working with almost all the so-called 03 tiers(DB, M-Tier, and Client). Recently, he has started working with DevOps technologies such as Azure administration, Kubernetes, Terraform automation, and Bash scripting as well.