Создание сайта своими руками

Создание сайта своими рукамиВ данной категории нашего сайта мы подробно в примерах рассмотрим создание функционального сайта своими руками. Все примеры рассчитаны на новичков сайтостроения и начинаются от простой верстки дизайна шаблона, до функционального сайта-портала с применением CSS стилей и Javascript сценариев.

Обзор библиотеки jQuery

Рассматривая тенденции развития веб-программирования за последние несколько лет, можно сделать следующий достаточно противоречивый вывод: в принципе, почти все программы, которые используются на сайтах, уже написаны. Однако для того, чтобы найти ту единственную необходимую программу, следует потратить столько времени, трафика и сил, что проще ее написать самому. Впрочем, такой парадокс характерен не только для программирования, но и, пожалуй, для любой современной человеческой деятельности, связанной с обработкой информации.

Калькулятор "Сколько будет стоить свадьба"

Продолжим рассматривать возможность применения библиотеки jQuery на примере создания приложения «Сколько будет стоить свадьба» в виде калькулятора, написанного на JavaScript. Он используется для расчета услуг по проведению свадьбы. Полный код страницы калькулятора «Сколько будет стоить свадьба» будет выглядеть следующим образом:

Размещение файлов сайта на удаленном компьютере с помощью FileZilla

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

Знакомство с языком JAVASCRIPT

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

Редактор Notepad++

Перед тем как приступить к работе со сценариями, написанными в JavaScript, рекомендуется немного улучшить свое рабочее место, то есть заметать малофункциональный текстовый редактор Блокнот чем-либо более удобным, например редактором Notepad++. Проект с открытым кодом Notepad++ является бесплатным, и страница его загрузки располагается по адресу http://notepad-plus-plus.org/download.

Основные моменты при создании сценариев на JavaScript

Для начала необходимо разобраться с понятием объектно-ориентированного событийного программирования, поэтому, не углубляясь в дебри, определим для себя следующее.
Любая программа, а в нашем случае сайт, как инструкция браузеру состоит из программных объектов: страницы, таблицы, рисунка и т. д.

Простейшие сценарии JavaScript

Включение сценария в тег <body>. Всплывающее сообщение, метод alert()
Рассмотрим простейший пример использования элементов языка JavaScript в качестве параметров тега <body>

Примеры работы с формами. Сложение двух чисел

По традиции рассматривать работу пользователя с формами в учебниках языков программирования начинают с создания калькулятора. Мы также не отступим от этого великолепного обычая и постараемся создать страницу, на которой будут складываться два числа. Заботу о взаимодействии с пользователем берет на себя объект «форма», определяемый парным тегом <form></form>. В нашем случае это не будет исключением.

Условный оператор при выборе последовательности действий

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

Элементы формы для создания и обработки тестового опроса

Рассмотрим более сложную задачу на определение какого-либо результата, полученного по итогам тестового опроса. Например, создадим список вопросов с различными вариантами ответов. Отвечая на вопрос, посетитель получает соответствующий ответ.