Динамический интерфейс с помощью 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 на русском