Оценка услуг

Функции в JavaScript

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

Способы создания функций 

С помощью ключевого слова function (Function Declaration)

1
2
3
function f(x, y) { 
  блок инструкций; 
}

 Пример:

1
2
3
4
function sayHello() {
console.log('Hello world!');
}
sayHello();

 Еще пример:

1
2
3
4
function sayHello(name) {
console.log('Hello '+name+'!');
}
sayHello('John');

 Перед тем, как приступить к исполнению инструкций, интерпретатор JavaScript сначала 

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

1
2
3
4
f(); //такая функция уже есть 
function f() { 
блок инструкций; 
}

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

1
2
3
4
f(); //такой функции еще нет – она создается ниже 
var f = function() { 
  блок инструкций; 
}; 

Вот так функция возвращает значение:

1
2
3
4
5
function sum(x, y) {
return x + y;
}
result = sum(10, 20);
console.log(result);

 тот же результат если console.log(sum(2, 3));

Задание:
Напиши функцию power(), которая 
принимает два целочисленных значения
Функция должна возвращать результат 
возведения первого числа в степень второго

Второй способ создания функции:
Функция как значение переменной
function foo(val){ // создаем функцию
return val + val;
}
var sum = foo; // присваиваем функцию переменной
sum(2); // вызываем ту же функцию, но с другим именем
Анонимная функция
var sum = function (val){ // здесь функция имени не имеет, то есть пропущена промежуточная операция из предыдущего кода - сразу функцию присваиваем переменной. тогда нет смысла функции давать имя
return val + val;
}
sum(2); // вызываем

Задание 2:
Напиши функцию compare(), которая 
принимает целочисленное значение x и 
возвращает анонимную функцию
Анонимная функция должна принимать
целочисленное значение y и возвращать 
результат сравнения значений y и x как:
Если y больше, чем x, то возвращается true
Если y меньше, чем x, то возвращается false
Если значения равны, то возвращается null

Так как JS работает с элементами веб-страницы для придания ей динамичности и интерактивности, и JS является объектным языком, то все элементы страницы являются для JS объектами. В объектной теории (не только в JS, но и в других объектных языках) у объектов есть свойства (какие-то характеристики) и методы (действия над объектами или действия самих объектов). Методы похожи на простые функции, но функции обычно являются независимыми сущностями (как в PHP), а методы привязаны к своим объектам

в JS вообще всё является объетами. Любая переменная, текстовая строка и даже обычные функции являются объектами со своими свойствами и методами. Например, создадим переменную:
var text='это какой-то текст';

эта переменная является строковым типом. переменные такого типа имеют определенные свойства и методы. 
команда text.length вернет длину текстовой строки - это свойство переменной как объекта. свойство от своего объекта в JS принято отделять точкой. Так длину текстовой строки можно просмотреть в консоли:
console.log(text.length)

у переменных строкового типа есть и другие свойства. Рассмотрим метод:
text.charAt(0) - возвращает символ по указанной позиции (вернет букву Э). метод тоже отделяется от своего объекта точкой. Внешне метод отличается от свойства только наличием круглых скобок - это же функция, только принадлежащая объекту.

 

у переменных других типов (числовых, массивов, объектов, функций - в JS есть специальный тип -функция, ведь функцию можно присвоить переменной) есть свои свойства и методы

Возвращаемся в веб-странице. Все элементы - объекты. Но они выстроены в строгом иерархическом порядке. На самой вершине иерархии стоит объект window - это окно браузера (или отдельная вкладка) - в нём находятся все остальные объекты: document,location,history,screen и другие

 

причем для window все перечисленные объекты являются свойствами, то есть обратиться к document можно так:
window.document

для JS такой принцип распространяется на всю вебстраницу: для какого-то объекта все нижестоящие объекты (вложенные) являются свойствами, но они есть полноценные объекты, у которых есть свои свойства, которые, в свою очередь могут являться объектами.

 

На рисунках перечислены свойства и методы объектов document,location,history,screen и других:

свойства объекта window

методы объекта Window

объект history

объект Navigator

объект Screen

свойства и методы location

Свойства объекта Document

Важнейшим из свойств объекта Window является document – ссылка на объект Document. Именно 
этот документ является основой для объектной модели документа DOM.

ocument это сама страница, загруженная в браузер. Так как текст страницы состоит из тегов, то соотвествующие элементы также являются объектами. Например объект title для document является свойством, но сам по себе - объект
Так мы обратимся к title:
window.document.title
но обычно window не пишут, так как само собой ясно что мы внутри окна браузера. Команда:
console.log(document.title) выведет в консоль текст внутри тега title текущей страницы. А команда:
console.log(document.title.length) выведет количество символов в этом тексте

 

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

Доступ к отдельным элементам страницы

Здесь перечислены свойства document. Они же сами объекты. В принципе используется только forms и images

 

В js в отношении элементов страницы есть такой принцип: если у элемента (то есть тега) есть атрибуты, то они являются его свойствами. Например:
console.log(document.images[0].src) 
выведет путь до файла-картинки

Перечисленные выше на картинке свойства объекта document являются массивами. Ведь их может быть больше чем один на странице. поэтому они имеют индексы в таком порядке как они расположены в коде страницы. Я указал индекс 0 для самой первой картинке на странице.

Базовая модель событий в JS
Без модели событий реализовать хоть какую-то функциональность было бы невозможно. Код,
написанный в глобальном контексте, выполняется при загрузке страницы. Введение событий в 
HTML-страницы позволил сделать страницы интерактивными.
Событие – отклик страницы на некоторое действие пользователя или изменение состояния 
страницы/окна. Для того чтобы событие вызвало реакцию в коде JavaScript, требуется поставить 
этот код, называемый обработчиком, в соответствие с этим событием. Установление этой связи 
называется регистрацией обработчика события. 

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

<body onload="alert('Привет!');"> 

Все события имеют разные места их возникновения. Это означает, что не во всех элементах могут
возникнуть любые события.
Здесь вся таблица событий: http://cdtt-orsk.ru/index.php?action=showContent&..

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

некоторые события имеют действия по умолчанию – click для гиперссылок и кнопок формы, очистка и отправка формы, нажатие клавиш. Для того чтобы отменить событие, нужно при регистрации использовать инструкцию return.
Пример:
если напишем так
<form onsubmit="alert('Не отправляется');">
то обработки события не произойдет, так как форма отправится автоматически. Надо отменить отправку формы:

 

<form onsubmit="alert('Не отправляется');return false;">

то есть добавили return false
Так же для ссылки:
<script>
function myfunc(){
alert('Привет!');
return false;
}
</script>
<a href=''#" onclick="return myfunc()">Ссылка</a>
Здесь на событие щелчка по ссылке навесили функцию. причем со словом return. в самой функции производится какое-то действие и возвращается ложь. с помощью return myfunc() в обработчике события ложь, возвращенная функцией, возвращается в обработчик события и отменяет действие ссылки по-умолчанию - загрузка страницы.

есть один замечательный метод у объекта document, который позволяет выбрать элемент страницы по его id:
допустим код страницы такой:
<form method="post" onsubmit="return checkForm();">
<input id="login" name="login">
<input id="passw" name="passw">
<input type="submit">
</form>

 

Это простая форма для входа на сайт. Можно реализовать проверку формы на заполнение полей перед отправкой формы. Напишем скрипт, который проверяет заполнены логин и пароль. Если заполнены - разрешаем отправку формы, если нет - пишем сообщение и оправку формы отменяем.
добавим такой JS:
function checkForm(){
var login,passw,message;
login=document.getElementById("login").value;
passw=document.getElementById("passw").value; 
if(login.length==0) message+="Не введен логин";
if(passw.length==0) message+="Не введен пароль";
if(message.length==0) return true; //если переменная с ошибками пустая - разрешаем отправку формы
else { // если там что-то есть
document.getElementById("error").innerHTML=message; // находим в форме абзац с id=error и внедряем текст с ошибками внутрь элемента с помощью свойства innerHTML
return false; // отменяем отправку формы
}
}

для того, чтобы innerHtml сработал создадим в форме такой абзац:

 

<form method="post" onsubmit="return checkForm();">
<p id="error"></p> <!-- вот этот абзац —>
<input id="login" name="login">
<input id="passw" name="passw">
<input type="submit">
</form>

17 мая/ 2018 Автор: Автор: Admin 2 год обучения Комментариев: 1212 Просмотров: 10124

Похожие статьи

Комментариев: 0

Добавить комментарий

Обязательные поля помечены *. Ваш e-mail не опубликуется.