2018-01-21
1896
Пользовательские скрипты в браузере — это программы, написанные на JavaScript, выполняемые в браузере пользователя при загрузке страницы. Они позволяют автоматически заполнять формы, переформатировать страницы, скрывать нежелательное содержимое и встраивать желательное для отображения содержимое, изменять поведение клиентской части веб-приложений, добавлять элементы управления на страницу и т. д.
Для управления пользовательскими скриптами в MozillaFirefox используется расширение Greasemonkey; Operaи GoogleChrome предоставляют средства поддержки пользовательских скриптов и возможности для выполнения ряда скриптов Greasemonkey.
Серверные приложения
Приложения, написанные на JavaScript, могут исполняться на серверах, использующих Java 6 и более поздних версий[67]. Это обстоятельство используется для построения серверных приложений, позволяющих обрабатывать JavaScript на стороне сервера.
Помимо Java 6, существует ряд платформ, использующих существующие движки (интерпретаторы) JavaScript для исполнения серверных приложений. (Как правило, речь идёт о повторном использовании движков, ранее созданных для исполнения кода JavaScript в браузерах WWW.)
|
|
|
Практическая часть
В данной курсовой работе мы будет использовать бесплатную программу для создания сайта – Мини-Сайт. В этой программе мы можем подготовить основной шаблон нашего сайта, разметку блоков, размеры блоков, подготовить необходимые страницы и прочее.
За тематику сайта был взят официальный сайт ИФХиБПП РАН, сайт которого разработан на CMSJoomla!
При создании сайта разберем исходный код нашей главной страницы html и посмотри из чего она состоит.
Любая страница, написанная на языке htmlобязательно должна содержать следующие строки или тэги:
1. <html></html>
Данный код присутствует абсолютно в каждом документе, он говорит браузеру, что все, помещенное между этими тегами, является HTML кодом. Является корнем самого документа, все, что в дальнейшем присутствует за этим тегом, уже не включается в документ и не воспринимается браузерами. В самом начале документа тег открывается и в самом конце он обязательно должен быть закрытым.
2. <head></head>
Весь раздел этого тега содержит в себе всю техническую информацию документа. Как и предыдущий тег, head так же должен быть открыт и в конце закрыт. В такую информацию относится заголовок страницы, ее описание, ключевые слова для поисковых систем и кодировку. Про кодировку немного ниже.
3. <title></title>
Данный тег включается в head, он должен быть написан внутри тега head. Данный тег title является обязательным и должен присутствовать в каждом html документе. В добавок к этому он отображается как заголовок окна браузера. Длинна такого заголовка не должна превышать 60 символов. В тексте такого заголовка должна содержаться максимально полная информация, которая характеризует содержание страницы.
|
|
|
4. <meta>
После обязательного тега title, идет необязательный, но так же не мало важный тег meta. Данный тег является одинарным. С помощью данного тега задается описание для страницы (description) и ее ключевые слова (keywords).
Кроме этого, в теге meta могут содержаться данные про автора страницы и другие свойства метаданных. Можно запретить индексацию страницы в целом для поисковых машин. Поставить автоматическое обновление страницы через 20 секунд или через 5 секунд с последующим переходом на другую страницу.
Таких элементов meta может быть несколько, так как они могут нести абсолютно разную информацию. Остальные пользователи, когда открывают страницу в браузере, не видят все ваши описания, все это остается скрытым от глаз.
5. <body></body>
Говорит браузеру, что все помещенное между этими тегами, должно отобразиться в окне вашего браузера. Вот основные теги, которые могут присутствовать абсолютно в каждом документе. Тег body служит в качестве основного тела страницы, который включает в себя все ее содержимое. Данный тег желательно открывать и в конце документа не забыть закрывать.
6. Элемент Doctype
В каждом документе так же должен быть указан вот такой элемента doctype. Для чего он нужен и что в нем должно быть. Обычно народ сильно не увлекается этими строчками, копируют себе в документы и работают спокойно. Данные элементы говорят браузеру, какая версия html используется в документе, какое описание страницы, какая используется кодировка, какие ключевые слова включены, кто автор и как называется страница.
Ставятся они обычно в самом начале. Существует несколько вариантов и все они отличаются друг от друга, я напишу один пример, который используется чаще всего. Данную заготовку можно использовать как готовый шаблон. Далее будет понятное описание каждой строчки, проблем с этим быть не должно.
Так выглядит главная страница сайта.
Основная структура сайта построена. Остальные страницы нашего сайта состоят из тех же основных тэгов с добавлением других, которые необходимы для красивого оформления, создания таблиц, создания меню, подключения Java скриптов и так далее.
Теперь немного слов о JavaScript.
1. Для того чтобы внедрить код JavaScript в html документ, достаточно прописать его внутри тэга <script></script>. Например:
<scripttype ="text/javascript">
//Код JavaScript
</script>
2. Для того чтобы подключить отдельный файл кода JavaScript, достаточно прописать следующий код:
<script type ="text/javascript" src ="myscript.js">
</script>
3. Теперь напишем традиционный первый скрипт, который покажет нам как работает JavaScript. Для этого создадим произвольный html документ следующего содержания:
<!DOCTYPE HTML>
<html>
<head>
<title>Первый скрипт, написанный с использованием JavaScript</title>
</head>
<body>
<p>Начало документа...</p>
<scripttype ="text/javascript">
document.write("Этот текст написан с использованием JavaScript");
</script>
<p>...Конец документа</p>
</body>
</html>
Метод document. write () - предназначен для вывода в документ строки, указанной в качестве параметра данного метода. Если данный метод вызывается в процессе загрузки документа, то он выводит строку в текущем месте.
Теперь перейдем к рассмотрению нашего сайта и кода.
Как я уже говорил, JavaScript можно внедрить в html страницу двумя способами:
1. Разместить код JavaScript внутри тэгов.
2. Подключить отдельный файл JavaScript в котором находится сам код JavaScript.
Рассмотрим первый вариант.
На главной странице нашего сайта в левом блоке расположена ссылка на примеры использования JavaScript. Если перейти по этой ссылке, то первое что мы увидим, это всплывающее окно с надписью: “Всплывающее окно”. Это первый пример JavaScript. Исходный код следующий:
|
|
|
<p><h4>Пример 1. Всплывающие сообщение.</h4></p>
<scripttype='text/javascript'>
alert('Всплывающее окно');
</script>
<br/>
<p>Нажмите на ссылку:</p>
<a href="" onclick="return confirm('Перейтипоссылке?');">Ссылка</a>
Здесь основная операция это alert, она выводит модальное окно с сообщением. Посетитель не сможет продолжить работу, пока не нажмет на кнопку "ОК" в модальном окне.
Следующий пример JavaScript это изменение цвета окна при наведении на нее мыши. Исходный код следующий:
<divstyle="float:left; height: 46px; width: 190px; background: white; border: 1px solid #000; padding-top: 20px" onMouseOver="this.style.background='#F00'" onMouseOut="this.style.background='#fff'">Красный</div> <divstyle="float:left; height: 46px; width: 190px; background: white; border: 1px solid #000; padding-top: 20px" onMouseOver="this.style.background='#0f0'" onMouseOut="this.style.background='#fff'">Зеленый</div> <divstyle="float:left; height: 46px; width: 190px; background: white; border: 1px solid #000; padding-top: 20px" onMouseOver="this.style.background='#00f'" onMouseOut="this.style.background='#fff'">Синий</div> Здесь задаются такие параметры как расположение блоков, высота и ширина, изначальный цвет, изменение цвета при наведении мышью.
Следующий пример использования JavaScript это изменение текста при нажатии на кнопку “Заменить”. Исходный код следующий:<pid="myPar">Замена параграфа.</p><divid="myDiv">Замена элемента div.</div><buttontype="button" onclick="myFunction()">Заменить</button><script>functionmyFunction(){document.getElementById("myPar").innerHTML="Новыйпараграф";document.getElementById("myDiv").innerHTML="Новыйтекствэлементе div";}</script> В этом скрипте основная операция это getElementById. Эта функция ищет элементы в HTML-документе, по значению их атрибута id="значение". Свойство innerHTML учитывает стили элементов, а именно отображается элемент или нет, а, следовательно, и его содержимое в браузере. 
Последний пример JavaScript это небольшая анкета, при заполнении которой скрипт выдает Вам информацию, которую Вы вводили. 
При нажатии на кнопку “Отправить”, у нас получается следующее: Теперь рассмотрим второй вариант использования JavaScript с подключением отдельного файла highslide.js Данный скрипт увеличивает и уменьшает изображение при его нажатии. Примером может служить Фотогалерея сайта. 
Здесьмыподключаем<scripttype="text/javascript" src="highslide.js"></script> 
И соответственно при нажатии на изображение идет запрос к файлу highslide.js <TR><TD><Aonclick="return hs.expand(this)" class=highslidehref="pics/fotogalereya000003e.jpg"><IMGid=fotogalereya000003 title="" hspace=0 alt="" src="pics/fotogalereya000003.jpg"></A></TD><TD><Aonclick="return hs.expand(this)" class=highslidehref="pics/fotogalereya000004e.jpg"><IMGid=fotogalereya000004 title="" hspace=0 alt="" src="pics/fotogalereya000004.jpg"></A></TD></TR>
|
|
|
