Différences entre versions de « Js devel »

De The Linux Craftsman
Aller à la navigation Aller à la recherche
 
Ligne 31 : Ligne 31 :
 
</source>
 
</source>
  
Maintenant, il nous faut l'appeler depuis une page ''HTML''. On créer cette page grâce au même menu que le script précédent
+
Maintenant, il nous faut l'appeler depuis une page ''HTML''. On créera cette page grâce au même menu que le script précédent
 
[[Fichier:javascript_new_html.png|centré]]
 
[[Fichier:javascript_new_html.png|centré]]
  

Version actuelle datée du 10 mars 2014 à 18:24

Prérequis

Pour développer en Javascript, il faut un navigateur comme Firefox avec le module Firebug

# yum -y install firefox

Et s'assurer qu'Eclipse possède la perspective JavaScript

Création du projet

Affichez le menu contextuel dans la zone Project Explorer puis cliquez sur New Project

Dans la fenêtre qui s'ouvre, choisissez le projet JavaScript

New js project.png

Ensuite, il faut donner un nom au projet

New js project name.png

Si c'est la première fois que vous éditez un projet JavaScript, Eclipse vous propose d'utiliser la perspective associée à ce type de projet.

Javascript perspective.png

Ajout de sources

Dans ce nouveau projet, il est généralement utile de mettre les sources dans un répertoire src. Dans ce répertoire nous allons créer un nouveau script JavaScript grâce au menu contextuel. Nous appelerons ce fichier hellowolrd.js

Javascript new script.png

Dans ce script on ajoutera la fonction suivante:

function HelloWorld(){
	alert("Hello World");
}

Maintenant, il nous faut l'appeler depuis une page HTML. On créera cette page grâce au même menu que le script précédent

Javascript new html.png

On modifiera cette page pour qu'elle ressemble à ceci:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="HelloWorld.js"></script>
<title>Insert title here</title>
</head>
<body onload="HelloWorld();">
</body>
</html>

Exécution

L'éxécution de la page HTML dans un navigateur donne le résultat suivant:

Browser js hello world.png