Это серия статей, которые предложу вам нежное введение в кодировку или искусство компьютерного программирования.
Все, что вам нужно, это веб-браузер и немного ежедневного времени для чтения этих статей и выполнять некоторую практику.
Практика абсолютно необходима! Обучение коду похоже на изучение иностранного языка. Это требует изучения, но и практики. Если вы забронируете немного ежедневного времени, и вы мотивированы, чтобы узнать, вы вскоре обнаружили, что вы приобрели новый язык: JavaScript.
Вот так! Это язык, который мы учим здесь: JavaScript – один из самых популярных компьютерных языков программирования там. Этот язык не поможет вам получить направления к Эйфелевой башне во Франции, но поможет вам дать инструкции на ваш компьютер.
Вы хотите дать вашу первую инструкцию?
На данный момент мы настоятельно рекомендуем вам распечатать эту статью. После упражнений из печатной копии вы будете вынуждены использовать клавиатуру для ввода программ. Это значительно улучшит ваши навыки кодирования!
Как уже упоминалось выше, мы научим вам JavaScript в вашем браузере. Вам не нужно устанавливать или настроить любую программу. Любая клавиатура на основе машины (Mac, PC, ChromeBook) идеально подходит для этой задачи.
Сайт, который будет использоваться, называется codeguppy.com – сайт для обучения кодированию детей, подростков и творческих взрослых.
Идите вперед и посетите codeguppy.com Не стесняйтесь исследовать сайт и, когда вы готовы, зарегистрируйтесь на бесплатный счет.
Как только вы создали учетную запись, вы должны увидеть серую полосу в верхней части главной страницы. Единственная кнопка, которую вы должны заботиться сейчас, это большая зеленая кнопка «код сейчас». Это запустит редактор, где мы сможем ввести наш код.
Используйте кнопку «Код сейчас» в любое время, когда вы хотите запустить новый сеанс кодирования.
Прежде чем мы начнем кодировать, давайте познакомимся с окружающей средой. Смотрите внимательно на вашем экране. Вы должны увидеть две основные области:
- Левая область – это то, где вы напишите свой код. Это «редактор кода»
- Правый район – это то, где вы увидите результаты вашего кода. Это «зона вывода»
Примечание. Если вы не видите окно вывода, разрешение экрана вашего компьютера, вероятно, слишком низкое, а выходное окно не помещается на экран. Но не волнуйтесь: выходное окно будет автоматически отображаться, когда вам нужно будет увидеть его.
Вы хотите дать компьютерную первую инструкцию? Тщательно введите следующий текст в области редактора кода:
circle (400, 300, 100)
Примечание. Очень важно тщательно вводить инструкцию точно так, как вы видите это здесь. Убедитесь, что вы включаете как скобки, так и все запятые между числами. Также, пожалуйста, введите слово «круг» в нижнем регистре. Не пытайтесь извлечь его извлечь или ввести какое-либо «улучшение»!
Компьютеры очень требовательны. Они отказываются выполнять ваши инструкции, даже если вы забыли одну запятую.
При готовности нажмите большую зеленую кнопку «PLAY», и компьютер будет выполняться любые инструкции (ы) в редакторе кода.
И, конечно же, вы можете нажать кнопку «Стоп», если вы хотите остановить выполнение вашего кода.
Если все прошло хорошо, вы должны увидеть круг, появляющийся в зоне вывода. Это именно то, что мы поручили вашему компьютеру делать: нарисовать круг.
Ваш компьютер точно так же, как послушная собака. Он выполняет именно каждую команду, которую мы даем.
Единственное требование: знать, какую инструкцию дать и правильно писать эту инструкцию. Помните: компьютер будет очень жаловаться, даже если вы пропустите один знак пунктуации!
Давайте возьмем секунду и анализируйте инструкцию в области кода:
circle (400, 300, 100)
- Обратите внимание на слово «круг». Это фактическая инструкция, которая сообщает вашему компьютеру нарисовать круг на экране в зоне вывода.
- После «круга», между скобками, есть 3 номера, разделенные запятой «,». Мы называем эти параметры инструкции.
Теперь нажмите в область редактора кода и попробуйте изменить 3-й параметр от 100 до 300. Будьте осторожны, чтобы изменить только номер и больше ничего. Не добавляйте или не удалите любой другой символ или номер.
Когда готова нажмите кнопку «PLAY»!
Примечание. Если вы не видите кнопку «PLAY», вы предыдущие инструкции могут быть еще в режиме выполнения. Нажмите на кнопку «Стоп» или на символ «[]», чтобы остановить его, а затем снова можно увидеть «Play».
Вы видите что-нибудь другое с кругом? … Или вам удалось сломать код?
Если вам удалось изменить код, как описано, вы должны увидеть компьютер нарисовать более крупный круг на экране.
Это потому, что 3-й параметр указывает радиус круга.
Не стесняйтесь продолжать играть с радиусом этого круга. Попробуйте разные номера от 0 до 300. После каждой модификации кода нажмите кнопку «PLAY», чтобы выполнить код.
До сих пор мы разновидли только радиус круга. Что если мы хотим контролировать позицию, где на экране нарисован круг?
Это на самом деле то, что рассказывают первые два параметра «круга». Они указывают координаты центра круга.
Примечание: не позволяйте «координатам» термин напугать вас. Мы научим вас координатам в будущей статье.
В этот момент давайте просто будем играть с координатами: в редакторе кода, попробуйте выбрать разные комбинации для параметров:
- Первый параметр: номер от 0 до 800
- Второй параметр: число от 0 до 600
- Третий параметр: номер от 0 до 300
После каждой модификации кода нажмите кнопку «PLAY», чтобы увидеть эффекты. Не спешите! Потратьте как минимум 5 минут, опрокидывая параметры и соблюдая эффекты.
Мы надеемся, что вы не сломали код до сих пор.
Если это так, стереть все в редакторе кода и снова введите начальную инструкцию:
circle (400, 300, 100)
Теперь давайте повеселим и добавьте больше инструкций.
Использование операций копирования и вставки, скопируйте эту инструкцию не менее 2 раз ниже оригинального. Пожалуйста, скопируйте из редактора кода, а не из этой статьи. У вас должно быть что-то подобное:
circle (400, 300, 100) circle (400, 300, 100) circle (400, 300, 100)
Это сделало вашу программу в три строки долго! Даже если это идентичные линии, мы все еще называем эту многострочную программу.
До сих пор мы выполнили только одну инструкцию одновременно, но фактическая сила кодирования состоит в том, чтобы сообщить компьютеру выполнить более длинный список инструкций, расположенных в нужном порядке.
Компьютеры очень хороши при выполнении нескольких инструкций. Это может сделать это с удивительной скоростью, выполняющей миллионы и миллионы инструкций в секунду. На данный момент – однако наш код имеет только три инструкции. Давайте попробуем выполнить код и увидеть эффект!
Переключите сейчас в свой редактор кода и нажмите «Play». Как вы думаете, что вы думаете? К некотором удивлению вывод все еще один круг, даже если у нас есть три инструкции по кругу. На самом деле компьютер рисует три круга, но поскольку все они имеют одинаковые параметры, круги нарисованы в том же положении на верхней части предыдущего.
Продолжайте и измените параметры этих кругов и соблюдайте эффект. Не забудьте нажать «играть» после каждого изменения.
Мы доверяем, вам создали довольно уникальный состав кругов. Если вы довольны своей программой, и вы не хотите ее терять, нажмите кнопку «Сохранить», расположенную в верхнем правом углу.
Однако, если вы не знаете, что измениться, или вы хотите увидеть нашу версию, введите следующую программу в редакторе кода:
circle(400, 263, 50) circle(350, 350, 50) circle(450, 350, 50)
Не забудьте очистить редактор, прежде чем ввести новый код. Когда готов Нажмите кнопку «PLAY». Вы видите три круга?
Мы не можем положить конец этой статье, не имея веселого рисунка, используя только круги. Оформить заказ следующий код:
circle(400, 300, 200) circle(250, 100, 50) circle(270, 122, 20) circle(550, 100, 50) circle(530, 122, 20) circle(300, 220, 30) circle(315, 230, 10) circle(500, 220, 30) circle(485, 230, 10) circle(400, 400, 90) circle(400, 350, 20)
Это довольно долго! Поэтому, если вам нужен перерыв, возьмите его сейчас, и когда вы вернетесь, очистите свой редактор и введите все вышеуказанный код одновременно. Убедитесь, что вы ничего не пропустите.
Нажмите «Play» и наслаждайтесь рисунком!
Yeeeeey !!! Это медведь!
Можете ли вы сказать, какой круг инструкций рисует какую часть? С тех пор, как мы все еще должны узнать больше о координатах и других элементах системы рисования.
Тем не менее, даже усовершенствованные кодераки будут трудно прочитать код других людей … или даже их собственный код через некоторое время.
Хороший способ помнить, какая определенная часть кода – это «комментировать код».
Мы будем включать ниже та же программа, которая рисует медведь, но на этот раз «прокомментировал»:
// Draw bear face circle(400, 300, 200) // Draw left year circle(250, 100, 50) circle(270, 122, 20) // Draw right year circle(550, 100, 50) circle(530, 122, 20) // Draw left eye circle(300, 220, 30) circle(315, 230, 10) // Draw right eye circle(500, 220, 30) circle(485, 230, 10) // Draw nose circle(400, 400, 90) circle(400, 350, 20)
Выглядит намного лучше! Верно!
Обратите внимание на тексты натурального языка, размещенные от места для размещения в коде. Это комментарии. Поскольку комментарии предназначены для людей для чтения кода, а не для компьютера, мы должны поставить Slash символов «//» перед каждой строкой комментариев. Компьютер будет в основном игнорировать строки, которые начинаются с//. Вы можете надеть эту линию, все, что вы хотите … компьютер не будет жаловаться на неверный синтаксис или неизвестные инструкции. Это так как эти линии даже вообще не существуют в коде.
Мы надеемся, что вам понравился ваш первый урожай кодирования компьютера!
Прежде чем завершить эту статью, мы хотим вспомнить вас, чтобы сохранить свою программу. В правом верхнем углу есть кнопка «Сохранить как». Вы можете использовать эту кнопку в любое время, чтобы сохранить текущий код в редакторе кода как отдельный файл, который вы можете дополнительно редактировать и настроить.
Код сохраняется в облаке, поэтому вы можете продолжить редактирование с любого компьютера с доступом в Интернет.
Примечание. Эта статья также доступна как интерактивное руководство по https://codeguppy.com/code.html?t=_intro_to_coding.
До следующего раза: Happy Coding!
Оригинал: “https://dev.to/codeguppy/intro-to-coding-34cn”