Папярэдні занятак

Што такое Javascript і AJAX

Javascript – гэта адзіная мова праграмаваньня якая можа выконвацца ў браўзеры. Яна дазваляе Вам зьмяняць HTML і CSS пасьля таго, як старонка загрузілася. Іншыя мовы (як Ruby) могуць зьмяняць HTML (або CSS) перад тым як ён будзе дасланы карыстальніку, але толькі Javascript можа быць выкананаы браўзерам. Спачатку Javascript выкарыстоўваўся для простага функцыяналу накшталт адкрыцьця ўсплываючага акна або выпадаючага сьпіса, але ў апошнія гады ён выкарыстоўваецца зусім як сапраўдная мова праграмаваньня.

Адзін з падыходаў праграмаваньня на Javascript зьяўляецца AJAX, або Asynchronous Javascript and XML. З AJAX, замест таго, каб дасылаць запыт вэб-сэрверу й перагружаць усю старонку з адказа, запыт выконваецца асінхронна, таму старонка не перазагружаецца. Сэрвер адказвае якім-небудзь маленькім кавалачкам дадзеных, звычайна ў фармаце XML або JSON. Гэтыя дадзеныя выкарыстоўваюцца каб часткова абнавіць старонку.

Як карыстацца Javascript

Як мы ўжо ведаем калі старонка загружаецца, акрамя HTML у браўзер могуць дасылацца й іншыя дадзеных, напрыклад CSS. Каб падключыць CSS файл у старонку Вы звычайна дадаеце тэг link у head:

<link rel="stylesheet" href="style.css">

Гэтак жа дадаецца і JS:

<script src="test.js"></script>

Стварыце пусты html і js файлы. Дадайце тэг script самым апошнім тэгам перад зачыняючым html.

Першы JS

Адразу варта адзначыць што JS пасьля Рубі будзе давацца лёгка, бо гэта такая ж мова праграмаваньня як і Рубі. JS не падобна на SQL і HTML – гэта імператыўная мова. То бок, як заўсёды можна напісаць:

var a = "hello",
    b = " ",
    c = "world";
alert(a + b + c);

Дадайце гэтыя радкі ў Ваш JS файл і абнавіце старонку. Што атрымалася? Пагуляйце яшчэ з JS. Паспрабуйце знаёмыя Вам Рубі канструкцыі. Ці ўсё працуе? Які адрозьненьні Вы заўважылі?

Напэўна першае галоўнае адрозьненьне – гэта тое, што пасьля кожнай апэрацыі трэба ставіць кропку з коскай ;.

Як і пра HTML, існуе выдатная дакуманэтацыя пра JS. Мы ня будзем разглядаць JS падрабязна, таму што галоўныя падыходы да праграмаваньня Вам знаёмы з Рубі. Таму гэтыя дакумэнтацыя будзе галоўнай крыніцай ведаў для Вас.

Маніпуляваньне HTML-элементамі

Галоўная мэта JS – гэта, вядома, маніпуляваньне элементамі HTML-старонцы. Напрыклад раскаляроўваньне, зьмяненьні шырыні, шрыфту, проста даданьне новых элементаў.

З гэтай прычыны ў JS існуе спецыяльны аб’ект, які завецца – document. Ён, як у Рубі функцыя rand, даступны ў любым месцы. document трымае ўсе элементы старонцы й функцыі для работы зь імі. Напрыклад можна маючы наступны html:

<p style="background: red;">Some text</p>
<p class="myP" style="background: orange;">Some text</p>
<p class="myP" style="background: green;">Some text</p>

Даведацца пра коляр кожнага параграфа:

var elements = document.querySelectorAll(".myP");
for (var i = 0; i < elements.length; i++){
    alert(elements[i].style.backgroundColor);
}

Дадайце гэты код сабе на старонку. Праглядзіце як ён выконваецца.

Варта зьвярнуць увагу на мэтад document querySelectorAll. Ён прымае на ўваход css-selector такіж якім Вы звыкліся карыстацца ў css-файлах. Таму, можна выбраць, напрыклад усе элементы, які маюць які-небудзь клас, або проста элементы аднаго тыпу. Як і ў CSS. Поўны сьпіс мэтадаў і аб'ектаў document можна праглядзець на Mozilla Developer Network

Зьмяненьне HTML-элементаў

Праглядаць бэкграўнды элементаў гэта канешне выдатна, але давайце паспрабуем іх зьмяняць:

var elements = document.querySelectorAll("p:nth-child(1), p:nth-child(2)");
for (var i = 0; i < elements.length; i++){
    elements[i].style.backgroundColor = "#ADA7FF";
}

Атрымалася? Выдатна! Пазьмяняйце яшчэ якія-небудзь атрыбуты, якія Вы ведаеце.

А як жа нейкая "інтэрактыўнасьць"? Каб ціснуць на кнопку й штосьці адбылася?

Калі ласка!

Дадаем кнопку ў HTML:

<button>Click me!</button>

І дадаем такі вось код у JS:

var button = document.querySelector("button");
button.onclick = function(){
    var elements = document.querySelectorAll("p:nth-child(1), p:nth-child(2)");
    for (var i = 0; i < elements.length; i++){
        elements[i].style.backgroundColor = "#ADA7FF";
    }
};

onclick - гэта такая спецыяльная ўласьцівасьць кнопкі, якая трымае функцыю, якую трэба выканаць пры ціскнаньні на кнопку. Кнопка мае шмат такіх уласьцівасьцей. Усе яны пачынаюцца з on* і завуцца слухачамі. Напрыклад onmouseover. Даведайцеся што робіць гэты слухач.

jQuery

jQuery - гэта такая спецыяльная бібліятэка напісаная на JS, якая вельмі спрашчае працу распрацоўшчыка.

Каб усталяваць jQuery спампуйце апошню вэрсію з сайта jQuery. У html-файле дадайце спасылку на jQuery перад спасылкай на файл з Вашым JS. Нешта такое:

<script src="jquery-1.9.1.js"></script>
<script src="myscript.js"></script>

Код для зьмяненьня коляру параграфаў напісаны з дапамогай jQuery будзе выглядаць нашмат прасьцей:

$("button").click(function(){
    $("p:nth-child(1), p:nth-child(2)").css("background-color", "#ADA7FF");
});

Вельмі падобна на Рубі, ці не так?

Замест querySelectorAll jQuery мае спецыяльную функцыю якая завецца $. Адразу ў яе й трэба пісаць усе css-сэлектары.

Наступны занятак