Учимся программировать, сочиняя стихи о коде

Еще в 2008 году я начал изучать дизайн и отчетливо помню, как меня просто пугал один только вид кода. У меня было несколько курсов программирования, и без какого-либо предварительного опыта программирования мне было трудно понять код, с которым я впервые столкнулся. Внезапно слова, к которым я привык в английском языке (такие как «новый», «возврат» и «бросать/поймать»), приобрели совершенно новое значение; загадочный синтаксис, точки с запятой, скобки и совершенно новые правила не облегчили мне задачу.

Если вы новичок в JavaScript и/или испытываете трудности с добавлением его в свой набор навыков, у меня может быть способ преодолеть эти барьеры. Вы определенно не одиноки, и у вас есть полное право думать, что обучение программированию — это крепкий орешек.

Почему научиться программировать так сложно?

Вот некоторые из неправильных представлений о том, почему я думаю, что людям трудно изучать или интересоваться JavaScript (или любым другим языком программирования):

• Код загадочен, чисто функционален и страшен;
• Код предназначен только для машин, поэтому люди не чувствуют, что к ним обращаются или занимаются;
• Код не рассматривается как язык, потому что он имеет совершенно другой вариант использования и сильно отличается от всего, что они видели раньше;
• Люди думают о стереотипах (злые хакеры, может быть, какие-то чуваки из Матрицы) и поэтому не отождествляют себя с ними.
  

От разработчика ожидается, что вы будете обращаться с кодом очень специфическим образом — даже мыслить совсем по-другому (и очень логично). Языки кодирования довольно строги и нетерпимы; один символ может привести к тому, что машина не сможет понять, что вы имеете в виду, и вызовет сбой приложений. Ожидается, что вы будете игнорировать и отвергать определенные вещи, которые вы знаете из устной и письменной речи на человеческом языке (что, кстати, также имеет место при изучении нового человеческого языка).

Но не все языки программирования, документация или видеоуроки в Интернете созданы с учетом этого «перехода от человека к языку программирования». Конечно, они не должны. В конце концов, основная цель кода — указать машинам, что делать.

Тем не менее, из-за этой цели шанс для сравнения просто отсутствует, и языки, на которых вы говорите (словарь и правила), кажутся бесполезными для изучения языка программирования. В языке JavaScript нет слова «любовь» , и нет смысла говорить «я люблю тебя». Машина (или браузер) просто не знает и не заботится о любви (пока?). Это ощущение «совершенно нового» и «не знаю, с чего начать» может быть чертовски пугающим.

Поэтому я нахожусь здесь. Я думаю, что вы можете изучать JavaScript гораздо проще и артистичнее, сохраняя свои знания человеческого языка и рассматривая JavaScript как любой другой человеческий язык. Позвольте мне продемонстрировать на небольшом примере.

Забавный факт : некоторые языки программирования на самом деле имеют в виду переход от одного языка программирования к другому. Вот почему гораздо проще выучить множество языков программирования — просто изучив один.

Маленький пример

Во многих случаях, когда вы хотите выполнить код JavaScript, вы хотите, чтобы «документ» (в основном веб-сайт, который пользователь загружает при каждом посещении) был готов, чтобы вы могли взаимодействовать, например, с элементами HTML. В чистом JavaScript вы можете наткнуться вот на что:

 (function() { // Your code goes here })();

(Фу! В этом случае функция определяется в квадратных скобках, а затем сразу же вызывается с другой парой скобок в конце. Это называется IIFE.)

Или иногда так:

 if (document.readyState === 'complete') { // Your code goes here }

Первый фрагмент определенно требует пояснений, а со вторым (и, может быть, некоторой фантазией) можно было бы понять, что есть условие, которое нужно выполнить, чтобы произошло что-то еще, просто взглянув на него.

Однако представьте себе что-то вроде этого:

 onceUponATime(function () { // Your code (story) goes here })

«Жили-были» — это то, что (смею сказать) может понять даже ребенок. Он обращается к разработчику (обращаясь к детским воспоминаниям), теоретически делая то же самое. Это то, что я считаю «имея в виду переход от человека к языку программирования».

Краткое примечание о «функциях »: функция — это, по сути, навык, который бездействует, пока вы его не вызовете. «Читать» — это function read() { … } , которая вызывается, когда вы хотите прочитать что-то вроде этого: read() . Также есть так называемые «анонимные функции», то есть "function() { … } (не имеет имени, как в приведенных выше фрагментах), которые в основном представляют собой «одноразовые / случайные действия», которые вы не считаете навыком. например, «нажать на кнопку».

Превращение таблиц: от сообщения к основам

Итак, давайте разовьем эту идею немного дальше. Давайте возьмем приведенные выше причины и заблуждения и перевернем их с ног на голову:

Небольшое стихотворение.

Написано на JavaScript.

Сделано для людей.

О любви двух людей.

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

Это не функционально. В настоящее время он не предназначен для машин. Она предназначена для того, чтобы вы прочитали и поняли.

Если вы уловили смысл стихотворения, вы действительно поняли фрагмент кода JavaScript, который вы могли бы сравнить с английским языком.

Теперь вы можете спросить себя: я это понимаю, но почему так написано? Каковы правила (грамматика) этого языка? Что означает «я» (в техническом смысле) и почему этот код так похож на английский?

Правила, словарный запас и переменные

Одна из самых важных вещей, которую нужно понять при изучении языка программирования, — это концепция переменных .

У каждого человеческого языка есть свои правила (грамматика) и большой словарный запас (заранее определенный). Очевидно, что оба из них сначала должны быть изучены, чтобы иметь возможность говорить на языке.

JavaScript, как и многие другие языки программирования, также поставляется со своим собственным набором правил (например, . между словами или как пишутся операторы if ) и собственным словарем ( if , document , window , Event и т. д.). Эти ключевые слова зарезервированы (или «предопределены») JavaScript (и браузером), и каждое из них имеет свое конкретное назначение.

Но, как я упоминал ранее, шанс сравнить слова и предложения, которые вы знаете из английского языка, по-видимому, отсутствует, потому что нет эквивалентов .

Здесь вступают переменные; вы (разработчик) можете (или даже должны) определить переменные, чтобы машины и разработчики поняли, что что-то означает. Переменные могут принимать множество форм (отсюда и название): они могут быть цепочкой слов и букв (строки), числом, действием (функцией) или даже набором (массивом). Вы называете это.

Наверное, во всех языках есть слово, обозначающее любовь. Вы как бы знаете, что это значит, но не совсем, потому что это очень субъективно. Но все же для этого есть слово.

Но в JavaScript нет «любви», пока вы не скажете, что она есть. Это может быть все, что вы хотите, чтобы это было.

 var love = { color: 'red', duration: 365, loveTarget: 'cats', }; // a simple variable expression, // where love is an object “{ … }”, a thing // with some properties (color, duration, loveTarget).
 const love2 = {цвет: 'фиолетовый', продолжительность: 'навсегда', loveTarget: 'собаки', };
 // также переменное выражение, где love2 (константа), // не может быть полностью переопределена/перезаписана: // love2 = undefined; // => не будет работать
 // («undefined» — предопределенное ключевое слово javascript, // в основном говорящее «не имеет значения»)

Крайне важно уметь различать то, что предопределено в JavaScript (правила и словарь JavaScript), и то, что на самом деле определено разработчиком (также известное как «логика приложения» или «бизнес-логика»).

Возвращаясь к стихотворению, написанному выше:

 // Love at first sight if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

Эти выражения взяты из следующего словаря/набора правил JavaScript:

 if (...) { ... } // if statement: when ... is met, do things in { ... } { inLove: true, } // an "object" with some info, some thing in the world. // can contain other info, and "skills" (functions). // "inLove" is a custom property, // "true" is pre-defined in javascript, (meaning: "yes") // and the value of "inLove". . // needed to access an objects property "my name: me.name" getDistanceTo() // an expression to "call" a function (a "skill"). // getDistanceTo is custom (not JavaScript), and a function, // so it can be executed / called upon with the "()" after. // sometimes you can pass arguments in those brackets (like "position") // to change the outcome of a function.

 me // an object, some thing in the world you // an object, some thing in the world position // an info about "you", accessed by the "." getDistanceTo // a skill of me, accessed by the "." getDistanceTo() // the skill, with javascript grammar telling: do it. getDistanceTo(position) // same, but do it with "position". setFeelings // another skill of me, accessed by the "." setFeelings({ inLove: true }); // the skill, with some instructions (an object).

 // This is how the definition of a being (me/you) could look like var me = { position: {x: 0, y: 0} // some coordinates, maybe getDistanceTo: function(position) { // calculate the distance, relative to own position }, setFeelings: function(feelings) { // handle those feelings... } } var you = { position: {x: 0, y: 0} // some coordinates, maybe } // the poem itself if (me.getDistanceTo(you.position) < 200) { me.setFeelings({ inLove: true, }); }

Большой пример: интерактивная поэзия кода

Так появился мой личный проект LoveBits. LoveBits — это опыт изучения кода и рассказывания историй.

Он пытается заинтересовать людей JavaScript/кодированием с помощью:

• Удобочитаемость и человеческий язык на первом месте;
• Сочетание кода с искусством, с которым читатель, возможно, уже знаком.

По сюжету речь идет о двух Битах (прямоугольных существах); один из битов (blueBit) романтичен и пишет стихи о любви на JavaScript другому биту (purpleBit).

Когда вы запускаете LoveBits, вы можете выбрать одно из нескольких любовных стихотворений (написанных на JavaScript). В каждом стихотворении есть фрагмент кода, который написан так, чтобы его могли понять люди, даже не знакомые с программированием. Единственное требование - английский язык.

«Любовь с первого взгляда» (на самом деле одно из стихотворений LoveBits), например, об этих двух битах, в которых blueBit в основном говорит: «Если я подойду достаточно близко к вашему положению, я «настрою свои чувства» на inLove: true ».

Особенность этих стихов заключается в том, что вы можете «запустить» или «воспроизвести» их, просто нажав кнопку «воспроизвести» ниже. В случае с «Любовью с первого взгляда» вы увидите сине-фиолетовый прямоугольник вместе с числом. Как вы, возможно, уже догадались, это два бита, упомянутые в стихотворении, а число под синим битом на самом деле является расстоянием между синим битом и фиолетовым битом.

Как следует из стихотворения, вы можете заставить синего бита влюбиться в фиолетового бита, сократив расстояние между ними, верно? Так что ты можешь сделать? Вы можете взаимодействовать и перетаскивать blueBit, чтобы он влюбился. Но будьте осторожны, иногда бывает больше, чем один результат.

Можно даже сказать, что вы здесь машина. Вам нужно интерпретировать код JavaScript, чтобы иметь возможность действовать и помочь двум цифровым существам влюбиться друг в друга.

Куда пойти отсюда?

Если вы борющийся разработчик, попробуйте относиться к JavaScript как к человеческому языку и просто понять, что фрагменты кода должны делать в первую очередь, а не то, что они делают на самом деле.

Вот что я бы порекомендовал вам сделать дальше:

• Всегда предпочтительнее сразу переходить к примерам и коду для целых приложений, которые объединяют правила, словарь и переменные вместе, чтобы сформировать логику приложения;
• Логика приложения расскажет истории, которые помогут вам заполнить пробелы, как в примерах кода выше. Библиотеки кода и утилиты, такие как lodash , предоставят вам только новый словарь, который станет полезным после того, как вы сможете читать и понимать код JavaScript;
• Просмотрите существующий код и попытайтесь разбить его на небольшие функции с именами, которые отражают то, что они делают. Пишите код, который адресован как людям, так и машинам. Пишите код так, чтобы его можно было прочитать как предложение. Используйте комментарии везде, где это необходимо. Подумайте: как бы я выразил это на человеческом языке (другому разработчику)?

Заключение

Обучение кодированию может стать проще, если вы начнете относиться к коду как к человеческому языку, а не как к чему-то, что, возможно, изобрели инопланетяне. Крайне важно научиться различать языковые функции (встроенные) и переменные/пользовательский код для логики приложения. Способность понимать логику приложения даст вам возможность улучшать и изменять вещи, даже не зная особенностей языка.

Сообщение перед основами : поймите сообщение любого фрагмента кода, и основы JavaScript, естественно, последуют. Сколько раз вы слышали, как кто-то говорит: «Я понимаю язык, но еще не говорю на нем»? Это естественный процесс, который можно, а может быть, и нужно применять для изучения как человеческих языков, так и языков программирования.

Также всегда имейте в виду, что код имеет четкое функциональное назначение, но он не всегда должен быть таким. Когда-то даже человеческие языки были чисто функциональными, но потом появились стихи и даже песни (кому-нибудь песни на языке JavaScript?), которые связывали людей совершенно по-разному. Я думаю или надеюсь, что то же самое может быть применимо и здесь.

Всегда исследуйте проекты кода и, возможно, даже попробуйте сами написать стихотворение (возможно, даже на другом языке программирования, с которым вы знакомы)? Мне понравилось создавать проект LoveBits, и я хотел бы увидеть некоторые из ваших идей в комментариях ниже!

Дальнейшее чтение

• «Если бы Хемингуэй написал JavaScript», — Ангус Кролл.
  Это одна из моих любимых книг, на которую я наткнулась после LoveBits. Речь идет о нескольких известных поэтах и ​​художниках и о том, как они писали фрагменты кода JavaScript. Это весело!