Vous êtes sur la page 1sur 6

Web Startup Toolkit cours n° 2

Javascript

C’est un langage de program qui a vu le jour au milieu des années 1990. On a créé des images, des liens
hypertextes, mais pas des fiches de paiement. Netscape : 90S, équivalent de facebook et google. Firme
qui a eu impact monstrueux sur le dvpt du web, surtout web marchand : ecommerce, interfaces de
paiement sécurisé..
Javascript a rendu les pages plus interactives : payer sur un site, formulaire, rentrer coordonnées cartes
bancaires…
Langage de programmation standard (utilisé par 90% des sites, mais on peut s’en passer : technologie
Flash, est une alternative à Javascript). HTML est la seule manière de faiure de spages web ; mais
Javascript pas standard même si de fait 90%. But donc : rendre une page web dynamique.
Langage construit autour du concept d’« objet ». Comme la balise en HTML. Variables et fonctions sont
deux objets de Javascript, on va les voir aujourd’hui.
Cf. Note Pad ou Sublim Text
Où placer le code Javascript ? avec html, ils fonctionnent de pair.
Ligne 1 : <html> :

<script>

</script>

</html>

= balise qui permet de définir la présence d’un code javascript qui sera interprété non
pas comme du html mais comme du javascript

<html>

<script>

var variable1 = "bonjour";

var variable2 = 5;

alert(variable1);

</script>

</html> Une variable porte un nom et contient une valeur ; On utilise un mot-clef pour créer une variable,
var. Ne pas mettre d’accents et pas d’espace (sinon considéré comme coupé). Toujours fermer les objets
par ;
Autre objet : la fonction. Une entrée, un événement, une sortie
alert( ) (contient les paramètres, en général une variable). On y place la var 1. Affiche la fonction sous
la forme d’une fenêtre de dialogue. Erreur de mot de passe : c’est du javascript. Interaction avec
l’utilisateur, dialoguer avec lui.
L’usage : La balise head : partie non visible de la page (html). PHP : pas vu par l’utilisateur final, pas
présent sur page html. Mais on peut avoir coexistence de plusieurs langages, css, javascript, html.
L’intérêt des variables : on peut les manipouler. Les manipulations mathématiques sont les plus simples.

Fonction : paramètrezs entre parenthèses ; instructions entre les acollades. Les espaces et retours à la
lignes ne sont pas pris en compte entre les acollades. Rend le code plus lisible. Mais sensible à la casse :
MAFONCTION =/= maFonction.

<html>

<script>

var variable1 = 2;
var variable2 = 5;

function maFonction(x){

var resultat = 2 * x;
alert(resultat);

maFonction(variable2);

</script>

</html>

Avec tout ça, on crée une variable et ses instructions : but : faire apparaître une boîte de dialogue.

Javascript peut prendre le contrôle déléments en html et en modifier les info.


Balise button vue la dernière fois. Attribut de balise onclick. Pour le Bonjour, on met des guillemets
simples. On peut ensuite mettre un double guillemet simple, un triple… ajoute des possibilités.
<html>

<script>

var variable1 = 2;
var variable2 = 5;

function maFonction(x){

var resultat = 2 * x;
alert(resultat);

maFonction(variable2);

</script>

<button onclick="alert('Bonjour')"">Test</button>

</html>

Champ de saisie : <input>


Permet de faire des sondages.

Pour identifiants : <input id>

Fction javascript : document get element by id :


<html>

<script>

var variable1 = 2;
var variable2 = 5;

function maFonction(x){

var resultat = 2 * x;
alert(resultat);

maFonction(variable2);

</script>

<input id="saisie">

<button onclick="alert(document.getElementById('saisie').value)">Test</button>

</html>
Normalement on peut supprimer tout ce qui est dans le script. Ça suffit d’écrire : <html>

<input id="saisie">

<button onclick="alert(document.getElementById('saisie').value)">Test</button>

</html>

- Définition d’une fonction ; un champ de saisie quand on clique sur le bouton : <html>

<script>

function maFonction(x){

var resultat = x + x;
alert(resultat);
}
</script>

<input id="saisie">

<button onclick="maFonction(document.getElementById('saisie').value)">Test</button>
→ Bien penser à changer après le onclick, pour renvoyer correctement à la fonction, ou
l’alerte…

</html>

<html>

<script>

function maFonction(x){

var resultat = Number(x);


var resultat = 2*x;
alert(resultat);
}

</script>

<input id="saisie">

<button onclick="maFonction(document.getElementById('saisie').value)">Test</button>

</html>
Un bouton qui redimensionne l’image :
<html>

<img id="photo" src="http://psycho-therapie-toulouse.fr/wp-content/uploads/2015/06/7.jpg">


<button onclick="document.getElementById('photo').width = document.getElementById('photo').width
/ 4 ">Reduire</button>

</html> (width à la place de value ; une photo


n’a pas de valeur en soi). On peut mettre width, src (la source).

Deux boutons, un pour réduire, un pour augmenter la taille de l’image :


<button onclick="document.getElementById('photo').width =
document.getElementById('photo').width/4">Reduire</button>
<button onclick="document.getElementById('photo').width =
document.getElementById('photo').width*4">Augmenter</button>

Boucle permet de répéter l’information. On utilise une boucle, structure parituclière (cf. internet pour
l’exo 4)
Exo 5 : repose sur utilisation de boucle, condition et intelligence mathématique. Fizz buzz test résultat
sur internet. Créatif. Demandé dans l’entretien d’embauche des développeurs. Webmarketing.