2.1 Lehen urteak: web-orri estatikoak

1991n, Tim Berners-Lee HTMLren garapenean hasi zen CERN erakundean. HTML lengoaia sortzeaz gain, HTTP (HyperText Transfer Protocol) protokoloa eta lehen web-zerbitzaria ere sortu zituen.

1993an argitaratu eta estandar gisa proposatu zuen IETF erakundeak. Une horretan, web-orriak HTML-z soilik osatuta zeuden. Haien edukia guztiz estatikoa zen: testua, irudiak eta estekak erakusten zituzten, baina ia ez zegoen erabiltzailearekiko interakziorik.

Ondoren, 1996an, CSS agertu zen. Horri esker, edukia aurkezpenetik bereizi eta web-orrien itxura bisuala hobetu ahal izan zen.

2.2 JavaScript: orri dinamikoen jaiotza

1995ean, Netscape enpresak JavaScript garatu zuen, web-orriei funtzionalitate txikiak gehitzeko helburuarekin, zerbitzariarekin etengabe komunikatu beharrik gabe.

JavaScript-i esker, honako hauek egin ahal izan ziren:

• Inprimakiak bidali aurretik baliozkotzea.
• Orriko elementuak erakustea edo ezkutatzea.
• Menu interaktiboak sortzea.
• Erabiltzailearen ekintzei berehala erantzutea.

Urteek aurrera egin ahala, JavaScript eboluzionatuz joan zen programazio-lengoaia oso ahaltsua bihurtu arte, web-aplikazio osoak garatzeko gai izanik.

Gaur egun, nabigatzaile guztiek natiboki exekutatzen duten programazio-lengoaia bakarra da.

Netscapek bere web-nabigatzailearen kodea askatu zuen eta Mozilla erakundea sortu zuen; erakunde horrek, aldi berean, nabigatzailea berridatzi zuen, eta geroago Firefox bihurtuko zen.

2.3 Java Applets: Java aplikazioak nabigatzailean

Handik gutxira, oso ezaguna egin zen beste teknologia bat agertu zen: Java Applets. Applet bat Java-n idatzitako programa bat zen, web-orri batetik deskargatu eta erabiltzailearen ordenagailuan exekutatzen zena, nabigatzailearen plugin gisa instalatutako Java Makina Birtualaren (JVM) bidez.

Applet-ek garai hartako JavaScript-ekin egin zitezkeenak baino aplikazio askoz konplexuagoak garatzeko aukera ematen zuten. Adibidez:

• Jokoak.
• Simulazioak.
• Marrazketa-tresnak.
• Hezkuntza-aplikazioak.
• Hiru dimentsioko bistaratzaileak.

Hala ere, hainbat eragozpen zituzten:

• Beharrezkoa zen ordenagailuan Java instalatzea.
• Nabigatzailearen plugin baten mende zeuden.
• Kargatzeko denbora luzea behar zuten.
• Segurtasun-arazo ugari zituzten.

2017an zaharkitutzat jo zen, eta nabigatzaileek Applet-ak exekutatzeko beharrezkoak ziren pluginak onartzeari utzi zioten.

2.4 Adobe Flash: Interneteko animazioak

90eko hamarkadaren amaieran eta 2000ko hamarkadaren zati handi batean, Adobe Flash Interneten multimedia-edukiak sortzeko teknologia nagusietako bat bihurtu zen. Flash-ek honako hauek garatzeko aukera ematen zuen:

• Animazioak.
• Jokoak.
• Bideo-erreproduzitzaileak.
• Publizitate interaktiboa.
• Aplikazio osoak.

Urte askotan oso erabilia izan zen, nabigatzaileek oraindik ez baitzituzten gaitasun horietako asko natiboki eskaintzen. Hala ere, Flash-ek hainbat arazo zituen:

• Plugin bat instalatzea eskatzen zuen.
• Baliabide asko kontsumitzen zituen.
• Segurtasun-ahultasun ugari zituen.
• Ez zuen behar bezala funtzionatzen gailu mugikor gehienetan.

2010ean, Steve Jobsek Flash-i buruzko hausnarketak izeneko gutun irekia idatzi zuen, eta bertan azaldu zuen zergatik ez zuen Applek Flash iPhone-etan erabiltzea baimentzen. Hasieran kritika ugari izan ziren, eta Appleren aurka argudiatu zitezkeen hainbat arrazoi baziren ere, urte batzuk geroago baieztatu zen Flash-ek baliabide eta bateria asko kontsumitzen zituela eta ez zela segurua.

2020an, Adobek Flash-i laguntza emateari utzi zion, eta nabigatzaileek haren bateragarritasuna erabat ezabatu zuten.

2.5 AJAX: aplikazio azkarragoak

1999an, Microsoft-ek AJAX (Asynchronous JavaScript and XML) izeneko teknika sortu zuen, 1996ko iframe etiketekiko bilakaera gisa; hasiera batean, Internet Explorer 5.0-ra mugatuta zegoen.

AJAXen aurretik, erabiltzaileak ekintza bat egiten zuen bakoitzean beharrezkoa zen orrialde osoa berriro kargatzea. AJAX-i esker, nabigatzailea zerbitzariarekin komunikatu zitekeen atzeko planoan, eta orrialdearen zati bakarra eguneratu. Horri esker, aplikazio askoz azkarragoak eta erabiltzaile-esperientzia hobea zutenak sortu ahal izan ziren.

2.6 jQuery: web-garapena sinplifikatuz

2006tik aurrera, jQuery JavaScript liburutegi ezagunenetako bat bihurtu zen. Garai hartan, JavaScript hutsez web-aplikazioak garatzea zaila zen, nabigatzaile bakoitzak DOMa eta gertaerak modu apur bat desberdinean inplementatzen baitzituen. Gainera, gaur egun ohikotzat jotzen ditugun funtzionalitate asko, hala nola querySelector(), fetch() edo gertaeren kudeaketa bateratua, oraindik ez zeuden existitzen edo ez zeuden erabilgarri nabigatzaile guztietan.

jQuery-ren helburu nagusia nabigatzaile guztiekin bateragarria zen API sinple bat eskaintzea zen. Horri esker, garatzaileek CSSren antzeko hautatzaileak erabiliz elementuak hauta zitzaketen, orrialde baten edukia alda zezaketen, gertaerak kudea zitzaketen, animazioak sor zitzaketen edo AJAX eskaerak egin zitzaketen, nabigatzaileen arteko desberdintasunez kezkatu beharrik gabe. Horrek beharrezkoa zen kode kopurua nabarmen murrizten zuen eta web-aplikazioen garapena errazten zuen.

Hainbat urtez, jQuery Interneteko webgune gehienetan egon zen, eta frontend garatzaileentzat ia ezinbesteko tresna bihurtu zen. Haren arrakasta hain handia izan zen, ezen popularizatu zituen funtzionalitate asko JavaScript-en eta nabigatzaile modernoetan natiboki txertatu baitziren azkenean.

HTML5 agertzearekin, nabigatzailearen APIak estandarizatzearekin eta Angular, React eta Vue.js bezalako frameworken garapenarekin, jQuery erabiltzeko beharra gutxituz joan zen. Gaur egun oraindik badago antzinako proiektu batzuetan, baina web-aplikazio berrietan askoz gutxiago erabiltzen da, nabigatzaile modernoek eta egungo frameworkek irtenbide osatuagoak eta ahaltsuagoak eskaintzen baitituzte.

jQuery ezagunenetako bat izan bazen ere, urte haietan baziren JavaScript zabaltzen saiatzen ziren beste liburutegi batzuk ere:

• Prototype, 2005ekoa, oso erabilia Ruby on Rails-ekin batera. DOMari metodoak gehitzen zizkion eta JavaScript sinplifikatzen zuen.
• script.aculo.us, Protoype-ren gainean sortua, animazioak, efektu bisualak eta drag & drop sortzeko liburutegia zen.
• Ext JS: mahaigaineko programen oso antzeko interfazeak dituzten enpresa-aplikazioetara bideratuta. Oraindik existitzen da, nahiz eta erabilera askoz txikiagoa izan.

2.7 HTML5: nabigatzaileak gaitasunak irabazten ditu

• Bideoa eta audioa pluginik gabe erreproduzitzea (YouTube erabiltzen hasi zen iPhone-rako erreproduzitzaile gisa).
• Marrazkiak egitea <canvas> etiketaren bidez.
• Grafiko bektorialak SVG-rekin.
• Datuak lokalean biltegiratzea.
• Geokokapena.
• Gailuaren hainbat baliabidetara sartzeko APIak.

2.8 JavaScript frameworkak

Web-aplikazioak tamainaz handitzen joan ahala, kode guztia JavaScript erabiliz soilik garatzea gero eta zailagoa zen. Horregatik, framework desberdinak agertu ziren, aplikazio konplexuen garapena errazteko helburuarekin.

Ezagunenetako batzuk hauek dira:

• Vue.js
• React
• Angular

Framework horiei esker, kodea antolatu, osagaiak berrerabili eta tamaina handiko aplikazioak errazago gara daitezke.

Gaur egun TypeScript ere badago. Goi-mailako programazio-lengoaia bat da, JavaScript-era transpilatzen dena. JavaScript-en superset bat da. Gaur egun hainbat framework eta aplikaziok erabiltzen dute. TypeScript kodea ez da bezero-ingurunean exekutatzen.

2.9 WebAssembly: bitarren exekuzioa nabigatzailean

Azken urteotan, WebAssembly (Wasm) izeneko teknologia berri bat agertu da. WebAssembly ez da programazio-lengoaia bat, baizik eta nabigatzaileek oso modu eraginkorrean exekuta dezaketen formatu bitar bat. C, C++, Rust eta Java bezalako programazio-lengoaiak erabiltzea ahalbidetzen du. Lengoaiok konpilatu egiten dira, aplikazioak garatzeko eta ondoren nabigatzailearen barruan exekutatzeko.

Teknologia hau bereziki erabilgarria da errendimendu handia behar duten aplikazioetarako, hala nola:

• Bideo-jokoak.
• Irudi-editoreak.
• 3D modelaketa.
• Simulazio zientifikoak.
• Bideo-edizioa.

WebAssembly-k konpilatutako kodea oso azkar exekuta dezakeen arren, JavaScript beharrezkoa izaten jarraitzen du nabigatzailearekin eta web-orriarekin elkarreragiteko.

3.1 Bezero-aldeko teknologiak

Aurretik ikusi dugun bezala, gaur egun bezero-ingurunean erabiltzen diren oinarrizko hiru teknologia daude:

• HTML: orri baten egitura definitzen du.
• CSS: itxura bisuala definitzen du.
• JavaScript: Web nabigatzailean modu natiboan exekutatzen den programazio-lengoaia da. Portaera gehitzen du, itxura bisuala modu interaktiboan aldatzea ahalbidetzen du, eskaerak zerbitzariari modu asinkronoan egin diezazkioke, …

Aurrerago, teknologia horietan sakonduko dugu.

4.1 Zer egiten du nabigatzaile batek?

Zerbitzariari eskaera egin ondoren, nabigatzaileak honako prozesu hau jarraitzen du:

1. HTMLa deskargatzen du.
2. CSSa deskargatzen du.
3. JavaScript deskargatzen du.
4. DOMa eraikitzen du.
5. Estiloak aplikatzen ditu.
6. JavaScript exekutatzen du.
7. Emaitza erakusten du.

4.2 Errendatze-motorrak

StatCounter webgunearen arabera, 2026an gehien erabiltzen diren nabigatzaileak hauek dira:

• Google Chrome
• Safari
• Microsoft Edge
• Mozilla Firefox

Web nabigatzaileak oso programa konplexuak dira (eta gero eta gehiago), eta horregatik, Weba asmatu zenetik hainbat programa desberdin egon dira; are gehiago, nabigatzaileen gerra bat ere egon zen.

Antzina, Web nabigatzaile bakoitzak errendatze-motor desberdin bat erabiltzen zuen. Errendatze-motorra HTML dokumentua hartu eta, CSS eta JavaScript-ekin batera, erabiltzaileak elkarreragiten duen azken itxura bisuala sortzeaz arduratzen da.

Errendatze-motor bakoitzak estandarra “bere erara” betetzen zuen. Gainera, estandarrak ez zituen zenbait ezaugarri propio gehi zitzaketen. Horren ondorioz, web-orriak oso modu desberdinean ikus zitezkeen erabiltzen zen nabigatzailearen arabera, edo are gehiago, ez funtzionatzea ezaugarri horietako baten bat erabiltzen bazen.

Nabigatzaileek estandarrak betetzen zituzten egiaztatzeko, hainbat test agertu ziren; horien artean, Acid2 eta Acid3 nabarmentzen dira.

Gaur egun, errendatze-motor bat sortzea zein konplexua den kontuan hartuta, Web nabigatzaile asko badaude ere, ia ez dago errendatze-motorrik. Horrek esan nahi du, Google Chrome, Microsoft Edge edo Opera erabiltzen badituzu ere, hirurek errendatze-motor bera erabiltzen dutela.

• Gecko: Mozillak sortutako errendatze-motorra da, eta Firefoxek eta haren fork desberdinek erabiltzen dute.
• WebKit: Applek 1998an sortu zuen motor hau, KHTML kodearen fork bat eginez (KDE proiektuak sortutako Web nabigatzailea). Gaur egun batez ere Apple gailuetan erabiltzen bada ere, Sonyk haren garapenean lagundu zuen eta PS3an erabili zuen, baita Nintendoren kontsoletan ere.
  Applek motor hau erabiltzera behartzen du iOS eta iPad gailuetako Web nabigatzaile guztietan. Horrek esan nahi du, nahiz eta Chrome aplikazioa erabili, iOSen errendatze-motorra WebKit dela.
• Blink: 2013an, Googlek WebKit-en fork bat sortuko zuela iragarri zuen, berezko motorra sortzeko eta, horrela, motorra garatzerakoan Applerekiko independenteagoa izateko. Kode irekiko Chromium Web nabigatzaileak erabiltzen duen motorra da. Gaur egun gehien erabiltzen den motorra da, nabigatzaile askok erabiltzen baitute: Microsoft Edge, Opera, Vivaldi, Brave…

Wikipedian Web nabigatzaileen konparaketa eta errendatze-motorren konparaketa ikus daitezke.

6.1 Lengoaiaren estandarizazioa

1997an, ECMA International erakundeak lengoaiaren lehen zehaztapen ofiziala argitaratu zuen, eta ECMAScript izena eman zion. Une horretatik aurrera, nabigatzaileak estandar bera inplementatzen hasi ziren, eta pixkanaka haien arteko desberdintasunak murriztuz joan ziren. Gaur egun, nabigatzaile moderno guztiek ECMAScript-ek argitaratutako zehaztapenak inplementatzen dituzte.

6.2 JavaScript nabigatzailetik kanpo

JavaScript nabigatzaileetarako lengoaia gisa sortu bazen ere, gaur egun beste ingurune askotan exekuta daiteke. Hona hemen adibide batzuk:

• Web zerbitzarietan, Node.js exekuzio-ingurune gisa erabiliz.
• Mahaigaineko aplikazioak.
• Mugikorretarako aplikazioak.
• Automatizazio-tresnak.
• Administrazio-scriptak.
• IoT gailuak.

Horrek JavaScript gaur egun dagoen lengoaiarik moldakorrenetako bat bihurtu du.

7.1 Eboluzioa

2009an ECMAScript 5 (ES5) izeneko lengoaiaren bertsio berri bat agertu zen. Bertsio horrek nabigatzaileen arteko egonkortasuna eta bateragarritasuna nabarmen hobetu zituen. Hala ere, aldaketarik garrantzitsuena 2015ean iritsi zen, ECMAScript 2015 (ES6) argitaratu zenean, horrek lengoaia eraldatu baitzuen.

2015etik aurrera, urtero argitaratzen dira estandarraren bertsio berriak, hobekuntza txikiak eta funtzionalitate berriak gehituz. Wikipedian bertsioen historia ikus daiteke.

7.2 Denbora-lerroa

7.3 Nabigatzaileen arteko bateragarritasuna

Lengoaiaren bilakaera dela eta, exekuzio-motorrek eta nabigatzaileek ez dute zertan beti azken bertsioa erabili, edo baliteke funtzionalitate berriei lehentasun desberdinak ematea. Nabigatzaileen bateragarritasunak kontsultatzeko, honako webgune hauek erabil ditzakegu:

• Mozilla Developer Network: Garatzaileek gehien erabiltzen duten dokumentazio ofiziala.
• ECMAScript Compatibility Table: JavaScript lengoaiaren ezaugarrien bateragarritasuna kontsultatzeko.
• Can I use: HTML, CSS, nabigatzailearen APIak, … kontsultatzeko.

8.1 Segurtasuna eta mugak

JavaScript erabiltzailearen nabigatzailean exekutatzeko diseinatu zen; beraz, erabiltzailearen ordenagailuan edo gailuan exekutatzen da, eta ez zerbitzarian. Ezaugarri horrek zenbait abantaila eskaintzen ditu, hala nola interaktibitate handiagoa eta aplikazioen erantzun azkarragoa. Hala ere, segurtasunarekin lotutako erronka garrantzitsuak ere sortzen ditu.

Nabigatzaile modernoek neurriak ezartzen dituzte web-orri batek erabiltzailearen ordenagailura askatasunez sartzea edo irekita dauden beste orri batzuekin interferitzea eragozteko.

8.2 Ingurune isolatua (Sandbox)

Segurtasun-neurri nagusietako bat JavaScript kodea ingurune isolatu baten barruan exekutatzea da, sandbox (hareatokia) izenez ezagutzen dena. Sandbox-ak JavaScript programa batek egin ditzakeen ekintzak mugatzen ditu, sistema eragilera zuzenean sartzea eragotziz. Mekanismo horri esker, web-orri batek ezin du, adibidez:

• Disko gogorreko edozein fitxategi irakurri.
• Sistemako fitxategiak aldatu.
• Programak instalatu.
• Sistema eragilearen aplikazioak exekutatu.
• Beste aplikazio batzuen informaziora askatasunez sartu.
• Hardwarea zuzenean atzitu. Baliabideetara (kamera, mikrofonoa, kokapena, …) sartu aurretik, erabiltzaileari baimena eskatuko dio.

Murrizketa horiek erabiltzailea web-orri maltzur posibleetatik babesten dute.

8.3 Jatorri bereko politika (Same-Origin Policy)

Segurtasun-neurri oso garrantzitsu bat Jatorri bereko politika (Same-Origin Policy) da. Politika horrek web-orri batek beste gune bateko beste web-orri baten informazioa askatasunez atzitzea eragozten du. Erabiltzaileak aldi berean bi web-orri desberdin irekita baditu, horietako bateko kodeak ezin izango du bestearen edukira sartu.

8.4 HTTP eskaeren murrizketak

Web-aplikazioak zerbitzariekin komunikatzen dira normalean HTTP eskaeren bidez. Hala ere, nabigatzaileek komunikazio horiei ere murrizketak ezartzen dizkiete. Aplikazio bat orria zerbitzatu duenaz bestelako zerbitzari batera sartzen saiatzen denean, urruneko zerbitzariak berariaz baimendu behar du komunikazio hori, CORS (Cross-Origin Resource Sharing) izeneko teknika baten bidez.

Zerbitzaria sarbidea baimentzeko konfiguratuta ez badago, nabigatzaileak eskaera blokeatuko du. Neurri horrek web-orri maltzurrek web-zerbitzuetara baimenik gabe sartzea eragozten du.

8.5 JavaScript kodea ikusgai dago

Zerbitzarian erabiltzen diren beste lengoaia batzuek ez bezala, JavaScript kodea erabiltzailearen nabigatzailera iristen da. Edonork ikus dezake nabigatzailearen garapen-tresnak erabiliz, eta, beraz, baita aldatu ere. Horregatik:

• Ez dira pasahitzak sartu behar.
• Ez dira gako pribatuak gorde behar.
• Ez dira isilpeko datuak txertatu behar.
• Ez dira segurtasun-mekanismoak JavaScript kodean soilik oinarrituta inplementatu behar.

Nabigatzailera bidalitako kode guztia publikotzat hartu behar da, nahiz eta kodea lausotzeko (obfuscation) tresnak egon.

9.1 Kode integratua

Kode integratua JavaScript kodea zuzenean HTML dokumentuaren barruan idaztean datza, <script> etiketa erabiliz.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
</head>
<body>
    <h1>Hola Mundo</h1>
    <!-- esto es un comentario HTML -->
    <script>
        // esto es un comentario en JavaScript
        console.log("Hola desde JavaScript");
    </script>
</body>
</html>

Nabigatzaileak <script> etiketa aurkitzen duenean, haren barruan dagoen kodea interpretatu eta berehala exekutatzen du. Web-orri berean hainbat etiketa egon daitezke, eta agertzen diren ordenan exekutatuko dira.

9.2 Kodea kanpoko fitxategi batean

JavaScript kodea idazteko modurik ohikoena .js luzapena duen fitxategi independente batean egitea da; adibidez, js/app.js. HTML fitxategitik JavaScript fitxategiari erreferentzia egiten zaio.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Mi primera página</title>
</head>
<body>
    <h1>Hola Mundo</h1>
    <script src="js/app.js"></script>
</body>
</html>

console.log("Hola desde un fichero externo");

Nabigatzaileak HTML kodea jasotzen duenean, aztertu egingo du eta src atributua ikusiko du; beraz, beste eskaera bat egingo dio zerbitzariari fitxategia deskargatzeko eta, horrela, exekutatu ahal izateko. Aukera hori ia edozein proiektutan gomendatzen da, kode integratuak ez dituen hainbat abantaila baititu:

• HTML kodea garbiagoa da.
• Egitura eta logika bereizten dira.
• Fitxategi bera hainbat orritan berrerabil daiteke.
• Errazagoa da akatsak aurkitzea.
• Talde-lana errazten du.
• Nabigatzaileak fitxategia cachean gorde dezake etorkizuneko bisitetarako. Ez dio berriro zerbitzariari eskatuko.

Proiektu bat handitzen denean, komenigarria izan daiteke kodea hainbat fitxategitan banatzea.

function saludar(nombre) {
    console.log(`Hola ${nombre}`);
}

saludar("Bob");

9.3 Non kargatu JavaScript?

Tradizionalki, bi aukera zeuden.

• []{verbatim} elementuaren barruan: Metodo honek arazoak sor ditzake. Nabigatzaileak fitxategia deskargatzen duen bitartean, HTML orria eraikitzeari uzten dio. Ondorioz, erabiltzaileak karga motelagoa dela hauteman dezake, eta exekuzioren bat egiten bada, HTMLa oraindik eraiki gabe dagoenez, akatsak gerta daitezke.
• []{verbatim} elementua itxi aurretik: Urte askotan gomendioa scriptak []{verbatim} elementuaren itxieraren aurretik jartzea izan zen.

<head>
    <script src="03.js"></script>
</head>
<body>
    <h1 id="titulo">Título</h1>

<body>
    <h1 id="titulo">Título</h1>
...
    <script src="03.js"></script>
</body>

<head>
  <script src="app.js" defer></script>
</head>

9.4 Konparaketa eta jardunbide egokiak

Ikusi ahal izan dugun bezala, JavaScript kodea kargatzeko hainbat modu daude. Horregatik, garrantzitsua da kodea non jarri behar dugun ulertzea eta fitxategiak kargatzean atributuak erabiltzea beharrezkoa izan daitekeela jakitea.

Hurrengo irudian kargatzeko metodo desberdinen irudikapen bisuala ikus daiteke:

Hurrengo taulan ere laburbiltzen da nola erabil daitezkeen.

9.5 Lengoaiaren gramatika

Programazio-lengoaia guztiek bezala, JavaScript-ek bere gramatika eta lexikoa ditu. MDNren dokumentazioan lexiko osoa azaltzen da.

11.1 JSDoc iruzkinak

Beste programazio-lengoaia batzuetan gertatzen den bezala, proiektu profesionaletan ohikoa da dokumentaziorako formatu berezi bat erabiltzea. Javan Javadoc erabili ohi da eta, JavaScript-en, antzeko sintaxia erabiliz, JSDoc erabil daiteke.

Funtzioak, klaseak eta programaren beste elementu batzuk modu egituratuan dokumentatzea ahalbidetzen du. Haren sintaxia /** erabiliz hasten da.

/**
 * Devuelve la suma de dos números.
 *
 * @param {number} a Primer número.
 * @param {number} b Segundo número.
 * @returns {number} Resultado de la suma.
 */
function sumar(a, b) {
    return a + b;
}

12.1 Deklarazioa eta hasieratzea

Garrantzitsua da bi kontzeptu bereiztea.

• Aldagaia deklaratzea: aldagaia sortzean datza. Oraindik ez du baliorik.
• Aldagaia hasieratzea: lehen aldiz balio bat esleitzean datza.
• Bi ekintzak aldi berean egin daitezke.

let edad;

edad = 20;

let edad = 20;

12.2 let, const eta var arteko desberdintasunak

Aldagaiak deklaratzeko hiru hitz erreserbatu erabil ditzakegu:

• let: Balioa alda daitekeen aldagaiak deklaratzeko gomendatutako modua da.
• const: Konstante bat deklaratzen du. Konstante batek balio bat jaso behar du sortzen den unean. Konstante batek objektu edo array bat gordetzen duenean, konstante mantentzen dena objektuaren erreferentzia da, ez nahitaez haren edukia. Hitzarmen bidez, konstante batek balio finko global bat adierazten duenean, maiuskulaz idatzi ohi da.
• var: ECMAScript 2015 baino lehen aldagaiak deklaratzeko erabiltzen zen, baina ez da gomendatzen kode berrian erabiltzea. Arrazoia da portaera desberdina duela aldagaien esparruari eta goratzeari (hoisting) dagokienez, eta horrek detektatzeko zailak diren akatsak eragin ditzake.

let contador = 0;
contador++;
contador++;
console.log(contador);

const PI = 3.141592;
PI = 3; // TypeError:
const letras = ["a", "b"];
// permitido
letras.push("c");

var nombre = "Ana";

12.3 Aldagaien esparrua

Esparruak (scope) zehazten du programaren zein ataletatik atzi daitekeen aldagai batera. Lau esparru daude:

• Global scope: script moduan dagoen kode guztiaren esparru lehenetsia.
• Module scope: moduluetako kodearen esparrua (aurrerago ikusiko dugu).
• Function scope: funtzio beraren barruko esparrua.
• Block scope: let eta const aldagaientzat, giltzen artean dagoen esparrua (a bloke).

Laburpen gisa, ondorengo taula erabil dezakegu:

12.4 Izenak jartzeko konbentzioa

JavaScript-ek hainbat izen erabiltzeko aukera ematen du, baina badira oso onartuak dauden konbentzioak.

• camelCase: JavaScript-en erabiltzen den konbentzioa da. Lehenengo hitza minuskulaz hasten da, eta hurrengoak maiuskulaz. Izenen adibideak: nombreCompleto, numeroAlumnos, fechaNacimiento, …
• Snake_Case: Python-en, PHP-n, … erabiltzen da. Izenen adibideak: nombre_completo, numero_alumnos, …

Bestalde, aldagaien hizkuntza, iruzkinak nola idatzi… erabaki beharko genuke. Hori guztia programatzaileek erabiltzen duten hizkuntzaren, kodea argitaratuko den ala ez, eta abarren araberakoa izango da.

13.1 Mota primitiboak

Beste programazio-lengoaia batzuek bezala, JavaScript-ek balio bat adierazten duten datu-mota primitibo batzuk ditu:

• Boolean: true eta false izan daitezkeen balioak soilik.
• null: Balio nulua dela adierazten duen hitz berezia.
• undefined: Oraindik deklaratu ez diren aldagaiei esleitzen zaien balio primitiboa.
• Number: Zenbaki osoa edo koma mugikorreko zenbakia. Adibidez: 42 edo 3.14159.
  • Infinity eta -Infinity balioak sor ditzake; balio horiek izan daitezkeen gehienezko eta gutxieneko balioak adierazten dituzte.
  • NaN: Not a Number, datu mota bat zenbakia den jakiteko eragiketaren emaitza; kasu honetan, ez da zenbakia: Number("hola")
• BigInt: zehaztasun arbitrarioko zenbaki osoa. Adibidez: 9007199254740992n.
• String: Testu bat osatzen duten karaktereen sekuentzia. Honela idatz daiteke:
  • Komatxo bakunak: 'hola'
  • Komatxo bikoitzak: "hola"
  • Alderantzizko komatxoak: `hola`
• Symbol: Unibokoa eta aldaezina dela bermatzen duen datu mota.

let verdadero = true;
let falso = false;
let nulo = null;
let edad = 18;
let temperatura = 22.5;
let saldo = -150.75;
// Infinity
console.log(42 / 0);
// -Infinity
console.log(-42 / 0);

let nombre = "Charlie";
let ciudad = 'Bilbao';
let saludo = `Hola`;
console.log("Hola "+nombre)
console.log("Hola %s",nombre)
console.log(`Hola ${nombre}`)
let edad;
// undefined
console.log(edad);

13.2 Objektuak

Aurretik deskribatu ez diren gainerako datu-motak Object motakoak dira. Horien artean funtzioak, array-ak, adierazpen erregularrak, Map edo Error motako objektuak egon daitezke.

Objektu baten adibidea honako hau izango litzateke:

const alumno = {
    nombre: "Alice",
    edad: 20,
    aprobado: true
};
console.log(alumno.nombre)

Aurrerago, Objektuak atalean sakonduko dugu.

13.3 typeof eragilea

JavaScript-ek typeof eragilea dauka, datu baten mota ezagutzeko aukera ematen duena.

let nombre = "Bob";
typeof nombre;

13.4 Mota bihurketa

Askotan beharrezkoa da datu-mota bat beste batera bihurtzea; batzuetan aldi baterako, eta beste batzuetan behin betiko. Bihurketa esplizitua azalduko dugu, geroago eragileekin azalduko diren bihurketa inplizituen kasu batzuk baitaude.

let edad = Number("25");
//NaN
Number("Hola")
parseInt("123")
// 123
parseInt("123px")
parseInt(123.4)
parseFloat("12.75")

String(25)
String(true)
Boolean(1)
Boolean("123")
Boolean(0)
Boolean("")
Boolean(null)
Boolean(undefined)
Boolean(NaN)

13.5 == eta === arteko konparaketa

JavaScript-ek lehenespenez egiten dituen bihurketa automatikoen ondorioz, konparaketa-eragileak bereziki eragiten ditu. Horren ondorioz, batzuetan nahi ez ditugun akatsak izan ditzakegu gure kodean:

Bihurketa automatikoak saihesteko, === edo strict equality eragilea dago. Eragile horrek Boolean bat itzultzen du, eta bai balioa bai datu-mota hartzen ditu kontuan.

Ezeztapen-eragilea !== da.

14.1 Eragile aritmetikoak

Eragile aritmetikoek eragiketa matematikoak egiteko aukera ematen dute.

14.2 Esleipen-eragileak

Aldagai batean balio bat gordetzeko aukera ematen dute. Erabiliena = eragilea bada ere, eragiketak modu laburtuan idazteko aukera ematen diguten beste eragile batzuk ere badaude.

14.3 Gehikuntza eta txikitze-eragileak

Aldagai bat unitate batean handitzeko edo txikitzeko aukera ematen dute. Aldagaiaren aurretik edo ondoren jar daitezke, eta kokatzen diren lekuaren arabera haien portaera aldatu egiten da.

let x = 5;
x++;
console.log(x++);
console.log(++x);

let x = 5;
x--;
console.log(x--);
console.log(--x);

14.4 Konparaketa-eragileak

Bi balio konparatzeko aukera ematen dute. Emaitza beti balio boolearra da: true edo false.

14.5 Eragile logikoak

Hainbat baldintza konbinatzeko aukera ematen dute. Aurrerago erabiliko ditugu baldintzazko sententzien atalean.

14.6 Kateatzeko eragilea

+ eragilea testu-kateak elkartzeko ere erabil daiteke, baina gaur egun normalean nahiago izaten da template literals erabiltzea.

const nombre = "John";
const apellido = "Doe";
console.log(nombre + " " + apellido);
// mejor así
console.log(`Hola ${nombre} ${apellido}`);

14.7 Ezkerreko balioa nulua bada esleitzeko eragilea ??

nullish coalescing assignment eragilea dago. Eskuineko datua soilik hartzen du ezkerrekoak null edo undefined balio duenean.

const a = { duration: 50 };
a.speed ??= 25;
console.log(a.speed);
// Salida esperada: 25

a.duration ??= 10;
console.log(a.duration);
// Salida esperada: 50

Eragile horrek existitzen ez diren balioekin lotutako akats asko saihesten ditu.

15.1 Kontsolaren bidezko irteera

Garapenean zehar ohikoena nabigatzailearen kontsola erabiltzea da. Orain arte erabiltzen ari garen funtzioa da, eta gehien erabiltzen dena. log formatuaz gain, ondoren zehazten diren beste metodo batzuk ere erabil ditzakegu:

Azken bi metodoetan, nabigatzaile batzuek kolore edo ikono desberdinak erabiliz erakusten dituzte.

15.2 Datuak eskatzea prompt() bidez

prompt() funtzioak erabiltzaileari informazioa eskatzen dion leiho bat erakusten du. Erabiltzaileak balioa idatzi eta Onartu botoia sakatu beharko du. Balioa aldagai batean gorde beharko da.

prompt() funtzioak beti testu-kate bat itzultzen du.

Gaur egun funtzio hau ez da erabiltzen, hainbat eragozpen baititu eta haren funtzionalitatea inprimakien bidez lor baitaiteke:

• Programaren exekuzioa eteten dute.
• Orriaren interakzioa blokeatzen dute.
• Itxura nabigatzailearen araberakoa da.
• Ezin dira pertsonalizatu.

15.3 Mezuak alert() bidez erakustea

alert() funtzioak mezu bat duen leiho bat erakusten du. Programa geldituta geratzen da erabiltzaileak onartzeko botoia sakatu arte. Gaur egun ia ez da erabiltzen, prompt() funtzioaren arrazoi berberengatik.

alert("Bienvenido");

15.4 Egiaztapena confirm() bidez eskatzea

confirm() funtzioak bi botoi dituen galdera bat erakusten du, Onartu edo Utzi aukeratzeko, eta boolean balio bat itzultzen du.

const borrar = confirm("¿Desea eliminar el registro?");

Berriro ere, ia erabiltzen ez den funtzioa da, ohikoa baita modals erabiltzea.

15.5 Informazioa orrian erakustea

Kontsolaz gain, JavaScript-ek web-orri baten edukia alda dezake. Aurrerago sakonago aztertuko dugu, baina ondorengo adibidea aurrerapen gisa erabil dezakegu.

<p id="mensaje"></p>

document.getElementById("mensaje").textContent = "Hola!";

16.1 Baldintzazko egiturak

Beste programazio-lengoaia batzuetan bezala, if baldintzazko egitura da sinpleena, eta eduki bat exekutatuko du baldintza bat betetzen bada. Baldintza hori betetzen ez bada eta else blokea badago, bigarren bloke hori exekutatuko da.

const edad = 20;

if (edad >= 18) {
    console.log("Mayor");
}

const edad = 20;

if (edad >= 18) {
    console.log("Mayor");
} else {
    console.log("Menor");
}

Baldintzan aurrez ikusitako konparaketa-eragileak erabil daitezke, eta baldintza bat baino gehiago kateatu nahi baditugu, eragile logikoak.

const edad = 20;

if (edad >= 18 && edad <=65) {
    console.log("Mayor");
} else {
    console.log("Menor o jubilado");
}

let edad = 20;

if (edad >= 65) {
    console.log("Jubilado");
} else if (edad >= 18){
    console.log("Mayor");
} else {
    console.log("Menor");
}

Ikus daitekeen bezala, else if ere erabil daiteke aurreko baldintzan betetzen ez den baldintza berri bat egiaztatu nahi badugu.

const edad = 20;

const mensaje = edad >= 18 ? "Mayor" : "Menor";

switch (action) {
  case "draw":
    console.log("draw");
    break;
  case "eat":
    console.log("eat");
    break;
  default:
    console.log("default");
}

17.1 while bukle

while buklea bloke bat exekutatzen du baldintza egia den bitartean. Baldintza iterazio bakoitzaren aurretik ebaluatzen da, eta, beraz, baldintza faltsua bada, bukle ez da exekutatuko.

let contador = 1;

while (contador <= 5) {
    console.log(contador);
    contador++;
}

let contador = 1;

while (contador <= 5) {
    console.log(contador);
}

17.2 do…while bukle

Kasu honetan, baldintza blokea exekutatu ondoren ebaluatzen da.

let contador = 1;
do {
    console.log(contador);
    contador++;
} while (contador <= 5);

17.3 for bukle

Aldez aurretik errepikapen kopurua ezagutzen dugunean gehien erabiltzen den bukle da.

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

Kasu honetan, sententziaren barruan hiru zati bereizten dira:

• Hasieratzea: let i = 0
• Baldintza: i < 10
• Eguneratzea: i++

17.4 for…of bukle

JavaScript modernoak for…of bukle dauka, objektu iterableak (Array, Map, Set…) zeharkatzeko diseinatua.

Array-ak zeharkatzeko gomendatutako modua da.

const colores = ["Rojo", "Verde", "Azul"];

for (const color of colores) {
    console.log(color);
}

17.5 for…in bukle

for…in buklearekin objektu baten propietateak zeharka daitezke.

const alumno = {
    nombre: "Bob",
    edad: 20
};

for (const propiedad in alumno) {
    console.log(propiedad);
}

Array-etan ere erabil daiteke, baina ez da gomendagarria. Array-ak zeharkatzeko beti for…of erabiliko dugu.

17.6 Bukleen laburpena

Ondorengo taulan bukle moten laburpena eta bakoitza zertarako erabili beharko genukeen ikus daiteke.

17.7 break eta continue sententziak

Batzuetan beharrezkoa da bukle baten ohiko portaera aldatzea, eta horretarako honako instrukzio hauek ditugu:

• break: buklea berehala amaitzen du.
• continue: uneko iterazioa saltatzen du eta hurrengoarekin jarraitzen du.

const numeros = [4, 8, 15, 23];

for (const numero of numeros) {
    if (numero === 15) {
        console.log("Encontrado");
        break;
    }
}

for (let i = 1; i <= 5; i++) {
    if (i === 3) {
        continue;
    }
    console.log(i);
}

18.1 try…catch egitura

Programazio-lengoaia askotan dagoen salbuespenen kudeaketarako egitura try…catch da, eta JavaScript ez da salbuespena.

Akats bat sortzeko joera duen sententzia bat exekutatzen badugu, programa gelditu egin daiteke. Sententzia hori try…catch baten barruan exekutatzen badugu, akatsaren kudeaketa kontrola dezakegu.

try {
    console.log(variableInexistente);
}
catch (error) {
    console.log("Error: "+error);
}

try {
    console.log("Inicio");
}
catch (error) {
    console.log("Error: "+error);
}
finally {
    console.log("Fin");
}

18.2 Erroreak throw bidez sortzea

Erroreak nahita sortzea ere posible da throw sententziaren bidez.

const edad = -5;

if (edad < 0) {
    throw new Error("La edad no puede ser negativa.");
}

19.1 Funtzioen deklarazioa eta erabilera

Funtzio bat sortzeko modu klasikoan function hitz erreserbatua erabiltzen da. Funtzioari deitzeko, hitz erreserbatu hori erabiliko dugu () parentesiekin batera.

function saludar() {
    console.log("Hola.");
}

saludar();
saludar();

19.2 Parametroak

Askotan, funtzio batek datu desberdinekin lan egin behar du exekutatzen den bakoitzean, eta horretarako parametroak erabiltzen dira. Parametro bat funtzioari deitzean balio bat jasotzen duen aldagaia da. Funtzio batek hainbat parametro jaso ditzake.

function saludar(nombre) {
    console.log(`Hola ${nombre}`);
}

saludar("Ann");
saludar("Bob");

Nahiz eta ohikoa den “parametroa” eta “argumentua” sinonimotzat erabiltzea, bada alde txiki bat:

• Parametroa: funtzioan definitutako aldagaia.
• Argumentua: funtzioari deitzean pasatzen zaion balioa.

function saludar(nombre="Usuario") {
    console.log(`Hola ${nombre}`);
}

saludar();
saludar("Alice");

function sumar(a, b) {
    console.log(a+b);
}

sumar(4);

19.3 Itzulera-balioa

Funtzio askok ez dute zeregin bat bakarrik egiten, emaitza bat ere sortzen dute. Horretarako, return hitz erreserbatua erabiltzen da emaitza itzultzeko.

function sumar(a, b) {
    return a + b;
}

let resultado = sumar(4,6);
console.log(resultado);

Funtzio batek return ez badu, lehenespenez itzultzen duen balioa undefined da.

19.4 Funtzio anonimoak eta gezi-funtzioak (arrow functions)

JavaScript modernoak funtzio anonimoak sortzeko sintaxi bat du, izenik/identifikatzailerik ez duten funtzioak definitzeko modu trinkoagoa eskaintzen duena. Funtzio anonimoak sortzeko beste modu bat “gezi-funtzioak” (arrow functions) deritzenak dira.

Funtzio anonimoak erabiltzen dira haien kodea berrerabiltzea beharrezkoa ez denean, balioak zuzenean aldagai bati esleitzeko, beste funtzio bati argumentu gisa pasatzeko edo funtzio batetik itzultzeko.

Jarraian, funtzio anonimoen hainbat adibide eta erabil daitekeen sintaxia ikus daitezke.

const m = function(x, y){
  return x * y;
};

const m = (x, y) => {
    return x * y;
}

const m = (x, y) => x * y;

const m = () => "Hola!";

Objetuak

20.1 Propietateak

Aipatu dugun bezala, objektu batek propietateen bilduma bat dauka, eta propietate horiekin hainbat eragiketa egiteko aukera dugu. Jarraian, horiek zehaztuko ditugu:

console.log(alumno.nombre);
console.log(alumno.edad);
console.log(alumno.direccion.calle);

console.log(alumno["nombre"]);
console.log(alumno["direccion"]["calle"]);
//evitad mezclar
console.log(alumno["direccion"].calle);

let propiedad = "direccion";
console.log(alumno[propiedad])

alumno.nombre = "Bob";
alumno.curso = "2º DAW";

delete alumno.curso;

const profesor = null;
console.log(profesor?.nombre); // undefined
console.log(profesor.nombre);  // error

if ("edad" in alumno) {
    console.log("tiene edad")
} else {
    console.log("no tiene edad")
}

const alumno = {
    nombre: "Alice",
    edad: 20,
    ciudad: "Bilbao"
};

for (const propiedad in alumno) {
    console.log(propiedad);
}

const propiedades = Object.keys(alumno);
console.log(propiedades);
// recorrer propiedades
for (const propiedad of Object.keys(alumno)) {
    console.log(propiedad);
}

console.log(Object.values(alumno));

// recorrer propiedad/valor
for (const [propiedad, valor] of Object.entries(alumno)) {
    console.log(propiedad, valor);
}

20.2 Metodoak

Objektuek funtzioak ere izan ditzakete, eta funtzio horiei metodo deitzen zaie. Metodoak bi modutan deklara daitezke, jarraian ikus dezakegun bezala:

const alumno = {
    nombre: "Carol",
    saludar: function () {
        console.log("Hola.");
    }
};
alumno.saludar();

const alumno = {
    nombre: "David",
    saludar (saludo) {
        console.log(`Hola ${saludo}`);
    }
};
alumno.saludar("tu");

const alumno = {
  nombre: "Eve",
  saludar() {
    console.log(`Hola ${this.nombre}`);
  }
};
alumno.saludar();

const alumno = {
  nombre: "Frank",
  saludar: => () {
    console.log(`Hola ${this.nombre}`);
    //undefined
  }
};
alumno.saludar();

20.3 Objektuen kopia

Askotan objektu baten kopia bat sortu behar dugu, kopia aldatzeko jatorrizkoa aldatu gabe. Hala ere, JavaScript-en objektu bat kopiatzeak ez du beti espero dugun emaitza ematen. Portaera hori ulertzeko, gogoratu behar da objektuak gordetzen dituzten aldagaiek objektuaren erreferentzia gordetzen dutela, eta ez objektua bera.

Imajina dezagun objektu bat sortu eta objektu hori beste aldagai bati esleitzen diogun ondorengo adibidea:

const alumno1 = {
    nombre: "Grace",
    edad: 20
};
const alumno2 = alumno1;

Bi aldagaiek objektu berari egiten diote erreferentzia:

Horren ondorioz, alumno2 aldatzen badugu ere, aldaketa alumno1-en ere islatuko da. Are gehiago, konparaketa === erabiliz egiten badugu, true itzuliko digu, objektu bera direlako.

const alumno1 = {
    nombre: "Heidi",
    edad: 20
};
const alumno2 = alumno1;
console.log(alumno1 === alumno2);
const alumno3 = {
    nombre: "Heidi",
    edad: 20
};
console.log(alumno1 === alumno3);

const alumno1 = {
    nombre: "Ivan",
    edad: 20,
    direccion: {
        ciudad: "Bilbao"
    }
};
const alumno2 = {...alumno1};
console.log(alumno1 === alumno2);

const alumno1 = {
    nombre: "Alice",
    edad: 20,
    direccion: {
        ciudad: "Bilbao"
    }
};
const alumno2 = Object.assign({}, alumno1);
console.log(alumno1 === alumno2);

const alumno1 = {
    nombre: "Bob",
    edad: 20,
    direccion: {
        ciudad: "Bilbao"
    }
};
const alumno2 = structuredClone(alumno1);

20.4 Objektuak konbinatzea

spread eragilea objektuak konbinatzeko ere erabil daiteke.

const persona = {
    nombre: "Carol"
};
const datos = {
    ...persona,
    edad: 20,
    ciudad: "Bilbao"
};
console.log(datos);

20.5 Propietateak gainidaztea

Propietate bat behin baino gehiagotan agertzen bada, azkenak izango du lehentasuna.

const alumno = {
    nombre: "Dan",
    edad: 20
};

const copia = {
    ...alumno,
    edad: 21
};

21.1 Elementuak atzitzea eta aldatzea

Array baten elementuak atzitzeko eta aldatzeko, haien indizearen bidez egin behar dugu. JavaScript-en indizeak 0-tik hasten dira.

console.log(datos[0]);

datos[2] = 30;

21.2 Array-aren luzera

Array-ak zenbat elementu dituen jakiteko, length propietatea dugu. Beraz, azken elementura sartu nahi badugu, 1 kendu beharko diogu.

console.log(datos.length);

datos[datos.length-1];

21.3 Array bat zeharkatu

Modu klasikoan for begizta erabiltzen da, nahiz eta gaur egun for…of erabiltzen den.

for (let i=0; i<datos.length; i++) {
    console.log(datos[i]);
}

for (const dato of datos) {
    console.log(dato);
}

21.4 Array-en metodoak

JavaScript-ek metodo ugari eskaintzen ditu array-ekin lan egiteko. Horietako askok array-aren edukia aldatzen dute, eta beste batzuek array berri bat itzultzen dute. Jarraian, erabilienak ikusiko ditugu, baina interesgarria da array-en dokumentazioa kontsultatzea metodo guztiak ikusteko.

const numeros = [10, 20, 30, 40, 50];
// añadir elemento al final
numeros.push(60);
// eliminar último elemento
numeros.pop();
// añadir al inicio
numeros.unshift(5);
// eliminar el primero
numeros.shift();
// obtener una parte del array
const nums = numeros.slice(1, 3);

const colores = ["Rojo","Verde","Azul"];
// buscar un elemento
console.log(colores.includes("Verde"));
// obtener la posición
console.log(colores.indexOf("Azul"));
// concatenar arrays
const nuevo = numeros.concat(colores);
const letras = ["C", "A", "B"];
// ordenar
letras.sort();
// invertir
letras.reverse();
// convertir en cadena
console.log(colores.join(", "));

Ondorengo taulan ikusitako metodoen laburpena dago:

21.5 Array-en kopia

Objektuekin gertatzen zen bezala, array bat sortu eta beste aldagai bati esleitzen badiogu, ez dugu kopiarik egiten, datuaren erreferentzia bat baizik. Garrantzitsua da hori kontuan izatea; beraz, gogoratu objektuen kopia sakonean ikusitakoa array-ekin gauza bera egiteko.

Objektuetara bideratutako programazioa

22.1 POOko kontzeptuen laburpena

Nahiz eta dagoeneko objektuetara bideratutako programazioa egin dugun, jarraian kontzeptu garrantzitsuenak laburbilduko ditugu:

• Klasea: objektuak nolakoak izango diren deskribatzen du.
• Objektua: klase horretatik abiatuta sortutako instantzia zehatza da.
• Propietateak/Atributuak: objektuaren egoera adierazten dute (izena, adina, …).
• Metodoak: objektuak egin ditzakeen portaera edo funtzioak adierazten dituzte.

Tradizionalki, Objektuetara Bideratutako Programazioa oinarrizko lau kontzeptutan oinarritzen da. Kontzeptu horiek dagoeneko ezagunak egin beharko litzaizkiguke, edo, gutxienez, erabiltzen jakin beharko genuke:

• Abstrakzioa: sistema bat haren funtsezko ezaugarrietan arreta jarriz adieraztean datza.
• Kapsulatzea: datuak eta datu horiekin lan egiten duten metodoak taldekatzea da.
• Herentzia: herentziari esker, aurrez existitzen den klase batetik abiatuta klase berriak sor daitezke.
• Polimorfismoa: mota desberdinetako objektuei sintaktikoki berdinak diren mezuak bidaltzeko aukera ematen duen propietateari dagokio.

23.1 Kapsulatzea

Objektuetara Bideratutako Programazioaren oinarrizko printzipioetako bat kapsulatzea da. Objektu baten barne-egoera babestean eta bertara sartzeko modua kontrolatzean datza.

Programaren edozein atalek datuak libreki aldatzea ahalbidetu beharrean, objektuak berak erabakitzen du nola erabili behar diren.

class Cuenta {
    constructor(saldo) {
        this.saldo = saldo;
    }
    setSaldo(saldo){
        this.saldo = saldo;
    }
}

const cuenta = new Cuenta(1000);
// nada impide hacer
cuenta.saldo = -5000;
// debería ser
cuenta.setSaldo(1500);

Programazioaren ikuspegitik, eremu batera sartzea eta hura aldatzea posible da, baina horrek objektuaren portaeran eragina izan dezake. Horregatik, arazoak saihesteko, kapsulatzea erabili eta propietateak aldatzen dituzten metodoak sortu beharko genituzke.

23.2 Eremu eta metodo pribatuak

Bitxia badirudi ere, JavaScript-ek elementu eta metodo pribatuak 2021eko uztailean txertatu zituen. Propietate eta metodo pribatuak deklaratzeko # ikurra erabiltzen da.

Propietate eta metodo pribatu batera klase beretik soilik sar daiteke, objektuetara bideratutako programazioa duten beste lengoaia batzuetan gertatzen den bezala.

class Cuenta {
    #saldo;
    constructor(saldo) {
        this.#saldo = saldo;
    }
    #privado() {
        console.log("Priv");
    }
    getSaldo() {
        this.#privado();
        return this.#saldo;
    }
}

const cuenta = new Cuenta(1000);
// obtener dato
console.log(cuenta.getSaldo());

//esto dará error
console.log(cuenta.#privado());
//esto dará error
console.log(cuenta.#saldo);

Ikus daitekeenez, propietate pribatura sartzeko, horretarako sortutako metodo bat erabili behar dugu, getSaldo(), publikoa dena. Propietatea aldatu nahi badugu ere, metodo baten bidez egin behar da.

Garrantzitsua da zehaztea Chrome nabigatzaileetan, garatzaile-kontsolatik, metodo pribatura sartzea posible dela, eta, beraz, ez duela errorerik emango.

23.3 Getters eta setters

Aurretik propietate batera nola sartu ikusi badugu ere, beste lengoaia batzuetako estilo klasikoa erabili dugu, Java-koa esaterako. Aldiz, JavaScript-ek getter eta setter izeneko sintaxi berezi bat eskaintzen du.

Getter batek propietate bat atributu bat balitz bezala kontsultatzeko aukera ematen du; setter-ak, berriz, propietate bat aldatzeko aukera ematen du.

class Cuenta {

    #saldo;

    constructor(saldo) {
        this.#saldo = saldo;
    }

    get saldo() {
        return this.#saldo;
    }
    set saldo(valor) {
        if (valor >= 0) {
            this.#saldo = valor;
        }
    }
}

console.log(cuenta.saldo);
cuenta.saldo = 500;
console.log(cuenta.saldo);

27.1 DOM zuhaitzaren egitura

DOMak elementu guztiak familia-harremanen bidez antolatzen ditu.

Nodo bakoitzak honako hauek izan ditzake:

• Guraso bat (parent): aurreko adibidean <h1>-en gurasoa <body> da.
• Seme bat edo gehiago (children): <body>-ek bi seme ditu.
• Anai-arrebak (siblings): <h1>-ek hierarkia-maila bereko anaia bat du, <p> dena.

Harreman horiek ulertzeak dokumentuan zehar nabigatzea asko errazten du. Elementu bakoitzak zuhaitzaren barruan duen kokapena ezagutzen du, eta horri esker dokumentuaren egitura osoa zeharka daiteke. Antzeko adibide bat fitxategi-sistema baten egitura litzateke: fitxategi bat ausaz aukeratuta, semeak dituen ikus dezakegu (direktorio bat bada), anai-arrebak dituen (bide berean dauden beste fitxategiak) edo guraso-direktoriora igo gaitezkeen.

27.2 Nodo motak

Normalean HTML elementuekin lan egingo badugu ere, DOMak hainbat nodo mota ditu:

• Dokumentua.
• HTML elementuak.
• Iruzkinak.
• Testua.

Ondorengo adibidean elementua den <p> nodo bat da. "Bienvenido" testuak ere beste nodo bat osatzen du.

<p>Bienvenido.</p>

28.1 Elementuak hautatzea

JavaScript-ek hainbat metodo eskaintzen ditu zeregin hori egiteko, eta guztiak document objektuarenak dira.

<h1 id="titulo">Mi página</h1>

const titulo = document.getElementById("titulo");

<h1 id="titulo">Mi página</h1>
<p class="vip">Muy VIP</p>
<p>otro texto</p>

const titulo = document.querySelector("#titulo");
const vip = document.querySelector(".vip");
const p = document.querySelector("p");

const parrafos = document.querySelectorAll("p");

for (const parrafo of parrafos) {
    console.log(parrafo);
}

28.2 DOMeko elementuak zeharkatzea

Aurreko atalean DOMaren barruan elementuak aurkitzen ikasi dugu. Elementu bat aurkitu ondoren, DOM zuhaitzean zehar ere mugi gaitezke, elementuen artean dauden ahaidetasun-harremanak erabiliz. Elementu baten bidez honako hauetara sar gaitezke:

• Elementu gurasoa.
• Seme-alabak.
• Lehen seme-alaba.
• Azken seme-alaba.
• Anai-arrebak diren elementuak.

Propietate horiek bereziki erabilgarriak dira elementu batek dokumentuaren barruan duen kokapena ezagutzen dugunean eta bertatik abiatuta mugitu nahi dugunean.

Hurrengo adibideetarako, ondorengo HTMLa hartuko dugu abiapuntutzat:

<ul id="lista">
    <li id="html">HTML</li>
    <li id="css">CSS</li>
    <li id="javascript">JavaScript</li>
</ul>

const elemento = document.querySelector("#html");
console.log(elemento.parentElement);

const lista = document.getElementById("lista");
console.log(lista.firstElementChild);

const lista = document.getElementById("lista");
console.log(lista.lastElementChild);

const lista = document.getElementById("lista");
console.log(lista.children);

for (const elemento of lista.children) {
    console.log(elemento.textContent);
}

const lista = document.getElementById("lista");
const hijo = lista.firstElementChild;
console.log(hijo.nextElementSibling);

const e = document.querySelector("li:last-child");
console.log(e.previousElementSibling);

let elemento = lista.firstElementChild;

while (elemento) {
    console.log(elemento.textContent);
    elemento = elemento.nextElementSibling;
}

29.1 textContent propietatea

textContent propietateak elementu batean dagoen testu guztia lortzeko edo aldatzeko aukera ematen du. Demagun ondorengo HTMLa.

<h1 id="ti">Hola</h1>
<p id="hola">
  Ey <span>Alice</span>
</p>

const ti = document.querySelector("#ti");
console.log(ti.textContent);
ti.textContent = "JavaScript";

Ikus daitekeen bezala, elementuaren testua lortu eta alda dezakegu.

29.2 innerHTML propietatea

innerHTML-ek elementu baten HTML edukia irakurtzeko edo aldatzeko aukera ematen du. Oso erosoa da osagai bat aldatzeko eta HTML berria gehitzeko; arazoa da segurtasun-arazoak sor ditzakeela JavaScript kode maltzurra exekutatuz, sartutako kodea interpretatzen duelako.

<h1 id="ti">Hola</h1>
<p id="hola">
  Ey <span>Alice</span>
</p>
<p id="nuevo"></p>

const h = document.querySelector("#hola");
h.innerHTML = "<strong>Alice</strong>";
const n = document.querySelector("#nuevo");
n.innerHTML = `
  <h2>Noticias</h2>
  <p>bla bla</p>
`;

29.3 innerText propietatea

innerText-ek ere testuarekin lan egiten du, baina ikusgai dagoen edukia soilik hartzen du kontuan. Hau da, ezkutatutako (hidden) testua eta estilo-kodea edo <script> etiketetako kodea ez ditu kontuan hartzen. MDNren dokumentazioan adibide bat dago.

30.1 Atributuak lortu

Elementu batean set eginda dauden atributuen izenak lortu nahi baditugu, getAttributeNames() erabil dezakegu. Metodo horrek izenak dituen array bat itzuliko digu, eta, beraz, aurretik ikusitako begiztetako baten bidez zeharka dezakegu.

Atributu zehatz baten edukia lortu nahi badugu, getAttribute("nombre") erabiliko dugu.

<img src="img.png" id="foto">

<a href="https://kernel.org">
    Visitar
</a>

<input type="text">

const imagen = document.querySelector("#foto");
let nombres = imagen.getAttributeNames();

for (let n of nombres){
    console.log(n);
    imagen.getAttribute(n);
}

//acceder directamente al id
console.log(imagen.id);

Atributuak ezagutzen baditugu, zuzenean objektuaren bidez atzi ditzakegu.

30.2 Atributuak aldatu

Elementu baten atributuak alda ditzakegu edo atributu berriak sor ditzakegu setAttribute() funtzioa erabiliz.

const enlace = document.querySelector("a");
//modifica el atributo HTML
enlace.setAttribute("target","_blank");

//modifica el objeto DOM
enlace.href="https://www.google.com";

30.3 Atributu pertsonalizatuak sortu

Nahiz eta ezerk ez eragotzi nahi dugun izenarekin atributu pertsonalizatuak sortzea, jardunbide egokiek eta estandarrak adierazten digute data--rekin hasi behar dugula haien izena. Dokumentazioak adierazten digu horrela informazio hori HTMLaren eta DOMaren artean trukatuko dela.

const enlace = document.querySelector("a");

enlace.setAttribute("data-grado","DAW");
enlace.setAttribute("data-curso",2);

//obtener todos los atributos personalizados
console.log(enlace.dataset);
//acceder a un atributo personalizado concreto
console.log(enlace.dataset.grado);
console.log(enlace.dataset.curso);

Atributu horiek oso erabilgarriak dira elementu batekin lotutako informazioa gordetzeko.

30.4 Atributuak ezabatu

Sortu ditzakegun bezala, atributu zehatz bat ere ezaba dezakegu.

enlace.removeAttribute("target");

30.5 Existitzen den egiaztatu

Atributu bat existitzen den egiaztatzeko, hasAttribute() erabil dezakegu, eta balio boolear bat itzuliko digu.

console.log(enlace.hasAttribute("href"));

31.1 Klaseak gehitu

Elementu zehatz bati klase bat gehitu nahi badiogu, classList.add() erabil dezakegu.

const mensaje = document.querySelector("#mensaje");
mensaje.classList.add("destacado");

31.2 Klase bat txandakatu

classList.toggle() metodoak klasea gehitzen du elementuak ez badu, eta badu, ezabatu egiten du.

const mensaje = document.querySelector("#mensaje");
mensaje.classList.toggle("italica");

31.3 Klase bat existitzen den egiaztatu

Elementu batek klase bat duen jakiteko, classList.contains() funtzioa erabil dezakegu; funtzio horrek balio boolear bat itzultzen du.

const mensaje = document.querySelector("#mensaje");
console.log(mensaje.classList.contains("italica"));

31.4 Klase bat ordezkatu

Klase bat beste batekin aldatu nahi badugu, classList.replace() funtzioa dugu.

const mensaje = document.querySelector("#mensaje");
mensaje.classList.replace(
    "destacado", // reemplaza esta clase
    "normal"     // por esta otra
);

31.5 Hainbat klase gehitu

Hainbat klase banan-banan gehitu beharrean, classList.add() erabil dezakegu.

const mensaje = document.querySelector("#mensaje");
mensaje.classList.add(
    "rojo",
    "grande",
    "centrado"
);

31.6 className atributua

className atributuak bi funtzio ditu:

• Dauden klase guztiak itzultzen dizkigu.
• Klase guztiak aldatzeko aukera ematen digu.

const mensaje = document.querySelector("#mensaje");
// obtener todas las clases
console.log(mensaje.className);

mensaje.className = "destacado italica";