JavaScript: Функции. Создание функций в JavaScript

9 ответов

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

1: Определяет его в HTML:

2: добавьте его в свойство DOM для события в Javascript:

//- Using a function pointer: document.getElementById("clickMe").onclick = doFunction; //- Using an anonymous function: document.getElementById("clickMe").onclick = function () { alert("hello!"); };

3: И добавляет функцию обработчику событий, используя Javascript:

Var el = document.getElementById("clickMe"); if (el.addEventListener) el.addEventListener("click", doFunction, false); else if (el.attachEvent) el.attachEvent("onclick", doFunction);

Как второй, так и третий методы допускают встроенные/анонимные функции, и оба должны быть объявлены после того, как элемент был проанализирован из документа. Первый метод недействителен XHTML, потому что атрибут onclick не указан в спецификации XHTML.

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

Скорее всего, проблема находится где-то в вашей функции CapacityChart() . После посещения вашей ссылки и запуска вашего script запускается функция CapacityChart(), и открывается два всплывающих окна (один из них закрыт в соответствии с script). Если у вас есть следующая строка:

CapacityWindow.document.write(s);

Попробуйте вместо этого:

CapacityWindow.document.open("text/html"); CapacityWindow.document.write(s); CapacityWindow.document.close();

ИЗМЕНИТЬ
Когда я увидел ваш код, я думал, что вы его пишете специально для IE. Как уже упоминалось, вам нужно будет заменить ссылки на document.all на document.getElementById . Тем не менее, после этого вам все равно придется исправлять script, поэтому я бы рекомендовал, чтобы он работал, по крайней мере, в IE, так как любые ошибки, которые вы делаете, изменяя код для работы с перекрестным браузером, могут вызвать еще большую путаницу. После его работы в IE будет легче узнать, работает ли он в других браузерах, пока вы обновляете код.

Я бы сказал, что было бы лучше добавить javascript в ненавязчивую манеру...

если вы используете jQuery, вы можете сделать что-то вроде:

$(document).ready(function(){ $("#MyButton").click(function(){ CapacityChart(); }); });

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

Проблема находится в функции CapacityCount . Я получаю эту ошибку в своей консоли на Firefox 3.5: "document.all is undefined" в строке 759 из bendelcorp.js.

Похоже, что document.all - это только для IE и является нестандартным способом доступа к DOM. Если вы используете document.getElementById() , это должно сработать. Пример: document.getElementById("RUnits").value вместо document.all.Capacity.RUnits.value

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

If(navigator.appName == "Netscape") { vesdiameter = document.forms["Volume"].elements["VesDiameter"].value; // more stuff snipped } else { vesdiameter = eval(document.all.Volume.VesDiameter.value); // more stuff snipped }

Я нахожусь в Chrome, поэтому navigator.appName не будет Netscape . Поддерживает ли Chrome document.all ? Может быть, но опять же, возможно, нет. А как насчет других браузеров?

Версия кода в ветке Netscape должна работать на любом браузере в обратном порядке до Netscape Navigator 2 с 1996 года, поэтому вы, вероятно, должны просто придерживаться этого... кроме того, что он не будет работать (или не гарантируется работа), потому что вы не указали атрибут name для элементов input , поэтому они не будут добавлены в массив формы elements как именованные элементы:

Либо укажите им имя и используйте массив elements , либо (лучше) используйте

Var vesdiameter = document.getElementById("VesDiameter").value;

который будет работать на всех современных браузерах - не требуется разветвление. Чтобы быть в безопасности, замените это, обнюхивая версию браузера, большую или равную 4, с проверкой на поддержку getElementById:

If (document.getElementById) { // NB: no brackets; we"re testing for existence of the method, not executing it // do stuff... }

Вероятно, вы также захотите проверить свой ввод; что-то вроде

Var vesdiameter = parseFloat(document.getElementById("VesDiameter").value); if (isNaN(vesdiameter)) { alert("Diameter should be numeric"); return; }

Последнее обновление: 09.04.2018

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

Синтаксис определения функции:

Function имя_функции([параметр [, ...]]){ // Инструкции }

Определение функции начинается с ключевого слова function , после которого следует имя функции. Наименование функции подчиняется тем же правилам, что и наименование переменной: оно может содержать только цифры, буквы, символы подчеркивания и доллара ($) и должно начинаться с буквы, символа подчеркивания или доллара.

После имени функции в скобках идет перечисление параметров. Даже если параметров у функции нет, то просто идут пустые скобки. Затем в фигурных скобках идет тело функции, содержащее набор инструкций.

Определим простейшую функцию:

Function display(){ document.write("функция в JavaScript"); }

Данная функция называется display() . Она не принимает никаких параметров и все, что она делает, это пишет на веб-страницу строку.

Однако простого определения функции еще недостаточно, чтобы она заработала. На надо еще ее вызвать:

function display(){ document.write("функция в JavaScript"); } display();

Необязательно давать функциям определенное имя. Можно использовать анонимные функции:

Var display = function(){ // определение функции document.write("функция в JavaScript"); } display();

Фактически мы определяем переменную display и присваиваем ей ссылку на функцию. А затем по имени переменной функция вызывается.

Также мы можем динамически присваивать функции для переменной:

Function goodMorning(){ document.write("Доброе утро"); } function goodEvening(){ document.write("Добрый вечер"); } var message = goodMorning; message(); // Доброе утро message = goodEvening; message(); // Добрый вечер

Рассмотрим передачу параметров:

Function display(x){ // определение функции var z = x * x; document.write(x + " в квадрате равно " + z); } display(5); // вызов функции

Функция display принимает один параметр - x. Поэтому при вызове функции мы можем передать для него значение, например, число 5, как в данном случае.

Если функция принимает несколько параметров, то с помощью spread-оператора... мы можем передать набор значений для этих параметров из массива:

Function sum(a, b, c){ let d = a + b + c; console.log(d); } sum(1, 2, 3); let nums = ; sum(...nums);

Во втором случае в функцию передается числа из массива nums. Но чтобы передавался не просто массив, как одно значение, а именно числа из этого массива, применяется spread-оператор (многоточие...).

Функция может принимать множество параметров, но при этом часть или все параметры могут быть необязательными. Если для параметров не передается значение, то по умолчанию они имеют значение "undefined".

Function display(x, y){ if(y === undefined) y = 5; if(x === undefined) x = 8; let z = x * y; console.log(z); } display(); // 40 display(6); // 30 display(6, 4) // 24

Здесь функция display принимает два параметра. При вызове функции мы можем проверить их значения. При этом, вызывая функцию, необязательно передавать для этих параметров значения. Для проверки наличия значения параметров используется сравнение со значением undefined .

Есть и другой способ определения значения для параметров по умолчанию:

Function display(x = 5, y = 10){ let z = x * y; console.log(z); } display(); // 50 display(6); // 60 display(6, 4) // 24

Если параметрам x и y не передаются значения, то они получаются в качестве значений числа 5 и 10 соответствено. Такой способ более лаконичен и интуитивен, чем сравнение с undefined.

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

Function display(x = 5, y = 10 + x){ let z = x * y; console.log(z); } display(); // 75 display(6); // 96 display(6, 4) // 24

В данном случае значение параметра y зависит от значения x.

При необходимости мы можем получить все переданные параметры через глобально доступный массив arguments :

Function display(){ var z = 1; for(var i=0; i