Les notions de bases JS

Les notions de bases JS :

javascript2

Les variables :

Tout d’abord nous allons voir les réglés de nommage des variables :

  • Un variable doit être commencée par une lettre (du a(A) à z(Z)), underscore(_) ou le signe dollar ($).
  • on peut utiliser des nombres après la première lettre, par exemple : v1, variable1, …
  • les variables JavaScript sont sensible à la casse, par exemple v et différente de V.

Nous avons deux types de variables dans JavaScript, locales et globales :

Variables Locales :

Une variable locale, est une variable qui est déclarée dans un bloc ou fonction.

Merci de noter que la variable v ne peut pas être utilisée en dehors du bloc ou fonction.

Variables globales :

Une variables globale, est une variable qui est reconnue dans tout le programme, ci-dessous un exemple :

Comme vous voyez la variable va est accessible depuis les fonction f1 et f2.

N.B : On peut déclarer une variable globale dans une fonction.
pour ce faire, nous avons besoin d’utiliser l’objet window, ci-dessous un exemple :

Comme vous voyez la variable va est declarée dans la fonction f() et on peut l’utiliser dans la fonction f1().

First exemple JavaScript

First exemple JavaScript :

javascript2

3 places sont utilisées pour insérer du code JavaScript :

  • Entre la balise body du code HTML.
  • Entre la balise head du code html.
  • Dans un fichier externe (*.js).

Entre la balise body du code HTML :

Tout simplement pour utiliser du code JS entre la balise body, nous devons utiliser la balise script, ci-dessous un exemple :

Entre la balise head du code html :

On peut par exemple créer une méthode dans la partie head et on fait appel à cette méthode dés qu’on aura besoin, ci-dessous un exemple :

Dés qu’on aura cliqué sur le bouton la méthode sera invoquée.

Dans un fichier externe (*.js) :

Pour la séparation et réutilisation du code on a la possibilité de faire le code JS dans un fichier externe, ci-dessous un exemple :
message.js

page.html

 

Installation de Bootstrap 3

Téléchargement de Bootstrap 3

Pour utiliser la bibliothèque Bootstrap dans votre projet, il existe plusieurs méthodes, chacune correspondant à un niveau d’expertise et des cas d’utilisation.
Pour faire simple, rendez-vous sur le site officiel à l’adresse suivante : http://getbootstrap.com/getting-started/#download. Cliquez sur le bouton Download Bootstrap. Une fois l’archive téléchargée et décompressée dans un dossier appelé Bootstrap3 par exemple, la structure de fichier ci-dessous apparait :

Le dossier Bootstrap3 (dans lequel vous avez décompressé le fichier téléchargé), contient trois dossiers: css, js et font où chacun d’eux contient un certain nombre de fichiers.

Contenu et role des fichiers de Bootstrap 3

Dossier Fichier Description
css bootstrap.css feuille de style de Bootstrap.
bootstrap.min.css version minimisée de la feuille de style bootstrap.css.
bootstrap-theme.css feuille de style additionnelle contenant des éléments provenant de Bootstrap 2.
bootstrap-theme.min.css version minimisée de la feuille de style bootstrap-theme.css.
js bootstrap.js fichier JavaScript de Bootstrap.
bootstrap.min.js version minimisée du fichier JavaScript bootstrap.js.
font glyphicons-halflings-regular.eot Fichiers de police contenant la bibliothèque d’icônes Glyphicon
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

Comme vous l’avez certainement remarqué, les fichiers css et js existent en deux exemplaires : les originaux et les minimisés.

Qu’est ce qu’un fichier css/js minimisé?

Un fichier css/js  minimisé est un fichier qui reprend le même contenu du fichier original en supprimant tous les sauts de ligne, commentaires et espaces inutiles.

Pour des raisons de performances, on opte souvent pour les fichiers minimisés dans les environnements de production et les fichiers originaux pendant la phase de  développement.

Avantages et inconvénients d’un fichier css/js minimisé:

Lorsqu’on utilise les fichiers minimisés dans nos projets, les pages web qui l’utilisent, bénéficient d’un temps de chargement beaucoup plus amélioré par rapport aux pages utilisant les fichiers originaux, cela est dû, à la taille des fichiers après leur minimisation (suppression de tous les sauts de ligne, commentaires et espaces inutiles).

Cependant, un fichier minimisé est difficile à lire et à modifier.

Installation de Bootstrap 3

Bootstrap utilise JQuery pour fonctionner, nous vous conseillons de télécharger la dernière version de JQuery en vous rendant sur le site officiel de cette bibliothèque: http://jquery.com/ . Copiez le fichier téléchargé dans le dossier js de Bootstrap.