?

Log in

No account? Create an account

Previous 10

Jan. 30th, 2030

default

Для читателей и посетителей моего журнала.

Я даю индивидуальные консультации по разработке сайтов (а конкретно - HTML/XHTML, CSS, php/MySQL).

Если вы хотите получить индивидуальную консультацию. Или же записаться ко мне на индивидуальное обучение, пиши личным сообщением в ЖЖ или на почту pavel-drujniy@yandex.ru

Оглавление курса по созданию сайтов (HTML+CSS
)  (начался 2009-04-03, регистрация новых участников прекращена)



Оглавление базового курса по HTML
(курс закончился)




Мои заметки, которые помогут вам лучше понять суть HTML и создания сайтов вообще:

3 апреля начался Расширенный, углублённый и улучшенный курс по созданию сайтов - запись на курс закрыта.

Dec. 9th, 2010

default

А может, вам вообще что-то другое интересно, чему я могу вас научить? :-)

Как я уже говорил, на днях будет продолжение про JavaScript.

Но, возможно, вам интереснее было бы научиться чему-то ещё?

Или вашим знакомым.

Вы же знаете принцип голосования - кто воздержался, тот делает несовсем то, что ему хочется, в итоге.

Dec. 8th, 2010

default

Быстрое введение в язык JavaScript

Чему вы научитесь, прочитав это введение?

Текст, как видите, очень короткий - всего на одну длинную страницу.

Но он уже позволит вам понять и проверить на практике некоторые простые принципы написания программ на языке JavaScript.

А более сложные программы - это, в большинстве случаев просто хорошо подобранное сочетание простых кусочков.

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


Лирическое введение

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


Техническое предупреждение

Во всех языках программирования важно строго соблюдать синтаксис.
Это значит, что в программировании любая опечатка может изменить работу программы, а зачастую приводит к неработоспособности программы.
Поэтому нужно быть внимательными ко всем пробелам, точкам, запятым, кавычкам и написанию слов-команд (в том числе, и к большим-маленьким буквам в словах).
Хорошая новость в том, что все эти правила написания команд достаточно простые.


Для чего можно использовать JavaScript на вашем сайте

JavaScript можно использовать, например, для:
- Проверки заполнения форм до того, как они будут отправлены на сервер;
- Изменение цветов, размеров, положения элементов на странице;
- Создания анимационных эффектов (это "продвинутый" вариант предыдущего пункта);
- Отправки запросов на сервер и получение ответов (и, возможно, изменение частей страницы в соответствии с полученным ответом) без перехода на другую страницу (это так популярный сейчас AJAX);

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


Запомните одну важную вещь

После каждой команды в JavaScript нужно ставить точку с запятой:

document.write("Hello");
alert("Hello");


Самый простой вариант HTML-страницы с использованием JavaScript

Чтобы заставить заработать программу на языке JavaScript, достаточно написать вот такую "болванку" внутри файла с расширением .html и открыть этот файл в браузере (Internet Explorer, Mozilla, Opera...)

<html>
<head>
</head>
<body>
<script type="text/javascript">
</script>
</body>
</html>

А потом вставить между <script ...> и </script> текст программы.

Например, вывести сообщение в окошке:

alert("Это моё сообщение");

То есть, всё вместе будет выглядеть так:

<html>
<head>
</head>
<body>
<script type="text/javascript">
alert("Это моё сообщение");
</script>
</body>
</html>

Попробуйте прямо сейчас.

Чтобы упростить вам задачу, я написал небольшую программу, которая позволит вам проверять ваши программы на JavaScript прямо в браузере:

http://easysite-school.com/tools/js-tester/

- просто введите текст программы в форму на странице, и увидите результат в поле, находящемся чуть выше формы.


Как вывести пользователю навязчивое сообщение

Знаете, иногда на сайтах вылезают такие окошки с каким-нибудь сообщением вроде "Подтвердите, что вы человек!" и кнопка "ОК", причём с сайтом невозможно ничего сделать, пока эту кнопку "ОК" не щёлкнешь?

Вот такие окошки выводятся в JavaScript очень просто.

Поэтому их так часто и делают, что это очень просто:

alert("А вот и я!");



Как показать пользователю ненавязчивое сообщение

Например, вывести это сообщение внутрь какого-нибудь блочка на странице.

Допустим, у вас есть абзац на странице и внутри этого абзаца специальное место для сообщения:

<p>Сообщение: <strong id="myMessage"></strong></p>

А вот то, что выполнится при щелчке на эту ссылку, изменить сообщение внутри тега STRONG выше.

<p><a href="javascript:document.getElementById('myMessage').innerHTML = 'А вот и снова я, но вежливее!';">Щёлкни, а?</a></p>

Это гораздо более вежливый вариант общения с пользователем, чем простой alert().


Как обратиться к любому элементу на странице

Вот так и обратиться:

document.getElementById('elementId');

Естественно, вместо "elementId" нужно подставить идентификатор того элемента, к которому вы хотите обратиться.

Напоминаю, что идентификатор - это то, что задаётся атрибутом id="" у любого тега.

Например,

<div id="superDiv">Это супер-div! :-)</div>

Как изменить HTML-код внутри элемента страницы

document.getElementById('здесьИдентификаторЭлемента').innerHTML = "И здесь впишите тот HTML, который вы хотели бы вставить внутрь элемента";

Обработчики событий

С каждым элементом страницы могут происходить какие-то события.
Мало того, они постоянно происходят.
Например, наведение указателя мышки на элемент (onmouseover); или наоборот, уведение мышки с поверхности элемента (onmouseout); или щелчок мышью по элементу (onclick).
Эти события очень легко использовать.
Достаточно указать в HTML-коде элемента, при каком событии и что вы хотите сделать.
Например, у вас есть вот такой абзац на странице:

<p>Щёлкни меня!</p>

Сделаем так, чтобы по щелчку мыши по этому тексту выводилось сообщение во всплывающем окне:

<p onclick="alert('Щёлкнули!');">Щёлкни меня!</p>

А теперь добавим изменение текста внутри абзаца при наведении.

<p onclick="alert('Щёлкнули!');" onmouseover="this.innerHTML = 'Навелись. Щёлк!';">Щёлкни меня!</p>

...и изменение текста внутри абзаца при убирании мышки с этого абзаца:

<p onclick="alert('Щёлкнули!');" onmouseover="this.innerHTML = 'Навелись. Щёлк!';" onmouseout="this.innerHTML = 'Ну, вот, увели мышку :-(';">Щёлкни меня!</p>


Почему разные кавычки?

Всё очень просто.
Внутри двойных кавычек нельзя использовать двойные, а внутри одинарных нельзя использовать одинарные.
Потому что, если какая-то часть команды начинается, например, с двойных кавычек, то JavaScript будет "думать", что на двойной кавычке эта команда и заканчивается.
Поэтому когда вам внутри одной команды нужно использовать строку в кавычках, вы просто пишите другие кавычки (одинарные - внутри двойных, и наоборот, - двойные внутри одинарных).


Как быстро найти место ошибки в программе

Иногда программа перестаёт работать по непонятной или не до конца понятной причине. Часто главной проблемой является найти место, где именно произошла ошибка. Это место легко найти, если вставлять вот такую команду:

alert(5);

(она просто выводит цифру 5 во всплывающем окне) в разные места программы и смотреть - повторилась ли ошибка до или после появления сообщения "5".

Соответственно, ошибка происходит выше или ниже по тексту программы, чем вы вставили эту команду, выводящую пятёрку.



Как использовать переменные

Переменная - это что-то вроде коробки, на которой написано её название.
Внутри коробки может быть что угодно, но наклеенный "ярлычок" всегда остаётся одним и тем же.
Хорошо, когда наклейка на коробке-переменной соответствует типу тех вещей, которые в эту коробку обычно складывают.
То есть, если на коробке-переменной написано "фрукт", то внутри будет яблоко, груша или персик, но не будет огурцов и картошки.
А если название переменной "бумаги", то там может лежать один листик или же целая пачка разнообразных бумажек, а может и ничего не лежать (и такое бывает). Но если что-то лежит, то обязательно - бумага.

Переменную в JavaScript создать легко.

Достаточно написать в любом месте:

var имяПеременной;

(вместо имяПеременной соответственно подставляете название, которое вам больше нравится).

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

Чтобы "положить" какое-то значение внутрь переменной, нужно написать знак равенства:

имяПеременной = значениеПеременной;

Например,

var myNumber;
myNumber = 17;
var myText;
myText = "Я люблю JavaScript!";


Зачем вообще нужны переменные?

Например, чтобы можно было использовать одно и то же значение несколько раз:

var myText;
myText = "Это достаточно длинное сообщение, и чтобы набрать его два раза в программе, нужно потратить драгоценное время";
alert(myText);
alert(myText);

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


Как видите, статья получилась немного сумбурная :-) Но именно такой я её и задумывал - дать вам вводную информацию и потом дополнить её на основе тех вопросов, которые у вас появятся.

Я планирую написать продолжение для этой статьи.

Но для этого мне нужно знать, что вы ещё хотите узнать по JavaScript.

Задавайте вопросы в комментариях.

Sep. 10th, 2009

default

Иногда приходится идти на компромиссы и отходить от стандартов.

Но если вы можете остаться в рамках стандарта - лучше останьтесь. Потому что в противном случае проблем станет больше.

Sep. 2nd, 2009

default

Простой способ проверить, подключилась ли внешняя таблица стилей.

Когда вы используете отдельный файл с правилами CSS, но пока не успели там ничего написать :-), вы можете быстро проверить, работают ли правила из внешнего файла вообще.

Для этого достаточно в подключенном файле CSS написать примерно следующее:

BODY {
         background-color: red;
         }

- если после этого цвет страницы поменяется на красный, значит, правила работают.


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

Sep. 1st, 2009

default

Поздравляю всех с Днём Знаний! :-)

У меня был небольшой отпуск, отчасти вынужденный. А теперь я продолжу.

Ведь 1 сентября - хороший же день, чтобы продолжать учиться созданию сайтов? :-)

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

Jul. 19th, 2009

default

Продолжение следует.

На днях я разгрёб очередной завал в делах, так что будем продолжать.

Есть несколько тем по HTML+CSS, которые я бы хотел ещё дать.

И (наконец-то :-) будет вводный мини-курс по JavaScript.

Jun. 4th, 2009

default

Что такое хостинг.

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


Необходимые условия для появления сайта в интернете

Чтобы ваш сайт увидели в интернете, необходимо наличие двух вещей:
  • хостинга
  • и доменного имени
Доменное имя - это по сути адрес вашего сайта (например, everybody-happy.com).

Как такое имя получить, я расскажу отдельно. А сейчас про хостинг.

Хостинг - это "аренда помещений". :-) То есть, хостинговая компания предоставляет вам свои "помещения" (место на сервере - компьютере, подключённом к интернету) для хранения файлов.


А могу я "хостить" сайт у себя?

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

В случае с коммерческим (или бесплатным) хостингом все эти заботы берёт на себя хостинговая компания ("хостер").


Какие ещё дополнительные услуги, кроме размещения файлов предоставляют хостеры?

Кроме непосредственно хранения файлов хостер может предоставлять вам:
  • среду для выполнения программ (скриптов) на специальных серверных языках программирования (например, Perl, php, Python) - чтобы ваш сайт был динамическим, а не просто набором однажды созданных файлов
  • доступ к системе управления базами данных (удобно для хранения большого количества данных - например, каталогов товаров, сообщений на форумах, статистики посещений сайта)
  • опционально какое-то дополнительно программное обеспечение и настройки сервера

Почём платный хостинг?

Простой хостинг - это довольно дешёвая услуга. В районе 2000 рублей в год.

Обычно цена формируется из:
  • объёма места на диске, которое вам предоставляют (в мегабайтах - продают обычно от 10-20 мегабайт).
  • набора языков программирования и количества баз данных, которые вам будут доступны
  • ограничения по трафику (объёму переданной информации - сколько мегабайт вашего сайта скачали все посетители за месяц, скажем)
  • количества сайтов (доменов, поддоменов), которые вы можете размещать

А какие есть хостинговые компании?

Например, из популярных:

May. 31st, 2009

default

Базовый курс HTML в виде электронной книги.

Базовый Курс HTML в виде электронной книги
Долгожданная электронная книга, в которую вошли избранные уроки базового курса по созданию сайтов с некоторыми улучшениями :-)

Все, кому я её обещал, могут получить ссылку на скачивание книги в этой закрытой записи.



May. 27th, 2009

default

Индивидуальное обучение.

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

Вы можете учиться у меня по индивидуальной программе.

Что вы получаете:
  • индивидуальный график обучения
  • свободный выбор тем для изучения и их последовательность
  • ежедневную поддержку по электронной почте (ответы на вопросы, подсказки, дополнительная теория)
  • доступ к моему серверу для тренировок в реальных условиях
  • нацеленность на результат - то есть, всё обучение будет проходить в свете ваших текущих задач

Стоимость обучения и оплата

Индивидуальная программа обучения по темам на ваш выбор, ежедневной поддержкой по электронной почте и доступом к серверу стоит всего 3000 рублей в месяц.

Вам нужно будет перечислить эту сумму через систему электронных платежей Webmoney в рублях - на мой кошелёк.

На индивидуальное обучение я могу взять не больше пяти человек (больше я врядли потяну).


Гарантия

Здесь я могу предложить целых два вида гарантии:
  • автоматическая (если после очередного месяца вы по какой-то причине решите прекратить обучение, вам достаточно будет просто не оплачивать следующий месяц)
  • экстренная (если за две первые недели месяца вы решите, что такая форма обучения вам не подходит, вы можете сообщить мне об этом, и я верну вам деньги за этот месяц)

Previous 10