Auf Html Elemente zugreifen mit Dart

Bisher: Wir haben ein Template für ein Dart Web Project erstellt, Bootstrap 5 integriert. Bei Bootstrap 5 haben wir gelernt, das es ein 12 Kolumnen / Spalten Layoutsystem, ein wesentlicher Bestandteil dieses Frameworks ist.

In diesem Post werden wir näher auf die Verknüpfung zwischen unserem Dart File und index.html eingehen.
Bevor wir das tun, ein Hinweis auf DOM. Die Abkürzung steht für Document Object Model. 
Wenn ein Browser eine Webpage lädt, erstellt er im Speicher ein DOM der Webpage. Sie dient für JavaScript, aber natürlich auch für Dart, als Interface. Damit ist gemeint, das dieses DOM  eine baumartige Struktur zur Verfügung stellt, in welcher wir uns unter Verwendung von Dart bewegen.
Ich werde hier nicht weiter darauf eingehen, da es im Web genügend Ressourcen gibt, die weitere Informationen dazu liefern.

Schauen Sie sich noch einmal den Code der index.html Datei an:


<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="scaffolded-by" content="https://github.com/dart-lang/stagehand">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <title>dartweb1</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
    <script defer src="main.dart.js"></script>
</head>

<body>
  

 
  <div>
    <h1 class="display-4" id="output"></h1>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
</body>
</html>

Und hier betrachten wir besonders den <h1>....</h1>  Tag:

<h1 class="display-4" id="output"></h1>

Ein h1 Element stellt eine Überschrift dar. Es gibt dieses Element in sechst Stufen, h1 bis h6. Wichtig ist im Code oben class und id. Beides sind Namen für Attribute, die diesem h1 Tag zugeordnet werden. class verweist dabei mit "display-4" auf eine css3 Klasse, id erhält mit "output" eine, in diesem html Dokument, einzigartige Kennung. 
Kurz: In diesem html Dokument könnten mehrere h1 Elemente die class="display-4" haben, aber nur ein h1 Element kann die id="output" haben.

Man kann nicht alle verfügbaren Html Attribute, jedem Html Tag zuordnen. Hier lohnt es sich im Zweifelsfall, weitere Informationen einzuholen. Hier ein Link zu den globalen Attributen , und zu den Ereignis Attributen für das h1 Tag.
Natürlich muss ein Html Tag keine Attribute haben, das ist Ihre Entscheidung.

Bevor Sie zurück zu dem main.dart file gehen: Beachten Sie, das im <h1>...</h1>  Tag keine Zeichenkette steht ! Das main.dart file:

import 'dart:html';

void main() {
  querySelector('#output').text = 'Die Dart Anwendung funktioniert !';
}

Der Text wird durch diesen Code in die Webpage gebracht.

querySelector(...)

Mit dieser Funktion aus der dart:html Bibliothek, können Sie einzelne Html Elemente anhand der Attribute ansprechen. Im Code oben wird das id Attribut als Suchargument verwendet Ändern Sie den h1 Tag wie folgt ab:

<h1 class="display-4" id="output" name="felix"></h1>

Neu sehen Sie das Attribut name im h1 Tag. Den dart Code ändern Sie wie folgt:

import 'dart:html';

void main() {
  querySelector('[name="felix"]').text = 'Die Dart Anwendung funktioniert !';
}

Wenn Sie den Code in Visual Studio Code ausführen lassen, erscheint das gleiche Ergebnis, wie bei der ersten Variante:


Sie können querySelector(...) auch den Tag Namen als Argument übergeben. Wobei hier zu beachten ist, das die Funktion das erste Tag des gesuchten Typs zurückgibt. Das heisst, sollten sie mehrere h1 Elemente in Ihrem Dokument haben, wird querySelector('h1'), das erste zurückgeben, das er findet. Bis bald !
Standort: Zürich, Schweiz

Kommentare

Kommentar veröffentlichen

Beliebte Posts aus diesem Blog

Material Design in Flutter Teil 2

Bild
Im ersten Teil des Posts zu diesem Thema, haben wir ein kleines Programm geschrieben, das einige "Material Design Elemente" von Flutter auf den Bildschirm (Emulator) bringt. Im zweiten Teil des Posts gehen wir nun ein wenig mehr auf die Möglichkeiten ein, die Material Design bietet. Farben Wer in seinem Flutter Projekt Farben direkt definieren will, kann diese als ARGB werte festlegen. Hier ein Beispiel: 0xff42f4dc Die obige Zeichenkette beginnt mit 0x und definiert, das die Zeichenkette als Hexadezimal Wert zu verstehen ist. ff , ist der Wert für den Alpha Kanal der Farbe. Dieser legt die Transparenz der Farbe fest. In diesem Beispiel ist der Wert 255 , was nichts anderes heißt, als das die Farbe zu 100% sichtbar ist. Geringere Werte lassen die Hintergrundfarbe durchscheinen bzw mischen "unsere" Farbe mit der Hintergrundfarbe. 42 legt den Rotanteil fest, f4 den Grünanteil, dc , den Blauanteil fest. Kompakt: 0x = es handelt sich um eine Hex...
Mehr anzeigen

Dart Basic: Listen Part 1

Bild
In diesem Post wenden wir uns einem Basiselement fast jeder Programmiersprache zu, der Liste. Als Laie könnte man meinen, okay ein einfaches Thema, aber wen man genau hinschaut, ist es vielfältiger, als man denken möchte. Eine Liste kann nicht wachsen ? Es gibt Situationen, da wissen wir im Vorfeld schon, wie groß eine Liste sein wird.  Die Liste deiner Freunde zum Beispiel oder eine Liste deiner Familie. Der Anfang ist einfach. Wir haben eine Variable, meineKleineListe , diese ist vom Typ List<String> . Ihr weisen wir anschließend mit new List(5)  ein neues Listen Objekt zu . Unsere Variable meineKleineListe kann nun als Liste angesprochen werden und hat genau...wir sind verwundert..Platz für 5 Einträge. Kommen wir aber noch kurz zum Titel dieses Abschnitts, von wegen wachsen. Da wir mit new List(5 ) explizit festgelegt haben, das die Liste 5 Einträge haben soll, wird sich unsere Entwicklungsumgebung mit einem Fehler zu Worte melden, sollten wir versuchen ei...
Mehr anzeigen

Listen in Dart (2021): Part 1 List.filled List.empty und List.add

Bild
  Vor langer Zeit hatte ich in diesem Blogg schon einmal das Thema Listen aufgegriffen. Im ersten Post dazu, anhand eines einfachen Beispiels. Anschliessend war die Iterable Klasse ein Thema, welche mit der List Klasse einen engen Bezug hat. Abschließend wurde das Thema dann noch in einem zweiten Post vertieft. Wie oben geschrieben war das vor langer Zeit und es macht Sinn das Thema noch einmal aufzugreifen und sei es nur um das Wissen dazu aufzufrischen. Alle Code Beispiele wurden mit Dart 2.13, Null safety aktiviert, getestet . 2 Sorten von Listen Dart stellt zwei Arten von Listen zur Verfügung: eine mit fixer Grösse und eine die "wachsen" kann. Im Code oben sehen Sie zwei Versionen, wie Sie eine Liste definieren können. Wichtig dabei ist, das Sie die leere Liste erst dann über den Index ansprechen können, wenn Sie mindestens einen Eintrag hinzugefügt haben !  Im Vergleich zu früheren Dart Versionen hat sich das erstellen einer Liste mit fixer Länge geändert. Akt...
Mehr anzeigen