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 scénario orienté prototypé. C'est un dialecte du langage ECMAScript.

JavaScript est couramment utilisé en tant que langage intégré pour l'accès par programmation aux objets d'application. L'application la plus large se trouve dans les navigateurs en tant que langage de script pour donner de l'interactivité aux pages Web. Les principales caractéristiques architecturales: typage dynamique, typage faible, gestion automatique de la mémoire, programmation de prototypage, fonctionnent comme des objets de première classe. JavaScript a été influencé par de nombreuses langues, avec le développement a été l'objectif de rendre le langage similaire à Java, mais en même temps facile à utiliser par des non-programmeurs. La langue de JavaScript n'appartient à aucune entreprise ou organisation, ce qui la 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, connaissent toutes ces fonctions. Mais parfois, vous devez faire quelque chose sans le cadre. Pour différentes raisons. Pour cela, cette collection de fonctions utiles est destinée.

10) addEvent ()

Sans aucun doute, l'outil le plus important dans la gestion des événements! Indépendamment de la version que vous utilisez et de qui elle est écrite, elle fait ce qu'elle dit dans le nom: ajoute un gestionnaire d'événement à l'élément.

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

Ce code a deux avantages: il est simple et multi-navigateur.

Son principal inconvénient est qu'il ne passe pas cela au gestionnaire pour IE. Plus précisément, il ne fait pas attachEvent.

Un travail simple autour de ça

Pour le corriger, vous pouvez remplacer la ligne addEvent correspondante par:

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

Cela résout le problème en passant cela, mais le gestionnaire ne peut être retiré de quelque façon que ce soit. detachEvent doit appeler exactement la fonction qui a été transmise à attachEvent.

Il y a deux options pour contourner le problème:

1) Renvoie la fonction utilisée pour affecter le gestionnaire:

  function addEvent (elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.addEventListener (evType, fn, false)
  retourner fn
	 }

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

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

Il est utilisé comme ceci:

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

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

  function addEvent (elem, evType, fn) {
	 if (elem.addEventListener) {
		 elem.addEventListener (evType, fn, false)
  retourner fn
	 }

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

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

Il est utilisé comme ceci:

  gestionnaire de fonction () { 
  // n'utilise pas ceci, mais la variable se référant à l'élément
  alerte (elem) 
 }
 ...

9) onReady ()

Pour initialiser la page historiquement, l'événement window.onload a été utilisé , qui fonctionne après le chargement complet de la page et tous les 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 de charger les images et autres objets qui n'affectent 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 sur la page et initialiser les interfaces immédiatement, sans attendre le téléchargement de tout.

Pour ajouter un gestionnaire, vous pouvez utiliser le code croisé suivant:

  function bindReady (gestionnaire) {

	 var appelé = faux

	 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) {
			 function tryScroll () {
				 si (appelé) retour
				 if (! document.body) retourne
				 essayez {
					 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', prêt, faux)
  else if (window.attachEvent)
  window.attachEvent ('onload', prêt)
  / * else // (4.1)
  window.onload = prêt
	 * /
 } 
 readyList = []
 function onReady (gestionnaire) {
	 if (! readyList.length) {
		 bindReady (function () {
			 pour (var i = 0; i <readyList.length; i ++) {
				 readyList [i] ()
			 }
		 })
	 }
	 readyList.push (gestionnaire)
 }

Utilisation:

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

8) getElementsByClass ()

Au départ, il n'est écrit par personne en particulier. De nombreux développeurs ont écrit leurs propres versions et le tirage n'a pas été meilleur que le reste.

La fonction suivante utilise la méthode intégrée getElementsByClass, le cas échéant, et recherche les éléments eux-mêmes dans les navigateurs où cette méthode n'existe pas.

  if (document.getElementsByClassName) {
 getElementsByClass = function (classList, node) { 
 return (noeud || document) .getElementsByClassName (classList)
 }
 } else {
 getElementsByClass = function (classList, node) {
 var noeud = noeud ||  document,
 list = node.getElementsByTagName ('*'), 
 length = list.length, 
 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 (liste [i])
					 rompre
				 }
			 }
		 }
	
		 retour résultat
	 }
 }

classList - Une liste de classes séparées par des espaces, les éléments à rechercher.

node - Le contexte de la recherche, dans quel noeud rechercher

Par exemple:

  var div = document.getElementById ("mydiv")
 elements = getElementsByClass ('class1 class2', div) 

7) addClass () / removeClass ()

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

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

6) bascule ()

Pour être honnête, il y a probablement plus d'options pour cette fonction que ce ne serait nécessaire.

Cette option ne prétend en aucun cas être une fonction de "commutation" universelle, mais elle remplit la fonctionnalité de base de montrer et de cacher.


fonction bascule (), mots folkloriques

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

Notez qu'il n'y a pas de mot sur display = 'block' dans la fonction, à la place l' affichage de valeur vide = '' est utilisé . Une valeur vide signifie une réinitialisation de la propriété, c'est-à-dire la propriété retourne à la valeur spécifiée dans CSS.

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

Cette version de la fonction bascule est belle et simple, mais ceci et quelques autres défauts ne le rendent pas assez universel.

5) insertAfter ()

Comme getElementsByClass , cette fonction n'existe pour une raison quelconque dans la norme DOM. Peut-être pour éviter la duplication des fonctionnalités, car insertAfter est implémenté sur une seule ligne.

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

4) dansArray ()

Il est regrettable que cela ne fasse pas partie des fonctionnalités intégrées du DOM. Mais maintenant nous avons l'opportunité de toujours insérer de telles remarques!

Pour la recherche, cette fonction utilise le contrôle === , qui recherche une comparaison exacte, sans lancer les types.

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

  inArray = Array.prototype.indexOf?
  function (arr, val) {
  return arr.indexOf (val)! = -1
  }:
  function (arr, val) {
  var i = arr.length
  tandis que (i--) {
  if (arr [i] === val) renvoie vrai
  }
  return false
  }

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

En JavaScript, il n'y a aucun moyen de travailler correctement avec les cookies sans fonctions supplémentaires. Je ne sais pas qui a conçu le document.cookie , mais c'est très mal fait.

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

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

 // définit le cookie
 function setCookie (nom, valeur, accessoires) {
	 les accessoires = les accessoires ||  {}
	 var exp = props.expires
	 if (typeof exp == "nombre" && exp) {
		 var d = new Date ()
		 d.setTime (d.getTime () + exp * 1000)
		 exp = props.expires = d
	 }
	 if (exp && exp.toUTCString) {props.expires = exp.toUTCString ()}

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

 }

 // supprimer le cookie
 function deleteCookie (nom) {
	 setCookie (nom, null, {expire: -1})
 }

Arguments:

  • nom du cookie
  • valeur de cookie de valeur (chaîne)
  • props Objet avec des propriétés supplémentaires pour définir un cookie:
    • expire l' heure d'expiration du cookie . Interprété différemment, selon le type:
      • Si le nombre est le nombre de secondes avant l'expiration.
      • Si l'objet de type Date est la date d'expiration exacte.
      • Si expire dans le passé, le cookie sera supprimé.
      • Si expires est absent ou égal à 0, le cookie sera défini comme session et disparaîtra lorsque le navigateur sera fermé.
    • chemin Chemin d'accès pour cookie.
    • domaine Domaine pour cookie.
    • sécurisé N'envoyer des cookies que sur une connexion sécurisée.

Dernier mais souvent utile: byId

Il permet à la fonction de fonctionner de la même manière lors du passage d'un noeud DOM ou de son identifiant.

  function byId (noeud) {
  return typeof noeud == 'chaîne'?  document.getElementById (noeud): noeud
 }

Il est utilisé simplement:

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

 function animateHide (noeud)
  node = byId (noeud)
  quelque chose (noeud)
  cacher (noeud)
 }

Ici les deux fonctions sont polymorphes, elles permettent à la fois le noeud et son identifiant, ce qui est assez pratique, car vous permet de ne pas effectuer de conversions inutiles noeud <-> id.