Полезные сервисы
Поделись с друзьями
Помощник для тех, кто хочет научиться создавать сайты.
Вам понадобятся терпение и желание.
Всего за пять уроков Вы сможете сделать сайт-визитку, а освоив следующие уроки - сделаете первый шаг к профессионализму
JavaScript
Эта и следующая темы - уже ознакомление с программированием. Многих начинающих эти слова просто отпугнут, но только не Вас. Потому что материал я буду давать понемногу, на простых примерах, которые наверняка Вам понадобятся в дальнейшем.
JavaScript - это такой язык программирования, который понимают браузеры. Программисты используют его как язык сценариев. Если Вы совсем не знакомы с программированием, то будем понемногу осваивать.
Для начала, в нашу html-заготовку до закрытия тега </head> вставьте следующие строки:
<script type="text/javascript">
function fotka()
{
alert("Моя первая функция");
}
</script>
function fotka()
{
alert("Моя первая функция");
}
</script>
Итак, внутри нашей функции, которую я назвал fotka(), есть функция alert(содержимое);, которая выводит на экран сообщение, переданное в параметрах.
Внутрь этой функции передан параметр в виде текстовой строки - "Моя первая функция".
Вызвать функцию на выполнение можно несколькими способами (о них ниже). Мы воспользуемся таким:
<script type='text/javascript'>fotka();</script>
Вставьте эту строку в любое место, в зоне тега body.
Если все сделали правильно, то при перезапуске (обновлении) нашей странички-заготовки на экран выведется окно с сообщением "Моя первая функция".
Вот так выглядит это окно в браузере Chrome.
В нашем случае мы вызвали функцию alert уже с параметрами. Но можно было их передать и во время запуска основной функции fotka(). Для этого функцию переделываем так:
<script type="text/javascript">
function fotka(str)
{
alert("Получили-",str);
}
</script>
function fotka(str)
{
alert("Получили-",str);
}
</script>
И меняем ее вызов, например, так:
<script type='text/javascript'>fotka("привет");</script>
Т.е. при вызове мы задали параметр, который уже при выполнении функции запишется в переменную str.
В этом случае браузер выдаст такое сообщение:
Чтобы Вам было интереснее проходить эту тему, давайте перейдем на что-нибудь более реальное.
Посмотрите на прикольную картинку на правой панели сайта.
Как ее туда поместить мы уже знаем (обычный тег div в виде блока и в нем тег img с отсылкой на фотку). Однако если вы перейдете на другую закладку меню, то картинка поменяется. И так каждый раз при любой перезагрузке страницы.
Более того, при наведении на картинку курсора он меняет вид на руку, как бы предлагая на нее нажать. И действительно, при нажатии на фото происходит его смена. Эта смена случайная (всего 50 фоток).
Для реализации такого поведения я тоже использовал JavaScript.
Алгоритм работы будущей функции такой:
У меня есть 50 картинок с именами файлов: p_1.jpg, p_2.jpg,.. p_50.jpg.
Нужно получить случайное число от 1 до 50 и подставить это число к имени файла в теге img. Тогда, при обновлении страницы случайное число будет меняться и картинка - соответственно.
Переделываем нашу функцию таким образом:
<script type="text/javascript">
function fotka()
{
var n=Math.floor(Math.random()*51 + 1);
var b=document.getElementById('fff');
b.innerHTML='<img onclick="fotka();" src="images/prikol/p_'+n+'.jpg" width="100%" style="cursor: pointer;">';
}
</script>
function fotka()
{
var n=Math.floor(Math.random()*51 + 1);
var b=document.getElementById('fff');
b.innerHTML='<img onclick="fotka();" src="images/prikol/p_'+n+'.jpg" width="100%" style="cursor: pointer;">';
}
</script>
Рассмотрим подробнее
В первой строке записано: var n=Math.floor(Math.random()*51 + 1);
- это переменной n присвоено некое значение. Для описания переменных используется слово var. Далее ссылаясь на эту переменную, просто пишем n.
Как видим далее, вводится еще одна переменная b.
Возвращаемся к первой строке и видим, что n принимает значение некой функции Math.random()
Читаем в Интернете, что функция Math.random() выдает псевдослучайное число в диапазоне от
0 (включительно) до 1 (не включая 1), то есть возвращенное число может быть нулем,
но всегда будет меньше единицы
Далее полученное значение умножается на 51 и прибавляется единица (чтобы в результате не было нуля, т.к. файлы я называл, начиная от 1).
Для того, чтобы округлить полученное значение до целого мы все это вставляем внутрь функции Math.floor.
Итак, в первой строке выполнилось последовательно сразу две функции, сначала Math.random(), затем Math.floor и результат занесся в переменную n.
Если посмотреть внимательно на третью строку, то между двух плюсов мы увидим нашу переменную n. Тут вместо нее подставится полученное случайное число.
Во второй строке переменной b присваивается отсылка на некий элемент fff document.getElementById('fff');
Из названия функции видно, что она берет элемент с Id (идентификатор) которого равен fff.
И действительно, в коде моей странички есть такая строка:
<div id="fff" style="min-height:150px;"></div>
Обратите внимание, что здесь идет описание блока с id="fff" и ему еще задан стиль минимальная высота.
Но далее этот </div> закрывается, а внутри блока нечего не помещено. И при загрузке страницы в этом месте ничего не отобразиться.
<div id="fff" style="min-height:150px;"></div>
Обратите внимание, что здесь идет описание блока с id="fff" и ему еще задан стиль минимальная высота.
Но далее этот </div> закрывается, а внутри блока нечего не помещено. И при загрузке страницы в этом месте ничего не отобразиться.
Но далее в коде моей странички есть такая строка:
<script type='text/javascript'>fotka();</script>
Эта строка заставляет браузер выполнить программу, заложенную в функции fotka().
Теперь возвращаемся к нашей функции fotka(). Итак, переменой b присвоено некое значение, позволяющее программе найти элемент fff.
Теперь изучаем третью строку:
b.innerHTML='<img onclick="fotka();"
src="images/prikol/p_'+n+'.jpg" width="100%"
style="cursor: pointer;">';
через b.innerHTML можно получить содержимое внутри данного элемента b.
А в нашем случае мы не получаем, а присваиваем значение нашему элементу.
Как вы помните, внутри нашего элемента (блок с id="fff") <div id="fff" style="min-height:150px;"></div> ничего нет.
Так вот, после выполнения третьей строки внутри блока появится то, что мы вставим в b.innerHTML. А как видно выше вставляем мы туда тег <img onclick="fotka();" src="images/prikol/p_'+n+'.jpg" width="100%"...
Причем вместо '+n+' подставится случайное число, например 13, тогда получим ...src="images/prikol/p_13.jpg"...
Фактически внутрь div вставится тег <img с отсылкой на конкретную картинку.
Как вы помните, внутри нашего элемента (блок с id="fff") <div id="fff" style="min-height:150px;"></div> ничего нет.
Так вот, после выполнения третьей строки внутри блока появится то, что мы вставим в b.innerHTML. А как видно выше вставляем мы туда тег <img onclick="fotka();" src="images/prikol/p_'+n+'.jpg" width="100%"...
Причем вместо '+n+' подставится случайное число, например 13, тогда получим ...src="images/prikol/p_13.jpg"...
Фактически внутрь div вставится тег <img с отсылкой на конкретную картинку.
Коротко про формирование строк в javascript.
Если у нас есть переменная s1 со значением "Привет" и есть переменная s2 со значением 55, то мы можем
получить третью переменную z в виде "Привет, 55 - это число" таким образом:
var z = s1 + ", " + s2 + " - это число"; т.е. переменные присоединяются через плюс, а в кавычках присоединяется какой-то текст.
В теге img, который подставляется в блок_fff, есть ключевое слово onclick="fotka();". Оно означает, что при нажатии курсором на это изображение нужно вызвать функцию fotka().
Как результат опять получим случайное число... и картинка сменится.
Основной ошибкой начинающих программистов является то, что зачастую они строку с запуском функции
<script type='text/javascript'>fotka();</script> ставят до того места, где стоит блок _fff.
И как результат - ничего не работает, т.к. функция fotka() не может найти блок _fff (браузер уже дошел до вызова функции
но не дошел до блока_fff. Поэтому переменная b вернет ошибку).
Если в скрипте будет синтаксическая или другая ошибка, то конечно скрипт работать не будет. Но не все браузеры выдают сообщение об ошибке. Они просто не выполняют ошибочный скрипт. Для проверки работоспособности и отладки (например, а какое число мы получаем?) можно использовать функцию alert(). Она выводит окно сообщения с текстом, указанным в скобках.
alert("случайное число="+n);
Подставьте эту функцию в тело нашей функции fotka() перед закрытием фигурной скобки, т.е. в конце и посмотрите результат. Если все правильно, то появится сообщение типа "случайное число=45".
Если сообщения нет, то значит в функции fotka() есть ошибки.
Подставьте эту функцию в тело нашей функции fotka() перед закрытием фигурной скобки, т.е. в конце и посмотрите результат. Если все правильно, то появится сообщение типа "случайное число=45".
Если сообщения нет, то значит в функции fotka() есть ошибки.
Заремьте строку, по поводу которой есть сомнения в ее правильности (перед строкой ставим // и она не будет выполняться)
Если страница использует много JavaScript-тов - их можно вынести в отдельный файл, точно также как мы выносили в отдельный файл стили. В этом случае, как правило файлу дают расширение js, например, my_script.js. Отсылку на него в html страничке делают аналогично файлу стилей в зоне тега head в виде:
<script type="text/javascript" src="my_script.js"></script>
Еще один короткий скрипт
function poz_cursor(sss,event)
{
{
var b=document.getElementById('okno');
if (!sss)
{
event = event || window.event;
var poz_x = event.x;
var poz_y = event.y;
b.value="X="+poz_x+" Y="+poz_y;
}
else b.value=sss;
}
А вот так прописан код окошечка для координат и картинка неба
<input type='text' id='okno' size='20' value="Тут координаты">
<img src="images/nebo.jpg" onmousemove="poz_cursor('',event);" onmouseout="poz_cursor('Поводите снова',event);">
<img src="images/nebo.jpg" onmousemove="poz_cursor('',event);" onmouseout="poz_cursor('Поводите снова',event);">
Водите мышкой по голубому небу и будете видеть изменение координат курсора.
Сначала посмотрим как задана картинка. В самом теге img есть два интересных места. Это onmousemove = "poz_cursor('',event);" и
onmouseout = "poz_cursor('Поводите снова',event);"
Это события мыши.
Первое возникает всегда, когда мы водим по нашему изображению, а второе - когда выводим мышку за его пределы.
Кстати такой прием можно использовать и для блока и для текста.
Не трудно догадаться, что при появлении этих событий вызывается функция poz_cursor.
Если Вы помните, то функцию fotka() мы вызывали по другому:
<script type='text/javascript'>fotka();</script>
А здесь вызов функции poz_cursor() прописан прямо в событии
<script type='text/javascript'>fotka();</script>
А здесь вызов функции poz_cursor() прописан прямо в событии
Обратите внимание, что мы вызываем функцию poz_cursor с параметрами, которые указываются в скобках. В данном случае передано 2-а параметра: ('Поводите снова',event);
Первый параметр - обычный текст (поэтому в кавычках), а второй - это аргумент-событие "event".
Событие "event" передается для кроссбраузерного решения. В самой функции видно, что дальше оно может принять
значение event || window.event (две вертикальные черты - это ИЛИ). Так будет в Мозилле (firefox) и в Интернет Эксплорере.
В событии onmousemove функция вызывается с пустым первым параметром (вы видите две одиночные кавычки)
В событии onmousemove функция вызывается с пустым первым параметром (вы видите две одиночные кавычки)
Рассмотрим подробнее функцию
Первая строка должна быть уже понятна - мы переменной b присвоили значение отсылки на элемент okno.
Ищем, где задано id='okno' - оказывается в новом для нас теге input
Тег input используется для ввода данных. Мы задали тип=text (а может быть еще password, button, hidden, checkbox, file и т.д.).
size - это размер окна и value="текст" - конкретное значение, которое помещается в это окошечко-ввода в самом начале.
size - это размер окна и value="текст" - конкретное значение, которое помещается в это окошечко-ввода в самом начале.
Т.е. мы получили отсылку на наше окошечко-ввода.
В следующей строке идет if (!sss) - это задано условие на отсутствие sss
(если бы было без восклицательного знака - проверка наличия sss).
Когда мы просто водим мышкой по небу то вызываем функцию так: poz_cursor('',event) (в скобках первый параметр=пусто), т.е. параметра не задаем, значит и sss будет равно пустому.
В случае вывода мыши за небо вызываем так: poz_cursor('Поводите снова',event), значит первый параметр есть и sss принимает его значение автоматически уже при входе в функцию.
Далее просто: переменная poz_x принимает значение позиции курсора по оси Х и poz_y - по оси Y. Затем через отсылку b задаем новое значение (value) этому элементу окошечку-ввода, подставляя полученные значения координат.
Еще один хороший пример
Обратите внимание на мое верхнее меню. Выбранный пункт остается с затемненным фоном. Чтобы это реализовать я написал такую функцию:
function m_0()
{
Кроме того, каждому пункту меню я дал свой идентификатор.
Так, для первого меню, вместо <span> <a href="?t=nach">... я дал{
var uuu=location.search;
if(uuu)
{
uuu=uuu.substr(3,10)+'7';
var b=document.getElementById(uuu);
b.style.background= '#550000';
}
}
<span id="nach7">...
Семерку добавил для надежности, т.к. далее у меня пункты называются css, menu, а вдруг есть такие служебные слова?
А слова css7 - точно нет.
Для остальных пунктов - по аналогии. Кроме того, по окончании меню сделал вставку
<script type='text/javascript'>m_0();</script>
для вызова этой функции.
Итак, в первой строке функции переменная uuu принимает значение параметров из url строки.
Если выбрать пункт меню "Дизайн", то uuu будет равна ?t=diza
Далее условие "Если uuu не равно пустому", то выполнить все остальное. Т.е. если пункт не выбирался и параметра нет, то все, что далее в функции - не выполняется.
Для того, чтобы получить только diza7, используется строка uuu=uuu.substr(3,10)+'7'; где сначала из uuu берется 10 символов начиная с третьего (счет от 0) и затем прикрепляется семерка.
Затем получаем отсылку на этот элемент и в последней строке изменяем стиль фона для этого элемента.
И как результат этот пункт меню стал затемненным.
Возможности JavaScript просто огромны. Я дал только начальный минимум для написания скриптов. На этой странице внизу и справа есть отсылки на мои другие сайты. Так, на сайте "Это интересно" я использую скрипты для смены цвета листков, где написаны "Фразы, Поговорки".
Кстати на этом сайте есть интересные часы флеш-ролик. Как создавать такой ролик там же есть уроки и много исходников. Красивый флеш-ролик всегда украсит Ваш сайт.
А на сайте "Тату-Пирсинг" большое количество скриптов, которые позволяют перемещать, вертеть татуировки, изменять их размер и прозрачность.
Вы можете скачать любой сайт и посмотреть много интересных скриптов.
Для скачивания сайта
например, в Chrome нужно нажать на кнопочку (три полоски) в правом верхнем углу, выбрать "Сохранить страницу как", "Полностью". В результате там, где у Вас сохраняются загруки появится соответствующий файл и каталог с таким же именем и добавкой _files в конце. Именно в этом каталоге и сохранятся стили и скрипты если они лежали в отдельных файлах.Подведем итоги
Итак мы углубились настолько, что даже немного освоили программирование.
И хотя мы прошли всего три примера - теперь Вы имеете понятие, что такое Javascript и можете применять эти знания для дальнейшего развития.
На левой панели сайта есть меню "Подборка скриптов" - там много всяких примеров на Javascript.
Этот урок закончен, можете переходить на закладку PHP
Мысли вслух
- Программист - это не тот, кто пишет программы, а тот, чьи программы работают
- Для программиста монитор - это реальный рабочий стол, системный блок - журнальный, а клавиатура - обеденный
- Конфеты программиста: 'Мишка на сервере'
- А знаете ли Вы, что в 1 килобайте не 1000 байт, а 1024 (2 в степени 10)
Если у Вас будет несколько функций, то их размещаем одна за другой в зоне тега <script> вот так:
<script type="text/javascript">
Имя для функции выбираете сами, но при этом нельзя использовать служебные слова. Поэтому выбирайте что-нибудь попроще, как я.function f_1() { содержимое }
function f_2() { содержимое }
function f_z() { содержимое }
</script>
После имени функции обязательно идут круглые скобки, например так:
function f_1() - вам не нужны входные данные
function f_1(x,y) - в функцию могут быть переданы два значения
Содержимое (тело) функции заключено в фигурные скобки, а внутри идут команды и другие функции, которые должны заканчиваться точкой с запятой
<script type="text/javascript">
function f_1()
{
команда;
функция;
}
</script>