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

Utilisation de scripts Java

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

JavaScript est couramment utilisé comme langage intégré pour accéder par programme aux objets de l'application. Il est surtout utilisé dans les navigateurs comme langage de script pour donner une interactivité aux pages Web. 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 était influencé par de nombreux langages: lors du développement, l'objectif était de faire en sorte que le langage ressemble à Java, tout en étant facile à utiliser pour les non-programmeurs. Le langage JavaScript n’est parlé par aucune entreprise ni organisation, ce qui le distingue des nombreux 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, peuvent remplir toutes ces fonctions. Mais parfois, vous devez faire quelque chose sans cadre. Pour diverses raisons. Cet ensemble de fonctions utiles est destiné à cela.

10) addEvent ()

Sans aucun doute l'outil le plus important de la gestion d'é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: 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, attachEvent ne le fait pas.

Une solution de contournement simple pour cela

Pour passer cela correctement, vous pouvez remplacer la ligne addEvent correspondante par:

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

Cela résoudra le problème en passant cela, mais le gestionnaire ne peut en aucun cas être supprimé, car detachEvent doit appeler exactement la fonction qui a été transmise à attachEvent.

Il existe deux solutions de contournement:

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 ceci:

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

2) Vous ne pouvez pas utiliser ceci 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 ceci:

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

9) onReady ()

Pour initialiser la page, l'événement window.onload a été utilisé historiquement, ce qui se déclenche une fois la page chargée et tous les objets qu'elle contient: 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 que tout soit chargé.

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)
 }

Utilisation:

 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 ne s’est pas révélé mieux que le reste.

La fonction suivante utilise la méthode getElementsByClass intégrée, le cas échéant, et recherche elle-même des éléments dans les navigateurs, contrairement à cette méthode.

  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 - Une liste de classes, séparées par des espaces, les éléments avec lesquels rechercher.

node - Contexte de recherche, dans quel noeud rechercher

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 de l'é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 y a probablement plus d'options pour cette fonctionnalité qu'il ne serait nécessaire.

Cette option ne prétend en aucun cas être la fonction universelle du "commutateur", mais elle 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'
 }

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

Ainsi, si la valeur d'affichage d'un élément donné extrait 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 le rendent pas assez universel.

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, comme insertAfter est implémenté avec 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 effectuer une recherche, cette fonction utilise la vérification === , qui recherche par comparaison exacte, sans transtypage.

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 ()

Dans javascript, il est impossible de fonctionner correctement avec des cookies sans fonctionnalités supplémentaires. Je ne sais pas qui a conçu document.cookie , mais c’est extrêmement mal fait.

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

  // retourne un cookie s'il est présent ou non défini
 fonction getCookie (nom) {
	 var correspond = document.cookie.match (nouvelle 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

 }

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

Arguments:

  • nom nom du cookie
  • valeur cookie value (chaîne)
  • props Un objet avec des propriétés supplémentaires pour installer des 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.
      • S'il s'agit d'un objet de type Date, la date exacte d'expiration.
      • Si expire est 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 Le chemin du cookie.
    • domain Le domaine du cookie.
    • sécurisé N'envoyez les cookies que via une connexion sécurisée

Dernier mais souvent utile: fonction byId

Cela permet à la fonction de fonctionner de la même manière lors du passage du nœud DOM ou de son identifiant.

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

Il est utilisé simplement:

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

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

Ici, les deux fonctions sont polymorphes, le nœud et son id le permettent, ce qui est très pratique, car évite les conversions inutiles du noeud <-> id.