Introduction
Pour publier votre site sur Internet, il faut avant tout un fournisseur d´accès (serveur).
*********************************
Logiciels
*********************************
Méthodologie
.
*********************************
Gestion
*********************************
Belgacom et autres
Les bases html
Le langage html ( Hyper Text Markup Language) est un langage simple, utilisé pour batir les pages d´un site Internet.
Il est principalement constitué de balises utilisées généralement par paire – une balise d´ouverture <html> du code et une balise de fermeture </html>
Vous trouverez une liste très complète des balises html sur aliasdmc.fr
Pour réaliser du code html il vous faut juste Notepad++ très pratique car les couleurs vous signalent les erreurs de code et en plus il est gratuit.
Si vous ne l´avez pas encore cliquez sur ce lien: Notepad++
Une page contient au minimum :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Aide aux débutants sur internet">
<meta name="keywords" content="site,javascript,html,javascript,débutant,tutorial,tutoriel,conseils,guide">
<title>Tutoriel – Tutorial HTML pour débutants</title>
</head>
<body>
</body>
</html>
Le Doctype doit être mentionné pour le bon fonctionnement de certains scripts.
Le title est très important pour le bon positionnement dans les moteurs de recherche,
ainsi que les balises meta: description et keywords.
J'ai employé ici Tutoriel bien qu´il ne figure pas dans le Larousse ( Tutorial étant le mot correct) car ce mot est utilisé par de nombreux internautes pour la recherche.
Le title doit être aussi explicite que possible sans être TROP long.
Les caractères spéciaux ne sont pas compris ou interpretés de la même façon par tous les navigateurs, alors il faut les remplacer par leur code html ou par leur code iso.
Vous trouverez une liste très complète des codes caractères html et iso sur toutimages.com
La partie head peut contenir:
– du code javascript ou un lien vers une page de code javascript avec l´extention .js
– du code css qui règle la mise en page et que nous verrons en détail plus loin ou un lien vers une page de code css avec l´extention .css
La partie body contiendra tout ce qui va apparaitre sur la page.
*********************************
Les bases Javascript
C´est un langage qui permet d´exécuter des commandes au niveau du navigateur et ne dépend pas du serveur.
Ne pas confondre avec le JAVA qui nécessite un compilateur et ralenti fortement le chargement d´une page.
Pour réaliser du code Javascript il vous faut juste Notepad++ très pratique car les couleurs vous signalent les erreurs de code et en plus il est gratuit.
Si vous ne l´avez pas encore cliquez sur ce lien: Notepad++
A retenir :
Le javascript est sensible à la casse (majuscule ou minuscule).
On peut écrire un script (portion de code réalisant une action) dans la partie HTML:
– Section Head ou section Body.
Il faut alors une balise d´ouverture <script type="text/javascript> ...code ...</script>
et une balise de fermeture.
ou dans un fichier JS séparé.
Dans ce cas ce fichier doit être référencé dans la partie Head par:
<script type="text/javascript" src="nom du fichier.js"></script>
Il ne faut pas mettre les balises <script> et </script> dans un fichier .js
Les variables
Une variable est constituée d´une ou plusieurs lettres et éventuellement de chiffres.
Elle ne peut JAMAIS commencer par un chiffre ni contenir des caractères spéciaux.
Une variable est destinée à contenir des données qui pourront ensuite être manipulées.
Une variable peut être déclarée de plusieurs façons avant d´être utilisée.
- avec la mention var au début du script. Elle est alors GLOBALE et peut être utilisée n´importe
où dans le script. Elle a un scope global.
- avec la mention var dans une fonction. Elle est alors LOCALE et n'existe pas en dehors de la
fonction. Elle a un scope local.
- de façon implicite en étant utilisée dans une fonction sans avoir été déclarée auparavent.
Elle est alors d'office GLOBALE.
Les variables sont très importantes dans un script et il est impératif de comprendre parfaitement leur mode de fonctionnement pour éviter les erreurs.
Il ne suffit pas de déclarer une variable, il faut aussi créér une instance.
Pour cela il faut lui donner une valeur, rien ne vaut quelques exemples:
1 - On déclare une variable nommée "coucou" de façon implicite dans la fonction "test".
et on la consulte ensuite dans la fonction "test2". Cliquez sur le bouton "fonction test2".
<head>
<script type="text/javascript">
function test() {
coucou = "bonjour";
}
function test2() {
alert(coucou);
}
</script>
</head>
Rien ne se passe, la variable n´est pas instanciée.
Maintenant cliquez dabord sur "fonction test" puis sur "fonction test2".
Résultat: bonjour. La variable est bien GLOBALE puisqu´on peut la consulter dans une autre fonction.
2 - On déclare une variable nommée "bon" de façon explicite en tête de script en lui donnant une valeur, une variable "hello" et une variable "locale" avec la mention var dans la fonction "test3".
Ensuite on les consulte ensuite toutes les trois.
<head>
<script type="text/javascript">
var bon = 89;
var hello;
function test3() {
var locale = 27;
hello = "bonjour";
alert(hello);
alert(locale);
}
function test4() {
alert(bon);
alert(locale);
}
</script>
</head>
Résultat:
test3 : bonjour - GLOBALE instanciée
27 - LOCALE.
test4 : 89 - GLOBALE instanciée
rien - LOCALE accessible uniquement dans la fonction "test3".
Conclusions:
– Il est préférable de déclarer toutes les GLOBALES en tête de script en leur donnant une valeur.
On peut voir très vite quelle variable est GLOBALE et on évite les appels de variables
non instanciées qui retournent la valeur "undefined".
– Il ne faut déclarer une variable GLOBALE que si elle doit pouvoir être consultée ou modifiée
dans plusieurs fonctions.
Les types de variables
– nombre entier ou à virgule flottante
a =162;
a = 16.2;
a = "bonjour";
– array variable simple qui contient plusieurs valeurs
a = (162,17,12);
a = alert;
a(Hello");
La variable a est alors une fonction.
– object
Un object est un genre spécial de donnée, avec une collection de propriétés et de méthodes.
Le type est déterminé par le navigateur et ne doit pas être déclaré
NB, la virgule d´un nombre décimal est représentée par un point.
Les opérateurs
- Opérateur d´affectation.
= |
affecte à l´élément de gauche la valeur de |
x = 8 |
8 |
- Les opérateurs mathématiques.
Pour y = 5
+ |
x = y + 2 |
donne |
x = 7 |
- |
x = y - 2 |
donne |
x = 3 |
* |
x = y * 2 |
donne |
x = 10 |
/ |
x = y / 2 |
donne |
x = 2.5 |
% |
x = y % 2 |
donne |
x = 1 modulo donne le reste de la division |
y++ |
|
donne |
6 incrémente y de 1 |
y-- |
|
donne |
4 décrémente y de 1 |
Comme ce tutorial s´adresse aux débutants, seuls les plus courants sont repris.
- Les opérateurs comparatifs.
Pour x = 5
== |
est égal à |
x == 8 |
false |
=== |
est exactement égal à |
x === "5" |
false |
!= |
n´est pas égal à |
x != 9 |
true |
> |
est plus grand que |
x > 4 |
true |
< |
est plus petit que |
x < 5 |
false |
>= |
est plus grand ou égal à |
x >= 4 |
true |
<= |
est plus petit ou égal à |
x <= 5 |
true |
- Les opérateurs logiques.
Pour x = 5; y = 3;
&& |
et (and) |
vérifie que toutes les conditions sont vraies |
(x>2) && (y<10) est true |
|| |
ou (or) |
vérifie qu´une des conditions est vraie |
(x==2) || (y==10) est false |
- Opérateur conditionnel.
NomDeVariable=(condition) ?valeur1:valeur2;
var salutation=(visiteur=="papa") ?"Cher papa ":"Monsieur ";
Si la variable visiteur est papa, la variable salutation aura la valeur Cher papa.Sinon la variable salutation aura la valeur Monsieur.
Les chaines de caractères.
Les chaines ( string) sont déclarées de la façon suivante:
var chaine = ""; ou var chaine = '';
Propriété
length
La seule propriété de l´objet string est: .lenght qui donne la longueur de la chaine ou nombre de caractères y compris les espaces.
var chaine = "je suis parti";
var a = chaine.lenght;
Méthodes.
concat()
La concaténation assemble 2 ou plusieurs chaine en une seule.
var chaine1 = "chien ";
var chaine2 = "de race";
var chaine = chaine1.concat(chaine2);
// ou beaucoup plus simple: var chaine = chaine1 + chaine2;
charAt()
Pour extraire un caractère d´une chaine.
var chaine = "chien";
var chaine1 = chaine1.charAt(2);
substr(x,y)
Pour extraire une sous-chaine dans une chaine.x = l´indice du 1er caractère et y la longueur de la sous-chaine.
var chaine = "chien de race";
var chaine1 = chaine.substr(0,5);
var chaine2 = chaine.substr(6,2);
var chaine3 = chaine.substr(9,4);
chaine2 = de
chaine3 = race
substring(x,y)
Même chose que la précédente maisx = l´indice du 1er caractère et y l´indice du dernier + 1 ( non inclus).
var chaine = "chien de race";
var chaine1 = chaine.substring(0,5);
var chaine2 = chaine.substring(6,8);
var chaine3 = chaine.substring(9,13);
chaine2 = de
chaine3 = race
indexOf()
Donne la position de la première occurence d´une sous-chaine à partir de la position indiquée en second paramètre.
var chaine = "www.progvbjlr.net";
var sous_chaine = ".";
var chaine1 = chaine.indexOf(sous_chaine,6));
lastIndexOf()
Donne la position de la dernière occurence d´une sous-chaine en recherchant à partir du dernier caractère.
var chaine = "www.progvbjlr.net";
var sous_chaine = ".";
var chaine1 = chaine.lastIndexOf(sous_chaine));
Exemple d´utilisation combinée de substr et lastIndexOf pour récupérer une extention de fichier.
var chaine = "www.progvbjlr.net";
var sous_chaine = ".";
var chaine1 = chaine.substr(eval(chaine.lastIndexOf(sous_chaine)+1),3);
Transformer une variable chaine en nombre ( 3 méthodes)
eval()
Transforme une variable chaine en nombre avec décimales et accomplit les calculs ou les actions si nécessaire
var chaine = "x = 226.35;y = 32;x + y;";
var chaine1 = eval(chaine);
Remarque: cet exemple pour mémoire car pour cette action il vaut mieux ne pas utiliser eval qui invoque une nouvelle instance de parseur Javascript (ce qui est très couteux en performances).
Le même résultat est obtenu plus avantageusement avec parseFloat ci-dessous.
parseFloat()
Transforme une variable chaine en nombre avec décimales
var chaine = "226.37";
var chaine1 = parseFloat(chaine);
parseInt(chaine,base)
Transforme une variable chaine en entier, base 10 pour décimal et 16 pour hexadécimal.
var chaine = "226.37";
var chaine1 = parseInt(chaine,10);
toString()
Transforme un nombre en variable chaine. Utile pour extraire une partie du nombreDoit être ensuite transformé en nombre pour effectuer des opérations.
var chaine = 226.37;
var chaine1 = chaine.toString();
toUpperCase()
Met une chaine en majuscules.
var chaine = "bonjour";
var chaine1 = chaine.toUpperCase();
toLowerCase()
Met une chaine en minuscules.
var chaine = "BONJOUR";
var chaine1 = chaine.toLowerCase();
Pour mettre la première lettre en majuscule.
var chaine = "bonjour";
var chaine1 = chaine.substr(0,1).toUpperCase();
var chaine2 = chaine.substr(1);
var chaineup = chaine1 + chaine2;
Objects
Le javascript est un langage orienté objet et il en comporte un grand nombre comme String, Date,Array etc... mais en plus il nous permet de créér nos propres objets avec ses propriétés et méthodes.
Propriétés
Pour accéder aux Propriétés d´un objet:
nomObjet.nomPropriété
On ajoute une propriété à un objet en lui donnant simplement une valeur.
employe.prenom="Jules";
employe.nom="Dupont";
employe.age="27";
Méthodes
Pour appeler une méthode:
nomObjet.nomMéthode()
Créér un objet
Il y a plusieurs façons de créér un objet.
1 – Créér une instance directe d´un objet.
animaux = newObject();
animaux.type="chien";
animaux.race="basset";
animaux.nom="Medor";
2 – Créér un constructeur d´objet.
function animal(nom,race,couleur)
{
this.nom=nom;
this.race=race;
this.couleur=couleur;
}
On peut maintenant créér de nouvelles instances de l´objet animal.
var monChien = animal("Bobby","fox""noir et blanc",);
var monChat = animal("Minet","angora","brun");
Conditions
if
if ( si) condition est vraie exécuter code 1
else if (sinon si) condition 2 est vraie exécuter code 2
else (sinon) exécuter code 3
function mafonction()
{
var a = 15;
if (a < 10)
{
ici le code 1
}
else if (a > 10 && a< 16)
{
ici le code 2
}
else
{
ici le code 3
}
}
switch
function mafonction()
{
var a = Math.floor(Math.random()*3)+1;
switch (a)
{
case 2:
ici le code 1
break;
case 3:
ici le code 2
break;
default:
ici le code 3
}
}
conditionne l´exécution du code 1, 2 ou 3.
Les boucles
Les boucles sont utilisées pour exécuter une action répétitive.
for
On emploie la boucle for quand le nombre de répétitions est connu.
for (var i = 1;i < 21;i++)
{
ici le code
}
while
On emploie la boucle while quand elle doit se répéter jusqu´à ce qu´une condition soit vraie..
var a = 0;
while (a >= 60)
{
ici le code
a = a + 2;
}
Les fonctions
Une fonction est destinée à exécuter une action ( calcul, action, modification ...)
Elle ne s´exécute pas automatiquement au chargement de la page mais uniquement quand elle est appelée.
La structure d´une fonction est la suivante:
function nomdelafonction(paramètre 1,paramètre 2,...)
{
ici le code
}
Pour appeler une fonction par exemple à l´aide d´un bouton de formulaire:
onclick="nomdelafonction();"
On peut aussi l´appeler à partir d´une autre fonction avec:
nomdelafonction();
Le ; signale au navigateur que l´instruction est terminée et qu´il doit l´exécuter.
Exemple de fonction qui renvoie un résultat avec l´instruction return d´après un paramètre reçu.
<head>
<script type="text/javascript">
function cube(entier) {
var a = entier * entier * entier;
return a;
}
function test() {
var b = 4;
var rep = cube(b);
}
</script>
</head>
var rep = 64
Array
Une Array est une variable simple qui peut contenir un grand nombre d´éléments.
var myArray = [];
myArray[0] = "bonjour";
myArray[1] = "Camille";
myArray[2] = "Arthur";
function initq(iRows,iCols)
{
var i;
var j;
var a = new Array(iRows);
for (i=0; i < iRows; i++);
{
a[i] = new Array(iCols);
for (j=0; j < iCols; j++)
{
a[i][j] = "";
}
}
return(a);
}
var questions = initq(21,6);
questions[1][1] = "1 est à 2 ce que 3 est à .";
questions[1][2] = "images/quest1.gif";
questions[1][3] = "images/imq1.gif";
questions[1][4] = "D";
questions[1][5] = "La 2eme figure";
questions[2][1] = "bla bla";
Ne pas oublier que la première est questions[0][0]
Ce tutorial vous a présenté les bases du Javascript qu´il est indispensable d´avoir assimilées avant de passer à des méthodes d´écriture de script plus évoluées comme par exemple l´utilisation de prototype.js.
*********************************
Autres
*********************************
Décoration
*********************************
Contenu
*********************************
