JavaScript est un script pseudo-objets orienté sur la langue de script, c’est-à-dire qu’il n’y a pas de héritage, bien qu’il puisse cloner une classe et ajouter plus de méthodes ou de plus de propriétés. Presque tous les navigateurs existants peuvent interpréter JavaScript, car c’est en fait une norme: ECMAScript (ECMA = Association européenne des fabricants d’ordinateurs).
Mais seulement avec la langue javascript, nous ne pouvons rien faire sur une page Web. Nous aurons également besoin du DOM (modèle d’objet de document). DOM est une structure d’objets qui représente absolument tous les éléments qui composent un site Web et, grâce à celui-ci, nous aurons accès à des informations sur le site Web, ajoutez de nouveaux articles ou de les modifier.
Toutes ces méthodes appartiennent à des objets DOM: fenêtre, document et élément.
fonction1: getElementyid ()
Utilisation: var elemento = document.getElementById(id);
Cette méthode appartient à l’objet Document. Avec lui, nous obtiendrons l’objet qui fait référence à l’élément avec un identifiant spécifique. Par exemple, nous voulons obtenir l’objet de l’élément « status« :
Fonction 2: getelementsbytagname ()
Utilisation: var array_elementos= elemento.getElementsByTagName(tag);
var array_elementos= elemento.getElementsByTagName(tag); sert à obtenir un tableau avec tous les éléments avec une étiquette spécifique qui sont contenus à l’intérieur d’un élément. Voyons un exemple. Nous voulons changer la couleur du texte de tous les éléments avec la balise « A » contenue dans l’élément avec ID « Liens »:
<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>
fonction3: rejoindre ()
Utilisation: Var String = Array.join (String);
Le
Fonction4: Split ()
Utilisation: Var Array = SIN G.split (chaîne);
Un jointure (), Split () est également une méthode d’objet Array, bien qu’elle serve exactement à autrement: diviser une chaîne de texte en une matrice. Suivant avec l’exemple précédent:
Trick: Utilisé les deux méthodes Nous pouvons créer une fonction pour remplacer un texte par un autre dans un autre Chaîne donnée:
function str_replace(cadena, cambia_esto, por_esto) { return cadena.split(cambia_esto).join(por_esto);}alert(str_replace('Hola mundo!','mundo','world'));
fonction5: Addeventlistener () / Attachevent ()
Utilisation: Internet Explorer: Element.attachevent (« ON » + événement, fonction);
Reste de navigateurs: element.addeventlistener (événement, fonction, false);
Reste de navigateurs: element.addeventlistener (événement, fonction, false);
Les deux méthodes font exactement la même chose, que ce soit Se passe dans d’autres centaines d’occasions, Microsoft utilise sa propre implémentation DOM. Avec cette méthode, nous ajouterons des événements à n’importe quel article de la page Web, tels que Onclick, Onmouseover, Onmouseout, etc.
Voir un exemple . Nous allons créer une fonction pour l’abstraction du navigateur, c’est-à-dire de travailler à la fois dans IE et Firefox ou tout autre navigateur; et nous ajouterons ensuite l’événement OnClick à plusieurs éléments div pour montrer leur contenu par ERTA en cliquant dessus.
<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>
Lorsque nous cliquons sur l’une des divisions, une fenêtre d’alerte s’affiche avec son contenu.
Fonction6: Focus ()
Utilisation: Element.focus ();
Avec cette méthode, nous mettrons l’accent sur un élément d’une forme. Exemple:
Fonction7: CreeEnment () / APPENDCORD ()
Utilisation: Var element = Document .Creeeeelement (tag);
avec cette méthode d’objet de document, nous créerions un nouvel élément avec une balise donnée. Exemple: var div = document.createElement('DIV');
Utilisation: element1.appendendChild (Element2);
avec cette méthode, nous ajouterons « » A « elemento1« . Dans l’exemple suivant, nous ajouterons des éléments à une liste de manière dynamique:
fonction8: Removechild ()
Utilisation: élément .Removechild (enfant);
Cette méthode est utilisée pour éliminer les éléments. L’élément enfant de l’objet est éliminé. Si nous voulons supprimer un objet spécifique, nous devrons le faire comme suit:
Fonction9: Settimeout () / Seinterval ()
Utilisation: Var Timer = SettimeOut (fonction, millisecondes); Var Intervalle = setInval (fonction, millisecondes);
Les deux méthodes (objet de fenêtre) nous servent à exécuter le code JavaScript chaque x millisecondes, bien de sorte que l’exécution d’une seule fois (Settimeout) soit exécutée ou de manière illimitée (StitiTerval). Les deux peuvent être annulés à l’aide de Cleartimeout (Minuterie) et de ClearInterval (intervalle).Voyons un exemple, où l’heure et la date du système sont affichées chaque seconde dans un div:
<div id=”fecha”></div><script type=”text/javascript”> setInterval(function(){ document.getElementById("fecha”).innerHTML = new Date(); },1000);</script>
fonction 10: alerte () / Confirmer () / Invite ()
Utilisation: ALERT (message); Var Résultat = Confirmer (Message);
Résultat Var = Invite (message, valeur);
avec ces méthodes (objet de fenêtre), nous afficherons des fenêtres modales à l’utilisateur. Avec Tout simplement, comme nous l’avons vu à d’autres points, nous montrerons un message. Avec confirm() Nous ferons exactement la même chose, mais il obligera également l’utilisateur à sélectionner entre deux options, un point positif et un négatif, qui sera renvoyé comme paramètre (booléen). Et avec prompt() Nous demanderons à l’utilisateur de saisir un texte dans une fenêtre modale. Voyons-le avec un exemple:
confirm() est très utile pour confirmer clique sur des liens engagés, qui effectuent des opérations critiques comme élimination des données.
<a href=”http://miweb.com/delete/record?id=123” onclick=”return confirm('¿Está seguro?');”>Eliminar registro</a>
Il existe de nombreuses autres méthodes à notre disposition, bien que cela ne soit à l’esprit que l’Internet Explorer ne respecte pas la carte ECMAScript / DOM Standard (parmi les autres normes Web) et une méthode ne peut pas fonctionner égale à IE que dans Firefox ou Safari.
Apprendre le Sunda est fondamental pour pouvoir devenir un bon professionnel, mais heureusement pour nous, il existe des bibliothèques JavaScript qui faciliteront notre vie beaucoup plus facilement, comme JQuery, la sensation des programmeurs JavaScript.