Warning: main(./common/html/menutop.html) [function.main]: failed to open stream: No such file or directory in /mnt/129/sdb/8/f/gadille/doc/webLanguage/jscript/jsp.php on line 20

Warning: main() [function.include]: Failed opening './common/html/menutop.html' for inclusion (include_path='/mnt/129/sdb/8/f/gadille/include:.:/usr/php4/lib/php') in /mnt/129/sdb/8/f/gadille/doc/webLanguage/jscript/jsp.php on line 20

javaScript

Intro
branche
- operateur ternaire
boolean
loop
function
tableaux
DOM
evenement

http://www.w3schools.com/js/default.asp

Intro

Trés proche de java mais non typé
Inclus dans les navigateur et exécuté sur les postes client (par le moteur du navigateur)

Ce petit bout de code ouvre une fenetre visible ici

fenetre de confirmation boolean ici

if (confirm('Voulez-vous exécuter le code Javascript de cette page ?')) {
alert('Le code a bien été exécuté !');
}

branche

if then else switch comme en java

var drawer = parseInt(prompt('Choisissez le tiroir à ouvrir (1 à 3) :'));
switch (drawer) {
    case 1:
        alert('Contient divers outils pour dessiner : du papier, des crayons, etc...');
    break;
    case 2:
        alert('Contient du matériel informatique : des câbles, des composants, etc...');
    break;
    case 3:
        alert('Ah ? Ce tiroir est fermé à clé ! Dommage !');
    break;
    default:
        alert("Info du jour : le meuble ne contient que 3 tiroirs et, jusqu'à preuve du contraire, les tiroirs négatifs n'existent pas.");
}

operateur ternaire

adult = confirm('Êtes-vous majeur ?'); //adulte va contenir true ou false message = adult ? '18+' : '-18'; //message contiendra 18+ ou -18

boolean

false : un nombre qui vaut zéro
false : bien une chaîne de caractères vide

var tata='toto';
if (tata){
	alert ('temps que la var est plein c'est true');
}

loop

bout de code qui demande des prenoms temps que l'on rentre pas vide (vide evalué à false)

var nicks = '', nick,proceed = true;
while (proceed) {
    nick = prompt('Entrez un prénom :'); 
    if (nick) {
        nicks += nick + ' '; // Ajoute le nouveau prénom ainsi qu'un espace juste après
    } else {
        proceed = false; // Aucun prénom n'a été rentré, donc on fait en sorte d'invalider la condition
    }
}
alert(nicks);

pour le for c'est comme en java
for (var iter = 0; iter < 5; iter++) {
}

function

Ici la variable ohai est vue comme une variable global de classe donc visible dans al function

	
var ohai = 'Hello world !';
function sayHello() {
    alert(ohai);
}
sayHello();

Les arg ne sont pas typer donc pas de type a la déclaration

		
function moar(first, second) {
    alert('Votre premier argument : ' + first);
    alert('Votre deuxième argument : ' + second);
    return 'Bonjour !';
}

Fonction anonyme one la nome pas mais on l'atribut à une var

var sayHello = function() {
    alert('Bonjour !');
};
sayHello();

function anonyme appelé par les parenthese aprés

(function() {
  alert('Bonjour !');
})();

tableaux

var myArray = ['Sébastien', 'Laurence', 'Ludovic', 'Pauline', 'Guillaume'];
myArray[1] = 'Clarisse';
place les element en fin de tbl
myArray.push('Pauline', 'Guillaume'); //push en debut de tbl
myArray.unshift('Pauline') //place en fin de tbl
myArray.shift(); //retir 1er element
myArray.pop(); //retire dernier element

split comme en java

var cousinsString = 'Pauline Guillaume Clarisse',cousinsArray = cousinsString.split(' ');

joint pour collé

var cousinsString_2 = cousinsArray.join('-');

objet

var family = {
    self:     'Sébastien',
    sister:   'Laurence',
    brother:  'Ludovic',
    cousin_1: 'Pauline',
    cousin_2: 'Guillaume'
};
alert(family.sister); //comme en java

alert(family['sister']);  //ou syntax type tbl

contrairement a java on peux rajouter des champs (dans l'objet tableau)
family['uncle'] = 'Didier';

parcour comme un tbl a la methode java 1.6

for (var id in family) { 
    alert(family[id]);		
}

objet pour double return

function getCoords() {
     return { x: 12, y: 21 };
}
var coords = getCoords();
alert(coords.x); // 12
alert(coords.y); // 21

DOM

on recupere l'element avec un id="myDiv"

var div = document.getElementById('myDiv');

on recur tous les element de type div

var divs = document.getElementsByTagName('div');

exemple avec querySelector et querySelectorAll

<div id="menu">
  <div class="item">
    <span>Élément 1</span>
    <span>Élément 2</span>
  </div>
  <div class="publicite">
    <span>Élément 3</span>
    <span>Élément 4</span>
  </div>
</div>

var query = document.querySelector('#menu .item span'),
    queryAll = document.querySelectorAll('#menu .item span');
alert(query.innerHTML); // Affiche : Élément 1
alert(queryAll.length); // Affiche : 2
alert(queryAll[0].innerHTML + ' - ' + queryAll[1].innerHTML); // Affiche : Élément 1 - Élément 2

modifier un lient

<body>
  <a id="myLink" href="http://www.un_lien_quelconque.com">Un lien modifié dynamiquement</a>
  <script>
    var link = document.getElementById('myLink');
    var href = link.href;    
    link.href = 'http://www.siteduzero.com';
  </script>
</body>

class est néamoins transformé en className car mot réservé

<html>
  <head>
       <style type="text/css">
      .blue {
        background: blue;
 			color: black;
      }
    </style>
  </head>
  <body>
    <div id="mydiv">
      <p>Du text <a>et un lien</a></p>
    </div>
    <script>
      docume<span id="clickme">Cliquez-moi !</span>
<script>
  var element = document.getElementById('clickme');
  element.addEventListener('click', function() {
      alert("Vous m'avez cliqué !");
  }, false);
</script>
nt.getElementById('mydiv').className = 'blue';
    </script>
  </body>
</html>

le script ajoute remplace la ligne div <id="mydiv">
par <div id="mydiv" class="blue">

InnerHtml permet de recupere du text ou de le modifier

var div = document.getElementById('myDiv');
alert(div.innerHTML);
//ou
var text = document.getElementById('myDiv').innerHTML;

document.getElementById('myDiv').innerHTML = '<b>text</b> à la place du paragraphe entre les div';
document.getElementById('myDiv').innerHTML +=  ' rajout de text';
document.getElementById('myDiv').div.innerText

on peux aussi recupérer l"element parent

var div=document.getElementById('mydiv')
var body = paragraph.parentNode;

on peux aussi le type et le nom de l'elment
(ici 1 et p)

<blockquote>
  <p id="myP">Ceci est un paragraphe !</p>
</blockquote>
<script>
var paragraph = document.getElementById('myP');
alert(paragraph.nodeType + '\n\n' + paragraph.nodeName.toLowerCase());
</script>

ide m pour les enfant
(ici #text et stong)

<p id="myP">Un peu de texte, <a>un lien</a> et <strong>une portion en emphase</strong></p>
<script>
var paragraph = document.getElementById('myP');
var first = paragraph.firstChild;//ici a
var last  = paragraph.lastChild;//
alert(first.nodeName.toLowerCase());
alert(last.nodeName.toLowerCase());
alert(first.nodeValue);
alert(last.firstChild.data);

var children  = paragraph.childNodes;
</script>

children contient un tableaux avec tous les noeud enfant

evenement

<span onclick="alert('Voici le contenu de l\'élément que vous avez cliqué :\n\n' + this.innerHTML);">Cliquez-moi !</span>

<a href="http://gadille.free.fr" onclick="alert('blocage du lient'); return false;">click</a>>
<a href="#" onclick="alert('click'); return false;">Click !</a>

click	Cliquer (appuyer puis relâcher) sur l'élément
dblclick	dbl click sur l'element
mouseover	curseur entrant sur l'element
mouseout	curseur sortant
mousedown	click gauche sans relacher
mouseup	relachement
mousemove	depalcement
keydown	appuyer (sans relacher)
keyup	relachement
keypress	appuie + relachement
focus	prendre le focus
blur	perdre le focus
change	changer le contenue d'un formullaire
select	selectionner un champ (text)

dom-0

<span id="clickme">Cliquez-moi !</span>
var element = document.getElementById('clickme');
element.onclick = function(e) {
      alert("Vous avez effectuer cette action:"+e.type);
};

dom-2

on utilise des listener comme dans swing

<span id="clickme">Cliquez-moi !</span>
<script>
  var element = document.getElementById('clickme');
  element.addEventListener('click', function(e) {
      alert("Vous avez effectuer cette action:"+e.type");
      e.target.innerHTML = 'Vous avez cliqué ! sur lelement'+e.target.id;     
  }, false);
</script>

Le listenerprend 3 param l'event a écouter , la function a exécuter et la methode d'ecoute
element.addEventListener('click', myFunction, false); // On crée l'événement
element.removeEventListener('click', myFunction, false); // On supprime l'événement en lui repassant le
le dernier param decide de l'ordre d'execution des evenement du plus intern en premier ou du plus extern

pour ie<9 utiliser attachEvent() et detachEvent() avec 2 param
et mettre onClick et non click

blocage click

  link.addEventListener('click', function(e) {
        e.preventDefault(); // On bloque l'action par défaut de cet événement
        alert('Vous avez cliqué !');
    }, false);

suivie souris

<div id="position"></div>
<script>
    var position = document.getElementById('position');  
    document.addEventListener('mousemove', function(e) {
        position.innerHTML = 'Position X : ' + e.clientX + 'px<br />Position Y : ' + e.clientY + 'px';
    }, false);
</script>

mail pour des questions ou de l'aide