Зачем нужен javascript

История

До 2008-2009 гг. движок JavaScript (называемый также интерпретатор JavaScript и реализация JavaScript) реализовывался как интерпретатор, считывающий и исполняющий исходный код на JavaScript.

Первый движок JavaScript создан Бренданом Айхом в Netscape Communications для браузера Netscape Navigator. Движок получил кодовое имя SpiderMonkey и был реализован на языке программирования Си. Впоследствии он обновлялся и в отношении него была достигнута совместимость с третьей редакцией спецификации ECMA-262. Движок JavaScript Rhino написан преимущественно Норрисом Бойдом (англ. Norris Boyd (тоже из Netscape) и представляет собой реализацию JavaScript на языке программирования Java. Как и SpiderMonkey, Rhino совместим с третьей редакцией спецификации ECMA-262. С данной спецификацией также совместимы Nitro из Apple Safari, V8 из Google Chrome и TraceMonkey из Mozilla Firefox 3.5.

Наиболее распространённой средой исполнения JavaScript является браузер. Как правило браузеры предоставляют открытый API для создания объектов среды исполнения (англ. host objects), предоставляющих возможность работы с DOM в JavaScript.

Другой распространённой средой исполнения JavaScript является веб-сервер. Веб-сервер, поддерживающий JavaScript, предоставляет объекты среды исполнения, представляющие HTTP-запрос и HTTP-ответ. Манипулируя этими объектами, программа на JavaScript может динамически генерировать страницы. Например, технология ASP для веб-сервера IIS позволяет реализовывать серверную часть в том числе и на языке программирования JScript (реализация JavaScript от компании Microsoft). Другой пример это веб-сервер Jaxer (англ.), предоставляющий помимо объектов традиционных для серверов еще и объекты традиционные для браузеров. Преимуществом такого подхода является то, что один и тот же код может быть разделён между сервером и клиентом.

Приступая к работе

При написании скрипта на JavaScript для web в первую очередь нужно позаботиться о том, что бы весь скрипт начал исполняться движком javascript браузера только тогда, когда будет загружен полностью весь документ (вся страница), иначе в процессе работы скрипта могут быть ошибки, особенно когда идёт обращение к DOM. Для этого весь код JavaScript обычно пишется в теле функции которая заносится в свойство, представляющее собой событие onload объекта window.

window.onload = function() {
    /* тут весь js код */
}

Такой здравый подход исключает ошибки связанные в первую очередь с недостающими (не найденными) элементами в DOM.

Области использования

Первоначально JavaScript обладал довольно небольшими возможностями. Его цель состояла лишь в том, чтобы добавить немного поведения на веб-страницу. Например, обработать нажатие кнопок на веб-странице, произвести какие-нибудь другие действия, связанные прежде всего с элементами управления.

Однако развитие веб-среды, появление HTML5 и технологии Node.js открыло перед JavaScript гораздо большие горизонты. Сейчас JavaScript продолжает использоваться для создания веб-сайтов, только теперь он предоставляет гораздо больше возможностей.

Наиболее популярные области использования JavaScript:

• Одно из ранних использований JavaScript-кода в диалоговом окне сообщений, предусмотренных предупреждениях, оповещениях или приглашениях пользователям. *Содержимое HTML — элементов может быть изменено с помощью JavaScript. Это требует использования HTML dom, в котором HTML — элементы определены как объекты.
• JavaScript может использоваться для обратной связи с пользователями посредством онлайн-форм.
• Широко используется в формах регистрации и принятия индивидуальных логина и пароля.
• JavaScript создает поле поиска, которое принимает вводимые пользователем данные, на основе которых выводятся результаты поиска
• Используется для фиксации расположения элементов на странице и решает, загружать их или нет. Таким образом, это помощь в создании лучшего макеты страниц. *JavaScript поддерживает HTML и может быть использован для повышения качества веб-страниц во многих отношениях. Он может быть использован для добавления нескольких элементов для веб-страниц, простой HTML этого не может. Использование аудио, видео и анимации, станет удобнее с использованием JavaScript.
• Может быть использован, чтобы скрыть информацию и раскрывать ее при действии пользователя.
• JavaScript может использоваться для приема пользовательских комментариев или обратной связи с клиентами онлайн. Это, как правило, в виде текстовых полей, которые появляются при действии пользователя и предлагают пользователю ввести текст в полях, которые получены и отображены или сохранены для дальнейшего использования.
• Может быть использован для хранения IP-адресов посетителей и записи их посещений страниц. JavaScript легко реализовать. Это позволяет создавать отзывчивые интерфейсы.
• Может загружать содержимое на действия пользователя, тем самым устраняя необходимость загрузки всего содержимого страницы, когда пользователь собирается использовать только его часть.
• Может быть использован для проверки действий браузера и устранить проблемы браузера.
• Расширения браузеров, таких как Chrome, Opera и Safari реализованы с помощью JavaScript.
• База данных mongodb принимает запросы в Программы Adobe Acrobat и Adobe Reader поддерживают JavaScript в формате Компания Adobe позволяет его использовать для написания сценариев.
• .org позволяет использовать JavaScript в качестве скриптового языка.
• Приложение Google Apps script (облако-ориентированный язык сценариев, который позволяет пользователям автоматизировать задачи, создавать пользовательские формулы, и взаимодействовать с продуктами Google) основан на JavaScript.
• Java ввел классscript позволяющий реализации JavaScript, что позволяет java-приложениям использовать скрипты. С QT на C++ инструментарий включает QtScript для интерпретации сценариев JavaScript.
• В JavaScript есть определенные риски безопасности. Но с использованием его подмножеств, таких как ADsafe и Secure ECMAScript (SES), может быть предоставлена большая безопасность.

Присвоения примитивных и ссылочных типов

Понимание того, как JavaScript присваивает значение переменной, является залогом работающего кода. Без этого вы можете легко написать код, который непреднамеренно будет изменять значения переменных.

JavaScript всегда использует присвоение по значению

И это очень важно: когда присваиваемое значение является одним из 5 JavaScript’овых примитивов (Boolean, null, undefined, String и Number) — присваивается фактическое значение. Однако, когда присваиваемое значение является типом Array, Function или Object, присваивается ссылка на объект в памяти

Например, в коде ниже переменной присваивается значение . Т. к. является примитивом (String), то переменной присваивается строковое значение , и она может рассматриваться как отдельная (независимая) переменная. Соответственно, изменения никак не отразятся на .

А теперь попробуем то же самое с типом .

Если бы вы ждали от кода выше такого же поведения, как и с примитивами, — это, вероятнее всего, вызвало бы ошибки. Подобное может быть особенно неудобным, если вы решите создать функцию, которая будет изменять какой-нибудь .

JavaScript – не Java

Прежде чем вы приступите к изучению JavaScript, вам следует понимать, что
JavaScript – это не Java. Это два совершенно разных языка программирования. JavaScript не имеет ничего общего с языком Java, кроме похожего синтак­
сиса.

Java – объектно-ориентированный язык программирования, разрабатываемый компанией Sun Microsystems с 1991 года и официально выпущенный 23 мая 1995 года. Java – это мощный и гораздо более сложный язык программирования, на нём можно писать самые разные программы. Для интернет-страниц есть особая возможность – написание апплетов.

Апплет – это программа на языке Java, которую можно подключить к HTML при помощи тега <applet>. Jаvа­апплеты запускаются с помощью компилятора. Апплеты Java встраиваются в веб-страницу, но хранятся на диске как отдельные файлы. Это двоичные файлы, и если вы их откроете, то не увидите исходный код апплета.

Сценарии JavaScript размещаются внутри веб-страницы и не могут существовать отдельно от нее. Для выполнения JS-сценариев не нужен компилятор, они выполняются браузером на стороне пользователя. JS-скрипт – это обычный текст, и вы можете просмотреть код невооруженным взглядом – без какого-либо специального программного обеспечения.

Java — это язык, который основан на классах и отличается быстротой, высоким уровнем защиты и надежностью. Ориентированная на классы модель Java означает, что программы состоят исключительно из классов и их методов. Наследование классов и строгая типизация в языке Java обычно требуют тесно связанные иерархии объектов. Эти требования делают программирование на Java более комплексным, чем программирование на JavaScript.

JavaScript — это легкий язык программирования, который обладает простым синтаксисом, специализированной встроенной функциональностью и минимальными требованиями для создания объектов. Вам не нужно объявлять переменные, классы и методы. Не нужно беспокоиться о том, являются ли методы публичными (public), приватными (private) или защищенными (protected), а также вам не нужно реализовывать интерфейсы. Переменные, параметры и возвращаемые функциями типы JS-скриптов не являются явно типизированными.

Описание

JavaScript относится к языкам, в которых нет особых различий в парадигмах. Это значит, что можно писать в объектно-ориентированном, функциональном, императивном и других стилях. Именно такой подход сильно повлиял на простоту его изучения и применения. К слову, как раз с этой целью он и создавался.

Скорее всего, факт простоты и функциональности и сыграл решающую роль в развитии и распространении языка. Он стал настолько популярен, что используется практически во всех сферах веб-программирования. JavaScript не принадлежит ни одной компании. Однако само название JavaScript зарегистрировано за Oracle, которой также принадлежит Java.

Как работает JavaScript

Любое действие пользователя на странице порождает событие. Программирование на JavaScript — это обработка событий. Вот как выглядит обычный сценарий:

Пользователь что-то сделал на странице↓В браузере сработало событие↓Запустился JavaScript-код, который назначен на событие↓JavaScript изменил что-то на странице.

Программист пишет обработчик только для тех событий, на которые стоит реагировать:

Пользователь кликнул мышью↓Сработало событие onclick↓Запустилась функция changePhoto↓В галерее сменилось фото

Пользователь нажал клавишу↓Сработало событие onkeydown↓Программист не назначил обработчик события↓Ничего не произошло

Не все события — это реакция на действие пользователя. Например, «приветственные» окна сайт показывает после события onload. Оно само срабатывает после полной загрузки страницы

Расширение типов

Часто может возникнуть необходимость присвоить переменной одного числового типа значение переменной другого числового типа. Как же это сделать?

В Java есть 4 целочисленных типа:

Переменной большего размера всегда можно присваивать переменные меньшего размера.

Переменной типа спокойно можно присваивать переменные типа , и . Переменной типа можно присваивать переменные типа и . Ну и переменной типа можно присваивать переменные типа .

Примеры:

Такое преобразование, от типа меньшего размера к большему, называется расширением типа.

А что насчет вещественных чисел?

С ними все аналогично — размер имеет значение:

Переменной типа можно без проблем присвоить переменную типа . А вот с целочисленными типами интереснее.

Переменной типа можно присвоить переменную любого целочисленного типа. Даже типа , длина которого 8 байт. А переменной типа можно присвоить вообще что угодно: переменную любого целочисленного типа и переменную типа :

Обратите внимание, что преобразование к вещественному типу может привести к потере точности из-за нехватки значащих цифр. При преобразовании из целых чисел в дробные могут отбрасываться самые младшие части числа

Но т.к. смысл дробного числа в том, чтобы хранить приблизительное значение, такое присваивание разрешается

При преобразовании из целых чисел в дробные могут отбрасываться самые младшие части числа. Но т.к. смысл дробного числа в том, чтобы хранить приблизительное значение, такое присваивание разрешается.

Что может JavaScript в браузере?

Современный JavaScript – это «безопасный» язык программирования. Он не предоставляет низкоуровневый доступ к памяти или процессору, потому что изначально был создан для браузеров, не требующих этого.

Возможности JavaScript сильно зависят от окружения, в котором он работает. Например, Node.JS поддерживает функции чтения/записи произвольных файлов, выполнения сетевых запросов и т.д.

В браузере для JavaScript доступно всё, что связано с манипулированием веб-страницами, взаимодействием с пользователем и веб-сервером.

Например, в браузере JavaScript может:

• Добавлять новый HTML-код на страницу, изменять существующее содержимое, модифицировать стили.
• Реагировать на действия пользователя, щелчки мыши, перемещения указателя, нажатия клавиш.
• Отправлять сетевые запросы на удалённые сервера, скачивать и загружать файлы (технологии AJAX и COMET).
• Получать и устанавливать куки, задавать вопросы посетителю, показывать сообщения.
• Запоминать данные на стороне клиента («local storage»).

Сравнение объектов

Частая ошибка у новичков в JavaScript — это неправильное сравнение объектов. Дело в том, что переменные объектов хранят  в памяти ссылку на объект, а не сам объект. Один из способов сравнения двух объектов — предварительное преобразование их в JSON строку. Однако у этого способа есть недостаток: не факт, что порядок в объекте сохранится. Более безопасный способ сравнения объектов — использование специальной библиотеки, которая сравнивает объекты на более глубоком уровне (к примеру )

Хоть следующие объекты кажутся одинаковыми, они ссылаются на разные объекты в памяти.

А вот в следующем примере сравнение возвращает , потому что второй объект приравнивается к первому и они оба ссылаются на один объект.

Важно понимать разницу между примитивами и ссылочными типами для правильной установки переменной, которая будет ссылаться на объект в памяти

Структура кода

Инструкции разделяются точкой с запятой:

Как правило, перевод строки также интерпретируется как разделитель, так тоже будет работать:

Это так называемая «автоматическая вставка точки с запятой». Впрочем, она не всегда срабатывает, например:

Большинство руководств по стилю кода рекомендуют ставить точку с запятой после каждой инструкции.

Точка с запятой не требуется после блоков кода {…} и синтаксических конструкций с ними, таких как, например, циклы:

…Впрочем, если даже мы и поставим «лишнюю» точку с запятой, ошибки не будет. Она просто будет проигнорирована.

Подробности: Структура кода.

Примечания

1. Назначение модератором прямо в чате
2. https://github.com/lukehoban/es6features
3. http://kangax.github.io/compat-table/es5/
4. http://kangax.github.io/compat-table/es6/
5. AjaxPatrol
6. MarkBlocked

7. Javascript code not working…

8. https://phabricator.wikimedia.org/T96901
9. https://phabricator.wikimedia.org/T75714
10. Проблемы безопасности
11. Википедия: Администраторы интерфейса
12. Подробнее об импортировании скриптов
13. Подробнее о политике настроек

Как JavaScript отличается от других языков программирования?

Причина, по которой JavaScript является одним из самых популярных языков программирования, его универсальность. К слову, много разработчиков обращаются к языку программирования JavaScript как к основному, а к другим языкам только, если им потребуется что-то более специфическое.

Давайте посмотрим на несколько популярных языков программирования:

Если мы сравним программирование со строительством дома, то HTML будет задавать структуру дома и где будут расположены стены и двери, в то время как CSS будет отвечать для обои и отделку, которые украшают дом, чтобы сделать его более привлекательным. JavaScript добавляет удобство и означает, что вы можете включить свет и открыть двери. Вы можете обойтись и без этого, но есть риск того, что ваш сайт будет выглядеть и вести себя как «привет из» 1995 года.

Что такое JavaScript?

Изначально JavaScript был создан, чтобы «сделать веб-страницы живыми».

Программы на этом языке называются скриптами. Они могут встраиваться в HTML и выполняться автоматически при загрузке веб-страницы.

Скрипты распространяются и выполняются, как простой текст. Им не нужна специальная подготовка или компиляция для запуска.

Это отличает JavaScript от другого языка – Java.

Почему JavaScript?

Когда JavaScript создавался, у него было другое имя – «LiveScript». Однако, язык Java был очень популярен в то время, и было решено, что позиционирование JavaScript как «младшего брата» Java будет полезно.

Со временем JavaScript стал полностью независимым языком со своей собственной спецификацией, называющейся ECMAScript, и сейчас не имеет никакого отношения к Java.

Сегодня JavaScript может выполняться не только в браузере, но и на сервере или на любом другом устройстве, которое имеет специальную программу, называющуюся «движком» JavaScript.

У браузера есть собственный движок, который иногда называют «виртуальная машина JavaScript».

Разные движки имеют разные «кодовые имена». Например:

• V8 – в Chrome и Opera.
• SpiderMonkey – в Firefox.
• …Ещё есть «Trident» и «Chakra» для разных версий IE, «ChakraCore» для Microsoft Edge, «Nitro» и «SquirrelFish» для Safari и т.д.

Эти названия полезно знать, так как они часто используются в статьях для разработчиков. Мы тоже будем их использовать. Например, если «функциональность X поддерживается V8», тогда «Х», скорее всего, работает в Chrome и Opera.

Как работают движки?

Движки сложны. Но основы понять легко.

1. Движок (встроенный, если это браузер) читает («парсит») текст скрипта.
2. Затем он преобразует («компилирует») скрипт в машинный язык.
3. После этого машинный код запускается и работает достаточно быстро.

Движок применяет оптимизации на каждом этапе. Он даже просматривает скомпилированный скрипт во время его работы, анализируя проходящие через него данные, и применяет оптимизации к машинному коду, полагаясь на полученные знания. В результате скрипты работают очень быстро.

Использование JavaScript в приложениях

Приложения, написанные на JavaScript, могут исполняться на серверах, использующих Java 6 и более поздних версий. Это обстоятельство используется для построения серверных приложений, позволяющих обрабатывать JavaScript на стороне сервера.

Помимо Java 6, существует ряд платформ, использующих существующие движки (интерпретаторы) JavaScript для исполнения серверных приложений. (Как правило, речь идёт о повторном использовании движков, ранее созданных для исполнения кода JavaScript в браузерах WWW.)

Выражения, языковые конструкции и прочее в JavaScript

var имя = function(параметры) {…}

var имя = new Function(параметры, '...')

var person = {
	name : "Alex", 
	wife : {
		name : "Eve",
		age : 29
		},
	"age" : 25
};

x.y = function(z1,z2,z3,…) {
    w;
    return u;
};

var Human = {
	type : "Human",
	head : 1,
	legs : 2
};
var Megahuman = Object.create(Human);

switch(x) {
    case <value1>: y;
    break;
    case <value2>: y;
    break;
    ...
    default: y;
}

Чего НЕ может JavaScript в браузере?

Возможности JavaScript в браузере ограничены ради безопасности пользователя. Цель заключается в предотвращении доступа недобросовестной веб-страницы к личной информации или нанесения ущерба данным пользователя.

Примеры таких ограничений включают в себя:

• JavaScript на веб-странице не может читать/записывать произвольные файлы на жёстком диске, копировать их или запускать программы. Он не имеет прямого доступа к системным функциям ОС.

  Современные браузеры позволяют ему работать с файлами, но с ограниченным доступом, и предоставляют его, только если пользователь выполняет определённые действия, такие как «перетаскивание» файла в окно браузера или его выбор с помощью тега .

  Существуют способы взаимодействия с камерой/микрофоном и другими устройствами, но они требуют явного разрешения пользователя. Таким образом, страница с поддержкой JavaScript не может незаметно включить веб-камеру, наблюдать за происходящим и отправлять информацию в ФСБ.

• Различные окна/вкладки не знают друг о друге. Иногда одно окно, используя JavaScript, открывает другое окно. Но даже в этом случае JavaScript с одной страницы не имеет доступа к другой, если они пришли с разных сайтов (с другого домена, протокола или порта).

  Это называется «Политика одинакового источника» (Same Origin Policy). Чтобы обойти это ограничение, обе страницы должны согласиться с этим и содержать JavaScript-код, который специальным образом обменивается данными.

  Это ограничение необходимо, опять же, для безопасности пользователя. Страница , которую открыл пользователь, не должна иметь доступ к другой вкладке браузера с URL и воровать информацию оттуда.

• JavaScript может легко взаимодействовать с сервером, с которого пришла текущая страница. Но его способность получать данные с других сайтов/доменов ограничена. Хотя это возможно в принципе, для чего требуется явное согласие (выраженное в заголовках HTTP) с удалённой стороной. Опять же, это ограничение безопасности.

Подобные ограничения не действуют, если JavaScript используется вне браузера, например — на сервере. Современные браузеры предоставляют плагины/расширения, с помощью которых можно запрашивать дополнительные разрешения.

Таблицы совместимости

JavaScript – это развивающийся язык, в который постоянно добавляется что-то новое.

Посмотреть, какие возможности поддерживаются в разных браузерах и других движках, можно в следующих источниках:

• http://caniuse.com – таблицы с информацией о поддержке по каждой возможности языка. Например, чтобы узнать, какие движки поддерживают современные криптографические функции, посетите: .
• https://kangax.github.io/compat-table – таблица с возможностями языка и движками, которые их поддерживают и не поддерживают.

Все эти ресурсы полезны в ежедневной работе программиста, так как они содержат ценную информацию о возможностях использования языка, их поддержке и так далее.

Пожалуйста, запомните эти ссылки (или ссылку на эту страницу) на случай, когда вам понадобится подробная информация о какой-нибудь конкретной возможности JavaScript.

Итого

Объявление функции имеет вид:

• Передаваемые значения копируются в параметры функции и становятся локальными переменными.
• Функции имеют доступ к внешним переменным. Но это работает только изнутри наружу. Код вне функции не имеет доступа к её локальным переменным.
• Функция может возвращать значение. Если этого не происходит, тогда результат равен .

Для того, чтобы сделать код более чистым и понятным, рекомендуется использовать локальные переменные и параметры функций, не пользоваться внешними переменными.

Функция, которая получает параметры, работает с ними и затем возвращает результат, гораздо понятнее функции, вызываемой без параметров, но изменяющей внешние переменные, что чревато побочными эффектами.

Именование функций:

• Имя функции должно понятно и чётко отражать, что она делает. Увидев её вызов в коде, вы должны тут же понимать, что она делает, и что возвращает.
• Функция – это действие, поэтому её имя обычно является глаголом.
• Есть много общепринятых префиксов, таких как: , , , и т.д. Пользуйтесь ими как подсказками, поясняющими, что делает функция.

Функции являются основными строительными блоками скриптов. Мы рассмотрели лишь основы функций в JavaScript, но уже сейчас можем создавать и использовать их. Это только начало пути. Мы будем неоднократно возвращаться к функциям и изучать их всё более и более глубоко.