Функции JavaScript – интересно и важно. Что такое функция? Значение параметров по умолчанию

Код JavaScript может быть запущен несколькими способами - из внешнего файла, из втроенного фрагмента в разделе head страницы и прямо из обработчика события HTML элемента. Рассмотрим все эти способы более подробно.

Внешний код

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

Встроенный код

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

alert("Привет Мир!");

Атрибуты

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

Пример

Кликни Меня!

Кликни Меня Тоже!

Попробуйте Сами » Расположение

Расположение предыдущих двух опций важно и может изменяться в зависимости от ситуации. Если Вы включаете JavaScript, который не получает доступ к элементам на странице, можно безопасно поместить сценарий перед заключительным HTML тегом . Однако, если код будет взаимодействовать с элементами на странице, необходимо удостовериться, что эти элементы уже существуют во время, когда сценарий выполняется. Эта распространенная ошибка может быть рассмотрена на примере ниже. Сценарий для того, чтобы обнаружить элемент с ID hello-world будет выполняться прежде, чем элемент определяется в документе.

Пример

// Попытка обратиться к элементу слишком рано
приведет к непредсказуемым результатам.
var title = document.getElementById("hello-world");
console.log(title);

Привет Мир

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

Дата публикации: 15.05.2013

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

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

Как подключить скрипт в любом месте сайта?

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

01
02
03 Считаем кроликов
04
05
06 for(var i=1; i undefined alert(typeof window.makeArray); // => function
То есть вызов makeArray("one", "two"); равносилен вызову window.makeArray("one", "two"); .

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

Правило вызова функций №1: Если функция вызывается напрямую, без указания объекта (например, myFunction()), значением this будет глобальный объект (window в случае исполнения кода в браузере).

Вызов метода Давайте создадим простой объект и сделаем makeArray его методом. Объект объявим с помощью литеральной нотации, а после вызовем наш метод:
// создаем объект var arrayMaker = { someProperty: "какое-то значение", make: makeArray }; // вызываем метод make() arrayMaker.make("one", "two"); // => [ arrayMaker, "one", "two" ] // альтернативный синтаксис, используем квадратные скобки arrayMaker["make"]("one", "two"); // => [ arrayMaker, "one", "two" ]
Видите разницу? Значение this в этом случае - сам объект. Почему не window , как в предыдущем случае, ведь объявление функции не изменилось? Весь секрет в том, как передаются функции в JavaScript. Function - это стандартный тип JavaScript, являющийся на самом деле объектом, и как и любой другой объект, функции можно передавать и копировать. В данном случае, мы как бы скопировали всю функцию, включая список аргументов и тело, и присвоили получившийся объект свойству make объекта arrayMaker . Это равносильно такому объявлению:
var arrayMaker = { someProperty: "Какое-то значение"; make: function (arg1, arg2) { return [ this, arg1, arg2]; } };
Правило вызова функций №2: В функции, вызванной с использованием синтаксиса вызова метода, например, obj.myFunction() или obj["myFunction"]() , this будет иметь значение obj .

Непонимание этого простого, в общем-то, принципа часто приводит к ошибкам при обработке событий:
function buttonClicked(){ var text = (this === window) ? "window" : this.id; alert(text); } var button1 = document.getElementById("btn1"); var button2 = document.getElementById("btn2"); button1.onclick = buttonClicked; button2.onclick = function(){ buttonClicked(); };
Щелчок по первой кнопке покажет сообщение «btn1» , потому что в данном случае мы вызываем функцию как метод, и this внутри функции получит значение объекта, которому этот метод принадлежит. Щелчок по второй кнопке выдаст «window» , потому что в этом случае мы вызываем buttonClicked напрямую (т.е. не как obj.buttonClicked()). То же самое происходит, когда мы назначаем обработчик события в тэге элемента, как в случае третьей кнопки. Щелчок по третьей кнопке покажет то же самое сообщение, что и для второй.

При использовании библиотек вроде jQuery думать об этом не надо. jQuery позаботится о том, чтобы переписать значение this в обработчике события так, чтобы значением this был элемент, вызвавший событие:
// используем jQuery $("#btn1").click(function() { alert(this.id); // jQuery позаботится о том, чтобы "this" являлась кнопкой });
Каким образом jQuery удается изменить значение this ? Читайте ниже.

Еще два способа: apply() и call() Логично, что чем чаще вы используете функции, тем чаще вам приходится передавать их и вызывать в разных контекстах. Зачастую возникает необходимость переопределить значение this . Если вы помните, функции в JavaScript являются объектами. На практике это означает, что у функций есть предопределенные методы. apply() и call() - два из них. Они позволяют переопределять значение this:
var car = { year: 2008, model: "Dodge Bailout" }; makeArray.apply(car, [ "one", "two" ]); // => [ car, "one", "two" ] makeArray.call(car, "one", "two"); // => [ car, "one", "two" ]
Эти два метода очень похожи. Первый параметр переопределяет this . Различия между ними заключаются в последющих аргументах: Function.apply() принимает массив значений, которые будут переданы функции, а Function.call() принимает аргументы раздельно. На практике, по моему мнению, удобнее применять apply() .

Правило вызова функций №3: Если требуется переопределить значение this , не копируя функцию в другой объект, можно использовать myFunction.apply(obj) или myFunction.call(obj) .

Конструкторы Я не буду подробно останавливаться на объявлении собственных типов в JavaScript, но считаю необходимым напомнить, что в JavaScript нет классов, а любой пользовательский тип нуждается в конструкторе. Кроме того, методы пользовательского типа лучше объявлять через prototype , который является свойством фукции-конструктора. Давайте создадим свой тип:
// объявляем конструктор function ArrayMaker(arg1, arg2) { this.someProperty = "неважно"; this.theArray = [ this, arg1, arg2 ]; } // объявляем методы ArrayMaker.prototype = { someMethod: function () { alert("Вызван someMethod"); }, getArray: function () { return this.theArray; } }; var am = new ArrayMaker("one", "two"); var other = new ArrayMaker("first", "second"); am.getArray(); // => [ am, "one", "two" ]
Важным в этом примере является наличие оператора new перед вызовом функции. Если бы не он, это был бы глобальный вызов, и создаваемые в конструкторе свойства относились бы к глобальному объекту. Нам такого не надо. Кроме того, в конструкторах обычно не возвращают значения явно. Без оператора new конструктор вернул бы undefined , с ним он возвращает this . Хорошим стилем считается наименование конструкторов с заглавной буквы; это позволит вспомнить о необходимости оператора new .

В остальном, код внутри конструктора, скорее всего, будет похож на код, который вы написали бы на другом языке. Значение this в данном случае - это новый объект, который вы создаете.

Правило вызова функций №4: При вызове функции с оператором new , значением this будет новый объект, созданный средой исполнения JavaScript. Если эта функция не возвращает какой-либо объект явно, будет неявно возвращен this .

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