<script type="text/javascript">
var elements = document.getElementsByClassName('box');

elementsLength = elements.length;  
for (var i = 0 ; i < elementsLength ; i++) {
  alert (elements[i].innerHTML);             
}
</script>

<div  class="box">1- class : box</div>
<div  class="box">2- class:box</div>
<div  class="box">3- class:box</div>
<div  style="clear:both;"></div>

Pour parcourir tous les éléments HTML d’une classe donnée en Jquery, se référer à ce Mémo

vavar mon_tableau = ['Dumas', 'Hugo', 'Zola'],
mon_tableau_lg= mon_tableau.length;

for (var i = 0; i < mon_tableau_lg; i++) {
    alert(mon_tableau[i]);
}

<div id="mon_div" class="classe1 class2 class3"> </div>

Code JavaScript :

var mes_classes = document.getElementById('mon_div').className;
alert (mes_classes);
var tab_classes = [];
mes_classes  = mes_classes.split(' ');

for (var i = 0; i<mes_classes.length; i++) {
    if (mes_classes[i]) {
       tab_classes .push(mes_classes[i]);
    }
}
alert('La première classe :' + tab_classes [0]+ ', La deuxième :' +tab_classes [1]+ ', et la troisième : ' +  tab_classes [2]);

Affectation des attributs de l’élément :

var new_elt= document.createElement('img');
new_elt.id   = 'mon_img'
new_elt.src  = 'http://www.monsite/images/monimage.jpg';
new_elt.title = 'Title de mon imag';
new_elt.setAttribute('alt', 'Attribut Alt de mon image');

A ce stade, l’objet image a été crée mais il n’a pas encore été inseré dans le document HTML.
Pour ce faire on va utiliser la propriété appenChild() qui va ajouter un élément parmis les enfant d’un élément parents spécifié, ici Element_Parent  (l’élément ajouté par appenChild se positionnera à la fin des enfants de l’élément parent).

var Nouvel_Element = Element_Parent.appendChild(new_elt);

Exemple :

HTML :

<div id="div_parent">
  <p>p1</p>
  <p id="enfant2">p2</p>
  <p>p3</p>
</div>

JavaScript :

document.getElementById('div_parent').appendChild(new_elt);

HTML final :

<div id="div_parent">
  <p>p1</p>
  <p id="enfant2">p2</p>
  <p>p3</p>
<img src="http://www.monsite/images/monimage.jpg" alt="Attribut Alt de mon image" title="Title de mon imag"
</div>

Il est aussi possible d’ajouter un élément HTML  en JavaScript en Utilisant les propriétés insertBefore() 

Exemple :

document.getElementById("div_parent").insertBefore(new_elt,document.getElementById("enfant2"));

Dans cette exemple, notre élément new_elt sera inséré dans le document HTML juste avant le noeud d’identifiant enfant2, qui est un endant de div_parent (voir exemple en haut de page)

Elle vous renvoie FALSE si vous lui passez un nombre en paramètre et TRUE sinon.

Exemple :

isNaN(27) renvoit FALSE
isNaN(’27’) renvoit TRUE
isNaN(‘lsdjfjksh’) renvoit TRUE
var m=27;
isNaN(m) renvoit FALSE

<script>
  alert ("Un saut de ligne s'insère dans mon alert comme ceci \n et cela \n et encore cela \n\n Hop là !"); 
</script>

Déclaration du formulaire en HTML :

<form name="mon_formulaire" method="post" action="#"> 
  <input type="text" value="Valider formulaire en javascript"/>
  <input type="button" id="valider"  value="Valider" onclick="SoumettreFormulaire();" />
</form>

Code Javascript :

Fonction appelée sur l’évenement onclick de l’input de type button. Le formulaire est soumis sous condition.

<script type="text/javascript">
  function SoumettreFormulaire(){  
    if (confirm ('Voulez vous vraiment valider le formulaire ? ')){
      document.forms["mon_formulaire"].submit();
    }
  }
</script>

En paramètres, l’URL a tester, suivi d’un boolean qui détermine si  ‘http://’ est facultative ou pas pour valider l’URL.

function Url_Valide(UrlTest, http_fac) {
  if (http_fac){ //le segment "http://" est facultatif
     var regexp = new RegExp("^((http|https)://)?(www[.])?([a-zA-Z0-9]|-)+([.][a-zA-Z0-9(-|/|=|?)?]+)+$");
   }else{
    var regexp = new RegExp("^((http|https)://){1}(www[.])?([a-zA-Z0-9]|-)+([.][a-zA-Z0-9(-|/|=|?)?]+)+$");
   }
  if (regexp.test(UrlTest)){
    alert ('Mon URL est valide');
  else{
    alert ('Mon URL n'est PAS valide');
  }
  return regexp.test(UrlTest);
}

Code HTML :

Création du formulaire

<form action="#" method="post">
  <input type="text" name="champs_obligatoire" size="30">
  <input type="button" value="Envoyer" onclick="Verifier_formulaire (this.form)"/>
</form>

Code PHP pour récupérer la valeur du champs après soumission du formulaire :

  if (isset ($_REQUEST["champs_obligatoire"])) echo 'Mon champ obligatoire dans le formulaire est '.$_REQUEST["champs_obligatoire"]; 

Fonction javascript de vérification du remplissage du formulaire

<script>
function Verifier_formulaire(formulaire){
  if (formulaire.champs_obligatoire.value==""){
    alert ("Vous avez oublié de remplir le champs obligatoire");
  }else{
    alert ("Le champs obligatoire est bien rempli, on soumet le formulaire");
    formulaire.submit();
  }
}
</script>  

Code HTML :

<form>
  <input id="impression" name="impression" type="button" onclick="imprimer_page()" value="Imprimer cette page" />
</form>

Fonction d’impression de page en javascript avec window.print()

Code Javascript

<script type="text/javascript">
function imprimer_page(){
  window.print();
}
</script>

En appuyant sur le bouton, on fait apparaître la fenêtre de paramétrage de l’impression.

Remarque :
L’action de window.print() est différente de l’impression à l’aide du raccourci clavier Crtl+P qui lui lance l’impression directement sans passer par la fenêtre de paramétrage.

Ne pas afficher un élément lors de l’impression

Comme me l’a fait justement remarquer un internaute, ce bouton s’affichera sur la page imprimée, pour éviter cette faute de goût, il faut créer une feuille de style dédiée à l’impression.

A l’intérieur de votre base <head> déclarez votre nouvelle feuille de style qui ne sera appelée que pour l’impression :

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

Dans cette feuille de style, print.css, vous appliquerez des styles à vos éléments qui ne seront pris en compte qu’à l’impression de votre page. Par exemple dans notre cas, on rend notre bouton invisible.

print.css :

#impression{
  display : none;
}

<script>
  var masession=document.cookie.match(/PHPSESSID=[^;]+/)+" ";
  masession=masession.substring(10);
</script>

Note : on est obligé de rajouter le + » «  lors de l’initialisation de masession pour forcer le typage de la variable masession en string.

Voir le code sur CodePen

Code HTML :

<div id="bandeau_vertical" style="position:relative;width:150px;height:600px;border:1px solid black;overflow:hidden;">
 </div>
<div id="bandeau_horizontal" style="position:relative;width:600px;height:150px;border:1px solid black;overflow:hidden;">
</div>

Code javascript :

</script>
// Fonction de défilement horizontal
// el est l'élément HTML qui contiendra le contenu défilant
// src est un tableau comprenant le chemin des images à faire défiler
// pas est le pas d'incrémentation du défilement (défaut 1px)
// tps est le temps entre deux incrémentations  (défaut 50ms)

function defilImgHrz(el,srcs,pas,tps) {
  if(typeof el=="string") { el = document.getElementById(el); }
  var tps = tps || 50;
  var pas = pas || 1;
  var imgs = [];
  var offset = 0;
  for(var i=0,l=srcs.length;i<l;i++) {
    var img = new Image();
    img.src = srcs[i];
    imgs.push(img);
    img.style.height=el.offsetHeight+"px";
    img.style.position = "absolute";
    img.style.left = offset+"px";
    el.appendChild(img);
    offset += img.offsetWidth;
  }
  var first = 0;
  var last = imgs.length-1;

  (function d() {
    for(var i=0,l=imgs.length;i<l;i++) {
      var left = parseInt(imgs[i].style.left,10);
      imgs[i].style.left = (left-pas)+"px";
      if(i==first && (left-pas+imgs[i].offsetWidth)<0) {
        imgs[i].style.left = 
        (parseInt(imgs[last].style.left,10)+imgs[last].offsetWidth-(i==0?pas:0))+"px";
        last = first++;
        if(first>imgs.length-1) { first = 0; }
      }
    }
    setTimeout(d,tps);
  })();
}

// Fonction de défilement verticale
function defilImgVrt(el,srcs,pas,tps) {
  if(typeof el=="string") { el = document.getElementById(el); }
  var tps = tps || 50;
  var pas = pas || 1;
  var imgs = [];
  var offset = 0;
  for(var i=0,l=srcs.length;i<l;i++) {
    var img = new Image();
    img.src = srcs[i];
    imgs.push(img);
    img.style.width=el.offsetWidth+"px";
    img.style.position = "absolute";
    img.style.top = offset+"px";
    el.appendChild(img);
    offset += img.offsetHeight;
  }
  var first = 0;
  var last = imgs.length-1;

  (function d() {
    for(var i=0,l=imgs.length;i<l;i++) {
      var top = parseInt(imgs[i].style.top,10);
      imgs[i].style.top = (top-pas)+"px";
      if(i==first && (top-pas+imgs[i].offsetHeight)<0) {
        imgs[i].style.top = (parseInt(imgs[last].style.top,10)+imgs[last].offsetHeight-(i==0?pas:0))+"px";
        last = first++;
        if(first>imgs.length-1) { first = 0; }
      }
    }
    setTimeout(d,tps);
  })();
}
// Appel des deux fonctions de défilement au chargement de ma page .
window.onload=function() {
  defilImgVrt('bandeau_vertical',[
    "photos/partenaire/1.jpg",
    "photos/partenaire/1.jpg",
    "photos/partenaire/1.jpg"
  
  ]);
  defilImgHrz('bandeau_horizontal',[
    "photos/partenaire/1.jpg",
    "photos/partenaire/1.jpg",
    "photos/partenaire/1.jpg"
  ]);
};
</script>

 Dans cet exemple les valeur d’incrémentation de distance et de temps sont celles par défaut puisque je ne les ai pas spécifiées dans les paramètres de la fonction. Vous pouvez jouer sur la vitesse ou l’effet saccadé du défilement en modifiant leurs valeurs. (3ème et 4ème paramètre)

Code piqué sur un forum mais je ne retrouve plus le lien, désolée !

Code HTML :

<select id="ComboPays"  >
<option value="français" >FRANCE</option>
<option value="italien" select="selected">ITALIE</option>
</select>

Code Javascript :

<script>
var selectElmt = document.getElementById("ComboPays");
var valeurselectionnee = selectElmt.options[selectElmt.selectedIndex].value;
var textselectionne = selectElmt.options[selectElmt.selectedIndex].text;
</script>

Soit une liste déroulante SELECT contenant deux items FRANCE et ITALIE, l’item ITALIE est préselectionné via l’attribut select.

Nous récupérons en javascript le texte et la valeur (value) de l’item sélectionné dans la liste déroulante grâce aux méthodes combinées options[] et selectedIndex.

la variable valeurselectionne contient « italien »

la variable textselectionne contient « ITALIE »

Voir aussi : joliSelect, un plugin JQuery Pour personnaliser le design de vos listes déroulantes

Concrétement c’est un fichier texte qui contient le nom du cookie, sa valeur et sa date d’expiration. Il est stocké dans un répertoire associé au navigateur mais aussi au site duquel il est issu.

Les cookies sont accessibles en javascript via la commande document.cookie

<script>
function getCookie(nomCookie) {
  deb = document.cookie.indexOf(nomCookie+ "=")
  if (deb >= 0) {
    deb += nomCookie.length + 1
    fin = document.cookie.indexOf(";",deb)
    if (fin < 0) fin = document.cookie.length
    return unescape(document.cookie.substring(deb,fin))
    }else return ""
}
</script>

function is_int(value){
  if((parseFloat(value) == parseInt(value)) && !isNaN(value)){ 
      alert ('value est un integer');
      return true;
  } else {
      alert ('value n'est pas un integer');
      return false;
  }
}

Si une page a changé d’adresse, par exemple, il est important que lorsque l’internaute la cherche à l’ancienne adresse, il puisse être redirigé automatiquement sur la nouvelle.

Il existe plusieurs techniques de redirection, notamment à l’aide du fichier .htacces, qui convient bien pour une redirection systématique.
Les redirections javascript sont plus appropriées si l’on veut afficher un message avant de rediriger l’internaute vers la nouvelle page, ou bien si l’on souhaite rediriger l’internaute que dans certains cas (par exemple, si l’utilisateur est connecté au site)

Fonction de redirection javascript simple

<script>
function RedirectionJavascript(){
  document.location.href="http://manouvellepage.com"; 
}
</script>

Exemple de redirection javascript sur événement onload

<html>
  <head>
    <script type="text/javascript">
      function RedirectionJavascript(){
        document.location.href="http://manouvellepage.com";
      }
   </script>
  </head>
  <body onLoad="setTimeout('RedirectionJavascript()', 2000)">
     <div>Dans 2 secondes vous allez être redirigé vers http://manouvellepage.com</div>
  </body>
</html>

L’utilisation ici de la fonction setTimeout() sur l’événement onload (sur chargement)de la page, permet de donner un délai de 2000 ms à l’internaute avant qu’il ne soit redirigé sur la page finale.

Exemple de redirection sur le click  d’un bouton (code HTML) 

<input name="bouton_terminer" type="button" value="Terminer" 
    onclick="document.location.href='http://manouvellepage.com'">

ou, si la fonction RedirectionJavascript() est déclarée sur la page :

input name="bouton_terminer" type="button" value="Terminer"
    onclick="RedirectionJavascript()">

<script type='text/javascript'>
      <!--
        function NeRienFaire()
     {
      return false;
     }
     function AntiClickDroitImg()
     {
      var imgs = document.getElementsByTagName('img');
      for(var i=0; i<imgs.length; i++)
       imgs[i].oncontextmenu = NeRienFaire;
     }      
        -->
 </script>

Appelez cette fonction depuis le « onload » du body :

<body onload='AntiClickDroitImg()'>

replace (chaîne à remplacer, chaîne de remplacement)

Fonction replace javascript simple 

<script>
  var machaine='ma voiture est rouge';
  machaine=machaine.replace('rouge','verte');
  alert (machaine); // Affichera "ma voiture est verte"
</script>

Par contre cette fonction ne remplacera qu’une instance de la chaîne à remplacer.

<script>
  var machaine="J'ai une maison bleue et une voiture bleue";
  machaine=machaine.replace('bleue','verte');
  alert (machaine); // Affichera "J'ai une maison verte et une voiture bleue";
</script>

Fonction replace javascript pour remplacer toutes les instances de la chaîne 

Pour permettre de remplacer en javascript toutes les occurences de la chaîne à remplacer et non plus seulement la première occurance voici la fonction replaceAll suivante qui utilise les expressions régulières et le paramètre type g (l’expression est analysée globalement sur l’ensemble de la chaîne) :

<script>
 function replaceAll(machaine, chaineARemaplacer, chaineDeRemplacement) {
   return machaine.replace(new RegExp(chaineARemaplacer, 'g'),chaineDeRemplacement);
 }
 var machaine="J'ai une maison bleue et une voiture bleue";  
  machaine=machaine.replace('bleue','verte');
 alert (replaceAll(machaine, 'bleue', 'verte')); 
</script>

Fonction Replace javascript en ignorant la casse 

Et pour finir, si l’on veut que la fonction de remplacement ignore la casse, (c’est à dire qu’elle remplace la chaineARemplacer indépendamment que celle ci contienne des majuscules ou minuscule),
il faut alors rajouter l’option i dans la fonction.

<script>
  function replaceAllSansCasse(machaine, chaineARemaplacer, chaineDeRemplacement) {
     return machaine.replace(new RegExp(chaineARemaplacer, 'gi'),chaineDeRemplacement);
  }
  var machaine="J'ai une maison bleue et une voiture BleuE"  
   machaine=machaine.replace('bleue','verte');
  alert (replaceAllSansCasse(machaine, 'bleue', 'verte')); 
</script>

L’alerte affichera bien « J’ai une maison verte et une voiture verte »  

Imposer le typage en string

mavariable = 12.3;
mavariable = mavariable+""; // ma variable vaut "12.3"

Imposer le typage en float

mavariable = '12.3';
var mavariable=parseInt(mavariable); // mavariable vaut 12 - nombre 
var mavariable=parseFloat(mavariable);// mavariable vaut 12.3 - nombre decimal

Fonction de vérification de validité d’un email en javascript

function Mail_Valide (EmailTest) {
    var reg = new RegExp('^[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*@[a-z0-9]+([_|\.|-]{1}[a-z0-9]+)*[\.]{1}[a-z]{2,6}$', 'i');

    if(reg.test(EmailTest))
    {
        return(true);
    }
    else
    {
        return(false);
    }
}

Fonction de vérification de la validité d’un téléphone portable en javascript

function Portable_Valide(PortableTest)
{
  var regex = new RegExp(/^(06|07)[0-9]{8}/gi);
    
    if (regex.test (PortableTest))
    {
        return(true);
    }
    else
    {
        return(false);
    }
}