background preloader

Javascript - Les événements

Javascript - Les événements
Septembre 2015 Qu'appelle-t-on un événement? Les événements sont des actions de l'utilisateur, qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au Javascript il est possible d'associer des fonctions, des méthodes à des événements tels que le passage de la souris au-dessus d'une zone, le changement d'une valeur, ... Ce sont les gestionnaires d'événements qui permettent d'associer une action à un événement. onEvenement="Action_Javascript_ou_Fonction();" Les gestionnaires d'événements sont associés à des objets, et leur code s'insèrent dans la balise de ceux-ci... Liste des événements Association des événements aux objets Chaque événement ne peut pas être associé à n'importe quel objet. Les evenements des objets et api contrairement a la pluparts des evenements utilisateur ces evenement servent surtout a informer sur des etats Associer un evenement a un element exemple : il existe trois méthodes, Méthode 1, <! Related:  Javascript

Javascript - Les fonctions Décembre 2014 La notion de fonction On appelle fonction un sous-programme qui permet d'effectuer un ensemble d'instructions par simple appel de la fonction dans le corps du programme principal. Cette notion de sous-programme est généralement appelée fonction dans les langages autres que le Javascript (toutefois leur syntaxe est généralement différente...). Les fonctions permettent d'exécuter dans plusieurs parties du programme une série d'instructions, cela permet une simplicité du code et donc une taille de programme minimale. Javascript contient des fonctions prédéfinies qui peuvent s'appliquer pour un ou plusieurs types d'objets spécifiques, on appelle ces fonctions des méthodes. La déclaration d'une fonction Avant d'être utilisée, une fonction doit être définie car pour l'appeler dans le corps du programme il faut que le navigateur la connaisse, c'est-à-dire qu'il connaisse son nom, ses arguments et les instructions qu'elle contient. Remarques: Appel de fonction Nom_De_La_Fonction();

JavaScript Garden Although JavaScript deals fine with the syntax of two matching curly braces for blocks, it does not support block scope; hence, all that is left in the language is function scope. function test() { // a scope for(var i = 0; i < 10; i++) { // not a scope // count } console.log(i); // 10} There are also no distinct namespaces in JavaScript, which means that everything gets defined in one globally shared namespace. Each time a variable is referenced, JavaScript will traverse upwards through all the scopes until it finds it. In the case that it reaches the global scope and still has not found the requested name, it will raise a ReferenceError. The Bane of Global Variables // script Afoo = '42'; // script Bvar foo = '42' The above two scripts do not have the same effect. Again, that is not at all the same effect: not using var can have major implications. // global scopevar foo = 42;function test() { // local scope foo = 21;}test();foo; // 21 Local Variables var foo = 3; bar = 4;}test(10); Hoisting

Native equivalents of jQuery functions Update: many people have asked about browser compatability for the native methods I’ve shown. Here are the links to that information: querySelector/querySelectorAll, classList, getElementsByClassName, createDocumentFragment. If you checked out my last post you’ll know that I have been doing lots of JavaScript coding as of late, both inside and out of Brackets. I have also been doing a series of performance tests (1, 2, 3) between popular jQuery methods and their native DOM equivalents. Yes I know what you’re thinking. I think there are many developers who don’t realize that most of the jQuery methods they use have native equivalents that require the same or only a slighter larger amount of code to use. Selectors Easily being able to find DOM elements is at the core of what jQuery is about. Native equivalents to jQuery selectors DOM manipulation Another area where jQuery is used frequently is in manipulating the DOM, by either inserting or removing elements.

fonction toggle Permet de switcher entre deux fonctions à chaque clic sur les élements de la sélection. Dès que l'un d'entre eux est cliqué, la première fonction est éxécutée, et lors d'un nouveau clic, la seconde sera éxécutée, puis de nouveau la première,etc. Utilisez unbind("click") pour annuler l'effet de cette fonction. Version: disponible depuis la version 1.0 de JQuery Paramétres: impair (Fonction): fonction à éxécuter lors de chaque clic impair pair (Fonction): fonction à éxécuter lors de chaque clic pair Valeur de retour: objet jQuery Exemple : $("p").toggle(function(){ $(this).addClass("selected"); },function(){ $(this).removeClass("selected"); }); 0 Commentaire () Bascule l'état d'affichage des éléments sélectionnés. Valeur de retour: jQuery $("p").toggle() Code de test: <p>Hello</p><p style="display: none">Hello Again</p> Résultat: <p style="display: none">Hello</p>, <p style="display: block">Hello Again</p>

Référence javascript : Objets, propriétés, méthodes par Tout JavaScript.com La référence javascript Tout JavaScript.com vous propose sur cette interface ergonomique et conviviale, plus de 230 fiches détaillant précisément les objets javascript , leurs propriétés et leurs méthodes . , les fonctions natives et les mots de structures sont regroupés dans le répertoire Mots_clefs. Naviguez simplement dans l'arborescence des objets dans le menu de gauche. Quand vous lancez une fiche, l'arborescence du menu s'ouvre à la position de l'objet sélectionné. Cette référence javascript, développée et écrite pour Tout JavaScript.com, est en constante évolution. Erreur ?] Accès rapide : window, document, Array, RegExp, Math, Image, navigator...

Les librairies JavaScript vraiment utiles JSTweener JSTweener est une librairie de gestion des transitions (tween en anglais) basé sur la classe Tweener utilisée dans le code ActionScript de Flash. $fx() - JavaScript Animation Library $fx() est une librairie JavaScript légère (moins de 4Ko) d'animation d'éléments HTML. Elle vous permet de modifier n'importe qu'elle propriété CSS progressivement avec un paramétrage simple. Vous pouvez aussi combiner les effets en les enchainant ou en les synchronisant. Facebook Animation Cette librairie vous offre beaucoup de possibilités pour améliorer leur page Facebook avec juste une ou deux lignes de code. Autres librairies : FX, Animator.js, jsAnim SoundManager SoundManager importe et améliore l'API Sound de Flash et la rend disponible en JavaScript. Flowplayer JavaScript API L'API JavaScript de Flowplayer vous permet de contrôler facilement et efficacement une ou plusieurs instances de Flowplayer dans une page HTML. Cookies EasyCookie Taffy DB Taffy DB est une librairie AJAX libre. ActiveRecord.js

Get Styles Page last changed today See section 9H of the book for offsetWidth and friends; section 9A for getting styles. The example script doesn't work in Safari Sometimes you'll want to see what styles the default document view has. For instance, you gave a paragraph an width of 50%, but how do you see how many pixels that is in your users' browser? In addition, sometimes you want to read out the styles applied to an element by embedded or linked style sheets. This is our test paragraph with id="test", on which we're going to try our scripts. This is the style sheet of the test paragraph: Before going to the tricky bits, first a nice shortcut that has been inserted into both Mozilla and Explorer: offsetSomething. The script is quite simple: function getOff() { x = document.getElementById('test'); return x.offsetWidth; } and we alert the returned value: alert('offsetWidth = ' + getOff()). Now you have the width of the paragraph in the user's browser and you can start calculating things. return y; }

[Résolu]Recuperation parametre JS et feuille CSS Bonjour a tous, J'ai un petit souci je suis en plain recriture de mon site web, et car je veut separer le contenu de comportement j'ai mis tout les parametres des mes <div> dans un ficher css maintenant je peut plus recupere le parametres avec mes functions javascript Html <! style.css scroll.js window.onload=init;function init(){Ltxt_top=document.getElementById('Ltxt').style.top; Ltxt_top=(Ltxt_top.substring(0,Ltxt_top.indexOf('px')))*1;//and convert to num alert(Ltxt_top);} le problmes c'est que j'ai rien qui est defini dans document.getElementById('Ltxt').style.top document.getElementById('Ltxt').style.top.length==0 alor que avant avec ma ancienne page html <body><div id="Ltxt" style="position:absolute; left:10px; top:10px; width:310px; height:880px; z-index:11";clip: rect(0px,auto,370px,auto);"> ABCDEFGHIJK.. ca marche tres bien... quelq'un peut m'aider ??

Java.Scripts-Fr.com : Détecter la taille de la fenêtre <script type="text/javascript"> <!-- Debut // JavaScript pris sur le site: " if (document.body) { var larg = (document.body.clientWidth); var haut = (document.body.clientHeight); } /* Ici une version DOM (le script est entre les balises <body> et </body>) qui devrait fonctionner sur tous les navigateurs. else { var larg = (window.innerWidth); var haut = (window.innerHeight); } /* Cette version est purement javascript et ne fonctionne pas sous IE (les propriétés innerWidth et innerHeight de l'objet window n'ayant pas été intégrée dans ce navigateur). document.write("Cette fenêtre fait " + larg + " de large et "+haut+" de haut"); // ensuite on en fait ce que l'on veut, la je les écrit avec la méthode write// de l'objet document // fin du script --> </script>

Related: