Основы javascript

Главные отличия JavaScript от других Си-подобных языков

При изучении языка JavaScript у многих возникают некоторые трудности в связи с тем, что JavaScript хоть и Си подобный но имеет некоторые серьёзные, из привычного ряда вон выходящие, отступления от базового Си подобного синтаксиса. У JavaScript имеется своя извращённая концепция представления объектов, по сути всё в JavaScript состоит из объектов. Вообще сложно понимать концепцию данного языка без понимания полноценной объектно-ориентированной парадигмы, которая имеется в тех же C++, Java, C# и других языках программирования.

В JavaScript всё является объектами, абсолютно всё. Стандартная библиотека языка состоит из объектов. Эти объекты в нормальном понимании ООП являются ни чем иным как предопределёнными классами, в здравых полноценных языках так и есть, но в JS это объекты. При этом, работая с JavaScript, о самом слове «класс» можно забыть, так как официально их там нет, есть только объекты. В общем немного нелепая модель кастрированного ООП получается. Естественно это было сделано изначально для простоты и облегчения понимания концепции ООП. В общем хотели как лучше, а получилось как всегда. Во всём остальном JavaScript мало чем отличается от других Си подобных объектно-ориентированных языков программирования за исключением следующих моментов.

В JavaScript широко практикуются следующие вещи

Функции в функциях (вложенность функций);

function someFunc() {
    function foo () {
        return true;
    }
}

Внутри функции объявлена другая функция.

Ссылкой на функцию может быть переменная (или свойство) путём присвоения функции переменной;

var foo = function a() {
    return 1;
}

Переменная содержит ссылку на функцию . Именно ссылку а не результат работы функции. Теперь обратиться к функции можно через имя переменной следующим образом:

Можно определять безымянные функции;

function() {
    alert("some text");
}

Применение методов стандартной библиотеки к элементам через точку;

var str = "some string";
var foo = str.toString()

Переменная явно преобразовывается в тип . Всё потому, что каждая переменная идеологически является объектом.

Что не умеет делать JavaScript в браузере

Несмотря на универсальность, JS не способен заменить другие языки. И все это из-за стремления разработчиков к росту безопасности, а также предотвращению несанкционированного доступа к персональной и коммерческой информации. Такие моменты приходится учитывать кодеру, чтобы созданный ресурс не стал «сборником» ошибок.

Примеры ограничений:

1. Чтение, запись, копирование, запуск произвольных файлов на локальном накопителе. Есть возможность разрешить загрузку определенных типов файлов на сервер, но не наоборот. В случае скачивания обычно обходятся без JS-скриптов.
2. Все окна и вкладки в рамках даже одной страницы изолированы друг от друга. При открытии дополнительной формы напрямую из «первичной» придется писать отдельный код, чтобы они обменивались между собой введенными данными.
3. Скрипты после запуска взаимодействуют только с сервером, откуда была открыта страница. Работать со сторонними сайтами и доменами допускается, но для этого понадобится явное разрешение.

Перечисленные ограничения нацелены на снижение риска запуска вредоносного кода, в том числе загруженного с «левого» адреса. Нужно учитывать, что они действуют только на стороне браузера (пользователя). При исполнении кода на сервере JS-скрипты имеют заметно больше прав. Чтобы компенсировать такое различие, на браузеры устанавливаются специальные расширения.

Что вам нужно для изучения JavaScript?

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

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

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

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

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

К счастью, как вы уже знаете, любой веб-браузер включает в себя интерпретатор JavaScript.

Чтобы писать и выполнять JavaScript-программы, достаточно установить любой современный интернет-браузер (например Yandex, Internet Explorer, Mozilla Firefox или Google Chrome).

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

Самый простой способ поэкспериментировать с кодом JavaScript – воспользоваться встроенным инструментом браузера веб-консоль (Web Console).

Как правило, веб-консоль можно запустить нажатием клавиши F12 или горячей комбинации клавиш – Ctrl+Shift+J. Обычно панель или окно типичного «инструмента разработчика» открывается в виде отдельной панели в верхней или нижней части окна браузера как изображено на рис. 1.

Панель включает множество вкладок, позволяющих исследовать структуру HTML-документа, стили CSS и т. д. Среди них имеется вкладка JavaScript Console, где можно вводить строки программного кода JavaScript и выполнять их.

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

С большинством примеров, приведенных в нашем учебнике, вы сможете поэкспериментировать прямо на странице сайта воспользовавшись встроенным инструментом — мини-редактором JS.

Это обычный HTML документ

Выходим обратно в HTML

Выполнить код »
Скрыть результаты

Обратите внимание: В подобных простых экспериментах с JavaScript можно опускать теги , и в HTML-файле

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

Современные браузеры в обязательном порядке имеют поддержку языка JavaScript.

Команды JavaScript добавляются на веб-страницы с помощью тега <script>, причём исполняемый скрипт нужно вносить в окне Текст CMS WordPress. Контейнеров <script> в одном документе может быть сколько угодно. Атрибут «type=’text/javascript’» указывать необязательно, так как по умолчанию стоит javascript.

Вот пример:

<script type=«text/javascript»>document.write(«Вывод текста стандартной командой JavaScript.»);</script>

Атрибут type тега <script> сообщает браузеру о том, команды какого скриптового языка встроены далее до закрывающего тега </script>.

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

JavaScript допускает короткие комментарии — комментарии, длина которых не превышает длину строки. Всё, что находится после двух символов // до конца строки, будет являться коротким комментарием. Вот два примера коротких комментариев:

// 1. Команда ниже отображает Абзац, выводимый жирным шрифтомdocument.write(«<p><b>Абзац, выводимый жирным шрифтом.</b></p>»);

document.write(<i>Hello, World!</i>);// 2. Вывод курсивом строки Hello, World!

Кроме того, JavaScript допускает многострочные комментарии — комментарии,  которые распространяются на несколько строк. Вот пример такого комментария:

/*
Первая команда выводит абзац жирным шрифтом, а вторая команда выводит абзац курсивом */document.write(«<p><b>Абзац, выводимый жирным шрифтом.</b></p>»); document.write(«<p><i>Абзац, выводимый курсивом.</i></p>»);

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

Скрипт этого языка можно как внедрять непосредственно в HTML-код страницы, так и выносить в файл, который может вызываться разными страницами. Вот пример вызова файла со скриптом:

<script type=«text/javascript» src=«http://Путь_к_файлу_со_скриптом»><script>

Если указан атрибут src=»… «, то содержимое тега игнорируется,  то есть в одном теге script нельзя одновременно подключить внешний скрипт и указать код, поэтому нужно выбирать:  script либо содержит src, либо содержит код. При необходимости просто код вносим в другой script.

Кстати, WordPress версии 4.0 не признаёт код JavaScript в HTML-коде страниц и портит его, пряча код JavaScript за <![CDATA[ — поэтому необходимо использовать js-файлы.

Области применения JavaScript

Овладеть основами JavaScript полезно всем, кто касается сферы разработки и продвижения сайтов. В составе любого ресурса есть хотя бы 3-4 скрипта – от счетчика Яндекс.Метрики до формы захвата контактов, виджетов социальных сетей или регистрации аккаунта. Популярность платформы имеет объяснение: язык безопасен, он не предоставляет низкоуровневый доступ к процессам сервера.

Скрипты JS используются в следующих направлениях:

1. клиентская часть любых веб-приложений,
2. интерактивные элементы интерфейсов на AJAX,
3. механизм выдачи Push-уведомлений по модели Comet,
4. программы, совместимые с Android, iOS, Windows Mobile,
5. браузерные операционные системы типа WebOS,
6. макросы для автоматизации рутинных офисных операций,
7. приложения, запускаемые на серверах C, C++, Java, Go.

Отдельно стоит упомянуть пользовательские скрипты в браузерах. Ими реализуются такие фишки, как автоматическое заполнение форм, форматирование контента на странице, скрытие и отражение содержимого в зависимости от региона. Аналогичным образом пишутся расширения, плагины (виджеты) для популярных CMS вроде WordPress, MODX, 1С-Битрикс.

Критерии Сравнения

Есть много разных аспектов, которыми обладают хорошие языки программирования. Обычно это смесь всех критериев. Они помогают решить, использовать язык или нет. Тем не менее, существуют определенные критерии, которые являются «обязательными» — без них язык программирования либо будет очень трудно выучить, либо он вообще не будет стоить вашего времени.

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

Популярность

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

Некоторое время назад ко мне подошел друг и сказал, что он решил изучать программирование и выбрал какой-то новый язык для начала (я не могу вспомнить его название). Когда мы встретились примерно через неделю, он, как мне показалось, расстроился. Когда я спросил его, что не так, он сказал, что должен отказаться от изучения языка программирования, который ему нужен — о нем нет информации в Интернете.

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

Это очень важно для начинающих!

Простота Использования

Несмотря на то, что здесь всё может показаться очевидным, на самом деле это довольно спорно. Я объясню.

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

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

Вы знали?

Сравните ТОП 3 платформы для онлайн обучения

Я не думаю, что мне нужно много говорить про этот аспект — он очевиден. Некоторые языки программирования предлагают более высокую заработную плату, чем другие, что делает их гораздо более привлекательными для изучения. Мы увидим, как это работает в реальном сравнении PHP или JavaScript.

[править] Использование в HTML

При использовании в рамках технологии DHTML JavaScript код включается в HTML-код страницы и выполняется интерпретатором, встроенным в браузер. Код JavaScript вставляется в теги <script></script> с обязательным по спецификации HTML 4.01 атрибутом type=»text/javascript», хотя в большинстве браузеров язык сценариев по умолчанию именно JavaScript.

Скрипт, который выводит модальное окно с надписью «Hello, World!» внутри браузера:

alert(‘Hello, World!’);

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

Удалить

Есть и третья возможность подключения JavaScript — написать скрипт в отдельном файле, а спустя подключить его при помощи конструкции:

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

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

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

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

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

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

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

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

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

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

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

Версии

Логическое И (&&)

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

Примеры:

Выполнить код »
Скрыть результаты

Часто оператор И используется совместно с двумя выражениями сравнения:

Выполнить код »
Скрыть результаты

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

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

Например, в следующем примере число 1 будет воспринято как , а 0 – как :

Выполнить код »
Скрыть результаты

Логическое И начинает работу с вычисления левого операнда. Если получившееся значение может быть преобразовано в (например, , , , , или ), значит, результат выражения равен или непреобразованному значению левого выражения. Поэтому вычисление и преобразование второго операнда не выполняется. В противном случае, если значение слева является истинным, тогда результат всего выражения определяется значением справа. Поэтому, когда значение слева является истинным, оператор вычисляет и возвращает значение справа:

Выполнить код »
Скрыть результаты

Итак, оператор вычисляет операнды слева направо до первого ложного аргумента и возвращает его значение, а если все операнды истинные – то возвращается значение последнего. Если первый операнд – , то результат будет , и остальные значения игнорируются.

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

Это особенно заметно, когда выражения, имеющие побочные эффекты (присваивания, инкременты, декременты и вызовы функций), помещаются в правую часть оператора :

Выполнить код »
Скрыть результаты

При выполнении логического И в этом коде возникает ошибка, потому что переменная не объявлена. Значение левого операнда – , поэтому интерпретатор переходит к оценке правого операнда. Если изменить значение левого операнда на , ошибка не возникает:

Выполнить код »
Скрыть результаты

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

Приоритет операторов

В том случае, если в выражении есть несколько операторов – порядок их выполнения определяется приоритетом, или, другими словами, существует определённый порядок выполнения операторов.

Из школы мы знаем, что умножение в выражении выполнится раньше сложения. Это как раз и есть «приоритет». Говорят, что умножение имеет более высокий приоритет, чем сложение.

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

В JavaScript много операторов. Каждый оператор имеет соответствующий номер приоритета. Тот, у кого это число больше, – выполнится раньше. Если приоритет одинаковый, то порядок выполнения – слева направо.

Отрывок из таблицы приоритетов (нет необходимости всё запоминать, обратите внимание, что приоритет унарных операторов выше, чем соответствующих бинарных):

Так как «унарный плюс» имеет приоритет , который выше, чем у «сложения» (бинарный плюс), то в выражении сначала выполнятся унарные плюсы, а затем сложение.

8) getElementsByClass()

Изначально не написана никем конкретно. Многие разработчики писали свои собственные версии и ничья не показала себя лучше остальных.

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

if(document.getElementsByClassName) {

	getElementsByClass = function(classList, node) {    
		return (node || document).getElementsByClassName(classList)
	}

} else {

	getElementsByClass = function(classList, node) {			
		var node = node || document,
		list = node.getElementsByTagName('*'), 
		length = list.length,  
		classArray = classList.split(/\s+/), 
		classes = classArray.length, 
		result = [], i,j
		for(i = 0; i < length; i++) {
			for(j = 0; j < classes; j++)  {
				if(list.className.search('\\b' + classArray + '\\b') != -1) {
					result.push(list)
					break
				}
			}
		}
	
		return result
	}
}

classList

Список классов, разделенный пробелами, элементы с которыми нужно искать.

node

Контекст поиска, внутри какого узла искать

Например:

var div = document.getElementById("mydiv")
elements = getElementsByClass('class1 class2', div)