Итак, приступаем к программированию. Для начала немного теории.
Нашу программу мы будем писать прямо внутри файла нашего проекта. Если помните, для хранения стилей мы использовали специальный элемент style, в котором хранили все наши стили. То же самое мы будем делать и для программы. Вся программа будет храниться в элементе script. Этот элемент мы расположим в конце файла, перед закрывающим тегом </body>:
Этот элемент никак не отображается на странице, в нем просто хранится наша программа.
Давайте напишем какую-нибудь простую программу:
Сохраните файл и перезагрузите страницу в браузере. Что произошло? Должно было появиться вот такое вот окошко:
Нажмите на кнопку "OK". Окошко закроется и на странице отобразится первый экран нашего приложения. Поздравляю, вы написали вашу первую программу! Теперь мы доработаем ее под наши нужды.
Сейчас в нашей программе одна инструкция - alert('Привет!');. Эта инструкция - вызов функции, отображающей такое окошко. Что такое функции - мы разберем позже, а пока познакомимся с другими инструкциями.
Эта инструкция - объявление переменной с именем a. Переменная - это некоторый объект внутри программы, при помощи которого мы можем сохранять необходимую информацию. Образно переменную можно представить в виде ящика, на котором написано имя переменной. Когда мы объявляем переменную - мы достаем пустой и чистый ящик и пишем на нем имя переменной. Также мы можем положить в этот ящик необходимую информацию. Или, говоря уже не образно, присвоить переменной значение. Смотрите:
При помощи первой инструкции мы объявили переменную, при помощи второй инструкции мы поместили некоторую информацию в эту переменную. То, что мы помещаем в переменную называется значением. Значения могут быть разных типов. В данном случае тип значения - строка. Смотрите, как мы можем использовать нашу переменную:
Третья инструкция нам уже знакома - вызов функции. Сравните этот вызов функции с тем, первым, когда мы только с ним познакомились. В первом случае в скобках было записано строковое значение, во втором случае - переменная. Но результат один и тот же. Перезагрузите страницу и вы увидите то же окошко, что и в первый раз. Почему так происходит? Во втором случае мы передали функции значение переменной, а в первом - просто значение. В обоих случаях мы передали функции одинаковое значение значение. Потому и результат получился одинаковый.
Что же такое функция? Функция - это некоторый набор инструкций, имеющий собственное имя. Этот набор функций выполняет некоторые логически связанные между собой действия. Например функция alert, которую мы уже рассматривали, отвечает за появления окошка, вывод на нем нужного нам текста, обработку нажатия на кнопку и т.п.
Итак, мы познакомились с тремя инструкциями: объявление переменной, присвоение значения и вызов функции. А можно ли заставить наше приложение сделать что-то нажатием на кнопку? Конечно, можно. Давайте применим наши новые знания и попробуем вывести окошко не при загрузке страницы, а при нажатии на кнопку.
При помощи атрибутов мы можем указать, что делать при нажатии на кнопку. Смотрите:
Сохраните и перезагрузите страницу. При перезагрузке появится окошко, это нормально, у нас же остался старый код в элементе script. Нажмите "OK" в окошке. Итак, перед нами первый экран, теперь нажмите на кнопку "Играть крестиком". Видите, тоже появилось окошко. Наша страница начала реагировать на наши действия! Это маленький шаг для человечества, но огромный шаг в вашем понимании программирования!
Мы добавили атрибут onclick - в его значении можно написать программу, которая будет выполняться при нажатии на кнопку.
Теперь давайте создадим собственную функцию. Функция - это именованный набор инструкций, смотрите как он выглядит в коде:
Здесь слово function означает, что мы сейчас будем записывать функцию, далее следует имя этой функции, в нашем случае - clickX, далее - скобки - про них я расскажу позже, затем идут фигурные скобки, внутри которых указаны все инструкции, которые будет выполнять эта функция, когда мы ее вызовем. Прекрасно, теперь давайте вызовем эту нашу новую функцию при нажатии на кнопку:
Сохраните и проверьте, как все работает. Должно работать точно также.
Итак, сегодня мы познакомились с основами языка javascript. Мы узнали, что такое переменная, инструкция, функция, мы научились вызывать функции и создавать свои собственные. В следующем уроке мы продолжим разбираться с программированием.
Если остались вопросы - обязательно пишите их в комментариях.
Предыдущий урок | Содержание курса | Следующий урок
Подпишитесь на наш канал, чтобы не пропустить следующие уроки. Другие курсы и навигация по каналу
Новые уроки, новые курсы будут на моем блоге здесь: keklik.me.