Учимся писать userscript’ы
Доброго времени суток всем желающим приобщиться к миру пользовательских скриптов (они же userscript, userJS, юзерскрипты).
В этой статье я хочу поведать о том, что такое юзерскрипты, c чем их едят и, главное, как их готовят!
Внимание: предполагается минимальное знание javascript.
На практике доказано: юзерскрипты может писать человек, не знакомый с программированием, но обладающий усидчивостью и желанием изучить javascript!
О том, что такое javascript и как с ним обращаться, можно узнать на javascript.ru.
Что такое юзерскрипты?
Кратко: юзерскрипт — это программа, написанная на языке JavaScript, хранящаяся на компьютере пользователя и подключаемая браузером на определенных страницах. Юзерскрипт представляет собой файл с расширением .user.js (именно по расширению браузеры понимают, что файл является юзерскриптом), содержащий метаданные и непосредственно javascript-код.
При подключении к странице юзерскрипт выполняется так же, как и обычные javascript-сценарии.
У юзерскрипта есть доступ к DOM-дереву страницы, в контексте которой он выполняется.
В современных браузерах у юзерскрипта есть доступ к localStorage и прочим HTML5 API.
Юзерскрипты поддерживаются всеми основными современными браузерами (и даже кое-как поддерживаются IE7 и выше).
Самый известный портал юзерскриптов — userscripts.org. Тут можно найти хранилище скриптов, инструменты управления своими скриптами на портале и, что не маловажно, отзывчивый форум (всё на английском).
Немного общей теории
Самыми распространенными являются скрипты под расширение GreaseMonkey для браузера Firefox.
Подробную информацию по GreaseMonkey и написанию юзерскриптов под GreaseMonkey можно узнать на http://wiki.greasespot.net.
Так сложилось исторически, что данный браузер был (и остаётся по сей день) первым, в котором поддержка юзерскриптов была выполнена на высоком уровне.
Не все скрипты, написанные для GreaseMonkey, могут запускаться в других браузерах. Причина в криворукости том, что во многих скриптах используется GM API — набор javascript-функций, специфичных для GreaseMonkey.
- Простым скриптам не нужна поддержка GM API (библиотека, доступная в GreaseMonkey)
- Google Chrome, в отличие от Firefox+GreaseMonkey, имеет отличнейший дебаггер.
- Сообщения об ошибках юзерскрипта в Firefox ужасны! Если вы не обладаете
даром телепатиитвердыми знаниями GreaseMonkey и javascript, написание юзерскрипта может превратится в муки! - Google Chrome не требует расширений для поддержки юзерскриптов. Интерфейс для удаления/отключения юзерскриптов доступен «из коробки».
- Нет доступа к «родному» window.
- Не поддерживается директива @ include метаданных. Директива @ match глючит, можно сказать, что она тоже не поддерживается.
Особенности юзерскриптов
Код юзерскриптов может посмотреть любой желающий, вооруженный блокнотом.
Базовые знания javascript позволяют отсечь угрозу установки шпионских и вредоносных скриптов простым анализом кода скрипта (придётся задействовать мозг).
Важно:Если вы не доверяете автору скрипта, главное удостовериться, что скрипт не отсылает пользовательские данные (куки, вводимый текст) на сторонние сервисы!
Все юзерскрипты запускаются после того, как загрузились все основные элементы страницы, но ещё не загрузились картинки. Можно сказать, что юзерскрипты грузятся по событию DOMContentLoaded.
В любом случае, проверки на window.onload не нужны.
Каждый браузер накладывает свои ограничения на исполнение юзерскриптов, но в целом юзерскрипты могут делать почти всё, что могут скрипты на странице.
Чаще всего юзерскрипты используются для изменения интерфейса страницы или для добавления плюшек, блекджека и шлюх(юзерскрипты для социальных сетей).
Бывают и продвинутые юзерскрипты, которые представляют собой самостоятельные программы (аукционные и игровые боты, плагины-помощники и т.д).
Анатомия юзерскриптов
Юзерскрипт — это текстовый файл с расширением user.js. В начале файла располагается блок метаданных — описание самого скрипта. После блока метаданных следует javascript-код, который и будет исполняться браузером.
Рассмотрим тестовый скрипт, который показывает alert с текстом на определенной странице.
// ==UserScript== // @name myUserJS // @description Мой самый первый юзерскрипт // @author Vasya Pupkin // @license MIT // @version 1.0 // @include http://userscripts.org/* // ==/UserScript== // [1] Оборачиваем скрипт в замыкание, для кроссбраузерности (opera, ie) (function (window, undefined) < // [2] нормализуем window var w; if (typeof unsafeWindow != undefined) < w = unsafeWindow >else < w = window; >// В юзерскрипты можно вставлять практически любые javascript-библиотеки. // Код библиотеки копируется прямо в юзерскрипт. // При подключении библиотеки нужно передать w в качестве параметра окна window // Пример: подключение jquery.min.js // (function(a,b))(w); // [3] не запускаем скрипт во фреймах // без этого условия скрипт будет запускаться несколько раз на странице с фреймами if (w.self != w.top) < return; >// [4] дополнительная проверка наряду с @include if (/http:\/\/userscripts.org/.test(w.location.href)) < //Ниже идёт непосредственно код скрипта alert("Userscripts приветствует вас навязчивым окном."); >>)(window);
Важно: данный скрипт представляет собой оболочку для кроссбраузерных юзерскриптов. Этот же скрипт, но с английскими комментариями, можно стянуть с pastebin.com и использовать безнаказанно.
В самом начале располагается блок метаданных (в виде комментария).
// ==UserScript== // . // ==/UserScript==
Этот блок состоит из директив описания юзерскрипта. Ниже в таблице представлены основные директивы и их назначение.
Важно:Все директивы, как и сам блок метаданных, могут отсутствовать.
Директива | Назначение |
---|---|
@ name | Название юзерскрипта. Это название будет отображаться в интерфейсе управления юзерскриптами. Если директива отсутствует, то название юзерскрипта будет таким же, как и название файла. |
@ description | Описание юзерскрипта. Это описание будет отображаться в интерфейсе управления юзерскриптами. |
@ namespace | Пространство имён. Определяет уникальность набора скриптов. Сюда можно вписать имя домена, принадлежащего вам. Или любую другую строку. Считайте, что это второе название скрипта. Обязательная директива для Trixie! |
@ author | Имя автора. |
@ license | Название лицензии, по которой распространяется юзерскрипт. |
@ version | Номер версии юзерскрипта. К сожалению, механизма автообновления нету ни в одном браузере, поэтому номер версии — это просто цифры, которые отображаются в интерфейсе. |
@ include | Директива описания url страницы, на которой нужно запускать юзерскрипт. Поддерживает вайлдкард *(применимо в GreaseMoneky, Opera, IE). Для каждого отдельного url нужно использовать отдельную директиву @ include. |
@ exclude | Директива описания url страницы, на которой не нужно запускать юзерскрипт. Поддерживает вайлдкард *(применимо в GreaseMonkey, Opera, IE). Для каждого отдельного url нужно использовать отдельную директиву @ exclude. |
@ match | Аналогично @ include, но с более жесткими ограничениями (применимо в GreaseMonkey старше 0.9.8, Google Chrome). Подробнее об ограничениях и формате директивы можно прочитать на этой странице. Для каждого отдельного url нужно использовать отдельную директиву @ match. |
Важно: Как показала практика, полагаться на директиву @ match в юзерскриптах не стоит.
Google Chrome периодически отказывается учитывать @ match
и запускает юзерскрипты на всех страницах.
Для предотвращения такой ситуации в юзерскрипты,
которые будут запускаться не только в Firefox,
нужно добавлять код проверки адреса страницы (см. ссылку [4] в коде юзерскрипта) .
Важно: При отсутствии директив @ include или @ match, юзерскрипты будут запускаться на всех страницах.
- Для того, чтобы юзерскрипты имели одинаковое поведение и не загрязняли глобальную область видимости, код оборачивается в замыкание (см. [1] в коде скрипта) .
- Для правильного подключения библиотек внутри юзерскрипта и для обхода некоторых хитрых особеннойстей GreaseMonkey, необходимо «нормализовать» ссылку на глобальную область видимости window (см. [2] в коде скрипта) .
- Для того, чтобы юзерскрипт не запускался несколько раз на одной и той же странице, необходимо останавливать работу при запуске юзерскрипта во фреймах (см. [3] в коде скрипта) .
- Для того, чтобы юзерскрипт запускался только на нужных нам страницах, необходимо явно проверять url страницы (см. [4] в коде скрипта) .
- Благодаря такой структуре, юзерскрипт может быть относительно просто преобразован в букмарклет.
Результат
Наш юзерскрипт готов к использованию!
Нет, серьёзно, вы можете скопировать код юзерскрипта в файл, назвать его my.user.js, и закинуть полученный файл в браузер (используйте Chrome или Firefox с установленным GreaseMonkey).
Конечно, наш юзерскрипт не обладает серьезными функциями, код выглядит страшным и малопривлекательным (для непосвященного человека). Но в итоге мы получили заготовку для кроссбраузерных юзерскриптов.
Это значит, что юзерскрипт можно запустить практически в любом современном браузере!
И это замечательно!
- Зарегестрироваться на портале userscripts.org и загружать скрипты туда.
- Завести репозиторий на code.google.com или github.com.
- Создать свой простой сервис/сайт/страничку.
Важно:Если хотите, чтобы у пользователей GreaseMonkey автоматически открывался диалог установки юзерскрипта, отдавайте файл прямиком с файловой системы (url файла должен заканчиваться на .user.js). В противном случае пользователь увидит исходный код скрипта и панель с кнопкой «установить». Эта кнопка не работает!
- Придумываем, что будет делать наш юзерскрипт (перекрашивать ссылки, например)
- Берём шаблон из статьи
- Сохраняем в файл my.user.js
- Удаляем строку с alert(. ).
- Идём на форум (userscripts.org или любой форум по javascript).
- Спамим, флудим и достаём людей вопросами «как перекрашивать ссылки», «дайте код» и т.д.
- Изменяем метаданные и проверку url страницы на нужные нам.
- Вставляем полученный на форуме код в юзерскрипт.
- Сохраняем файл.
- .
- PROFIT!!1!
- Userscripts.org
- wiki.greasespot.net
- Userscript -> Firefox Extension Compiler
- Writing userscripts
- Правила директивы @ match
- » Учимся писать userscript’ы
- Userscripts. Углубляемся.
- Userscripts. Упаковываем юзерскрипт для Chrome
- Usersctripts. Кроссдоменные запросы
P.S. Хотелось бы увидеть блог Userscripts на хабре. Ибо не одним GreaseMonkey едины.
Основы работы со скриптами
В программирование существует такое понятие как «скрипт». Рассмотрим этот термин более тщательно.
На практике наличие скриптов облегчает задачу пользователю и программному обеспечению (браузеру) при обработке информации. В данной статье будет рассказано о скриптах, истории их развития, а также о сферах применения. Рассмотрим также ключевые моменты создания подобных элементов.
Определение
Script (скрипт) – это понятие, которое в программировании указывает на последовательность команд (алгоритм), необходимый для выполнения тех или иных задач. Представлен небольшим программным кодом на выбранном языке программирования.
Scripts – это готовые сценарии. Писать их необходимо вручную. Для этого предстоит выбрать специализированный язык программирования. Их много, но среди ключевых – это Lua и JavaScript. С его помощью удается писать функциональные и красивые сайты.
Работать со скриптами очень легко, особенно если заранее выучить выбранный скриптовый язык. У сценариев несколько сфер применения и назначений.
Немного истории
История развития scripting началась давно. Классической «начальной точкой» является зарождение и развитие JavaScript. Это – основной скриптовый язык, который пользуется огромным спросом по сей день. На нем пишут не только сайты, но и полноценные веб-программы.
JS появился в 1999 году. Тогда он назывался иначе – LiveScript. Предшественники у языка были, но они не пользовались спросом из-за низкого уровня функциональности, а также небольшого финансирования. LiveScript был создан компанией Netscape. Чуть позже за этот язык взялась корпорация Microsoft.
А за счет трудов W3C JS получил единые рекомендации к написанным кодам, а также собственные стандарты. При помощи соответствующего языка сегодня составляются разнообразные веб-технологии, клиент-серверные модели и даже небольшие игры и веб программы.
Назначение
Пишутся скрипты для конкретных целей. У соответствующих сценариев есть определенное назначение:
- Обращение и манипулирование базами данных. Хранилища информации связываются друг с другом, а также с интерфейсом сайта. Это происходит на постоянно основе. Для соответствующей задачи обычно используется язык PHP.
- Создание гостевых книг и комментариев.
- Сбор статистики. Использовать скрипты можно для создания счетчиков и аналитических систем.
- Загрузка информации на сайте без обновления динамическим способом.
- Динамическое отображение компонентов веб-странички.
Еще одной сферой использования сценариев является продвижение. Соответствующие операции помогают автоматизировать рекламу и SEO-оптимизацию. Обычно программист использует для соответствующих задач скрипты для CMS. Такие компоненты носят название шаблонов.
Особенности
Что такое скрипт (и его значение) понятно. Нужно использовать такой компонент, когда разработчик планирует писать «для интернета». Пример – браузерные приложения или клиент-серверные модели.
У scripts есть свои преимущества и недостатки. Если не знать о них, то результат разработки может привести к серьезной ошибке обработки информации.
Сильные стороны
К плюсам скриптов на выбранном языке относят:
- Простоту внесения корректировок. Особенно это относится к ситуациям, когда разработчик создает единое приложение, а не множество сценариев. Небольшая ошибка способна привести к полному краху системы. Скрипты позволяют обнаружить неполадки в приложении и исправить их оперативно, без существенных последний. Для этого не потребуется менять сложные структуры – лишь записать необходимые «нововведения» в один скрипт или его часть.
- Увеличение скорости решения поставленных изначально задач. Даже небольшие скрипты по своей функциональности не уступают крупным сложным программам. А обрабатываются они намного быстрее. Они выполняют сложные операции в виде простых команд.
- Кроссплатформенность. Сценарии легко переносятся с одной платформы на другую.
Работать с рассматриваемыми компонентами достаточно легко. Процесс написания сценария отнимает минимум времени и сил даже у новичков.
Слабые стороны
В веб-разработке рассматриваемый компонент не имеет аналогов. Несмотря на то, что работать со сценариями на выбранном языке программирования легко, они имеют недостатки:
- Медленная работа. Особенно если сравнивать с компилируемыми языками программирования. Это необходимо учитывать при разработке того или иного проекта. Большие «готовые шаблоны» обрабатываются дольше.
- Отсутствие для некоторых scripts интегрированной среды разработки. Соответствующий минус в веб-разработке не столь принципиален, но его все равно необходимо учитывать.
- Небольшое количество настоящих профессионалов в сфере написания сценариев.
Последний недостаток связан с тем, что скриптовые языки обычно легко учатся. Это порождает больше новичков в выбранном направлении, которые не всегда готовы совершенствоваться и развиваться.
Типы скриптовых языков
Значение скриптинга и сценариев понятны. Теперь нужно выяснить, какие виды соответствующих языков встречаются. Каждый вариант используется для отдельных случаев:
- Командно-сценарные. Их нужно использовать для выполнения различных действий в пределах операционных систем. Сюда можно отнести работу с консолью.
- Встроенные. Носят название прикладных. Нужны для того, чтобы обрабатывать конкретные задачи. Обычно выступают внутренними языками системы. Пример – AutoLISP, который широко распространен в AutoCad.
- Общего назначения. Языки, используемые для выполнения разнообразных задач. Именно таким является JavaScript.
Последний вариант чаще всего встречается на практике. Он подойдет для веб-разработки и создания клиент-серверных моделей.
Примеры скриптовых языков
В качестве примеров языков сценариев можно привести не только популярный JS. Спросом пользуются такие варианты как Python, Jscript, а также PHP.
В 2000-х годах появился некий Perl. Он тоже известен, но на практике применяется реже. Менее распространен AngelScript, нацеленный на работу с приложениями.
Все языки сценариев – это высокоуровневые варианты. Преимущественно являются интерпретируемыми. Большинство – мультипарадигменные. Они поддерживают одновременно несколько моделей написания кодов, делая их более удобными, функциональными, совершенными.
Скрипты и продвижение
Значение сценариев понятно. Такие шаблоны играют особую роль в продвижении:
- Повышение юзабилити сайтов. При грамотном применении шаблонов можно улучшить поведенческие факторы. Динамически подгружаемое содержимое и слайдеры – скрипты, которые максимально удобны пользователям.
- Авторизация основной массы рутинной работы. Пример – публикация новых постов или генерация метатегов. Заскриптованные алгоритмы намного быстрее справляются с поставленными задачами, чем специалисты. Это экономит один из самых важных ресурсов – время.
- Имитация пользовательского поведения. Для продвижения соответствующий момент крайне важен. Запрограммировать удается практически любое поведение потенциального клиента.
Для организации рутинной работы и рекламы тоже можно использовать всевозможные сценарии. Это способствует оптимизации и автоматизации. Благоприятно сказывается на деятельности всей компании.
Как создать
Создание первых скриптов – не слишком сложное занятие. Для этого разработчику потребуется:
- Выучить тот или иной язык программирования.
- Определиться с тем, что будет выполнять шаблон. А именно – поставить какую-то цель.
- Написать программный код. Можно – в специализированной среде, а можно – непосредственно в блокноте или текстовом редакторе.
Звучит легко. И это на самом деле так. Некоторые программисты используют готовые сценарии – они просто переписывают их. Остальные предпочитают создавать все «с нуля». Здесь пригодятся такие знания как:
- переменные и их использование;
- работа со строками;
- циклы.
У JavaScript есть библиотека с готовыми шаблонами. Она помогает быстрее подстраивать сайт или приложение под собственные нужды. Вот эта библиотека.
Пример
Писать скрипты – это значит создавать при помощи специализированных языков специальные алгоритмы. Они считываются системой (браузером) и реализуются.
В качестве примера можно взять форму отправки. Это – обратная связь с пользователем на выбранном сайте. Для функционирования такой функционал использует скрипты. В форме обратной связи клиент должен указать:
- свои личные данные;
- контакты для связи;
- непосредственный текст сообщения.
В текстовом редакторе код скрипта будет выглядеть так:
Это – пример на HTML. После того, как клиент нажмет на кнопку «Отправить», произойдет передача управления формой PHP-script. Он получит данные, сохранит их в имеющуюся базу, а затем выведет на экран сообщение об успешной отправке формы.
Выучить любой «язык сценариев» можно самостоятельно. Но быстрее справиться с этой задачей помогут специализированные компьютерные онлайн курсы. Программы рассчитаны на широкую аудиторию, есть возможность выбора занятий в зависимости от имеющегося опыта. При успешном завершении обучения клиенту будет выдан электронный сертификат, подтверждающий навыки в соответствующей области.
Хотите освоить современную IT-специальность? Огромный выбор курсов по востребованным IT-направлениям есть в Otus !
Скрипты: что это, виды и как пользоваться
Занимаясь повседневными задачами по сайту, многие часто сталкиваются с понятием “скрипт”, при этом не всегда до конца понимая, что оно на самом деле означает.
В этой статье разбираем подробно, что такое скрипты, для чего они нужны и какие они бывают.
Что такое скрипт и как он работает
Простыми словами, скрипт – это набор команд, прописанных в коде, которые необходимы для выполнения задачи. Именно скрипты делают так, что действия на сайте работают по заданному сценарию. К примеру, если пользователь на вашем сайте нажмет кнопку “Заказать”, а скриптов нет, то ничего не произойдет.
Скрипты могут быть как небольшими, выполняя простые задачи, так и объемными, которые анализируют данные и представляют готовый результат на сайте. Сам скрипт обычно размещается в текстовом файле, поэтому его легко редактировать.
Сам скрипт выглядит как строки кода:
Условно принцип работы скрипта выглядит следующим образом:
- Посетитель сайта совершает действие
- Информация поступает на сервер
- На сервере происходит запуск файла скрипта и обработка
- Выбирается нужный ответ по сценарию
- Информация с сервера возвращается на устройства пользователя, совершается ответное действие
Скрипты используют для продвижения и улучшения качества сайта (его внешнего вида, юзабилити и т.д). Дальше рассмотрим более подробно, для чего нужен скрипт и какие задачи помогает решить.
Как появились скрипты: немного истории
Скрипты появились в 1960-хх годах – тогда их впервые начали применять на базе операционных систем Unix, чтобы управлять заданиями. JCL – наиболее популярный язык тогда.
Первый язык – LiveScript – для обработки скриптов в браузере появился в 1995 году. Он был разработан компанией Netscape, чтобы обрабатывать формы на сайтах. Этот язык помогал сделать так, чтобы пользователь не мог отправить форму, если заполнил ее неправильно или оставил пустые поля.
Зачем нужны скрипты
Для SEO-продвижения. Скрипты помогают автоматизировать многие действия для успешного продвижения, что существенно снижает нагрузку на живого специалиста.
Для сбора статистики. С помощью скриптов можно узнать количество посетивших ваш сайт и их действия на нем.
Для добавления информации без перезагрузки страницы. Например, когда вы нажимаете кнопку “Показать больше”, то данные автоматически подтягиваются, без необходимости обновлять страницу.
Для увеличения функционала сайта и добавления элементов дизайна. Можно добавить анимацию на сайт и другие составляющие.
Какие бывают языки скриптов
Прежде, чем начать писать сценарий задания – важно понять, как пользоваться скриптами и определиться с языком программирования. Все языки имеют свои особенности и предназначены для разных задач. Обычно выделяют три основных вида языков:
- Общие. С их помощью можно создать любое программное обеспечение. Примеры: Java, Python , Bash.
- Универсальные. Используются для программирования сайтов. Примеры: JavaScript, PHP , Python.
- Узкоспециализированные. Используются для узких задач. Примеры: NQC, Autocad
Как использовать скрипты на сайте
Скрипты на сайте помогают во многих задачах: обновить контент, дополнить его определенными элементами. При этом работать со скриптами может не каждый. Есть следующие варианты:
- Использовать готовый код. Такие коды найти несложно: есть специальные библиотеки, где можно найти подходящий под свои задачи и взять его для себя, например, чтобы добавить интерактивности сайту.
- Написать код самостоятельно. Если вы никогда не занимались программированием, то это будет сложно. Чтобы создать код, необходимы знания языков программирования, а также принципов разработки кода и его управления. Если ваша задача нестандарта и требует индивидуального подхода, то лучше обратиться за помощью к профессиональным программистам.
Преимущества скриптов
- Универсальность. Интерпретаторы скриптовых языков есть у большинства популярных браузеров, которые мы используем, поэтому их можно использовать между разными площадками.
- Не зависят от основного кода. К примеру, если вы обнаружили ошибку в коде скрипта, на основной код она никак не повлияет, и вам не придется его менять.
- Экономия времени. В объемном коде часто сложно быстро найти проблему и устранить ее, при этом небольшой скрипт поможет заменить его.
- Работа через инсталляторы. Почти у всех скриптов есть инсталлятор для создания файлов конфигурации. Благодаря этому, специалист может не тратить время на исходный код, достаточно только ввести данные и сразу перейти к настройкам.
Недостатки скриптов
Пожалуй, основным недостатком скриптов, который действительно имеет значение, можно назвать замедленную скорость исполнения. Это значит, что практически все интерпретируемые сценарии нуждаются в большем количестве времени и компьютерных ресурсов. В остальном же существенных недостатков скрипты не имеют. Даже если пытаться их найти, то в любом случае количества плюсов точно будет больше.
Как использовать скрипты на сайте
Самый простой пример, который можно встретить практически на любом сайте – формы для обратной связи, обращения в службу поддержки, специализированные калькуляторы – например, которые помогают рассчитать стоимость доставки груза из одной точки в другую.
Например, на сайте RU-CENTER установлен виджет, где посетитель может оставить свои контакты и получить консультацию по услугам.
Заключение
В этой статье мы разобрали что такое скрипты в программировании и чем они полезны для сайта. Несмотря на то, что скрипты существенно упрощают работу администраторов сайта, а сам ресурс делают удобнее, функциональнее и красивее, важно помнить, что, например, всплывающие элементы и другие элементы, могут негативно отразиться на продвижении сайта и его позициях в поисковых системах, поэтому мы рекомендуем использовать сценарии в небольшом количестве и отслеживать их влияние на статистику сайта.
Гайд для начинающих: как писать на JavaScript
Современный интернет немыслим без скриптов. Учимся писать на JavaScript.
Анатолий Ализар
Пишет про разработку в Skillbox Media. Работал главным редактором сайта «Хабрахабр», ведёт корпоративные блоги.
Если бы для интернета писали Библию, она начиналась бы так:
Сначала была почта. И увидели инженеры, что это хорошо. И создали они WWW с гиперссылками. И увидели инженеры, что это тоже хорошо. И создали они тогда язык JavaScript для оживления страничек.
Примерно так происходило в реальности. JavaScript придумали, чтобы «оживить» HTML. Скрипты JavaScript пишутся непосредственно в текст HTML или хранятся в отдельных файлах, как и стили CSS. Они выполняются сразу после загрузки страницы в браузер.
Даже сам язык в первое время назывался LiveScript. Потом его переименовали в JavaScript, потому что планировали как-то увязать с языком общего назначения Java. Но сейчас у них нет практически ничего общего, а JavaScript — совершенно независимый язык программирования со своей четкой спецификацией ECMAScript.
Формально JavaScript является торговой маркой Oracle, а этот язык — «расширение» ECMAScript, наряду с JScript от Microsoft и ActionScript, но это скорее заморочки владельцев торговых марок. Главное, что свободный ECMAScript никому не принадлежит.
Со временем сфера влияния JavaScript значительно расширилась. Его начали использовать не только для скриптов на странице HTML, но и для серьезных больших веб-приложений и целых программ, которые работают в браузере. Есть инструменты, чтобы специальным образом «упаковать» эти программы и выполнять их отдельно от браузера.
Приложения JavaScript выполняются в любой среде, где есть соответствующий интерпретатор.
Как сделать JavaScript? Написать элементарный скрипт не сложнее, чем простую HTML-страничку, ведь скрипты JavaScript пишутся обычным текстом, то есть их можно создавать буквально в том же «Блокноте», сохраняя потом в отдельных файлах или вставляя в тело HTML-документа. Самые простые вещи на JavaScript делаются действительно просто.
Как написать JavaScript
Для примера сделаем простой скрипт для выполнения сервером сценариев Windows. Этот скрипт можно написать прямо в «Блокноте» и выполнить без браузера.
Аналогичный скрипт можно записать прямо в коде страницы HTML между тегами и . Там уже можно использовать обычные методы JavaScript, а не метод echo специфического объекта WScript. Рассмотрим некоторые из стандартных методов для ввода и вывода данных в браузере.
alert()
Метод alert() отображает окошко с кнопкой «OK». В окне выводится сообщение, которое указано в скобках. Например, «Привет, Skillbox!». То есть в данном случае браузер делает ровно то же самое, что перед этим делал сервер сценариев Windows.
Эти примеры тоже можно писать в «Блокноте», только сохранять в файлах с расширением HTML. Например, skillbox.htm.
В качестве аргумента alert() можно указать не только конкретный текст, но и результат каких-либо вычислений или обработки других данных. Например, alert(x), где x вычисляется отдельно.
confirm()
Метод confirm() выводит такое же окно с сообщением, но уже с двумя кнопками — «ОК» и «Отмена». В зависимости от того, какую кнопку щелкнет пользователь, метод возвращает либо значение true, либо false. Сервер получает это возвращаемое значение от пользователя и выполняет какое-то действие, в зависимости от ответа.
Синтаксис такой же, только здесь логически предполагается выбор, так что пользователю задают вопрос.
prompt()
Метод prompt() выводит диалоговое окно с сообщением и текстовым полем, куда пользователь вводит данные. Здесь тоже предусмотрены две кнопки «ОК» и «Отмена». По нажатию первой кнопки метод возвращает на сервер введенный текст, а по нажатию второй кнопки возвращает логическое значение false.
Синтаксис здесь такой:
Возможности современного JavaScript выходят далеко за рамки примитивного ввода-вывода данных через формы. Эти методы мы привели только в качестве самых простых примеров. Кроме этого, JavaScript позволяет реагировать на действия пользователя. Например, на движения мышкой или нажатие определенных клавиш. JavaScript часто используется для обеспечения асинхронной работы (Технология AJAX), когда информация на странице обновляется без ее перезагрузки. В этом режиме данные отправляются на сервер и загружаются оттуда в интерактивном режиме. Кроме того, JavaScript способен манипулировать с HTML-элементами на странице (создавать и прятать теги и т.д.) и делать многое другое.
Полезные инструменты
Консоль разработчика
Во всех популярных браузерах есть специальная консоль разработчика. Она показывает код скриптов на странице, а также выводит другую полезную информацию. В Chrome, Firefox и IE консоль разработчика открывается по нажатию горячей клавиши F12, в Safari — Ctrl+Shift+I или Ctrl+Alt+C. На скриншоте скрипты отображаются справа вверху, вместе с другими элементами веб-страницы.
Редакторы кода
В дальнейшем для удобного программирования понадобится установить редактор кода или IDE (Integrated Development Environment), интегрированную среду разработки. IDE — это редактор с расширенной функциональностью, который интегрирован с другими полезными инструментами, поддерживает подключение дополнительных модулей и так далее.
Для начала можно рекомендовать один из легких редакторов:
В будущем есть смысл присмотреться к IDE:
Читайте также:
- Какой язык программирования учить новичку. Выбираем JavaScript
- Почему работа в топовых российских IT-компаниях — зло
- Как начать программировать на PHP