august 11, 2014

TRIPS TRAPS TRULL KOOD - VARIANT I

Kuidas oma mängu püsti panna ?

Toon lõpuks ära selle mängu "koodi".
Minu poolt ümberkirjutatud TTT sisaldub 3 failis:
"trips_traps_trull.html" - TTT põhi
"trips_traps_trull_stiil.css" - TTT stiil
Märkus
Siin küll palju huvitavat ei ole, sest mängimisel sageli kasutatav element canvas (kanvaa ehk lõuend eesti keeles) ei arvesta stiilifailis kirjapanduga, v.a. ALGUSES. Kuid stiilifaili võib vaja minna edaspidi, kui muud elemendid lisanduvad, mis korrektselt koos stiilifailiga koos töötavad. Praegu on seal vaid mitte muutuv kanvaa äärejoone kirjeldus.
"trips_traps_trull_jscript.js" - Põhiprogramm.
See on kindlasti mängu tuum, mingeid mänge ilma programmeerimiskeele osavõtuta teha ei anna. HTML programmeerimisekeeleks on javascript.
Kopeerige allpooltoodud tekstikastides sisu vastavale nendesse failidesse (notepad++ ehk on juba käima saadud, notepad vinnab ka välja) ning paigutage ühte kataloogi. TTT HTML faili peal klõpsimine peaks võimaldama seda mängu mängida.
PS!
Minu praegune piinlik moment on bloggeris kusagil peituv programm, mis järjekindlalt kirjutab igale poole, kus kohtab </body></html> sümbolijada 2 skripti (<script> ja </script> vahele peitunud jura). Mina hetkel sellest jamast lahti saada ei oska. js. programmi jätab skript rahule, kõik see asi puudutab HTML lehekülgi, mida näiteks toon. Kolme viimast rida peate niisiis html tekstide puhul parandama: lõpetage ära body ja html märgised suurem märgiga ja kustutage samasugune soovitus body ja html lõpumärgiste vahelt ära! Lühemate lehekülgedega saab hakkama ilma textarea-ta kasutades väiksem märgi ja suurem märgi jaoks eritähistusi, suuremate lehekülgedega nii ei tahaks toimetada.
Tekstikastidesse võib muuseas oma lõbuks ükskõik mida kirjutada või kustutada,see ei häiri kedagi - ärge kartke, keegi kaugemal ei saa teada iial, mida te sinna tekstikastide sisse panite või ära võtsite. See info kõik jääb teie sirviku ja teie teada, minuni või mistahes serverini see ei jõua ...
Pärast sisu "uuendust" teie looming tekstikasti seest kahjuks haihtub. Selleks tuleb küll, tõsi, lk. kinni panna ja uuesti avada - naljakal kombel tekstikastidesse sehkendatud mõtteid F5 ei puuduta. Vähemalt Firefox-iga oli nii... Allpool tuleva TTT mängu "uuestiavamise kood" selles mõttes on võimsam - siin taastatakes ka tekstikasti algolek.

TTT HTML kood

Stiililehe kood

TTT Jscript kood

Märkused HTML koodi juurde

  • Õppija, kes HTML puhul toetub ainult minu mängudele ja näidetele, võib jääda vaeslapseks. Allpool, TTT ja HTML sissejuhatuses soovitasin kõige alul alustada Codeacademy (otsi googlega!) peal olevate ingliskeelsete kursustega. Mingil hetkel võib soovitada ka eestikeelseid, praegu ei tee seda mitte, sest mingite kohtade peal jooksevad harjutused kinni ja ei saa ei edasi ega tagasi. Saab soovitada mingid vigased harjutused vahele jätta, aga ma ei soovita. Tehke see asi korda, vastavate materjalidega tegelejad!
  • Tundub, et kõige põhjalikum HTML sissejuhatus on saidil Pyramdesign praegu mulle tundmatu autor On näha, on põhjalikult vaeva nähtud. Mõned asjad tunduvad vananenud, kooditabeli puhul peaks rõhuma ntx utf-8, raamide asemel midagi uuemat välja pakkuma etc... Midagi täiuslikku ei ole tehniliste asjadega tegelejal iialgi võimalik välja otsida, guugeldage, katsetage, äkki leiate veel soovitusi ja andke teistele ka teada, mis mõnes kohas on hästi, mõnes halvasti
  • Sellest hoolimata katsun vähemalt mõelda selle peale, et asja esimest korda uurijale ei oleks niinimetatud õppimise kõver liiga järsk ja vähemalt enamik asju veidi seletatud.

Päiste märgistest

Rida <h1> TRIPS TRAPS MEGATRULL</h1>
tähistab pealkirja, on olemas märgised h1, h2... kuni h6, tähtsuse järjekord määrab ka nende vähenemise. Kuid kui avamärgisele lisada style="color:red ...ja muid omadusi"... siis saab oma pealkirja teha ükskõik milliseks soovitakse. style rea asemel peaks vastav koht olema kirjas stiilifailis, siis peaks vastav pealkiri (h1 näiteks) omama lisaattribuuti class="mingi nimi", kui kõik h1 pealkirjad sellest klassist võiks olla sedamoodi. Kui tahate vaid sellele pealkirjale eriomadusi, siis peaks valima attribuudi id="mini unikaalne nimi", sellele saab .css failis ilusti viidata ja igatpidi disainida, nagu soovitakse.
Kanvaa märgis, eesti keeles ka lõuend,
<canvas id = "kanvaa1" width = "50px"
height = "50px" onclick="kanvaaKlikk(1)">
</canvas>
on uus ja väga paljulubav element HTML (5)-s. See võimaldab HTML lehekülgedes vahest esmakordselt standardsete vahendite abil luua mõistlikku graafikat.
HTML-s saab ja TULEB ära märkida kanvaa kõrgus ja laius pikselites. Standardmõõdud on 300px laiust ja 150 kõrgust. Näete neid kanvaa attribuutides. Kui nüüd teha nii, et selle kõrguse ja laiuse määramine jätta stiilifaili ülesandeks, jookseb asi kolinal ämbrisse - algul joonistatakse kanvaad ilusti välja, aga seejärel seda ignoreeritakse, sirvik lähtub sellest, et html failis olid kõrgus ja laius määramata ja joonistab eeldusel, et kanvaa on 300 punkti lai ja 150 punkti kõrge.
Selline läbikolistatud ämber siis. Sellest hoolimata, kuna mingeid muid muudatusi ja joonimisi kanvaa äärel ei järgne, on kanvaa ääre värv ning laius järgnevas stiilifailis ära määratud:
canvas { border: 1px solid red; } Sama asi näeks canvas märgise juures välja umbes nii: style="siia kirjuta see asi, mis praegu loogeliste sulgude vahel" Natuke ikkagi "hoiab aega kokku" - meie näites on ju 9 kanvaad ja iga kanvaa juurde peaks selle border rea kirjutama...
Meie näites (tundub, et piisab ka ühest kanvaast, aga lähtun originaali ideest) tuleb sirvikul opereerida 9 kanvaaga. Et nende vahel vahet teha, on neile vaja omistada id, mida 9 korda ongi tehtud ja saadud 9 kanvaad id-dega kanvaa1... kanvaa9. Kõik ülejäänud joonestamine toimub juba jscript vahendite abil, tavaliset vahenditega ei saa siin midagi ära teha. Lisaks, et variant II-s tekitame kogu kanvaanduse javascript vahendite abil, aga täna, et elu mitte liiga keeruliseks ajada, teeme algusotsa valmis HTML-s.
Esimene märkus programmeerimise kohta:
<canvas> juurde kuuluv attribuut onclick="kanvaaKlikk(1)
seob hiirekliki elemendil kanvaa java scriptis kirjutatud funktsiooniga kanvaaKlikk(). Sulgudes tuleb anda parameetriks selle kanvaa number, kus klikkamine aset leidis. Funktsiooni leiate ise javascripti failist üles ja see peamiselt joonistab sinna kas X või O kujulisi märke, või teadustab sellest, et seal juba on midagi joonitud. Lehekülje elus on ka teisi sündmusi, mille puhul saab sundida sirvikut midagi tegema. Sündmuste töötleja (ingl. keeles event handler) sidumine omakirjutatud programmijupiga on peamine meetod, millega javascript suhtleb inimestega. Teiseks mooduseks on DOM puu objekte (inimkeeles HTML lehekülje elemente, s.t. kahe märgise vahele pandud sisu) kas mingi sündmuse ajel või lihtsalt niisama muuta. Neid saab tekitada ja kaotada ning sellega ma mängu järgmistes versioonides tegelemegi.
Ülejäänud jutu kanvaast ja graafika joonestamise lihtsamatest võimalusest katsun ära märkida JavaScripti käsitlevate märkuste lõpus / peenemat juttu koguni eraldi loona.

Mõned märkused stiilifaili kohta

  • Milleks stiilifail hea on?
    Üheks põhjuseks oleks sisu ja kujunduse lahutamine niivõrd, kui see on võimalik ja vajalik. Praegu tegelikult eriti ei ole, hoiab aega kõvasti kokku, kui ei nikerda üldse mingi 3 realise stiilifailiga ja lingiga sellele. Allpool toon ära ka võimaluse stiilifail html faili sisse istutada. Üldiselt aga siiski on hea, kui html peamiselt sisaldab sisu ja sisu erinevatele osistele viitavaid märgiseid ja kõik laused, mis ütlevad, kuidas see asi peaks välja nägema, tuleksid kusagilt mujalt. Teine, veel lihtsam põhjus on aja kokkuhoid. Pange samasse kataloogi see üks fail ja nüüd on teie uue html lehekülje tegemisel vaja lisada vaid see üks viide kujundusfailile ja kohe hakkab valmiv lehekülg ilus välja nägema. Kolmandaks saab seda asja kergemini muuta. Neljas pluss - eriti praegu - sama veebilehte saab näidata erinevalt. erinevatele seadmetele - nutikas telefon peab nägema asju erinevalt kui tavaarvuti, aga kui asutakse lehte välja printima, peab lähtuma paberile tekkivast pildist. css faile on siis vaja mitmeid.
  • Miks selline imelik laiend - css ja nimi - Cascading Style Sheet? Tõlgituna võiks see olla kaskaadlaadistik (Vallaste arvutisõnastik) või astmeline stiili- või laadileht.
    See kaskaadsus või astmelisus tähendab seda, et sirvik arvestab kõigepealt sirviku enda seadetega, kui serveri pealt mingit infot mingi elemendi kohta ei leia, kui aga leiab, siis võetakse kõigepealt arvesse .css fail, mille kirjutab üle veebilehe sees olev <style> ja </style> vahel olev tekst, ning kõige prioriteetsem on märgise enda juures eraldi attribuudina märgitud style="color:red" näiteks. Isegi siin on erandeid, mingi lisamärge color:red !important võib seda prioriteeti tõsta ja koguni kõige tähtsamaks panna. Kui kaaskaadlaadistik loodi, käis kõva vaidlus selle üle, kas kasutajal lasta otsustada, kuidas ta oma lemmikveebilehti peaks vaatama või mitte. Lugesite õieti, kasutajal on selline võimalus tõesti olemas. Firefox profiilikataloogi tehke kataloog chrome ja sellesse fail userContent.css. Sinna võite väga vabalt kirjutada sellise toreda lause, nagu body { color:red } ja see tõesti värvib sirvikus näiteks postimehe või delfi tekstid PUNASEKS. Testitud! Töötab! Sõbrale väikese tünga tegemiseks (eeldades, et te mingi mõistliku aja vältel siiski teada annate, mida tegite) sobiks see päris hästi, ja muidugi peaks sõber olema selliste asjade huviline, mitte näiteks kohalik poksimeister. Peab olema realist.
  • CSS "lausete" põhikuju on väga lihtne:
    selektor või mitu selektorit, eraldatud komaga
    { omadus1:omadus1-e väärtus;
    omadus2:omadus2-e väärtus;
    ....
    }
    Selektor on tavaliselt märgis, neid, nagu juba ülal öeldud, võib olla mitu, näiteks h1,h2,h3,h4,h5,h6 { color:red; } värvib kõik pealkirjad punaseks. Omadusi ja nende väärtusi on aja jooksul tekkinud kui seeni ja neid peab käsiraamatutest järgi vaatama. Juba värvide nimetusi (õnnetuseks inglisekeelsed) on üle 100...  Värvide jaoks saab kasutada ka koode, aga kasutage alati inimkeelseid nimetusi, kui võimalik.
    Peale märgiste ja nende loetelude on aga veel kaks põhilist selektorite tüüpi, mida tõesti vaja läheb (lisaks nendele on veel ja veel võimalusi, aga siin ma peatun). Klass (class) on omadus, mida saab märgisele alati juurde kirjutada. Näiteks <p class="punane_element"> defineerib paragrahvi kuuluvana punane_element klassi. btw, ei soovita jamada tühikutega klassi ja id nimedes... Kasutage progejate jaoks klassikalist ALAKRIIPSU sõnade eraldajana, kui vaja peaks minema. Kõik paragrahvid, mis on klassis "punane_element" (ja ainult need paragrahvid) saab nüüd css faili abiga nii punaseks värvida:
    p.punane_element {color:red;}
    Äkki tahate pealkirju ka punaseks teha selle klassikuuluvuse abiga? See lause, mis ülal toodud, pealkirja alustava märgisega
    <h1 class="punane_element">      punaseks ei värvi.
    Lause .punane_element {color:red;} aga värvib sellise avamärgisega pealkirja ka punaseks.
    id märgis on ühekordse kasutusega - seda saab ainult ühele märgisele lehekülje piirides omistada. NÄiteks <p id="lilla" > võimaldab css failis sellele paragrahvile nii viidata:
    #lilla {color:red;}
  • Kolm võimalust oma css stiili html leheküljele "sisse istutada".
    Kõige viisakam võimalus on stiilifailile ilusti viidata. Kuidas seda teha - seda vaata juba ülalpool toodud koodist.
    Teine võimalus on kogu faili sisu kirjutada päisesse <head> ja </head> vahele, kasutades märgist style.
    kogu body elementi ilusti punaseks värviv stiilifail võiks päisesse "istutatuna"välja näha selline:
    <style> body {color:red;} </style> Kolmas võimalus, nn inline kood, on see asi body avamärgise sisse kirjutada.
    <body style="color:red;">
    Seda peetakse kõige inetumaks viisiks, aga veel inetum viis on mingi märgise väljanägemist kirjeldada mingi muu meetodi abiga, kui style=... Vanast ajast on selliseid võimalusi jäänud ja mingitel põhjustel on ka näiteks kanvaa elemendi puhul vaja selle elemendi suurus kohe html faili sisse kirjutada mulle arusaamatutel põhjustel, ütleme lihtsalt: programse kala tõttu.
  • Viimane märkus
    Põhjus, miks ma selle stiilifailiga nii kaua jamasin, on aga peamiselt selles, et ma ei oska praegu leida head varianti, kuidas alustada javascript kirjeldamist. Kindlasti ei tahaks seda teha nii, nagu seda teeb David Flanagan. Kõik on ilusti kirjas, aga selle järgi ei saa õppida. Minu suureks eeskujuks oleks pigem
    Invent with Python
 , suurepärane sissejuhatus igasugusesse programeerimisesse. Aga kas ma viitsin nii põhjalikult sellega jamada, on iseküsimus. Ehk siis peab siia trehvanud koodinikerdamisega alustaja veidi järsemate kurvidega leppima. See raamat aga on shedööver ja tasub läbiuurimist isegi siis, kui ei taha õppida Python keelt.

Sissejuhatavad märkused javascript koodi kohta

  • Javascript on omapärane keel - ta hakkab meeldima tasapisi, mitte kohe. Üheks veidraks asjaks selle keele juures on see, et õppureid kästakse usinalt kasutada sisuliselt ühtainukest väljundfunktsiooni nimega console.log(). See asi aga kirjutab oma väljundi kuhugi müstilisse aknasse, mille saavat kätte F12 abiga. Kui installeerite firefox juurde firebug-i, see on kindlasti vaja ära teha, siis näete kindlast muid asju ka f12 järel ja kui esimest ehmatusest üle, saate igaühe html "lehestikku" põhjalikult uurida.
    Aga päris alustuseks võiks olla midagi lihtsamat. Nuputasin hakatuseks välja tekstikasti (textarea) nimega "programmikast" ja nupu "Käita programm". Kirjutage sinna kasti midagi javascriptis ja vajutage nuppu. Pikemate programmide korral on ikkagi vaja appi võtta firebug, sest seal saab kõike ka siluda, kuid mõne rea puhul võiks sellisest kastist abi olla. Soovitatavate console.log() asemel võiks aga kasutada funktsiooni alert(), mis uues aknas väljastab soovitava sisu.
  • Lisaks nuputasin välja "logikasti". Kui kasutate alert() asemel MINU funktsiooni logiraamat(), siis see sisu peaks kirjutatama logikasti(). Näiteks praegu programmikastis ilutseva alert("Halloo õppurid!") asemele kirjutage logiraamat("Halloo õppurid!") ja vajutage programmi käitamise nuppu.
  • Kui te aga veel väga ei oska javascripti lauseid kirja panna. siis jätke programmikast ja logikast rahule ja nende kastide all hakkame närima TTT koodi koos tn. hädatarviliku kiirkonspektiga.

Programmikast


Logikast


Mõned ajaloolised märkused siiski enne imedemaale kukkumist

  • javacripti nimetab Douglas Crockford
    maailma kõige halvemini mõistetud programmeerimise keeleks
    Ma arvan, et seetõttu on mõningased märkused abiks.
  • Javascripti leiutas Brendan Eich  1995 aasta maikuus, 10 päeva jooksul. Algul kandis see keel nimetust Mocha ja nii võinukski jääda. Mocha on kohvisort mdx. Siis aga, kusagil 1995 detsembris sekkusid marketroidid ja kuna Java keel oli väga popp ja ka kasutatav vebis (praegu ka on), tuli vastav skriptiv keel ümber nimetada JavaScript.-ks. Õnnetu otsus, mis külvab segadust tänase päevani ja lisaks kõigele pidi Eich mõned asjad tõesti Javast üle võtma - arvatavalt siis loogelised sulud ja semikoolon iga Javascipti lause lõpus.
  • 1996-1997 võttis JavaScripti oma aluseks ECMA International(Euroopa arvutitootjate assotsiatsiooni organisatsioon, kes üritab kokku panna arvutialaseid standardeid. Nii võib kohata ka nime ECMA script. Standardina on Javascriptil veebi programmeerimises kindel esimene koht - ei pea isegi ära märkima, et kirjutad javascriptis, piisab javascripti teksti märkimiseks märgistest <script> ja </script>
  • Hoolimata kiirustamisest keele vermimisel on JavaScript TEGELIKULT üsna hästi õnnestunud mitmetes põhilistes punktides: näiteks ta on funktsionaalne ja objektorienteeritud. Need sõnad vaevalt, et praegu midagi ütlevad, aga loodetavasti mõne aasta pärast ehk ütlevad (ka allakirjutanu veel kavatseb läbi närida funktsionaalse programmeerimise õpikutest ja ka objektorienteeritust tuleb jõuga omandada - vanad halvad harjumused segavad siin mind enam, "puhast" õppurit need vaevad ei ähvarda.)
  • Ometi on javascriptis ilmseid puudusi, näiteks korralikult võrdlemiseks peate kirjutama kolm võrdusmärki "===". Aga need on siiski väikesed puudused ja pigem kaunistavad seda keelt mõnes mõttes.
  • Aastatega on javascript küpsenud ja saanud järjest paremaks ja on praegu täiemõõduline programmeerimise keel, mida võib ja saab julgelt kasutada igal pool.
  • Ei ole enam õige ka lause, et serveritarkvarana javascripti ei kasutata. Juba kasutatakse seal ka.
  • Brendan Eich on aga kahjuks anno 2014 sattunud äärmiselt vastiku rünnaku alla.
    Isegi nõnda vastiku, et wikis räägitakse rohkem sellest rünnakust kui tema elutööst, mis on äärmiselt väljapaistev, ja ilmselt poliitkorrektses meedias nii hakkabki olema. Mõned on pailapsed ja kui sattud poriloopimise märklauaks, näiteks sellel lihtsalt põhjusel, et oled religioossetelt veendumustelt katoliiklane, siis ei ole sind olemas. Toetagem teda kasvõi sellega, et uurigem põhjalikult tema loomingut, keelt tegeliku nimega Mocha...

Koodinäringu algus

Hakakem siis pihta, alustuseks sööksime ära kuni funktsioonideni tuleva osa:

"//" taga olev jutt ühel real on kommentaar.
Pikema kommentaari jaoks kasutage "/*" märke, siis võib juttu
üle mitme rea heietada ja lõpetama peab selle "*/"-ga.
Mida aga selline keerdsõnapaar - globaalne muutuja - tähendab ? Muutuja suhtes ei tohiks väga suuri probleeme olla - matemaatikaga sarnaselt saab viisakas muutuja sisaldada näiteks arve. Erinevalt matemaatikast võib muutuja sisuks olla ka tekst ehk string ning kaks inglisekeelset tõeväärtust: true ja false. Viimast tüüpi nimetatakse loogiliseks, ingliskeelses tekstis boolean tüübiks. (George Boole'i auks, kes kõikide koodinikerdajate hirmuks leiutas matemaatilise loogika, millega Peeter Lorents oma tudengeid kotib...) Sellised kolm lihttüüpi javascriptis tõesti on.
Muutujatele peab andma nime, mis algab tähega, mitte arvuga, edasi võib arve ka järjest ritta laduda. Tavaliselt mingite eriprogrammide puhul tikutakse muutujaid alustama selliste imelike, ka alguses lubatud märkidega, nagu ALAKRIIPS ja DOLLARI märk. See on ka võimalus, aga teie ärge nii tehke.
var kaik = 0; ongi selline lihtmuutuja deklaratsioon koos omistusega, var on erisõna selleks tööks. (lühend sõnast variable) Ei pea kohe muutujale midagi omistama, seda võib teha ka hiljem, kahes eraldi käsus või lauses: var kaik; // semikoolon lõpetab käsu ja järgmises reas k=0;
Hakatuseks proovige muutujate tegemine kohe ära, kasutades kontrolliks kas minu programmikasti ja logikasti või firebug-i: installeerige see, käivitage firefox, ja minu blogi, siis vajutage F12 ja otsige üles console. Pikemate jupikeste jaoks saab kasutada käsueditori ja saadud jupike Run käsu abiga (paremal) käima tõmmata, teine mood on käsurida saada alumiseks reaks firebug aknas (paremal ülal ühe noolemärgi juures on see moodi muutmise võimalus)ja seal iga käsu järgselt trükitakse välja selle käsu arvutatud tulem. Tavaliselt javascript aga nii ei tee, arvutatud väärtusega tuleb ise midagi teha, omistada mõnele muutujale näiteks või välja "trükkida", kasutades console.log meetodit. Aga konsooli ühekäsurezhiimis väljastatakse lause tulem automaatselt.
Kellele see firebugiga jahmerdamine ei meeldi, võib ka minu programmikastis katsetada - kirjutage sinna näiteks
var numbrimuutuja=0;
logiraamat(typeof numbrimuutuja);
tulem näitab välja selle muutuja tüübi - number. Proovige ära ka tekstimuutuja või loogilise muutuja tegemine ning lõpuks tehke ainult var deklaratsioon - siis saate vastuseks undefined.
Javascript on mdx tõstutundlik, nii et muutuja ja Muutuja ongi kaks eri muutujat. Muutujate nimed soovitatakse kirjutada üldiselt väikeste tähtedega,kui koosnevad ühest sõnast ja alates teises sõnast sõnad alustada suure tähega: voiduKombinatsioonid on siin katse seda reeglit järgida.

Massiivid

Ridade var sisu =[] ja voidukombinatsiooni omistamisest rääkimiseks on vaja kõigepealt ütelda, et ülejäänud muutujatüübid on JavaScriptis kõik objektid. Suhteliselt kõige arusaadavamateks objektideks peaksid neist olema massiivid, ingl. k. array - mingi hulk numbreid,tekste,ka väiksemaid massiive, muid objekte, kõik võib sellejuures JavaScriptis olla segamini. Elemente saab kätte massiivi nime ja indeksi abil. Ja nüüd kõige olulisem asi: indeksid algavad nullist! Massiiv võib olla ka tühi. Lause
var sisu = [];
ütleb JavaScriptis seda, et sisu võiks tulevikus hakata sisaldama mingeid elemente. Aga nendele elementidele võib (erinevalt paljudest teistest keeltest) viidata ja omistada neile väärtusi, kartmata massiivi piiridest väljumist. Proovige konsoolis või minu kastides. var sisu = []; ja minu programmikastis järgmise reana logiraamat(sisu[8]);
voiduKombinatsioonid massiivile erinevalt sisust, mis täituvad hiljem x-de ja o-dega, võib kohe väärtused ära omistada. Nurksulgude vahele tuleb kirjutada iga elemendi väärtuse, milleks aga on 3 elemendiline massiiv. Elemendid eraldage komaga. Kui kõik ühele reale ei mahu, pole tähtis, saate lauset jätkata teiselt realt. voiduKombinatsioonid teise elemendi esimese numbri saab kätte nii: voiduKombinatsioonid[1][0] (meenutage seda, et indeksid algavad nulliga. See on vahest see koht, mis peaks viitama sugulusele Java-ga või C-ga.)
2 viimast deklaratsiooni lihtsalt ütlevad, et kaks muutujat k ja kontekst on järgnevates funktsioonides kasutatavad objektid kanvaale joonistamiseks ja et nad oleksid nähtavad mitmes funktsioonis korraga, on nad igaks juhuks siin ära deklareeritud. Funktsiooni sees defineeritud objekte teised funktsioonid, sellesama funktsiooni kõrval defineeritud funktsioonid ei näe, küll on aga need nähtavad sellesama funktsiooni sees defineeritavatele funktsioonidele.
Natuke sarnane naabritevahelisele infovahetusele - sageli on ainsaks infokanaliks kõrvalkorteris toimuvale lukuauk vanemate majatüüpide korral, uuemate korral pole sedagi rõõmu.
Selles selgituses peitubki sõna globaalne tähendus. Funktsioonide sees defineeritud objektid on nähtavad selle funktsiooni sees, s.t. on lokaalsed. Muutuja või objekti nähtavuspiirkonda nimetatakse veel skoobiks

Funktsioonid

  • Uurime nüüd TTT koodi funktsioonide osa. Jätaks kõrvale praegu koodi ja vaatleks seda, milline on funktsiooni tegemise mall. Siin kasutatud malli nimetatakse funktsiooni deklaratsiooniks - function declaration Nagu näete, algab kõik sõnaga function, siis tuleb selle funktsiooni nimi ja sulgudes parameetrid. Ja ülejäänud kood on kahe loogelise sulu vahel. Märgiks ära, et sellise vormi korral ei ole vaja semikoolonit viimase looksulu järel. Seda teen seetõttu, et kohe toon ära teise malli funktsioonide tegemiseks - funktsiooniavaldise (function expression), kus selline asi on väga vajalik. Võite pühendada pikki tunde selle väljaselgitamisele, kumb viis on parem. Lihtsa koodi puhul erilist vahet ei tule. Vaid üks tõesti oluline asi tuleks juba eelnevalt meelde jätta - funktsiooni deklaratsiooni puhul ei ole vaja muretseda koodis selle üle, kui mingit funktsiooni kasutatakse enne, kui ta tekstis on deklareeritud. Funktsiooniavaldiste kasutamisel peab hoolega jälgima, kas see funktsioon väljakutsel üldse on olemas või luuakse kusagil allpool hilisema skripti täitmise käigus. Ka mina siin viitan ju alles tuleva teksti peale, see omadus on vahel elu mugavamaks tegev - panete minu märkuse funktsiooni avaldisest kõrva taha ja siis, kui funktsiooniavaldisest jutt käib, võtate selle sealt jälle välja ja uurite elu edasi.
  • ok, nüüd tuleb lubatud funktsiooniavaldise kirjeldus Tegime valmis kaks MUUTUJAT ja omistasime neile funktsiooni koodi. See on mittefunktsionaalsetes programmeerimise keeltes pea võimatu või vähemasti kõrvaltee, tavaliselt mingite kohmakate trikkidega tehtav. JavaScript on funktsionaalne programmeerimiskeel ja siin on see funktsiooni tegemise põhimeetod. Ka funktsiooni deklareerimise puhul on võimalik funktsiooni koodi omistada muutujale. Milleks see hea on, võidaks küsida? Üks mõeldav näide oleks massiividega manipuleerimine. Olgu vaja valmis teha kahest arvumassiivist kolmas, mis kahe esimese summa. Siis seda tegev funktsioon võiks parameetrina saada funktsiooni, mis liidab kaks arvu ja mõne näpuliigutusega saab sama funktsiooni panna kaht massiivi omavahel korrutama, vahetades parameeterfunktsiooni, mis nüüd peaks korrutama kaks arvu.

Funktsiooni kesVoitis() suur sisu

  • Alustan veidi lihtsamast funktsioonist, sest siin funktsioon ei käi lehekülje kanvaaelementide kallal joonistamas, s.t. ei pea rääkima DOM-st (Document Object Model).
    Kanvaa, canvas tahaks ka eraldi juttu vähemalt mingi väga lihtsa sissejuhatusena.
    Aga kõik, mis klassikalises programmeerimises on välja mõeldud, on siin olemas. Jah, lugesite õieti, enam-vähem kõik, tsükkel ja if - else tingimus ... ja nii pandi programmeerimist aastakümneid. Ja endiselt pannakse suures osas edasi, sest vana head tööriista on kindel kasutada, kõik head ja vead läbi proovitud.
  • Tsükkel ehk loop inglise keeles on progemise alustala. Ilma tsükliteta ei saa programmeerimist ette kujutada. Isegi kui teoreetikud on suutnud seda asendada millegi muuga, peab protsessor selle taandama ikkagi tsükliks, lihtsurelike jaoks peidetuna.
    Kõige lihtsam tsükkel tuleb ette siis, kui midagi on vaja teha N korda. Siin näemegi sellist juhtu - massiiv voiduKombinatsioonid tuleb järjest läbi vaadata, iga elemendi korral kontrollides, kas on kolm x-i või 0-i reas. Tsüklite kirjapanekuks on moodsatel programmeerimiskeeltel 3 klassikalist erinevat võimalust: for, while ja do while . JavaScriptis on nad VÄIKESTE tähtedega võtmesõnad, mõnes muus keeles asjad veidi varieeruvad. for toortõlge annab for lause mõtte siiski edasi - teatud muutuja väärtuste jaoks (n korda kordamisel tavaliselt i=1...,n, või i=0....,(n-1), see on javascripti traditsioon) teha mingeid asju
    FOR lause põhikuju:
    Selles funktsioonis algomistus a=0 (esimene indeks javascriptis) Tingimuslause on mingi avaldis, mis peab lõpptulemuseks andma kas true või false, praegu siis väga lihtsal kujul - a < massiivi pikkusest
    muutmislause on tavaliselt tsüklimuutuja ühe võrra suurendamine. a++ on sama, mis a = a + 1
    Märkus ++ kohta
    Traditsioon "++" märgi osas pärineb C keelest. Douglas Crockfordi arvates tuleb sellisest ühe juurdeliitmisest loobuda igal juhul, kuna btw, seda saab teha koguni kahel erineval viisil, nagu ka ühe mahavõtmist (--a;a--,a++;++a;) Isiklikult soovitan kasutada vaid ++ või -- märke for tsüklites või eraldi rea peal eraldi lausena, ja alati muutuja taga, mitte ees.
    Kui te lähete aga JavaScript eksamit tegema, on väga huvitav küsimus näiteks see, millega lõpeb rida a = a++ + ++a ....irw, proovige mdx minu logiraamatust järgi uurida
    Praegu tegeleks aga veel kahe klassikalise tsüklivormiga, kõik teada juba aastast 1960, mil avaldati kõikide tänapäevaste keelte vaarema ALGOL60 kirjeldus.
    while tsükli üldkuju Nagu siit näha võib, on kõik sisuliselt väikeste ümberpaigutustega sama, algomistused tuleb teha enne while algust, lõppu panna näiteks a++ meie näites. Millist tsüklivormi kasutada, on sageli maitse küsimus, while tsüklit kasutatakse sageli siis, kui olukord on keerukam, ei saa ette ennustada, millal tsükkel otsa saab. Meie funktsiooni näide transformeeruks selliseks: do while tsükli üldkuju Mõnikord on nii kasulik teha, kui on ette teada, et tsükkel vähemalt üks kord läbitakse, s.t. kontrollida tingimust juba järgmise tsükli algul.
    Tsüklist väljumine ja tsükli algusse paiskumine
    Ka arvutiga võib juhtuda nii, et tsüklist ei saadagi välja. Üldiselt on see üsna kole ja tüütav lugu. Selliseid kroonilisi tsükleid on üsna raske katkestada - parimal juhul õnnestub natuke nupukamal kasutajal see protsess kuidagi mõistlikult ära lõpetada, halvimal juhul aitab vaid arvuti eemaldamine toitejuhtmest, lootes, et ehk ei lähe kõvaketta vahetuseks ...
    Sellest hoolimata kirjutavad programmeerijad endiselt enesetapjalikke tsükleid algustega for(;;){kood} !! ei ole mingeid lauseid, kõik on täiesti korrektne! või while(true) { kood siin } või do {kood} while(true); Õnneks on arvutimaailmaski olemas oma doktor Mumma: lause break;. Õigesse kohta paigutatuna aitab see tsüklist välja, selle ette võiks panna muidugi tingimuse kontrolli if(tingimuslause), selleni kohe jõuame. Lause continue; paiskab seevastu usina arvunärilise tsükli algusse tagasi, seda on ka vahel vaja. Toimivad need laused iga tsükli sees.
  • Kui ... siis ehk if...else konstruktsioonid

Kuidas tingimuslauseid arvutada ?

Et programm saaks sooritada oma valiku, on tingimuslause tulemiks vaja saada kas true või false. See ei tundu üle mõistuse keeruline nõudmine, näiteks kontrollida, kas a<8 ,nii palju neid võidukombinatsioone ju oli.
Arve saab võrrelda kergesti, nad kas
  • on võrdsed, "==" operaatori abil küsitav,
  • ei ole võrdsed "!=" operaatori abil selgeks tehtav,
  • esimene on suurem teisest, ">" operaator
  • esimene on suurem või võrdne teisest, ">=" operaator
  • esimene on väiksem teisest, "<" operaator
  • esimene on väiksem või võrdne teisest, "<=" operaator

  • Täpselt samamoodi saame võrrelda tekste, kasutades tähestikulist järjestamist, suured tähed on ees, väiksed järel.
  • Loogilisi väärtusi väga võrrelda enam ei tasu, kuigi siin on ka asjad enam vähem selged, tõde võidab (true) ja vale vaob (false).
  • Objekte ei tasu aga iial võrrelda, ärge nähke vaeva ka spetsifikatsioonide lugemisega. (massiivid näiteks). Vaid siis saadakse võrdsus, kui objekt, mis peitub var a all, omistatakse otse var b-le: b = a; Selle kohta ütlevad targad, et kui viited objektile on samad, siis ollakse võrdsed. Sisu muidugi on ka sama, aga lihtsalt sisu samasus ei tähenda midagi. Probleem võib aga tulla sellest, et need soovitused JavaScripti jaoks ei tähenda midagi. Täiesti mõttetu jura võrdlemisega saadakse kenasti hakkama. Võrdleme näiteks NaN -i ja undefined minu programmikasti abiga - logiraamat(NaN < undefined);
    Siin vähemalt saame alati false, mis võrdlust ka ei kasuta. Segane lugu on aga siis, kui võrreldavate väärtuste tüübid ei ühti, näiteks logiraamat("5">4);, mis ütleb true, aga logiraamat("5">45);, mis ütleb false. Kui võtta nii, et vasak pool teisendatakse arvuks, on asi loogiline, aga miks mitte teha vastupidi? Mida tahtis skripti kirjutaja siin teha? Äkki annaks mingi veateate, näiteks võrdlusele võiks ka saada väärtuse "undefined". Veel võimalikke jaburusi: logiraamat([]<{}) annab true. See ei ütle, et JavaScriptile meeldivad loogelised sulud rohkem, üks objekt on tühi massiiv ja teine "tühi objekt" ja neid üritatakse mingil veidral viisil võrrelda...
    Tegelikult on keele loojate kavatsus olnud vist selline - see asi on nüüd täiesti programmeerija vastutada, meie siin vigu ei genereeri. Põhjus sellele oli aga sirvikud, mis kergesti jooksid kinni ja ka vigased HTML lehed ja seetõttu, isegi kui programm genereeris jaburusi, ei jooksutatud vägisi midagi kinni. Las olla loogelised sulud kõvemad kui kandilised.... Ainult üks leevendus sellele siiski tekkis - kolmekordsed võrdusmärgid võrdlemiseks! KASUTAGE operaatorit "===" "==" asemel!
    Selline võrdlus annab õige tulemi vaid siis, kui mingeid tüübiteisendusi vahel ei ole, arvud või tekstid peavad olema täpselt võrdsed. Mujal peab need vead, kus võrreldavate muutujate tüübid ei klapi, ise üles leidma.
    Kui aga täpselt vastupidist küsite, kasutage "!==" operaatorit (mis on "===" lihtne eitus). Näen kohe, et ka minu koodis on "==" võrldus sees, aga siin tasuks muud asja ka muuta, ei hakka seda ümber tegema.

Loogika maagika

George Boole'ist

















ei ole kuhugi pääsu - if lauses kohtab "&&" märki, mis tähendab AND operatsiooni kahe loogilise avaldise vahel. Tõesuseks peavad mõlemad avaldised TRUE olema. Kui avaldisi saab rohkem (siin 3), siis kõik avaldised olgu true
Loogiline OR
"||" (Alt Gr ja vasaku shift klahvi kõrvalklahv) tähistab OR operatsiooni. (või). Piisab, kui üks väide / avaldis on õige või true.
Ma arvan, et nüüd on selle funktsiooniga enam-vähem selge, mida see if tingimus ütles - kõigis 3 võidukombunatsiooni ruudus peab olema sama sümbol, s.t. 3 risti või 3 nulli.
EITUSE EITUSE SEADUS
Kuna üritan siiski hädavajaliku ära seletada, siis ei pääse veel ühest operaatorist üle - see on EITUS. Seda tähistab hüüumärk. Tahate mingit loogilist avaldist eitada, siis pange kõigele sulud ümber ja hüüumärk ette. Tahate aga lihtsalt teisendada mitteloogilist väärtust tema loogiliseks ekvivalendiks, siis pange kõigele ette kaks hüüumärki!
Näiteks: !!"Toomas" annab true - meeldiv üllatus JavaScriptilt.
Viisakamad programmeerijad teevad niimoodi:
Boolean("Toomas"); - jälle true. Tore!
Mina juba Lorentsi eksamil ei põru!
Kuidas arvutada JavaScriptis?
Kuidas siiski teha tavalisi arvutusi, jääb kiuslik küsimus? "*","+","-" on väga tavalised nähtused, selgitada jääb vaid "%". Operaator tähistab jäägi arvutamist. 3%2===1; s.t. 3 on paaritu arv.

Lehekülje restart Viimane lause, mis funktsioonis kesVoitis() veel uurimist väärt on, on antud leheküljele samaväärne RESTART käsuga.
location.reload(true); asemel peaks mängu taaskäivitamiseks kindlasti välja mõtlema midagi muud, aga hakatuseks käib seegi. Ka mõnede igivanade mängudega oli umbes samamoodi, et tuli kogu asi uuesti käivitada.

Sissejuhatus kanvaade teooriasse

Asume uurima funktsiooni kanvaaKlikk(). Siin ei pääse kahest seninini pea tundmatust tegelasest HTML draamas: kanvaa-st ning DOM-st. Alguseks vaatleme kahte esimest rida kanvaaKlikk() funktsioonist.
Esimene rida selles saagas kasutab ühte põhilist funktsiooni, mis võimaldab sirvikul käigus oleva HTML leheküljega üldse midagi teha - getElementById(id) Kui olete oma HTML leheküljel loonud mingi kindla id-ga elemendi, saab muutujale anda viite sellele elemendile, mis sisuliselt tähendabki, et muutuja kaudu saab saab seda objekti või elementi igatpidi muuta, koguni kustutada.
Uusi elemente saab ka juurde teha, selleni jõuame järgmises TTT variandis. Siin aga tahame aru saada elemendist kanvaa ja selleks peab muutuja k saama selle kanvaa kohta viite.
Käsk kontekst = k.getContext("2d"); ütleb, et tegeleme 2-mõõtmelise joonestamisega. Mõned kontekstid ("webgl" näiteks) peaksid võimaldama ka 3 mõõtmelist joonestamist, aga need ei ole veel igal pool toetatud. kontekst on selle käsu järgselt see muutuja, mille abiga saab kanvaa peal kõiki olulisi asju teha, välja arvatud kanvaa sisu kustutamine, milleks on tõtt öelda veider käsk k.width = k.width; põhjendusega, et niipea, kui me laiuse uuesti üle ütleme, siis see tähendab ka vana sisu kustutamist.
Aga tegeleks siis kanvaale joonestamisega.
Kõigepealt tegin allpool (esialgne variant, ma ehk täiustan seda ajapikku) valmis kanvaale joonistamise vahendi, all on 2 kasti - kanvaa, id="louend", laiusega ja kõrgusega "250px", ning textarea "kanvaaprogramm", mille abiga saab kanvaale joonistada. Tüütu alustus
kanvaa=document.getElementById("louend");
ning
; kontekst=kanvaa.getContext("2d");
on teie jaoks juba ette ära tehtud ja lõuendi puhastamine käib ka automaatselt.
"kanvaaprogramm" elemendi sisse on hakatuseks kopeeritud jupike funktsioonist kanvaaKlikk(), nimelt see osa, mis joonistab suure 0-i.
0 on pisut suurem, sellele kanvaale vastav. Teie ülesandeks on pärast tutvumist kanvaa-le joonistamise võimalustega sinna ise midagi joonestada.

Kanvaa nimega louend

Siin peaks olema kanvaa, kui seda siin ei ole, on teie sirvik pärit Noa aegadest!

Kanvaaprogramm

Kanvaaraja märkimine

Pärast kanvaa avamist ja mingile muutujale, ütleme, et kontekst, getContext("2d") meetodiga konteksti omistamist saab kanvaale joonistada mitmesuguseid jooni.
Et lõpuks TTT mängu variant I-ga ikkagi ühele poole saada, käsitleme siin vaid kanvaaraja märkimist ja seejärel joonistamist / täitmist. Tundub, et see teema, HTML5 graafika üldisemalt, vajaks põhjalikumat käsitlemist ja ka eestikeelseid juhendeid väga ei leidnud, nii et JavaScript mängude projekti edasiedenemisel tuleks sellest teha omaette lugu. Seevastu ingliskeelses maailmas on põnevat juhendmaterjali, mis ei tundu selle kõige juures üldsegi olevat raketiteadus.
Raja alustus: beginPath()
Joonistamise rada alustab alati beginPath(). See initsialiseerib teatud loendi parajasti käsilolevatest joonestuselementidest tühjaks objektiks, s.t. eelmine rada lõpetatakse ära. Umbes nii ma seda käsku praegu mõistan, s.h. olen seda ka kusagilt lugenud. Kommenteerigu mõni asjatundjam, kui oskab. Just seetõttu peaks (tõenäoliselt) funktsioonidesse peidetud kujundijoonestuste puhul mitte eeldama, et see element või kujund on esimene (siis ei ole vaja initsialiseerida) ja toimingut tuimalt alustama kontekst.beginPath(); käsuga.
Ülestõstetud pliiatsiga liikumise märkimine: moveTo(x,y)
Pärast raja alustust on järgmine käsk KINDLASTI moveTo(x,y) oma mõeldava joonistuse algusesse.
Seda võib kujutleda liikumisena, kus pliiats on lõuendilt tõstetud üles. Jäi märkimata, et koordinaatsüsteemi algus on VASAKUS ÜLEMISES NURGAS ja loogiliselt ainuvõimaliku järeldusena x suund on endiselt paremale, y telg aga näitab maakera keskpunkti suunas.... Ka raja edasisel joonistamisel võib nii palju, kui meeldib, kasutada moveTo() käsklusi.
Pliiatsiga joonistatava sirgjoone märkimine: lineTo(x,y)
See käsk joonistab märgib sellest kohast, kus parajasti ollakse, TULEVASE joone koordinaadini (x,y).
Kõikide märgitud joonte tegelik joonistamine: stroke()
Tegelik joonistamine käib siin, seejuures ei pea olema vaid sirgjooned, me ei tegele siin lähemalt Bezier joontega näiteks, üheks kahe punkti vaheliseks jooneks võib olla ka kaar.
Märgitud joontest moodustatud kujundi täitmine: fill()
Märgitud kujundi võib ka täita mingi soovitud värviga, vaikimisi on see must. Sellejuures teeb arvuti sellise operatsiooni: läheb tagasi alguspunkti, s.t. beginPath() järgse moveTo() koordinaadini ning joonistab sinna pideva joone. Seejärel üritab ta tekkinud kinniseid piirkondi värviga täita.
Märgitud raja sulgemine: closePath()
closePath() on vajalik, kui tehakse joonistamise operatsioon stroke(), fill() operatsiooni puhul üritatakse seda teha automaatselt.
closePath() EI ASENDA vajadust järgmist raja märkimist alustada beginPath() käsuga.
Kaarte, s.h. ringjoonte märkimine:
ctx.arc(x, y, raadius, algusnurk, lõppnurk, kas vastupäeva)
Kui nurk on 2*Math.PI, märgitakse maha ringjoon. Edasi võib siis kas joonistada märgitud ringjooni ja kaari, või neid ka täita, siis kaar suletakse automaatselt. Näiteks kui nurga suuruseks on Math.PI, siis saame joonistada poolringjoone.
Siin ma praegu peatun, sest nendest selgitusist õnneks on küllalt, et selgitada funktsiooni kanvaaKlikk() käitumist. Lühimärkusena selle pika teekonna lõpus leidsin vaid 2 äraseletamata rida selles funktsioonis. Need on:
if(! sisu[kanvaaNumber - 1]) kontrollib, kas sellesse massiivi elementi üldse midagi on salvestatud. Kui keegi on siia käigu teinud, peab seal olema kas X või 0, või on selle sisu undefined. !undefined annab aga JavaScripti reeglite põhiselt vastuseks true Järgmises versioonis II teen ehk selle lause viisakamaks, selliseks, nagu PEAB OLEMA, siin ehk on selline lohakus isegi kasuks, et selline asi sisse lipsas - seda siiski kasutatakse üsna tihti. if(kaik%2===0) küsib, kas käik on paarisarv. Kui on, siis tuleb joonistada ring, kasutades arc funktsiooni. Kui aga paaritu, joonistatagu X.

Lõpukooda

Selle versiooni kommenteerimise lõpuks on mul kujunenud kindel veendumus, et JavaScript-i õppimine ei ole raketiteadus. Sellest hoolimata ei ole pääsu arvuti taga veedetud tagumikutundidest, punnitage kuidas tahate. See, mis jäi täna lugemata - uurimata, maksab kätte homme mingi vastiku puugi näol.
Konkreetne näide minu puhul - jätsin ühe muutuja nimega sisu oma skriptides kogemata deklareerimata var käsuga ja tekkis vastik globaalne muutuja. See oli aga globaalne ka TTT mängus. Tulemina ühel hetkel, kui pusisin oma programmikasti ja logikastiga, TTT keeldus toimimast. Kasutasin sama muutujanime kahes kohas, aga minu blogilehel olid nad ninapidi koos ...
Järgmiseks eesmärgiks TTT koodis võiks olla sellis malli loomine, mille põhjal oleks võimalik kirjutada näiteks mänge ala "Viis risti ritta" etc...

posted by Sekeldaja at 23:26