Гайд для начинающих: как написать JavaScript
Современный интернет немыслим без скриптов. Учимся писать на JavaScript.
Если бы для интернета писали Библию, она начиналась бы так:
Сначала была почта. И увидели инженеры, что это хорошо. И создали они WWW с гиперссылками. И увидели инженеры, что это тоже хорошо. И создали они тогда язык JavaScript для оживления страничек.
Примерно так происходило в реальности. JavaScript придумали, чтобы «оживить» HTML. Скрипты JavaScript пишутся непосредственно в текст HTML или хранятся в отдельных файлах, как и стили CSS. Они выполняются сразу после загрузки страницы в браузер.
Даже сам язык в первое время назывался LiveScript. Потом его переименовали в JavaScript, потому что планировали как-то увязать с языком общего назначения Java. Но сейчас у них нет практически ничего общего, а JavaScript — совершенно независимый язык программирования со своей четкой спецификацией ECMAScript.
Формально JavaScript является торговой маркой Oracle, а этот язык — «расширение» ECMAScript, наряду с JScript от Microsoft и ActionScript, но это скорее заморочки владельцев торговых марок. Главное, что свободный ECMAScript никому не принадлежит.
Со временем сфера влияния JavaScript значительно расширилась. Его начали использовать не только для скриптов на странице HTML, но и для серьезных больших веб-приложений и целых программ, которые работают в браузере. Есть инструменты, чтобы специальным образом «упаковать» эти программы и выполнять их отдельно от браузера. Это компиляторы и интерпретаторы, которые более подробно рассматриваются на обучающих курсах «Java-разработчик» и «Веб-разработчик».
Приложения JavaScript выполняются в любой среде, где есть соответствующий интерпретатор.
Нас пока интересуют только браузеры и HTML-странички.
Как сделать JavaScript? Написать элементарный скрипт не сложнее, чем простую HTML-страничку, ведь скрипты JavaScript пишутся обычным текстом, то есть их можно создавать буквально в том же «Блокноте», сохраняя потом в отдельных файлах или вставляя в тело HTML-документа. Самые простые вещи на JavaScript делаются действительно просто.
Как написать JavaScript
Для примера сделаем простой скрипт для выполнения сервером сценариев Windows. Этот скрипт можно написать прямо в «Блокноте» и выполнить без браузера.
WScript. echo (» Привет, Skillbox!«)
Пишем этот текст в «Блокноте», затем сохраняем файл под именем skillbox.js и запускаем в «Проводнике» Windows.
Аналогичный скрипт можно записать прямо в коде страницы HTML между тегами . Там уже можно использовать обычные методы JavaScript, а не метод echo специфического объекта WScript. Рассмотрим некоторые из стандартных методов для ввода и вывода данных в браузере.
alert()
Метод alert() отображает окошко с кнопкой «OK». В окне выводится сообщение, которое указано в скобках. Например, «Привет, Skillbox!». То есть в данном случае браузер делает ровно то же самое, что перед этим делал сервер сценариев Windows.
Эти примеры тоже можно писать в «Блокноте», только сохранять в файлах с расширением HTML. Например, skillbox.htm.
В качестве аргумента alert() можно указать не только конкретный текст, но и результат каких-либо вычислений или обработки других данных. Например, alert(x), где x вычисляется отдельно.
confirm()
Метод confirm() выводит такое же окно с сообщением, но уже с двумя кнопками — «ОК» и «Отмена». В зависимости от того, какую кнопку щелкнет пользователь, метод возвращает либо значение true, либо false. Сервер получает это возвращаемое значение от пользователя и выполняет какое-то действие, в зависимости от ответа.
Синтаксис такой же, только здесь логически предполагается выбор, так что пользователю задают вопрос.
prompt()
Метод prompt() выводит диалоговое окно с сообщением и текстовым полем, куда пользователь вводит данные. Здесь тоже предусмотрены две кнопки «ОК» и «Отмена». По нажатию первой кнопки метод возвращает на сервер введенный текст, а по нажатию второй кнопки возвращает логическое значение false.
prompt ( сообщение, значение_поля_ввода_данных)
Значение поля ввода необязательно. Туда можно вписать текст, который изначально введен в поле для удобства пользователя.
Возможности современного JavaScript выходят далеко за рамки примитивного ввода-вывода данных через формы. Эти методы мы привели только в качестве самых простых примеров. Кроме этого, JavaScript позволяет реагировать на действия пользователя. Например, на движения мышкой или нажатие определенных клавиш. JavaScript часто используется для обеспечения асинхронной работы ( Технология AJAX), когда информация на странице обновляется без ее перезагрузки. В этом режиме данные отправляются на сервер и загружаются оттуда в интерактивном режиме. Кроме того, JavaScript способен манипулировать с HTML-элементами на странице (создавать и прятать теги и т.д.) и делать многое другое.
Полезные инструменты
Консоль разработчика
Во всех популярных браузерах есть специальная консоль разработчика. Она показывает код скриптов на странице, а также выводит другую полезную информацию. В Chrome, Firefox и IE консоль разработчика открывается по нажатию горячей клавиши F12, в Safari — Ctrl+Shift+I или Ctrl+Alt+C. На скриншоте скрипты отображаются справа вверху, вместе с другими элементами веб-страницы.
Редакторы кода
В дальнейшем для удобного программирования понадобится установить редактор кода или IDE (Integrated Development Environment), интегрированную среду разработки. IDE — это редактор с расширенной функциональностью, который интегрирован с другими полезными инструментами, поддерживает подключение дополнительных модулей и так далее.
Для начала можно рекомендовать один из легких редакторов:
В будущем есть смысл присмотреться к IDE:
Заключение
Инструкторы на курсе «JavaScript с нуля» посоветуют лучшие инструменты и помогут разобраться с любыми вопросами. Это практический 4-месячный курс для тех, кто хочет научиться основам языка сценариев с индивидуальным наставником, разработать фронтенд для интерактивного веб-проекта и положить кейс к себе в портфолио.
Курс идеально подойдет дизайнерам-разработчикам и начинающим программистам, кто уже знаком и умеет разрабатывать страницу на HTML и CSS, но не намерен останавливаться в изучении программирования. Преподаватели практически «на пальцах» объяснят базовые основы синтаксиса JavaScript, научат создавать визуальные интерактивные элементы и помогут разработать первый веб-проект на JavaScript.
Источник статьи: http://skillbox.ru/media/code/gayd_dlya_nachinayushchikh_kak_napisat_javascript/
Создание скрипта на компьютере самостоятельно
Опытные пользователи всегда пытаются упростить работу с ПК и наверняка захотят узнать, как сделать скрипт на компьютере и что это такое.
Что такое пакетный файл
Пакетный файл – это термин, который часто приходится слышать пользователям ПК. По сути, это способ делать вещи, не делая их на самом деле. Набор команд также известен как скрипт.
Следовательно, это документ сценария, используемый для автоматизации задач в операционных системах DOS, Windows и OS / 2.
Многим пользователям известен термин интерпретатор командной строки, известный как CMD или командная строка. Он принимает различные директивы в виде ввода с клавиатуры и обрабатывает их.
Пакетный документ играет роль посредника между пользователями и командной строкой. Элементы с форматом bat, cmd и btm содержат команды CMD. Во время запуска такого документа, директивы, записанные в нем, выполняются в интерпретаторе в последовательном порядке. В противном случае их нужно будет вводить вручную, построчно.
Зачем нужен скрипт
Скрипт экономит время пользователя. В противном случае нужно будет вводить одни и те же директивы снова и снова.
Например, можно запланировать выключение операционной системы через определенное время с помощью CMD. Когда будет создан нужный документ, достаточно будет лишь дважды щелкнуть по нему. Он запустится, и система выключится по истечении установленного времени.
Если разработчик хочет использовать командную строку на компьютере при установке программного обеспечения, он может сделать это, включив файл в установочные пакеты. В противном случае придется запускать команды вручную.
При создании пакетного элемента также можно включить циклы (for), условные операторы (if), управляющие операторы (go to) и т. д. Кроме того, есть возможность запустить один документ из другого с помощью функции call.
Основные bat команды
Полезно будет знать некоторые bat директивы, которые помогут создать базовые пакетные файлы:
- Title используетсядляизменениятекстазаголовка, отображаемого в верхней части окна CMD.
- Echo – отображает входной ряд как вывод. Желательно использовать опцию ON или OFF для ECHO, чтобы включить или выключить echo. Эта функция позволяет выводить на экране те директивы, которые выполняются.
- Pause используется для остановки выполнения скрипта.
- Exit – функция для выхода из интерпретатора.
- Cls применяется для очистки экрана от всех команд.
- :: – добавить комментарий. Командная строка игнорирует любой текст, написанный как комментарий.
Выше перечислено внутренние директивы, которые поставляются с ОС. Пакетный скрипт также может поддерживать внешние команды. Они добавляются при установке нового программного обеспечения в системе. Например, если на компьютере установлен Google Chrome, можно воспользоваться функцией «chrome» в окне CMD.
Все эти команды могут помочь создать простой bat-файл. Есть возможность улучшить свой скрипт, изучив больше функций из списка CMD.
Создание bat-скрипта в Windows
В Windows можно создать командный файл, используя шаги ниже или шаги, упомянутые в разделе командной строки MS-DOS. Если удобно использовать стандартные программы, можно воспользоваться любым текстовым редактором (например, Блокнот или WordPad) для создания пакетных документов.
Для того чтобы создать скрипт с расширением bat в блокноте, стоит выполнить следующие действия:
- Щелкнуть Пуск.
- Ввести Блокнот в поле «Выполнить» и нажмите Enter. Также можно использовать любой аналогичный редактор текстовых элементов, например Notepad ++.
- Когда Блокнот откроется, ввести следующие строчки или скопировать и вставить их.
- Щелкнуть «Файл», затем «Сохранить» и перейти в папку, в которой нужно сохранить. В качестве имени можно ввести test.bat. Если в версии операционной системы есть параметр «Сохранить как», выбрать «Все файлы», в противном случае он сохраняется как текстовый. Выполнив эти шаги, нажать кнопку «Сохранить» и выйти из блокнота.
- Чтобы запустить документ, следует дважды щелкнуть на него. Окно CMD откроется автоматически с желаемым выходом. После завершения выполнения, окно автоматически закрывается.
- Можно попробовать добавить функцию echo on в шаг 2, чтобы посмотреть, что происходит на каждой строчке.
Шаги для создания скриптов практически одинаковы, независимо от того, установлена версия Windows 10, 8.1, 7 или даже XP.
Стоит обратить внимание, что можно использовать расширение cmd вместо расширения bat.
Создание bat-файла в MS-DOS
Чтобы создать пакетный элемент в MS-DOS или командной строке Windows, важно выполнить следующие действия:
- Открыть командное окно MS-DOS или загрузить MS-DOS.
- В строке MS-DOS ввести: edit test.bat и нажать Enter.
- Если введено все правильно, появится синий экран редактирования.
- После ввода этих строчек щелкнуть «Файл» и выбрать «Выход». Когда будет предложено сохранить элемент, нажать «Да». Пользователи, у которых нет мыши, могут выполнить эту же задачу, нажав Alt + F для доступа к меню, а затем X для выхода. Нажать Enter, чтобы сохранить изменения.
- Вернувшись к приглашению MS-DOS, ввести: test и нажать Enter, чтобы выполнить test.bat. Поскольку первая строчка представляет собой паузу, сначала будет предложено нажать клавишу. После этого документ запускается построчно. В этом случае будет произведено перечисление элементов в каталогах Windows и Windows \ system.
Источник статьи: http://vacenko.ru/sozdanie-skripta-na-kompyutere-samostoyatelno/
Учимся писать 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.
Однако, проще всего писать юзерскрипты под браузер Google Chrome.
На это есть ряд причин:
- Простым скриптам не нужна поддержка GM API (библиотека, доступная в GreaseMonkey)
- Google Chrome, в отличие от Firefox+GreaseMonkey, имеет отличнейший дебаггер.
- Сообщения об ошибках юзерскрипта в Firefox ужасны! Если вы не обладаете
даром телепатиитвердыми знаниями GreaseMonkey и javascript, написание юзерскрипта может превратится в муки! - Google Chrome не требует расширений для поддержки юзерскриптов. Интерфейс для удаления/отключения юзерскриптов доступен «из коробки».
Очевидные минусы Google Chrome:
- Нет доступа к «родному» window.
- Не поддерживается директива @ include метаданных. Директива @ match глючит, можно сказать, что она тоже не поддерживается.
Особенности юзерскриптов
Код юзерскриптов может посмотреть любой желающий, вооруженный блокнотом.
Базовые знания javascript позволяют отсечь угрозу установки шпионских и вредоносных скриптов простым анализом кода скрипта (придётся задействовать мозг).
Важно:Если вы не доверяете автору скрипта, главное удостовериться, что скрипт не отсылает пользовательские данные (куки, вводимый текст) на сторонние сервисы!
Все юзерскрипты запускаются после того, как загрузились все основные элементы страницы, но ещё не загрузились картинки. Можно сказать, что юзерскрипты грузятся по событию DOMContentLoaded.
В любом случае, проверки на window.onload не нужны.
Каждый браузер накладывает свои ограничения на исполнение юзерскриптов, но в целом юзерскрипты могут делать почти всё, что могут скрипты на странице.
Чаще всего юзерскрипты используются для изменения интерфейса страницы или для добавления плюшек, блекджека и шлюх(юзерскрипты для социальных сетей).
Бывают и продвинутые юзерскрипты, которые представляют собой самостоятельные программы (аукционные и игровые боты, плагины-помощники и т.д).
Анатомия юзерскриптов
Юзерскрипт — это текстовый файл с расширением user.js. В начале файла располагается блок метаданных — описание самого скрипта. После блока метаданных следует javascript-код, который и будет исполняться браузером.
Рассмотрим тестовый скрипт, который показывает alert с текстом на определенной странице.
Важно: данный скрипт представляет собой оболочку для кроссбраузерных юзерскриптов. Этот же скрипт, но с английскими комментариями, можно стянуть с pastebin.com и использовать безнаказанно.
В самом начале располагается блок метаданных (в виде комментария).
Этот блок состоит из директив описания юзерскрипта. Ниже в таблице представлены основные директивы и их назначение.
Важно:Все директивы, как и сам блок метаданных, могут отсутствовать.
Директива | Назначение |
---|---|
@ 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).
Конечно, наш юзерскрипт не обладает серьезными функциями, код выглядит страшным и малопривлекательным (для непосвященного человека). Но в итоге мы получили заготовку для кроссбраузерных юзерскриптов.
Это значит, что юзерскрипт можно запустить практически в любом современном браузере!
И это замечательно!
Источник статьи: http://habr.com/ru/post/129343/