Вы абсолютный новичок в программировании и еще не изучили его? Не знаете, что такое оператор if? Иногда забываете, как включить компьютер?
Что ж, вы попали в нужное место. Это руководство для абсолютных новичков. Это должно быть приятное увлекательное введение в программирование, и для этого не требуется никакого предварительного опыта.
Хорошо, давайте начнем!
В этом руководстве вы познакомитесь с языком под названием JavaScript. JavaScript - это не способ общения между играми, пишущими кофейные зерна, , а язык Интернета.
Мы отступим ненадолго.
Веб-сайты обычно состоят из трех компонентов: HTML, CSS и наш друг JavaScript.
HTML означает язык разметки гипертекста, и это то, что составляет содержимое веб-страниц или структуру. Итак, ссылки, изображения и слова. Сам по себе HTML выглядит довольно некрасиво. Здесь в игру вступает наш стильный друг CSS. CSS означает c асскадные таблицы стилей и определяет, как наши веб-страницы выглядят. Итак, HTML и CSS определяют, какие веб-страницы содержат и как выглядят. Где в игру вступает наш друг JavaScript?
JavaScript определяет, как вы взаимодействуете с веб-сайтом. JavaScript - это мозг, стоящий за тем, что происходит, когда вы нажимаете кнопку или крутые анимации, которые вы можете увидеть. JavaScript контролирует все, что интерактивно на веб-странице.
Итак, HTML - это то, что он содержит (слова, изображения, ссылки и т. Д.), CSS определяет, как он выглядит, а JavaScript контролирует то, что он делает .
Допустим, у нас есть человек, его кости и структура тела - это HTML, мы используем CSS, чтобы сделать этого человека привлекательным и дать ему стильную одежду. Однако красивый человек, который ничего не делает, не так полезен, поэтому мы используем JavaScript, чтобы позволить нашему человеку использовать свои конечности.
Если вы хотите узнать больше о веб-сайтах в целом. В Code Academy есть отличный вводный курс Создание веб-сайта.
Чтобы писать код, нам нужно место, где его можно разместить и запустить. Поскольку это ваш первый раз, мы постараемся упростить задачу.
Мы будем использовать этот удобный веб-сайт https://jsfiddle.net/. JS Fiddle позволяет запускать весь ваш код прямо в веб-браузере без необходимости загружать какие-либо модные текстовые инструменты.
Если вы перейдете на сайт, вы должны увидеть такую страницу:
Мы будем печатать весь наш код в разделе «JavaScript». Вы можете игнорировать разделы HTML и CSS для целей этого руководства.
Слышали ли вы классическую сказку Златовласка и три медведя?
История рассказывает о молодой девушке по имени Златовласка, которая попадает в странную хижину в лесу, там она находит три миски с кашей, она жадно пробует их все, обнаруживая, что одна слишком горячая, другая слишком холодная, а последняя как раз подходящая. . Далее она находит три стула в гостиной, конечно, она пробует их все и обнаруживает, что один слишком большой, другой слишком большой, а последний как раз подходит. Усталая, после всей этой каши, она попадает в спальню, где стоят три кровати, по шаблону она решает перепробовать их все еще раз: первая слишком жесткая, вторая слишком мягкая, но, конечно, последняя. в самый раз, поэтому она впадает в глубокий сон и просыпается, чтобы найти очень рассерженную семью медведей!
Мы собираемся сделать игру Выбери свое собственное приключение на основе этой сказки.
В отличие от оригинальной сказки, Златовласка будет выбирать, какую кашу она ест, на каком стуле сидит и на какой кровати спит. Чтобы добавить немного больше вращения, игра будет продолжаться только в том случае, если она сделает «правильный» выбор.
В нашей игре есть четыре основных варианта:
- Мы вообще входим в каюту?
- Какую тарелку овсянки мы едим?
- На каком стуле мы сидим?
- В какой постели мы спим?
Хижина в лесу
Давайте зайдем на наш удобный сайт для денди https://jsfiddle.net/ и начнем с ввода текста в поле JavaScript.
Наша строка заканчивается точкой с запятой; В JavaScript они не обязательны, но используются для обозначения конца оператора.
Нажмите кнопку «Выполнить» в верхнем левом углу.
Должно появиться следующее окно:
Давайте немного разберемся в этом.
Мы только что сделали поле подтверждения. По сути, это способ сказать «Да» или «Нет». Или в этом случае «ОК» или «Отмена». Текст, который мы передаем в confirm (), называется параметром. В данном случае в поле отображается текст.
Достаточно просто, правда?
Однако мы сталкиваемся с проблемой. Когда мы нажимаем ОК или Отмена, ничего не происходит! Разве мы не должны врываться в хижину и есть кашу?
Не волнуйтесь, мы еще до этого дойдем.
Прежде всего, нам нужно отслеживать, что на самом деле выбирает пользователь.
Измените код, чтобы он выглядел так:
Теперь мы добавляем результат выбора пользователя в переменную с именем enterCabin. Переменная - это то, что содержит информацию.
Мы используем слово var, чтобы определить, что мы объявляем новую переменную!
Так что это влечет за собой? Давайте разберемся.
Добавьте следующую строку кода под своим подтверждением:
Предупреждение - это просто окно, в котором отображается сообщение.
Нажмите «Выполнить» и посмотрите, что произойдет, если вы нажмете «ОК». Снова нажмите «Выполнить» и посмотрите, что произойдет, если вы нажмете «Отмена».
При нажатии «ОК» в окне предупреждения отображается значение «истина», а при нажатии кнопки «Отмена» отображается значение «ложь».
Обратите внимание, что в нашем операторе мы отображаем «enterCabin».
В зависимости от того, какая кнопка нажата, для enterCabin назначается другое значение.
Аккуратно, да?
Теперь мы можем принимать разные решения в зависимости от того, что выбирает пользователь!
Принятие решений
Чтобы наша игра была интересной, мы хотим, чтобы происходили разные вещи в зависимости от того, что выбирает пользователь. Пока что мы можем выбрать, входить в каюту или нет, но ничего не происходит, несмотря ни на что.
Давайте подумаем, что мы хотим сделать дальше.
Если пользователь нажимает ОК, мы хотим войти в кабину.
Если пользователь нажимает кнопку «Отмена», мы не заходим в каюту, и игра заканчивается.
Давайте сделаем это немного более техническим, используя то, что мы узнали из enterCabin.
Если для enterCabin задано значение true, войдите в каюту, если нет, тогда должно быть задано значение false, поэтому не заходите в каюту и не завершайте игру.
Мы собираемся представить еще одного маленького друга, называемого оператором if.
Оператор if - это то, что мы используем, когда хотим, чтобы в зависимости от некоторого условия происходили разные вещи.
В этом случае мы хотим, чтобы происходило что-то другое в зависимости от значения переменной enterCabin.
Теперь вы можете подумать: а что, если мы хотим иметь больше вариантов?
Здесь в игру вступает оператор else if:
Важно отметить, что оператор else if будет достигнут только в том случае, если оператор if не является истинным!
Давайте применим полученные знания на практике!
Добавьте следующий код:
Теперь, если вы нажмете «Выполнить», вы получите другое сообщение в зависимости от того, какой вариант вы выбрали.
Прежде чем мы продолжим есть несколько восхитительных тарелок овсянки. Возможно, вы заметили, что на этом этапе мы использовали как знак =, так и знак ==.
Так в чем разница?
Знак = используется для назначения. Мы используем это, когда хотим сделать переменную равной чему-то.
Знак == используется для равенства. Мы используем это, когда хотим проверить, равно ли что-то.
Вы также можете заметить // в приведенном выше фрагменте кода. Это обозначает комментарий, строку текста, которая не является кодом, но предназначена для описания происходящего.
Хорошо, достаточно комментариев к комментариям. Пойдем поесть овсянки.
Как вам овес?
На данный момент ваш код должен выглядеть примерно так:
Если вы вспомните историю о Златовласке и трех медведях, вы вспомните, что Златовласка встречает три миски с овсянкой! В этом случае мы хотим выбрать только один.
Однако до сих пор мы использовали только поля подтвердить и предупреждение. Что нам делать, если мы хотим выбрать не «ОК» или «Отмена»?
Пришло время обратить внимание на нашу недавно обретенную звезду: подсказку.
Что делает мистер Подсказка?
Что ж, давайте узнаем.
Добавьте следующую строку кода:
Ваш код должен выглядеть следующим образом:
Запустите код. Что будет, если мы решим войти в чужой дом?
(Нажмите «ОК» в окне подтверждения с надписью «Вы наткнулись на странный дом в лесу. Хотите войти?».)
Верно. Наш новый друг, всплывает окно подсказка.
Однако, в отличие от окна подтверждения, здесь требуется ввод данных пользователем. Кто угодно может прийти и ввести все, что пожелает. Это означает, что у нас может быть более двух вариантов.
Конечно, мы, вероятно, не хотим, чтобы наш пользователь заходил в кабину, а затем сталкивался с вопросом «Я - окно подсказок».
В любом случае, мы хотим, чтобы Златовласка нашла 3 миски овсянки. Мы хотим, чтобы история менялась в зависимости от того, что она выбирает, поэтому (сюрприз, удивление) мы собираемся использовать другую переменную.
Обновите свой код, чтобы он выглядел следующим образом:
Мы хотим, чтобы происходило другое, в зависимости от того, выбирает ли пользователь чашу 1, 2 или 3. (Для простоты предположим, что они не сделают другого выбора.)
Как вы думаете, как будет выглядеть код? как сейчас? Дайте ему удар.
Если первая чаша слишком горячая, вторая слишком холодная, а третья в самый раз, как теперь будет выглядеть код?
Ммм, вся эта каша утомила нас. Пойдем поищем где-нибудь ...
Я бы пошутил про стулья, но можно было бы сказать о стульях
Мы хотим продолжить, только если пользователь выберет правильную кашу.
Мы собираемся разместить следующий фрагмент кода под только что написанным оператором else.
Согласно легенде о Златовласке, она встречает три (потенциально волшебных) стула. История гласит, что есть три стула, большой, средний и маленький, принадлежащие самому медвежонку.
Имеется выбор: большой, средний и маленький , как вы думаете, мы будем запрашивать ввод данных пользователем с помощью поля предупреждения, подтверждения или запроса?
Если вы указали поле подсказка, дайте себе золотую звезду или украденную миску овсянки. Твой выбор.
Если мы хотим предложить пользователю : «Вы входите в гостиную и видите три стула. Большой, средний и маленький. Какой из них вы выберете? " и варианты: большие, средние и маленькие. Если большой стул слишком велик, средний стул тоже будет слишком большим, но маленький - в самый раз? Как это может выглядеть?
Надеюсь, вы начинаете разбираться в вещах, и все это вам знакомо.
Потратьте несколько минут, чтобы попытаться написать фрагмент кода. Не волнуйтесь, если вы застрянете. (Подсказка: это не вопрос с подвохом. Он должен быть похож на то, что вы делали до сих пор.)
Ваш недавно написанный код должен выглядеть примерно так:
В результате ваша красивая игра будет выглядеть примерно так:
Если вы устали, не волнуйтесь. Сейчас мы выберем кровать, на которой будем вздремнуть.
Я сплю, ты не видел, что это идет
Увы, после того, как мы много поели и посидели, мы подошли к последнему этапу нашей жизни в качестве грабителя, хм, Златовласки. На всякий случай, если поесть чужую пищу и сидеть на стуле будет недостаточно - давай спать в их постели.
Продолжая утверждение «else» нашего путешествия на стуле. Давайте спросим пользователя, на какой кровати он решил спать, исходя из известной нам истории о трех кроватях: большой, средней и маленькой. Если мы выберем большой, это будет слишком сложно, и игра закончится. Если мы выберем средний, он будет слишком мягким и игра закончится. Однако если мы выберем маленькую, это будет в самый раз (какой сюрприз!), И мы впадем в приятный долгий сон только для того, чтобы быть разбуженными кучкой разъяренных медведей!
Я знаю, что это сложно. Но ты справишься, я верю в тебя!
Готовый продукт должен выглядеть примерно так:
Хотите снова сыграть?
Ясно, что наша маленькая игра станет хитом-бестселлером, и мы не можем винить людей, если они хотят играть в игру снова и снова до самого раннего утра.
как нам это сделать?
Мы собираемся представить еще одну последнюю концепцию. Функция. Функция - это блок многократно используемого кода. В JavaScript функция может принимать несколько форм, но пока мы не будем усложнять ее.
Следует учитывать два важных момента.
- Объявление функции
- Использование функции
Начнем с объявления нашей функции.
Объявление функции - это сама функция, содержащая весь код.
В JavaScript функция объявляется, как указано выше, с помощью записи «функция», за которой следует ее имя.
Давайте начнем с перемещения всего нашего кода в функцию под названием playGame.
Щелкните кнопку "Выполнить". Что происходит?
Странно… Абсолютно ничего.
Это потому, что мы только объявили нашу функцию и еще не вызвали ее.
Отредактируйте свой код, чтобы добавить строку playGame (); в самом низу. Это вызов функции. Вот как мы запускаем только что объявленную функцию.
Теперь нажмите "Выполнить"! Ваша игра должна работать именно так!
У вас есть идея, как мы можем использовать это, чтобы «воспроизвести нашу игру»?
Если вы думаете о «вызове функции», вы определенно на правильном пути.
Помните ли вы, наш друг, окно подтверждения? Я знаю, что это было давно, и он кажется далеким воспоминанием ...
Мы можем использовать это, чтобы спросить пользователя, хотят ли он снова сыграть, и действовать соответствующим образом.
Давайте добавим еще один оператор If, снова вызывающий функцию, если результат в поле подтверждения верен.
Нажмите «Выполнить», откиньтесь на спинку кресла и полюбуйтесь своей работой!
Поздравляю! Вы только что написали свою первую игру на JavaScript, похлопали себя по спине и аплодисментами, вышли в мир и показали случайного незнакомца на улице. Необязательно здесь заканчиваться, не стесняйтесь менять это так, чтобы Златовласка сражалась с космическими пиратами или получала силы мутантов от овсянки, которую съела.
Это было весело, что-то еще?
Благодаря чудесному миру Интернета существует множество бесплатных онлайн-ресурсов, которые вы можете использовать, чтобы продолжить свое путешествие по программированию!
Вот некоторые из них:
Udacity-Введение в информатику
Этот контент был первоначально создан для семинара по программированию в 360insights.
