Entretien dev frontend

Questions_html_css_javascript.md

Question technique

Technique général

Quelle est la différence entre le HTML et le HTML5 ?

Le HTML5 est une évolution du langage HTML, qui sert à coder des pages web. Le HTML5 introduit de nouvelles balises et attributs, et en a rendu certains obsolètes. On peut citer, entre autres :

• de nouvelles balises pour mieux structurer la page, comme et
• de nouvelles balises multimédia : et
• la balise , pour dessiner des formes avec lesquelles l'internaute peut interagir
• de nouveaux types de champs de formulaire : date, adresse mail, numéro de téléphone...

Est ce que tu connais less ? C'est quoi ?

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.

Est ce que tu connais twig ? C'est quoi ?

Twig is a modern template engine for PHP

• Fast: Twig compiles templates down to plain optimized PHP code. The overhead compared to regular PHP code was reduced to the very minimum.
• Secure: Twig has a sandbox mode to evaluate untrusted template code. This allows Twig to be used as a template language for applications where users may modify the template design.
• Flexible: Twig is powered by a flexible lexer and parser. This allows the developer to define its own custom tags and filters, and create its own DSL.

HTML

Peux tu me dessiner ce que fait ce code :

  <style>
        .row {
            display: table;
            width: 100%;

            [class^='col-md-'],
            [class^='col-xs-']{
                display: table-cell;
            }

            .col-md-5{
                width: 100px;
            }

            @media screen and (max-width: 600px) {
                .col-xs-block{
                    display: block;
                    width: 100%;
                }
            }
        }
    </style>

    <div class="row">
        <div class="col-md-5 col-xs-block">
            1
        </div>
        <div class="col-md-liquid col-xs-block">
            2
        </div>
    </div>

Javascript

Question 1 : Écrire le code manquant:

(function() {
    function MaClasse(nom) {
        // ...
    }
    // ...
    var obj = new MaClasse("John Doe");
    print(obj); // affiche "Je suis John Doe"
})();

Solution 1 :

(function() {
    function MaClasse(nom) {
        this.nom = nom;
    }
    MaClasse.prototype.toString = function() {
        return "Je suis " + this.nom;
    }
    var obj = new MaClasse("John Doe");
    document.write(obj); // affiche "Je suis John Doe"
})();

Question 2 : Que produit ce script ?

function a() {
    a = 1;
}

function b() {
    return a;
}

function c() {
    var a = 2;
}

a();
b();
c();

document.write(a);

Solution 2:

1

Question 3 : Écrire le code manquant

$(function() {
    $('form').submit(function(e) {
        e.preventDefault()
        $.ajax({
            // ...
        })
    })
})

Solution 3 :

$(function() {
    $('form').submit(function(e) {
        e.preventDefault()
        $.ajax({
            url: '/mon/url',
            data: $(this).serialize(),
            success: function() {
                alert("Envoyé!");
            }
        })
    })
})

Question général

Quel age as tu ?

Ou est ce que tu habites ?

Combien d'années d'expérience ?

Sur quel OS tu travailles ?

Sur quel IDE tu travailles ?

Est ce que tu as un compte Github ?