jQuery aloittelijoille
jQuery aloittelijoille
jQuery aloittelijoille on ilmainen jQuery Academy-oppitunti CoddyKitissä. Tämä on oppitunti 1/1. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu jQuery Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. jQuery Academy-kurssilla on yhteensä 1 oppituntia.
Johdanto
Hei,
Tervetuloa jQuery aloittelijoille -kurssille.
Tässä osiossa aloitamme jQueryn yksityiskohtaisen opiskelun.
Johdanto 2
Ennen tämän kurssin aloittamista
seuraavat kurssit on suoritettava ennakkoon.
- HTML:n perusteet
- CSS:n perusteet
- Javascriptin perusteet
- Jos hallitsette jo nämä aiheet, voitte jatkaa kurssia.
Aloitetaan
Aloitetaan.
Ensimmäiseksi vastataan kysymykseen, mihin JQuerya käytetään.
Kerrataan perusteet ennen kysymykseen vastaamista
Kerrataan perusteet ennen kysymykseen vastaamista.
HTML on merkintäkieli. Se on siis tekstin merkintäkieli, ei ohjelmointikieli. Se poikkeaa suuresti olio-ohjelmoinnin kaltaisista käsitteistä. Toisin sanoen sen rakenteessa ei ole olioita, vaan tunnemme HTML-tageja, attribuutteja ja muita vastaavia rakenteita.
Javascript suorittaa toimintoja DOM:ssa
Verkkosivujen HTML-elementeille on usein tarpeen suorittaa toimintoja. Jotta tämä olisi mahdollista ja HTML-elementit olisivat JS:n käytettävissä, ne esitetään DOM-mallin (Document Object Model) avulla.
Javascript suorittaa toimintoja DOM:ssa, joka vastaa verkkosivua olioina. Tätä kutsutaan DOM:n käsittelyksi.
Esimerkki
Annetaan esimerkki.
Meillä on alla olevan esimerkin kaltainen painike-elementti, jonka tekstinä on 'Not Clicked'. Kun napsautamme painiketta, muutamme sen tekstiksi 'Clicked'.
Tämän toteuttamiseksi meidän on käsiteltävä DOM:ia Javascript-ohjelmointikielellä.
Javascriptin johdantokurssilla opimme hallitsemaan verkkodokumenttia Javascriptin avulla. JQuery on kirjasto, jonka avulla DOM:n käsittely on Javascriptillä tehtynä lyhyempää ja selkeämpää.
<!--Initial Element -->
<button id="my-button">Not Clicked</button>
<!---Desired Element after clicking the button-->
<button id="my-button">Clicked</button>Kysymys
Tässä on teille kysymys!
Esimerkki 2
Alla olevassa esimerkissä määrittelimme painikkeen, jonka id on my-button.
Haetaan nyt tämä elementti Javascriptin avulla DOM:sta.
Kun napsautamme painiketta, siirrymme JS-koodilla DOM:iin ja muutamme my-button-id:n sisältävän elementin innerHTML-ominaisuuden arvoksi click.
<button id="my-button">
Not Clicked
</button>
<script>
let myButton = document.getElementById('my-button');
myButton.addEventListener("click",
function(){
myButton.innerHTML = "Clicked"
})
</script>Varoitus
JQuery on yksinkertaisesti kirjasto, joka kehitettiin helpottamaan JS Coren funktioiden ja metodien käyttöä.
Toisin sanoen se mahdollistaa VanillaJS:llä tehtävien asioiden toteuttamisen helpommalla syntaksilla ja parantaa koodin luettavuutta.
Esimerkin selitys
Selitetään koodi.
let myButton = document.getElementById('my-button');
Liitämme Javascriptin document-olion myButton-nimiseen muuttujaan getElementById-metodilla.
myButton.addEventListener("click", function(){
myButton.innerHTML = "Clicked"
})
Kuuntelimme sitten painikkeen click-tapahtumaa ja teimme muutoksia painikkeeseen.
Käsittelimme DOM:ia käyttämällä kielen perusominaisuuksia ilman yllä mainittua native- tai vanilla-nimityksillä kuvattua kirjastoa tai frameworkia.
Kirjoitetaan sama koodi jQuerylla ja hyödynnetään jQuery-kirjaston tarjoamia ominaisuuksia.
Varoitus
Käsite, josta käytetään monissa paikoissa nimitystä VanillaJS, tarkoittaa itse asiassa puhdasta JavaScriptiä: ainoastaan JavaScriptin ydinkohteita, metodeja ja funktioita sekä selaimen tarjoamien ominaisuuksien käyttöä.
jQuery-esimerkki
Alla olemme toteuttaneet edellisen esimerkkimme JQueryn avulla.
Huomioikaa kuitenkin, kuinka paljon koodia lyhennetään syntaksia yksinkertaistamalla.
<script>
$('#my-button').on('click', function(){
$(this).text('Clicked');
})
</script>
<button id="my-button">Not Clicked</button>Onnittelut
Onnittelut 🎉
Tässä osiossa aloitimme jQueryn opiskelun ja ymmärsimme, kuinka paljon jQuery voi helpottaa elämäämme.
Nähdään seuraavassa osiossa!
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 22
- Oppitunnit
- 48
Usein kysytyt kysymykset
Onko oppitunti ”jQuery aloittelijoille” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa jQuery Academy-oppimispolun 3 oppituntia, myös oppitunnin “jQuery aloittelijoille”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. jQuery Academy-kurssilla on yhteensä 1 oppituntia.
Mitä opin oppitunnilla ”jQuery aloittelijoille”?
jQuery aloittelijoille Harjoittelet jQuery Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni jQuery Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin jQuery Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 1/1.
Kuinka kauan ”jQuery aloittelijoille”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä jQuery Academy-oppitunnilla?
Kyllä. Jokainen jQuery Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.