JOSY AJAX - HTML5

De
Publié par

  • cours - matière potentielle : développement quelques
Magali Contensin Introduction JoSy AJAX et bibliothèques JS pour les ASR 3 novembre 2011 JavaScript DOM & CSS
  • numérotation bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bibliographie textes
  • html 4.01 séparation structure
  • bla bla bla
  • spécifications css 2.1 css
  • introduction josy ajax
  • navigateur syntaxe
  • var exp
  • classe :pseudo- classe
  • noyau du langage javascript 
  • présentation de javascript 
  • test de classe
  • javascript
  • css
  • styles
  • style
  • html
  • structures
  • structure
Publié le : lundi 26 mars 2012
Lecture(s) : 49
Source : resinfo.cnrs.fr
Nombre de pages : 41
Voir plus Voir moins

Introduction Ja vaScript
DOM & CSS
Magali Contensin

3 novembre 2011 JoSy AJAX et bibliothèques JS pour les ASR Plan
Introduction JavaScript, DOM & CSS
 Publication sur Internet : HTML & CSS
 Présentation de JavaScript
 ECMAScript : le noyau du langage JavaScript
 Manipulation des objets du document
 Des débuts du dynamisme au DOM
 Modifier une page web avec JS, DOM et CSS
 Formulaires
 Sécurité
 Outils

Publication sur Internet
HTML
 Contenu d’une page HTML  Mise en page
 navigateur : style par défaut objets
image, vidéo, son  avant HTML 4.0.1 :
 éléments et attributs de style
Titre texte
bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla <font color="red" size="4">…</font>
bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla <center>…</center>
bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla <h1 align="center">…</h1>
bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla tableau

 utilisation de tableaux bla bla bla bla bla bla
x t a d i l
y u b e j m  HTML 4.01
z V c f K n
bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla séparation structure / mise en forme liste bla bla bla bla bla bla bla bla bla bla bla bla :
 bla bla bla font, center, … deprecated  bla bla
 bla bla bla
bibliographie => feuilles de style CSS
lien hypertexte formulaire Publication sur Internet
Feuilles de style CSS
Textes : police, style, décoration, couleur,
Contrôler la présentation du document en
fonction du média (écran, imprimante, …)
alignement, espacement, …
Format visuel : position, Blocs : marges, cadre
flottant, visibilité, z-index couleur
Titre
bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla Spécifications
bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla CSS 2.1 bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla Tableaux :
bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla CSS 3 en cours de développement cadre, légende, bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla fond
bla bla bla bla bla bla
x t a d i l Quelques nouveautés CSS3 :
y u b e j m
Listes : puce, z V c f K n colonnes dégradé
numérotation bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
bla bla bla bla bla bla bla bla bla bla bla bla : effets sur le texte transparence
 bla bla bla
 bla bla rgba
 bla bla bla ombre transformations
Liens : couleur,
bibliographie
arrondi décoration
sélecteurs
Survol Fond : couleur, image pair/impair
(position, répétition,
BIBLIOGRAPHIE
attachement) Curseurs Publication sur Internet
Feuilles de style CSS
Priorités Le CSS peut être placé dans : Sélecteur
(1) fichier externe .css élément 1 <!DOCTYPE html PUBLIC style du
(2) élément style "-//W3C//DTD HTML 4.01//EN" navigateur 2 *
"http://www.w3.org/TR/html4/strict.dtd"> (3) attribut style
<html> #id 3 règle
<head>
externe 1 4 .classe <title>test CSS</title>
sélecteur { [déclaration ; ]+ }
<link rel="stylesheet" type="text/css" href="style.css"> :pseudo- 5
<style type="text/css"> propriété:valeur classe
<!-- 1
p { color:blue } p { font-family:Calibri; 1 global 2
em { color:red } color:purple;
-->
/* sélectionne les éléments p */
</style>
} </head> 3 local *.ex { /* éléments qui ont class=ex */ 2 4 <body>
border: 1px solid silver; <h1 style="text-align:center; color:navy">titre</h1>
<p>C’est un <em>test</em> de style.</p> } /* équivalent à .ex (* implicite) */
<p id="p2">Un 2eme <em>paragraphe</em></p> h1:hover { /* survol de h1 */ 1 5
<p class="ex" style="color:black">test de classe</p> background-color:#CCCCCC
</body>
} titre </html>
C’est un test de style. 3 #p2 { /* l’élément qui a id=p2 */
Un 2eme paragraphe préférences text-align:right;
test de classe
style.css utilisateur } Présentation de JavaScript

 Langage de programmation orienté-objet interprété par le navigateur
syntaxe proche de Java
 Histoire
 Netscape 2.0 JavaScript – mars 1996
 Microsoft IE 3.0 JScript (en partie compatible avec JS) – août 1996
 Rendu public par Netscape, standardisé par l’ECMA en juin 1997
 Evénementiel : permet de réagir à des actions de l’utilisateur
Ajout de dynamisme dans la page web
 Vérification de formulaires
 Avant CSS : roll-over, menus
 Modification de la structure, du contenu et du style de la page
 Deux parties :
 Syntaxe du langage : ECMAScript
 Manipulation des objets du document : DOM Présentation de JavaScript
insertion de code JS dans la page web
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html> function pair(){
<head> nb = prompt('entrez un nombre', ''); 1 <title>test JS</title> (nb%2 == 0) ? alert('pair') : alert('impair');
<script type="text/javascript" src="script.js"></script> }
</head> 1 script.js
<body>
<script type="text/javascript">
<!--
entrez un nombre function affiche_date(){
mercredi 26 octobre 2011 23:10:18 impair
var aujourdhui = new Date(); 2
alert(aujourdhui.toLocaleString());
}
// -->
</script>
<noscript><p>activez JS !</p></noscript>
<div> Le code peut être placé dans :
<h1>Test JS</h1>
hello
<a href="javascript:affiche_date()">date</a> (1) fichier externe .js 3 <a href="javascript:alert('hello')">hello</a>
<form action="test.php"> (2) élément script
<div><input type="button" value="clic" onclick="pair()"></div>
(3) attribut contenant URL </form>
4 </div>
(4) attribut événementiel </body>
</html> onclick, onchange, onselect,… ECMAScript
bases du langage
marque de fin d’instruction variable
types création objet var ne = 0; invocation boolean
var age = 0; number méthode
var txt = ''; string
var date_courante = new Date(); object
var annee_courante = date_courante.getFullYear(); null
var exp = /^[12]\d{3}$/; // format 1xxx ou 2xxx undefined opérateurs
/* tant que l'utilisateur n'a pas saisi une affectation commentaires
annee correcte afficher boite dialogue */ = += -= *= /= %=
do { logiques ! && ||
ne = prompt('annee ', ''); marques
relationnels de bloc
< <= > >= == != === !== } while ( !exp.test(ne ) || (ne > annee_courante));
arithmétiques + - */ %
age = annee_courante - ne;
concaténation +

autres opérateurs
txt= 'vous avez ' + age + ' ans';
incrémentation ++
(age%10 == 0) ? alert(txt+' ... nouvelle decennie') : alert(txt);
décrémentation --
opérateur conditionnel séquentiel ,
ternaire objets : this, in ECMAScript
bases du langage
 Instructions conditionnelles  Instructions itératives
if (expr){ while (expr){ do{
// code si expression true … …
} } } while (expr);
else {
// code si expression false
} for (exp1 ; exp2 ; exp3){
...
} var today = new Date();
switch (today.getDay()){
case 0 :
for (var i in objet){
case 6 : jour = "week-end"; break;
...
case 1 :
}
case 2 :
case 4 :
case 5 : jour = "semaine"; break;
case 3 : jour = "mercredi"; break;  Instructions d’interruption :
default : jour = "non defini";
break, continue
}
alert(jour); ECMAScript
bases du langage
 Fonctions  Mathématiques
Math
Déclaration
Ne peut pas être utilisé avec new
function nom_fonction([arg1,...,argN]){
...
Constantes return expression; // optionnel
}
Math.PI
Appel Méthodes
nom_fonction(*arg1, arg2, …+) ; ceil, floor, round
min, max
random Les arguments sont passés par valeur
abs, sqrt, pow Les objets sont passés par adresse
trigonométrie : sin, cos, …
alert(Math.ceil(7.48));
alert(Math.random());

Soyez le premier à déposer un commentaire !

17/1000 caractères maximum.