[Tuto debutant] Javascript et le css

présentation de la structure du tutoriel:

I) Présentation + invitation du javascript a se joindre a nous
II) Quelques notions supplémentaires de xhtml
III) Quelques notions supplémentaires de CSS
IV)Les fonctions et variables

bon courage et n'hésitez pas avec les questions par MP de perference.

I.a) Présentation

Le javascript ça sert a quoi ?

Tout simplement a rendre votre site plus attractif, faire des effets a vos menus, messagerie, formulaire, tableaux et plein d'autre choses ( et encore je ne vous parle que de l'association javascript/CSS )

Vous avez surement déjà vu sur un site que quand vous cliquez sur un lien un effet se passe par exemple l'apparition d'une boite de texte, ou simplement un changement d'image en fonction du lien sur lequel vous vous trouvez. Et la magie du javascript c'est qu'il permet de faire ces choses sans recharger toute la page.

Plus tard si les administrateurs le veulent bien nous parlerons d'ajax qui fait le même genre de chose et même un peu plus mais avec une association javascript/php. C'est cette association qui est appelé ajax, ce dernier est une technique et non un langage comme certain(e)s le pensent.

I.b) Invitation du javascript a se joindre a nous

ce chapitre va être un peu plus court il y a deux méthodes pour utiliser le javascript et les deux se passent entre les balises

Code:: <head> </head>

(cf le tuto de html à élo).

La première : on créer une page vide dans notepad que l'on nomme (par exemple) main.js (c'est le .js qui est important) vous pouvez la mettez au même niveau que la page index de votre site.
ensuite dans la page index(.html ou .php) on va insérer la page main.js à notre page index en ajoutant entre les balises

Code:: <head> </head>

la ligne suivante :

Code:: <script type='text/javascript' src='main.js' ></script>

et voila il ne vous restera plus qu'a ajouter votre script en javascript dans la page main.js

La seconde : cette fois ci on va integrer notre code javascript directement dans la page index de la facon suivante, toujours dans la balise head ajoutez

Code:: <script type='text/javascript'>
/* ici votre code javascipt */
</script>

voila pour l'intégration Wink

II) notions supplémentaires en xhtml

on va voir une petite balise supplémentaire la div elle est très utilisée Wink

il suffit de mettre les balise

Code:: <div></div>

par exemple :

Code:: <div >du texte tant que vous en voulez</div><div >redu texte tant que vous en voulez</div>

elle va vous faire afficher les deux textes l'un en dessous de l'autre (par défaut)

mais ce n'est pas ce qui va nous intéresser, nous on va s'intéresser au fait qu'on va lui ajouter un id par exemple :

Code:: <div id='text'>du texte</div>

et meme que l'on va lui ajouter du style directement dessus sans passer par une feuille de style. Nous ferons ca car nous allons cibler notre travail sur certaines div et aps les autres c'est pourquoi nous choisirons des id différents pour chaque div.
petit exemple d'une div avec un id et du style directement dessus :

Code:: <div id='special' style='color:green; width:100px;'>du texte , du blabla et plein de truc complètement inutiles pour l'instant ce n'est qu'un exemple</div>

cette petite div va nous donner un truc qui resemblera a ca :

du texte , du
blabla et plein
de truc
complètement
inutiles pour
l'instant ce
n'est qu'un
exemple

c'est a dire un texte vert avec une largeur de 100px (px = pixel)

voila pour le supplément de html et introduction à la suite

III) Quelques notions supplémentaires de CSS
pour les differentes proporiétés ce sera presenté de la facon suivant :

propriete : valeurpossible1 | valeur2 | valuer3 ;

nous allons voir ensemble quelques trucs en plus en css:

afficher ou non l'intérieur de la balise cnocernée
display : block | none;

largeur (XX = un nombre)
width: XXpx | XX%;

heuteur (XX = un nombre)
height: XXpx | XX%;

la liste s'agrandira au fur et a mesure

IV)Les fonctions et variables

Un fonction qu'est ce que c'est ?
c'est une suite de ligne de code qui s'exécuteront lorsque vous le lui demanderez.
un petit exemple :

Code:: <script type='text/javascript'>
function erreurvoulue(){
alert("Dans la fonction");
}

alert("A l'exterieur de la fonction");

</script>

dans ce petit bout de code, lorsque vous allez charger votre page un petite fenêtre va apparaitre avec marqué " A l'exterieur de la fonction " mais vous n'aurez pas l'autre texte car nous n'appelons pas la fonction.

Oui mais tu t'es pas tromper ?? t'as marquer function et pas fonction ...
Vous inquiétez pas je relit mes tutos ^^ c'est normal comme tous les langages c'est en anglais. donc fonction devient function.

alert();

est l'appel d'une fonction qui existe par défaut avec javascript elle vous affiche une petite "popup" avec en texte ce que vous mettez a l'intérieur.

vous inquiétez pas nous allons voir quelques fonctions de base plus tard.

vous vous demandes peut être comment afficher le texte de la fonction ? non?
bein je vus le dit quand meme vous avez 2 solutions :

soit faire un lien :

Code:: <a href='javascript:erreurvoulue()'> lancer l'alerte fonction</a>

soit :

Code:: <script type='text/javascript'>

erreurvoulue()

</script>

et a ce moment la ca vous affichera " Dans la fonction "

voila pour le principe, maintenant voyons la structure d'une fonction.

tout d'abord trouvez lui un nom explicite et sans accents par exemple voir_la_div
ce sera le nom de la focntion, ensuite il faut prevenir que c'est une fonction pour cela on va faire de notre nom :

Code:: function voir_la_div(){

}

vous avez pu remarque que l'on met de ( ) c'est parce que notre fonction peut avoir des éléments entrant nommés variables. De ce fait si vous n'en avez pas, ca reste vide ou des fois vous pourrez trouver (void) dans le cas contraire, vous pouvez avoir autant d'éléments entrant que vous le souhaitez
par exemple pour cette fonction nous allons définir au départ le nom de la div a voir, et un chiffre a mettre dans la div.

notre fonction ressemblera donc a ca :

Code:: function voir_la_div(nom,chiffre){

}

vous remarquerez que la fonction a ici 2 éléments entrant séparé par une "," c'est la seul chose qui puisse les séparer.

on av maintenant utiliser cette base pour faire un petit essai ouvrez votre bloc note créez un nouvelle page html et tapez ceci :

Code:: <html>
<head>
<script type='text/javascript'>
function voir_la_div(nom,chiffre){
document.getElementById(nom).innerHTML=chiffre;
document.getElementById(nom).style.display='block';
}
</script>
</head>
<body>
<a href='javascript:voir_la_div("test","256")'>Afficher la div avec le chiffre 256</a>
<div id='test' style='display:none'>
y'a pas de chiffre et de toute facon on ne verra pas ce texte sauf en lisant le code source de la page
</div>

</body>
</html>

Bien vous avez tester en lançant votre page html ?
c'est magique le chiffre apparait dans la div alors que le texte n'y était pas Oo

explication de ce que vous n'avez pas encore vu :
document => représente toute votre page

document.getElementById() => c'ets une fonction qui vous permet de selectionner une balise en fonction de son id ca marche pas que pour les div , essayez avec

Code:: <span id='test' style='display:none' ></span>
<p id='test' style='display:none' ></p>

document.getElementById(nom).innerHTML=> vous permet de modifier le contenu le contenu html de la balise

document.getElementById(nom).innerHTML=chiffre; => on change le texte existant par le texte enregistré dans la variable chiffre.

document.getElementById(nom).style=> indique que l'on va changer quelque chose dans le style de la div

document.getElementById(nom).style.display='block';=> change le display du style en block au lieu de none

document.getElementById(nom).style.color='red'; => si vous avez bien compris que va faire cette ligne de script ?

Spoiler:

voila vous devriez pouvoir créer les premiers effets sur votre site grace au javascript bon courage pour al suite Wink

» Commentaires et questions sur le tutoriel sur le javascript
» tuto js
» Commentaires et questions sur le tuto du css
» [Tuto niveau moyen] Les objets et PHP