Katika somo hili tutakwenda kujifunz ajinsi ya kutumia library ya html kwenye Dart. somo hili litakupeleka kujifunza jinsi ya ku display dart output kwenye faili la html.
Somo letu litakuwa katika njia mbili, ya kwanz ani ya online na ya pili ni ya offline. Kwanza tutaanza na njia ya online. Hapa tutakwenda kutumia Dart pad ambayo ni text ediroe iliyoandaliwa na waanzilishi wa Dart. editor hii ina feature zote.
Kwanza tutatengeneza mafaili yetu ya html, la css, na html. Kisha tutakwenda ku pest code hizo kwenye pad editor ya online.
Ili uweze ku run html code kwenye dart kwanza tutatakiwa ku import html . hivyo basi ingia kwenye dart pad, anza ku import dart library
import 'dart:html';
void main()
{
}
Kisha kwenye hiyo dart pad kwa juu kuna palipo andikwa html bofya hapo kisha pest code za html.
<!DOCTYPE html>
<html>
<head>
<title>Bongoclass</title>
<link rel = "stylesheet" href = "styles.css">
</head>
<body>
<h1 id="header"></h1>
<p>Karibu bongoclass</p>
</body>
</html>
Kisha angalia palipoandikwa CSS pesa code hizo za css
body {
background-color: black;
}
h1 {
color: ForestGreen;
font-family: Arial, Helvetica, sans-serif;
}
Baada ya hapo bofya palipoandikwa run kwa juu upande wa kulia. Kama umefuata vyema maelekezo utaona upande wa kulia kuna palipoandikwa karibu bongoclass
Kwama unatumia simu kutakuwa na utofauti kidogo lakini maelezo hayo niliotoa yanatosheleza.
Mpaka kufikia hapo umeona faili letu la html limesoma. Sasa tunataka output za dart zionekane kwenye html. Mfano tunataka tukiprint text kwenye dart zisome kwenye html file. Kufanya hivi kwanza utatakiwa kuweka id kwenye html zako wapi unataka kuona hizo output.
Tuseme tunataka kuweka title mafunzo ya Dart na tunataka title hii isome kwenye <h1> tag. Hii tag itaitwa selector hivyo basi hii selector tutaiita wneye code za dart kw akutumia id yake. Mfano <h1 id="header"></h1> hapo id ya selector yetu ni header. Rejea mafunzo yetu ya css kujifunz zaidi kuhusu selectors.
Unaweza kuwa na selector zaidi ya moja kwenye faili na zote zikawa na id zao. Kumbuka id haitakiwi kufanana. Pia kwenye Dart unaweza kuita selector zaidi ya moja. Sasa function inayotumika kuita hizo selector kwenye dart ni querySelector() ndani ya hiyo function utaweka hiyo id ya selector yako.
Mfano
querySelector(‘#header’)
Hivyo basi tutatengeneza variable kwa ajili ya ku access hiyo selector yetu
var header = querySelector('#header');
Kisha tutakwenda kuitumia variable yetu ili kupeleka data zetu kwenye faili la html
header.text = "Mafunzo ya Dart";
Code nzima zitaonekana hivi:-
import 'dart:html';
void main()
{
var header = querySelector('#header');
header?.text = "Mafunzo ya Dart";
}
Unaweza kuongeza function nyingibne na hata click event. Rejea mafunzo yetu ya javascript utajifynza mengine jinsi ya kutumia id ili kucheza na html. Sasa ngoja turudi kwenye njia yetu ya offline.
Kwa kutumia webstorm IDE
Hii ni software kwa ajili ya kutengeneza web app. Watengenezaji wa software hii ni jetbrain. Unawez aku download free kwenye website yao ya jetbrain. Link nimetoa kwenye somo la kwanza. Rejea jinsi ya kuitumia, kwanz autatakiwa ku download dart plugin. plugin hii ni free. kisha utachaguwa Bare-bones Web App kama inavyoelekewa kwenye picha namba tatu hapo chini:-
Ukishafunguwa software hii tengeneza project mpya kw akuboofya palipoandikwa new project. Kwenye list chaguwa Dart kama inavyo onueshwa kwenye picha namba 1 hapo chini. kisah weka jina la project yako kama inavo onyeshwa kwnye picha namba 2 hapo chini.
">...
Je! umeipenda hii post?
Ndio Hapana Save post
Rajabu 
Tarehe 2024-05-10 14:53:23 Download PDF
Share On
Facebook
or
Whatsapp
Imesomwa mara 309
Sponsored links
👉1 Kitabu cha Afya
👉2 Madrasa kiganjani
👉3 Kitau cha Fiqh
👉4 kitabu cha Simulizi
DART somo la 44: Jinsi ya ku install mysql kwenye program ya dart
Katika somo hili utajifunza jinsi ya kuunganisha databse na Dart. Pia utajifunza jinsi ya kuset environment kwenye kompyuta ili kuweza kutumia Dart sdk kwenye CMD. Soma Zaidi...
DART somo la 22: Jinsi ya kutumia html library kwenye Dart
Katika somo hili tutakwenda kujifunz ajinsi ya kutumia library ya html kwenye Dart. somo hili litakupeleka kujifunza jinsi ya ku display dart output kwenye faili la html. Soma Zaidi...
DART somo la 32: Inheritance kwenye construct method:
Katika masomo yaliopita tumesha jifunza jinsi inheritance inavyokuwa, ila hatujaona kwa namna gani utaweza ku inherit constructor method. Somo hili litashughulika na swla hilo. Soma Zaidi...
DART somo la 10: while loop na do while loop kwenye Dart
Katika somo hili utakwend akujifunza kuhusu while loop na do while loop zinavyofanya kazi katika Dart. Soma Zaidi...
DART somo la 31: inheritance kwenye DART OOP
Katika somo hili utakwenda kujifunza kuhusu inheritance, na inavyoweza kutumika kwenye Dart OOP. Soma Zaidi...
DART somo la 24: Jinsi ya kutengeneza faili, folda na kuingiza data
Katika somo hili utakwenda kujifunza jinsi ya kuandika data kwenye faili. Kwanza utajifunza kutengeneza folda, kisha faili na kuweka data, kisha utajifunza kufuta fali. Soma Zaidi...
DART somo la 39: mixin kwenye dart
Katika somo hii utakwenda kujifunza kuhusu concept mixin na jinsi inavyoweza kutumika kwenye Dart. Soma Zaidi...
Dart somo la 26: DART OOP maana ya object, na jinsi ya kuitengeneza kwenye OOP
Katika somo hili utakwenda kujifunza jinsi ya kutengeneza Object pamoja na properties. Haa kwa ufupi tutakwenda kujifunza jinsi ya kutumia class. Soma Zaidi...
DART somo la 43: Stream kwenye Dart
Katika somo hili utakwenda ujifunz akuhusu concept ya stream kwenye Dart. pia ttaona kwa namna gani strean inaweza kutofautiana na future wakati zote mbili zipo kwenye asychronous programming. Soma Zaidi...
DART somo la 2: syntax za dart
Katika somo hili tutatkwenda kuziona baadhi ya xyntax yaani kanunu za uandishi wa code za dart. Soma Zaidi...
DART somo la 12: Kuchukuwa user input kwenye Dart
Jinsi ya kuchukuwa user input kwenye Dart kwa ajili ya kuongeza user interaction kwenye program. Soma Zaidi...
DART somo la 29: Dart encapsulation
Katika somo hili tutawenda kujifunza kuhusu encapsulatio kwenye Dart OOP na jinsi inavyoweza kutumika. Soma Zaidi...
