programmation web

PROGRAMMATION WEB

FRONT-END

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.

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)

Le DOM

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).

Le corp du HTML

<html><head></head>

<body></body>

</html>

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; }

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.

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.

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

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.

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.

Format JSON :{"menu": {

"id": "file","value": "File","popup": {

"menuitem": [{"value": "New", "onclick": "CreateNewDoc()"},{"value": "Open", "onclick": "OpenDoc()"},{"value": "Close", "onclick": "CloseDoc()"}

]}

}}

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>

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() { // ... }

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() { // ... }

}

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.

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.

Performance

http://developer.yahoo.com/performance/rules.html

programmation web

Documents