JavaScript și prietenii

Florin Tomozei -

Iar prin prieteni înțelegem HTML (HyperText Markup Language) și CSS (Cascading Style Sheets), care împreună cu JS (Javascript) definesc în mare parte ceea ce înseamnă în acest moment un website.

Ca să înțelegem cum interacționează acesta între ele, putem să ne gândim la o casă. O casă are camere, iar fiecare cameră conține mobilă sau aparate electrocasnice. La fel și HTML-ul are mai multe secțiuni (header, body, footer).

<house>
  <living-room>
    <tv>
  </living-room>
  <kitchen>
    <fridge>
    <stove>
    <coffee-machine>
  </kitchen>
  <bedroom>
    <bed>
    <dressing>
  </bedroom>
</house>

Camerele și mobilierul din ele arată într-un anumit fel, iar aici intervine CSS-ul, care poate să definească care este forma unui anumit element, unde se poziționează acesta, și cum exact arată. La fel și în paginile web, putem să definim modul in care elementele arată, de la culoare, poziție, dimensiune, formă și multe altele. Pentru casa noastră, vom zice următoarele:

fridge {
    color: white;
    position: left;
}
bedroom {
    width: 8m;
    height: 3m;
    walls: 1mm wallpaper light-blue;
    floor: carpet;
}

bed {
    color: brown;
    margin-top: 30cm;
}

Iar pentru a putea interacționa cu toate acestea, ne folosim de JavaScript. S-ar putea să vrem să aprindem luminile într-o anumită cameră, să pornim mașina de spălat sau să schimbăm canalele de la televizor. Același lucru se întâmplă și în paginile web, unde JavaScript are grijă ca lucrurile să se întâmple, precum acțiunea din spatele unui click de buton, generarea dinamică a unui tabel cu informații de pe un alt site, sau procesul de validare și înregistrare a unui formular.

var fridge = document.querySelector('fridge');

fridge.setTemperature(-2, 'celsius');

fridge.addEventListener('openDoor', function(event) {
    var myFridge = event.target;
    myFridge.openLights();
});

Disclaimer. Tot codul scris mai sus este pseudo-cod și nu trebuie folosit în producție!

Puncte cheie de la workshop-ul de JavaScript

HTML

Există multe elemente HTML, și nu trebuie să le cunoașteți pe toate din prima. Cu cât o să lucrați mai mult cu HTML-ul, cu atât o să ajungeți să învățați mai multe elemente.

Tot ce trebuie să reținem este că orice pagină de HTML are o anumită structură necesară.

<!DOCTYPE html>
<html>
    <head>
        ...
    </head>
    <body>
        ...
    </body>
</html>

Prima linie, spre surprinderea noastră, NU este un element HTML. Dar este foarte important, pentru ca browser-ul să știe ce fel de document trebuie să citească. Astfel, îi spunem să se aștepte la un DOCument de TYPE html.

Apoi trebuie să avem un element html, în care avem două lucruri foarte importante: head și body. head reprezintă locul unde punem metadata pentru documentul respectiv, precum ar fi titlul sau link-uri către script-uri sau stylesheet-uri. body reprezintă conținutul documentului, cu toate elementele care vor fi vizibile in browser.

Pentru a adăuga fișiere CSS și JavaScript în HTML, trebuie să le link-uim. CSS-ul printr-un tag de tip link iar JS-ul printr-un tag de script.

<link rel="stylesheet" type="text/css" href="main.css" />

<script src="main.js"></script>

În rest, sunt nenumărate elemente de tip HTML.

Merită să amintim paragraful <p></p>, hyperlink-ul <a href="..."></a>, headings <h1>Text</h1>   <h2>Text</h2> și div-urile <div class="my-class"></div>.

O listă completă poate fi găsită aici.

CSS

Apoi, când vine vorba de CSS, se poate discuta foarte mult. Dar cel mai simplu este să scrii elementul pe care dorești să îl stilizezi, să deschizi acoloadele { }, iar în interior să scrii codul de CSS care va descrie toate proprietățile stilistice ale elementului. 

content {
  	max-width: 920px;
	margin: auto;
	font-size: 20px;
	padding: 0 5px;
}

.my-class {
...
}

#myid1 {
...
}

De reținut că putem să stilizăm direct elementele HTML, sau putem să le numim într-un anumit fel, prin declararea unei clase sau unui id. În CSS clasele încep cu punct . iar ID-urile cu diez #. 


.gallery > image-content {
...
}

div p {
...
}

div ~ p {
...
}

div + p {
...
}

De asemenea, putem să selectăm un element direct descendent altui element cu >; desigur există mai multe tipuri de combinatori (yea, I know, that is what they are called). Aveți o listă aici.

Nu în cele din urmă, să nu uităm că am putut să stilizăm un element doar atunci când avem mouse-ul deasupra lui, cu ajutorul lui :hover. Acesta se numește o pseudo-clasă. O listă completă puteți să găsiți aici.

JavaScript

Și am ajuns într-un final la miezul problemei. JavaScript este un limbaj de programare, spre deosebire de HTML și CSS, care nu sunt. Cu ajutorul lui, putem să facem cam tot ce ne putem propune să facem cu un site web.

Ceea ce putem totuși să reținem de la workshop este că:

	...
	<script src="my-script.js"></script>
</body>
</html>

Un lucru foarte important, care este considerată o bună practică, este să mutăm tag-ul de HTML care conține fișierul JavaScript înainte de a închide elementul de body. Facem acest lucru pentru ca să putem să avem acces la toate elementele HTML din body înăuntru codului de JS.

var x = 1;
x = 2;

let y = 12;
y = 'doisprezece';

// această valoare nu poate fi modificată
const A = 3.14;

Definim variabile cu var sau let. Tot ceea ce definim cu const va deveni o constantă, care nu poate fi modificată ulterior.

var siteName = 'Cercetașii României';
var thisYear = new Date().getFullYear();

var text = `Copyright ${siteName} | ${thisYear}`;

Template literals, sau cum să scriem un string care conține variable definite anterior.

var myClass = document.querySelector('.my-class');

var myID = document.querySelector('#myid1');

var images = document.querySelectorAll('img');

Putem să selectăm primul element pe care îl întâmpinăm folosind querySelector(). Pentru a le selecta pe toate, folosim querySelectorAll().

var myList = [1, 4, 553, "coca-cola" "a", 3.12];

myList.push('hello');

console.log(myList.length) 
// output 7, deoarece am adaugat un element folosind push

var element = myList.find(function(i) { i == 'coca-cola' });
console.log(element); // output: coca-cola

var index = myList.findIndex(function(i) { i == 'a' });
console.log(index); // output 4
console.log(myList[index]) // output "a"

myList.forEach(
	function(i) { 
		console.log(i) 
	}
);
// output
// 1
// 4
// 533
// "coca-cola"
// "a"
// 3.12
// "hello"

De asemenea am mai învățat despre liste. Putem să facem foarte multe lucruri interesante cu listele, deoarece acestea au foarte multe metode interesante, precum find sau findIndex, forEach și multe altele. Mai multe detalii despre liste puteți să găsiți aici.

fetch(`${pageName}.html`).then(res => res.text()).then(res => {
	contentElement.innerHTML = res;
});

Nu în cele din urmă am învățat despre fetch sau cum putem să luăm alte resurse de pe internet. Ceea ce face fetch este să ceară resursa aflată la adresa primului parametru, ca mai apoi să ne-o servească în funcția care apare în then. Acestă metodă este un pic mai complexă, iar pentru cei care vor să afle mai multe despre ea, pot să citească aici.

Documentație și tutoriale

Pentru cei care doresc să își aprofundeze cunoștințele de HTML / CSS / JS, vă recomand cu căldură resursele gratuite de pe Free Code Camp.

https://learn.freecodecamp.org/

De asemenea, chiar dacă este stufoasă și poate părea complicată, documentația de la Mozilla este una dintre cele mai bune, și locul meu de referință atunci când vreau să aflu cum funcționează un anumit lucru.

https://developer.mozilla.org/en-US/docs/Web