JavaScript é un script de scription de pseudo-obxectos orientados á linguaxe de scripting, é dicir, que non hai herdanza, aínda que pode estar clonando unha clase e engadindo máis métodos ou propiedades. Case todos os navegadores existentes poden interpretar a JavaScript, xa que é de feito un estándar: ECMAScript (ECMA = Asociación Europea de Fabricantes de Informática).
Pero só coa linguaxe JavaScript non podemos facer nada nunha páxina web. Tamén necesitaremos o DOM (modelo de obxecto de documento). DOM é unha estrutura de obxectos que representa absolutamente todos os elementos que compoñen un sitio web, e a través diso teremos acceso a información no sitio web, engadiremos novos elementos ou modificándoos.
Todos estes métodos pertencen a Obxectos DOM: fiestra, documento e elemento.
función1: getelementbyid ()
Uso: var elemento = document.getElementById(id);
Este método pertence ao obxecto do documento. Con el obteremos o obxecto que se refire ao elemento cunha identificación específica. Por exemplo, queremos obter o obxecto do elemento “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ón 2: GetElementsBytagname ()
Uso: var array_elementos= elemento.getElementsByTagName(tag);
serve para obter unha matriz con todos os elementos cunha etiqueta específica que están contidos dentro dun elemento. Vexamos un exemplo. Queremos cambiar a cor do texto de todos os elementos coa etiqueta “A” contido dentro do elemento con ID “Ligazóns”:
función3: Únete ()
Uso: var string = array.join (string);
o pertence ao obxecto de matriz (todas as matrices de JavaScript son un obxecto de matriz) e axudaranos a unirse a todos os elementos dunha matriz para unha cadea de texto. É o equivalente a PHP para implodificar (). Exemplo: Queremos unir todos os nomes dunha matriz por comas:
// Creamos el array de nombresvar nombres = ;// Unimos todos los elementos separándolos por comasvar juntos = nombres.join(", ");// Y lo mostramosalert(juntos);
Función4: Split ()
Uso: var array = Strin G.SPLIT (cadea);
Como unirse (), Split () tamén é un método de obxecto de matriz, aínda que serve exactamente a outra cousa: dividir unha cadea de texto nunha matriz. Seguindo co exemplo anterior:
var juntos = "Luis, Javier, Sancho, Roberto”;var nombres = juntos.split(", ");for (var i=0; i
truco: usado ambos métodos que podemos crear unha función para substituír un texto por outro en Cadea dada:
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 () / anexo ()
Uso: Internet Explorer: elemento.attachevent (“On” + evento, función);
Resto de navegadores: elemento.addeventlistener (evento, función, falso);
ambos métodos fan exactamente o mesmo, só iso, como el ocorre noutras centos de ocasións, Microsoft usa a súa propia implementación de DOM. Con este método imos engadir eventos a calquera elemento da páxina web, como OnClick, OnMouseOver, OnMouseOut, etc.
Vexamos un exemplo . Crearemos unha función para a abstracción do navegador, é dicir, traballar tanto en IE como en Firefox ou calquera outro navegador; e entón imos engadir o evento onclick a varios elementos div Erta premendo sobre eles.
<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>
Cando faga clic nunha das DIV, mostrarase unha xanela de alerta co seu contido.
función6: foco ()
Uso: elemento.focus ();
Con este método imos obter o foco nun elemento dun formulario. Exemplo:
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: Creatreelement () / AppENDChIld ()
Uso: var elemento = documento .Createlement (tag);
Con este método de obxecto de documento, crearíamos un novo elemento cunha etiqueta dada. Exemplo: var div = document.createElement('DIV');
Uso: elemento1.apppendchild (elemento2);
Con este método imos engadir o “” a “elemento1“. No seguinte exemplo, imos engadir elementos a unha lista 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: eliminhild ()
Uso: elemento .Removechild (neno);
Este método úsase para eliminar elementos. Elimina o elemento fillo do obxecto. Se queremos eliminar un obxecto específico, teremos que facelo do seguinte xeito:
// 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: define () / Setinterval ()
Uso: var timer = defineout (función, milisegundos); var intervalo = setinterval (función, milisegundos);
Ambos métodos (obxecto da xanela) serven para executar o código de JavaScript cada x milisegundos, así que se execute un só tempo (establecemento)) ou para que sexa executado ilimitado (SETITERVAL). Ambos poden ser cancelados usando ClearTimeut (temporizador) e borlasterval (intervalo).Vexamos un exemplo, onde a hora e a data do sistema móstrase cada segundo nunha div:
<div id=”fecha”></div><script type=”text/javascript”> setInterval(function(){ document.getElementById("fecha”).innerHTML = new Date(); },1000);</script>
Función10: alerta () / confirmar () / Preguntar ()
Use: alerta (mensaxe); var resultado = confirmar (mensaxe);
Var resultado = Pregunta (mensaxe, valor);
Con estes métodos (Window Object) mostraremos fiestras modais para o usuario. Con simplemente, como vimos noutros puntos, mostraremos unha mensaxe. Con confirm() faremos exactamente o mesmo, pero tamén forzaremos ao usuario a seleccionar entre dúas opcións, un positivo e un negativo, que será devolto como parámetro (booleano). E con prompt() pediremos ao usuario que introduza un texto nunha xanela modal. Vexámolo cun exemplo:
// 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() é moi útil para confirmar Fai clic en enlaces comprometidos, que fan as operacións críticas como a eliminación de datos.
<a href=”http://miweb.com/delete/record?id=123” onclick=”return confirm('¿Está seguro?');”>Eliminar registro</a>
Hai moitos máis métodos á nosa disposición, aínda que hai que ter en conta que Internet Explorer non cumpre co ecmascript / DOM estándar (entre outros estándares web), e un método pode non funcionar igual en IE que en Firefox ou Safari.
Aprender a Sunda é fundamental para ser capaz de ser un bo profesional, pero por sorte para nós hai bibliotecas de JavaScript que farán que as nosas vidas sexan moito máis fáciles, como JQuery, a sensación dos programadores de JavaScript.