Class notes
Class notes frontend
- Course
- Institution
good and easy (good and easy)
[Show more]
Seller
Follow
medted1206
Content preview
C12 : Développer en Front-end1-Comprendre les concepts de base du web front-end
1. Fondamentaux des sites web statiques
Un site Web statique consiste en une série de fichiers HTML, chacun représentant une page
physique d'un site Web. Sur les sites statiques, chaque page est un fichier HTML distinct. Lorsque
vous visitez la page d'accueil, vous ne visualisez que le fichier de la page d'accueil réelle.
2. Différence entre front End et back end :
Front-end:
Le front-end est construit à l'aide d'une combinaison de technologies telles que le langage
de balisage hypertexte (HTML), JavaScript et les feuilles de style en cascade (CSS).
Back-end :
Le back-end, également appelé côté serveur, se compose du serveur qui fournit les données
à la demande, de l'application qui les canalise et de la base de données qui organise les
informations.
3. Présentation des Frameworks front end :
Framework :
En gros, il s’agit d’une boîte à outils couplée à une bibliothèque pour programmeur
informatique. Il permet d’aider les programmeurs dans leur travail en leur proposant des morceaux
de code pour mettre en place des fonctionnalités couramment demandées pour des applications.
Par exemple, le multilinguisme, la gestion de la sécurité, la modularité (c’est-à-dire la possibilité
pour l’utilisateur de personnaliser son interface).
Avantages d’un Framework :
Les développeurs se concentrent uniquement sur la partie métier puisque toutes les
couches techniques sont déjà intégrées dans le Framework.
L’architecture permet la séparation des couches techniques logiques afin de faciliter le
développement en équipe, la maintenance et l’évolution.
La maintenance et l’évolution du Framework sont gérées par l’organisme fondateur.
Les Framework front-end:
React : c’est une librairie java script pour créer des interfaces utilisateur frontend, certaine
personne l’appelle Framework, en général il ne faut pas prendre la tête avec est ce que React est
une bibliothèque ou Framework, bref React c’est un utilitaire qui va nous aider à développer des
interfaces utilisateur plus rapidement et facilement.
ANGULAR : angular est une plate-forme et un Framework permettant de créer des applications
clientes single page à l'aide de HTML et de TypeScript.
VUE JS : vue est un Framework JavaScript pour la construction d'interfaces utilisateur.
4. Les aspects avancés de JavaScript :
Le développement Frontend avec React nécessite une bonne maitrise de java script ES6.
, Les classes d’objets en ES6 :
Les classes sont des modèles pour créer des objets. Ils encapsulent les données avec du code pour
travailler sur ces données.
Création d’une classe :
Class Etudiant{constructor(nom,age){ this.nom=nom; this.age=age } }
Création d’objets :
Class Etudiant{ constructor(nom,age){ this.nom=nom; this.age=age } }
let et1= new Etudiant("Rami",23)
let et2= new Etudiant("Karimi",21)
Création de méthode:
class Etudiant{ constructor(nom,age){ this.nom=nom; this.age=age }
info(){ return `Etudiant nom:${this.nom} a pour age:${this.age}` } }
Appel de la méthode:
let et1= new Etudiant("Rami",23);
console.log(et1.info());
let et2= new Etudiant("Karimi",21) ;
console.log(et2.info());
Héritage de classe :
L’héritage de classe permet de créer une nouvelle classe à partir d’une classe déjà existante.
exemple:
class Stagiaire extends Etudiant {constructor(nom,age,stage){ super(nom,age); this.stage=stage; }
Info () {return `${super.info ()} stage: ${this. Stage} `}
Modules :
Un module c’est un fichier Java Script, qui contient les mots clés export default ou export elles les
valeurs, classes, et fonctions qu’on veut exporter.
Template literals :
const salutation="salut " const nom="Rami" //avec template literal console.log(`${salutation} $
{nom}`) //est identique a
console.log (salutation+" "+nom)
L'opérateur conditionnel ternaire :
L'opérateur conditionnel (ternaire) est un opérateur JavaScript qui prend trois opérandes : une
condition suivie d'un point d'interrogation (?), puis une expression à exécuter si la condition est
vraie suivie de deux points (:), et enfin l'expression à exécuter si la condition est fausse.
exemple:
let isMember=true; let remise=isMember==true?0.2:0.1
console.log ("remise:",remise)
Object destructing :
La syntaxe d'affectation de déstructuration est une expression JavaScript qui permet de
décompresser des valeurs de tableaux, ou des propriétés d'objets, dans des variables distinctes.
Exemple :
const personne={ nom:"fatihi", age:23, adresse:{rue:14,ville:"casa"} }
const {nom,age,adresse:{rue},adresse:{ville}}=personne
console.log(nom,age,rue,ville)
The benefits of buying summaries with Stuvia:
Guaranteed quality through customer reviews
Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.
Quick and easy check-out
You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.
Focus on what matters
Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!
Frequently asked questions
What do I get when I buy this document?
You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.
Satisfaction guarantee: how does it work?
Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.
Who am I buying these notes from?
Stuvia is a marketplace, so you are not buying this document from us, but from seller medted1206. Stuvia facilitates payment to the seller.
Will I be stuck with a subscription?
No, you only buy these notes for $8.49. You're not tied to anything after your purchase.
Can Stuvia be trusted?
4.6 stars on Google & Trustpilot (+1000 reviews)
79202 documents were sold in the last 30 days
Founded in 2010, the go-to place to buy study notes for 14 years now