Crearea propriului element HTML
Implicit, HTML oferă o serie de elemente încorporate, din care putem forma structura unei pagini web. Totuși, nu suntem limitați doar la elementele HTML încorporate și putem crea și utiliza propriile noastre elemente HTML.
În JavaScript, un element HTML este reprezentat de interfața HTMLElement. Prin urmare, implementând această interfață în JavaScript, putem crea propriile noastre clase care vor reprezenta elementele HTML și apoi le putem utiliza. Ceva asemănător cu următorul exemplu:
<!DOCTYPE html>
<html>
<head>
<title>FDC.COM</title>
<meta charset="utf-8">
</head>
<body>
<hello-fdc></hello-fdc>
</script>
</body>
</html>În acest caz, în codul paginii este definit elementul `<hello-metanit>`, și, desigur, în realitate un astfel de element nu există. Dar acum îl vom crea.
Deci, pentru a defini o clasă care va reprezenta un element HTML, trebuie doar să creăm o clasă care implementează interfața HTMLElement:
class HelloFDC extinde HTMLElement {
}Al doilea moment important - trebuie să înregistrăm elementul HTML personalizat, astfel încât browserul să știe că există un astfel de element. Pentru asta se utilizează funcția încorporată:
customElements.define(name, constructor, options);Aceasta acceptă trei parametri:
- name: numele elementului HTML personalizat care va reprezenta clasa JavaScript. Important: numele trebuie să conțină un cratimă
- constructor: constructorul (practic clasa JavaScript) care reprezintă elementul HTML personalizat
- options: un parametru opțional - un obiect care configurează elementul HTML personalizat. În prezent, el suportă un singur parametru - extends. Acesta definește numele elementului HTML încorporat care este folosit pentru crearea elementului HTML personalizat
De exemplu, în cazul nostru am putea apela această funcție astfel:
customElements.define("hello-fdc", HelloFDC);Deci, în general, va arăta astfel:
<!DOCTYPE html>
<html>
<head>
<title>FDC.COM</title>
<meta charset="utf-8">
</head>
<body>
<hello-fdc></hello-fdc>
<script>
class HelloFDC extends HTMLElement {
}
customElements.define("hello-fdc", HelloFDC);
</script>
</body>
</html>Dar până acum elementul personalizat "hello-metanit" nu face nimic. Să-i adăugăm o sarcină primitivă. Să presupunem că el afișează un anumit salut.
De obicei, clasele elementelor personalizate folosesc un constructor. Și la începutul constructorului trebuie să fie apelată funcția super(), care garantează că clasa noastră a moștenit toate metodele, atributele și proprietățile interfeței HTMLElement.
class HelloFDC extends HTMLElement {
constructor() {
super();
}
}În plus, în constructor putem defini o logică de bază pentru elementul nostru. De exemplu:
<!DOCTYPE html>
<html>
<head>
<title>FDC.COM</title>
<meta charset="utf-8">
</head>
<body>
<hello-fdc></hello-fdc>
<script>
class HelloFDC extends HTMLElement {
constructor() {
super();
let welcome = "Bună dimineața";
const hour = new Date().getHours();
if (hour > 17) {
welcome = "Bună seara";
} else if
(hour > 12) {
welcome = "Bună ziua";
}
this.innerText = welcome;
// sau așa
// this.textContent = welcome;
}
}
customElements.define("hello-fdc", HelloFDC);
</script>
</body>
</html>În constructor, obținem ora curentă și, în funcție de ora actuală, stabilim textul de salut. Deoarece clasa noastră implementează interfața HTMLElement, putem folosi în ea proprietățile standard ale elementelor HTML.
În particular, în acest caz, pentru a seta textul elementului, folosim proprietatea innerText (de asemenea, am fi putut folosi proprietatea textContent).
Adăugarea de metode
La fel ca în clasele obișnuite, putem defini metode în clasele de elemente și apoi le putem apela. De exemplu, să definim cel mai simplu mod, care returnează ora curentă:
<!DOCTYPE html>
<html>
<head>
<title>FDC.COM</title>
<meta charset="utf-8">
</head>
<body>
<hello-fdc id="hello"></hello-fdc>
<script>
class HelloFDC extends HTMLElement {
constructor() {
super();
let welcome = "Bună dimineața";
const hour = new Date().getHours();
if (hour > 17) {
welcome = "Bună seara";
} else if (hour > 12) {
welcome = "Bună ziua";
}
this.style="cursor:pointer;"
this.innerText= welcome;
}
showTime(){
console.log(new Date().toTimeString());
}
}
customElements.define("hello-fdc", HelloFDC);
// obținem elementul
const hello = document.getElementById("hello");
// la apăsarea pe acesta, apelăm metoda showTime
hello.addEventListener("click", ()=> hello.showTime());
</script>
</body>
</html>Ca exemplu, în clasa elementului este definită metoda showTime, care pur și simplu afișează ora curentă în consolă. În codul JavaScript obținem elementul prin id, atașăm un handler de clicuri la acesta, în care apelăm metoda showTime definită mai sus. În final, la apăsare, în consolă vom vedea ora curentă.
Evenimentele ciclului de viață
Elementul HTML personalizat are propriul său ciclu de viață, descris de următoarele metode:
- connectedCallback: este apelat de fiecare dată când elementul HTML personalizat este adăugat în DOM
- disconnectedCallback: este apelat de fiecare dată când elementul HTML personalizat este eliminat din DOM
- adoptedCallback: este apelat de fiecare dată când elementul HTML personalizat este mutat într-un nou document
- attributeChangedCallback: este apelat de fiecare dată când un atribut al elementului HTML personalizat este modificat (adăugat, schimbat valoarea sau eliminat)
De exemplu, să aplicăm metoda connectedCallback():
<!DOCTYPE html>
<html>
<head>
<title>FDC.COM</title>
<meta charset="utf-8">
</head>
<body>
<hello-fdc id="hello"></hello-fdc>
<script>
class HelloFDC extends HTMLElement {
constructor() {
super();
let welcome = "Bună dimineața";
const hour = new Date().getHours();
if (hour > 17) {
welcome = "Bună seara";
} else if (hour > 12) {
welcome = "Bună ziua";
}
this.style.cursor="pointer"
this.innerText= welcome;
}
connectedCallback() {
this.style.color = "red";
}
showTime(){
console.log(new Date().toTimeString());
}
}
customElements.define("hello-fdc", HelloFDC);
</script>
</body>
</html>În acest caz, în metoda connectedCallback() setăm pur și simplu culoarea fontului - în acest caz roșu:
this.style.color = "red";Adăugarea atributelor
De asemenea, putem defini atribute proprii pentru element și apoi să le folosim. De exemplu, mai sus la adăugarea elementului pe pagină, i se setează culoarea textului roșu. Să stabilim setarea culorii cu ajutorul unui atribut:
<!DOCTYPE html>
<html>
<head>
<title>FDC.COM</title>
<meta charset="utf-8">
</head>
<body>
<hello-fdc hellocolor="#2980b9"></hello-fdc>
<br/>
<hello-fdc></hello-fdc>
<script>
class HelloFDC extends HTMLElement {
constructor() {
super();
let welcome = "Bună dimineața";
const hour = new Date().getHours();
if (hour > 17) {
welcome = "Bună seara";
} else if (hour > 12) {
welcome = "Bună ziua";
}
this.style.cursor="pointer"
this.innerText= welcome;
}
connectedCallback() {
this.style.color = "red";
if (this.hasAttribute("hellocolor")) {
this.style.color = this.getAttribute("hellocolor");
}
}
showTime(){
console.log(new Date().toTimeString());
}
}
customElements.define("hello-fdc", HelloFDC);
</script>
</body>
</html>În acest caz, elementul acceptă atributul hellocolor, care stabilește culoarea textului elementului. Dacă acest atribut este definit, atunci setăm culoarea textului conform acestuia. Dacă nu este definit, se aplică culoarea implicită - roșu:
this.style.color = "red";
if (this.hasAttribute("hellocolor")) {
this.style.color = this.getAttribute("hellocolor");
}
Stilizarea CSS
Stilizarea unui element prin intermediul CSS se face la fel ca oricare alt element:
<!DOCTYPE html>
<html>
<head>
<title>FDC.COM</title>
<meta charset="utf-8">
<style>
hello-fdc{
font-family: Verdana;
font-size: 22px;
}
</style>
</head>
<body>
<hello-fdc hellocolor="#2980b9"></hello-fdc>
<script>
class HelloFDC extends HTMLElement {
constructor() {
super();
let welcome = "Bună dimineața";
const hour = new Date().getHours();
if (hour > 17) {
welcome = "Bună seara";
} else if (hour > 12) {
welcome = "Bună ziua";
}
this.style.cursor = "pointer"
this.innerText = welcome;
}
connectedCallback() {
this.style.color = "red";
if (this.hasAttribute("hellocolor")) {
this.style.color = this.getAttribute("hellocolor");
}
}
showTime(){
console.log(new Date().toTimeString());
}
}
customElements.define("hello-fdc", HelloFDC);
</script>
</body>
</html>
