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

 

JSP, c’est quoi

JSP, c’est quoi ?
Java Server Pages (JSP) est une technologie de programmation côté serveur, elle permet de développer des pages Web dynamiques à partir d’un squelette HTML qui contient des bouts de code Java (scriptlets).
Une page JSP est transformée en classe Java puis compilée en Servlet par le serveur d’applications.

Architecture JSP
JSP-architecture (1)Avantages :
– Les JSP reposent sur un le langage JAVA(un langage de programmation puissant, portable, sécurisé…).
– Si la page JSP est modifiée, nous n’avons pas besoin de recompiler et redéployer le projet.
– Une très bonne intégration du code Java et du HTML.

Inconvénients :
– La technologie JSP demandera un serveur plus puissant avec plus de mémoire pour avoir des temps de réponses rapides.

Création d’une Servlet

Une Servlet est une classe java qui a pour fonction de répondre à une requête d’un client en lui fournissent une réponse. Donc pour créer une Servlet nous avons besoin des éléments suivants :

  • Fichier jar “Servlet.jar”
  • Déclarer la servlet dans le descripteur web “web.xml”
Déclaration d'une servlet dans le descripteur web "web.xml"

Déclaration d’une servlet dans le descripteur web “web.xml”

Nous avons deux importantes balises servlet et servlet-mapping :

– La balise servlet :

servlet-name : le nom de la servlet.
servlet-class : l’emplacement de la classe, si par exemple la servlet existe dans un package”com.opentuto” on devrait écrire <servlet-class>com.opentuto.Tuto</servlet-class>

– La balise servlet-mapping :

servlet-name : le nom de la servlet.
url-pattern : c’est l’url qu’on écrit dans le navigateur web pour accéder à notre servlet (on peut écrire ce qu’on veut, pas forcément le nom de la servlet).

Dans une Servlet, nous avons deux principales méthodes doGet() & doPost().

doGet   : Une requête de type GET est utile avec des liens.
doPost : Une requête de type POST est utilisée avec un formulaire HTML.

Ci-dessous un exemple d’une Servlet :

Résultat :
2015-02-15_221033

 

Première page HTML avec Bootstrap 3

Apres avoir installé Bootstrap 3 sur votre ordinateur, vous vous disposez donc de tous les éléments nécessaires à la création de votre première page HTML avec Bootstrap 3.
Le code ci-dessous vous permet de créer votre première page HTML avec Bootstrap 3:

Explication du code:

Depuis sa deuxième version, Bootstrap vous offre la possibilité d’activer/désactiver le mode responsive à l’aider de la balise <meta>. Ajoutez la balise <meta> dans le <head> de votre page web pour activer le mode responsive et enlevez-la pour le désactiver.

<link href="css/bootstrap.css" rel="stylesheet"> : chargement de la feuille de style bootstrap.css par le navigateur.

<script src="js/jquery.js"></script> : chargement de la bibliothèque JQuery par le navigateur. JQuery est essentiel pour le fonctionnement de Bootstrap 3.

<script src="js/bootstrap.min.js"></script> : chargement du fichier source JavaScripte de la bibliothèque Bootstrap 3 par le navigateur.

<div class="container"> : permet de définir la largeur et la disposition du canevas de la page.

<h1>Première page avec Bootstrap 3</h1> : Titre Première page avec Bootstrap 3 est affiché.

Bonnes pratiques :

Mettez toujours les fichiers css dans le <head> de votre page et les fichiers Javascript juste avant de fermer le </body> comme l’exemple du source ci-dessus vous le montre.

La bibliothèque Bootstrap utilise JQuery pour fonctionner, il faut donc respecter l’ordre de déclaration des bibliothèques (Declarer bootstrap.min.js apres jquery.js).