de Adam Recvlohe

Înainte de Emoji, ceva fundal …

Am început să lucrez în domeniul dezvoltării web acum aproximativ 6 luni, după ce mi-am petrecut cea mai mare parte a carierei în educație. Tranziția a fost grozavă și sunt foarte recunoscător pentru oportunitatea de a lucra pe aplicații web din lumea reală.

Sunt foarte fericit că lucrez în industrie, dar din perspectiva mea, mai sunt multe de învățat. Prin urmare, din ziua în care am început ca dezvoltator JavaScript, am continuat să petrec timp studiind în fiecare seară pentru a-mi ridica abilitățile.

Împreună cu studierea, am început recent să predau un „curs introductiv către JavaScript” pentru adolescenții din Tampa Bay (la The Iron Yard din St.Pete, Florida). Aceasta a fost o experiență extraordinară din mai multe motive. În primul rând, m-a provocat să aflu mai multe despre complexitățile și nuanțele limbajului JavaScript.

În al doilea rând, am avut ocazia să predau din nou, care este una dintre pasiunile mele. Și în al treilea rând, a trebuit să reexaminez modul în care am învățat să programez și în ce fel diferă drastic de începătorii cărora nici măcar nu le este sigur dacă le place codarea și, în unele cazuri, nu le-ar păsa mai puțin de ceea ce am de spus.

Vedeți, programa pe care am crezut-o inițial că ar fi grozavă pentru această clasă a fost JavaScript în trei moduri: JS în DOM, JS pe server și programare JS funcțională.

După prima zi și după ce am vorbit bine cu asistenții mei didactici, mi-am dat seama că nu mă ocup de nimic. Aceste subiecte mă pot interesa, dar cu siguranță nu distrează un tânăr care vrea doar să joace jocuri sponsorizate în browser. Am reevaluat total ceea ce aș învăța și, în acest proces, am început să mă distrez!

Mai jos este prima lecție pe care am dat-o elevilor, unde încep să discut despre funcții și ajung să creez un emoji cu față zâmbitoare. Bucurați-vă!

Dacă doriți să continuați în timp ce vorbim despre funcții, deschideți un browser și accesați repl.it iar în limbile populare alegeți NodeJS. Un REPL (Read Evaluate Print Loop) ar trebui să se deschidă pentru dvs. și puteți urmări împreună cu codul.

Ce sunt funcțiile?

Pentru a înțelege cum vom folosi pânza HTML5 trebuie să înțelegem puțin despre funcții.

„Funcțiile sunt module de cod independente care îndeplinesc o sarcină specifică. Funcțiile de obicei „primesc” date, le prelucrează și „returnează” un rezultat. Odată ce o funcție este scrisă, ea poate fi folosită din nou și din nou. ”

Acum permiteți-mi să vă dau câteva exemple despre tipul de funcții cu care ne vom ocupa.

Tipuri de funcții

Funcția regulată Ole ‘

Declarăm o funcție de bază folosind cuvântul cheie JavaScript funcţie.

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

Această funcție ia un parametru numit Nume. Este o variabilă care este transmisă la salută-l pe funcţie. Prin urmare, atunci când programul se execută, acesta va trece în ceea ce este furnizat. În cazul meu este Adam, deci în consolă veți vedea Bună ziua Adam.

Model constructor

De asemenea, putem crea o funcție folosind modelul constructor.

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

Cuvântul cheie Javascript acest se referă la funcție. Ceea ce înseamnă asta este când trecem într-o variabilă de genul Nume, la fel cum am făcut înainte, îl putem atribui funcției și oricărei instanțe a acelei funcții. Pentru a crea o instanță folosim cuvântul cheie JavaScript nou. Când se creează această nouă instanță a funcției, ea are și ca proprietăți a acest nume valoare și a asta.spuneBună metodă. Când am creat instanța metodei, am trecut în numele nostru: var eu = persoană nouă („Adam”). Când te uiți la spune buna metoda, folosește asta Nume, care face acum parte din acea instanță, pentru a crea o propoziție. Dacă executați acest cod în NodeJS REPL pe repl.it, ar trebui să-l vedeți la ieșire Bună ziua, mă numesc Adam.

Acum că am scos lucrurile plictisitoare, să desenăm pe niște pânze. Modul în care am predat următoarea secțiune a fost folosind codepen.io. Ceea ce vă sugerez este dacă doriți să continuați, accesați codepen.io, creați un cont, apoi creați un stilou nou și ar trebui să fiți setat. Asigurați-vă că vă activați contul dacă doriți să vă salvați munca.

Să desenăm pe pânză

În primul rând, trebuie să creăm pânza pentru a putea desena pe ea. În codul HTML creați o etichetă de pânză.

<canvas id=“canvas”></canvas>

Acum este JavaScript de aici înainte!

Trebuie să preluăm elementul nostru de pânză din DOM și să îl declarăm ca o variabilă. Acest lucru ne va permite să-i setăm contextul. Nu suntem încă atât de pricepuți cu „3d”, așa că vom rămâne cu un context „2d”.

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

De asemenea, putem da pânzei sale lăţime și înălţime proprietăți.

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

Vreau să subliniez aici că pânză acționează exact ca un obiect. Are proprietăți și metode la fel cum am văzut din funcția noastră de constructor de mai sus. Ușor diferit în modul în care l-am declarat, dar funcțional funcționează foarte similar. Așa că vedeți că are înălţime și lăţime proprietăți precum și a getContext metodă.

Acum, să punem toate acestea într-o funcție, astfel încât să vă puteți familiariza cu programarea funcțională.

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

Nimic nu va apărea încă pe ecran, vom folosi fillRect metodă care să ne ajute cu asta.

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

Dacă nu l-ați ghicit, fillRect metoda are patru parametri: coordonata x, coordonata y, lățimea și înălțimea. Pe pânză, axa x începe de la 0 la stânga și la infinit merge la dreapta. Axa y începe de la 0 de sus și până la infinit coborând. Deci, când începem de la (10, 10), plasăm cursorul imaginar pe punctul (x = 10, y = 10) și mergem 100 la dreapta și 200 în jos de la acel punct.

După cum probabil ați observat, încă nu a fost adăugat la pagină. Adăugați un simplu fereastră.încărcare funcția și să fie egală cu funcția noastră finală

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;

S-ar putea să vă întrebați de ce funcția de extragere a fost executată, chiar dacă noi nu am executat-o ​​cu parenți (). Asta este pentru ca fereastră.încărcare este o funcție. Este același lucru cu a spune:

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

Asta inseamna fereastră.încărcare execută o funcție când fereastra este încărcată, deci ceea ce se întâmplă este fereastră.încărcare cu puterile sale magice pune părinții invizibili în jurul desenului, executându-l astfel. Este implicată o mulțime de magie. Dar acum știi hocus pocus.

Să adăugăm o culoare pentru distracție! Aici folosim fillStyle metodă pentru asta. Trebuie să vină înainte fillRect sau nu se va arăta.

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;

Iată un eșantion din acest lucru pe codepen:

Să desenăm alte forme!

A fost destul de simplu. Să desenăm alte câteva forme acum. Așa cum am făcut înainte, vom crea o funcție și vom crea o pânză cu un lăţime, înălţime, și context.

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

Deci nu uităm, schimbăm la încărcare funcție pentru a prelua funcția triunghi acum.

window.onload = triangle;

Acum că avem pânza noastră, să începem să trasăm linii pe pânză pentru a ne crea triunghiul.

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

Aici ne începem calea și mutăm cursorul în punctul (x = 75, y = 50).

Acum să mergem în oraș trasând câteva linii.

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();}

Acest lucru a creat primele două linii de care aveam nevoie. Pentru a termina, ne întoarcem la locul în care am început.

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();}

Pentru a completa triunghiul putem folosi metoda de umplere.

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();}

Iată cum arată în sălbăticie:

Putem face același lucru acum și putem crea cu ușurință o piramidă uriașă.

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

Nu uitați să schimbați la încărcare funcție la piramidă.

window.onload = pyramid;

Să mutăm acum cursorul în locul în care dorim să fie.

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

Vreau ca piramida mea să ocupe cât mai mult spațiu posibil, așa că încep chiar în partea de sus a pânzei și exact în mijlocul axei x.

Acum putem începe să ne desenăm forma și să o completăm.

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

Terminat! Acum ar trebui să aveți o piramidă portocalie frumoasă pe ecran, deoarece, desigur, faceți parte din Illuminati. Nu minți!

Iată produsul finit cu care vă puteți juca:

Emoji!

Acum, pentru ce ai venit: Emojis!

Așa cum am făcut înainte de a ne configura pânza.

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

Nu uitați să vă schimbați la încărcare la această funcție.

window.onload = smileyFaceEmoji;

Acum să ne desenăm fața.

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

Am cam schimbat lucrurile aici folosind arc funcţie. arc funcția ia destul de multe argumente: coordonata x, coordonata y, raza, punctul de plecare în radiani, punctul de sfârșit în radiani și dacă este desenată în sensul acelor de ceasornic (am spus adevărat). Spre deosebire de modul în care se face un dreptunghi începând dintr-un punct și trecând la următorul, punctul (x = 250, y = 250) este de fapt mijlocul cercului și apoi se extinde pe 100 de pixeli.

Tare nu?! Urmează ochii.

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();

Apoi gura.

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();

Iată cum arată produsul finit:

Ai făcut-o, tocmai ai făcut un emoji cu față zâmbitoare! Doamne dracu, sunt mândru de tine! Dacă doriți să vă duceți abilitățile de pânză la nivelul următor, încercați unul dintre exercițiile de mai jos.

Exerciții

  1. Desenați un emoji de caca.
  2. Desenați inițialele cu cursiv.

În concluzie

În această lecție ați învățat despre funcții: cum să creați funcții, să executați funcții și să utilizați funcții pentru a construi programe mici care să deseneze linii pe o pânză. Am aflat că funcțiile iau multe forme și li se pot da proprietăți și metode. Sper că ți-a plăcut această lecție deoarece intenția mea era să-ți arăt puterea funcțiilor fără să te împiedice de jargon, folosind în schimb stimuli vizuali pentru a-i aduce la viață!

Dacă doriți să vedeți tot codul pentru această lecție, accesați codepen-ul meu aici.