JavaScript este o scripting pseudo-obiecte orientate spre limbă, adică că nu există moștenire, deși poate fi clonarea unei clase și adăugarea mai multor metode sau proprietăți. Aproape toate browserele existente pot interpreta JavaScript, deoarece este de fapt un standard: ECMAScript (ECMA = Asociația producătorilor de calculatoare europene).
Dar numai cu limba JavaScript nu putem face nimic pe o pagină web. De asemenea, vom avea nevoie de DOM (Document Object Model). DOM este o structură de obiecte care reprezintă absolut toate elementele care alcătuiesc un site web și prin aceasta vom avea acces la informații pe site, adăugați elemente noi sau le vom modifica.
Toate aceste metode aparțin obiectelor DOM: fereastră, document și element.
FUNCTION1: GETELEMBYID ()
Utilizare: var elemento = document.getElementById(id);
Această metodă aparține obiectului de documente. Cu el vom obține obiectul care se referă la elementul cu un ID specific. De exemplu, vrem să obținem obiectul elementului „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>
Funcția 2: GetelementsByTagname ()
Utilizare: var array_elementos= elemento.getElementsByTagName(tag);
servește pentru a obține o matrice cu toate elementele cu o etichetă specifică Acestea sunt conținute în interiorul unui element. Să vedem un exemplu. Vrem să schimbăm culoarea textului tuturor elementelor cu eticheta „A” conținută în elementul cu id „Link-uri”:
<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>
Utilizare: Var String = Array.join (șir);
join() aparține obiectului de matrice (toate matricele din JavaScript sunt un obiect de matrice) și ne va ajuta să ne alăturăm toate elementele unei matrice pentru un șir de text. Este echivalentul PHP pentru a implode (). Exemplu: Vrem să ne alăturăm toate numele unei matrice prin virgule:
Funcție4: Split ()
Utilizare: Var Array = STRIN G.split (șir);
ca Alăturați-vă (), Split () este, de asemenea, o metodă de obiect Array, deși servește exact la altfel: Împărțiți un șir de text într-o matrice. Urmând cu exemplul precedent:
var juntos = "Luis, Javier, Sancho, Roberto”;var nombres = juntos.split(", ");for (var i=0; i
Trick: Utilizat Metode Putem crea o funcție pentru a înlocui un text de către altul într-o String dat:
element.Attachevent („On” + eveniment, funcția);
restul browserelor: element.addeventlistener (eveniment, funcție, falsă);
Ambele metode fac exact aceleași, numai că, ca ea se întâmplă în alte sute de ocazii, Microsoft folosește propria implementare DOM. Cu această metodă vom adăuga evenimente la orice element de pe pagina web, cum ar fi onClick, onmouseover, onmouseout etc.
hai să vedem un exemplu . Vom crea o funcție pentru abstractizarea browserului, adică să lucrați atât în IE, cât și în Firefox sau în orice alt browser; și apoi vom adăuga evenimentul onClick la mai multe elemente DIV pentru a arăta conținutul lor ERTA făcând clic pe ele.
<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>
Când facem clic pe una din DIV, o fereastră de alertă va fi afișată cu conținutul său.
Funcție6: Focus ()
Utilizare: element.focus ();
Cu această metodă vom avea focul la un element al unui formular. Exemplu:
.Creeelement (etichetă);
Cu această metodă de obiect de document am creat un element nou cu o etichetă dată. Exemplu: var div = document.createElement('DIV');
Utilizare: Element1.apppenddild (element2);
Cu această metodă vom adăuga „” A „elemento1„. În exemplul următor, vom adăuga elemente pe o listă într-un mod dinamic:
<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>
Funcție8: RemoveChild ()
Utilizare: Element .Removechild (copil);
Această metodă este utilizată pentru a elimina elementele. Elementul copil al obiectului este eliminat. Dacă vrem să ștergem un obiect specific, va trebui să o facem după cum urmează:
div>
// 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);
Funcție9: Settimeout () / SetInterval ()
Utilizare: VAR TIMER = Settimeout (funcție, milisecunde); VAR Interval = SetInterval (funcție, milisecunde);
Ambele metode (obiect de fereastră) ne servesc pentru a executa codul JavaScript fiecare câte x milisecunde, astfel încât o singură dată (settimeout) este executată sau astfel executată nelimitată (seditervală). Ambele pot fi anulate utilizând cleartimeout (cronometru) și ClearInterval (interval).Să vedem un exemplu, unde este afișat ora și data sistemului în fiecare secundă într-un div:
funcții10: Alertă () / Confirm () / Prompt ()
Utilizare: Alertă (mesaj); Var rezultat = Confirm (mesaj);
Var rezultat = Prompt (mesaj, valoare);
Cu aceste metode (obiect ferestre) Vom afișa Windows modal utilizatorului utilizatorului. Cu pur și simplu, așa cum am văzut la alte puncte, vom afișa un mesaj. Cu confirm() Vom face exact la fel, dar va forța, de asemenea, utilizatorul să aleagă între două opțiuni, un pozitiv și unul negativ, care va fi returnat ca parametru (boolean). Și cu prompt() Vom cere utilizatorului să introducă un text într-o fereastră modală. Să o vedem cu un exemplu: 16b31b3092 ” este foarte util pentru a confirma Clicuri pe legături angajate, care fac operațiuni critice ca eliminare a datelor.
<a href=”http://miweb.com/delete/record?id=123” onclick=”return confirm('¿Está seguro?');”>Eliminar registro</a>
Există mai multe metode la dispoziția noastră, deși trebuie să se țină cont de faptul că Internet Explorer nu îndeplinește ECMAScript / DOM Standard (printre alte standarde web) și o metodă nu poate funcționa egal în adică decât în Firefox sau Safari.
Învățarea Sunda este fundamentală pentru a putea deveni un profesionist bun, dar din fericire pentru noi există biblioteci JavaScript care ne vor face viața mult mai ușoară, cum ar fi JQuery, senzația programatorilor JavaScript.