JavaScript è uno scripting Pseudo-Objects orientato al linguaggio di scripting, cioè che non vi è eredità, sebbene si tratti di clonazione di una classe e aggiungendo più metodi o proprietà. Quasi tutti i browser esistenti possono interpretare JavaScript, poiché è in realtà uno standard: ECMASCRICT (ECMA = Associazione europea dei produttori di computer).
Ma solo con il linguaggio JavaScript non possiamo fare nulla su una pagina Web. Avremo anche bisogno del DOM (Document Object Model). Dom è una struttura di oggetti che rappresentano assolutamente tutti gli elementi che costituiscono un sito Web e attraverso di esso riceveremo accesso alle informazioni sul sito web, aggiungere nuovi articoli o modificarli.
Tutti questi metodi appartengono agli oggetti DOM: finestra, documento e elemento.
Funzione1: GetElementByID ()
Utilizzo: var elemento = document.getElementById(id);
Questo metodo appartiene all’oggetto documento. Con lui otterremo l’oggetto che si riferisce all’elemento con un ID specifico. Ad esempio, vogliamo ottenere l’oggetto dell’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>
Funzione 2: getelementsbytagname ()
Utilizzo: var array_elementos= elemento.getElementsByTagName(tag);
serve per ottenere un array con tutti gli elementi con un tag specifico con un tag specifico che sono contenuti all’interno di un elemento. Vediamo un esempio. Vogliamo cambiare il colore del testo di tutti gli elementi con tag “A” contenuto all’interno dell’oggetto con ID “Links”:
Funzione3: Iscriviti ()
Usage: var string = array.join (stringa);
il appartiene all’oggetto Array (tutti gli array in JavaScript sono un oggetto array), e ci aiuterà a unirci a tutti gli elementi di un array per una stringa di testo. È l’equivalente di PHP da implodere () Esempio: vogliamo aderire a tutti i nomi di un array di virgole:
// Creamos el array de nombresvar nombres = ;// Unimos todos los elementos separándolos por comasvar juntos = nombres.join(", ");// Y lo mostramosalert(juntos);
Funzione4: Split ()
Usa: var array = strin G.SPLIT (stringa);
come join (), split () è anche un metodo oggetto di array, anche se serve esattamente al contrario: dividere una stringa di testo in un array. Seguendo con l’esempio precedente:
var juntos = "Luis, Javier, Sancho, Roberto”;var nombres = juntos.split(", ");for (var i=0; i
trucco: usato entrambi i metodi che possiamo creare una funzione per sostituire un testo da un altro in A Dato String:
function str_replace(cadena, cambia_esto, por_esto) { return cadena.split(cambia_esto).join(por_esto);}alert(str_replace('Hola mundo!','mundo','world'));
Funzione5: AddentListener () / Attachevent ()
Uso: Internet Explorer: elemento.attachevent (“on” + evento, funzione);
resto dei browser: elemento.addeventlantener (evento, funzione, falso);
Entrambi i metodi fanno esattamente lo stesso, solo quello, come succede in altre centinaia di occasioni, Microsoft utilizza la propria implementazione DOM. Con questo metodo aggiungeremo eventi a qualsiasi elemento sulla pagina web, come onclick, onmouseover, onmouseout, ecc.
Vediamo un esempio . Creeremo una funzione per l’astrazione del browser, cioè lavorare sia in IE che in Firefox o da qualsiasi altro browser; e quindi aggiungeremo l’evento onClick a diversi elementi div per mostrare il loro contenuto ERTA cliccando su di loro.
<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>
Quando faremo clic su uno dei div, verrà visualizzata una finestra di avviso con il suo contenuto.
Funzione6: Focus ()
Uso: elemento.focus ();
Con questo metodo otterremo l’attenzione su un elemento di un modulo. Esempio:
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>
Funzione7: Createelement () / appendchild ()
Usage: var element = Document .Createelement (tag);
Con questo metodo oggetto documento creeremmo un nuovo elemento con un determinato tag. Esempio: var div = document.createElement('DIV');
Utilizzo: elemento1.appendchild (element2);
Con questo metodo aggiungeremo il “” A “elemento1“. Nell’esempio seguente, aggiungeremo articoli a un elenco in modo dinamico:
<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>
funzioni8: removechild ()
Uso: elemento .removechild (Bambino);
Questo metodo viene utilizzato per rimuovere gli elementi. L’elemento figlio dell’oggetto viene eliminato. Se vogliamo eliminare un oggetto specifico, dovremo farlo come segue:
// 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);
Funzione9: SettimeOut () / Setinterval ()
utilizzo: var timer = settentimeout (funzione, milliseconds); var interval = setinterval (funzione, milliseconds);
Entrambi i metodi (Object Object) servono a eseguire il codice JavaScript ciascuno x millisecondi, bene in modo che sia eseguita un solo tempo (settimeout) o in modo che sia eseguito illimitato (setiterval). Entrambi possono essere cancellati utilizzando ClearTimeout (Timer) e Clearinterval (intervallo).Vediamo un esempio, dove viene visualizzato il tempo e la data del sistema ogni secondo in un div:
<div id=”fecha”></div><script type=”text/javascript”> setInterval(function(){ document.getElementById("fecha”).innerHTML = new Date(); },1000);</script>
funzione10: Alert () / Conferma () / Prompt ()
Uso: Alert (Messaggio); Var Risultato = Conferma (messaggio);
Var Risultato = Prompt (messaggio, valore);
Con questi metodi (oggetto finestra) mostreremo finestre modale all’utente. Con Semplicemente, come abbiamo visto in altri punti, mostreremo un messaggio. Con confirm() faremo esattamente lo stesso, ma forzeremo anche all’utente di selezionare tra due opzioni, un positivo e uno negativo, che verrà restituito come parametro (booleano). E con prompt() Chiederemo all’utente di inserire un testo in una finestra modale. Vediamo con un esempio:
// 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() è molto utile per confermare Clic su collegamenti commessi, che fanno operazioni critiche come smaltimento dei dati.
<a href=”http://miweb.com/delete/record?id=123” onclick=”return confirm('¿Está seguro?');”>Eliminar registro</a>
Ci sono molti altri metodi a nostra disposizione, anche se deve essere tenuto presente che Internet Explorer non soddisfa l’ECMASCICT / DOM STANDARD (tra gli altri standard Web), e un metodo potrebbe non funzionare uguale in cioè rispetto a Firefox o Safari.
Learning the Sunda è fondamentale per essere in grado di diventare un buon professionista, ma per fortuna per noi ci sono librerie JavaScript che renderà le nostre vite molto più facili, come jQuery, la sensazione dei programmatori JavaScript.