Objectif général : Savoir créer une réelle interactivité entre le contenu d'une page HTML et l'internaute
Objectifs opérationnels:
• Stocker et utiliser des données à l’aide des variables et des opérateurs
• Communiquer avec le programme à travers le clavier et l’écran
• Contrôler le flux d’exécution des instructions
• Définir et utiliser des fonctions
• Manipuler des tableaux et des chaînes de caractères
• Sélectionner du contenu dans une page Web
• Manipuler du contenu dans une page Web
• Interagir avec l’internaute
Objectif général : Savoir créer des pages Web interactives sans trop solliciter le serveur et le réseau pour offrir une meilleure expérience utilisateur
Objectifs opérationnels
- Stocker des données à l’aide des variables
- Traiter des données à l’aide des opérateurs.
- Communiquer avec l’internaute à l’aide des E/S de base
- Contrôler le flux d’exécution des instructions.
- Réutiliser et organiser le code en créant des fonctions
- Créer l’interactivité grâce à la gestion des évènements
- Traiter plus facilement plusieurs données connexes grâce aux tableaux et aux objets
- Gérer les propriétés de la fenêtre avec l’objet window
- Manipuler le contenu de la page Web grâce à l’objet document
- Contrôler la saisie d’un formulaire avec l’objet form
Une révision des principaux concepts du langage JavaScript : variables, fonctions, types, fermetures (closures), objets et prototypes, format JSON. De nombreux exemples téléchargeables sur GitHub.
Objectif général : Savoir créer une réelle interactivité entre le contenu d'une page HTML et l'internaute
Objectifs opérationnels:
• Stocker et utiliser des données à l’aide des variables et des opérateurs
• Communiquer avec le programme à travers le clavier et l’écran
• Contrôler le flux d’exécution des instructions
• Définir et utiliser des fonctions
• Manipuler des tableaux et des chaînes de caractères
• Sélectionner du contenu dans une page Web
• Manipuler du contenu dans une page Web
• Interagir avec l’internaute
Objectif général : Savoir créer des pages Web interactives sans trop solliciter le serveur et le réseau pour offrir une meilleure expérience utilisateur
Objectifs opérationnels
- Stocker des données à l’aide des variables
- Traiter des données à l’aide des opérateurs.
- Communiquer avec l’internaute à l’aide des E/S de base
- Contrôler le flux d’exécution des instructions.
- Réutiliser et organiser le code en créant des fonctions
- Créer l’interactivité grâce à la gestion des évènements
- Traiter plus facilement plusieurs données connexes grâce aux tableaux et aux objets
- Gérer les propriétés de la fenêtre avec l’objet window
- Manipuler le contenu de la page Web grâce à l’objet document
- Contrôler la saisie d’un formulaire avec l’objet form
Une révision des principaux concepts du langage JavaScript : variables, fonctions, types, fermetures (closures), objets et prototypes, format JSON. De nombreux exemples téléchargeables sur GitHub.
jQuery est un framework JavaScript libre et Open Source, implanté côté client, qui porte sur l’interaction entre le DOM, JavaScript, AJAX et le Html. Cette librairie JavaScript a pour but de simplifier les commandes communes du JavaScript.
La devise de jQuery est en effet, "Écrire moins pour faire plus" (write less do more).
Se référant à ce modèle, tout script jQuery commence par :
$(document).ready(function() {
// code jQuery
});
Pour économiser des frappes de clavier, le signe dollar ($) qui fonctionne comme alias de jQuery est presque toujours
utilisé.
$(function(){
//contenu exécuté lorsque le document sera chargé
});
$ == JQuery
La particularité de cette fonction
est de charger les éléments du DOM dès que ceux-ci sont disponibles,
soit bien avant le chargement complet de la page.
Développer des applications Web en utilisant Javascript nécessite souvent d'adapter le code au navigateur. Le framework jQuery est une solution très répandue pour répondre à ce genre de problématique. Ce cours vous apprendra la façon de le mettre en oeuvre et d'améliorer l'ergonomie et l'interactivité de vos sites.
Javascript can be misleading but is extremely powerful. Worse, it is extremely and use on almost all new connected device. So it is time to grab the best of it.
Objectif général : Savoir créer des pages Web interactives sans trop solliciter le serveur et le réseau pour offrir une meilleure expérience utilisateur
Objectifs opérationnels :
Stocker des données à l’aide des variables
Traiter des données à l’aide des opérateurs.
Communiquer avec l’internaute à l’aide des E/S de base
Contrôler le flux d’exécution des instructions.
Réutiliser et organiser le code en créant des fonctions
Créer l’interactivité grâce à la gestion des évènements
Traiter plus facilement plusieurs données connexes grâce aux tableaux et aux objets
Traiter des chaînes de caractères avec l’objet String
Gérer les propriétés de la fenêtre avec l’objet Window
Manipuler le contenu de la page Web grâce à l’objet Document
Contrôler la saisie d’un formulaire avec l’objet Form
jQuery est un framework JavaScript libre et Open Source, implanté côté client, qui porte sur l’interaction entre le DOM, JavaScript, AJAX et le Html. Cette librairie JavaScript a pour but de simplifier les commandes communes du JavaScript.
La devise de jQuery est en effet, "Écrire moins pour faire plus" (write less do more).
Se référant à ce modèle, tout script jQuery commence par :
$(document).ready(function() {
// code jQuery
});
Pour économiser des frappes de clavier, le signe dollar ($) qui fonctionne comme alias de jQuery est presque toujours
utilisé.
$(function(){
//contenu exécuté lorsque le document sera chargé
});
$ == JQuery
La particularité de cette fonction
est de charger les éléments du DOM dès que ceux-ci sont disponibles,
soit bien avant le chargement complet de la page.
Développer des applications Web en utilisant Javascript nécessite souvent d'adapter le code au navigateur. Le framework jQuery est une solution très répandue pour répondre à ce genre de problématique. Ce cours vous apprendra la façon de le mettre en oeuvre et d'améliorer l'ergonomie et l'interactivité de vos sites.
Javascript can be misleading but is extremely powerful. Worse, it is extremely and use on almost all new connected device. So it is time to grab the best of it.
Objectif général : Savoir créer des pages Web interactives sans trop solliciter le serveur et le réseau pour offrir une meilleure expérience utilisateur
Objectifs opérationnels :
Stocker des données à l’aide des variables
Traiter des données à l’aide des opérateurs.
Communiquer avec l’internaute à l’aide des E/S de base
Contrôler le flux d’exécution des instructions.
Réutiliser et organiser le code en créant des fonctions
Créer l’interactivité grâce à la gestion des évènements
Traiter plus facilement plusieurs données connexes grâce aux tableaux et aux objets
Traiter des chaînes de caractères avec l’objet String
Gérer les propriétés de la fenêtre avec l’objet Window
Manipuler le contenu de la page Web grâce à l’objet Document
Contrôler la saisie d’un formulaire avec l’objet Form
Developpement web dynamique_Base de donnees.pdfrachidimstapha
MySQL has stand-alone clients that allow users to interact directly with a MySQL database using SQL, but more often, MySQL is used with other programs to implement applications that need relational database capability. MySQL is a component of the LAMP web application software stack (and others)
https://uii.io/3rFjIWMA0d
https://uii.io/3rFjIWMA0d
objectif général : Acquérir les compétences nécessaires pour développer des sites Web dynamiques.
objectifs opérationnels :
Stocker et utiliser des données à l’aide des variables et des opérateurs.
Manipuler des tableaux et des chaînes de caractères.
Contrôler le flux d’exécution des instructions.
Définir et utiliser des fonctions.
Transférer des données.
Interfacer PHP avec MySQL.
2. PLAN
Introduction
Applications
Objet Window
Syntaxe et Inclusion dans HTML
Notions de Base: Variables
Opérateurs
Boucles
Fonctions
Objets
Tableaux
DOM
Manipuler Code HTML
Gestion d’évènements
Pour aller plus loin
3. INTRODUCTION
JavaScript, Créé en 1995 par Netscape et Sun
Microsystems, sous le nom de LiveScript.
Le JavaScript est un langage de programmation
orienté objet interprété.
Il permet d’écrire des scripts.
Il est exécuté côté client(par le navigateur qui
inclut l’interpréteur).
Internet Explorer: Chakra / JScript,
Mozilla Firefox : SpiderMonkey
Google Chrome:V8.
4. Le JavaScript est majoritairement utilisé sur
Internet, conjointement avec les pages Web HTML
Il s'insère dans le code HTML d'une page web
On dit alors que le JavaScript est une extension
du HTML. Il permet de rendre celles-ci interactives
5. APPLICATIONS
Un système de chat, comme celui de Facebook ;
Une suggestion lors de la frappe dans un champ de
texte, comme lors d'une recherche avec Google;
Un lecteur de vidéos ou de musiques;
Des jeux
(https://www.benjoffe.com/code/games/torus )
La modélisation 3D (
https://threejs.org/examples/webgl_materials_cars.
html )
…..
6. BOITE DE DIALOGUE ET OBJET WINDOW
L’objet Window
Cet objet prédéfini représente la fenêtre courante du
navigateur.
Liste (non exhaustive) des méthodes :
alert ()
confirm ()
prompt ()
open ()
close ()
…..
8. SYNTAXE ET INCLUSION DANS HTML
Les codes JavaScript sont insérés au moyen de la
balise <script></script>
Syntaxe du code JavaScript est simple:
liste d’instructions séparés par des ;
Commentaire multilignes : /* */
Commentaire monoligne: //
Il est conseillé d'écrire le code JavaScript dans un
fichier externe d’extension .js. Il est ensuite appelé
depuis la page web à l’aide de la balise: <script
src=‘script.js’></script>
9. VARIABLES
Une variable est un moyen pour stocker une valeur.
Le JavaScript étant un langage sensible à la casse .
Le JavaScript est un langage typé dynamiquement.
Pour déclarer une varibale:
var myVariable;
Pour l’affectation:
var myVariable = valeur;
Le nom d'une variable ne peut contenir que des
caractères alphanumériques( a-z, A – Z, 0 – 9, _ , $), ne
commence pas par un chiffre et doit différer des mots-
clés utilisés par le JavaScript.
10. VARIABLES
• il représente tout
nombre, que ce
soit un entier, un
nombre négatif,
scientifique, …
• var number = 5.5;
• var number = 3e+5;
• var number = 0x35;
Le type
numérique
• représente
n'importe quel
texte
• var text="Mon texte";
• var text= 'Mon texte';
Les chaînes
de caractères
• un booléen est
un type à deux
états qui sont
les suivants
: vrai ou faux
• var Test=true;
• var Test=false;
Les
booléens
Il existe 3 types principalement.
11. VARIABLES
typeof variable: instruction qui permet de tester
l’existence et le type de la variable. Si
erreur(variable non déclarée ou non initialisée,
renvoie undifined)
Nombre=parseInt(text) : méthode qui permet
convertir une chaine en un entier. Si erreur, renvoie
NaN(Not a Number).
Text= Nombre+’’ : Pour Convertir un nombre en une
chaine de caractères.
12. OPÉRATEURS
Opérateurs et instructions identiques aux plusieurs
langages de programmation:
opérateurs arithmétiques : + − ∗ / %
in/décrémentation : var++ /var−− /++var /−−var
opérateurs logiques : && | |
comparaisons : == != <= < >= >
concaténation de chaîne de caractères : +
affectation : = += −= ∗= ...
15. LES FONCTIONS
Il existe des fonctions natives, mais il est aussi
possible d'en créer, avec le mot-clé function.
Déclaration:
function myFunction(arguments) {
// Le code que la fonction va devoir exécuter
}
Même limitations que nomvariable.
Appel:
myFunction(arguments)
16. LES FONCTIONS
Les variables déclarées au sein d'une fonction ne
sont accessibles que dans cette fonction.=>
Variable Locale .
Une fonction peut recevoir un nombre défini ou
indéfini de paramètres. (Exemple: On la définit avec
un argument, et on l’appelle sans).
Elle peut aussi retourner une valeur ou ne rien
retourner du tout. (mot –clé return).
17. LES OBJETS
Le JavaScript met à notre disposition des objets
natifs, directement utilisables.
Number, Boolean, et String sont des objets natifs
=>Les variables contiennent toutes des objets,
mais de natures différentes=> Typé
dynamiquement.
Le JavaScript nous permet de créer nos propres
objets.
Un objet a un constructeur, des propriétés et des
méthodes.
18. LES OBJETS
Exemple:
Objet String()
Lorsqu’on définit une constante ou une variable chaîne de
caractères, Javascript crée d’une façon transparente une
instance String
1 propriété : length
Liste (non exhaustive) des méthodes :
bold( )
italics( )
fontcolor ( )
fontsize( )
toUpperCase ( )
toLowerCase ( )
substring( )
charAt()
indexOf()
...
19. LES TABLEAUX
Déclaration:
Accession avec [ ] (ex : tableau [ i ])
les indices varient de 0 à N-1
les éléments peuvent être de type différent
la taille peut changer dynamiquement
les tableaux à plusieurs dimensions sont possibles
Parcours:
for (var i = 0; i < myArray.length; i++)
{ //code }
20. LES TABLEAUX
Propriétés et méthodes :
length, reverse(), sort(), push(element), pop(),shift()
(supprimer le 1ér élément), etc..
tableau.join(‘ ’): convertir tableau en un chaine de
caractère
Inversement:
tableau=chaine.split(‘ ‘):convertir une chaine en un
tableau
21. DOM
Le Document Object Model (abrégé DOM) est
une interface de programmation API pour les
documents XML et HTML.
Le DOM est un moyen de représenter un document
sous forme d'une arborescence.
23. DOM
L'objet document est un sous-objet de window. Il
représente la page Web et plus précisément la
balise <html>.
Il possède une méthode principale:
var myvar=document.getElementById(id).
L’objet Element nous fournit deux méthodes,:
getAttribute(‘cle’)
setAttribute(‘cle’,’valeur’).
25. MANIPULER CODE HTML
Avec JavaScript on peut naviguer dans la structure
de la page HTML et la modifier(ajout, ,
remplacement, suppression,… des éléments).
C’est vraiment aisé de manipuler le contenu d'une
page web.
27. GESTION D’ÉVÈNEMENTS
Les évènements permettent de déclencher une
fonction selon qu'une action s'est produite ou non.
Action Événement Capture Action
28. GESTION DES ÉVÉNEMENTS
Évenement: Action pour le déclencher
onclick : un clic du bouton gauche de la souris sur une
cible
onmouseover : passage du pointeur de la souris sur une
cible
onblur : une perte de focus d’une cible
onfocus : une activation d’une cible
onselect : sélection d’une cible
onchange : une modification du contenue d’une cible
onsubmit : une soumission d’un formulaire
onload : à la fin du chargement d’un élément
onunload : la fermeture d’une fenêtre ou le chargement
d’une page autre que la courante
Par contre, variable globale devient des propriété de l’objet window, objet implicite
Une interface de programmation, qu'on appelle aussi une API (pour Application Programming Interface), est un ensemble d'outils qui permettent de faire communiquer entre eux plusieurs programmes ou, dans le cas présent, différents langages. Le terme API reviendra souvent, quel que soit le langage de programmation que vous apprendrez.
On peut changer structure d’une page HTML avec la création des éléments, la suppression…..
Pour ajouter un élément=créer, adjoindre des attributs + l'insérer à l'endroit voulu.