В JavaScript, как и в любом языке программирования, есть методы, которые чаще именуют функциями. Но это не принципиально. Существуют предопределённые функции, а также вы можете создавать собственные функции через ключевое слово function
Если требуется сложить числа, сохранённые в текстовом формате, то следует сначала преобразовать строку в число. Для подобных преобразований предусмотрены два метода: parseInt() и parseFloat(). В первом случае строка преобразуется в целое число, а во втором - в число с десятичной точкой.
parseInt("9") + parseInt("3");
При этом нужно быть уверенным, что строка действительно содержит число, иначе будет возвращено значение NaN (Not a Number, не число)
var money = parseFloat("$5.00"); // вернёт NaN
Если в методе parseInt() вы передадите десятичное число, то метод не будет обращать внимания на дробную часть и обработает целую часть числа.
Другой типичный случай, когда строка содержит число и слово.
var counter = parseInt("3 кота ж"); // вернёт число 3
В данном случае сначала идёт число, которое и будет обработано. Остальное будет проигнорировано.
Данный метод ищет наличие указанной подстроки в строке. Если совпадения нет, то вернётся значение -1, иначе вернётся положительный результат. Допустим, мы хотим проверить наличие слова "кот". Если это слово встречается, то умножаем переменную numCats на 9.
var cats = "3 кота ж";
function parseCats(catString) {
numCats = parseInt(catString);
if (catString.indexOf("кот") != -1)
numCats *= 9;
return numCats;
}
<body onload="alert(parseCats(cats))">
В этом примере есть нужное слово. Поэтому переменная numCats сначала получит из предложения число 3, а затем умножит его на 9, получив в результате число 27. Если заменить слово "кота" на "кита", то значение переменной будет равно трём, так как совпадения не будет найдено.
У элементов страницы можно установить атрибут id, который является его идентификатором. Через метод getElementById() объекта document мы можем получить доступ к нужному элементу по его идентификатору.
<intput type="text" id="catname" name="catname" />
document.getElementById("catname");
document.getElementById().value;
Также можно установить нужный размер изображения.
function resize() {
document.getElementById("imgId").style.height = (document.body.clientHeight - 100) * 0.9;
}
<body onload="resize();">
В этом примере картинка с идентификатором imgId выводится с отступом 100 пикселей от верхнего края клиентской области браузера и с размером 90% от оставшегося размера окна.
В форме всегда следут проверять поля на корректность данных, вводимых пользователем. Если в поле пустая строка, нужно попросить пользователя ввести данные. Если в поле нужно ввести число, то следует проверять, относятся ли к числовым данных введённая информация. Для этого можно использовать метод IsNaN(), который возвращает значение true, если параметр является числом и значение false в противном случае.
isNaN (document.getElementById("catage").value);
В одном обработчике можно использовать несколько методов.
<body onload="resize(); sayHello();">
Для создания функции воспользуйтесь ключевым словом function, после которого следует указать имя функции и круглые скобки.
function myFunction(number) {
}
Тело функции находится внутри фигурных скобок.
Функция может содержать параметры, перечисляемые через запятую. Опционально можно возвращать значение в качестве результата вызова функции.
Создадим функцию meow() с двумя параметрами:
function meow(catName, catWeight) {
if(catWeight <= 10) {
return catName + " сказал гав";
} else {
return catName + " мяукнул";
}
}
Так как в нашем случае функция возвращает значение, то мы можем её сохранить в переменной и использовать где-то.
var phrase = meow("Мурзик", 11);
alert(phrase);
Если функция не имеет оператора return, то она возвращает специальное значение undefined.
Функции ещё являются и значениями. Можно присваивать функцию переменной.
// прибавляет 1 к своему аргументу
function add(num){
return num + 1;
}
// присвоим переменной функцию
var plusOne = add;
var result = plusOne(1); // получится число 2
Такой подход часто применяется при загрузке страницы.
function init(){
alert("Meow");
}
window.onload = init;
Функция может быть анонимной без указания имени.
var f = function(num){
return num + 1;
}
var result = f(1);
alert(result); // получится число 2
Перепишем пример с window.onload:
window.onload = function(){
alert("Meow");
}