JavaScript — Урок 4. Создание JavaScript-функций
Функция — это именованная последовательность операторов (инструкций). Любая функция имеет следующий синтаксис:
function имя () оператор;
.
оператор;
>
Сначала идет ключевое слово function, затем имя функции, затем в круглых скобках перечисляются параметры (если они есть), затем в фигурных скобках перечисляются операторы, т.е. последовательность выполняемых действий. Каждый оператор заканчивается точкой с запятой.
Как создать Javascript (js) файл.
Многие начинающие веб-программисты, когда они начинают изучать Javascript, сталкиваются с проблемой:
Как создать файл с расширением js, в котором будет размещаться javascript код?
Помню, как я тоже на первых порах столкнулся с этой проблемой. Такой вопрос может возникать из-за непонимания того, что собой представляет Javascript код.
В первую очередь, нужно понимать, что javascript – это обычный текст, который написан по определенным правилам. Соответственно, храниться этот текст тоже должен в текстовом документе.
Единственное отличие этого текстового документа от простого текстового файла – это его расширение. Javascript файлы имеют расширение *.js.
Таким образом, вся задача состоит в том, чтобы создать текстовый документ и изменить его расширение.
Хочу рассказать о тех способах создания файла с расширением js, которыми я сам лично пользуюсь.
Все мои уроки по Javascript здесь.
Способ 1. Создание файла js из обычного текстового документа.
Открываем программу «Блокнот», которая входит в стандартный пакет операционной системы Windows.
Если у вас этой программы нет, то можете воспользоваться другим текстовым редактором.
Создаем новый документ и сохраняем его, выбрав в главном меню команду «Файл-сохранить как…»
После того, как файл будет сохранен, нужно открыть папку, где вы его сохранили и переименовать файл, изменив его расширение на js.
Если расширение файлов у вас не отображается, то здесь можно почитать, как его можно включить.
После этой операции, файл для работы с Javascript готов.
Способ 2. Создание файла js в редакторе кода Dreamweaver.
Этим способом я пользуюсь намного чаще, по причине того, что это просто быстрее и удобнее. Создать файл js можно с помощью универсального редактора кода Dreamweaver.
Имейте в виду, что Dreamweaver – это далеко не единственная программа, которая на это способна. Очень многие редакторы кода тоже позволяют также создавать файлы с расширением js.
При первом запуске программы, появляется следующее окно, в котором можно выбрать, что мы хотим создать документ js.
Выбираем его и сохраняем документ.
Если такое окно приветствия у вас не открылось, то можно воспользоваться главным меню «Файл – Создать новый документ» и выбираем «Javascript».
Если у вас возникнут какие-то вопросы или проблемы с созданием, файлов js таким способом, прошу написать об этом в комментариях.
Что такое Java — скрипт?
Те, у кого уже имеется свой сайт или кто только на начальной стадии создания веб — сайта, появляется необходимость в использовании Java — скриптов.
Что — же такое Java скрипты (JavaScript) ?
Для программистов, Язык Java в комментариях не нуждается, а для начинающего , можно объяснить
так, — «это команда которую выполняет ваш браузер, написана на языке Java».
Скрипт — является собственно командой (сигналом), для каких — либо действий.
Пример — (подводя курсор мыши, к определенной области на сайте, будь то ссылка или рисунок, мы можем увидеть подсказку, комментарий или любое другое действие, которое запрограммировано в скрипте).
На сайте, собраны самые необходимые примеры Java — скриптов, которые вы можете
посмотреть и скачать, все они бесплатны, пользуйтесь на здоровье.
Одни скрипты работают только с Интернет эксплоером, версии IE5, IE6, IE8., когда другие Java — скрипты, интегрируются со всеми обозревателями. Изучить работу скриптов, скачать и найти учебную литературу по скриптам, и все остальное, можно на сайте Создаем свой сайт . Задача в данного раздела научить вас некоторым способам установки скриптов в наш html-документ.
Код скрипта может внедряться напрямую в код вашего html-документа используя специальный тэг SCRIPT:
<script type=»text/javascript»>
. код скрипта.
</script>
</body>
</html>
Атрибут type определяет тип содержимого (язык скрипта, в данном примере описано, что будет использоваться Javascript).
Но, скрипт может быть вынесен и в файл, потом из которого он будет подгружаться.
А значит, надо указать путь к этому файлу, при помощи атрибута src:
<html>
<head>
<title>Документ со скриптом</title>
<script type=»text/javascript» src=»http://создаем-свой-сайт.рф/%D0%BF%D1%83%D1%82%D1%8C%20%D0%BA%20%D1%81%D0%BA%D1%80%D0%B8%D0%BF%D1%82%D1%83/»></script>
</head>
<body>
<script type=»text/javascript»>
. код скрипта.
</script>
Сразу видно, что из тела документа убран html-код для внедрения скрипта. Это не ошибка, это может быть часть скрипта, без которой он не будет работать. Или же это может быть еще один скрипт, который вы внедрили в Ваш документ (т.е. в итоге получили два скрипта на один html-документ).
Как создать джава скрипт
JavaScript — язык программирования, который проистекает из языка Java, но существенно проще его. Язык возник в результате объединения усилий компаний Netscape, создавшей первый вариант языка под названием LiveScript и фирмой Sun, создавшей сам язык Java. Результатом их совместной деятельности и стал новый язык JavaScript, название которого и взято из названий языков-родителей. Название было придумано, следуя исключительно коммерческим интересам, и говорить о четком наследовании языком JavaScript свойств Java не следует.
JavaScript существенно расширяет возможности при разработке web-страниц. Например, с его помощью можно открывать фотографию в отдельном окне без панели инструментов, строки состояния и адреса страницы, что позволяет более рационально использовать площадь экрана монитора. Так же можно решить проблемы с использованием в HTML-документах фреймов, из-за которых их применение считается дурным тоном. Но обо всем этом потом, начнем все по порядку.
Расположение скрипта в HTML-документе.
Код программы JavaScript, как правило, размещается непосредственно в HTML-документах. Его можно записывать в любом месте HTML-страницы. В некоторых случаях целесообразно записать одну часть программы в одном месте (например, в заголовке — элементе <HEAD>), а другую — ниже. Это бывает необходимо, когда сначала описывается функция, а затем в теле HTML-страницы эта функция вызывается. В любом случае текст фрагмента программы заключается в элемент-контейнер <SCRIPT>. Кроме того, для того чтобы скрыть текст программы от старых версий браузера, необходимо заключить этот текст в контейнер — комментарий HTML <!—. . —>. Но поскольку в языке JavaScript имеется оператор, начинающийся с двойного минуса, необходимо последнюю строку контейнера записать в виде комментария JavaScript: //—>. В итоге все это должно выглядеть следующим образом:
Так же код JavaScript можно хранить в отдельных файлах. Определяется файл как источник операторов с помощью атрибута SRC тэга <SCRIPT> следующим образом:
Внешние файлы JavaScript должны содержать только JavaScript определения функций и операторы, в них не может быть HTML-тэгов.
Понятие функции.
Функция JavaScript — это подпрограмма, которая выполняется в ответ на возникновение какого-либо события. Вначале функцию необходимо определить. Формальный синтаксис описания функции следующий:
Использование функций мы рассмотрим на примере открытия окон.
Создание окон в JavaScript
Для создания новых окон используется метод open() объекта window. Формат вызова данного метода имеет следующий вид:
Параметры вызова метода имеет следующие значения:
При создании нового окна можно задавать отображение тех или иных элементов окна. Значения , с помощью которых это выполняется, представлены в таблице:
| Элемент | Значение | Описание |
| directories | yes|no, 1|0 | Позволяет отобразить либо скрыть строку каталогов |
| height | pixels | Указывает начальную высоту окна |
| left | pixels | Указывает начальное расстояние между окном браузера и левой границей рабочего стола |
| location | yes|no, 1|0 | Позволяет отобразить либо скрыть строку адреса |
| menubar | yes|no, 1|0 | Позволяет отобразить либо скрыть строку меню умолчанию |
| resizable | yes|no, 1|0 | Определяет, можно ли изменить размеры окна |
| scrollbars | yes|no, 1|0 | Позволяет отобразить либо скрыть полосы прокрутки для документа |
| status | yes|no, 1|0 | Позволяет отобразить либо скрыть строку состояния |
| toolbar | yes|no, 1|0 | Позволяет отобразить либо скрыть панель инструментов |
| top | pixels | Указывает начальное расстояние между окном браузера и верхней границей рабочего стола |
| width | pixels | Указывает начальную ширину окна браузера |
Ниже приведен пример кода, который открывает страницу в новом окне размером 400×300 пикселов, которое не имеет ни строки статуса, ни панели инструментов, ни меню:
Чтобы посмотреть результат действие данного примера нажмите на эту кнопку:
В данном примере, новое окно открывается в результате нажатия на кнопку. Но часто необходимо открывать такое окно, нажатием на ссылку. Ссылка для вызова нашей функции будет выглядеть следующим образом:
А вот так работает эта ссылка.
Динамическое создание документов
Теперь рассмотрим, как с помощью JavaScript можно динамически создавать новые документы. То есть новая HTML-страницы будет формироваться в зависимости от различных ситуаций по заданным вами параметрам. Например, бывает необходимо оптимизировать страницу для различного разрешения экрана. Или вам захотелось, чтобы вид документа менялся в зависимости от определенной даты. Но для начала мы создадим простой HTML-документ, который будет выводиться в новом окне. Рассмотрим следующий скрипт: результат работы данного примера —
В данном примере формирование нового документа выполняется функцией NewWin(). Рассмотрим ее действие. Сначала с помощью метода open() открывается новое окно браузера. Первый параметр метода является пустой строкой («»), так как мы не желаем в данном случае указывать конкретный адрес URL. После того, как мы открыли окно, наступает очередь открыть для записи объекта document. Делается это с помощью команды:
Здесь мы обращаемся к open() — методу объекта document. Однако это совсем не то же самое, что метод open() объекта window. Эта команда не открывает нового окна — она лишь готовит document к предстоящей печати. Кроме того, мы должны поставить перед document.open() приставку NewDoc, чтобы получить возможность писать в новом окне. В последующих строках скрипта с помощью вызова document.write() формируется текст нового документа:
Как видно, здесь мы записываем в документ обычные тэги языка HTML. То есть мы фактически генерируем разметку HTML. При этом Вы можете использовать абсолютно любые тэги HTML. По завершении этого мы обязаны вновь закрыть документ. Это делается следующей командой:
Теперь нам только остается в нужном месте вызвать функцию командой
Теперь, научившись открывать окна без лишних элементов, давайте переделаем фотоальбом, используя возможности JavaScript.