2018-065 - Historique des versions

Xtof : /* Session de code avec événements */

2018-03-06T19:30:29Z

Session de code avec événements

Xtof : /* Evénements JS */

2018-03-06T19:01:52Z

Evénements JS

Xtof : /* événements */

2018-03-06T18:09:23Z

événements

Xtof : /* événements */

2018-03-06T17:45:22Z

événements

Xtof : /* événements */

2018-03-06T17:44:57Z

événements

Xtof : /* Structure du Dossier pour Organiser le Code */

2018-03-06T17:42:20Z

Structure du Dossier pour Organiser le Code

Xtof : /* Fonctions */

2018-03-06T17:27:43Z

Fonctions

Xtof : /* Placement du code */

2018-03-06T17:26:54Z

Placement du code

Xtof : /* Placement du code */

2018-03-06T17:24:54Z

Placement du code

Xtof : /* Placement du code */

2018-03-06T17:14:00Z

Placement du code

← Version précédente		Version du 6 mars 2018 à 19:30
Ligne 260 :		Ligne 260 :

	Modifier le DOM : https://codepen.io/ColleenEMc/pen/vNdXKz		Modifier le DOM : https://codepen.io/ColleenEMc/pen/vNdXKz
		+
		+
		+	=== this ===
		+
		+	à suivre sur https://www.coursera.org/learn/javascript/lecture/2fCqw/this

← Version précédente		Version du 6 mars 2018 à 19:01
Ligne 252 :		Ligne 252 :
	; Fenêtre : onload, onresize, onscroll, onerror,...		; Fenêtre : onload, onresize, onscroll, onerror,...
	; Liste compréhensible : https://developer.mozilla.org/fr/docs/Web/Events		; Liste compréhensible : https://developer.mozilla.org/fr/docs/Web/Events
		+
		+
		+	=== Session de code avec événements ===
		+
		+	Source : https://www.coursera.org/learn/javascript/lecture/Ch7Pn/code-with-me-events
		+
		+
		+	Modifier le DOM : https://codepen.io/ColleenEMc/pen/vNdXKz

← Version précédente		Version du 6 mars 2018 à 18:09
Ligne 243 :		Ligne 243 :

	- Soyez prudents au moment de copier et coller les guillemets !		- Soyez prudents au moment de copier et coller les guillemets !
		+
		+
		+
		+	===== plus d'événements =====
		+
		+	; Souris : onclick, ondblclick, onmousedown, onmouseenter, onmouseleave, on mousemove, onmouseout,....
		+	; Clavier : onkeydown, onkeypress, onkeyup
		+	; Fenêtre : onload, onresize, onscroll, onerror,...
		+	; Liste compréhensible : https://developer.mozilla.org/fr/docs/Web/Events

@@ Ligne 239 : / Ligne 239 : @@
 - Vous pouvez utiliser des guillemets simples ou doubles pour le résultat de l'événement.
 - Les doubles guillemets facilitent si vous pouvez passer des paramètres de chaîne :
      <div onclick = "message('Salut')">
 - Soyez prudents au moment de copier et coller les guillemets !

← Version précédente		Version du 6 mars 2018 à 17:44
Ligne 232 :		Ligne 232 :
	; onload: le navigateur finit de charger la page		; onload: le navigateur finit de charger la page

−	<div onclick = "message()"> Cliquer ~~usur~~ cette Div invoquera une fonction JavaScript</div>	+	<div onclick = "message()"> Cliquer sur cette Div invoquera une fonction JavaScript</div>
		+
		+
		+	Utiliser les guillemets
		+
		+	- Vous pouvez utiliser des guillemets simples ou doubles pour le résultat de l'événement.
		+	- Les doubles guillemets facilitent si vous pouvez passer des paramètres de chaîne :
		+	<div onclick = "message('Salut')">
		+	- Soyez prudents au moment de copier et coller les guillemets !

← Version précédente		Version du 6 mars 2018 à 17:42
Ligne 213 :		Ligne 213 :

	slides [[:File:02.03.JS_FolderStrucutreOrganizingYourCode.pdf]]		slides [[:File:02.03.JS_FolderStrucutreOrganizingYourCode.pdf]]
		+
		+
		+	=== Evénements JS ===
		+
		+	Ajouter de l'interactivité avec JS
		+
		+	- Il nous appartient de décider du moment où les fonctions devraient s'exécuter
		+	- Ce serait mieux si les fonctions étaient appelées sur des "événements" spéciaux
		+	- l'API JavaScript nous permet d'ajouter des appels de fonctions dynamiques
		+
		+	==== événements ====
		+
		+	Tout élément peut réagir à un événement. Il faut ajouter l'événement à la balise et inclure ce que vous voulez qu'il arrive.
		+
		+	; onclick: l'utilisateur clique sur un élément HTML
		+	; onmouseover: l'utilisateur bouge la souris sur un élément HTML
		+	; onresize: la fenêtre du navigateur est retaillée
		+	; onload: le navigateur finit de charger la page
		+
		+	<div onclick = "message()"> Cliquer usur cette Div invoquera une fonction JavaScript</div>

@@ Ligne 193 : / Ligne 193 : @@
-==== Placement du code ====
+=== Placement du code ===
@@ Ligne 210 : / Ligne 210 : @@
 Lorsque nous utilisons CodePen, nous utilisons cette idée de séparer notre code. Cependant, sachez que CodePen n'exige pas beaucoup de choses que vous devriez avoir dans votre code. Par exemple, dans les fichiers HTML, il ignore toutes les informations de la section <head>. Donc, si vous développez dans CodePen, assurez-vous de tester votre code plus tard en utilisant la bonne structure de dossier / fichier. Vous devrez inclure des liens vers les feuilles de style, les images et les fichiers JavaScript externes.
-==== Structure du Dossier pour Organiser le Code ====
+=== Structure du Dossier pour Organiser le Code ===
 slides [[:File:02.03.JS_FolderStrucutreOrganizingYourCode.pdf]]

← Version précédente		Version du 6 mars 2018 à 17:26
Ligne 209 :		Ligne 209 :

	Lorsque nous utilisons CodePen, nous utilisons cette idée de séparer notre code. Cependant, sachez que CodePen n'exige pas beaucoup de choses que vous devriez avoir dans votre code. Par exemple, dans les fichiers HTML, il ignore toutes les informations de la section <head>. Donc, si vous développez dans CodePen, assurez-vous de tester votre code plus tard en utilisant la bonne structure de dossier / fichier. Vous devrez inclure des liens vers les feuilles de style, les images et les fichiers JavaScript externes.		Lorsque nous utilisons CodePen, nous utilisons cette idée de séparer notre code. Cependant, sachez que CodePen n'exige pas beaucoup de choses que vous devriez avoir dans votre code. Par exemple, dans les fichiers HTML, il ignore toutes les informations de la section <head>. Donc, si vous développez dans CodePen, assurez-vous de tester votre code plus tard en utilisant la bonne structure de dossier / fichier. Vous devrez inclure des liens vers les feuilles de style, les images et les fichiers JavaScript externes.
		+
		+	==== Structure du Dossier pour Organiser le Code ====
		+
		+	slides [[:File:02.03.JS_FolderStrucutreOrganizingYourCode.pdf]]

← Version précédente		Version du 6 mars 2018 à 17:24
Ligne 200 :		Ligne 200 :
	- Fichier externe		- Fichier externe

−	cf ~~slides~~ Slides [[:File:02.02.JS_CodePlacement.pdf]]	+	cf Slides [[:File:02.02.JS_CodePlacement.pdf]]
		+
		+	Lorsque vous écrivez du code, il est important d'adopter les bonnes habitudes d'organisation de votre code. Bien qu'il n'y ait pas de règles spécifiques sur comment et où placer votre code, il y a certainement des conventions. (Les conventions sont des suggestions que la plupart des programmeurs suivent, de cette façon les autres programmeurs peuvent rapidement et facilement comprendre leur code.)
		+
		+	L'organisation la plus commune est d'avoir un dossier principal avec vos fichiers html. Il existe également trois sous-dossiers (dossiers dans le dossier principal) pour vos fichiers CSS, image et JavaScript.
		+
		+	![Organisation du Code](https://d3c33hcgiwev3.cloudfront.net/imageAssetProxy.v1/ZcYNfJ1UEeWtOgrji8llcw_c7b2bac3ae7ffd2f40e9f4f799bad120_folderStructure.png?expiry=1520467200000&hmac=DICJNORCHYhqWf6E6D56REQadMtiI2eK9Jgj8E28pl8)
		+
		+	Lorsque nous utilisons CodePen, nous utilisons cette idée de séparer notre code. Cependant, sachez que CodePen n'exige pas beaucoup de choses que vous devriez avoir dans votre code. Par exemple, dans les fichiers HTML, il ignore toutes les informations de la section <head>. Donc, si vous développez dans CodePen, assurez-vous de tester votre code plus tard en utilisant la bonne structure de dossier / fichier. Vous devrez inclure des liens vers les feuilles de style, les images et les fichiers JavaScript externes.

← Version précédente		Version du 6 mars 2018 à 17:14
Ligne 195 :		Ligne 195 :
	==== Placement du code ====		==== Placement du code ====

−	Slides [[:File:02.02.JS_CodePlacement.pdf]]	+
		+	- body
		+	- head
		+	- Fichier externe
		+
		+	cf slides Slides [[:File:02.02.JS_CodePlacement.pdf]]