JAVASCRIPT - somo la 15: Jinsi ya kukusanya user input

JAVASCRIPT - somo la 15: Jinsi ya kukusanya user input

Katika somo hili tutakwenda kujifunza kuhusu user input. Somo hili litaangalia html form na attribute zake na jinsi zinavyohusiana na user input. Mwisho wa somo hili utaweza kutengeneza simple Calculator kwa kutumia javascript.

Download Post hii hapa

User input ni nini? 

Tunasema user input tunaangalia taarifa ambazo mtumiaji ataziinguza kwenye system kwa ajili ya kukamilisha ufanyajivwakazi ama kwa ajili ya kuoatavout put fulani. 

 

Hivyo basi hapa tunazungumzia user interaction yaani muingiliano wake na hiyo system. 

 

Mfano wa uzee input ni kama unapojisajili,  ama unapojaza madodoso kwenye mitandao. Hata unapoandika meseji ama unapo upload faili hizo zote ni user input. 

 

Njia ambazo mtumiaji ataweka input kwenye javascript program. 

Zipo njia kadhaa ambazo utatumia ili kuweka input kwenye javascript program. Kwa mfano: -

  1. Kwa kutumia prompt() function

  2. Kwa kutumia html form

  3. Kwa kutumia batani

Katika somo hili tutakwenda kuzitumia njia zote hizo tatu. 

 

  1. Kwa kutumia prompt()

Hii ni javascript finction ambayo hutumika pale ambapo mtumiaji anatakiwa kuweka input. 

 

Function hii inabeba parameta 2 ambazo ni,  string na default. Kwenye string mtumiaji atajaza hicho anachotakiwa kujaza. Sasa unaweza kuweka defaul yaani unaijaza kwanza. Ili endapo mtumiaji hatajaza basi value ulizojaza wewe zitumike. 

 

Hiyo string hapo hutumika kama ile placeholder kwenye html form. Hapo unaweza kuandika je ni nini mtumiaje ajaze. 

 

Hiyo parameter ya default sio ya lazima. Inamaana unaweza kuiwacha .

 

Mfano 1:

<script>

  let h = prompt("Jina");

  document.write("Haloo"+ " "+ h);

</script>

Hapo sijatumia default. Sasa wacha tuone jinsi default inavyifanya kazi. Kwenye default mtumiaji atakuta tayari pameshajazwa hivyo ataamuwa abadili aweke majibu yake ama aache hivyo hivyo. 

 

 Mfano 2:

<script>

  let h = prompt("Jina", "Bongoclass");

  document.write("Haloo"+ " "+ h);

</script>

Kwa kutumia prompt pia tunaweza kufanya mahesabu. Kwa mfano tunaweza kutumia function ya eval() tulisha jifunza hapo awali. Unaweza kuingiza hesabu na kukupatia majibu. 

 

Mfano 3:

<script>

  let namba = prompt("weka hesabu");

  document.write("Jibu ni:-"+ " "+ eval(namba));

</script>

Sasa endapo mtumiaji hatajaza kitu basibitakupa majibu indefined. Angalia mfano hapo chini

 

Mfano 4: 

 

Kwa ufupi hivyo ndivyo tunavyoweza kuingiza usiwe input kwa kutumia javascript. Baada ya hapo utaweza kuzifanyia kazi hizo input kwa namna unavyotaka.

 

2.Kwa kutumia batani

Batani inaweza kutumika ku input data kwenye element za html. Kwa mfano kwenye paragraph, kwenye section element kama div, na kwenye textarea na zaidi ya hapo. 

 

Ili kuweza kupata data zilizopo kwenye batani tutatumia finction ndani ya batani. Kisha tutapata thamani ama input kwa kutumia .value ili kupata id ya hiyo batani tutatumia .id na ili kupata name attribute tutatumia .name na kujua type ya hiyo batani utatumia .type.  Wacha tuone mifano. 

 

Katika mfano wa hapo chini. Nimeweka maneno haloo Bongoclass kwenye batani kama value. Sasa tunataka kuyaingiza maneno hayo kwenye textarea element. Hivyo basi kwanza tutatengeneza function ya ambayo tutakwenda kwenye onclick event. Function yetu tutaiita myFunc. Kisha tutatengeneza variable kwa ajili ya kuwakilisha value yetu. 

 

Mfano 5:

<title>User input</title>

<textarea id="demo" name="txt"></textarea>

<br><button id="btn" name="myBtn" onclick="myFnc()" value="Haloo Bongoclass" type="submit">Bofya</button>

 

<script>

  function myFnc(){

    var btnId = document.getElementById("btn").value;

    

    document.getElementById("demo").innerHTML = btnId;

  }

</script>

 

...

Download Post hii hapa

Jiunge nasi WhatsApp
Upate Update zetu

Download App Yetu

Jifunze zaidi, na wasiliana nasi ukiwa na App yetu. Bofya link hapo chini kuweza kuipakua.

Download Now Bongoclass Zoezi la Maswali

Nyuma Endelea


Umeionaje Makala hii.. ?

Nzuri            Mbaya            Save
Author: Rajabu image Tarehe: 1970-01-01 03:33:44 Topic: JavaScript Main: ICT File: Download PDF Views 340

Share On:

Facebook WhatsApp
Sponsored links
👉1 kitabu cha Simulizi    👉2 Sira ya Mtume Muhammad (s.a.w)    👉3 Madrasa kiganjani    👉4 Bongolite - Game zone - Play free game    👉5 Kitau cha Fiqh    👉6 Simulizi za Hadithi Audio   

Post zinazofanana:

JAVASCRIPT - somo la 14: Jifunze kuhusu event kwenye javascript
JAVASCRIPT - somo la 14: Jifunze kuhusu event kwenye javascript

Katika somo hili utakwenda kujifunza kuhusu javascript events. Event ni neno la Kiingereza lenye maana tukio wingi wake events kumaanisha matukio. Natumia ni kila ambacho kinatokea kwenye javascript.

Soma Zaidi...
JAVASCRIPT - somo la 17: condition statement za if else, else if kwenye javascript
JAVASCRIPT - somo la 17: condition statement za if else, else if kwenye javascript

Katika somo hili tutakwenda kujifunza kuhusu condition statemant. Darasa hili ni moja katika madarasa muhimu programming. Katika somo hili tutajifunza kwa vitendo zaidi. Tutatumia mifano ya somo lililo tangulia.

Soma Zaidi...
JAVASCRIPT - somo la 12: Function zinazotumika kwenye namba
JAVASCRIPT - somo la 12: Function zinazotumika kwenye namba

Katika somo hili utajifunz kuhusu baadhi ya function ambazo hutumika kwenye namba

Soma Zaidi...
JAVASCRIPT - somo la 22: Jinsi ya ku set time na tarehe
JAVASCRIPT - somo la 22: Jinsi ya ku set time na tarehe

Katika somo hili tutakwenda kujifunza kuhusu ku set time. Yaani tutaweka muda ambao code zinatakiwa ndio zilete matokeo.

Soma Zaidi...
JAVASCRIPT - somo la 2: Jisi ya ku print output ya code za javascript.
JAVASCRIPT - somo la 2: Jisi ya ku print output ya code za javascript.

Katika somo hili utakwenda kujifunza jinsi ambavyo utaweza ku display matokeo ya code za javascript.

Soma Zaidi...
JAVASCRIPT - somo la 8: Aina za data zinazotumika kwenye javascript
JAVASCRIPT - somo la 8: Aina za data zinazotumika kwenye javascript

Katika somo hili utakwenda kujifunza kuhusu aina za data ambazo hutumika kwenye javascript

Soma Zaidi...
JAVASCRIPT -  somo la 4: Jinsi ya kuandika variable kwenye javascript
JAVASCRIPT - somo la 4: Jinsi ya kuandika variable kwenye javascript

Katika somo hili utajifunza jinsi ya kuandika variable. Hapa utajifunza sheria zinazohusu variable katika javascript

Soma Zaidi...
JAVASCRIPT - somo la 13: Function zinazofanya kazi kwenye array.
JAVASCRIPT - somo la 13: Function zinazofanya kazi kwenye array.

Katika somo hili tutakwenda kujifunza kuhusu array pamoja na method zinazohusiana na array. Pia nitakujuza tena kuhusu array ni nini. Utajifunza pia jinsi ya kutengeneza array.

Soma Zaidi...
JAVASCRIPT - somo la 19: Jinsi ya kutumia loop kwenye javascript
JAVASCRIPT - somo la 19: Jinsi ya kutumia loop kwenye javascript

Katika somo hilibtutakwenda kujifunza kuhusu loop. Katika programming tunaposema loop tunamaanisha ile hali ya program ku excute code zaidi na zaidi. Tofauti na kurudia rudia kuandika statement moja kwa ajili ya kupata matokeoa hayohayo basi unapotumia lo

Soma Zaidi...
JAVASCRIPT - somo la 6: Jinsi ya kufanya mahesabu kwenye javascript
JAVASCRIPT - somo la 6: Jinsi ya kufanya mahesabu kwenye javascript

Katika somo hili utajifunza kuhusu matendo ya hesabu ambayo ni kugawanya, kujumlisha, kuzidisha na kutoa

Soma Zaidi...