avatar
Sexe : Féminin
Date d'inscription : 12/06/2016
Messages : 290
Ancien.ne du Staff
Voir le profil de l'utilisateur
# Classe 3 - Dviryxle Mer 1 Fév 2017 - 15:40
coucou @Dviryx, voilà ta classe! j'aurais voulu faire un petit paragraphe d'introduction mais j'ai déjà pris du temps à préparer ces cours alors on va se lancer direct dans le bain

vu que tu es plus intéressée par le js et jquery, je vais commencer par te poser quelques questions pour voir ce que tu connais déjà
certaines questions concernent le css puisque l'on retrouve beaucoup les sélecteurs css en jquery

vu que vous êtes tous les trois intéressés par le js et jquery dans une certaine mesure, les questionnaires vont être quasi identiques alors je compte sur vous pour ne pas vous copier mutuellement Happyness

ne vous inquiétez pas, le reste du cours sera variable en fonction de vos réponses et les exercices que j'ai prévus sont aussi très différents

j'ai volontairement mis des questions un peu compliquées (je crois), si tu n'arrives pas à répondre c'est pas grave, par contre tu as l'autorisation de regarder la réponse sur google et de la copier du moment que tu l'as comprise

questionnaire
- quelle est la différence entre un style "inline" et une feuille de style? donne moi au moins trois raisons d'utiliser une feuille de style plutôt qu'un style "inline"
- qu'est-ce que jquery par rapport au js?
- sais-tu ce qu'est le DOM?
- copies moi un morceau de js que tu as déjà utilisé et expliques le (pour voir ce que tu en comprends)
- en prenant en compte l'html ci-dessous :
Code:
<div class="main">
<ul class="diaporama">
<li class="first"><a href="#prev">précédent</a></li>
<li class="image"><img alt="image" src="http://"/></li>
<li class="image"><img alt="image" src="http://"/></li>
<li class="image"><img alt="image" src="http://"/></li>
<li class="image"><img alt="image" src="http://"/></li>
<li class="last"><a href="#next">suivant</a></li>
</ul>
</div>
donne moi trois sélecteurs CSS différents qui permettent d'appliquer un style à "<a href="#prev">précédent</a>" et "<a href="#next">suivant</a>" (et uniquement ces li) sans modifier l'html
- qu'est-ce qu'un événement en js?
- sais-tu ce qu'est une regex?
- sais-tu, en programmation, ce qu'est une fonction? et une variable?
- sais-tu, en programmation, ce qu'est une boucle? et une conditionnelle?
- sais-tu ce que sont les media queries?
- est-ce que je pose des questions trop compliquées?
- donnes moi un code html et css correspondant à ce visuel:

(à faire sur jsfiddle ou codepen, envoies moi un mp si tu n'arrives pas à l'utiliser)
avatar
Sexe : Masculin
Date d'inscription : 25/06/2016
Messages : 48
Newbie
Voir le profil de l'utilisateur
# Re: Classe 3 - Dviryxle Mer 1 Fév 2017 - 17:50
Heyyy !

Je t'avouerais que je n'ai pas trouvé des choses toujours très intéressantes sur Google... :/

quelle est la différence entre un style "inline" et une feuille de style? donne moi au moins trois raisons d'utiliser une feuille de style plutôt qu'un style "inline"

=>Honnêtement, je ne sais pas.

qu'est-ce que jquery par rapport au js?

=> JavaScript est un langage de programmation inventé par Brendan Eich en 1995, et jQuery est une bibliothèque JavaScript open-source inventée par John Resig en 2006. Insérer du JavaScript pur (le langage de programmation) dans vos projets web peut changer le comportement de vos pages. Ce langage vient compléter le HTML et le CSS de votre site, qui déterminent le contenu et l'apparence de votre page, en y ajoutant une couche d'interactivité.

Le logo JavaScript
jQuery (la bibliothèque JavaScript open-source) vous permet d'exploiter la puissance de JavaScript pour accomplir une myriade de choses géniales sur votre page web. Avec jQuery, vous pouvez par exemple :

Ajouter, supprimer ou modifier des éléments HTML au sein de votre page.
Changer les styles des éléments de la page en modifiant le CSS qui leur est associé.
Animer des éléments de votre page.
Envoyer et recevoir des données depuis un serveur grâce à AJAX (asynchronous JavaScript and XML, c'est-à-dire JavaScript et XML asynchrones) pour ne plus avoir besoin de recharger vos pages après validation d'un formulaire.
Et bien plus encore !

Par ailleurs, utiliser jQuery vous permet de profiter d'une plus grande compatibilité avec les différents navigateurs. Le JavaScript pur est réputé pour avoir des spécificités dans chaque navigateur comme Internet Explorer, Chrome, Safari, etc, qui vont potentiellement exécuter votre code JavaScript différemment les uns des autres. jQuery vous évite cette prise de tête, car il est conçu dans un esprit de compatibilité maximale.
J'avoue ne pas avoir très bien compris, héhé.

sais-tu ce qu'est le DOM?

=>Le DOM est une représentation structurée et orientée objet. Elle permet de modifier les propriétés des éléments du contenu de la page. On parle également de notion d'arbre ou chaque balise y représente un noeud afin de faciliter le déplacement entre eux

copies moi un morceau de js que tu as déjà utilisé et expliques le (pour voir ce que tu en comprends)

Je n'en ai jamais utilisé jusqu'à maintenant. Quand je dis que je suis débutant, c'est vraiment le cas ! :P

en prenant en compte l'html ci-dessous :
Code:

<div class="main">
<ul class="diaporama">
<li class="first"><a href="#prev">précédent</a></li>
<li class="image"><img alt="image" src="http://"/></li>
<li class="image"><img alt="image" src="http://"/></li>
<li class="image"><img alt="image" src="http://"/></li>
<li class="image"><img alt="image" src="http://"/></li>
<li class="last"><a href="#next">suivant</a></li>
</ul>
</div>
donne moi trois sélecteurs CSS différents qui permettent d'appliquer un style à "précédent" et "suivant" (et uniquement ces li) sans modifier l'html

Je ne comprends pas bien. Désolé.

qu'est-ce qu'un événement en js?

Les événements permettent de déclencher une fonction selon qu'une action s'est produite ou non. Par exemple, on peut faire apparaître une fenêtrealert()lorsque l'utilisateur survole une zone d'une page Web.

sais-tu ce qu'est une regex?

Absolument pas. ^^

sais-tu, en programmation, ce qu'est une fonction? et une variable?

J'ai toujours eu du mal à faire la différence entre les deux. :$

sais-tu ce que sont les media queries?

Ce sont des règles à appliquer pour changer le design d'un site en fonction des caractéristiques de l'écran.

est-ce que je pose des questions trop compliquées?

=> Un peu - beaucoup oui. xD
Pour tout te dire, je pense que je me suis mal exprimé, mon niveau est sûrement un peu plus bas que tu l'imagines.
J'ai lu tout un livre sur HTML5/CSS3 mais je pense ne pas avoir assez pratiqué. Donc si c'est possible de revoir quelques petits trucs à ce niveau là, ce serait pour mon plus grand plaisir. :)
Concernant le javascript, j'ai commencé un livre mais j'ai beaucoup de mal à comprendre.


donnes moi un code html et css correspondant à ce visuel:

=> J'aimerais bien revoir quelques bases avant de réellement répondre à cela. ^^

Désolé en tout cas pour ma chiantitude dont je fais preuve. :$

Passe une bonne soirée !
avatar
Sexe : Féminin
Date d'inscription : 12/06/2016
Messages : 290
Ancien.ne du Staff
Voir le profil de l'utilisateur
# Re: Classe 3 - Dviryxle Mer 1 Fév 2017 - 18:01
ahah, pas de soucis!
considérant tes réponses, on va mettre de côté le javascript pour l'instant et reprendre les bases
est-ce que tu aurais tout de même un code html/css de ta création sous la main pour que je vois ce dont tu es capable ou tu n'as pas encore appliqué tes connaissances?
avatar
Sexe : Masculin
Date d'inscription : 25/06/2016
Messages : 48
Newbie
Voir le profil de l'utilisateur
# Re: Classe 3 - Dviryxle Mer 1 Fév 2017 - 18:22
Euh... Non...
Cependant, j'ai pris des commandes postés ici, il me semble et je vais essayer de réaliser les codes en fonction des schémas, de mon côté, afin de tester mon niveau. ^^
Ça te dérangerait d'attendre quelques jours afin que je fasse ça ? :)
avatar
Sexe : Féminin
Date d'inscription : 12/06/2016
Messages : 290
Ancien.ne du Staff
Voir le profil de l'utilisateur
# Re: Classe 3 - Dviryxle Mer 1 Fév 2017 - 20:47
aucun problème, c'est mieux si tu as quelque chose à montrer le cours n'en sera que plus efficace
je patiente alors
avatar
Sexe : Masculin
Date d'inscription : 25/06/2016
Messages : 48
Newbie
Voir le profil de l'utilisateur
# Re: Classe 3 - Dviryxle Dim 5 Fév 2017 - 16:30
Coucou,
Alors, j'ai commencé le code mais j'ai un petit problème :


Identitée


Mes RPs


Code:
<div style="Background-color: silver; width: 100px; height: 100px; border: 1px silver solid; border-radius: 30 px; display: inline-block; vertical-align: top"></div>
<div style="left: 220px; top: 8px; font-size: 16px; font-family: Impact">Identitée</div>
<div style="background-color: teal; width: 200px; height: 84px; border-width: 1px teal solid; vertical-align: top; top: 15px; left: 120px; display: inline-block"></div>
<div style="left: 200px; top: 98px; font-size: 16px; font-family: Impact">Mes RPs</div>

En fait, j'ai pris l'exemple passé par ici il me semble (je ne retrouve pas l'emplacement mais enfin, peu importe).
J'aurais tout d'abord voulu que les titres se placent au dessus et puis pourquoi le cadre vert n'est pas à droite du gris ? Je ne comprends pas. ^^

avatar
Sexe : Féminin
Date d'inscription : 12/06/2016
Messages : 290
Ancien.ne du Staff
Voir le profil de l'utilisateur
# Re: Classe 3 - Dviryxle Jeu 23 Fév 2017 - 14:31
salut dviryx, désolée pour ce retard

par défaut, un bloc "div" est en position dite "statique" et n'est pas influencé par les propriétés "left", "right", "top" et "bottom"
pour qu'elles soient prises en compte, il faut lui appliquer une position relative ou absolue
attention toutefois à leur utilisation car cela sort l'élément du flux de la page : il perd sa position par rapport au reste des éléments

ton niveau est vraiment très débutant, je m'en rends compte, il y a pas mal d'incohérences dans ton code
si tu veux je peux te proposer une mise à niveau sur skype? je pense que ce sera plus simple de t'expliquer en direct que par messages
avatar
Sexe : Masculin
Date d'inscription : 25/06/2016
Messages : 48
Newbie
Voir le profil de l'utilisateur
# Re: Classe 3 - Dviryxle Sam 25 Fév 2017 - 19:24
Salut !

Ah ok, merci pour ces explications. :)

Désolé pour mon niveau... Je veux bien que tu me fasses cette mise à niveau, ce serait avec un très sérieux grand plaisir ! Tu veux que je t'envoie mon Skype par MP ?
avatar
Sexe : Masculin
Date d'inscription : 25/06/2016
Messages : 48
Newbie
Voir le profil de l'utilisateur
# Re: Classe 3 - Dviryxle Lun 27 Mar 2017 - 17:14
Hello !

Tu vas bien Linus ? ^^
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum