This page has been robot translated, sorry for typos if any. Original content here.

Utilisation de scripts Java

JavaScript est un langage de programmation de script orienté prototype. C'est un dialecte d'ECMAScript.

JavaScript est généralement utilisé comme langage incorporable pour accéder par programme aux objets de l'application. Le plus utilisé dans les navigateurs comme langage de script pour rendre les pages Web interactives. Les principales caractéristiques architecturales: typage dynamique, typage faible, gestion automatique de la mémoire, programmation de prototypes, fonctionnent comme des objets de première classe. JavaScript a été influencé par de nombreux langages. Son développement visait à rendre le langage similaire à Java, mais facile à utiliser par les non-programmeurs. JavaScript ne possède aucune société ou organisation, ce qui le distingue d'un certain nombre de langages de programmation utilisés dans le développement Web. Le nom «JavaScript» est une marque déposée d' Oracle Corporation .

Top 10 des fonctionnalités JavaScript

Les frameworks JavaScript modernes, bien sûr, sont capables de remplir toutes ces fonctions. Mais parfois, vous devez faire quelque chose sans cadre. Pour diverses raisons. À cette fin, cette collection de fonctions utiles est destinée.

10) addEvent ()

Sans aucun doute, l'outil le plus important dans la gestion des événements! Quelle que soit la version que vous utilisez et par qui il est écrit, il fait ce qui est écrit dans son nom: il attache un gestionnaire d'événements à l'élément.

  fonction addEvent (elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.addEventListener (evType, fn, false);
	 }
	 else if (elem.attachEvent) {
		 elem.attachEvent ('on' + evType, fn)
	 }
	 sinon {
		 elem ['on' + evType] = fn
	 }
 }

Ce code présente deux avantages: il est simple et inter-navigateur.

Son principal inconvénient est qu'il ne le transmet pas au gestionnaire pour IE. Plus précisément, cela n'attache pas Event.

Solution de contournement simple pour cela

Pour passer cela correctement, vous pouvez remplacer la chaîne addEvent correspondante par:

elem.attachEvent("on"+evType, function() { fn.apply(elem) })

Cela résoudra le problème du transfert de cette information, mais le gestionnaire ne peut pas être supprimé, car detachEvent doit appeler exactement la fonction qui a été transmise à attachEvent.

Il existe deux façons de contourner ce problème:

1) Retourne la fonction utilisée pour assigner le gestionnaire:

  fonction addEvent (elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.addEventListener (evType, fn, false)
  retourne fn
	 }

  iefn = function () {fn.call (elem)} 
  elem.attachEvent ('on' + evType, iefn)
	 retourner iefn
 }

 fonction removeEvent (elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.removeEventListener (evType, fn, false)
  retour
	 }
 
  elem.detachEvent ('on' + evType, fn)
 } 

Utilisé comme suit:

  gestionnaire de fonctions () { 
  alerte (ceci) 
 }
 var fn = addEvent (elem, "click", gestionnaire)
 ...
 removeEvent (elem, "click", fn) 

2) Vous ne pouvez pas utiliser ceci du tout dans le gestionnaire d'événements, mais passez l'élément à travers une fermeture:

  fonction addEvent (elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.addEventListener (evType, fn, false)
  retourne fn
	 }

  iefn = function () {fn.call (elem)} 
  elem.attachEvent ('on' + evType, iefn)
	 retourner iefn
 }

 fonction removeEvent (elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.removeEventListener (evType, fn, false)
  retour
	 }
 
  elem.detachEvent ('on' + evType, fn)
 } 

Utilisé comme suit:

  gestionnaire de fonctions () { 
  // n'utilise pas ceci, mais une variable faisant référence à l'élément
  alerte (elem) 
 }
 ...

9) onReady ()

Pour l’initialisation de la page, l’événement window.onload a été utilisé de manière historique, ce qui est déclenché après le chargement complet de la page: objets, compteurs, images, etc.

L'événement onDOMContentLoaded est un bien meilleur choix dans 99% des cas. Cet événement est déclenché dès que le document DOM est prêt, avant le chargement d'images et d'autres objets n'affectant pas la structure du document.

C'est très pratique, car les images peuvent être chargées pendant longtemps et le gestionnaire onDOMContentLoaded peut apporter les modifications nécessaires à la page et initialiser les interfaces à cet endroit sans attendre le chargement complet.

Pour ajouter un gestionnaire, vous pouvez utiliser le code inter-navigateurs suivant:

  fonction bindReady (gestionnaire) {

	 var appelé = false

	 fonction prête () {// (1)
		 si (appelé) retour
		 appelé = vrai
		 gestionnaire ()
	 }

	 if (document.addEventListener) {// (2)
		 document.addEventListener ("DOMContentLoaded", function () {
			 prêt ()
		 }, faux)
	 } else if (document.attachEvent) {// (3)

		 // (3.1)
		 if (document.documentElement.doScroll && window == window.top) {
			 fonction tryScroll () {
				 si (appelé) retour
				 if (! document.body) retour
				 essayer {
					 document.documentElement.doScroll ("left")
					 prêt ()
				 } catch (e) {
					 setTimeout (tryScroll, 0)
				 }
			 }
			 tryScroll ()
		 }

		 // (3.2)
		 document.attachEvent ("onreadystatechange", function () {

			 if (document.readyState === "complet") {
				 prêt ()
			 }
		 })
	 }

	 // (4)
  if (window.addEventListener)
  window.addEventListener ('load', ready, false)
  sinon si (window.attachEvent)
  window.attachEvent ('onload', prêt)
  / * else // (4.1)
  window.onload = prêt
	 * /
 } 
 readyList = []
 function onReady (gestionnaire) {
	 si (! readyList.length) {
		 bindReady (function () {
			 pour (var i = 0; i <readyList.length; i ++) {
				 readyList [i] ()
			 }
		 })
	 }
	 readyList.push (gestionnaire)
 }

Utiliser:

 onReady (function () {
  // ...
 })

8) getElementsByClass ()

Initialement pas écrit par quelqu'un spécifiquement. De nombreux développeurs ont écrit leurs propres versions et le tirage au sort n’a pas été meilleur que le reste.

La fonction suivante utilise la méthode getElementsByClass intégrée, si elle existe, et recherche des éléments indépendamment dans les navigateurs où cette méthode n'est pas présente.

  if (document.getElementsByClassName) {
 getElementsByClass = fonction (classList, noeud) { 
 return (noeud || document) .getElementsByClassName (classList)
 }
 } else {
 getElementsByClass = fonction (classList, noeud) {
 var noeud = noeud ||  document,
 list = node.getElementsByTagName ('*'), 
 longueur = liste.longueur, 
 classArray = classList.split (/ \ s + /), 
 classes = classArray.length, 
 résultat = [], i, j
 pour (i = 0; i <longueur; i ++) {
 pour (j = 0; j <classes; j ++) {
				 if (list [i] .className.search ('\\ b' + classArray [j] + '\\ b')! = -1) {
					 result.push (list [i])
					 pause
				 }
			 }
		 }
	
		 résultat retourné
	 }
 }

classList - Liste de classes, séparées par des espaces, permettant de rechercher des éléments.

noeud - contexte de recherche, dans quel noeud chercher

Par exemple:

  var div = document.getElementById ("mydiv")
 éléments = getElementsByClass ('class1 class2', div) 

7) addClass () / removeClass ()

Les deux fonctions suivantes ajoutent et suppriment la classe DOM d'un élément.

  fonction addClass (o, c) {
  var re = new RegExp ("(^ | \\ s)" + c + "(\\ s | $)", "g")
  if (re.test (o.className)) renvoie
  o.className = (o.className + "" + c) .remplacer (/ \ s + / g, "") .remplacer (/ (^ | $) / g, "")
 }
 
 fonction removeClass (o, c) {
  var re = new RegExp ("(^ | \\ s)" + c + "(\\ s | $)", "g")
  o.className = o.className.replace (re, "$ 1"). remplace (/ \ s + / g, "") .replace (/ (^ | $) / g, "")
 } 

6) bascule ()

Pour être honnête, il existe probablement plus d'options différentes pour cette fonctionnalité que ce qui serait nécessaire.

Cette option ne prétend en aucun cas être la fonction universelle du "commutateur", mais il exécute la fonctionnalité de base d'affichage et de masquage.


fonction toggle (), mots folkloriques

  fonction bascule (el) {
  el.style.display = (el.style.display == 'aucun')?  '': 'aucun'
 }

Veuillez noter qu'il n'y a pas de mot à propos de display = 'block' dans la fonction, mais que la valeur vide est display = '' . Une valeur vide signifie réinitialiser la propriété, c.-à-d. la propriété retourne à la valeur spécifiée dans le CSS.

Ainsi, si la valeur d'affichage de cet élément extraite de CSS est nulle (l'élément est masqué par défaut), cette fonction de basculement ne fonctionnera pas.

Cette version de la fonction de basculement est belle et simple, mais ceci et d'autres inconvénients ne la rendent pas assez universelle.

5) insertAfter ()

Comme pour getElementsByClass , pour une raison quelconque, cette fonction n’est pas dans le standard DOM. Il est possible d’éviter la duplication des fonctionnalités, car insertAfter est implémenté sur une seule ligne.

  fonction insertAfter (parent, node, referenceNode) {
  parent.insertBefore (node, referenceNode.nextSibling);
 }

4) inArray ()

Il est regrettable que cela ne fasse pas partie des fonctionnalités intégrées du DOM. Mais nous avons maintenant la possibilité d'insérer de tels commentaires tout le temps!

Pour la recherche, cette fonction utilise la vérification === , qui recherche par comparaison exacte, sans conversion de type.

La méthode Array.prototype.indexOf n'est pas prise en charge par tous les navigateurs. Elle est donc utilisée si elle existe.

  inArray = Array.prototype.indexOf?
  fonction (arr, val) {
  retour arr.indexOf (val)! = -1
  }:
  fonction (arr, val) {
  var i = arr.length
  tandis que (i--) {
  if (arr [i] === val) renvoie true
  }
  retourne faux
  }

3, 2 et 1) getCookie (), setCookie (), deleteCookie ()

En javascript, il n'est pas possible de travailler avec des cookies sans fonctionnalités supplémentaires. Je ne sais pas qui a conçu document.cookie , mais cela a été fait très mal.

Par conséquent, les fonctions suivantes ou leurs analogues sont simplement nécessaires.

  // retourne un cookie s'il est ou non défini
 fonction getCookie (nom) {
	 var matches = document.cookie.match (new RegExp (
	  "(?: ^ |;)" + name.replace (/(\\\.$?* | {} \ (\) \ [\] \\\ / \ + ^]) / g, '\\ $ 1' ) + "= ([^;] *)"
	 ))
	 retourner les matchs?  decodeURIComponent (correspond à [1]): non défini 
 }

 // définit le cookie
 fonction setCookie (nom, valeur, accessoires) {
	 props = props ||  {}
	 var exp = props.expires
	 if (typeof exp == "numéro" && exp) {
		 var d = nouvelle date ()
		 d.setTime (d.getTime () + exp * 1000)
		 exp = props.expires = d
	 }
	 if (exp && exp.toUTCString) {props.expires = exp.toUTCString ()}

	 valeur = encodeURIComponent (valeur)
	 var updatedCookie = name + "=" + value
	 pour (var propName dans les accessoires) {
		 updatedCookie + = ";" + propName
		 var propValue = props [propName]
		 if (propValue! == true) {updatedCookie + = "=" + propValue}
	 }
	 document.cookie = updatedCookie

 }

 // supprimer le cookie
 fonction deleteCookie (nom) {
	 setCookie (name, null, {expires: -1})
 }

Arguments:

  • nom cookie nom
  • valeur valeur cookie (chaîne)
  • props Objet avec des propriétés supplémentaires pour configurer les cookies:
    • expire l' heure d'expiration du cookie . Il est interprété différemment selon le type:
      • Si le nombre est le nombre de secondes avant l'expiration.
      • Si un objet de type Date est la date d'expiration exacte.
      • Si expire est dans le passé, le cookie sera supprimé.
      • Si expire est manquant ou égal à 0, le cookie sera défini comme une session et disparaîtra à la fermeture du navigateur.
    • chemin Le chemin du cookie.
    • domain Domaine pour le cookie.
    • sécurisé N'envoyez des cookies que par le biais d'une connexion sécurisée.

Dernier mais souvent utile: fonction byId

Il permet aux fonctions de fonctionner de la même manière lors de la transmission d’un nœud DOM ou de son identifiant.

  fonction byId (noeud) {
  retourne typeof node == 'chaîne'?  document.getElementById (noeud): noeud
 }

Utilisé simplement:

  fonction hide (node) {
  noeud = byId (noeud)
  node.style.display = 'aucun'
 }

 fonction animateHide (noeud)
  noeud = byId (noeud)
  quelque chose (noeud)
  masquer (noeud)
 }

Ici, les deux fonctions sont polymorphes, elles permettent à la fois le nœud et son identifiant, ce qui est très pratique, car vous permet de ne pas effectuer de conversions supplémentaires sur le noeud <-> id