Questionnaire technique HTML – CSS – JS – PHP

Transcription

Questionnaire technique HTML – CSS – JS – PHP
Questionnaire technique HTML – CSS – JS – PHP - SQL 2012
HTML
Question 1 : Enumérer toutes les balises de titres (<h…>) que vous connaissez. (facile)
H1, h2, h3, h4, h5, h6
Question 2 : Parmi les doctype listés, lesquels sont corrects ? (moyen/piège)
-
< !DOCTYPE HTML>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Tous. Le premier HTML5 est correct mais pas encore standard.
Question 3 : Quelles balises ou attributs puis-je utiliser pour améliorer mon SEO (Search
Engine Optimization) ? (moyen)
Dans le <head> du document : balises media, title (liste non exhaustive).
Dans le <body> du document : les titres <h…>, les attributs rel sur les liens <a>. Liste non
exhaustive.
Question 4 : Ce code est-il correct ? (facile/piège)
…
<p>
Mon paragraphe.
<br/ >
<h1>Mon titre</h1>
< /p>
…
Reponse : Non, une balise de titre de doit pas être contenue dans une balise de paragraphe sous
peine de provoquer de nombreux bugs d’interprétation par les navigateurs.
Question 5 : Quelles sont généralement les valeurs que peut prendre l’attribut « method »
de la balise form ? <form action= « url » method= « … »></form> (facile/bonus <- très
difficile)
POST et GET.
Autres en bonus : PUT, DELETE, HEAD, TRACE, CONNECT, OPTIONS.
Guillaume Cisco – Tous droits réservés.
Reproduction et distribution interdite.
Questionnaire technique HTML – CSS – JS – PHP - SQL 2012
Question 6 : Où peut-on placer une balise <script> dans le document html ? (facile)
Partout dans le head ou le body. Certaines personnes préconisent de les placer dans le head
ou à la fin du document mais c’est une erreur. Le développeur peut placer sa balise
absolument ou il veut, a lui de choisir s’il préfère exécuter du code scripté après un certain
bloc html ou améliorer les performances de chargement de son site. Les bonnes pratiques
seraient de tout mettre dans le head ou tout à la fin du document, mais cela est spécifique a
chaque site web, au final, l’implémentation est laissée libre.
Question 7 : Ce code est-il correct ? (facile)
…
<table>
<th>
<tr>
<td> Cell </td>
</tr>
<th>
</table>
…
Réponse : Non, car il pourra être interprété différemment par les navigateurs. Une balise th
devrait se trouver à l’intérieur d’une balise tr et non l’inverse. De plus les balises tbody et
thead sont manquantes, mais elles ne sont pas réellement nécessaires.
Question 8 : Quelles sont toutes les balises pouvant gérer le listing en html ?
ul, ol, li : unordered list, ordered list, list item (facile)
dl, dt, dd : definition list, definition term, definition description (difficile)
Question 9 : A quoi sert la balise br ? (facile)
Elle sert uniquement à forcer un retour à la ligne entre deux blocs de textes, en aucun cas
elle ne doit être utilisée pour réaliser un espacement vertical ‘affichage.
Question 10 : Quel organisme définit les standards et règles de bonnes pratiques du
langage HTML ? (facile)
Le W3C: World Web Consortium.
Guillaume Cisco – Tous droits réservés.
Reproduction et distribution interdite.
Questionnaire technique HTML – CSS – JS – PHP - SQL 2012
CSS
Question 1 : Qu’est-ce que la notion de sprite CSS ? (facile)
Une image contenant plusieurs images. Permettant de ne faire charger qu’une seule image a
l’utilisateur et ainsi réduire le nombre de requêtes vers le serveur. L’affichage de chaque
image contenue dans le sprite est réalisé en css à l’aide de la propriété background-position.
Question 2 : Combien de background (arrière-plan) peut-on attribuer à une balise ?
(moyen/bonus)
Un seul. CSS3 qui n’est pas encore standard le permettra.
Question 3 : Quelle est la différence entre display:none et visibility:hidden ? (moyen)
Les deux cachent l’élément sur lequel elles s’appliquent mais visibility :hidden permet de
conserver la taille que prenait l’élément dans la page.
Question 4 : Comment s’utilise position:absolute ? (moyen)
position:absolute permet de positionner un élément en rapport avec son premier parent
non-static (poisition par defaut.)
Question 5 : Y a-t’il des priorités sur les sélecteurs css ? Si oui lesquels ? (facile/bonus<moyen)
Id, class, élément.
Bonus : !important l’emporte sur tous , suivi des styles inline puis des selecteurs css.
Question 6 : Je possède ces bouts de code html et css, de quelle couleur sera mon
paragraphe ? (moyen)
Html:
<p id= « id1 » class= « class1 »>paragraphe</p>
Css:
p { color: red; }
#id1 { color: blue; }
.class1 { color: green; }
p { color: grey; }
#id1 { color: yellow; }
Réponse : jaune, le sélecteur sur l’identifiant l’emporte et la surcharge aussi.
Guillaume Cisco – Tous droits réservés.
Reproduction et distribution interdite.
Questionnaire technique HTML – CSS – JS – PHP - SQL 2012
Question 7 : l’élément span est-il par défaut inline ou block ? (facile)
Inline.
Question 8 : Quelles propriétés puis-je utiliser pour positionner à gauche ou à droite mes
éléments ? Eliminer ces positionnements ? (moyen)
-
La propriété float, aux valeurs left ou right.
Margin et padding (particulier).
Pour les textes et/ou images text-align (left, right, center)
En position absolute : left et right.
-
La propriété clear aux valeurs left, right ou both en ce qui concerne les float.
Question 9 : En css3, comment obtenir des coins arrondis ? Comment faire pour les
navigateurs ne prenant pas en compte css3 ? (moyen)
-
En utilisant la propriété border-radius.
En utilisant des images.
Question 10 : Que fait la propriété display:inline-block sur un élément ? (difficile)
L’élément se comporte lui-même comme un bloc mais est positionné de façon inline par
rapport aux autres éléments l’entourant. Il est ainsi possible de mieux le positionner.
Question 11 : Citez des frameworks css que vous connaissez. (moyen)
Suzy, blueprintcss, compass (sass), less, bootstrap de twitter.
Guillaume Cisco – Tous droits réservés.
Reproduction et distribution interdite.
Questionnaire technique HTML – CSS – JS – PHP - SQL 2012
Javascript
Question 1 : Comment définit-on une variable en javascript (locale et globale) ? (moyen)
Local : var ma_variable ;
Globale : ma_variable ;
Question 2 : Javascript est-il un langage oriente objet ? De quel type ? (moyen)
Oui, Prototype.
Question 3 : Peut-on avoir des classes en javascript ? Des namespaces ? (difficile)
Oui mais c’est particulier du au langage de type prototype du javascript. Cela se passe par
des fonctions et leur attribut prototype.
Oui en utilisant les objets et/ou les fonctions.
Question 4 : Qu’est-ce que JSON ? Est-il natif dans tous les navigateurs ? (moyen/difficile)
Javascript Object notation : la notation objet de javascript.
Non, il est présent à partir de certaines versions des navigateurs. Exemple : pas disponible
sous firefox 3.0 mais à partir de 3.1.
Question 5 : A quoi sert AJAX ? JSONP ? (facile/difficile)
Ajax pour asynchronous javascript and xml, permet de faire des requêtes au serveur et ainsi
récupérer des données sans avoir à recharger la page. Ces données peuvent être de type
html, xml ou même json.
JSONP pour json padding est une solution de hack permettant de faire de l’ajax en cross site
forgery (domaines différents).
Question 6 : De quel type sont les nombres en javascript ? (moyen)
Type number, ce sont tous des nombres flottants au final.
Question 7 : Comment obtient-on un élément à partir de son id ? (facile)
document.getElementById.
Guillaume Cisco – Tous droits réservés.
Reproduction et distribution interdite.
Questionnaire technique HTML – CSS – JS – PHP - SQL 2012
Question 8 : A l’aide de quelles fonctions puis-je débugger mon code ? (facile/moyen)
Alert  déconseillé.
Console <- .log() , .warn(), .info(), .trace(), .count() etc…
Question 9 : Pourquoi est-il dangereux d’utiliser for… in en javascript ? (HARDCORE)
For … in n’itère pas sur l’ordre des attributs d’un objet, de plus for in itère sur tous les
éléments d’un objet ce qui signifie aussi les méthodes.
Exemple :
>>> var o = [0, 1, 2, 3, 4];
>>> for (i in o){
... console.log(i);
... }
0
1
2
3
4
Undefined
>>> o.test = function (){console.log('test');}
function (){console.log('test');}
>>> for (i in o){
... console.log(i);
... }
0
1
2
3
4
test
undefined
Question 10 : Citez des frameworks javascript.
Jquery, Dojo, Mootools, RaphaelJS, ExtJs, Prototype, YUI, Processing etc…
Question 11 : Pouvez-vous expliquer les fermetures (closures) en javascript ? (très difficile)
Ce sont des fonctions présentes à l’intérieur d’autres fonctions possédant leurs contextes
propres.
Question 12 : Que donne +[] ? (HARDCORE)
L’operateur + essaie de transformer en entier ce qui le suit, ici un tableau vide ce qui est
équivalent a une chaine vide : +"", ce qui donne 0 ;
Guillaume Cisco – Tous droits réservés.
Reproduction et distribution interdite.
Questionnaire technique HTML – CSS – JS – PHP - SQL 2012
JQuery
Question 1 : Quel caractère est utilisé pour définir le namespace de Jquery i.e. sélectionner
un élément du DOM. (facile)
$
Question 2 : Quelle fonction doit-on utiliser pour modifier le style d’un élément ? (facile)
$.css()
Question 3 : Quelle fonction permet de récupérer la hauteur d’un élément en incluant ses
margin top et bottom ? (moyen/difficile)
$.outerHeight() ;
Question 4 : Quelles fonctions permettent de faire de l’animation en JQuery ? (moyen)
Show, hide, toggle, animate etc…
Question 5 : Comment savoir si un objet JQuery existe ? (moyen)
$(selector).length !== 0
Question 6 : A quoi sert la méthode stop ? Quels paramètres prend-elle ? (difficile)
Description: Stop la/les animations courantes sur l/les’élément(s) au(x)quel elle s’applique.
.stop( [clearQueue] [, jumpToEnd] )
.stop( [queue] [, clearQueue] [, jumpToEnd] )
queueThe name of the queue in which to stop animations.
clearQueueA Boolean indicating whether to remove queued animation as well. Defaults to false.
jumpToEndA Boolean indicating whether to complete the current animation immediately. Defaults
to false.
Guillaume Cisco – Tous droits réservés.
Reproduction et distribution interdite.
Questionnaire technique HTML – CSS – JS – PHP - SQL 2012
PHP
Question 1 : Comment définit-on une variable en PHP ? (facile)
A l’aide du caractère $.
Question 2 : Quel test effectue === et !== ? (moyen)
Une comparaison sur la valeur et le type des éléments comparés.
Question 3 : PHP est-il un langage oriente objet ? (facile)
Oui depuis PHP 5.
Question 4 : Comment concatène-t-on des chaines de caractères en php si celles-ci sont
entourées de simple quote ? (facile)
A l’aide du caractère point .
Question 5 : Citez des magic methods en php. (moyen)
__construct(), __destruct(), __call(), __callStatic(), __get(), __set(), __isset(), __unset(),
__sleep(), __wakeup(), __toString(), __invoke(), __set_state() and __clone()
Guillaume Cisco – Tous droits réservés.
Reproduction et distribution interdite.
Questionnaire technique HTML – CSS – JS – PHP - SQL 2012
Question 6 : Ce code peut-il afficher « Jour » ? (facile)
<?php
if ($texte != "Menu")
{
echo "Nuit";
}
elseif ($texte == "Menu")
{
echo "Soir";
}
else
{
echo "Jour";
}
?>
Non.
Question 7 : Quels sont les types primitifs en PHP ? (difficile)
Quatre types scalaires:
boolean
integer
float (floating-point number, aka double)
string
Deux types composes :
array
object
Et deux types spéciaux:
resource
NULL
Question 8 : Quelle fonction permet d'afficher rapidement tout le contenu d'un array ?
(facile)
-
array_key_exists
print_r
in_array
print_r.
Guillaume Cisco – Tous droits réservés.
Reproduction et distribution interdite.
Questionnaire technique HTML – CSS – JS – PHP - SQL 2012
Question 9 : Citez des variables super globales en PHP. (moyen)
$GLOBALS
$_SERVER
$_GET
$_POST
$_FILES
$_COOKIE
$_SESSION
$_REQUEST
$_ENV
Question 10 : Citez des framework php. (facile)
Symphony, Zend, CakePHP etc…
Guillaume Cisco – Tous droits réservés.
Reproduction et distribution interdite.
Questionnaire technique HTML – CSS – JS – PHP - SQL 2012
SQL
Question 1 : En MySQL, quel est le mot clef pour faire une requête de sélection en
s’assurant que l’élément existe ? (moyen/piège)
-
EXIST
EXISTS
PRESENT
PRESENTS
EXISTS
Question 2 : Que signifie CRUD ? (moyen/culture)
Create, Read, Update, Delete
Question 3 : Parmi les mots clefs suivant lesquels désignent des jointures ? (facile)
-
JOIN
INTER JOIN
OUTER JOIN
WRITE JOIN
LEFT JOIN
JOIN, OUTER JOIN, LEFT JOIN.
Les autres devraient être écrits : INNER JOIN et RIGHT JOIN.
Question 4 : Puis-je exécuter des sous-requêtes dans une requête ? (facile)
Oui.
Question 5 : Puis-je faire une jointure d’une table avec elle-même ? (moyen)
Oui.
Question 6 : Citez des types de langages de bases de données. (facile)
MySQL, PostgreSQL, Oracle, SQL Server etc…
Guillaume Cisco – Tous droits réservés.
Reproduction et distribution interdite.