Я уже написал кучу как и почему я учу людей программировать. Эта статья будет больше похоже на руководство по программированию!

Это мое любимое занятие по знакомству людей с написанием кода; создание собственных смайлов! Мы будем использовать масштабируемую векторную графику (SVG) и анимировать ее с помощью JavaScript (JS). Это те же строительные блоки, из которых состоят веб-страницы!

Это руководство займет около часа, но вы можете * намного * больше времени на создание смайликов, если у вас будет время! У меня был один ученик, который целый семестр после уроков работал над своими смайликами. Когда они были закончены, это был настоящий шедевр!

Эта статья предназначена для тех, кто сейчас учится программировать, особенно без опыта! Или те, кто немного разбирается в программировании и хочет заняться чем-то другим!

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

1 Настройка

Итак, для начала все, что нам понадобится, - это веб-браузер, например Google Chrome, Firefox или даже Internet Explorer. Надеюсь, у вас уже есть один из них, когда вы читаете эту статью!

Затем мы собираемся открыть веб-сайт под названием JSFiddle.net (в новой вкладке браузера, чтобы вы могли продолжить чтение этой статьи!), Который позволяет нам писать и запускать наш код без необходимости загрузки что-нибудь на свой компьютер.

JSFiddle также дает нам кнопку сохранения, которая создает настраиваемый URL-адрес, которым вы затем можете поделиться с другими людьми (или написать где-нибудь в безопасном месте, чтобы вы могли поработать над ним позже). JSFiddle также поддерживает управление версиями, поэтому каждый раз, когда вы нажимаете кнопку обновления, он увеличивает число в конце URL-адреса. Так что, если вы часто сохраняете (а это действительно следует!), Вы можете увидеть, как со временем ваша работа будет развиваться!

2 Бумага

Итак, приступим к написанию кода! Первое, что нам нужно для нашего смайлика, - это лист бумаги, на котором можно рисовать. Мы собираемся работать в поле HTML (верхнее левое поле) и вводить:

<svg height="400" width="400">
</svg>

Так что же на самом деле означают эти вещи? <svg> - это тег, он говорит о запуске объекта svg. Вы можете думать о теге svg как о листе бумаги. Все, что мы начинаем, должно заканчиваться, поэтому мы также должны написать конец </svg>.

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

3 круга

Что является самой важной частью смайлика? желтый круг лица! Нам нужно написать наш код после того, как мы объявим наш лист бумаги, но до того, как мы закончим нашу статью. Наши формы не будут отображаться, если мы не будем рисовать на бумаге! Чтобы помочь, у меня есть скриншот ниже. Круги, вероятно, поначалу выглядят немного устрашающе, но напишите это сами:

<circle cx="200" cy="200" r="150" fill="yellow"/>

Давайте разберемся вместе. У нас есть тег <circle>, наша вещь, которую мы рисуем, у которой есть некоторые свойства. cx - центральное значение x (возвращаясь к школьной математике, горизонтальная ось, левая и правая), cy - центральное значение y (вертикальная ось, вверх и вниз), r - радиус (насколько большим должен быть наш круг) и fill говорит, каким цветом мы должны заполнить форму.

Затем попробуйте без моей поддержки сделать еще два круга для глаз.

Если вы застряли с символами x и y, чем больше число x, тем дальше вправо будет фигура, тем больше будет число y в самом дальнем конце страницы. Наша точка начала координат (0,0) находится в верхнем левом углу.

4 пути

Итак, теперь мы освоили круг, какие еще формы мы можем сделать! Давайте попробуем сделать рот, создав форму пути (у меня есть снимок экрана ниже, если вы застряли, где это написать):

<path d="M 130,280 l 150,0" stroke="red" stroke-width="3" />

Так что это определенно выглядит немного страшнее! Давайте сначала посмотрим на некоторые слова, которые мы понимаем; у нас есть stroke, который является цветом нашей линии, и stroke-width, который определяет размер этой линии. Наконец, у нас есть атрибут d, обозначающий данные. Это то, что делает этот взгляд пугающим.

Таким образом, разбиение свойства данных на части M означает переход к этой координате 130,280. Затем у нас есть буква l, но она строчная, что означает, что мы можем двигаться относительно того места, где мы начали, поэтому мы собираемся двигаться 150,0, что означает прямо, без подъемов и падений.

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

Вы можете соединить несколько из этих инструкций вместе, чтобы нарисовать более сложные пути.

Наш бедный смайлик выглядит довольно грустным, давайте поработаем, чтобы сделать его немного счастливее!

<path d="M 130,280 q 75,50 150,0" stroke="red" stroke-width="3" fill-opacity="0"/>

Там, где мы использовали букву l для линии, мы можем использовать букву q, чтобы сказать, что нам нужна кривая. q требует двух наборов координат: первый - там, где мы хотим захватить линию, как если бы мы ее зажимали, второй - там, где наша линия должна ее переместить. Мы можем оставить вторую координату такой же, как наша l координата.

Представьте, что ваша леска представляет собой начало эластичной ленты, мы хотели бы захватить ее где-то посередине и двигать вверх и вниз. Вот что означает новый набор координат. Мы хотим взять его прямо посередине (75, это половина 150) и сдвинуть резинку на 50 пунктов вниз, что сделает его счастливее! Что бы вам нужно было изменить, чтобы он выглядел грустным?

Наблюдатели из вас также заметили, что мы добавили новый атрибут fill-opacity. Это делает «фигурную» часть пути прозрачной. Если у нас этого нет, мы получим странную черную фигуру во рту, потому что мы не сказали ему, какой цвет должен быть, а компьютеры не представляют цвет как черный.

5 цветов

Итак, надеюсь, вы попытались написать несколько цветов, отличных от красного и желтого. Все мы немного более стильные, чем цвета по умолчанию! Давайте посмотрим, как мы используем более точные цвета. Обычно компьютеры используют шестнадцатеричные цвета для представления цвета - они выглядят как решетка и 6 (или 8) цифр и букв, следующих за, например, # ffcc00 (это мой любимый желтый цвет).

Есть множество веб-сайтов, которые помогут вам найти шестнадцатеричные цвета. У Google есть отличный веб-сайт, где можно найти оттенки разных цветов - https://material.io/design/color/#tools-for-picking-colors (теперь вам нужно прокрутить страницу вниз до конца, спасибо Google за то, что сделали это намного сложнее!).

Давайте поработаем над тем, чтобы найти лучшие цвета для вашей формы лица, глаз и даже рта!

Так что сейчас хороший момент, чтобы сделать передышку.

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

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

У Mozilla есть отличный ресурс для других фигур, которые вы можете научиться добавлять: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes

Итак, теперь давайте займемся тем, что заставим наши смайлики работать!

6 Взаимодействие

Итак, мы собираемся начать работу в поле JavaScript в JSFiddle (внизу слева, под HTML). Но прежде чем мы это сделаем, последнее, что нам нужно сделать, это придать всем формам, которые мы хотим сделать интерактивными, свойство id.

Нам нужны эти идентификаторы, чтобы «связать» блок JavaScript с блоком HTML. Теперь мы можем создать переменную для нашего faceShape:

var faceShape = document.getElementById("faceShape");

Итак, что мы на самом деле написали? Мы создали новую переменную faceShape. Переменная - это объект с именем, это желтый кружок, и мы назвали его faceShape. Затем мы должны были сказать, что эта переменная действительно присутствует в документе, и найдите ее по заданному нами идентификатору. Вы должны убедиться, что бит в кавычках * в точности * соответствует той форме, которую вы назвали в поле HTML. Компьютеры глупы и иначе не найдут!

7 Щелчок

Итак, мы еще не сделали его интерактивным. Давай заставим его что-нибудь сделать! Напишите следующее после вашей переменной.

faceShape.onclick = function(){
 alert("ouch");
};

Он использует нашу переменную и говорит, что мы хотим дать ей функцию, когда мы щелкаем по этой фигуре. Функция - это вещь, которая что-то делает. Нам нужно, чтобы этот код запускался только когда мы щелкаем по faceShape. Фигурные скобки действуют как наш предыдущий лист бумаги, мы хотим убедиться, что рисуем на бумаге, а не до или после. Итак, мы делаем наше предупреждение внутри фигурных скобок.

Если по какой-либо причине он не работает, убедитесь, что у вас такой же идентификатор и нет орфографических ошибок. Орфографические ошибки * супер * легко сделать, а иногда * супер * сложно отлаживать!

8 Изменение вещей

Так что оповещение довольно забавное, но довольно неприятное и скучное после первых нескольких раз. Давайте посмотрим, как меняется цвет лица смайлика, когда мы нажимаем на него. Давайте сделаем его немного зеленым и больным!

Я собираюсь заменить предупреждение следующим кодом:

faceShape.setAttribute("fill", "#A0D468");

Что происходит сейчас? Мы можем заставить его выглядеть больным, но можем ли мы сделать его снова лучше ???

9 Условные выражения

Здесь мы можем написать некоторые условия! Если наш смайлик выглядит дурно, давайте сделаем его лучше. В противном случае, если ему станет лучше, давай заставим его заболеть.

Нам нужно будет создать новую переменную, чтобы отслеживать состояние нашего смайлика (болен он или нет). Это особый тип переменных, называемый логическими. Это либо правда (он болен), либо ложь (он не болен). Когда мы создаем его, нам нужно дать ему состояние по умолчанию. Как он начал? Когда мы впервые запускаем программу, он не болеет, поэтому isSick будет ложным:

var isSick = false;

Убедитесь, что вы написали этот код до onClick. Затем мы можем обновлять его каждый раз, когда щелкаем по faceShape. Мы также можем написать наш оператор if и обновить цвета фона:

if (isSick === true){
  faceShape.setAttribute("fill", "#FFCE54");
  isSick = false;
} else {
  faceShape.setAttribute("fill", "#A0D468");
  isSick = true;
}

После того, как вы убедились, что это работает, найдите время, чтобы понять, почему это происходит. Что будет, если поменять цвета? Это те цвета, в которых вы ожидаете их для оператора if?

Итак, интересное замечание по поводу setAttribute: в настоящее время мы меняем цвет фона, который был свойством fill. Однако вы можете программно изменить любой атрибут, такой как размер или местоположение! Например, вы можете уменьшить его глаз при нажатии на него (бедный чувак).

Отделка

Итак, мы добрались до конца! Поздравления 🏅🏆🌟

Убедитесь, что вы снова нажали кнопку сохранения и отправили фотографию кому-то из своих знакомых (или, может быть, просто своей маме). Ниже также прокомментируйте, что вы сделали, что вам показалось трудным, и что вы добавили, о чем я не писал в этой статье!

Если вы все еще ищете, чем можно заняться, и почему бы не изучить следующее:

  1. Добавьте более сложные формы - https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes - особенно обратите внимание на добавление полигонов - нужна ли шляпа для ваших смайлов? Вопрос с подвохом, всем смайлам нужна какая-то шляпа!
  2. Градиенты - https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Gradients - существует два типа градиентов; линейный и радиальный - а можно и то, и другое (глупо в разных местах)?
  3. Сделайте больше фигур интерактивными - попробуйте сделать что-нибудь с глазами или ртом!