Перад тым як пачаць:
Адна з цудоўных і адначасова жудасных рысаў Javascript’а гэта тое, што Вы можаце рабіць адну і тую ж рэч абслалютна рознымі падыходамі. У час вывучэньня Javascript я настойліва раю абраць адзін рэсурс (сайт, кнігу, відэё), адкуль Вы будзеце чэрпаць Вашыя веды (пажадана наш сайт :)), і прытрымлівацца яго. Інакш Вы рызыкуеце заблытацца ў вялікай колькасьці розных падыходаў.

Арытметыка Javascript

Javascript – гэта адзіная мова праграмаваньня якая можа выконвацца ў браўзеры. То бок, тая праграма ў якой Вы чытаеце гэты сайт, можа выконваць код мовы Javascript, якую мы будзем вывучаць.

Для гэтага занятка і заняткаў далей я буду лічыць, што Вы карыстаецеся браўзерам Google Chrome (хром), бо ён самы прасунуты ў пляне распрацоўкі на Javascript. Спампаваць яго можна з сайту Google Chrome.

У хроме ёсьць маленькая джаваскріпт кансоль, якая дазваляць Вам пісаць у ёй джаваскріпт код. Каб адчыніць яе запусціце хром, цісніце на кнопку ☰, адчыніце Tools і цісніце JavaScript Console. Ці проста адначасова націсніце Ctrl + Shift + J.

Адчыніцца камандны радок, які будзе пачынацца з >. Гэта і ёсьць Ваша джаваскріпт кансоль. Вы можаце пісаць код проста тут. Паспрабуйце надрукаваць 1+2; і ціснуць Enter.

Віншую! Вы толькі што выканалі Ваш першы джаваскріпт код!

Калі далей Вы будзеце бачыць знак гэта значыць што код трэба выканаць у джаваскріпт кансолі.

Вы павінны ўбачыць нешта накшталт:

  • 1 + 2;
3

Javascript узяў Ваш код – 1 + 2 – запусьціў, падлічыў і вярнуў вынік – 3.

Запомніце! Кожны раз калі я кажу “вярнуў вынік” у дачыньні да коду – я маю наўвазе што код падлічыў вынік і аддаў яго мне далей, каб я ім карыстаўся.

Коска з кропка напрыканцы кажуць джаваскріпту, што ён павінен выканаць усё, што знаходзіцца да гэтага знаку.

Зараз паспрабуйце больш складаныя рэчы:

  • 4 - 3;
  • 5 * 6;
  • 7 + 8 * 9;
  • (7 + 8) * 9;
  • 10 / 2;
  • 18 / 4;

+, -, * і / завуцца аператарамі. Аператар гэта спецыяльны сымбал (ці сімбалы) якія вызначыюць якое-небудзь дзеяньне.

Паспрубуйце яшчэ самі. Як выдумаеце што значыць аперацыя % (modulo)? Але ня думайце што яна мае нейкае дачыненьне да аперацый з адсоткамі!

Паспрабуйце падзяліць 0 на 0. Вынік будзе NaN, што азначае not a number (не лік). У джаваскріпце NaN разглядаецца як лік, што можа падацца трохі странным спачатку.

Паспрабуйце падзяліць 5 на 0? Што вернецца?

Зьменныя

Паспрабуйце наступнае:

  • var myNumber = 42;
  • myNumber;

myNumber гэта зьменная якую мы ўсталявалі роўнай 42. На другім радку, дзе мы надрукавалі myNumber і потым ціснулі Enter, Javascript вярнуў значэньне зьменнай.

Вы можаце зьмяніць значэньне зьменнай:

  • myNumber = 42
  • myNumber
  • myNumber = 51
  • myNumber

Часам Вы будзеце бачыць што зьменная першапачаткова ініцыялізуецца без ключавога слову var як тут напрыклад:

  • myNumber = 45;

Гэта будзе працаваць… большасьць часу, але можа стварыць шмат непрыемных сітуацый у далейшай распрацоўцы. Таму набывайце сабе звычку выкарыстоўваць var заўсёды калі Вы ствараеце новую зьменную, тым самым Вы пазбавіцеся вялікай колькасьці праблем у будучыні.

Усталюйце зьменную favoriteNumber, якая будзе роўнай Вашаму любімаму ліку. Стварыце якія-небудзь яшчэ зьменныя.

Арытмэтыка са зьменнымі

Вы можаце рабіць любыя простыя аперацыі:

  • favoriteNumber = 12;
  • favoriteNumber * 4;

Паспрабуйце яшчэ самі.

Ці зьмяняецца значэньне зьменнай калі Вы робіце аперацыі зь ёй?

  • favoriteNumber = 9;
  • favoriteNumber + 2;
  • favoriteNumber;

Неа. А што калі зрабіць вось так:

  • favoriteNumber = 10;
  • favoriteNumber = favoriteNumber + 1;
  • favoriteNumber;

Вось кароткі запіс таго ж самага: favoriteNumber += 1.

Вы можаце карыстацца ня толькі адной зьменнай:

  • var num1 = 5;
  • var num2 = 6;
  • var num3 = num1 + num2;
  • num3;

Пагуляйце са зьменнымі, усталёўваючы іх у розныя значэньні. Рабіце розныя аперацыі зь імі. Калі адчуеце сябе ўпэўнена – рухайцеся далей.

Што такое мэтады?

Вы ведаеце асновы лікаў, а зараз давайце разбярэмся што зь імі можна рабіць.

Калі Вы не знаёмы з экспаненцыйнай формай запісу лікаў, вось як яна працуе. Напрыклад ёсьць лік 78.5. У экспаненцыйнай форме запісу лік будзе запісаны як 7.85 * 10. Ці напрыклад 356.97; у экспаненцыйнай форме 3.5697 * 102. Ці можна запісаць як 3.5697e+2.

З дапамогай экспаненцыйнай натацый можна запісваць вельмі маленькія і вельмі вялікія лікі. Напрыклад 1,000,000,000 становіцца 1e+9, а 0.00000002 – 2e-8.

З джаваскріптом можна проста пераробліваць лік з адной формы запісу ў іншую:

  • 48432.78.toExponential();
"4.843278e+4"

toExponential() завецца мэтадам. Вы можаце думаць пра мэтад як аб паведамленьне якое мы дасылаем ліку, вынік які мы атрымліваем – гэта адказ які дае лік на гэтае паведамленьне.

Можна пайсьці наадварот і пераўтварыць лік у экспаненцыйнай форме запісу ў звычайную:

  • 4.587e2.toFixed();
"459"

Мэтад toFixed() акругліць лік да бліжэйшага цэлага. Вось як можна паведаміць мэтаду якую колькаць дробных лічбаў мы хочам пакінуць:

  • 46.1.toFixed(2);
46.10

Лічба 2 у дужках завецца аргумэнтам мэтада toFixed(). Аргумэнты дапамагаюць мэтадам больш падрабязна разумець што яны павінны зрабіць. У гэтым выпадку аргумэнт зьяўляецца неабавязковым. Калі мэтад не прымае аргумэнтаў, ці прымае, але яны зьяўляюцца неабавязковымі, Вам усё адно трэба пісаць дужкі. Т.б. 1.05e3.toFixed() але не 1.05e3.toFixed.

Вось яшчэ мэтад які прымае аргумэнт:

  • 8.12345.toPrecision(4);
8.123

Вы таксама можаце выклікаць мэтад у зьменнай, бо зьменная ёсьць проста лік, які яна ўяўляе:

  • var myNumber = 8.12345;
  • myNumber.toPrecision(4);

Радкі (String)

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

  • "Hello world!";

Рэч якая знаходзіцца паміж двукосьсямі завецца радок (string). Радкі могуць складацца з літараў, знакаў прыпынку й нават лікаў. Гэта ўсё радкі:

  • "1672";
  • "!?&";
  • "I am 23 years old! (or at least I was when I wrote that =))";

Напішыце прывітаньне свайму лепшаму сябру.

А што калі мы ня будзем ставіць двукосьсі?

  • hello

Так ня будзе працаваць бо Javascript думае, што мы кажам яму нешта пра зьменныя ці мэтады замест радка “hello”.

Мы таксама можам усталёўваць зьменныя роўныя радкам:

  • var myString = "Strings may contain characters like @, $, and %.";
  • myString;

Усталюйце зьменную роўную радку.

Ці зразумелі Вы розніцу паміж "5" і 5?

Радкі й мэтады

Вы можаце выклікаць мэтады ў радкоў гэтак жа як і ў лікаў:

  • "NeverahodnaVialikiRadokZShasciSlou".toUpperCase();

Ці так:

  • var longWord = "NeverahodnaVialikiRadokZShasciSlou";
  • longWord.toUpperCase();

Паспрабуйце яшчэ мэтад toLowerCase().

Мэтады радкоў, так жа як і мэтады лікаў могуць прымаць аргумэнты. Напрыклад выканайце:

  • var word = "foo";
  • word.concat("bar");

Здагадаліся што тут атрымалася? Вось яшчэ мэтад, які вяртае сымбал па нумару пазіцыі:

  • "javascript".charAt(5);

Ці заўважылі Вы нешта страннае ў гэтым прыкладзе? Які пяты па ліку сымбал у слове “javascript”? Вядома, калі лічыць нармальна, "j" гэта першы сымбал, а "s" пяты. Але JavaScript кажа што сымбал на пятай пазіцыі гэта "c". Гэта таму што кампутары пачынаюць лічыць з нуля. Таму "j" гэта нулявы сымбал, а "c" пяты.

На месцы аргумэнта Вы таксама можаце пісаць любы код. Напрыклад як тут:

  • "javascript".charAt(10 - 5);

Дарэчы, замест мэтада concat() можна выкарыстоўваць проста +:

  • "I love" + " " + "this lesson";

Дакумэнтацыя Javascript

Вы ўжо ведаеце пра некалькі мэтадаў лікаў і радкаў але іх існуе вельмі шмат! Лепшае месца каб пачытаць пра мэтады, якія Вы ведаеце, і даведацца пра новыя гэта дакумэнтацыя Javascript. Напэўна пакуль яна будзе выглядаць зусім не зразумелай, але пачніце праглядаць яе з тых мэтадаў якія Вы ведаеце, напрыклад concat() і charAt(). Даведайцеся што робіць мэтад indexOf() і пагуляйце зь ім. Потым праглядзіце старонкі пра радкі (strings) і лікі (numbers). Магчыма Вы знойдзеце мэтады, якія цікавыя Вам. Пагуляйце зь імі. Гэта дапаможа Вам потым.

Існуе шмат дрэнных рэсураў у інтэрнэце дзе можна даведацца пра джаваскріпт. Mozilla Developer Network (спасылкі сверху), гэта лепшая крыніца інфармацыі па джаваскрыпту, таму спачатку заўсёды глядзіце туды.

Stack Overflow гэта яшчэ адзін добры рэсурс, дзе пытаюць і адказваюць на пытаньні па праграмаваньню. Хутчэй за ўсё адказы на большасьць Вашых пытаньняў па праграмаваньню Вы знойдзеце менавіта там. Перад тым як посціць новае пытаньне, спачатку пашукайце, ці няма ўжо такога. І адказвайце на пытаньню іншых людзей, калі ведаеце адказ!

Ланцужкі мэтадаў (Method chaining)

Паспрабуйце:

  • var result = "foo".concat("bar");
  • result.toUpperCase();

Было б файна калі б была магчымасьць пазбавіцца ад стварэньня зьменнай result, так? Яна ёсьць:

  • "foo".concat("bar").toUpperCase();

Мэтад concat() (які складае (concatenates) два радкі) вярнуў радок, у якога потым быў выкліканы мэтад toUpperCase(). У канцы toUpperCase() вярнуў канчатковы вынік.

Гэта завецца ланцужок мэтадаў (methods chain). Вы можаце выклікаць мэтады адзін за аднім столькі разоў колькі хочаце. Яны будуць выкананы злева направа.

Выклікайце некалькі мэтадаў адзін за аднім. Нагадаем мэтады якія Вы ведаеце: concat() toUpperCase() toLowerCase() charAt() indexOf().

Папярэдні занятак Наступны занятак