Динамический интерфейс с помощью Java Script...•Основы...
Transcript of Динамический интерфейс с помощью Java Script...•Основы...
Динамический интерфейс с помощью Java Script
План
• Основы языка Java Script
• Организация динамического поведения элементов интерфейса
Основы языка Java Script
Переменные
• Объявление переменной
var message;
var i;
• Присвоение значения message = 'Hello World';
i = 0;
• Кратко
var message = 'Hello world';
var i = 0;
Типы данных
• Число
var n = 5;
n = 6.5;
• Строка
var str = "Строка";
• Булевый тип
var t = true;
t = false;
Типы данных
• Специальный тип «null»
var name = null;
• Специальный тип «undefined»
var name = undefined;
• Объект
var user = {
name: "John",
age: 32 };
Массив
• Объявление var mas = [];
var nums = ["First", "Second", "Third"];
• Обращение к элементу массива
alert(nums[0]);
• Изменение элемента массива
nums[0] = "Zero";
Операции с массивом
• pop() – удаляет и возвращает последний элемент из массива
• push() – добавляет элемент в конец массива
• shift() – удаляет и возвращает первый элемент из массива
• unfisht() – добавляет элемент в начало массива
Операции с массивом
• length() – показывает последний индекс в массиве + 1 (не длину!)
var mass = [];
mass[1000] = true;
alert(mass.length); // 1001
Оператор строгое равенство
• Не строгое равенство ==:
alert('' == false); // true
(т.к. '' и false преобразуются в 0)
• Строгое равенство ===:
alert(0 === false); // false
(проверка равенства происходит без преобразования типов)
Функции
• Объявление функции function имя(параметры, через, запятую) {
код функции
}
• Пример
function avg(operand1, operand2) {
sum = operand1 + operand2;
return sum/2;
}
Функциональные выражения
• Функция является значением function printHello() {
alert( "Hello" );
}
alert( printHello );
В диалоговом окне выведется function printHello() {
alert( “Hello" );
}
Функциональные выражения
• Копирование функции в другую переменную
var funcPrintHello = printHello;
funcPrintHello();
Выведет дилоговое окно со словом "Hello"
Функциональные выражения
• Объявление функционального выражения var f = function(параметры) {
// тело функции
};
• Пример var func = function printHello(name) {
alert("Hello" + name);
}
func("John");
ООП
• Ассоциативный массив
• ООП в функциональном стиле
ООП. Ассоциативный массив
• Данные хранятся в формате ключ-значение
• Создание объекта
user = Object();
user = {};
• Добавление свойств
user.name = 'John';
User['name'] = 'John';
ООП. Ассоциативный массив
• Объявление со свойствами
var user = {
name: 'John',
age: 25
};
• Получение значения свойства
alert(user.name);
ООП. Функциональный стиль
function User(name) {
this.sayYourName = function() {
alert("Hello, my name is " + name);
};
}
var john = new User("John");
john.sayYourName();
Публичное и приватное св-во
function Elevator(speed) { this.startFloor = 1; // начальный этаж лифта this.endFloor = 1;// конечный этаж лифта } // создать лифт var elevator = new Elevator(10); // Задать конечный этаж elevator.endFloor = 5; startFloor, endFloor – публичные свойства speed – приватные свойства
Публичный и приватный методы
function Elevator(speed) { this.startFloor = 1; // начальная позиция лифта this.endFloor = 6; //конечная позиция лифта //рассчет времени поездки function getTripTime(){ - Приватный метод return 10; //Формула появится дальше } // что делать по окончании процесса function onArrived() { - Приватный метод this.startFloor = this.endFloor; alert( 'You are arrived!' ); } this.run = function() { - Публичный метод setTimeout(onArrived, getTripTime() * 60000); }; }
Доступ к свойству внутри класса
• Сохранение this
self = this;
function getTripTime(){
return (self.endFloor - self.startFloor)/speed;
}
Доступ к свойству внутри класса
• Привязка через bind
var getTripTime = function(){
return (this.endFloor - this.startFloor)/speed;
}.bind(this);
Доступ к свойству внутри класса
• Явное указание контекста с помощью call:
this.run = function() {
setTimeout(onArrived, getTripTime.call(this) * 60000);
};
Организация динамического поведения элементов интерфейса
Подготовка к разработке приложения
• Создать проект с шаблоном TAUSinglePage
• Сверстать html страницу, присвоив элементам атрибут id
• Открыть файл main.js
Связывание элементов интерфейса с JS кодом
• $ - функция, возвращающая объект в jQuery
• $('#id') – получение объекта интерфейса из html файла
Действия с элементами интерфейса
• Получение значения текста $('#name').val();
• Присвоение текста элементу <p id="label"></p>
$('#label').text(‘Some text');
• Присвоение действия при нажатии на кнопку $('#btn').bind('click', function(event, ui){
//Действие при нажатии на кнопку
});
Ссылки
• https://learn.javascript.ru/ - Современный учебник Javascript
• http://promo-creative.com/javascript/ - Документация по JavaScript на русском