sn33k's web sn33k's blog retrophylien à venir un CMS
image header image header icone mail
javascript
/contenu/informatique/dev/javascript.php

JavaScript

  1. <script type="text/javascript"></script>
  2. <script type="text/javascript" src="file.js"></script>
déclarer une variable
  1. var la_variable ;
déclarer une variable et affecter une valeur à la variable, permet aussi d'affecter une valeur à une variable déjà déclarée
  1. var la_variable = "la valeur" ;
méthodes
focus
Donne le focus à la zone
blur
Détecte le défilement de la zone

événements
onload
onunload
onFocus
Détecte la prise de focus
onblur
Détecte la perte de focus
onScroll
Reprend le focus
onChange
Détecte le changement de contenu
onkeypress
l'utilisateur appuie sur une touche du clavier puis la relâche
onkeydown
l'utilisateur appuie sur une touche du clavier
onkeyup
l'utilisateur relâche une touche du clavier
onclick
lorsque l'utilisateur clique sur l'élément
ondblclick
lorsque l'utilisateur double-clique sur l'élément
onmousedown
l'utilisateur appuie sur un bouton de la souris
onmouseup
l'utilisateur relâche un bouton de la souris
onmousemove
le pointeur de la souris est déplacé en dehors de l'élément
onmouseout
le pointeur de la souris quitte l'élément au dessus duquel il était
onmouseover
le pointeur de la souris vient au dessus d'un élément
onselect
lorsque l'utilisateur séléctionne tout ou partie du texte

jsevent La gestion des événements en JavaScript

DOM

window et document

window (selfhtml) document document.viewport : permet d'avoir des infos comme la taille visible de la fenêtre... window.open("URL","nom_de_la_fenetre","options_de_la_fenetre")

Action sur les élements

parcours des élements document.getElementById("id") document.getElementsByName("name") // ne pas oublier le 's' à Elements document.getElementsByTagName()("TagName") // ne pas oublier le 's' à Elements Ajout et suppression d'élements appendChild() removeChild() opérations sur les attributs des éléments getAttribute('attribut'); // On récupère l'attribut setAttribute('attribut', 'valeur') // On édite l'attribut opérations sur le contenu des éléments innerHTML : pour récupérer le code dans un élément HTML ou en rajouter. innerText (Internet Explorer) et textContent (autres browsers) : pour récupérer le texte dans un élément HTML ou en rajouter. opérations sur les régles CSS document.styleSheets[] document.styleSheets[].cssRules[] - array avec toutes les régles CSS (Firefox) document.styleSheets[].rules[] - array avec toutes les régles CSS (IE) document.styleSheets[].cssText (IE) http://www.javascriptkit.com/domref/stylesheet.shtml

Autres

Impression print() <img type="image" name="impr_page" value="imprimer la page" src="../imprimer.png" onClick="window.print()" style="" />

XMLHTTPRequest et ActiveXObject

http://www.siteduzero.com/tutoriel-3-100294-l-objet-xmlhttprequest.html

Création d'un objet XMLHTTPRequest

  1. var xhr_object = null;
  2. // Firefox, Safari, Opera, etc...
  3. if(window.XMLHttpRequest) xhr_object = new XMLHttpRequest();
  4. // Internet Explorer 4.0+
  5. else if(window.ActiveXObject) xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
  6. // XMLHttpRequest non supporté par le navigateur
  7. else { alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); return; }

Attributs

readyState - le code d'état passe successivement de 0 à 4 qui signifie "prêt". status - intégral, 200 pour ok... responseText - responseXml onreadystatechange - propriété (fonction) activée par un évènement de changement d'état readyState 0 (uninitialized) non initialisé 1 (loading) début du transfert des données 2 (loaded) données transférées 3 (interactive) les données reçues sont accssibles en partie 4 (complete) les données sont complètement accessibles
  1. if (xhr.readyState == 4) { // Reçu, OK } else { // Attendre... }
onreadystatechange
  1. xhr_object.onreadystatechange = function() { if(this.readyState == 4) alert(this.responseText); }

Méthodes

open - le code d'état passe successivement de 0 à 4 qui signifie "prêt". send - envoie une requête au serveur, null pour une commande GET. open
  1. xhr_object.open('GET/POST','URL', true pour asynchrone);
send
  1. xhr_object.send(null);
Utilisation des formulaires developpez.net - recuperer-tableau-dinput-js toutjavascript.com - savoir06 Pour déplacer le calque, utilisez les propiétés top et left document.getElementById("moncalque").style.left=500; document.getElementById("moncalque").style.top=parseInt(document.getElementById("moncalque").style.top)+10; firstChild document.write(...) screen.width screen.height doc et autres liens intéressants javascript cheat-sheet javascript Reference JavaScript doc sur mozilla developer center http://www.rcweb.fr/web/javascript.html toutjavascript.com - savoir00 salemioche.net - javascript siteduzero.com - tutoriel-3-8158-tout-sur-le-javascript ECMAScript - MySQL <--> PHP <--> HTML (dans un tableau) / javascript <--> utilisateur
Explorer_un_tableau_HTML_avec_des_interfaces_DOM_et_JavaScript TRANSFORMER-TABLEAU-JAVASCRIPT-TABLEAU-HTML, et un exemple parfait d'utilisation dans les commentaires. Librairies, framework et autres outils jsbin - pour tester du code Depthjs et son git - Librairie pour utiliser le module kinect. jQuery et jQuerymobile activewidgets dhtmlxGrid, tableau avec recherche et classement possible par colonne séléctionnée canvasXpress JavaScript in one page jsquick.pdf javascript-reference.info Refcardz #02: Getting Started With Ajax lecteur mp3