JavaScript Chapitre 1: fondamentaux - MAS RAD
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
JavaScript Chapitre 1: fondamentaux MAS‐RAD – Master of Advanced Studies, Rapid Application Development Stéphane GOBRON HE‐Arc – hes.so 2016
JavaScript 6 chapitres Description du cours Fondamentaux Instructions de base Structure objet Instructions avancées Encore plus loin Une utilisation à présent relativement stable sur toutes les plateformes
JavaScript Fondamentaux Sections Introduction HTML5 et Premiers pas Intégration Développement Ce qui doit avant tout être noté
Fondamentaux Introduction C’est quoi? Ça sert à quoi? D’où ça vient? Coté client Problème résolu Prérequis Edition JS vs. Java C’est quoi JS?
Introduction C’est quoi? JavaScript ‐‐abrégé JS‐‐est un langage de programmation de scripts principalement utilisé http://fr.wikipedia.org/wiki/JavaScript Définition dans les pages web interactives mais aussi côté JS créé en 1995 serveur. C'est un langage orienté objet à prototype, BUT: dynamiser les c'est‐à‐dire que les bases du langage et ses site Web principales interfaces sont fournies par des objets qui ne sont pas des instances de classes. Ces objets sont chacun équipés de constructeurs permettant de créer leurs propriétés, et notamment une propriété de prototypage qui permet d'en créer des objets héritiers personnalisés. Définition Wikipédia
Introduction Ça sert à quoi? Permet de créer des pages dynamique : modification de l’apparence d’une page déplacement d’objets, de calques vérification du contenu de formulaire « roolovers » et d’autres fonct. A ce jour relativement sous‐exploité
Introduction D’où ça vient? • JavaScript : ECMA script • Initialement DHTML, fait parti intégrante de (x)HTML • Un langage Objet issu de C++ • Beaucoup moins riche que les langages de haute niveau comme C++ et Java
Introduction Coté client Script essentiellement client interprété sur le Script coté client navigateur client Contraintes pas sur le serveur – • pas de droit d’écriture même si • le code est visible en clair par le client théoriquement possible Avantages • rend les sites Web dynamiques /!\ Différent de PHP • facilité au développement p/r à la POO classique Coté serveur Concurrent de VBScript
Introduction Problème « résolu » Historiquement, implémentations et effets variables selon navigateurs et non /!\ vous devrez toujours tester les totalement portable fonctionnalité sur « tous » les navigateurs A présent théoriquement stable sur tous les navigateurs
Introduction Prérequis « Il est fondamental de connaître HTML, balises, tableau, et si possible CSS » … vous ne maîtrisez pas tout à fait ces outils?
Introduction Edition HTML et JS ne sont que du texte On peut utiliser le Bloc‐notes de MS‐ Windows ou Notepad++ http://notepad‐plus‐plus.org/fr/ Notepad++, mais il y a aussi Sublime ou Atom
Introduction JS Java JS vs. Java Code liée à une page HTML Application Java appelée Ne surtout pas et qui est interprété lors de applet et dont le code source a confondre!!! l’exécution préalablement été compilé avant l’exécution A noter : Java est Utilisation assez limitée, Un des langages les plus compilé mais sous « petite applications » avancés et donc complet forme de bitcode, donc Sources visibles Sources cachées dédié à un processor software Utilisation du terme applet « applet JavaScript » « applet Java » ou « applet » utilisation abusive… utilisation correcte… … mais c’est pourtant si … mais ce n’est que rarement souvent de « petites des « petites applications »! applications »! Récapitulatif des différences
Fondamentaux Premiers pas HTML « Hello world » HTML5 « Hello world » 1er exemple « utile » Environnement et style Encodage des caractères JS « Hello world » HTML5 : « The future is landing »
Premiers pas HTML5 et JS Pourquoi s’intéresser au JS? “JavaScript skills are the key to HTML5…” David Powers –php ‘master’ “… and basically HTML5 is the future of the web ”!
Premiers pas HTML «Hello World !» Hello World ! Tout de suite dans le vif du sujet : voila le minimum Code HTLM On ne peut juste pas Code HTLM dans l’éditeur Résultat du code HTLM sous ie moins! Mais ce n’est pas très… « propre »
Premiers pas HTML5 «Hello World !» La version minimum … « propre » ! Hello World !
Premiers pas JS «Hello World !» Le code JS ne peut exister qu’au sein d’une page HTML document.getElementById( "myID" ).innerHTML="Hello world!";
Premiers pas 1er exemple « utile » Un exemple simple en HTML5 Dans ce cours nous utiliserons html 5 Différence avec la norme html 4.01 Un exemple simple en HTML5 nouvelle nomenclature Ceci est un texte dans un paragraphe. en gras –défini que vous travaillez Ceci est un texte dans un 1er point ; réellement en html 5 ! Ceci est un texte dans un 2ème point. Lien : Stef’s site
Premiers pas html DOM de cette WebPage head body Un exemple en HTML5 title h1 p p ul p text text img src,alt text li li text a href Un exemple simple en HTML5 text text text Ceci est un texte dans un paragraphe. Ceci est un texte dans un 1er point; Ceci est un texte dans un 2ème point. Lien : Stef’s site
Premiers pas Encodage des caractères Charset iso‐8859‐1, iso‐ 8859‐15, ou utf‐8? Encodage sous Notepad++
Premiers pas Se connaître Déterminer votre profil A. B. C. A. Prise d’initiative 6 6 6 B. Intérêt pour les énigmes C. Qualités relationnelles 5 5 5 /!\ A,B et C abstraits Sans référentiel : exercice 4 4 4 difficile, voire impossible 3 3 3 Pour vous aider : proposition de méthode, 2 2 2 de procédure 1 1 1
Premiers pas A. B. C. A. B. C. A. B. C. Définir un profil 6 6 6 6 6 6 6 6 6 Déterminer votre profil 5 5 5 5 5 5 5 5 5 4 4 4 4 4 4 4 4 4 A. Prise d’initiative 3 3 3 3 3 3 3 3 3 B. Intérêt pour les énigmes 2 2 2 2 2 2 2 2 2 C. Qualités relationnelles 1 1 1 1 1 1 1 1 1 1. Définition 2. Changement 3.1 Réflexion 1 Procédure et initialisation d’état 1. Partez de la valeur « 3 » pour chaque critère A. B. C. A. B. C. A. B. C. 2. Sans comparer ajoutez « 1 6 6 6 6 6 6 6 6 6 » au critère que vous aimez 5 5 5 5 5 5 5 5 5 le plus 4 4 4 4 4 4 4 4 4 3. Comparez les 2 à 2, le 3 3 3 3 3 3 3 3 3 meilleur gagne 1 point, 2 2 2 2 2 2 2 2 2 l’autre perd 1 point 1 1 1 1 1 1 1 1 1 4. La somme finale est 10 3.2 Réflexion 2 3.3 Réflexion 3 4. Etat final
Premiers pas Se connaître Tour de table! Brève présentation personnelle
Premiers pas Se connaître Votre profil technique A. B. C. A. Implémentation 6 6 6 B. Art‐design, photoshop… C. Software engineering 5 5 5 4 4 4 3 3 3 2 2 2 1 1 1
Fondamentaux Intégration Squelette Endroit Externe La bonne intégration
Intégration Squelette d’un code • Définition du squelette Inclusion de code < script language=“javascript”> JavaScript dans HTML ... Instructions javascript Il n’est pas obligatoire ... de finir par un « ; » c’est juste une question de bon sens! => Ce squelette peut être ajouté à volonté Les commentaires sont comme en C++: • Exemple : // blablabla /* blablabla */ document.write ( "Hello world" ) ; Attention en HTML :
Intégration A quel endroit? 1ère solution Directement inclus function maNouvelleFonction1() dans le code HTML {…} function maNouvelleFonction2() {…} Placement d’une section où on veut dans le code Généralement : définition de nouvelles fonctions dans maNouvelleFonction1(); maNouvelleFonction2();
Intégration Fichier externe monSiteWeb.html 2ième solution Dans un fichier externe Permet d’ alléger, de désencombrer le fichier HTML maNouvelleFonction1(); maNouvelleFonction2(); L’extention est « .js » mesScripts.js function maNouvelleFonction1() {…} function maNouvelleFonction2() {…}
Développement Invisible « Hello World » Console Web Résultat console web Débogueur Hello world? « 42 » is the answer…
Développement Invisible « Hello World » De multiple solutions Hello World ! pour un simple « hello world! » Interaction! Passons en revu ces tous petits codes
Développement Console Web E.g. sur FireFox en FR Outils > Développeur Web > Console web ou Ctrl+Maj+K E.g. sur Chrome en EN Select Tools > Web Developer > Web Console
Développement Résultat console web
Développement Débogueur … un gros pb… http://getfirebug.com/javascript Sous Mozilla Firefox
Sept manières pour un simple « Hello world » Eg_01‐01.html : version directe « sale » Eg_01‐02.html : version directe « propre » Eg_01‐03.html : version console Eg_01‐04.html : avec la fonction « write » de l’objet « document » Eg_01‐05.html : en cherchant et en remplaçant dans le DOM Eg_01‐06.html : en définissant une nouvelle fonction Eg_01‐07.html : en définissant une fonction dans un fichier externe Eg_01‐08.html : avec l'utilisation de 'var' ! Eg_01‐09.html : avec l'utilisation de 'let' ! Option super top Eg_01‐10.html : avec une classe! ;‐)
Merci! Questions? Remerciement à Aïcha Rizzotti pour ses conseils Prochain cours : Instructions de base Variables Opérateurs Fonction, principe Evénements Tableaux Itérations Les briques de base de JS
Vous pouvez aussi lire