От автора: сам по себе сайт на чистом html очень сильно ограничен по своей функциональности. Чтобы добавить на него какие-то привычные всем возможности, нужно использовать другие технологии. Скрипты для сайта html сделают ресурс гораздо более функциональным. О них давайте и поговорим.
Дело в том, что языки HTML и CSS имеют очень ограниченные возможности. С их помощью можно только создать и оформить страницу, организовать какие-то простые эффекты при наведении, добавить ссылки на другие страницы и т.д. Но для большинства современных ресурсов этого мало. Вот какие возможности используются на многих веб-сайтах сегодня: календари, умные виджеты, счетчики посещаемости, формы регистрации и добавления комментариев, слайдеры и многое-многое другое.
Чаще всего под скриптом понимают файл или несколько файлов, которые написанные на языке javascript и каким-то образом дополняют функциональность сайта. Но сценарии можно создавать на любом языке программирования: PHP, Perl, Python и т.д. Больше всего скриптов существует на PHP и JavaScript, так как это самые популярные сегодня технологии.
Где скачать готовые скрипты для сайта htmlКонечно, сегодня в сети можно скачать тысячи сценариев, но где можно найти наиболее крупные подборки? В этом плане зарубежные сайты немного впереди рунета, потому что там веб-технологии развиваются быстрее.
Например, hotscripts.com. Огромный зарубежный портал, на котором представлено более десяти тысяч сценариев и программ на самых разных языках программирования. В том числе там есть различные полезные вещи на HTML5. Только все на английском, поэтому как-то вам придется разбираться, если очень надо будет.
Рис. 1. Крупнейший в интернете портал скриптов. К сожалению, только для тех, кто дружит с английским.
Ну а это русскоязычная библиотека скриптов . В основном тут представлены материалы по PHP. В данном случае русскоязычный сайт выигрывает тем, что почти все инструкции по установке скриптов на русском, а значит, разобраться намного легче.
Как устанавливать и подключать скриптыНа этот вопрос точно ответить невозможно, потому что скрипты отличаются своей сложностью и способом установки. Например, для javascript-сценариев чаще всего требуется для начала скачать и установить библиотеку jQuery, а уже к ней подключать различные плагины, которые и будут реализовывать нужный функционал.
В случае с PHP установка может заключаться в копировании нужных файлов на сервер с дальнейшим прописыванием нового куска кода в функциях. Впрочем, почти каждый нормальный скрипт имеет инструкцию по установке.
Чем отличаются javascript и php скриптыРазница в том, что на javascript чаще всего создают красивые элементы оформления, пишут сценарии, которые срабатывают при различных действиях посетителя. Например, можно менять расположение элементов на веб-странице, менять цветовую схему сайта и даже его структуру. Например, на многих крупных порталах вы сами можете настроить дизайн сайта. Именно там применяется javascript и его самая популярная библиотека – jQuery.
PHP в этом плане очень сильно отличается. Этот язык создан в основном для расширения функциональности. С его помощью оживают всевозможные формы регистраций, отзывов и комментариев. Скрипт обратной связи для сайта html также можно написать на PHP. На самом деле возможности этого языка намного более широкие.
На нем написаны самые популярные движки, такие как WordPress, с его помощью создаются библиотеки, счетчики, карты сайтов, инструменты для администрирования на хостинге и сотни других вещей. В этом плане PHP может гораздо больше, чем javascript.
Пример установки скриптаНу а теперь давайте установим какой-нибудь скрипт. Методом случайного тыка я выбрал этот — ссылка . Это графические часы. Сначала давайте распакуем скачанный архив и посмотрим, что там.
Мне сразу не понравилось, что там целых 14 изображений, которые нужны для работы. Ну да ладно, не будем сейчас оценивать качество скрипта, а просто установим его.
Для этого нужно открыть файл index.html. Там нас должен интересовать тег script и все его содержимое. Собственно, вариантов установки веб-сценария два:
Просто скопировать все содержимое тега script и вставить на свою страничку в тег head.
Скопировать код в отдельный файл (например, script.js), а потом подключить этот файл к html-страничке. Так мы поступим правильно с точки зрения стандартов, разделив разметку страницы и ее поведение.
Дальнейший процесс установки заключается в том, что тегу body нужно дописать атрибут onload = «show3()». Это означает, что после загрузки тела страницы должна быть выполнена функция show3(), которая и приводит в действие наши часы.
Теперь нам остается только вставить в тело страницы строчку кода, которая будет создавать необходимые элементы для показа часов. В скрипте по умолчанию прописано так:
< a href = "http://www.woweb.ru" > < Img Src = "cb.gif" Name = "a" border = 0 > < Img Src = "cb.gif" Name = "b" border = 0 > < Img Src = "colon.gif" Name = "c" border = 0 > < Img Src = "cb.gif" Name = "d" border = 0 > < Img Src = "cb.gif" Name = "e" border = 0 > < Img Src = "colon.gif" Name = "f" border = 0 > < Img Src = "cb.gif" Name = "g" border = 0 > < Img Src = "cb.gif" Name = "h" border = 0 > < Img Src = "cam.gif" Name = "j" border = 0 > < / a > |
То есть все картинки для часов заключены в общий контейнер-ссылку на портал, где мы скачали скрипт. Нужно заменить контейнер a на контейнер div и расположить на своем сайте это там, где вы хотите видеть часы. Наиболее подходящие места: подвал сайта или низ его боковой колонки.
Вот собственно и все. Так же можно установить скрипт слайдера для сайта html, поиск по сайту, календарь и многое-многое другое. Иногда такие вещи устанавливаются в виде jQuery-плагинов. Если вы используете популярную CMS, то для нее тоже есть множество плагинов, реализующих нужный функционал.
В общем, главное уметь искать эти самые скрипты, а их установка может очень отличаться в разных случаях. Итак, устанавливайте действительно полезные скрипты для своего сайта и продолжайте заходить на webformyself, потому что здесь для вас приготовлено еще много интересного о сайтостроении.
Это вводный курс по JavaScript для начинающих . Сегодня мы напишем нашу первую программу на JavaScript. Напомню, что программы на JavaScript называются сценариями или просто скриптами . Поехали!
Вы, наверное, сразу подумали про «Hello World!»? Нет! Это оставим для чайников. Напишем что-то более интересное. Но прежде давайте разберемся, в чем писать наш скрипт. На первых порах вам понадобится какой-нибудь простенький редактор кода. Я пользуюсь PSPad и всем его рекомендую. Это бесплатный текстовый редактор для программистов. Все!
Запускаете редактор, нажимаете Ctrl+N и выбираете, какой файл хотите создать. В длинном списке вы найдете и JavaScript, но он вам пока не нужен. Понадобится он лишь когда вы будете писать отдельные скрипты, вынесенные в отдельные файлы. Нам же сейчас нужна простая HTML страничка, куда мы сможем внедрить наш скрипт.
Поэтому переходим на вкладку Из шаблона , далее HTML и в выпадающем списке выбираем HTML5 . Мы же за современную веб-разработку, верно?
Внесем несколько исправлений и уберем все лишнее. В частности, исправим язык, уберем лишние кавычки и лишние строки, но добавим одну полезную строку, которая пригодится еще в будущем (viewport). Получим вот такую красотень:
alert("Что смотришь? Нажми скорее кнопку!");
Поздравляю!
Ну, красава! Ты справился. Возьми с полки пирожок. Ты уже шаришь в JavaScript!
Правда, ведь, ничего сложного? Подобные всплывающие окошки с предупреждением вы видели уже не раз и не два. Теперь вы знаете, откуда они берутся, и почему страницы не грузятся дальше, пока вы не нажмете на кнопку в окне предупреждения.
В следующий раз мы применим alert для проверки правильности заполнения полей формы обратной связи и познакомимся с понятием функции в JavaScript. Оставайтесь на связи!
Javascript
- это язык программирования, который встраивается в html код веб страниц для увеличения функциональности сайта. Javascript был разработан фирмой Netscape в сотрудничестве с Sun Microsystems на базе языка Sun"s Java. Java скрипты выполняются на стороне клиента, хотя изначально Liveware - прародитель Java Script, являлся серверным языком программирования.
С помощью JavaScript создаются
красивые
интерактивные
веб страницы
, чего нельзя сделать в чистом html языке. Как правило скрипты выполняются после того, как пользователь предпримет какие-либо действия: наведение курсора, клик и т.д. Java script
может выполняться и при загрузке веб страницы.
Писать Java скрипт
можно при помощи любого текстового редактора: блокнот, Notepad++, Dreamweaver . В последнем, кроме подсветки кода и подсказок реализована проверка синтаксиса написания javascript"а. Но для этого нужно знать язык, принцип написания функций, методы, свойства и т. д. А для просмотра понадобится только браузер, способный обрабатывать ява скрипты. Например, Mozilla Firefox со встроенным дополнением Firebug, при помощи которого можно просматривать работу самого javascript"а и Microsoft Internet Explorer (так как эти два браузера по-разному воспринимают javascript).
Кстати, не все скрипты одинаково отображаются в браузерах. Большая часть Java скриптов, которые можно скачать бесплатно в интернете «браузер опера до версии 12.16» вообще не поддерживает. При этом работа JS ни как не зависит от операционной системы: будь то Андроид, iOS, Windows или другие.
Ниже представлены готовые
Java
скрипты
, которые Вы можете
скачать
совершенно
бесплатно
и украсить ими свой сайт .
Javascript-код может размещаться, как на самой странице, так и в отдельном файле.
Пример размещения готового кода Javascript внутри HTML.
Сценарии, написанные на языке javascript, могут располагаться на самой html-странице между тегами , которые в свою очередь обычно находятся в тегах . У тега должен быть указан единственный параметр " type" , который и указывает тип написания скрипта:
Теоретически теги могут располагаться и в теле документа (в тегах ). Выполняться такой сценарий будет тогда, когда браузер "дочитает" страницу до этого места (до тегов ).
Если Вы не знаете язык Java script , то Вы можете бесплатно скачать готовый код скрипта и разместить его согласно выше описанному на своём сайте.
Пример размещения готового кода Javascript в отдельном файле.Создаём в любом текстовом редакторе страницу и сохраняем её как ....... .js . Далее скачиваем готовый Javascript код и помещаем в эту страницу. Сохраняем в той же папке, где и HTML. Теперь необходимо подключить Java скрипт к html странице. Для этого в HTML файле делаем соответствующую запись:
src="путь к файлу.... .js".
Теперь остаются только в нужном месте web страницы вызвать функцию, в которой описаны необходимые действия
имя функции - выполняется при загрузке страницы
ссылка - javascript будет выполняться при клике по ссылке.
Событие onLoadСобытие происходит после загрузки какого-либо елемента страницы.
Событие onClickСобытие происходит после щелчка мыши.
Событие onMouseoverСобытие происходит после наведения курсора на определенный объект страницы.
Событие происходит в тех случаях, когда курсор мыши уходит с объекта.
Язык JScript не требует дополнительной установки и входит в состав сервера , который в свою очередь, является частью операционной системы Windows . Что бы создавать JS скрипты, достаточно использовать простой блокнот, хотя лучше подойдет редактор Notepad++ (смотрите статью " "). Все скрипты JS сохраняются с расширением .js .
Синтаксис JScript языка чувствителен к регистру, поэтому, при объявлении переменных или при вызове методов стоит обращать внимание на регистр символов. Для комментирования одной строки, в начале прописывается двойная косая черточка (// ), что бы комментировать сразу несколько строк применяется конструкция /* … */ . При работе с переменными нет необходимости указывать их тип (более детально работу с переменными я разобрал в статье " "). Как и язык , синтаксис языка JScript позволяет подключать внешние объекты, что значительно расширяет его возможности.
Стоит обратить внимание, что хотя JS скрипты и являются разработкой компании Microsoft , но они практически идентичен сценариям языка JavaScript , так что те, кто уже знакомы с JavaScript, с легкостью освоят JScript.
Хорошо, со вступительной частью мы закончили, теперь можно приступить к программированию. Для примера, давайте рассмотрим следующий сценарий:
| //********************************
// пример простого сценария
// jscript_scripty.js
//*********************************
var
A,
a,
list=
""
,
WshShell;
var
my_var =
"это простая строка"
;
// массив
var
MyArr =
new
Array
(100
,
200
,
300
)
;
// Создаем экземпляр класса WScript.Shell
WshShell =
WScript.CreateObject
("WScript.Shell"
)
;
a =
24.5
;
A =
200
;
WScript.Echo
(a +
"\n
"
+
A)
;
WScript.Echo
(my_var)
;
for
(var
index=
0
;
index maxHeight) {
maxHeight = height;
}
});
return maxHeight;
};
Использование:
$(elements).height(getMaxHeight($(elements))); Чтобы использовать скрипт для ширины нужно заменить все включения height и Height на width и Width соответственно. 2. Эффективная проверка датИнструментарий JavaScript для работы с датами очень прост и не достаточен для форматирования дат. Хотя существует множество библиотек которые существенно облегчают обработку дат, часто нужно просто проверять дату в строке. Для такого случая отлично подходит следующий скрипт. Он позволяет проверить дату с любым разделителем и годом, указанным 4-мя цифрами. Function isValidDate(value, userFormat) {
// Используем формат по умолчанию, если ничего не указано
userFormat = userFormat || "mm/dd/yyyy";
// Находим разделитель исключая символы месяца, дня и года (в английском варианте - m, d, y)
var delimiter = /[^mdy]/.exec(userFormat);
// Создаем массив из месяца, дня и года,
// то есть мы знаем порядок формата
var theFormat = userFormat.split(delimiter);
// Создаем массив из даты пользователя
var theDate = value.split(delimiter);
function isDate(date, format) {
var m, d, y, i = 0, len = format.length, f;
for (i; i < len; i++) {
f = format[i];
if (/m/.test(f)) m = date[i];
if (/d/.test(f)) d = date[i];
if (/y/.test(f)) y = date[i];
}
return (m > 0 && m < 13 &&
y && y.length === 4 &&
d > 0 &&
// Проверяем правильность дня месяца
d Статьи по теме
Еще статьи из этой рубрики
|
