Инструменты пользователя
javascript
Различия
Показаны различия между двумя версиями страницы.
|
javascript [2018/12/16 00:29] |
javascript [2020/06/13 13:45] (текущий) |
||
|---|---|---|---|
| Строка 1: | Строка 1: | ||
| + | ====== JavaScript ====== | ||
| + | {{ :: | ||
| + | * [[http:// | ||
| + | * [[http:// | ||
| + | * [[https:// | ||
| + | * [[http:// | ||
| + | * JavaScript движки: | ||
| + | * [[Стандарты кодирования]]: | ||
| + | * [[jQuery]] - фреймворк фокусирующийся на взаимодействии JavaScript и HTML. | ||
| + | * [[jQuery Ui]]. | ||
| + | * [[Node.js]] | ||
| + | * [[JSON]] | ||
| + | * [[Sammy.js]] | ||
| + | * [[Принципы функционирования клиентских сценариев JavaScript]] | ||
| + | |||
| + | |||
| + | **JavaScript** - объектно-ориентированный скриптовый язык программирования. Основные архитектурные черты: динамическая типизация, | ||
| + | |||
| + | JavaScript может выполняться на стороне сервера, | ||
| + | < | ||
| + | |||
| + | ====== Использование JavaScript ====== | ||
| + | * [[Синтаксис JavaScript]]. Рекомендации. Тернарный оператор. switch case. [[sintaksis_javascript?&# | ||
| + | * [[Ввод/ | ||
| + | * [[pobitovye_ili_porazrjadnye_operacii?&# | ||
| + | * Оператор [[typeof]] - служит для проверки типов данных. Альтернатива использование ссылки на свойство constructor объекта. | ||
| + | |||
| + | **Области видимости переменных**. | ||
| + | __Область видимости переменной__ - определяет место в тексте скрипта, | ||
| + | |||
| + | Различают две области видимости: | ||
| + | <note important> | ||
| + | Если для переменной не объявлена область видимости (не использовано объявление при помощи ключевого слова var), эта переменная становиться глобальной, | ||
| + | |||
| + | **Ссылки**. | ||
| + | |||
| + | __Ссылка__ — это указатель на фактическое местонахождение объекта. В отношении которого действует предположение, | ||
| + | |||
| + | Объект может содержать набор свойств, | ||
| + | <note important> | ||
| + | |||
| + | <note tip> | ||
| + | </ | ||
| + | |||
| + | **Контекст JavaScript**. __Контекст__ - объект, | ||
| + | внутри которого код в данный момент работает. Следует помнить, | ||
| + | |||
| + | Методы call и apply служат для переключения контекста. | ||
| + | |||
| + | ====== Объекты JavaScript, DOM ====== | ||
| + | |||
| + | * [[DOM]]. Загрузка HTML DOM. Модификация DOM. [[dom?&# | ||
| + | |||
| + | Объекты являются основными элементами JavaScript. В JavaScript всё является объектом, | ||
| + | |||
| + | JavaScript предоставляет два основных метода создания объектов: | ||
| + | * использование объектного литерала, | ||
| + | * использование ключевого слова new. | ||
| + | |||
| + | Новый объект создается с помощью оператора new в паре с конструктором Object.< | ||
| + | var myObj = new Object(); | ||
| + | </ | ||
| + | var empty = {}; // Объект без свойств | ||
| + | var point = { x:0, y:0 }; | ||
| + | var circle = { x:point.x, y: | ||
| + | var homer = { | ||
| + | " | ||
| + | "last name": " | ||
| + | " | ||
| + | " | ||
| + | " | ||
| + | }; | ||
| + | </ | ||
| + | homer.name | ||
| + | homer[' | ||
| + | </ | ||
| + | Двойные кавычки можно применить, | ||
| + | |||
| + | * **Конструкторы объектов**: | ||
| + | Для создания объектов используются специально написанные для этой цели функции - // | ||
| + | < | ||
| + | // конструктор объекта " | ||
| + | function Automobile (aVendorName, | ||
| + | this.vendor = aVendorName; | ||
| + | this.model = aModel; | ||
| + | this.toString = autoToStr; | ||
| + | return this; | ||
| + | } | ||
| + | // функция, | ||
| + | function autoToStr() { | ||
| + | return this.vendor+" | ||
| + | |||
| + | </ | ||
| + | В данном примере используется ключевое слово - **this**. this представляет собой внутренний указатель объекта. Таким образом, | ||
| + | |||
| + | Для создания переменных объектных типов данных в JavaScript используется специальный оператор new, который записывается перед конструктором объекта. Таким образом, | ||
| + | < | ||
| + | // создание переменной объектного типа данных " | ||
| + | var myAuto = new Automobile(" | ||
| + | </ | ||
| + | |||
| + | Примерно так же, как и свойства, | ||
| + | |||
| + | * **Пример** на использование двух вложенных объектов | ||
| + | < | ||
| + | // конструктор объекта " | ||
| + | function Engine (cil, v) { | ||
| + | this.cilCount = cil; | ||
| + | this.v = v; | ||
| + | return this; | ||
| + | } | ||
| + | // конструктор объекта " | ||
| + | function Automobile (aVendorName, | ||
| + | this.vendor = aVendorName; | ||
| + | this.model = aModel; | ||
| + | this.engine = new Engine (nCil, V); | ||
| + | this.getInfo = autoInfo; | ||
| + | |||
| + | return this; | ||
| + | } | ||
| + | function autoInfo() { | ||
| + | alert (" | ||
| + | " | ||
| + | " | ||
| + | } | ||
| + | |||
| + | var myAuto = new Automobile(" | ||
| + | myAuto.getInfo(); | ||
| + | </ | ||
| + | |||
| + | |||
| + | ==== Свойство prototype ==== | ||
| + | В JavaScript используется уникальная форма создания объектов и наследования, | ||
| + | |||
| + | Весь этот процесс облегчается наличием свойства prototype. __Это свойство есть у любой функции, | ||
| + | |||
| + | < | ||
| + | // Создание конструктора для объекта Person | ||
| + | function Person( name ) { | ||
| + | this.name = name; | ||
| + | } | ||
| + | |||
| + | // Добавление нового метода к объекту Person | ||
| + | Person.prototype.getName = function() { | ||
| + | return this.name; | ||
| + | }; | ||
| + | |||
| + | // Создание нового конструктора объекта User | ||
| + | function User( name, password ) { | ||
| + | // Учтите, | ||
| + | // перегрузка-наследование, | ||
| + | // конструктора суперкласса | ||
| + | this.name = name; | ||
| + | this.password = password; | ||
| + | }; | ||
| + | // Объект User наследует все методы объекта Person | ||
| + | User.prototype = new Person(); | ||
| + | // Для объекта User мы добавляет свой собственный метод | ||
| + | User.prototype.getPassword = function() { | ||
| + | return this.password; | ||
| + | }; | ||
| + | </ | ||
| + | |||
| + | ==== Поиск и обработка ошибок ==== | ||
| + | |||
| + | Рассмотрим код, вызывающий конструктор без ключевого слова new, в случае чего this не будет ссылаться на создаваемый объект. Некорректный вызов Person успешно происходит, | ||
| + | function Person(name) { | ||
| + | "use strict"; | ||
| + | this.name = name; | ||
| + | } | ||
| + | var ferdinand = Person(" | ||
| + | console.log(name); | ||
| + | |||
| + | //undefined | ||
| + | // | ||
| + | </ | ||
| + | |||
| + | |||
| + | ====== Операторы манипулирования объектом ====== | ||
| + | **Операторы манипулированием объекта**: | ||
| + | * for ... in | ||
| + | * new | ||
| + | * this | ||
| + | * with | ||
| + | **Оператор for...in**. | ||
| + | |||
| + | Оператор for...in присваивает переменной поочередно все свойства объекта. Для каждого свойства JavaScript выполняет указанные утверждения. Оператор for...in выглядит следующим образом: | ||
| + | < | ||
| + | for (variable in object) | ||
| + | { | ||
| + | } | ||
| + | </ | ||
| + | |||
| + | Следующая функция берет ее как аргумент объект и имя объекта. Затем повторяет все свойства объекта и возвращает строку, | ||
| + | < | ||
| + | function dump_props(obj, | ||
| + | var result = "" | ||
| + | for (var i in obj) { | ||
| + | result += obj_name + " | ||
| + | } | ||
| + | | ||
| + | | ||
| + | </ | ||
| + | Для объекта car со свойствоми make и model, result выглядел бы так: | ||
| + | < | ||
| + | car.make=Ford | ||
| + | car.model=Mustang | ||
| + | </ | ||
| + | |||
| + | ====== Функции JavaScript ====== | ||
| + | * [[http:// | ||
| + | * [[http:// | ||
| + | Функция объявляется при помощи ключевого слова function. Формат объявления функции имеет следующий вид: | ||
| + | < | ||
| + | function имя_функции ([аргументы]) { | ||
| + | // тело функции | ||
| + | } | ||
| + | </ | ||
| + | * function - ключевое слово, при помощи которого объявляются функции; | ||
| + | * имя_функции - уникальное в пределах сценария имя, идентифицирующее функцию. Для имен функций справедливы все те правила и требования, | ||
| + | * аргументы - аргументы служат для передачи функциям входных данных. При указании нескольких аргументов, | ||
| + | * тело функции - последовательность операторов JavaScript, выполняющих определенную задачу. | ||
| + | |||
| + | Операторы тела функции не выполняются браузером, | ||
| + | < | ||
| + | имя_функции ([параметры]); | ||
| + | </ | ||
| + | В качестве параметров функций могут выступать переменные, | ||
| + | < | ||
| + | Функции могут не только выполнять последовательность действий, | ||
| + | |||
| + | В примере ниже реализована функция, | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | function cube(n) { | ||
| + | var c=n*n*n; // | ||
| + | return c; // | ||
| + | } | ||
| + | //--> | ||
| + | </ | ||
| + | </ | ||
| + | < | ||
| + | < | ||
| + | < | ||
| + | var someNumber = 10; | ||
| + | alert(2*cube(someNumber)); | ||
| + | //--> | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | </ | ||
| + | ===== callback функции ===== | ||
| + | Пример функции обратного (callback) вызова. | ||
| + | < | ||
| + | function doSomething(callback) { | ||
| + | // ... | ||
| + | |||
| + | // Call the callback | ||
| + | callback(' | ||
| + | } | ||
| + | |||
| + | function foo(a, b, c) { | ||
| + | // I'm the callback | ||
| + | console.log(a + " " + b + " " + c); | ||
| + | } | ||
| + | |||
| + | doSomething(foo); | ||
| + | </ | ||
| + | ===== Замкнутые и безымянные функции ===== | ||
| + | * [[http:// | ||
| + | **Замкнутые функции** дают возможность ссылаться на переменные, | ||
| + | |||
| + | Использование простых замкнутых выражений делает содержание программы более понятным. | ||
| + | |||
| + | [[wpru> | ||
| + | |||
| + | **Безымянные функции**: | ||
| + | Ниже показано, | ||
| + | < | ||
| + | // Создание новой безымянной функции, | ||
| + | (function(){ | ||
| + | // Переменная, | ||
| + | var msg = " | ||
| + | // Привязка к глобальному объекту новой функции, | ||
| + | window.onunload = function(){ | ||
| + | // которая использует ' | ||
| + | alert( msg ); | ||
| + | }; | ||
| + | // Закрытие безымянной функции и ее выполнение | ||
| + | })(); | ||
| + | </ | ||
| + | |||
| + | |||
| + | ====== Задержки и интервалы. DHTML анимация. ====== | ||
| + | * [[object_window|Объект Window]] | ||
| + | |||
| + | В сценариях часто возникает необходимость отложить выполнение действий на некоторое время или выполнять эти действия с заданной периодичностью. Примером может служить создание " | ||
| + | |||
| + | Одной из наиболее мощных DHTML технологий, | ||
| + | стиля одного или нескольких элементов. Чтобы, например, | ||
| + | |||
| + | * **Отложенное выполнение функции** | ||
| + | Для отложенного выполнения функции используется метод setTimeout, имеющий следующий формат вызова: | ||
| + | < | ||
| + | timerId = setTimeout(" | ||
| + | </ | ||
| + | где | ||
| + | * timerId - значение, | ||
| + | * " | ||
| + | * timeout - задержка выполнения кода в миллисекундах. | ||
| + | Для отмены отложенного выполнения кода используется метод clearTimeout, | ||
| + | < | ||
| + | clearTimeout(timerId); | ||
| + | </ | ||
| + | < | ||
| + | document.body.style.background = " | ||
| + | setTimeout(function() { | ||
| + | document.body.style.background = " | ||
| + | }, 2000); | ||
| + | </ | ||
| + | </ | ||
| + | |||
| + | * **Периодическое выполнение функции** | ||
| + | Для периодического выполнения функции используется метод setInterval, | ||
| + | < | ||
| + | timerId = setInterval(" | ||
| + | </ | ||
| + | где | ||
| + | * timerId - значение, | ||
| + | * " | ||
| + | * period - период выполнения кода в миллисекундах. | ||
| + | Для отмены периодического выполнения кода используется метод clearInterval, | ||
| + | < | ||
| + | clearInterval(timerId); | ||
| + | </ | ||
| + | < | ||
| + | alert(' | ||
| + | }, 1000) | ||
| + | </ | ||
| + | </ | ||