Objets du navigateur
- Javascript permet d'accéder à une hierarchie
d'objets associée à une fenêtre (ou un onglet) de
navigateur.
<script type="text/javascript">
/* Définition d'une fonction message */
function message() {
alert("Message interrompant la navigation !");
}
</script>
<div onmouseover="javascript:message()"
style="border:thick solid red;">
Zone de survol interdit !
</div>
varUndefined, Null, Boolean, Number et String.for( var i in tab));{ ... }// et /* */script<script type="text/javascript"> ... </script>
<body onload="alert(Coucou);">...</body>
<script type="text/javascript" src="sourcesJavascript.js"></script>
window, document, forms, ...<script type="text/javascript">
var maintenant = new Date();
var jour = maintenant.getDate();
var mois = maintenant.getMonth() + 1;
var annee = maintenant.getYear()+1900;
var heures = maintenant.getHours();
var minutes = maintenant.getMinutes();
document.write("Nous sommes le "
+ jour + "." + mois + "." + annee + ". Il est maintenant "
+ heures + ":" + minutes + " heures");
</script>
function Carte(couleur, hauteur) {
this.couleur = couleur;
this.hauteur = hauteur;
this.afficheCarte = afficheCarte;
}
function afficheCarte() {
with(this) {
document.write("<span>"+ hauteur + " : ");
document.write(couleur + "</span>");
}
}
var asDePique = new Carte("♠","A");
asDePique.afficheCarte();
img.card {
position:absolute;
border:solid thin black;
}
img.front:hover {
z-index : 6 !important;
}
<img class="card front" style="left:10px; top:10px; z-index:1;" src="images/pokerAh.png" alt="" /> <img class="card front" style="left:42px; top:10px; z-index:2;" src="images/pokerKh.png" alt="" /> ...
<img class="card" style="top:10px; left:10px; z-index:1;" src="images/pokerAs.png" alt=""
onmouseover="this.style.zIndex=6;" onmouseout="this.style.zIndex=1;" />
<img class="card" style="top:74px; left:10px; z-index:2;" src="images/pokerKs.png" alt=""
onmouseover="this.style.zIndex=6;" onmouseout="this.style.zIndex=2;" />
...
nl avec xHTML 2.0 ou l'élément nav avec HTML 5...
div#menu ul { /* div#menu > ul */
list-style-type : none;
}
div#menu a:hover {
color : #6060C0;
background-color : #EFEFFF;
font-style : oblique;
}
/* div#menu li > ul */
div#menu li ul {
display : none;
}
/* div#menu li:hover > ul */
div#menu li:hover ul {
display : block;
list-style-type : none;
list-style-position : inside;
}<script type="text/javascript" >
function ssmenu(id) {
var element = document.getElementById(id);
var display = element.style.display;
if (display == 'none') {
element.style.display = 'block';
}
else {
element.style.display = 'none';
}
}
</script>
li en élément intégré et éventuellement l'associer à un positionnement flottant.
ul { border:solid thin red; margin:0px;padding:5px;
list-style-type:none; }
li { display:inline; border:solid thin; padding:2px; }
<ul>
<li>Fichier</li><li>Edition</li><li>Affichage</li><li>Aide</li>
</ul>
<?xml version="1.0" ?> <frac> <numerateur>1</numerateur> <denom>x <sup>n</sup></denom> </frac>
innerHTML, style, ... getAttribute(), setAttribute(), ...<script type="text/javascript">
function modifierNoeud(id) {
var element = document.getElementById(id);
element.setAttribute("style", "background-color : red;");
}
</script>
<div id="noeudTest">Test</div>
<div onmouseover="modifierNoeud("noeudTest")>Survol réactif</div>
if (window.XMLHttpRequest) // Objet de la fenêtre courant
{
xhr = new XMLHttpRequest(); // Firefox, Safari, ...
}
else
if (window.ActiveXObject) // Version Active
{
xhr = new ActiveXObject("Microsoft.XMLHTTP"); // Internet Explorer < 7
}
else {
alert("Votre navigateur ne supporte pas les objets XMLHttpRequest.");
}void open(String method, String url, [boolean async = true, String user = "", String passwd = ""]); : initialise une requête (méthode, url, ...)void send([data]); : Envoie une requête HTTP au serveur, transmet éventuellement des données sous forme d'une chaîne ou d'une objet DOM.void abort() : annule la requête courantereadyState<script type="text/javascript">
if (window.XMLHttpRequest) // Objet de la fenêtre courant
{
xhr = new XMLHttpRequest(); // Firefox, Safari, ...
}
else {
alert("Votre navigateur ne supporte pas les objets XMLHttpRequest.");
}
xhr.open("GET","fichier.txt");
xhr.onreadystatechange = function() {
if (xhr.readyState==4) {
var reponse = confirm(xhr.responseText);
alert(reponse);
}
}
xhr.send();
</script>xhr.open("GET","fichier.php");
xhr.onreadystatechange = function() {
if (xhr.readyState==4) {
confirm(xhr.responseText);
}
xhr.send();<?php
header("Content-Type: text/plain");
echo "Ceci est le contenu produit par le fichier.php
accédé via XMLHttpRequest, voulez vous continuer ?";
?><script type="text/javascript">
xhr.open("GET","fichier.php");
xhr.onreadystatechange = function() {
if (xhr.readyState==4) {
var texteMessage = xhr.responseText;
var liMessage = document.getElementById("message");
alert("Abracadabra");
liMessage.style.display = "list-item";
liMessage.innerHTML = texteMessage;
}
}
xhr.send();
</script>xhr.open("GET","allerRetour.php?info1=chaine&info2=3");
xhr.onreadystatechange = function() {
if (xhr.readyState==4) {
alert(xhr.responseText);
}
}
xhr.send();<?php
header("Content-Type: text/plain");
if (isset($_GET['info1']) && isset($_GET['info2'])) {
echo "Le serveur a reçu info1=";
echo $_GET['info1'];
echo " et info2=";
echo $_GET['info2'];
}
?>send() et la méthode POSTxhr.open("POST","allerRetour2.php");
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (xhr.readyState==4) {
alert(xhr.responseText);
}
}
xhr.send("info1=chaine&info2=3");<?php
header("Content-Type: text/plain");
if (isset($_POST['info1']) && isset($_POST['info2'])) {
echo "Le serveur a reçu info1=";
echo $_POST['info1'];
echo " et info2=";
echo $_POST['info2'];
}
?>$("p") sélectionne tous les éléments p d'une pageonXxxx posent de nombreux problèmes :
function initEventHandlers() {
document.getElementById(id1).onclick = fonctionClick;
document.getElementById(idForm).onsubmit = fonctionForm;
...
}
}
window.onload = initEventHandlers;
EventTargetaddEventListener(type, listener, useCapture)removeEventListener(type, listener, useCapture)type : événement concerné : click, mousedown, mouseover, ..., DOMFocusIn, ..., keypress, ...listener : fonction de traitementuseCapture false (bouillonnement par défaut)
function initEventHandlers() {
var cells = document.getElementsByTagName('td');
var nbCells = cells.length;
for(var i=0; i<nbCells; ++i) {
var cell = cells.item(i);
cell.addEventListener('click',taquin,false);
}
}
window.addEventListener('load',initEventHandlers,false)
function taquin(e) {
var cell = e.target;
...
}
$ : permet d'accéder plus facilement aux éléments du DOM$A : enrichie l'utilisation des tableaux (objets Array)$H : pour les tableaux associatifs$F : pour les valeurs des champs de saisie$R : permet de manipuler des intervalles de valeur $$ : récupère tous les éléments correspondant à des sélecteurs CSS $w : pour générer aisément des listes de mots.$$(id) // objetÉtendu $(obj) // objetÉtendu $(id1, id2, obj) // tableau d'objetÉtendus
var cells = $('case1', 'case2', 'case3'); initialise un tableau d'objetÉtendus$A$A enrichit l'utilisation des objets Array
$A(obj) // retourne un tableautoArray()$A(['un', 'exemple', 'basique'])
var objArrayisable = {
premier: 'un',
deuxieme: 'autre',
dernier: 'exemple',
toArray: function { return [this.premier, this.deuxieme, this.dernier]};
};
$H, $F et $R$H crée un objet Hash qui gère les tableaux associatifs$F unifie l'accès à la valeur des champs de formulaire (attribut value effectivement sélectionné)
$F(element) // valeur de l'élément ou tableau de valeurs (sous forme de chaînes de caractères)$R génère un objet ObjecctRange qui représente un intervalle de valeur pour n'importe quel objet fournissant une méthode succ()
var intervalle = $R(1,39);
$$ et $w$$ récupère tous les éléments correspondant à des sélecteurs CSS
$$('h1 + div.diapo') // tableau d'objeEtendus de div de classe diapo et ayant h1 en frère$w fonction gadget permettant de créer rapidement un tableau de chaînes de caractères
var nomsChamps = $w('case1 case2 case3');clone, inspect, isArray, isDate, isElement, isFunction, isHash, isNumber, isString, isUndefined, keys, toHTML, toJSON, toQueryString, values prennent un objet en paramêtre.extend prend un objet destination et un objet source en paramêtres et transmet les propriétés de la source à la destinationcamelize() permet de passer facilement d'un nom de propriété CSS à son équivalent DOM level 2
$("background-color").camelize() // retourne "backgroundColor"first(), last(), indexOf(Obj), ...Ajax.Request()Ajax.Response()Ajax.Updater()Ajax.PeriodicalUpdatervar req= new Ajax.Request('allerRetour2.php',
{
method:'post',
parameters: "info1=chaine&info2=3",
onComplete: function(reponse) {
alert("La reponse est : "+ reponse.responseText);
}
});
<script src="../../lib/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
function afficheMessage(e) {
var cell = e.target;
var dest = $("affichage"); // selection via un identifiant
dest.innerHTML=cell.innerHTML;
}
function initEventHandlers() {
var cells = $$("ul > li"); // selection via un selecteure css
for(var i=0; i<cells.length; ++i) {
var cell = cells[i];
cell.addEventListener('mouseover',afficheMessage,false);
}
}
window.addEventListener('load',initEventHandlers,false);
</script>
jQuery() ou plus simplement avec $()$("p")
$("#menu li")
$("div.diapo")
$("//ul/li[position()=2]")
$("tr:even")
$(":input");css()
$("p").css("color");$("p").css("color","red");$("p").css({'color' : 'red', 'font-weight' : 'bold';});text() retourne ou définit le contenu textuel d'un élémentval() retourne ou définit la valeur d'un élément (de formulaire)html() retourne ou définit le contenu d'un élémentclick(), focusIn(), hover(), keypress(), ... $(document).ready(function() {
$("div").click(function() {
alert("Boite de dialogue inutile !");
});
});$.ajax(propriétés) utilise en paramètre un objet associés aux propriétés (async,beforeSend, complete, contentType, data, dataType, error, global, ifModified, processData, success, timeout, type, url) configurant l'appel AJAX
$.ajax({
type: 'POST',
url: 'allerRetour2.php',
data: "info1=chaine&info2=3",
success: fonctionRappel
});
function fonctionRappel(reponse) {
alert("La reponse est : "+ reponse);
}
$.get(url, params, callback, type) et $.post(url, params, callback, type) simplifient (et limitent) les traitements.$(document).ready(function() {
$("#jqdeux").delay(800).slideUp().delay(1600).fadeIn();
$("#jqtrois").delay(2400).fadeIn();
$("#jqquatre").delay(3200).animate({
opacity: 0.25,
left: '+=50',
height: 'toggle'
}, 5000, null);
});
<script src="../../lib/jquery-1.9.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("li").mouseover(function(event) {
var cell = event.target;
var dest = $("#affichage");
$("#affichage").text(cell.innerHTML);
$("#affichage").css("border","purple dashed thick");
$("#"+event.target.id).slideUp();
});
});
</script>
[
{"couleur":"spades", "hauteur":"A"},
{"couleur":"hearts", "hauteur":"Q"},
{"couleur":"hearts", "hauteur":"10"},
{"couleur":"club", "hauteur":"J"},
{"couleur":"diams", "hauteur":"K"}
][5, 12, 30.4] ["rouge", "vert", "bleu"]
{"couleur" : "spades", "hauteur" : "A"}
var asPique = JSON.parse('{"couleur" : "spades", "hauteur" : "A"}')var chaineJSON = JSON.stringify(asPique)
var asPique = JSON.parse('{"couleur" : "spades", "hauteur" : "A"}');
var reineCoeur = {"couleur" : "hearts", "hauteur" : "Q"};
var chaineJSON = JSON.stringify(reineCoeur);
console.log("AsPique : "+asPique);
console.log("reineCoeur.couleur : "+reineCoeur.couleur+"\nreineCoeur.hauteur : "+reineCoeur.hauteur);
console.log("chaineJSON : "+chaineJSON);
jQuery.getJSON() est un racourci pour $.ajax({
dataType: "json",
url: url,
data: data,
success: success
});$.getJSON('test.json', function(data) {
var items = [];
$.each(data, function(key, val) {
items.push('<li id="' + key + '">' + val + '</li>');
});
$('<ul/>', {
'class': 'my-new-list',
html: items.join('')
}).appendTo('div#ajaxjson');
});