Добро пожаловать на новый урожай кодирования. В этом уроке мы узнаем о выражениях и переменных.
Распечатайте эту статью. Кодирование лучше всего учиться вводить себя команды, используя физическую клавиатуру. Мы настоятельно рекомендуем распечатать эту статью, и в любое время вы видите код кода, просто введите его самостоятельно. Не будьте соблазны скопировать и вставлять из онлайн-версии.
Как всегда, редактор кода JavaScript, который мы используем в наших уроках, доступен онлайн по адресу: https://codeguppy.com/code.html.
Давайте начнем нашу разведку, рисуя небольшой дом в середине экрана. Для этого мы будем использовать инструкции «RETR» и «LINE», представленные в предыдущих уроках.
Продолжайте и введите это в редакторе кода. Возьмите свое время, когда вы напечатаете. Убедитесь, что вы вводите все символы именно так, как вы видите ниже:
rect(350, 250, 100, 100) line(350, 250, 400, 200) line(400, 200, 450, 250)
Быстрообеспечение: 400 и 300 – координаты середины экрана. Координаты Mini House были рассчитаны вокруг этих средних значений.
После того, как вы закончите ввести, нажмите кнопку «PLAY», чтобы проверить свой код.
Не откладывайте, если у вас есть и ошибка. Осторожно проверьте свой код против примера, правильно, при необходимости и снова воспроизведите.
Мы надеемся, что вы правильно набрали мини-код дома на предыдущей странице. Если ваш код все еще не работает, тщательно проверьте, что вы набрали. Для начинающих очень распространено забыть знаки пунктуации или скобки или изобретать новую капитализацию для команд JavaScript.
С достаточным фокусом мы считаем, что вы можете исправить ошибки, и ваша программа успешно работает.
Теперь потратьте несколько минут и проанализировать код. Можете ли вы сказать, как мы придумали 350 и 250, как координаты для прямоугольника?
Наше первоначальное намерение было нарисовать небольшой дом в середине экрана.
Решение, которое мы выбрали, состоит в том, чтобы нарисовать квадратные 100 пикселей шириной 100 пикселей высотой в центре холста.
Поскольку центр холста составляет 400, 300 … Координаты верхнего левого угла квадрата:
(350, 250)
• 400 – 100/• 300 – 100/
Таким же образом мы рассчитали координаты строк, которые состоят из крыши:
(400, 200)
- 300 – 100/2 – 100/(мы сделали крышу половину высоты дома)
(450, 250)
- 400 + 100/
- 300 – 100/
Пусть компьютер рассчитывает
Эти расчеты довольно простые … Но зачем вычислять их сами, когда у нас есть мощный компьютер в нашем распоряжении? Давайте поместим эти расчеты в наш код и позволить компьютеру делать тяжелую работу для нас:
В редакторе кода попробуйте заменить:
- 350 с 400 – 100/2
- 250 с 300 – 100/2
и
- 450 с 400 + 100/2
- 200 с 300 – 100/2 – 100/2
Когда вы верите, что вы закончите замену, нажмите PLAY, чтобы увидеть результат. Это должно быть таким же, как раньше. Возьмите свое время и попробуйте сделать это упражнение, прежде чем двигаться вперед. Это хорошая практика.
Теперь попробуйте сравнить ваше решение с нашим кодом. Должен выглядеть одинаково. Если вы все еще не могли выяснить, как выполнять замены, просто очистите свой редактор и тщательно введите следующую программу:
Нажмите «PLAY» и посмотреть код, рисующий один и тот же мини-дом.
Допустим, мы изменили наш разум, и мы должны нарисовать больший дом. Вместо 100 пикселей шириной 100 пикселей высотой, наша главная площадь должна составлять 200 на 200 пикселей.
Поскольку наш код содержит выражения, которые выполняют расчеты, нам нужно только заменить 100 с 200, где бы не требуется.
Идите вперед и измените код справа. Когда закончите нажмите «Play», чтобы увидеть результат. Если вы не получите ожидаемый результат, внимательно проверьте код.
Это решение. Нажмите «Play», чтобы увидеть больший дом.
rect(400 – 200 / 2, 300 – 200 / 2, 200, 200); line(400 – 200 / 2, 300 – 200 / 2, 400, 300 – 200 /2 – 200 / 2); line(400, 300 – 200 / 2 – 200 / 2, 400 + 200 / 2, 300 – 200 / 2);
Как вы можете видеть, что выражения, включенные в код, помогали нам довольно немного, когда мы должны были изменить наш код, чтобы нарисовать больший дом. Нам не нужно было пересчитать новые координаты. Вместо этого нам пришлось сделать около 12 замене в коде.
Если в кодировании одна вещь, которую кодеры не любят, это «повторяя» сами. В следующей главе мы увидим, как устранить даже эти замену деятельности в следующий раз, мы попросят изменить размер нашего дома.
JavaScript позволяет определить «переменные». Переменная – это имя, которое содержит значение или выражение. Каждый раз, когда вы используете это имя в вашем коде, компьютер фактически использовал значение, представленное этим именем. Звучит сложно, но давайте посмотрим эту концепцию через пример. В нашем коде мы можем определить высоту дома как переменную. Давайте именем эту переменную h. Правильный способ сообщить об этом компьютеру, что нам нужно определить переменную и назначить значение для него значение:
let h = 100;
Пусть ключевое слово поручает компьютеру определить переменную с указанным именем.
Примечание. Вы можете использовать любую букву или даже комбинации букв и цифр для имени переменной. Пока имя переменной не начинается с номера или не идентична с зарезервированным языком/инструкцией/инструкцией JavaScript, вы добруетесь.
Все следующие являются действительными именами переменной:
A, B, C, …, A, B, A1, B1, MyName, Homeize, X, Y, z
Люди пытаются использовать значимые буквы или слова для имени переменных, чтобы легко обратиться к ним в более позднее время. Тем не менее, компьютер не заботится, если вы называете вашу переменную на английском или румынском … Пока вы используете их одинаково в более позднее время.
Пусть не имеет визуального эффекта.
В новом окне кода введите вышеуказанную строку. Если вы попытаетесь запустить этот код, ничего не произойдет.
Примечание2: мы также разместили точку запятой; в конце линии пусть. Окончание линий с; Необязательно в JavaScript, но хорошая практика, тем не менее, рекомендуется многими людьми.
Поскольку теперь у нас есть рост дома в качестве переменной, мы можем использовать его внутри наших расчетов. Введите всю эту программу сейчас:
let h = 100; rect(400 – h / 2, 300 – h / 2, h, h); line(400 – h / 2, 300 – h / 2, 400, 300 – h /2 – h / 2); line(400, 300 – h / 2 – h / 2, 400 + h / 2, 300 – h / 2);
Обратите внимание, что код такой же, но вместо 100 или 200 значений используется «H», которые мы использовали ранее. Запустите код и посмотрите эффект … затем измените значение H и повторно запустите код. Смотрите, как просто сейчас! С одной только одним изменением в коде мы можем рисовать наш дом в разных размерах!
Наши программы не ограничены только 1 переменной. На самом деле, вы можете определить практически неограниченное количество переменных.
Давайте определим две дополнительные переменные, названные x и y, которые будут держать координаты, где мы хотим нарисовать наш мини-дом.
let x = 400; let y = 300
В редакторе кода добавьте вышеуказанные две линии в самом начале программы (до первой строки).
Затем замените в код все вхождения 400 с х и все вхождения 300 с y Отказ
Возьмите свое время и попробуйте сделать это упражнение правильно. Когда готово нажмите «Play», чтобы увидеть эффект. Если мини-дом все еще появляется на холсте, вы написали код правильно.
Если код, который вы написали, выглядит следующим образом – вы закончили упражнения правильно:
let x = 400; let y = 300; let h = 100; rect(x - h / 2, y - h / 2, h, h); line(x - h / 2, y - h / 2, x, y - h /2 - h / 2); line(x, y - h / 2 - h / 2, x + h / 2, y - h / 2);
С размером дома и положением, определяемым в качестве переменных, мы можем легко контролировать дом, рисующий мои дела, только незначительные изменения в наш код.
Продолжай и играй со значениями переменных.
- Варьируйте ч от 10 до 200
- Варьируйте х от 0 до 800
- Варьироваться от 0 до 600
После каждой модификации повторно запустите программу, чтобы увидеть эффект. Переменные могут быть повторно назначенный
Возможно, одна из самых мощных функций переменных является тот факт, что их можно повторно назначить с другим значением в более позднее время в коде. Это причина, по которой они называются «переменные» – Их ценность может варьироваться (например, изменение) во время выполнения программы.
Чтобы повторно назначить значение, которое вы просто используете равный знак, как это:
x = 100;
Примечание. Инструкция «Пусть» используется только при определении переменной. Когда вы измените значение этой переменной, вы просто используете равный оператор. Вы можете изменить значение столько раз, сколько вы хотите.
Упражнение: В редакторе кода попробуйте ввести вышеуказанную строку, после строки, которые определяют переменные и непосредственно перед линией с инструкцией «RETR».
Если вы выполните программу, вы заметите, что мини-дом больше не рисуется в середине экрана, но в левой части. Это потому, что переменная X переназначен со значением до начала начнета чертежа.
let x = 400; let y = 300; let h = 100; x = 100; rect(x - h / 2, y - h / 2, h, h); line(x - h / 2, y - h / 2, x, y - h /2 - h / 2); line(x, y - h / 2 - h / 2, x + h / 2, y - h / 2);
Помните: компьютер выполняет вашу строку программы по строке сверху вниз. Поэтому даже если X изначально назначается 400, что значение изменяется на 100, когда линия Икс; достигнуто. Неинициализированные переменные
Во многих случаях вы не знаете, какое значение присвоить переменной в данный момент, когда вы определяете его с помощью Пусть Отказ
В таком случае используйте Пусть Инструкция просто определить переменную.
Помните, однако, чтобы использовать = Оператор и назначьте значение этой переменной, прежде чем использовать его. В противном случае переменная не будет должным образом инициализирована допустимым значением, и ваш код может создавать ошибки.
Обратите внимание, как переменные определяются и назначаются в следующем коде:
let x; let y; let h; x = 200; y = 350; h = 150; rect(x - h / 2, y - h / 2, h, h); line(x - h / 2, y - h / 2, x, y - h /2 - h / 2); line(x, y - h / 2 - h / 2, x + h / 2, y - h / 2);
Наш урок сейчас закончен, но наш дом все еще минималистичен. Мы бросаем вызов вам добавить больше деталей в этот дом (например, Windows, дверь и даже дымоход) путем расчета их координат и размеров с использованием выражений.
Эта статья также доступна в интерактивной версии в https://codeguppy.com/code.html?t=_expressions_variables
До следующего раза: Happy Coding!
Оригинал: “https://dev.to/codeguppy/lesson-3-expressions-and-variables-16n1”