Télécharger la présentation
La présentation est en train de télécharger. S'il vous plaît, attendez
1
PROGRAMMATION WEB FRONT-END
2
Qu’est ce que le front-end?
Le Front-End est ce avec quoi le client peut interagir. Il est l'intermédiaire entre le client et le Back-End.
3
La programmation Front-End
Le développement Front-End se fait avec : HTML (hypertext markup language) CSS (cascading style sheets) JavaScript (langage de script) Tous contenu dans le DOM (document object model)
4
Le DOM
5
HTML plus en détail HTML est initialement dérivé du Standard Generalized Markup Language (SGML). HTML permet de structurer sémantiquement et de mettre en forme le contenu des pages. Il est souvent utilisé conjointement avec des langages de programmation (JavaScript) et des formats de présentation (feuilles de style en cascade).
6
Le corp du HTML <html> <head> </head> <body>
7
CSS plus en détail CSS permet de définir le rendu d'un document en fonction du média de restitution (printer, screen) Introduit au milieu des années 1990, CSS devient couramment utilisé dans la conception de sites web et bien pris en charge par les navigateurs web dans les années 2000. L'un des objectifs majeurs des CSS est de permettre la mise en forme hors des documents. p { font-size: 110%; font-family: Helvetica, sans-serif; }
8
JavaScript plus en détail
Langage de programmation de scripts principalement utilisé dans les pages web interactives. Le langage a été créé en 1995 par Brendan Eich pour le compte de la Netscape Communications Corporation, qui s'est inspiré de nombreux langages, notamment de Java mais en simplifiant la syntaxe pour les débutants JavaScript est un standart ECMAScript. European Computer Manufacturers Association est une organisation de standardisation active dans le domaine de l‘informatique.
9
JavaScript plus en détail
C'est un langage orienté objet à prototype, c'est-à-dire que les bases du langage et ses principales interfaces sont fournies par des objets qui ne sont pas des instances de classes Du code JavaScript peut être intégré directement au sein des pages Web, pour y être exécuté sur le poste client. C'est alors le navigateur Web qui prend en charge l'exécution de ces programmes appelés scripts. Généralement, JavaScript sert à contrôler les données saisies dans des formulaires HTML, ou à interagir avec le document HTML via l'interface Document Object Model, fournie par le navigateur (on parle alors parfois de HTML dynamique ou DHTML). Il est aussi utilisé pour réaliser des services dynamiques, parfois futiles, strictement cosmétiques ou à des fins ergonomiques. JavaScript n'est pas limité à la manipulation de documents HTML et peut aussi servir à manipuler des documents SVG, XUL et autres dialectes XML.
10
JSON JSON (JavaScript Object Notation) est un format de données textuel, générique, dérivé de la notation des objets du langage ECMAScript. Il permet de représenter de l’information structurée. Créé par Douglas Crockford, il est décrit par la RFC 4627
11
Structure d'un document JSON
Un document JSON ne comprend que deux éléments structurels : des ensembles de paires nom / valeur ; des listes ordonnées de valeurs.
12
Structure d'un document JSON
Ces mêmes éléments représentent 3 types de données : des objets ; des tableaux ; des valeurs génériques de type tableau, objet, booléen, nombre, chaîne ou null.
13
Format JSON : {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "CreateNewDoc()"}, {"value": "Open", "onclick": "OpenDoc()"}, {"value": "Close", "onclick": "CloseDoc()"} ] } }}
14
Format XML : <menu id="file" value="File"> <popup> <menuitem value="New"onclick="CreateNewDoc()" /> <menuitem value="Open" onclick="OpenDoc()" /> <menuitem value="Close" onclick="CloseDoc()" /> </popup> </menu>
15
JavaScript Functional
var a = ' '; var b = null; var c = document.getElementById('c'); function init() { // ... } function doThis() { // ... } function doThat() { // ... } function tweakThis() { // ... } function runThat() { // ... } function wrapThis() { // ... } function stringifyThat() { // ... } function calculateThis() { // ... }
16
JavaScript Classy (Object Notation)
var behavior = { a : ' ', b : null, c : Object, init : function() { // ... this.c = document.getElementById('c'); }, doThis : function() { // ... }, doThat : function() { // ... }, tweakThis : function() { // ... } } var behavior2 = { runThat : function() { // ... }, wrapThis : function() { // ... }, stringifyThat : function() { // ... }, calculateThis : function() { // ... }
17
AJAX En informatique, et plus particulièrement en architecture informatique, Ajax (acronyme de Asynchronous Javascript and XML) est une manière de construire des applications Web et des sites web dynamiques basés sur diverses technologies Web ajoutées aux navigateurs dès 1995. Ajax est la combinaison de technologies telles que Javascript, CSS, XML, le DOM et le XMLHttpRequest dans le but de réaliser des applications Web qui offrent une maniabilité et un confort d'utilisation supérieur à ce qui se faisait jusqu'alors. DOM et JavaScript sont utilisés pour modifier l'information présentée dans le navigateur par programmation.
18
AJAX l'objet XMLHttpRequest est utilisé pour dialoguer de manière asynchrone avec le serveur Web. la notation XML est utilisée pour structurer les informations transmises entre le serveur Web et le navigateur. En alternative au format XML, les applications Ajax peuvent utiliser les fichiers texte ou JSON.
19
Performance
Présentations similaires
