Todos sabemos que dart es un tipo de javascript. Entonces podemos manipular datos dentro de páginas HTML con la ayuda de dart de manera similar a como podemos hacerlo con javascript.
En HTML DOM (Document Object Model) cada página web está en una ventana, por lo que se considera como un objeto. El modelo jerárquico que sigue es el siguiente:
Dart proporciona al usuario la posibilidad de manipular estos elementos en una página HTML con la ayuda de la biblioteca dart:html . Para usar un programa dart dentro de HTML, debe importar esta biblioteca en su código.
Sintaxis:
import 'dart:html';
Para acceder a los elementos dentro de la página, utilizamos la función de selector de consulta para manipular el elemento.
Sintaxis:
Element querySelector(String selectors);
El selector de strings puede ser el nombre de clase (.class_name), id (#id), elemento html (h1, p, …), tipo de atributo (input[type=”button”], …) o asterisco (*).
Hay dos formas de usar el dardo de práctica en su página web:
- En línea en Dartpad .
- En tu sistema.
Para el primero, no tienes que instalar dart en tu sistema.
Pasos:
- Abra Dartpad en una nueva ventana.
- Ahora haga clic en el botón Newpad.
- Seleccione el idioma Dart y también habilite el botón Html y presione el botón crear.
De esta manera, obtendrá el lugar para trabajar en el dardo y lo incrustará con una página HTML. La otra forma de hacerlo requiere dart-SDK dentro de su sistema.
Para hacerlo puedes seguir este sitio web .
Ejemplo 1: Creación de una página simple de dart-Html.
HTML
<!DOCTYPE html> <html> <head> <title>Geeks for Geeks</title> <link rel = "stylesheet" href = "styles.css"> <script defer src = "main.dart" type = "application/dart"></script> <script defer src = "packages/browser/dart.js"></script> </head> <body> <h1 id="header"></h1> </body> </html>
Dart
// Importing dart HTML library
import 'dart:html';
void main()
{
// Calling the element with id header and setting its value dynamically
var header = querySelector('#header');
header.text = "Geeks For Geeks!";
}
CSS
// Setting CSS style
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
background-color: whitesmoke;
}
h1 {
color: ForestGreen;
font-family: Arial, Helvetica, sans-serif;
}
Producción:
La pantalla de salida se parece a:
Comprender el flujo de control:
Ejemplo 2: Creación de un programa de concatenación de strings.
HTML
<!DOCTYPE html> <html> <head> <title>Geeks for Geeks</title> <link rel = "stylesheet" href = "styles.css"> <script defer src = "main.dart" type = "application/dart"></script> <script defer src = "packages/browser/dart.js"></script> </head> <body> <h1>Geeks For Geeks</h1> <div class="gfg"> Enter First String: <input type = "text" id = "first_name"> <br><br> Enter Second String: <input type = "text" id = "second_name"> <br><br> Enter Third String: <input type = "text" id = "third_name"> <br><br> <input type = "button" id = "concat" value="Concat"> </div> <h3 id="output"></h3> </body> </html>
Dart
// Importing dart HTML library
import 'dart:html';
void main()
{
// This statement will call geeksForGeeks function when concat
// button is clicked...
querySelector('#concat').onClick.listen(geeksForGeeks);
}
// Function taking all the three strings,
// concating them and displaying inside h3 tag...
void geeksForGeeks(MouseEvent e)
{
String s1 = (querySelector('#first_name') as InputElement).value;
String s2 = (querySelector('#second_name') as InputElement).value;
String s3 = (querySelector('#third_name') as InputElement).value;
querySelector('#output').text = s1 + ' ' + s2 + ' ' + s3;
}
CSS
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
width: 100%;
height: 100%;
background-color: whitesmoke;
}
h1 {
color: ForestGreen;
font-family: Arial, Helvetica, sans-serif;
}
.gfg {
color: red;
font-family: Arial, Helvetica, sans-serif;
}
#output{
background-color: pink;
color: Red;
}
Producción:
Cuando presiona el botón concat, el texto a continuación se genera dinámicamente mediante la concatenación de las strings anteriores.
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA