Video-ohje: JavaScriptin ja jQueryn oppiminen

Sydämellisesti tervetuloa lopulliselle JavaScript- ja jQuery-kurssille.

Tässä videossa selitetään, mikä JavaScript on ja mitä se meille antaa.

Tässä videossa opit, mitä editoria käytämme, ja asennamme sen yhdessä.

Tässä videossa näytetään, miten käytetään napsautuksia JavaScriptillä ja miten muuttujat toimivat.

If-lause. If (suomennettuna: jos) on hyvin yleinen ohjelmoinnissa. Esimerkiksi, kun haluaa suorittaa jotain vain silloin, kun tietty ehto on täytetty.

Tässä videossa on kyse taulukoista (arrays) JavaScriptissä. Ne mahdollistavat useiden tietojen tallentamisen yhden muuttujan sisällä.

Tässä videossa opit tutustumaan For-silmukoihin. Nämä mahdollistavat tietyn koodin suorittamisen useita kertoja peräkkäin.

Funktiot ovat jonkinlainen miniohjelma, jota voimme käyttää uudelleen milloin tahansa sen luomisen jälkeen. Kun esimerkiksi painat kännykässäsi kotipainiketta, kutsutaan toimintoa, joka palauttaa sinut takaisin kotinäyttöösi. Funktion avulla työskentely helpottuu paljon.

Tässä näytetään haasteen tulos (eli kysely) ja luodaan lisäksi HTML-pohja.

Tässä ohjelmoidaan kyselyn ulkoasu (CSS).

Tässä ohjelmoidaan ja selitetään kyselymme JavaScript.

Olet jo nähnyt, miten toimintoja yhden parametrin kanssa käytetään. Nyt katsotaan toimintoja usean parametrin kanssa. Useat parametrit ovat hyödyllisiä, kun halutaan käyttää funktiota monilla eri muuttujilla. Matematiikassa esimerkiksi useiden arvojen lisäämisessä.

On olemassa globaaleja ja paikallisia muuttujia. Lyhyesti sanottuna: globaalit muuttujat ovat niitä muuttujia, jotka luodaan funktioiden ulkopuolella, ja paikalliset muuttujat ovat niitä, jotka luodaan funktioiden sisällä. Tässä tarkastelemme tarkemmin, miten tämä toimii.

Ohjelmointikielissä on mahdollista määrittää funktioita siten, että ne palauttavat arvon. Tähän asti meillä on ollut vain funktioita, jotka ovat suorittaneet jotain, mutta eivät palauttaneet mitään, minkä kanssa olisimme voineet jatkaa työskentelyä. Siksi tarkastelemme nyt RETURN:ia.

Tässä artikkelissa käsittelemme matemaattisia operaattoreita ja sijoitusoperaattoreita. Matemaattiset operaattorit ovat melko yksinkertaisia asioita kuten yhteenlasku, vähennys jne., kun taas sijoitusoperaattorit tarjoavat mahdollisuuden suorittaa melko helposti yksinkertaisia ​​toimenpiteitä kuten esimerkiksi lisäys 5:llä. Koska molemmat ovat tärkeitä ohjelmoinnissa, nämä kaksi teemaa käsitellään tässä.

Ohjelmoinnissa on kolme (tai neljä) erilaista silmukkamuotoa: Do-while-, While- ja For-silmukka. For-silmukan olemme jo tutustuneet. Nyt keskitymme Do-while- (jalkapohjaohjattu) ja While-silmukkaan (pään ohjaama).

Tässä artikkelissa käsitellään vaihtoehtoa If-ehtojen sijaan. Tässä tapauksessa kyseessä on Switch (kytkin) ja Case (tapaus). Joten käytännössä sinulla on kytkin, joka vaihtaa eri tapausten välillä ja pysähtyy siihen, joka on aktiivinen.

Olemme käsitelleet jo taulukoita, mutta emme menneet yksityiskohtiin. On vielä paljon lisää tietoa taulukoista tiedettäväksi. JavaScript-taulukon tärkein ominaisuus on elementtien määrä (length). Taulukolla on kuitenkin myös muita ominaisuuksia, kuten indeksi, joka antaa meille tietoa taulukon ensimmäisestä sijainnista (position 0).

Kohteet ovat äärimmäisen tärkeä ja mielenkiintoinen käsite monissa ohjelmointikielissä. Periaatteessa voi kuvata kaiken jonkinlaisena kohteena. Otetaanpa esimerkiksi kohde, jonka usein näemme kaduilla: AUTO. Autolla on tiettyjä ominaisuuksia/piirteitä ja se voi suorittaa tiettyjä toimintoja.

Katsotaanpa, miten voimme luoda JavaScriptissä objekteja. Tätä varten luomme rakentaja-funktion ja kaksi esiintymää objektistamme head-tagissamme. Rakentaja-funktion sisällä, jolla on sama nimi kuin objektillamme, kerromme ohjelmalle, että parametrit, jotka annetaan rakentaja-funktiolle olion instanssin luomisen yhteydessä, tulisi olla juuri objektin arvoja.

Perustana objektien toiminnoille aloitamme viimeisimmästä opetusohjelmasta peräisin olevasta koodista, jossa olemme luoneet muuttujia, jotka luodaan jokaisen objektin instanssin yhteydessä.

Tässä oppaassa opit tuntemaan Math-kohteen. Se on objekti, joka perustuu Math-luokkaan ja jolla on paljon hienoja ominaisuuksia ja toimintoja.

Tässä videossa on kyse Date-objektista eli Date-luokasta. Nämä ovat objekteja, joita voidaan käyttää ajan lisäämiseen ohjelmaan. Tässä tapauksessa ei välttämättä tarkoiteta kellonaikaa tai päivämäärää, vaan se voi olla myös aikaväli. Date-objekti sisältää ajan, joka on kulunut ajasta 1970-01-01 00:00:00. On erilaisia tapoja antaa parametreja Date-rakentajalle.

Tässä videossa opit, miten rakennat interaktiivisen kellon JavaScriptillä.

Tässä videossa on kyse perinnöstä ja polymorfismista. Kaksi käsitettä olioperustaisessa ohjelmoinnissa.

Tässä artikkelissa käsittelemme kysymystä: Mikä on jQuery? jQuery on JavaScript-kirjasto, joka mahdollistaa meille luoda vielä siistimpiä verkkosivustoja.

Tässä opit, miten jQueryllä käsitellään napsautuksia vielä helpommin.

Tässä ohjeessa opit, kuinka muuttaa verkkosivun ulkonäköä jQueryn avulla. Voimme yksinkertaisesti esimerkiksi ylikirjoittaa kentän attribuutin. Tässä esimerkissä voimme muuttaa Iframen linkkiä (eli src/source) hivenemällä neliön päälle. Voit helposti muokata koodia ja esimerkiksi suurentaa neliötä ylikirjoittamalla Height- ja Width-attribuutit, kun viet hiiren sen päälle. Yleisesti ottaen tätä menetelmää voi nyt käyttää verkkosivun ulkonäön muuttamiseen vaivattomasti.

Yksi jQuery:n hienoista ominaisuuksista on mahdollisuus haalistaa elementti. Tässä esimerkissä haalistamme painikkeen aina kun klikkaamme toista painiketta. Tässä käytämme FadeOut-toimintoa („Haalistamis-toiminto“). Elementin palauttamiseksi näkyviin käytämme FadeIn-toimintoa.

Tässä videossa käsittelemme animaatiota jQueryssa. Siinä on kyse jostakin, mikä liikkuu. Huolehdimme siis siitä, että jokin elementti siirtyy/muuttuu verkkosivustollamme. Tämä toteutetaan jQueryn animate()-funktiolla, joka odottaa kolmea parametria.

Katsotaan, mikä on jQuery UI.

Akkordi on pienoisohjelma, joka mahdollistaa meille tietyn osan koko asiakokonaisuudesta näkemisen kuin harmonikansoitossa. Tämä on erityisen hyödyllistä, kun haluaa välittää paljon tietoa, mutta ne olisivat yhtenäisenä tekstinä liian epäselviä.

Tässä oppaassa käsitellään jQuery UI:n lajittelutoimintoja. Kyseessä ovat järjesteltävät elementit. Tunnet tämän, jos käytät productivisuus-verkkosivustoja kuten Wunderlist tai Trello. Mahdollisuus tehdä elementeistä lajitteluraita on erittäin siisti ominaisuus, jota voit käyttää monissa eri sovelluksissa.

Joskus saattaa olla tarpeen tehdä elementin koko käyttäjän muokattavaksi. Silloin Resizables on täsmälleen oikea valinta. Ne mahdollistavat nimittäin juuri tämän. Näet elementin oikeassa alakulmassa pienen kolmion, jota voit napsauttaa ja sitten pitämällä hiiren painiketta alhaalla, voit suurentaa tai pienentää sitä.

jQuery UI:ssa on hyvin helppo rakentaa elementti, jota voi raahata edestakaisin Draggablesin avulla. Miten tämä tehdään, katsotaan tässä.

Edistymispalkit tai etenemispalkit ovat loistava tapa ilmoittaa käyttäjälle, kuinka pitkällä hän on tietyssä prosessissa. Myyntiprosessissa verkkokaupassa esimerkiksi tai kyselyssä se auttaa käyttäjää tietämään, kuinka pitkällä hän on prosessin suorittamisessa.

Tässä oppaassa haluan lyhyesti käsitellä jQuery UI:n tehokeinoja. Niissä on melko tyylikkäitä tehosteita, jotka mahdollistavat verkkosivusi näyttävän vielä paremmalta ja lisäksi hämmästyttävät käyttäjäsi täysin.

Tässä videossa näet haasteen lopputuloksen. Yleisimmin kysytyt kysymykset -sivu.

Tässä toteutamme usein kysytyt kysymykset -sivun.

Tässä videossa esitellään aivojen peli, joka on ohjelmoitu tässä luvussa.

Ensin huolehdimme pelin rakenteesta ja ulkonäöstä.

Nyt keskitymme joitain pelin toiminnallisuuksiin.

Pelaaja voi jo suorittaa ensimmäisiä toimintoja pelissä, mutta nyt huolehdimme siitä, että peli voidaan käynnistää ja lopettaa oikein.

Nyt on enää kyse siitä, että lisätään ajastin peliin, jotta pisteet lasketaan oikein ja peli rajoitetaan ajallisesti. Lisäksi suoritamme vielä muutamia pienempiä askeleita pelin viimeistelyä varten.

Tässä esitellään luvun sovellus. Se on tehtäväluettelo-sovellus/verkkosivusto.

Nyt luomme perustan ja katsomme, miten voimme luoda ja muokata vastaavan teeman jQuery Mobilella.

Koska noudatamme OOP-lähestymistapaa, meidän on luotava vastaava arkkitehtuuri. Siksi hoidamme sen täällä.

Tässä videossa lisäämme sivuja ja hoidamme sivun, jolle luomme tehtäviä.

Samoin kuin sijoitussivu, myös muokkaussivu tulee täyttää ja saada tarvittava toiminnallisuus.

Nyt voimme vielä keskittyä arkkitehtuuriin ja luoda tietorakenteen.

Kun nyt meillä on tietorakenne, voimme kutsua sitä melko helposti käyttöliittymässämme.

Ohjelmoitaessa tarvittiin "selittämiskykyisessä" muutamia vaiheita, jotka voimme nyt korjata. Lisäksi huolehdimme tietojen pysyvästä tallentamisesta ja viimeistelemme sovelluksen.