Web : CM Flashcards

1
Q

C’est quoi Internet ?

A

C’est un réseaux de réseaux, une interconnection de machine.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
2
Q

Quels sont les buts d’internets ?

A
  • Tolérance au pannes
  • Abstraction de l’infrastructure physique
  • Neutralité du réseau (Intelligence à la périphérie)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
3
Q

Quels sont les couches d’internet ?

A
  • Application > HTTP
  • Transport > TCP
  • Réseaux > IP
  • Liaison > Wifi, Ethernet
  • Physique > Calbe en cuivre
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
4
Q

Pourquoi utiliser une structure en couche pour internet ?

A
  • Gain d’isolation
  • Résilience et évolution plus facile comme les niveaux sont indépendants
  • Chaque élement à une connaisance limité du système global
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
5
Q

C’est quoi le web ?

A

Interconnections de ressources par l’hypermedia

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
6
Q

Le web se situe à quelle couche d’internet ?

A

Au dessus de la couche applicative

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
7
Q

Quels sont les buts du web ?

A
  • Etre global
  • Semi-Structuré (Impossible de faire des bases de données gigantesque)
  • Décentralisé et non supervisé (On peut faire son propre site web)
  • Tolérant aux pannes (Cache)
  • Extensible et évolutif
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
8
Q

Quelles sont les contraintes architercturale du web ?

A
  • Système client/serveur
  • Couplage faible (Découverte du réseaux de lien en lien)
  • Représentation homogène (HTML)
  • Protocole unique (HTTP)
  • Adressage uniforme et indépendant (URL)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
9
Q

C’est quoi un site web ?

A

Pas une machine
Pas un domaine
Pas une apparance

C’est un ensemble de ressources “cohérantes”.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
10
Q

C’est quoi un agent ? Quel propriété a-t-il ?

A

C’est un logiciel qui joue le role de client.

Il va manipuler les ressources pour l’affichage voire le traitement.

Il maintient l’état du point de vue utilisateur.

Il est indépendant du type de connexion et du type d’appareil.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
11
Q

C’est quoi un serveur ? Que fait il ?

A

C’est une machine qui s’execute en permanance pour répondre si une requête client arrive.

Il gère les ressources (Etat, création, destruction) et ses représentation (génération)

Il s’occupe de l’adressage (URL)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
12
Q

Quels sont les deux types de serveurs ?

A

Statique - Lit le contenu d’un fichier et se contente de l’envoyer

Application - Lit le contenu d’un fichier et genère une représentation puis l’envoie

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
13
Q

C’est quoi une paserelle ?

A

Converti les protocoles non http en http

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
14
Q

C’est quoi le cache ? Où se fait la mémorisation ?

A

Mémorisation des résponses du serveur dans l’agen (Privé/local) ou dans une machine entre l’agent et le serveur (Partagé/proxy).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
15
Q

A quoi sert le cache ?

A
  • Optimisation des performance
  • Tolérance aux pannes
  • Passage à l’échele plus simple
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
16
Q

Où se situe un proxy ? C’est quoi ? A quoi il sert ?

A

Il est coté client

C’est un intermédiaire explicite ou transparant entre le client et le serveur.

Permet de :
- Faire du partage de connection
- Filtrage
- Conversion
- Cache
- Masquage de source

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
17
Q

C’est quoi un reverse proxy ? A quoi ça sert ?

A

La même chose qu’un proxy mais coté serveur.

Permet de :
- Répartition des charges entre plusieurs serveur (Plusieurs machine genère tout le site)
- Intégration (Plusieurs machine genère une partie du site)

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
18
Q

C’est quoi l’hypermedia ?

A

C’est un systeme basé sur :
- Une information unitaire :Ressource
- Une information structuré : Des liens typés
- Une structure d’information non linéaire : Graphe

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
19
Q

Qu’implique l’hypermedia ?

A

On peut créer un site web sans se soucier des liens qui pointent vers nous.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
20
Q

Quels sont les modes de parcours de l’hypermedia

A
  • Navigation non séquentielle > Découverte dynamique de lien en lien
  • Inclusion > Transclusion (On inclu une page dans une autre)
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
21
Q

C’est quoi une ressource ?

A

C’est un élément d’information abstrait et adressable (URI)

CELA NA RIEN A VOIR AVEC SA REPRESENTATION, UNE MEME RESSOURCE PEUT EN AVOIR PLUSIEURS

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
22
Q

A quoi sert une référence ?

A

Permet de connecter les ressources en les indentifiants de manière unique

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
23
Q

Exemple de ressource ?

A
  • Profil sur un réseau social
  • Article de blog/actualité
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
24
Q

C’est quoi un URI ?

A

Uniform Ressource Identifier

Il s’agit d’un identifiant unique pour une ressource qui englobe les URL et URN (Uniform Ressource Name).

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
25
Q

C’est quoi un URL ? A quoi sert elle ? Qui garantie ? Qui la définit ? Donner deux propriétés ?

A

Identifiant unique d’une ressource.

URL doit faire le lien entre un adressage abstrait vers une représentation physique. (Ce qui n’est pas équivalent)

Garantie par le DNS

Elle est définit par le serveur sans gestions centrale

Propriété :
Elle est déréférençable = Suffisante pour trouver la représentation de la ressource.

Elle est opaque, la comprhéansion sémantique peut se faire uniquement par le serveur. Le client doit naviger

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
26
Q

C’est quoi un DNS ? Il assure quoi ? Cela aide à quoi ?

A

Domain Name System

Système qui associe des noms de domaine à des IP.

Plus facile à retenir.

Assure l’indépendance du réseau

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
27
Q

C’est quoi un CDN ? A quoi ça sert ?

A

Content Delivery Network

Ensemble de serveur à des zones géoraphique distinctes.

Sert à utiliser le serveur le plus proche du client pour sa requête.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
28
Q

La partie d’URL “http” répond à quelle question ? Dans quel sens ? quel est le nom technique ?

A

Comment
Protocole
Scheme

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
29
Q

La partie d’URL “www.example.com” répond à quelle question ? Dans quel sens ? quel est le nom technique ?

A


Serveur
Hostname

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
30
Q

La partie d’URL “:80” répond à quelle question ? Dans quel sens ? quel est le nom technique ?

A


Adresse logiciel
Port

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
31
Q

La partie d’URL “/foo/bar” répond à quelle question ? Dans quel sens ? quel est le nom technique ?

A

Quoi
Ressource local du serveur
Path

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
32
Q

La partie d’URL “?a=1&b=2” répond à quelle question ? Dans quel sens ? quel est le nom technique ?

A

Quoi
Résultat d’un formulaire / argument
Query string

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
33
Q

La partie d’URL “#ici” répond à quelle question ? Dans quel sens ? quel est le nom technique ?

A

Quoi
Sous partie d’une page
Fragment

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
34
Q

Pourquoi il faut respecter les cools URLs don’t change ?

A

On ne peut pas savoir qui a l’ancien url. Si change l’url sans faire de redirection cela créer de la frustration/confusion/perte de confiance pour l’utilisateur car on lève une 404 pour rien.

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
35
Q

Comment faut il disgner les URL ?

A
  • Il faut réflechir au découplage
  • Pas de construction (Ou alors le serveur donne des instructions)
  • Pas de compréhension par le client (Autre que la structure)
  • Indépendantes des informations variables (Extension, Date, auteur…)
  • Courte
  • Facile à retenir
  • Facile à écrire, dicter, lire
  • Bidouillable mais pas requis
How well did you know this?
1
Not at all
2
3
4
5
Perfectly
36
Q

Pourquoi le client et le serveur sont découplé ?

A

Parce que aucune information sur le site est codée directement dans le navigateur

How well did you know this?
1
Not at all
2
3
4
5
Perfectly
37
Q

Que veut dire HTTP ?

A

Hyper Text Transfer Protocol

38
Q

C’est quoi une requête indempotante ? Quels en sont les propriétés ?

A

Faire une fois la requête où la faire n fois revient au même

  • Indépendance des intermédiaires
  • Reprise sur erreur
  • Automatisation
39
Q

C’est quoi une requête sans effet de bord ? Quels en sont les propriétés ?

A

Ne modifie pas l’état de la ressource

Elle est donc “cachable”

40
Q

Donner les méthodes/verbe qui sont indempotente ET sans effet de bord

A

GET et HEAD

41
Q

Donner les méthodes/verbe qui sont uniquement indempotente

A

PUT(Mise à jour en écrasant tout) et DELTE

42
Q

Donner le reste des méthode/verbe http

A

POST(Création/Effet sur la ressource) ET PATCH (Mise à jour incrémentale)

43
Q

Donner les catégories de status/code serveur

A

1XX : Infomration
2XX : Succès
3XX : Redirection ou pas de contenu
4XX : Erreur du client
5XX : Erreur serveur

44
Q

Pourquoi les catégories sont regroupé par 100aine ?

A

Pour pouvoir en rajouter après et être capable de dire dans quelle catégorie elle sont si un client n’est pas à jour=> Evolutivité

45
Q

Quels sont les différents type de client et que font ils ? Quel est la deuxième dimension de cela ?

A

Client léger > Affiche uniquement du html
Client riche > Affiche du html et fait quelque traitement
Client lourd > Affiche et fait la majorité des traitements

Il y a aussi la dimension déploiement, plus le déploiement est lourd plus il faut installer des choses spécifique sur le client. (Exemple discord)

46
Q

Pourquoi les applications migre d’un client dédié vers des applications web ?

A

Permet d’avoir le navigateur comme platforme
Permet d’avoir du CoD
Pas de déploiement
Evolutivité
Facile a mettre en place > Techno libre

47
Q

C’est quoi le CoD ? A quoi ça sert ?

A

C’est le Code On Demand. Le serveur envoie le code au client quand il en a besoin, ce qui permet d’éviter une installation.

Ajout de fonction au client générique (applet, plugin…)

48
Q

C’est quoi HTML ? Cela sert à quoi ?

A

HyperText Markup Language

C’est un langage de balisage qui permet d’ajouter de la sémantique dans une ressource en structurant un document.

49
Q

C’est quoi une grammaire ? Que définit-elle ?

A

Il s’agit des élements du langages (Vocabulaire)
Ainsi que de la structure qu’on lui donne (Construction)

ELLE DEFINIT UNE SYNTAXE ABSTRAITE

50
Q

C’est quoi la sérialisation ?

A

C’est le fait de concrétiser une syntaxe abstraite textuellement.

51
Q

C’est quoi SGML ? Que définit-il ? A l’aide de quoi ? De quoi à on besoin pour faire de l’analyse complexe ?

A

Standard Generalized Markup Language est un méta-langage qui définit une syntaxe concrète indépendament d’une grammaire à l’aide d’un DTD.

Pour faire l’analyse complexe on a besoin d’une grammaire

52
Q

C’est quoi un DTD ? Que définit-il ?

A

Document Type Definition

Il définit la structure d’un document, les éléments et attributs qui y sont autorisés.

53
Q

C’est que le XML ?

A

eXtensible Markup Language est un dérivé du SGML qui donne une syntaxe concrète non ambigu.

54
Q

Quels sont les aventages de XML par rapport à SGML ?

A

Extension > Fusion de langage
Encodage unicode
Grammaire non nécéssaire à l’analyse
Toutes les balises sont forcément fermée

55
Q

C’est quoi un document bien formé ? Pourquoi c’est souhaitable ?

A

Document qui respecte la syntaxe concrète (Pas forcément la grammaire).

Si il n’est pas bien formé il ne peut pas être lu.

Exemple :
<a> test <b> test2 </b> test3 </a>

56
Q

C’est quoi un document valide ? Pourquoi c’est souhaitable ?

A

En plus d’être bien formé, un document valide :

Document qui respecte la grammaire (Syntaxe abstraite/sens)

Permet d’avoir de la compatibilité et de l’accéssibilité. (Mal voyant par exemple)

Exemple :
Pas de p dans un em

57
Q

C’est quoi le CSS ? A quoi ça sert ?

A

Cascading Style Sheet permet de définir la représentation des différents élements sémentique du HTML.

58
Q

Donner l’ordre des priorités du CSS, du plus prioritaire au moins prioritaire

A

Importance: Navigateur < Utilisateur < Auteur < Auteur important! < Utilsateur important!

Spécificité: Nom < Structure < Classe < id

Ordre

59
Q

C’est quoi un sélecteur CSS ? A quoi ça sert ?

A

C’est ce qui permet au CSS de savoir à quoi appliquer le style.

Exemple :
.oui #non

60
Q

Donner des exemples de pseudo-selecteur

A

:hover :before :after

61
Q

Citer deux préprocesseur css et surcouche css, a quoi ça sert ?

A

Sass et Less

Cela permet de :
- Ajouter des variables
- Faire du calcul et des fonctions
- Faire de l’héritage et mixins (Genre de marco en C)
- Imbrication de fonction

62
Q

C’est quoi un applet ?

A

Mini-logiciel qui s’execute dans le navigateur

63
Q

C’est quoi un SPA ?

A

Single Page Application
Application web monopage
Qui échange des objets JS (json) avec le client

64
Q

C’est quoi un PWA ?

A

Progressive Web App
Application Web lourde
Qui échange des objets JS (json) avec le client

65
Q

A quoi servent les SPA et PWA ?

A

A avoir de l’interactivité (IHM)
A faire moins d’échange client / serveur (Verif formulaire, Rafraichissement partiel, Tri de tableau)

66
Q

C’est quoi l’IHM ?

A

Interface Homme Machine

67
Q

Quel est le vrai nom du javascript ?

A

EcmaScript

68
Q

Comment se fait le sous typage en EcmaScript ?

A

Avec la délégation sur les prototype et par l’héritage uniquement

69
Q

Que permet de faire l’intégration au navigateur de EcmaScript ?

A

Permet d’intéragir avec le site avec la DOM (Document Object Model)

Fait des événements (Listener par exemple)

API (Historique, fenetre, localisation)

70
Q

Comment s’exéctute EcmaScript ?

A

Le code brut est envoyé par le serveur au client. Il est pré-compilé par le moteur du navigateur qui le lance ensuite en l’INTEPRETANT et utilise JIT pour aller plus vite.

71
Q

Quels sont les tois méthodes d’exécution d’EcmaScript ?

A

Au chargement (Ce qui peut être bloquant)
Inline (Dans l’url : javascript:/**/)
Evénementiel (Approche IHM, fonction = élement)

72
Q

Donner les caractéristique de EcmaScript ?

A

Inteprété (VM)
Evalué Dynamiquement
Typage faible et dynamique (Transtypage automatique avec .valueOf())
Utilise le hoisting

73
Q

C’est quoi le hoisting ?

A

L’interpreteur fait remonter toutes les déclarations (PAS L’AFFECTATION) de variable tout en haut du scope. Donc une variable définit après un appel de fonction avec celle-ci va quand même marcher.

Exemple :
var x = 12;
sera déclaré en haut du scope
Mais l’affecation = 12 sera faite “au bon endroit”

74
Q

Une variable non intialisé vaut quoi en EcmaScript ?

A

undifined

75
Q

Que fait for (var i in b) en EcmaScript ? Comment on fait un vrai itérateur.

A

Il itère sur tout les INDICES des ATTRIBUTS de b

Pas de problème sur une liste mais problème sur un prototype.

Pour faire un vrai itérateur SUR LES VALEURS on utilise for (var a of b)

76
Q

C’est quoi le DOM ? A quoi ça sert ?

A

Document Objet Model

Interface de programmation normalisé par la W3C qui permet de voir l’arbre HTML sous le paradigme objet.

77
Q

Comment on peut coder une couleur en CSS ?

A

Additif RGB
Soustractif CMYN
HSL

  • Soit avec les fonctions rgb()…
  • Soit avec les hexcode
  • Soit avec les couleur pré-définies
78
Q

Modèle de boite :

Différence entre les boxes inline et block boxe ?

A

Les boxes inlines :

  • Ne créer pas de retour à la ligne
  • Pas de width et height
79
Q

Sur quoi s’applique le hoisting en javascript ?

A

Sur les var.
Leur portée est un peu perturbante car pas limité au block mais à la fonction (tout le scope)

80
Q

A quoi servent let et const en javascript ?

A

A définir une variable/constante au niveau du block

81
Q

Comment faire une variable globale en javascript ?

A

Il suffit de ne pas mettre de mot clef lors de la déclaration

82
Q

Sur quel opérateurs javascript fait du transtypage automatique ? A quelle condition ? Quellle propriété “naturelle” ils ne respecte pas ? Quel méthode il utilise ?

Que vaut false == “false” ?
Que vaut false == “0” ?

A

!= et == et +

== et != ne sont pas transitif

Il fait le transtypage uniquement quand les types sont différent.

Il utilise valueOf()

Une chaine de caractère vaut faut ssi elle est vide donc ça évalue : false == true =»» false

Converti “0” en entier puis converti 0 en booléen (faux) donc retourne vrai.

83
Q

Par quel caractère peut commencer une variable en javascript ?

A

Lettre unicode, $ et _

84
Q

Javascript:
typeof new Date();
typeof new Integer(10);
typeof Date();

A

object
object
string

85
Q

Que fait chaque ligne ?

var tab = new Array(1, 2, ‘a’)
var tab = new Array()
var tab = new Array(5)

A

[1, 2, 3]
Tableau vide
Tableau vide de 5 élement

86
Q

De quel type sont les clef d’un tableau associatif en js?

A

String (.toString() sinon)

87
Q

Qu’affiche :
function foo(a, b) {console.log(a=${a} | b = ${b})}
foo()

A

a = undefined | b = undefined

88
Q

Comment récupérer les restes des arguments d’une fonction ?

A

Array.from(arguments)

89
Q

Quels sont les propriétés des fonctions en js ?

A

Ce sont comme des valeurs, elles sont :
- Retournable
- Passable en paramètre

90
Q

C’est quoi une closure en JS ?

A

Fonction qui dans sa définition contient des variables libre (Pas affecté (ni paramètre ni variable locale)) qu’elle encapsule de son contexte d’exécution.

91
Q

C’est quoi une fonction anonyme ?

Donner deux exemple de fonction annonyme en js (Normal et fléchée)

A

Fonction
- A la demande
- Locale

var hello = function(name){ return “Hello “ + name ; } ;
const hello = (name) => “Hello “ + name ;