Змест

  1. Асновы HTML. Web Developer 2.0 занятак 1
  2. Асновы CSS. Web Developer 2.0 занятак 2
  3. CSS-бібліятэкі: Bootstrap. Адаптыўнасьць. Web Developer 2.0 занятак 3
  4. Першыя крокі з Javascript. Web Developer 2.0 занятак 4
  5. Функцыі ў Javascript. Web Developer 2.0 занятак 5
  6. jQuery. Web Developer 2.0 занятак 6
  7. Разгалінаваньне і масівы ў Javascript. Web Developer 2.0 занятак 7
  8. Цыклы ў Javascript. Web Developer 2.0 занятак 8
  9. Спецыфікацыі коду. Web Developer 2.0 занятак 9
  10. Github. Гульні. Web Developer 2.0 занятак 10
  11. Аб’ектна-арыентаванае праграмаваньне. Web Developer 2.0 занятак 11
  12. Яшчэ аб’ектна-арыентаванае праграмаваньне. Web Developer 2.0 занятак 12
  13. Базы дадзеных. Web Developer 2.0 занятак 13
  14. Распрацоўваецца…

Пра наш шлях

Перад тым як мы пачнем, я хачу правесьці невялічкі агляд курса.

Мы пачнем з HTML – мовы праграмаваньня, якая адлюстроўвае інфармацыю на вэб-старонцы (што знаходзіцца на вэб-старонцы), і CSS – мовы, якая стылізуе вэб-старонку (як выглядае). Потым мы крыху закранем JavaScript – мову праграмаваньня, якая можа зьмяняць старонкі, і jQuery – бібліятэку (пашырэньне) JavaScript якое дазваляе рабіць старонкі інтэрактыўнымі. Ведаючы jQuery, мы паглыбімся ў JavaScript і напішам нашыя першыя праграммы. Пасля, мы даведаемся што такое сэрвер і навучымся пісаць JavaScript, які будзе выконвацца на баку сэрвера. Як толькі мы пачнем адчуваць сябе ўпэўнена з JavaScript, па даведаемся пра Node.js – фрэймворк, які дазваляе проста ствараць вэб-прыкладаньні. Потым, мы ўсё гэта спалучым з нашымі ведамі па HTML і CSS . Мы ўкінем JavaScript і jQuery у гэту сумесь, а потым дададзім AJAX да нашых Node.js-прыкладаньняў.

Калі ўсё гэта падаецца Вам трошкі неадльным – не хвалюйцеся! Наш шлях падзелены на маленькія і зразумелыя крокі, якія мы будзем рабіць адзін за адным. Усё што Вам трэба рабіць гэта чытаць заняткі і рабіць практыкаваньні. Апошняя вельмі важна: Калі Вы не робіце практыкаваньні – гэты курс бессэнсоўны. Вы ня можаце навучыцца праграмаваць, гледзячы як гэта робіць хтосьці іншы (Ваш сусед або відосы на ютубе). Адзіны шлях навучыцца праграмаваць – гэта практыка. “The only way to learn is a hard way” – так і тут.

Усё, Вы напужаліся – можна ісці далей :)

Тэкставы рэдактар

Першае што Вы павінны зрабіць – адкрыць тэкставы рэдактар. Вы не павінны выкарыстоўваць тэкставыя працэсары як Microsoft Word для гэтага. Тэкставыя рэдактары адрозьніваюцца тым, што яны адлюстроўваюць сыры, неапрацаваны тэкс, т.б. так, як ён запісаны ў файле – Вы ня можаце прымяніць стылі як шрыфт і коляр да гэтага тэксту. Гэта ідэальна для праграмаваньня, дзе стылі тэксту бессэнсоўны і часам толькі перашкаджаюць.

Калі Вы карыстаецеся Windows, у Вас павінен быць усталяваны тэкставы рэдактар Notepad. Каб адчыніць яго цісніце Start (Пуск), All Programs, Accessories, і потым Notepad.

Больше прасунуты варыянт гэта Notepad++. Notepad++ – гэта бясплатны тэкстава рэдактар з пашыранымі магчымасьцямі для праграмаваньня.

Адчыніце тэкставы рэдактар і захавайце новы файл як my-first-webpage.html. Звярніце ўвагу на пашырэньне .html: гэта кажа Вашаму кампутару, што гэта HTML файл і ён мусіць быць адчынены ў браўзеры.

Зараз двойчы клікніце па файлу – ён адчыніцца ў браўзеры. Вы павінны ўбачыць пустую старонку. Ну вось, Вы ўжо гатовыя напісаць свой першы HTML!

Блочныя элементы (разьметачныя)

HTML значыць Hypertext Markup Language (Мова Разьметкі Гіпэртэксту) – асноўная мова разьметкі вэб-старонак у Інтэрнэце. course.by, фэйсбук, ўкантакце – 99.9% сайтаў у Інтэрнэце пабудаваны з дапамогай гэтай мовы.

У my-first-webpage.html, які павінен быць адчынены ў Вас у тэкставым рэдактары, давайце надрукуем наступны код (код трэба менавіта надрукаваць,а не скапіяваць – такім шляхам Вы будзеце вучыцца друкаваць хутчэй, а друкаваньне – вельмі асноўны скіл у праграмаваньні).

my-first-webpage.html
<p>This is my first web page!</p>
<p>Isn't it cool?</p>

<p> завецца тэгам, і гэта значыць, што ўсё што ідзе пасьля – гэта параграф, пакуль не дасягнута </p>. </p> завецца зачыняючым тэгам.

Зараз калі мы адчынім файл у браўзеры мы ўбачым два параграфа.

Ура! Мы толькі што напісалі наш першы код! Гэта вялікі крок, можна ўжо лічыцца праграмістам.

Дададзім яшчэ трохі элементаў у нашу старонку:

my-first-webpage.html
<h1>My first web page</h1>
<h2>Written by course.by students</h2>

<p>This is my first web page!</p>
<p>Isn't it cool?</p>

Тут, мы дадалі асноўны загаловак (<h1>) і падзагаловак (<h2>). Вы можаце дадаваць да шасці ўзроўняў загалоўкаў ад <h1> да <h6>.

HTML ігнаруе прабелы і пустыя радкі, што разам завецца whitespace. Вось чаму дададковы радок паміж загалоўкамі і параграфамі ніяк не адлюстроўваецца.

Давайце даведаемся пра яшчэ пару новых тэгаў:

my-first-webpage.html
<h1>My first web page</h1>
<h2>Written by course.by students</h2>

<p>This is my first web page!</p>
<p>Isn't it cool?</p>

<p>Here are some things I'm going to learn about coding:</p>
<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>And a lot more!</li>
</ul>

Тут мы дадалі непранумараваны сьпіс (<ul>) з чатырмя элементамі сьпіса (<li>). Калі мы хочам зрабіць пранумараваны сьпіс, які выкарыстоўвае лікі і літары замест кружочкаў, мы можам дадаць тэг <ol> замест <ul>.

Звярніце ўвагу на водступы, якія я зрабіў перад <li> унутры <ul>. Такім чынам робіцца нашмат прасьцей разумець, якія тэгі знаходзяцца ўнутры, і дзе знаходзіцца зачыняючы тэг. Добрай практыкай лічыцца рабіць водступ у два прабелы. Пісаць зачыняючы тэг адразу пасьля таго, як напісалі адчыняючы, і толькі потым пісаць унутраны змест – таксама зьяўляецца добрай практыкай. Робячы менавіта так, Вы не забудзецеся на напісаньне зачыняючага тэга.

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

my-first-webpage.html
<!DOCTYPE html>
<html>
<head>
    <title>Hello world!</title>
</head>
<body>
    <h1>My first web page</h1>
    <h2>Written by course.by students</h2>

    <p>This is my first web page!</p>
    <p>Isn't it cool?</p>

    <p>Here are some things I'm going to learn about coding:</p>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>And a lot more!</li>
    </ul>
</body>
</html>

Элемент <!DOCTYPE html> зверху старонкі кажа браўзеру што гэты дакумант – дакумант HTML, а менавіта апошняя ягоная версія – HTML5. (Прыклад doctype’а папярэдняй версіі HTML4 – <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">.)

Тэг <head> змяшчае мета-інфармацыю пра старонку, якая на сучасны момант ёсьць толькі тэг <title>. Код унутры <title> усталёўвае назву вэб-старонкі – калі Вы зараз паглядізіце ў браўзеры, Вы ўбачыце што назва акенца зьмянілася на Hello world!.

І, нарэшце, сам змест старонкі зараз загорнуты ў тэг <body>.

Вось прыклад яшчэ адной старонкі з любімымі рэчамі favorite-things.html. Вызначыце, што новага Вы бачыце ў гэтым кодзе.

favorite-things.html
<!DOCTYPE html>
<html>
<head>
    <title>My favorite things</title>
</head>
<body>
    <h1>My favorite things</h1>
    <h2>These are a few of my favorite things.</h2>

    <h3>People</h3>
    <p>Here are some of my favorite people!</p>
    <ul>
        <li>My brother Chris</li>
        <li>My mom and dad:
            <ul>
                <li>Steve</li>
                <li>Sarah</li>
            </ul>
        </li>
        <li>My friend Ulad</li>
        <li>My friend Roma</li>
    </ul>

    <h3>Flavors of ice cream</h3>
    <p>These are my three favorites, in order:</p>
    <ol>
        <li>Malted milk chocolate</li>
        <li>Vanilla</li>
        <li>Vanilla + Malted milk chocolate</li>
    </ol>

    <p>Thanks for reading about my cool favorite thigs!</p>
</body>
</html>

Коцікі

Зараз Вашая чарга! Вось некалькі старонак, якія Вы павінны стварыць.

  • Стварыце старонку з Вашымі ўлюбёнымі рэчамі. Можна падглядаць у прыклад вышэй.
  • Стварыце старонку коціка. Калі ў Вас ёсьць коцік – Вам прасьцей, калі няма – ўявіце што Вы і ёсьць коцік і гэта Ваша старонка.
  • Стварыце блог Вашага сабакі. Алгарытм як і з коцікам.

Тэкставые элементы (радковые)

Усе элементы пра якія мы даведаліся раней зьяўляюцца блочнымі элементымі, што значыць, што кожны элемент адлюстроўваецца з новага радку. Давайце дададзім у нашую першую старонку некалькі радковых элементаў:

my-first-webpage.html
<p>This is my <strong>first web page</strong>!</p>

Тэг <strong> паказвае што нешта ўнутры яго зьяўляецца важным. Па змаўчаньню ён зробіць тэкст унутры сябе тлустым (але мы навучымся хутка як зьмяняць гэтыя паводзіны). Калі мы хочам нешта падкрэсліць (у сэнсе ўвагі) (emphasize) нам трэба выкарыстоўваць тэг <em> які па змаўчаньню адлюструю тэкст курсівам:

my-first-webpage.html
<h2>Written by <em>course.by</em> students</h2>

Зараз надыйшоў час даведацца пра самы важны HTML-тэг:

my-first-webpage.html
<p>Check out <a href="http://course.by/">Course.by</a>. These fellows are free and awesome!</p>

Тэг <a> (ад слова anchor (якар)) стварае спасылку, а атрыбут href (hypertext reference) кажа куды гэта спасылка павінна весьці.

Падрабязней пра тэг <a> можна даведацца ў дакументацыі Mozilla Developer Network. Гэта дарэчы самы аўтарытэтны даведнік па элементам у сеціве. Я раю Вам карыстацца менавіта ім.

У папярэдня частцы мы зрабілі дзьве старонкі: my-first-webpage.html і favorite-things.html. Яны мусяць быць захаваны ў адной тэчцы (папка). Вось як мы можам спаслацца з адной старонкі на другую:

my-first-webpage.html
<p>Here is a link to my <a href="favorite-things.html">favorite things</a>.</p>

Замест таго каб усталёўваць абсалютны (глабальны) шлях да старонкі мы выкарысталі адносны шлях (relative path). Калі спасылка не пачынаецца з http:// (або https:// і яшчэ пары пратаколаў) Ваш браўзер будзе шукаць старонку ў той жа тэчцы дзе знаходзіцца Ваш файл.

Гэта стварае магчымасьць трапіць у пастку: калі Вы спасылаецеся на <a href="www.course.by">link</a>, браўзер будзе шукаць файл www.course.by у бягучай тэчцы. Таму, калі Вы спасылаецеся на знешні сайт не забывайцеся дадаваць http:// з пачатку спасылкі!

Давайце зробім нашую старонку крыху прыгажэй. Захавайце малюнак з Вашым коцікам у тэчцы дзе знаходзяцца HTML-файлы і потым дадайце спасылку як тут:

my-first-webpage.html
<img src="kitten.png" alt="A photo of me with my cute kitten ^_^ .">

Тэг <img> трохі адрозніваецца ад тэгаў зь якімі мы сустракаліся раней – ён самазачыняючы: ня трэба пісаць зачыняючы тэг. Таксама звярніце ўвагу на атрыбут alt, тэкст з гэтага атрыбута адлюструецца калі ў браўзера не атрымалася загрузіць малюнак. Атрыбут не абавязковы, але яго добра юзаць тады, калі Вы прыстасоўваеце свой сайт для людзей у якіх, напрыклад, праблемы са зрокам – праграмы якія чытаюць старонкі прачытаюць менавіта гэты тэкст.

Звычайна малюнкі якія выкарыстоўваюцца на старонках захоўваюцца ў асобный тэчцы. Давайце створым тэчку img і пакладзем файл з малюнкам туды. Зараз нам трэба абнавіць код каб сказаць браўзеру дзе зараз знаходзіцца малюнак:

my-first-webpage.html
<img src="img/kitten.png" alt="A photo of me with my cute kitten ^_^ .">

img/kitten.png кажа браўзеры што шукаць kitten.png трэба ў тычцы img у бягучай тэчцы.

Давайце абнавім старонку з любімымі рэчамі дадаючы новыя элементы, пра які мы даведаліся:

favorite-things.html
<!DOCTYPE html>
<html>
<head>
    <title>My favorite things</title>
</head>
<body>
    <h1>My favorite things</h1>
    <h2>These are a few of my favorite things.</h2>

    <h3>People</h3>
    <p>Here are some of my favorite <em>people</em>!</p>
    <ul>
        <li>
            <a href="http://www.example.com/chris.html">
                My brother <strong>Chris</strong>
                <img src="img/chris.png" alt="A tiny photo of this jerk.">
            </a>
        </li>
        <li>
            My mom and dad:
            <ul>
                <li>
                    <a href="http://www.example.com/steve.html">
                        <strong>Steve</strong>
                        <img src="img/steve.png" alt="A photo of Steve.">
                    </a>
                </li>
                <li>
                    <a href="http://www.example.com/sarah.html">
                        <strong>Sarah</strong>
                        <img src="img/sarah.png" alt="A photo of Sarah.">
                    </a>
                </li>
            </ul>
        </li>
        <li>
            <a href="http://www.example.com/ulad.html">
                My friend <strong>Ulad</strong>
                <img src="img/ulad.png" alt="A photo of Ulad.">
            </a>
        </li>
        <li>
            <a href="http://www.example.com/ulad2.html">
                My friend <strong>Ulad 2</strong>
                <img src="img/ulad2.png" alt="A photo of second Ulad.">
            </a>
        </li>
    </ul>

    <p>Thanks for reading about me!</p>
</body>
</html>

Зараз давайце трохі папрактыкуемся.

  • Замяніце ўсе Вашыя тэгі <strong> на <del>. Як Вы думаеце што значыць гэты тэг? А што значыць sup?
  • У старонцы favorite-things.html у секцыі з сябрамі дадайце спасылкі на прафайлы з сацыяльных сетак Вашых сяброў.
  • Дадайце на старонку з коцікам і блог Вашага сабакі фоты, спасылкі і тэгі <strong> і <em> tags.
  • А што атрымаецца калі “улажыць” адзін радковы элемент у другі? Напрыклад так: <strong> <em>people</em> </strong>?
  • Даведайцеся што атрымаецца калі “улажыць” блочны элемент у радковы.

Не забывайцеся рабіць водступы!

Стылізаваньне тэксту

Давайце не будзем хаваць адзін ад аднаго – тыя старонкі, якія мы зрабілі раней выглядаюць жахліва і мы пакуль ня ведаем сродкаў як гэта выправіць. Таму вітайце CSS – што азначае Cascading Style Sheets (Каскадныя Табліцы Стыляў). У 1994 годзе CSS быў створан для таго, каб дапамагчы HTML выглядаць прагажэй. Кажучы больш канкрэтна існуе тры тэхналёгіі HTML, CSS і JavaScript. Кожная адказвае за сваю частку. HTML за тое што будзе адлюстрована на старонцы. CSS за тое як гэта будзе адлюстрована. І JavaScript за тое, як гэта ўсё будзе ўзаемадзейнічаць паміж сабой.

Паспрабуйце дадаць элемент style у тэг head з наступным зместам:

favorite-things.html
<head>
  <title>My favorite things</title>
  <style>
    h1{
      color: blue;
    }
  </style>
</head>
...

Тут я не адлюстроўваю ўсю старонку каб не займаць шмат месца.

Зараз праглядзіце старонку. Што зьмянілася?

Коляр! Клёва?

style – гэта такі спецыяльны элемент html, які выкарыстоўваецца для таго, каб унутры яго пісаць css. Частка h1 завецца CSS-selector. CSS-selector таму што ён выбірае (selects) элементы, да якіх павінны прамяняцца стылі.

То бок у нашым выпадку Вы сказалі што ў элемента h1 коляр тэксту павінен быць блакітным.

Частка color завецца уласьцівасьцю (property) а blue завецца значэньнем (value).

Ну і як заўсёды звярніце ўвагу на водступы – я маніякальна Вам пра гэта нагадваю.

Зараз давайце дададзім яшчэ стыляў:

favorite-things.html
<head>
  <title>My favorite things</title>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }

    h2 {
      font-style: italic;
      text-align: center;
    }

    p {
      font-family: sans-serif;
    }

    ul {
      font-size: 20px;
      line-height: 30px;
    }
  </style>
</head>
...

Воў воў, напэўна шмат чаго зьмянілася на Вашай старонцы.

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

Sans Serif гэта абагульненая назва сям’і шрыфтоў без “засечкаў”.

Тэкставыя назвы каляроў як blue, якую мы выкарысталі для h1, насамрэч ня вельмі папулярныя. Часьцей карыстаюцца трох- альбо шасцілічбавым шаснаццатковым (hexadecimal) запісам:

h1 {
  color: #00f;
}

ці як тут:

h1 {
  color: #0000ff;
}

Дзве гэтыя формы запісу гэта тое ж самае што і проста blue. Праз некалькі заняткаў мы пазнаёмімся з інструментамі распрацоўкі, якія дазваляюць выбіраць коляр візуальна, а пакуль можна каляры, якія Вам падабаюцца, гугліць.

Магчыма ў Вас узьнікне пытаньне, чаму мы зрабілі <h2> курсівам праз CSS замест таго, каб проста пададаваць тэгі <em>. Асноўная перавага CSS ў тым, што з дапамогай яго можна адначасова змяняць стылі ў некалькі месцах. Уявіце што мы маем <em> унутры <h2> каб зрабіць тэкст курсівам. Калі мы, напрыклад, у далейшым палічым што мы хочам каб нашыя загалоўкі былі напісаны тлустым замест курсасіва, нам спатрэбіцца замяняць усе <em> тэгі на <strong>. Карыстаючыся CSS instead, нам трэба зьмяніць толькі адно CSS-правіла і кожны элемент <h2> зьменіцца адпаведна.

Такі падыход вельмі важны ў праграмаваньне. Гэтым праграмаваньне адрозьніваецца ад будаўніцтва. У будаўніцтве Вы будуеце аднойчы, т.б. – пабудавалі і забылі. У праграмаваньні ўсе трошкі ня так. Калі Вы скончваеце распрацоўку сайта, Вы адразу пачынаеце новы працэс – падтрымку сайта, фіксаваньне багаў, паляпшэньне функцыянала, рэдызайн і г.д. CSS у гэтым пляне вельмі дапамагае – яго лёгка зьмяняць. Існуе такое клёвае правіла: добры код – гэта той код, які лёгка зьмяняць. Арыентуйцеся на яго.

Каб ацаніць магчымасьці CSS, можна паглядзець сайт CSS Zen Garden. Ціская на спасылкі з правага боку старонкі Вы будзеце прымяняць розныя CSS стылі не зьмяняя структуру HTML. Старонка будзе поўнасьцю трансфармавацца – зьмены ў HTML не патрэбны.

Вашая чарга:

  • Даведайцеся што значась CSS уласьцівасьці font-weight і line-height.
  • Падумайце як бы мог выгладаць блог Вашага коціка. Шукаеце крыніцу для натхненьня? Паспрабуйце – dribble. Гэта сайт, на якім можна праглядзець апошнія трэнды ў дызайне. Штосьці падглядзець і выкарыстаць у сваім сайце. Зрабіце пошук па, напрыклад, ключавым слове – metro. Шмат натхненьня атрымаецца.
    Выкарыстоўваючы CSS адпрыгажуйце блогі коціка і сабакі, такім чынам, каб Вам падабалася.

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