Introduction d'un concepteur à la programmation

Les concepteurs hésitent souvent à s'aventurer au-delà des domaines HTML et CSS sur le territoire des langages de script et de programmation, et ce pour de bonnes raisons. La programmation requiert des compétences très différentes de la création de pages Web. De plus, il y a tellement de choses à apprendre que la plupart des concepteurs ne savent même pas par où commencer: JavaScript, PHP, Ruby, Rails, comment pouvez-vous suivre?

Cependant, dans la pratique, la programmation s’avère beaucoup moins effrayante que les concepteurs ne l’imaginent. Aujourd'hui, je vais vous montrer comment la programmation est une compétence que vous pouvez apprendre une fois et que vous appliquez ensuite à chaque nouvelle langue que vous apprenez. Nous examinerons trois structures de programmation différentes dans trois langages différents pour voir à quel point elles sont similaires. Si vous souhaitez vous initier à la programmation mais ne savez rien du tout, cet article est pour vous.

Ne craignez pas, vous pourriez aimer

Ce site est généralement destiné aux concepteurs et, d’expérience personnelle, je sais qu’apprécier la programmation pour la première fois en tant que concepteur est extrêmement intimidant. Les concepteurs sont des penseurs visuels. Nous nous épanouissons par le biais de la création et de l’expérimentation en utilisant notre esprit et notre connaissance approfondie des outils de notre métier.

En général, nous sommes le genre de personnes qui détestait les cours de mathématiques et toute autre activité où la créativité ne semblait pas avoir une assise évidente.

«En général, nous sommes le genre de personne qui détestait les cours de mathématiques et toute autre activité où la créativité ne semblait pas avoir une assise évidente.

Les programmeurs résolvent les problèmes. Ils aiment les énigmes logiques et bricoler avec le code pendant des heures en l'absence absolue de visuels. Gardez à l'esprit que ces deux catégories de personnes ne sont pas mutuellement exclusives. Si vous correspondez aux deux descriptions, vous allez certainement adorer la programmation.

Pas HTML et CSS

Nous arrivons rapidement à un point où la plupart des concepteurs Web connaissent au moins un peu le codage HTML et / ou CSS. Cette expérience et ces connaissances vous aideront effectivement, mais peut-être pas autant que vous ne le pensez.

HTML est un * langage de balisage * et CSS est un * langage de feuille de style *. Ils sont principalement utilisés pour formater et insérer du contenu relativement statique dans des pages prédéfinies. Votre manière de travailler avec eux est en réalité très différente du maniement d'un * langage de script * ou * un langage de programmation orienté objet *, qui sont le type d'outils de programmation hardcore que vous trouvez actuellement sur le Web.

Le grand secret de la programmation

Cette dernière partie était la mauvaise nouvelle, mais n'ayez crainte, de bonnes nouvelles se profilent à l'horizon. Si vous entrez dans une librairie et allez dans la section de programmation, vous risquez d'être complètement intimidé. Il y a tellement de choses différentes à apprendre! Cette intimidation est renforcée lorsque vous rencontrez l'un des super génies qui semble connaître à peu près tous les langages de programmation existants. Comment dans le monde les gens trouvent-ils le temps d'apprendre ces choses? Beaucoup de débutants sont tellement découragés qu’ils abandonnent avant même d’essayer.

Les langages de programmation ont tendance à être très similaires. Beaucoup d'entre eux utilisent les mêmes blocs de construction et des outils similaires pour atteindre leurs objectifs.

Le grand secret, c'est que les langages de programmation ont tendance à être très similaires. Nombre d'entre eux utilisent les mêmes blocs de construction et des outils similaires pour atteindre leurs objectifs.

J'ai appris ce petit secret lors de ma première interaction avec la programmation: une classe Java au collège (à ne pas confondre avec JavaScript). Même si j’étais moi-même un jeune garçon costaud, la classe était en grande partie composée d’hommes de 30 à 40 ans. Presque tous avaient déjà un emploi dans la programmation et y travaillaient depuis vingt ans ou plus. Ils étaient simplement employés à utiliser d'autres langues et à tenter d'élargir leurs compétences, souvent aux encouragements et aux frais de leur employeur.

Le premier jour, en entrant dans la classe, aucun d'entre nous ne connaissait vraiment Java, si tant est qu'il y en ait eu quelque chose. Cependant, à la troisième classe, ces gars-là me dépassaient. J'écrivais des extraits de code horriblement simples, basés sur les principes fondamentaux que nous avions appris. Ces gars s’appuyaient sur les mêmes principes fondamentaux et construisaient des applications complexes avec toutes sortes de fonctions intéressantes bien au-delà des exigences de la mission.

? Étais-je inepte? Heureusement pour moi, il s'avère que la réponse n'était pas si simple.

Étais-je inepte? Heureusement pour moi, il s'avère que la réponse n'était pas si simple. La réalité était que nous apprenions des choses très différentes. J'apprenais à programmer à travers l'objectif de Java, ces gars-là étaient déjà au courant de la programmation et avaient simplement besoin d'un peu d'aide pour savoir comment traduire ces connaissances en Java. J'étais un bambin qui apprenait à parler pour la première fois et ils parlaient plusieurs langues et parlaient une autre langue.

Le but de cette longue histoire est d’illustrer le fait qu’après que vous avez vraiment commencé à programmer ou à écrire avec une seule langue, le reste devient beaucoup plus facile, car vous avez considérablement réduit la courbe d’apprentissage. Si vous savez coder en PHP, le saut vers Ruby est beaucoup plus petit.

Les blocs de construction

Il est facile pour moi de dire que la programmation repose sur des connaissances réutilisables, mais puis-je la mettre en pratique? Quels sont ces soi-disant blocs de construction et en quoi sont-ils similaires ou différents d'une langue à l'autre?

Bonne question! Découvrons-le en jetant un coup d'œil à certains des concepts de programmation les plus fondamentaux mais les plus utilisés. La compréhension de ces éléments relancera votre formation en programmation, quel que soit le chemin ou la langue que vous choisissez.

Variables

Les variables sont une chose merveilleuse.Si vous avez déjà utilisé LESS ou quelque chose de similaire, alors vous avez vu les merveilles des variables et leur façon de gagner un temps considérable. Je ne suis toujours pas sûr qu'ils appartiennent au CSS, mais le programmeur en moi veut vraiment les voir là-bas.

Une variable est essentiellement un moyen de stocker des informations. Vous pouvez stocker quelque chose d'aussi simple qu'une valeur, disons 39, ou quelque chose d'aussi complexe que tout un tableau de données contenant des centaines de valeurs. Pensez à une variable comme une boîte. Les boîtes elles-mêmes ne semblent pas très importantes, c'est ce qui compte à l'intérieur. Toutefois, les boîtes constituent un moyen pratique de stocker et d’accéder à certains articles.

Variables JavaScript

Passons à un exemple. Comme JavaScript est probablement le premier candidat possible pour passer de HTML à CSS, nous commencerons ici tous nos exemples. Voici comment les variables fonctionnent en JavaScript:

Ici vous pouvez voir exactement comment les variables sont utilisées dans JavaScript. D'abord, vous déclarez? une variable. Cela le crée ou le fait simplement exister, mais vous voulez toujours lui attribuer un nom indiquant son contenu. Ensuite, vous lui attribuez une valeur (souvent ces deux étapes sont combinées), dans notre cas, j'ai ajouté un nombre arbitraire. Rappelez-vous que,? ContentWidth? est notre boîte, qui détient maintenant une valeur. Chaque fois que nous voulons accéder à cette boîte, nous utilisons simplement le nom de la variable. Pour terminer l'exemple, j'ai créé une alerte et inséré la variable. Cela fera apparaître une boîte avec la valeur? 496 ?.

Cela peut sembler inutile ici, mais imaginons que trois cents lignes de code référencent cette variable fréquemment. Chaque fois que la valeur de cette variable change, notre code fonctionne toujours parfaitement car le nom de la variable est resté constant. Sans variables, cela serait impossible et il en résulterait beaucoup plus de code.

Variables PHP

Maintenant que nous disposons de cette solide base d’informations, l’apprentissage de variables dans d’autres langues devient beaucoup plus facile. Cette fois, nous n’apprenons pas ce que sont les variables et leur fonctionnement, mais seulement comment les utiliser dans d’autres langues.

Voici un aperçu du fonctionnement des variables en PHP:

Il y a beaucoup de similitude ici. Notez l'utilisation de points-virgules pour indiquer la fin d'une instruction et comment les commentaires utilisent la même syntaxe. Cette fois, nous avons déclaré notre variable et lui avons attribué une valeur sur une seule ligne. Nous pouvons voir que la syntaxe pour cela est presque identique, avec la distinction importante que PHP utilise un? $? au début d'un nom de variable. Notez que le? Echo? La commande affiche simplement quelque chose sur la page du navigateur.

Ruby Variables

Examinons maintenant les variables de Ruby.

À présent, vous pouvez constater que l’apprentissage d’une nouvelle langue n’est en grande partie qu’une explication de ses diverses bizarreries. Par exemple, JavaScript et PHP utilisaient des points-virgules à la fin d'une ligne, pas Ruby. De plus, cette fois-ci, les commentaires sont créés avec? #? au lieu de ?//? et nous utilisons? pour sortir notre résultat.

Boucles

Une autre construction de programmation populaire est une boucle. Avec les boucles, vous pouvez éviter de répéter le code en automatisant le processus que vous souhaitez réaliser. Lors de la création d'une boucle, vous devez vous assurer de déclarer les paramètres de la boucle, tels que les conditions pour la fin de la boucle. Vous ne voulez pas que les actions se poursuivent à l'infini, vous devez donc créer une condition dans laquelle la boucle sera terminée.

Boucles JavaScript

Dans une langue donnée, il existe généralement plusieurs types de boucles. Voici un type en JavaScript, le? While? boucle. Dans cet exemple, nous définissons une variable, puis créons un bloc de code à exécuter de manière répétée tant que la variable est inférieure à 50. Ensuite, dans ce bloc de code, nous définissons les actions à répéter. Dans ce cas, nous enregistrons la valeur de la variable dans la console, puis nous augmentons la valeur de la variable de un. Comme la variable augmente à chaque fois que le code est exécuté, il atteindra éventuellement 50 et la boucle se terminera.

Cette même chose pourrait être réalisée avec un? Pour? boucle. Cette version un peu plus succincte indique la valeur de la variable à démarrer, la condition dans laquelle la boucle se termine et l'action à effectuer sur la variable dans une ligne.

Boucles PHP

Une fois encore, nous constatons que PHP est très similaire à JavaScript. Après avoir lu les exemples ci-dessus, vous devriez être en mesure de saisir facilement l’équivalent de PHP. Ici encore, nous avons une boucle while et une boucle for, chacune contenant une syntaxe presque identique à celle de leurs frères JavaScript.

Boucles de rubis

Voici le? While? et pour? boucles en rubis. Comme vous pouvez le constater, la syntaxe de Ruby est beaucoup plus souple que celle des deux autres langages que nous utilisons. Non seulement il n'y a pas de point-virgule, mais les accolades ne sont pas non plus présents. Notez également à quel point le? Pour? la boucle regarde cette fois-ci.

Les fonctions

Les fonctions sont une autre structure de programmation créée pour vous faire gagner du temps en évitant de répéter le même code. Lorsque vous codez une application, celle-ci effectuera probablement de une à plusieurs milliers de tâches. Chaque tâche représente un bloc de commandes. Lorsque nous lançons les commandes dans une fonction, nous pouvons simplement appeler cette fonction au lieu d’écrire le code complet. De cette manière, une fonction ressemble beaucoup à une variable qui effectue une tâche ou une liste de tâches.

Fonctions JavaScript

Construisons une fonction super basique en JavaScript qui prend n'importe quel nombre et le met au carré. Nous commençons ici avec le mot? Fonction? puis suivez-le avec une variable entre parenthèses. Ensuite, dans la fonction, nous effectuons diverses actions et renvoyons une valeur.

Lorsque nous utilisons la fonction, nous remplaçons la variable parenthétique par un nombre quelconque et le code à l'intérieur de la fonction sera exécuté sur cette valeur. Dans l'exemple ci-dessus, le résultat renvoyé serait 81.

Fonctions PHP

Vous êtes maintenant si familiarisé avec la conversion JavaScript vers PHP que vous devriez pouvoir le faire vous-même. Voici la syntaxe:

Méthodes Ruby

Encore une fois, Ruby est assez différente. En fait, Ruby se réfère à cette construction particulière en tant que méthode et non en tant que fonction. Cependant, nous pouvons toujours appliquer rapidement notre connaissance des fonctions pour comprendre comment cela fonctionne.

Comme vous pouvez le constater, la méthode Ruby exécute la même tâche que la fonction JavaScript. Il vous permet de passer un nombre dans les paramètres, après quoi le carré est carré et retourne la valeur.

Facile non?

À présent, vous devriez être en mesure de comprendre l’importance de comprendre la pratique de la programmation indépendamment de tout langage de programmation. Il existe une structure et une méthode de programmation communes que vous retrouverez dans toutes les langues que vous apprendrez. La plupart des différences sont * sémantiques * et équivalent à de légères différences de syntaxe.

Ne croyez pas que cela signifie que la programmation et les langages de script sont tous identiques, ils ne le sont pas. Ils ont tous un objectif spécifique qui définit comment et quand vous les utilisez. Cela ressemble beaucoup à l'apprentissage d'Adobe Illustrator, puis au passage à InDesign. Vous avez affaire à deux choses différentes créées à des fins différentes. Cependant, il existe suffisamment de similitudes pour qu'un expert en connaissances vous aide à apprendre à vous débrouiller.

Conclusion

Cette discussion n’a aucunement pour but d’être exhaustive. Vous ne possédez pas maintenant une connaissance fondamentale complète de la programmation. Au lieu de cela, vous vous êtes simplement familiarisé avec la programmation d’une manière qui, espérons-le, la rend plus accessible. Au lieu de voir une masse de langues complètement différentes que vous devez apprendre, vous devriez maintenant voir un ensemble de pratiques connexes dans lesquelles l’étude de l’une étend réellement votre compréhension des autres.

Alors par où devriez-vous commencer? Comme je l’ai mentionné ci-dessus, JavaScript est sans aucun doute l’endroit idéal pour les concepteurs Web. Son application est immédiatement apparente, en particulier lorsqu'elle est associée à jQuery, au code HTML et CSS que vous connaissez déjà. À partir de là, le saut en PHP est beaucoup plus facile à gérer, ce qui peut vous amener à étudier Ruby afin de maîtriser Ruby on Rails; les possibilités sont illimitées!