JAVASCRIPT OUT PUT
Hapa tutajifunza namna ambavyo unaweza kuonyesha matokeo ya code javascript. Yaani ilikwamba hizo code ulizoandika zionyeshe matokeo yanayotarajiwa. Kama umejifunza kuhusu PHP tunatumia print ama echo. Sasa vipi kwenye javascript nini tutatumia. Endelea na somo hili hadi mwisho.
Kabla hatujaendelea na somo zaidi, naamini unatumia text editor. Kama unatumia simu unaweza kutumia trebEdit. Kama unatumia komputa unaweza kutumia sublime text. Unaweza pia kutumia notepad, notepad plus, ama text editor yeote. Hakikisha pia una ufahamu kuhusu html angalau basic level.
Ni njia zipi javascript hutumia kuonyesha output
Kuna njia 4 ambazo hutumika kwenye javascript kuonyesha output. Njia hizo ni:-
-
Kwa kutumia innerHTML
-
Kwa kutumia document.write()
-
Kwa kutumia window.alert()
-
Kwa kutumia console.log()
-
Kwa kutumia innerHTML propert
Property hii hutumika kwa ajili ya ku badili maudhui ya kwenye html element, ama ku modify maudhui, ama kuweka maudhui mapya kwenye elemeny ya html. Mara nyingi hutumika kwenye element <p> lakini inawekza pia kutumika kwenye <div> na maeneo mengine.
Hii hutumika katika kufikia element za HTML. kwanza utahitajika element husika kuipa id, kisha utatumia hiyo id ili uweze kuifikia kwa kutumia javascript.
Mafano:
<!DOCTYPE html>
<html lang="swa">
<body>
<p id="mfano"></p>
<script>
document.getElementById("mfano").innerHTML = 'haloo javascript';
</script>
</body>
</html>
Kwanza element p tumeipa id ya mfano <p id="mfano"></p> Hii inamaanisha maudhui ya kwenye element p yatapatikana baada ya id ya mfano kufikiwa kwenye javascript. Ili kuweka id kwenye html element ni kama unavyotaka kuweka html attributes. Utaanza kuweka tag ya element mafano <p kisha itafata attribute id <p id itafuatiwa na alama ya = <p id = thamani ya id yaani value itakuwa ndani ya alama hizi “” kisha funga element yako <p id="mfano"></p> Baada ya hapo kinachofuawata ni kuweka code za javascript.
Tambuwa kuwa code zote za javascript huwekwa ndani ya tag za javascript. Tag za javascript ni <script> hii ni ya kufungua na </script> hii ni ya kufunga. Sasa kinachofuwata ni kuitumia id ili kuweza kupata matokeo ya javascript.
Hapa tutatumia document.getElementById() ili kuweza kuifikia id ya element yetu. Kwenye mabano hapo weka id yetu ambayo ni mfano document.getElementById("mfano") baada ya hapo kinachofuata ni kytumiaproperty ya innerHTML ili kuweza kuipa maudhui mapya elemebt yetu. Inafuata alama ya = kisha maudhui yako utaweka hapo. Kama ni string yaani mkusanyiko wa herufi na namba ama herufi tupu maudhui hayo yatakuwa ndani ya funga na fugua semi “”. Mfano wetu juu hapo tunataka kuonyesha maneno haloo javascript. Hivyo itakuwa document.getElementById("mfano").innerHTML = 'haloo javascript'; Kma ingelikuwa namba tungeweka document.getElementById("demo").innerHTML = 5 + 6;
Angalia mfano:-
<!DOCTYPE html>
<html lang="swa">
<body>
<p id="mfano"></p>
<div id="mfano2"></div>
<script>
document.getElementById("mfano").innerHTML = 'haloo javascript';
document.getElementById("mfano2").innerHTML = 5 + 6;
</script>
</body>
</html>
-
Kutumia document.write
Kwenye javascript hii huitwa method. Hutumika kuweka maudhui kwenye html kwa kutumia javascript. Unaweza pia kuweka batani kwa kutumia method hii. Yaani unataka mtu akibofya batani kwenye ukurasa wa html nini kitokee. Kwa kutumia hii unaweza pia kufuta maudhui yote kwenye ukurasa wa html.
Mfano:
<!DOCTYPE html>
<html lang="swa">
<body>
<script>
document.write('welcome bongoclass');
</script>
</body>
</html>
Ni kama tulivyoona hapo mwanzo, kama unataka kutumia herufi maudhui yatakuwa ndani ya alama hizi ‘’ na kama unataka kutumia namba hakuna haja ya kuweka alama hizo mafano
<!DOCTYPE html>
<html lang="swa">
<body>
<script>
document.write(6 + 4);
</script>
</body>
</html>
Sasa kama utatumia method hii baada ya kuwa ukurasa umesha load, unaweza kufuta maudhui yote yaliyopo kwenye ukurasa huo na kuonekana maudhui mapya. Maana ya kuwa ukurasa utakapo load ni hivi. Unapofunguwa ukurasa unakuwa na maudhui yanaonekana. Kwa mfano kunaweza kuwa na batani pale. Sasa ukibofya batani itakwenda kukuletea maudhui mapya. Baada ya maudhui haya mapya kuonekana yale ya mwanzo huta yaona tena. Mpaka ukurasa u load tena.
Mfano:
<!DOCTYPE html>
<html lang="swa">
<body>
<script>
document.write("haloo bongoclass");
</script><br><br>
<button type="button" onclick="document.write('Haya ni maudhui mapya, Hongera')">Bofya hapa</button>
</body>
</html>
Tutajifunza ziaidi namna ya kutumia batani kwenye javascript katika masomo yanayokuja mbeleni.
-
Kwa kutumia window.alert
Hii pia huitwa method kwenye javascript na hutumika unapotaka kuweka ujumbe wa tahadhari kwenye ukurasa wako.Kwa mfano ujumbe wa confirmation, ama incoming message. Jinsi ya kuandika ni kama tulivyojifunza katika hizo 2 zilizotangulia.
<!DOCTYPE html>
<html lang="swa">
<body>
<script>
window.alert("Tahadjhari hapa");
</script>
</body>
</html>
-
Kwa kutumia
Kwa kutumia console.log
Hii inaweza kutumia kwa matumizi mengi sana. Katika mafunzo haya ya level 1 hatutaangalia matumizi ya hii, tutajifunza katika mafunzo ya mbeleni. Lakini kwa mfano unaweza kutumia hii kwa kuweka alert message, ama confirmation message.
Kwa mfano kuna fomu ya ku subscribe, baada ya kujaza atatakiwa ku submit. Lakini wakati wa ku submit kuna ujumbe wa tahadhari (alert message) utakao mtana athibitishe. Ujumbe kama huu tutatumia method hii ya javascript.
Mfano
<!DOCTYPE html>
<html lang="swa">
<body>
<script>
confirm('Upo tayari ?')
</script>
</body>
</html>
Tukutane somo la 3 tutakapojifunza kuhusu kanuni za kuandika code za javascript.
