PROGRAMMATION WEB FRONTEND Quest ce que le frontend
PROGRAMMATION WEB FRONT-END
Qu’est ce que le front-end? n Le Front-End est ce avec quoi le client peut interagir. n Il est l'intermédiaire entre le client et le Back-End.
La programmation Front-End n Le développement Front-End se fait avec : n n HTML (hypertext markup language) CSS (cascading style sheets) Java. Script (langage de script) Tous contenu dans le DOM (document object model)
Le DOM
HTML plus en détail n n n 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 (Java. Script) et des formats de présentation (feuilles de style en cascade).
Le corp du HTML <html> <head> </head> <body> </html>
CSS plus en détail n n 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; }
Java. Script plus en détail n n 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 Java. Script est un standart ECMAScript. European Computer Manufacturers Association est une organisation de standardisation active dans le domaine de l‘informatique.
Java. Script plus en détail n n n 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 Java. Script 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, Java. Script 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. Java. Script n'est pas limité à la manipulation de documents HTML et peut aussi servir à manipuler des documents SVG, XUL et autres dialectes XML.
JSON n JSON (Java. Script 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
Structure d'un document JSON n Un document JSON ne comprend que deux éléments structurels : ¨ des ensembles de paires nom / valeur ; ¨ des listes ordonnées de valeurs.
Structure d'un document JSON n 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.
Format JSON : {"menu": { "id": "file", "value": "File", "popup": { "menuitem": [ {"value": "New", "onclick": "Create. New. Doc()"}, {"value": "Open", "onclick": "Open. Doc()"}, {"value": "Close", "onclick": "Close. Doc()"} ] } }}
Format XML : <menu id="file" value="File"> <popup> <menuitem value="New"onclick="Create. New. Doc()" /> <menuitem value="Open" onclick="Open. Doc()" /> <menuitem value="Close" onclick="Close. Doc()" /> </popup> </menu>
Java. Script Functional var a = ' '; var b = null; var c = document. get. Element. By. Id('c'); function init() { //. . . } function do. This() { //. . . } function do. That() { //. . . } function tweak. This() { //. . . } function run. That() { //. . . } function wrap. This() { //. . . } function stringify. That() { //. . . } function calculate. This() { //. . . }
Java. Script Classy (Object Notation) var behavior = { a : ' ', b : null, c : Object, init : function() { //. . . this. c = document. get. Element. By. Id('c'); }, do. This : function() { //. . . }, do. That : function() { //. . . }, tweak. This : function() { //. . . } } var behavior 2 = { run. That : function() { //. . . }, wrap. This : function() { //. . . }, stringify. That : function() { //. . . }, calculate. This : function() { //. . . } }
AJAX n 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. n Ajax est la combinaison de technologies telles que Javascript, CSS, XML, le DOM et le XMLHttp. Request 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. n DOM et Java. Script sont utilisés pour modifier l'information présentée dans le navigateur par programmation.
AJAX n l'objet XMLHttp. Request utilisé pour dialoguer de manière asynchrone avec le serveur Web. n la notation XML est utilisée pour structurer les informations transmises entre le serveur Web et le navigateur. n En alternative au format XML, les applications Ajax peuvent utiliser les fichiers texte ou JSON.
Performance n http: //developer. yahoo. com/performance/r ules. html
- Slides: 19
