HTML drobės paaiškinimas: HTML5 drobės ir „JavaScript“ funkcijų įvadas

Prieš jaustuką šiek tiek fono ...

Dirbti interneto svetainių kūrimo srityje pradėjau maždaug prieš 6 mėnesius, didžiąją savo karjeros dalį praleidęs švietimo srityje. Perėjimas buvo puikus ir esu labai dėkingas už galimybę dirbti kuriant realaus pasaulio žiniatinklio programas.

Aš labai laiminga dirbdama pramonėje, bet, mano požiūriu, dar yra daug ko išmokti. Todėl nuo tos dienos, kai pradėjau dirbti kaip „JavaScript“ kūrėjas, aš ir toliau kiekvieną vakarą praleidau mokydamasis, kad galėčiau tobulinti savo įgūdžius.

Kartu su studijomis neseniai pradėjau dėstyti „Intro to JavaScript Course“ Tampos įlankos paaugliams („The Iron Yard“, St.Pete, Floridoje). Tai buvo puiki patirtis dėl daugelio priežasčių. Pirma, tai man sukėlė iššūkį sužinoti daugiau apie „JavaScript“ kalbos subtilybes ir niuansus.

Antra, aš gavau galimybę vėl mokyti, o tai yra viena iš mano aistrų. Trečia, aš turėjau iš naujo išnagrinėti, kaip išmokau programuoti ir kuo tai smarkiai skiriasi nuo pradedančiųjų, kurie net nėra tikri, ar jiems patinka koduoti, o kai kuriais atvejais jiems negalėjo mažiau rūpėti tai, ką turiu pasakyti.

Matote, mokymo programa, kuri, iš pradžių maniau, būtų puiku šiai klasei, buvo „JavaScript“ trimis būdais: JS DOM, JS serveryje ir funkcinis JS programavimas.

Po pirmos dienos ir gerai pasikalbėjęs su savo mokytojų padėjėjais supratau, kad esu visiškai nepasiruošęs. Šios temos gali mane dominti, bet tikrai nepuoselėja jaunimo, kuris tiesiog nori žaisti papildomus remiamus žaidimus naršyklėje. Aš visiškai pervertinau tai, ko mokysiu, ir tuo pačiu pradėjau linksmintis!

Žemiau yra pirmoji pamoka, kurią daviau studentams, kurioje pradedu diskutuoti apie funkcijas ir galų gale sukuriu veiduko jaustukus. Mėgautis!

Jei norite sekti toliau, kai kalbame apie funkcijas, atidarykite naršyklę ir eikite į „repl.it“, o populiariose kalbose pasirinkite „NodeJS“. Jums turėtų atsiverti REPL (Read Evaluate Print Loop) ir jūs galite sekti kartu su kodu.

Kas yra funkcijos?

Norėdami suprasti, kaip naudosime HTML5 drobę, turime šiek tiek suprasti apie funkcijas.

„Funkcijos yra savarankiški kodo moduliai, atliekantys konkrečią užduotį. Funkcijos paprastai „priima“ duomenis, juos apdoroja ir „grąžina“ rezultatą. Parašius funkciją, ją galima naudoti vėl ir vėl “.

Dabar leiskite pateikti keletą funkcijų, su kuriomis susidursime, pavyzdžių.

Funkcijų tipai

Nuolatinė „Ole“ funkcija

Mes deklaruojame pagrindinę funkciją naudodami „JavaScript“ raktinių žodžių funkciją .

function sayHelloTo(name) { return ‘Hello ‘ + name;}sayHelloTo(‘Adam’);

Šiai funkcijai reikalingas vienas parametras, vadinamas pavadinimu . Tai kintamasis, kuris perduodamas „ sayHelloTo“ funkcijai. Todėl, kai programa bus vykdoma, ji perims tai, kas numatyta. Mano atveju tai Adomas , todėl konsolėje pamatysite Labas Adomas .

Konstruktoriaus raštas

Taip pat galime sukurti funkciją naudodami konstruktoriaus modelį.

function Person(name) { this.name = name; this.sayHello = function() { return “Hello, my name is “ + this.name; }}var me = new Person(“Adam”);me.sayHello();

Javascript raktažodžių tai reiškia, kad funkcija. Tai reiškia, kai mes perduodame kintamąjį, pvz., Pavadinimą , kaip ir anksčiau, galime jį priskirti funkcijai ir bet kuriam tos funkcijos egzemplioriui. Norėdami sukurti egzempliorių, naudojame „JavaScript“ raktinį žodį new . Kai sukuriamas šis naujas funkcijos egzempliorius, jo ypatybės taip pat yra ši_vardo reikšmė ir metodas tai.sayHello Kai sukūrėme metodo pavyzdį, kurį perdavėme savo vardu: var me = new Person ('Adam') . Kai žiūrite į „ sayHello“ metodą, jis naudoja šį vardą, tai dabar yra šios instancijos dalis, norint sukurti sakinį. Jei vykdote šį kodą „NodeJS REPL“, esančiame „repl.it“, turėtumėte pamatyti jį išvesdami Sveiki, mano vardas Adomas .

Dabar, kai mums pasirodė nuobodus dalykas, piešime ant drobės. Kaip aš mokiau šį kitą skyrių, naudojau codepen.io. Aš siūlau, jei norite sekti paskui, eikite į codepen.io, susikurkite paskyrą, tada sukurkite naują rašiklį ir turėtumėte nustatyti. Būtinai suaktyvinkite savo paskyrą, jei norite išsaugoti savo darbą.

Piešime ant drobės

Pirmiausia turime sukurti drobę, kad galėtume ją piešti. Savo HTML sukurkite drobės žymą.

Dabar čia yra „JavaScript“!

Turime paimti savo drobės elementą iš DOM ir paskelbti jį kaip kintamąjį. Tai leis mums nustatyti jo kontekstą. Mes dar nesame įgudę naudotis „3d“, todėl laikysimės „2d“ konteksto.

var canvas = document.getElementById(“canvas”);var context = canvas.getContext(“2d”);

Taip pat drobei galime suteikti pločio ir aukščio savybių.

var canvas = document.getElementById(“canvas”);canvas.width = 800;canvas.height = 800;var context = canvas.getContext(“2d”);

Čia noriu pažymėti, kad drobė veikia lygiai taip pat, kaip objektas. Jis turi savybių ir metodų, kaip matėme iš aukščiau pateiktos konstruktoriaus funkcijos. Šiek tiek skiriasi tuo, kaip mes jį deklaravome, bet funkciškai jis veikia labai panašiai. Taigi matote, kad jis turi aukščio ir pločio savybes bei „ getContext“ metodą.

Dabar įdėkime visa tai į funkciją, kad galėtumėte šiek tiek susipažinti su funkciniu programavimu.

function draw() { var canvas = document.getElementById(“canvas”); canvas.width = 800; canvas.height = 800; var context = canvas.getContext(“2d”);}

Kol kas nieko nebus rodoma ekrane, tam naudosime „ fillRect“ metodą.

function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.fillRect(10,10, 100, 200);}

Jei to nenumanėte, metodui „ fillRect“ reikia keturių parametrų: x koordinatė, y koordinatė, plotis ir aukštis. Drobėje x ašis prasideda nuo 0 kairėje ir iki begalybės einant į dešinę. Y ašis prasideda nuo 0 nuo viršaus iki begalybės žemyn. Taigi, kai mes pradedame nuo (10, 10), mes dedame įsivaizduojamą žymeklį ant taško (x = 10, y = 10) ir einame 100 į dešinę ir 200 žemyn nuo to taško.

Kaip jau pastebėjote, jis vis dar nebuvo pridėtas prie puslapio. Pridėkite paprastą „ window.onload“ funkciją ir prilyginkite mūsų užbaigtai piešimo funkcijai.

function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.fillRect(10,10, 100, 200);}window.onload = draw;

Jums gali būti įdomu, kodėl braižymo funkcija buvo vykdoma, nors mes jos nevykdėme su parens (). Taip yra todėl, kad window.onload yra funkcija. Tai tas pats, kas sakyti:

window.onload = function() {// Do stuff here like what we put in draw();}

That means window.onload executes a function when the window is loaded, so what ends up happening is window.onload with its magical powers puts invisible parens around draw, thus executing it. A lot of magic is involved. But now you know the hocus pocus.

Let’s add some color for fun! Here we use the fillStyle method for that. It needs to come before fillRect or it won’t show.

function draw() { var canvas = document.getElementById("canvas"); canvas.width = 800; canvas.height = 800; var context = canvas.getContext("2d"); context.fillStyle = "blue"; context.fillRect(10,10, 100, 200);}window.onload = draw;

Here is a sample of that on codepen:

Let’s draw some other shapes!

That was pretty simple. Let’s draw some other shapes now. Just as we did before we will create a function and instantiate our canvas with a width, height, and context.

function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400;}

So we don’t forget, change the onload function to take the triangle function now.

window.onload = triangle;

Now that we have our canvas, let’s start to draw lines on the canvas to create our triangle.

function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50);}

Here we are starting our path and moving the cursor to point (x = 75, y = 50).

Now let’s go to town drawing some lines.

function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50); context.lineTo(100, 75); context.lineTo(100, 25); context.stroke();}

This created the first two lines that we needed. To finish it off we go back to where we started.

function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50); context.lineTo(100, 75); context.lineTo(100, 25); context.lineTo(75, 50); // Back to where we started context.stroke();}

To fill in the triangle we can use the fill method.

function triangle() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(75, 50); context.lineTo(100, 75); context.lineTo(100, 25); context.lineTo(75, 50); context.stroke(); context.fill();}

Here is what that looks like in the wild:

We can do the same thing now and easily create a giant pyramid.

function pyramid() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400;}

Remember to change the onload function to pyramid.

window.onload = pyramid;

Let’s now move the cursor to where we want it to be.

function pyramid() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 400; canvas.height = 400; context.beginPath(); context.moveTo(200, 0);}

I want my pyramid to take up as much space as possible, so I am starting out at the very top of my canvas and exactly in the middle of the x-axis.

Now we can begin drawing our shape and filling it in.

context.lineTo(0, 400);context.lineTo(400, 400);context.lineTo(200, 0);context.stroke();context.fillStyle = “orange”;context.fill();

Done! You should now have a nice orange pyramid on your screen because of course you are part the Illuminati. Don’t lie!

Here is the finished product that you can play with:

Emojis!

Now for what you came for: Emojis!

Just as we did before we set up our canvas.

function smileyFaceEmoji() { var canvas = document.getElementById(“canvas”); var context = canvas.getContext(“2d”); canvas.width = 500; canvas.height = 500;}

Remember to change onload to this function.

window.onload = smileyFaceEmoji;

Now let’s draw our face.

context.beginPath();context.arc(250, 250, 100,0,Math.PI*2, true);context.stroke();

I kind of switched things up here using the arc function. The arc function takes quite a few arguments: x coordinate, y coordinate, radius, starting point in radians, ending point in radians, and whether it is drawn clockwise (we said true). As opposed to how a rectangle is made starting at one point and moving to the next, the point (x = 250, y = 250) is actually the middle of the circle and then extending out 100 pixels.

Cool huh?! Next comes the eyes.

context.moveTo(235, 225);context.arc(225, 225, 10, 0, Math.PI*2, true);context.moveTo(285, 225);context.arc(275, 225, 10, 0, Math.PI*2, true);context.stroke();

Then the mouth.

context.moveTo(250, 275);context.arc(250, 275, 50, 0, Math.PI, false); // Why is this last value false? Why did you just use Math.PI?context.moveTo(250, 275);context.lineTo(200, 275);context.stroke();

Here is what the finished product looks like:

You did it, you just made a smiley face emoji! Gosh darn it I am proud of you! If you want to take your canvas skills to the next level try out one of the exercises below.

Exercises

  1. Draw a poop emoji.
  2. Draw your initials in cursive.

In summary

Šioje pamokoje sužinojote apie funkcijas: kaip kurti funkcijas, vykdyti funkcijas ir naudoti funkcijas kuriant mažas programas, kurios piešia linijas ant drobės. Sužinojome, kad funkcijos yra įvairių formų ir joms gali būti suteiktos savybės ir metodai. Tikiuosi, kad jums patiko ši pamoka, nes aš ketinau parodyti jums funkcijų galią, neperžengdamas žargono, o naudodamas vaizdinius dirgiklius joms atgaivinti!

Jei norite pamatyti visą šios pamokos kodą, eikite į mano kodą čia.