Javascript és un llenguatge de scripting interpretat orientat a pseudo-objectes, és a dir, que no hi ha herència, encara que es pot aconseguir clonant una classe i afegint més mètodes o propietats. Gairebé tots els navegadors existents poden interpretar Javascript, ja que és de fet un estàndard: ECMAScript (ECMA = European Computer Manufacturers Association).
Però només amb el llenguatge JavaScript no podrem fer res en una pàgina web. També necessitarem el DOM (Document Object Model). El DOM és una estructura d’objectes que representa absolutament tots els elements que componen un web, i mitjançant ell aconseguirem accedir a informació de la pàgina web, afegir nous elements, o modificar-los.
Tots aquests mètodes pertanyen a objectes de DOM: window, document, i element.
Función1: getElementById ()
Ús: var elemento = document.getElementById(id);
Aquest mètode pertany a l’objecte document. Amb ell obtindrem l’objecte que fa referència a l’element amb un id concret. Per exemple, volem obtenir l’objecte de l’element “status“:
<div> <span id=”status”>Hola mundo...</span></div><script type=”text/javascript”>// Obtenemos el elemento "status”var el = document.getElementById("status”);// Mostramos mediante una alerta el contenido del elementoalert(el.innerHTML);</script>
funció 2: getElementsByTagName ()
Ús: var array_elementos= elemento.getElementsByTagName(tag);
Serveix per obtenir un array amb tots els elements amb un tag concret que estan continguts dins d’un element. Vegem-ne una exemple. Volem canviar el color de el text de tots els elements amb tag “A” continguts dins de l’element amb id “links”:
<a href=”/”>Home</a><div id=”links”> <a href=”http://google.com”>Google</a> <a href=”http://ubuntu.com”>Ubuntu</a> <a href=”http://debian.org”>Debian</a></div><script type=”text/javascript”>// Obtenemos el elemento con id "links”var el = document.getElementById("links”);// Ahora obtenemos todos los elementos con tag A que hay// dentro del elemento 'el'var as = el.getElementsByTagName("A”);// Y finalmente recorremos el array de elementos para// cambiarles el color a cada unofor (var i=0; i<as.length; i++) { as.style.color = '#000'; // negro}</script>
Función3: join ()
Ús: var string = array.join (string);
El mètode join() pertany a l’objecte Array (tots els arrays en JavaScript són un objecte Array), i ens servirà per unir tots els elements d’un array per forma una cadena de text. És l’equivalent en PHP a implode (). Exemple : Volem unir tots els noms d’un array mitjançant comes:
// Creamos el array de nombresvar nombres = ;// Unimos todos los elementos separándolos por comasvar juntos = nombres.join(", ");// Y lo mostramosalert(juntos);
Función4: split ()
ús: var array = strin g.split (string);
A l’igual que join (), split () també és un mètode de l’objecte Array, encara que serveix exactament pel contrari: dividir una cadena de text en un array. Seguint amb l’exemple anterior:
var juntos = "Luis, Javier, Sancho, Roberto”;var nombres = juntos.split(", ");for (var i=0; i
Truc: Usats tots dos mètodes conjuntament podrem crear una funció per substituir un text per un altre en una cadena donada:
function str_replace(cadena, cambia_esto, por_esto) { return cadena.split(cambia_esto).join(por_esto);}alert(str_replace('Hola mundo!','mundo','world'));
Función5: addEventListener () / attachEvent ()
Ús: Internet Explorer: elemento.attachEvent ( “on” + esdeveniment, funcio);
Resta de navegadors: elemento.addEventListener (esdeveniment, funció, false);
Els dos mètodes fan exactament el mateix, només que, com passa en altres centenars d’ocasions, Microsoft usa la seva pròpia implementació de DOM. Amb aquest mètode afegirem esdeveniments a qualsevol element de la pàgina web, tal com onclick, onMouseOver, onmouseout, etc.
Vegem un exemple. Crearem una funció per a l’abstracció de navegadors, és a dir, perquè funcioni en IE com a Firefox o qualsevol altre navegador, i després afegirem l’esdeveniment onclick a diversos elements DIV perquè mostri el seu contingut mitjançant una a l’ erta a l’fer clic sobre ells.
<div id=”frases”> <div>Hola mundo!</div> <div>Foo bar</div> <div>Lorem Ipsum</div></div><script type=”text/javascript”>// Creamos la funcion para añadir eventosfunction nuevo_evento(elemento, evento, funcion) { if (elemento.addEventListener) { elemento.addEventListener(evento, function, false); } else { elemento.attachEvent("on”+evento, function); }}// Obtenemos los elementos DIV a los que queremos añadir nuestro evento onclickvar divs = document.getElementById("frases”).getElementsByTagName("DIV”);// Recorremos todos los divsfor (var i=0; i<divs.length; i++) { // Añadimos el evento onclick al div nuevo_evento(divs, "click”, function(){ // Hacemos que muestre el contenido del DIV alert(this.innerHTML); });}</script>
Quan fem clic en un dels DIV, se’ns mostrarà una finestra d’alerta amb el seu contingut.
Función6: focus ()
Ús: elemento.focus ();
Amb aquest mètode aconseguirem passar el focus a un element d’un formulari. Exemple:
form> <input type=”text” id=”nombre” value=”Javier” /> <input type=”text” id=”apellidos” value=”Perez” /></form><a href=”#” onclick=”document.getElementById("nombre”).focus()”>Nombre</a><a href=”#” onclick=”document.getElementById("apellidos”).focus()”>Apellidos</a>
Función7: createElement () / appendChild ()
Ús: var element = document .createElement (tag);
amb aquest mètode de l’objecte document crearíem un nou element amb un tag determinat. Exemple: var div = document.createElement('DIV');
Ús: elemento1.appendChild (element2);
Amb aquest mètode afegirem l’element “elemento2” a “elemento1“. En el següent exemple, afegirem elements a una llista de forma dinàmica:
<input type=”text” id=”texto” /><input type=”button” value=”Crear” onclick=”crear()” /><ul id=”lista”></ul><script type=”text/javascript”>function crear() { // Obtenemos el valor entrado en la caja de texto var valor = document.getElementById("texto”).value; // Creamos un nuevo elemento LI var li = document.createElement("LI”); // Añadimos el valor introducido al nuevo elemento li.innerHTML = valor; // Añadimos el elemento LI a la lista UL var ul = document.getElementById("UL”); ul.appendChild(li); // Vaciamos la caja de texto document.getElementById("texto”).value = "”;}</script>
Función8: removeChild ()
Ús: elemento.removeChild (fill);
Aquest mètode és l’usat per eliminar elements. S’elimina l’element fill de l’objecte. Si volem eliminar un objecte concret, haurem de fer-ho de la següent manera:
// Obtenemos el elementovar el = document.getElementById("elemento-a-eliminar”);// Obtenemos el padre de dicho elemento// con la propiedad "parentNode”var padre = el.parentNode;// Eliminamos el hijo (el) del elemento padrepadre.removeChild(el);
Función9: setTimeout () / setInterval ()
Ús: var temporitzador = setTimeout (funció, mil·lisegons);
var interval = setInterval (funció, mil·lisegons);
Els dos mètodes (objecte finestra) ens serveixen per a executar codi javascript cada x milisegons, bé perquè s’executi una sola vegada (setTimeout) o bé perquè s’executi il·limitadament (setInterval). Tots dos es poden cancel·lar mitjançant clearTimeout (temporitzador) i clearInterval (interval).Vegem un exemple, on es mostra l’hora i data de sistema cada segon en un DIV:
<div id=”fecha”></div><script type=”text/javascript”> setInterval(function(){ document.getElementById("fecha”).innerHTML = new Date(); },1000);</script>
Función10: alert () / confirm () / prompt ()
Ús: alert (missatge);
var resultat = confirm (missatge);
var resultat = prompt (missatge, valor);
Amb aquests mètodes (objecte finestra) mostrarem finestres modals a l’usuari. Amb alert() simplement, com hem vist en altres punts, mostrarem un missatge. Amb confirm() farem exactament el mateix, però a més obligarà a l’usuari a seleccionar entre dues opcions, una positiva i una altra negativa, que es retornarà com a paràmetre (boolean). I amb prompt() demanarem a l’usuari que introdueixi un text en una finestra modal. Vegem-ho amb un exemple:
// Pedimos al usuario que introduzca su nombrevar nombre = prompt("Introduzca su nombre”);// Pedimos confirmaciónif (confirm("¿Seguro que su nombre es ”+nombre+”?”)) { // Respuesta afirmativa... alert("Hola ”+nombre);}
confirm() és molt útil per confirmar clics a enllaços compromesos, que facin operacions crítiques com eliminació de dades.
<a href=”http://miweb.com/delete/record?id=123” onclick=”return confirm('¿Está seguro?');”>Eliminar registro</a>
Hi ha molts més mètodes a la nostra disposició, encara que cal tenir en compte que Internet Explorer no compleix l’estàndard ECMAScript / DOM (entre d’altres tants estàndards web), i pot ser que un mètode no funcioni igual en IE que al Firefox o Safari.
Aprendre DOM és fonamental per poder arribar a ser un bon professional, però per sort per a nosaltres hi ha llibreries Javascript que ens faran la vida molt més fàcil, com jQuery, la sensació de moment entre els programadors Javascript.