Original article: HTML Button onclick – JavaScript Click Event Tutorial
Wakati wowote unapotembelea tovuti, pengine utabofya kwenye kitu kama kiungo au kitufe.
Viungo vinakupeleka kwenye sehemu fulani ya ukurasa, ukurasa mwingine wa tovuti, au tovuti nyingine kabisa. Vitufe, kwa upande mwingine, kawaida hubadilishwa na matukio ya JavaScript ili viweze kusababisha utendakazi fulani.
Katika mafunzo haya, tutaenda kuchunguza njia mbili tofauti za kutekeleza matukio ya kubofya katika Javascript.
Kwanza, tutaangalia mtindo wa kawaida wa onclick unaofanywa moja kwa moja kutoka ukurasa wa HTML. Kisha tutaona jinsi eventListner ya kubofya ya kisasa zaidi inavyofanya kazi, ambayo inakuwezesha kutenganisha HTML kutoka kwa JavaScript.
Jinsi ya kutumia tukio la oncLick kwenye JavaScript
Tukio la kubofya hutekeleza utendakazi fulani wakati kitufe kinapobofya. Hii inaweza kuwa wakati mtumiaji anawasilisha fomu, unapobadilisha maudhui fulani kwenye ukurasa wa tovuti, na mambo mengine kama hayo.
Unaweka kitendakazi cha JavaScript unachotaka kutekeleza ndani ya tepe ya ufunguzi ya kitufe.
Sintaksia ya msingi ya onclick
<element onclick="functionToExecute()">Click</element>
Kwa mfano
<button onclick="functionToExecute()">Click</button>
Kumbuka kuwa kiumbi cha onclick ni JavaScript tu. Thamani inayochukua, ambayo ni kitendakazi unachotaka kutekeleza, inasema yote, kwani hutekelezwa ndani ya tepe inayofungua.
Katika JavaScript, unatekeleza kitendakazi kwa kuita jina lake, kisha unaweka mabano baada ya kitambulisho cha kitendakazi (jina).
Mfano wa tukio la onclick
Nimetayarisha baadhi ya HTML za msingi na mitindo kidogo ili tuweze kuweka tukio la onclick katika mazoezi ya ulimwengu halisi.
<div>
<p class="name">freeCodeCamp</p>
<button>Change to Blue</button>
</div>
Na hii ndio CSS kuifanya ionekane vizuri, pamoja na misimbo mingine yote ya mfano:
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
p {
font-size: 2rem;
}
button {
padding: 7px;
border: none;
border-radius: 4px;
cursor: pointer;
}
button.blue {
background-color: #3498db;
}
button.green {
background-color: #2ecc71;
}
button.orange {
background-color: orangered;
}
Kwa hivyo, kwenye ukurasa wa tovuti, hii ndio tuliyo nayo:
Lengo letu ni kubadilisha rangi ya maandishi kua samawati tunapobofya kitufe. Kwa hivyo tunahitaji kuongeza kiumbi cha onclick kwenye kitufe chetu, kisha tuandike kitendakazi cha JavaScript ili kubadilisha rangi.
Kwa hivyo tunahitaji kufanya mabadiliko kidogo katika HTML yetu:
<div>
<p class="name">freeCodeCamp</p>
<button onclick="changeColor()">Change to Blue</button>
</div>
Kitendakazi tunachotaka kutekeleza ni changeColor(). Kwa hivyo tunahitaji kukiandika katika faili ya JavaScript, au kwenye faili ya HTML ndani ya tepe ya <script>.
Ikiwa unataka kuandika hati yako katika faili ya JavaScript, unahitaji kuiunganisha kwenye HTML kwa kutumia sintaksia iliyo hapa chini:
<script src="path-to-javascript-file"></script>
Ikiwa unataka kuandika hati katika faili ya HTML, iweke tu ndani ya tepe ya script:
<script>
// Your Scripts
</script>
Sasa, tuandike kitendakazi chetu cha changeColor().
Kwanza kabisa, tunahitaji kuchagua kipengele tunachotaka kubadilisha, ambacho ni maandishi ya freeCodeCamp ndani ya tepe ya <p>.
Katika JavaScript, unafanya hivyo kwa getElementById() ya DOM, au mbinu za getElementsByClassName() au querySelector(). Kisha unahifadhi thamani katika kiambajengo.
Katika somo hili, nitakuwa nikitumia querySelector() kwa sababu ni ya kisasa zaidi na ina kasi zaidi. Pia nitakuwa nikitumia const kutangaza viambajengo vyetu badala ya let na var, kwa sababu kwa kutumia const, mambo ni salama zaidi kwani kiambajengo kinakua ni cha kusoma tu.
const name = document.querySelector(".name");
Sasa kwa kuwa tumechagua maandishi, tuandike kitendakazi chetu. Katika JavaScript, sintaksia ya msingi ya kazi inaonekana kama hivi:
function funcctionName () {
// What to do
}
Kwa hivyo, tuandike kitendakazi chetu:
function changeColor() {
name.style.color = "blue";
}
Nini kinaendelea?
Kumbuka kutoka kwa HTML kwamba changeColor() ndio kitendakazi tunachoenda kutekeleza. Ndiyo maana kitambulishi cha kitendakazi chetu(jina) kimewekwa kuwa changeColor. Ikiwa jina haliendani na kile kilichopo katika HTML, haitafanya kazi.
Katika DOM(Document Object Model, inaashiria HTML zote) ili kubadilisha chochote kinachohusiana na mtindo, unahitaji kuandika "style" kisha nukta (.). Hii inafuatwa na unachotaka kubadilisha, ambacho kinaweza kuwa rangi, rangi ya usuli, ukubwa ya fonti, na kadhalika.
Kwa hivyo, ndani ya kitendakazi chetu, tunachukua jina la kiambajengo tulilotangaza kupata maandishi yetu ya freeCodeCamp, kisha tunabadilisha rangi kuwa samawati.
Rangi ya maandishi yetu hubadilika kuwa samawati wakati wowote kitufe kinapobofya:
Msimbo wetu unafanya kazi!
Tunaweza kuchukua mambo mbele kidogo kwa kubadilisha maandishi yetu kuwa rangi zaidi:
<div>
<p class="name">freeCodeCamp</p>
<button onclick="changeColor('blue')" class="blue">Blue</button>
<button onclick="changeColor('green')" class="green">Green</button>
<button onclick="changeColor('orangered')" class="orange">Orange</button></div>
Kwa hivyo, tunachotaka kufanya ni kubadilisha maandishi kuwa samawati, kijani kibichi na nyekundu-chungwa.
Wakati huu, vitendaji vya onclick kwenye HTML yetu huchukua maadili ya rangi tunayotaka kuweka kwenye maandishi. Hivi huitwa vigezo katika JavaScript. Kitendakazi tutakachoandika kitachukua yake pia, ambayo tutaiita "color".
Ukurasa wetu wa tovuti umebadilika kidogo:
Kwa hivyo, tuchague maandishi yetu ya freeCodeCamp na tuandike kitendakazi ili kubadilisha rangi yake kuwa samawi, kijani kibichi, na nyekundu-chungwa:
const name = document.querySelector(".name");
function changeColor(color) {
name.style.color = color;
}
Pande la msimbo katika kitendakazi huchukua jina la kiambajengo (ambapo tulihifadhi maandishi yetu ya freeCodeCamp), kisha kuweka rangi kwa chochote tulichopitisha kwenye kitendakazi cha changeColor() kwenye vitufe vya HTML.
Jinsi ya kutumia eventListener ya kubofya katika JavaScript
Katika JavaScript, kuna njia nyingi za kufanya kitu kimoja. JavaScript inapoendelea kupitia mageuzi kadiri muda unavyopita, tulianza kuhitaji kutenganisha misimbo ya HTML, CSS na JavaScript ili kufwata mbinu bora zaidi.
Event listeners hufanya hili liwezekane vinapokuruhusu kutenganisha JavaScript na HTML. Unaweza pia kufanya hivyo kwa onclick, lakini wacha tuchukue mbinu nyingine hapa.
Sintaksia ya msingi ya eventListener
element.addEventListener("type-of-event", functionToExecute)
Sasa, hebu tubadilishe maandishi ya freeCodeCamp hadi samawati kwa kutumia click eventListner
Hii ndio HTML yetu mpya:
<div>
<p class="name">freeCodeCamp</p>
<button>Change Color</button>
</div>
Na hivi ndivyo inavyoonekana:
Wakati huu katika hati yetu, tunahitaji kuchagua kitufe pia (sio maandishi ya freeCodeCamp tu). Hiyo ni kwa sababu hakuna JavaScript kwenye tepe ya ufunguzi ya kitufe chetu, ambayo ni vizuri.
Kwa hivyo, msimbo wetu unaonekana kama hivi:
const name = document.querySelector(".name");
const btn = document.querySelector("button");
btn.addEventListener("click", function () {
name.style.color = "blue";
});
Tunaweza pia kutenganisha utendakazi wetu wa eventListener kabisa na utendakazi wetu bado utabaki vile vile:
btn.addEventListener("click", changeColor);
function changeColor() {
name.style.color = "blue";
}
Jinsi ya Kuunda Kitufe cha " Show More" na "Show Less" kwa kutumia JavaScript
Mojawapo ya njia bora za kujifunza ni kutengeneza miradi, kwa hivyo tuchukue kile tumejifunza kuhusu onclick na "click" eventListner ili kuunda kitu.
Unapotembelea blogu, mara nyingi huona nukuu za makala kwanza. Kisha unaweza kubofya kitufe cha "read ore" ili kuonyesha makala yote. Hebu tujaribu kufanya hivyo.
Hii ndio HTML tunayoshughulika nayo:
<article id="content">
<p>
freeCodeCamp is one of the best platforms to learn how to code.
freeCodeCamp has a detailed curriculum that will take you from zero to
hero in web development, software engineering, machine learning, and
more.
</p>
<p>
freeCodeCamp also has a YouTube channel containing over 1000 videos on
web development, software engineering, machine learning, data science,
freelance web development, database administration, and pretty much
anything related to tech. To get updates when videos are uploaded, you
need to subscribe to the channel and turn on notifications. You can also
follow freeCodeCamp on Twitter, where links to well written articles and
videos are tweeted daily.
</p>
<p>
Since no one has to pay to learn how to code on freeCodeCamp,
freeCodeCamp runs on voluntary donations from donors all around the
world in order to pay employees and maintain servers. If you are
generous enough consider joining the donors.
</p></article>
<button onclick="showMore()">Show more</button>
Ni HTML rahisi yenye ukweli fulani kuhusu freeCodeCamp. Na kuna kitufe ambacho tayari tunaambatisha kwa kubofya. Kitendakazi tunachotaka kutekeleza ni showMore(), ambacho tutakiandika hivi karibuni.
Bila CSS, hii ndio tuliyo nayo:
Sio mbaya sana, lakini tunaweza kuifanya ionekane bora na kutenda jinsi tunavyotaka. Kwa hivyo tunayo CSS ambayo nitaelezea hapa chini:
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f1f1f1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
article {
width: 400px;
background: #fff;
padding: 20px 20px 0;
font-size: 18px;
max-height: 270px;
overflow: hidden;
transition: max-height 1s;
text-align: justify;
margin-top: 20px;
}
p {
margin-bottom: 16px;
}
article.open {
max-height: 1000px;
}
button {
background: #0e0b22;
color: #fff;
padding: 0.6rem;
margin-top: 20px;
border: none;
border-radius: 4px;
}
button:hover {
cursor: pointer;
background: #1e1d25;
}
</style>
CSS inafanya nini?
Kwa kichaguzi cha wote (*), tunaondoa ukingo chaguo-msingi na padding zilizogawiwa kwa vipengele ili tuweze kuongeza ukingo wetu na padding.
Pia tunao ukubwa wa kisanduku uliowekwa kwenye kisanduku cha mpaka ili tuweze kujumuisha padding na mpaka katika jumla ya upana na urefu wa vipengee vyetu.
Tuliweka kila kitu kati kwenye mwili kwa kutumia Flexbox na kuipa usuli wa kijivu.
Kipengele chetu cha <article>, ambacho kina maandishi, kina upana wa 400px, usuli mweupe (#fff), na kina padding ya 20px juu, 20 upande wa kushoto na kulia, na 0 chini.
Tepe za aya ndani yake zina ukubwa wa fonti wa 18px, na kisha tukawapa urefu wa juu wa 270px. Kwa sababu ya urefu wa juu wa kipengele cha makala, maandishi yote hayatadhibitiwa na yatafurika. Ili kurekebisha hili, tunaweka overflow: hidden; ili tusionyeshe maandishi hayo mwanzoni.
Sifa ya transition huhakikisha kuwa kila mabadiliko yanafanyika baada ya sekunde 1. Maandishi yote ndani ya article yapo justified na yana ukingo wa juu wa pikseli 20 ili yasiambatanishwe sana juu ya ukurasa.
Kwa sababu tuliondoa ukingo chaguo-msingi, aya zetu zote zilisukumwa pamoja. Kwa hivyo tunaweka ukingo wa chini wa pikseli 16 ili kuzitenganisha kutoka kwa nyingine.
Kichaguzi chetu, article.open, kina sifa ya max-height iliyowekwa kuwa 1000px. Hii ina maana kwamba wakati wowote kipengele cha makala kikiwa na tabaka la open lililoambatanishwa kwayo, urefu wa juu zaidi utabadilika kutoka 270px hadi 1000px ili kuonyesha makala yote. Hili linawezekana kwa JavaScript.
Tulitengeneza kitufe chetu chenye usuli kama mweusi na kukifanya kuwa cheupe. Tuliweka mpaka wake kuwa hakuna ili kuondoa mpaka chaguo-msingi wa HTML kwenye vitufe, na tukaipa kipenyo cha mpaka cha 4px ili iwe na mpaka wa mviringo kidogo.
Hatimaye, tulitumia hover pseudo-class katika CSS kubadilisha kielekezi cha kitufe hadi pointer. Rangi ya usuli hubadilika kidogo mtumiaji anapoweka kielekezi chake juu yake.
Hiyo ndiyo CSS.
Ukurasa wetu sasa unaonekana bora:
Jambo linalofuata tunalohitaji kufanya ni kuandika JavaScript yetu ili tuweze kuona makala yote ambayo yamefichwa.
Tunayo sifa ya onclick ndani ya tepe yetu ya kufungua kitufe tayari kutekeleza kitendakazi cha showMore(), kwa hivyo tuandike kitendakazi hicho.
Tunahitaji kuchagua nakala yetu kwanza, kwa sababu lazima tuonyeshe iliyobaki:
const article = document.querySelector("#content");
Jambo linalofuata tunalohitaji kufanya ni kuandika kitendakazi showMore() ili tuweze kugeuza kati ya kuona makala yote na kuyaficha.
function showMore() {
if (article.className == "open") {
// read less
article.className = "";
button.innerHTML = "Show more";
} else {
//read more
article.className = "open";
button.innerHTML = "Show less";
}
}
Je, kitendakazi kinafanya nini?
Tunatumia tamko la if…else hapa. Hii ni sehemu muhimu ya JavaScript ambayo hukusaidia kufanya maamuzi katika msimbo wako ikiwa hali fulani itatimizwa.
Sintaksia ya msingi inaonekana kama hii:
if (condition == "something") {
// Do something
} else {
// Do something else
}
Hapa, ikiwa jina la tabaka la article ni sawa na open(hiyo ni, tunataka kuongeza tabaka la open kwake, ambalo liliwekwa kwa urefu wa juu wa 1000px kwenye CSS), basi tunataka kuona nakala iliyosalia. Vinginevyo, tunataka makala irudi katika hali ya awali ambapo sehemu yake imefichwa.
Tunafanya hivyo kwa kuikabidhi tabaka la wazi katika pande la else, ambayo inafanya ionyeshe makala yote. Kisha tunaweka tabaka katika empty string (hakuna) kwenye pande la if, ambayo inafanya kurudi kwenye hali ya awali.
Msimbo wetu unafanya kazi vizuri na mpito laini:
Tunaweza kutenganisha HTML na JavaScript na bado tukatumia onclick, kwa sababu onclick ni JavaScript. Kwa hivyo inawezekana kuandika hii katika faili ya JavaScript badala ya kuanza kutoka kwa HTML.
button.onclick = function () {
if (article.className == "open") {
// read less
article.className = "";
button.innerHTML = "Show more";
} else {
//read more
article.className = "open";
button.innerHTML = "Show less";
}
};
Tunaweza pia kufanya hivi kwa kutumia msikilizaji wa tukio:
<article id="content"><p>
freeCodeCamp is one of the best platforms to learn how to code.
freeCodeCamp has a detailed curriculum that will take you from zero to
hero in web development, software engineering, machine learning, and
many more.
</p><p>
freeCodeCamp also has a YouTube channel containing over 1000 videos on
web development, software engineering, machine learning, data science,
freelance web development, database administration, and pretty more
anything related to tech. To get updates when videos are uploaded, you
need to subscribe to the channel and turn on notifications. You can also
follow freeCodeCamp on Twitter, where links to well written articles and
videos are tweeted daily.
</p><p>
Since no one has to pay to learn how to code on freeCodeCamp,
freeCodeCamp runs on voluntary donations from donors all around the
world in order to pay employees and maintain servers. If you are
generous enough consider joining the donors.
</p></article><button id="read-more">Show more</button>
const article = document.querySelector("#content");
const button = document.querySelector("#read-more");
button.addEventListener("click", readMore);
function readMore() {
if (article.className == "open") {
// Read less
article.className = "";
button.innerHTML = "Show more";
} else {
article.className = "open";
button.innerHTML = "Show less";
}
}
Utendaji wetu unabaki sawa!
Hitimisho
Natumai mafunzo haya yatakusaidia kuelewa jinsi tukio la kubofya linavyofanya kazi katika JavaScript. Tuligundua mbinu mbili tofauti hapa, kwa hivyo sasa unaweza kuanza kuzitumia katika miradi yako ya kusimba.
Thank you for reading, and keep coding.