1
00:00:00,639 --> 00:00:03,875
მაქვს ვებგვერდი, "ოჰ არას" სურათით,

2
00:00:03,875 --> 00:00:07,862
რომელიც გაგიჟებულია, რომ
სამყაროს დასასრული მალე დადგება --

3
00:00:07,862 --> 00:00:10,473
კონკრეტულად, 500 წამში.

4
00:00:10,473 --> 00:00:13,356
მინდა ეს ვებგვერდი
უფრო სასარგებლო გავხადო,

5
00:00:13,356 --> 00:00:16,934
ეს რიცხვი
გადავაქციო რეალურ უკუთვლად,

6
00:00:16,934 --> 00:00:20,781
ისე რომ, ვიზიტორებმა
შეძლონ ნახვა, რამდენი დრო დარჩათ.

7
00:00:20,781 --> 00:00:23,934
ახლა, როცა გავაცოცხლეთ ვებგვერდი,

8
00:00:23,934 --> 00:00:26,708
სტრატეგია შემდეგია: უნდა ვიპოვოთ 
რაღაც ელემენტი მასში,

9
00:00:26,708 --> 00:00:29,303
შემდეგ რაღაც შევცვალოთ
ამ ელემენტში

10
00:00:29,303 --> 00:00:32,779
და ეს რამდენჯერმე გავიმეოროთ.

11
00:00:32,779 --> 00:00:37,693
პირველ რიგში უნდა ვიპოვო მთვლელი
მისი ID-თი

12
00:00:37,693 --> 00:00:39,490
ეს მარტივია.

13
00:00:39,490 --> 00:00:44,417
[ბეჭდავს]

14
00:00:47,536 --> 00:00:51,612
შემდეგ, უნდა დავწერო ფუნქცია, რომელიც
უკუსვლით დაითვლის.

15
00:00:51,612 --> 00:00:54,588
[ბეჭდავს]

16
00:00:54,588 --> 00:00:56,856
შემდეგ კი --

17
00:00:56,856 --> 00:01:01,217
მინდა რომ 'textContent' იყოს

18
00:01:01,217 --> 00:01:03,755
წინა რიცხვს მინუს ერთის ტოლი.

19
00:01:03,755 --> 00:01:06,798
'textContent' რეალურად იქნება ხაზი,

20
00:01:06,798 --> 00:01:09,947
რომელიც გვინდა გადავქციოთ რიცხვად

21
00:01:09,947 --> 00:01:12,853
ამის გაკეთება 'parcfloat()' -ით შეგვიძლია.

22
00:01:12,853 --> 00:01:15,753
შემდეგ კი შეგვიძლია გამოვაკლოთ ამას 1.

23
00:01:15,753 --> 00:01:21,541
დაბოლოს, ჩვენ ამ ფუნქციის გამოძახება
გარკვეული ინტერვალით გვინდა,

24
00:01:21,541 --> 00:01:25,328
ანუ, წამში X-ჯერ.

25
00:01:25,328 --> 00:01:30,415
ამის გაკეთებაში გამოგვადგება
'window.setInterval()'

26
00:01:30,415 --> 00:01:33,691
ეს ფუნქცია მოითხოვს ორ არგუმენტს:

27
00:01:33,691 --> 00:01:38,096
გამოძახების ფუნქციას და მილიწამების
რაოდენობას, რომლის გასვლისასაც

28
00:01:38,096 --> 00:01:40,885
ეს ფუნქცია ისევ უნდა გამოვიძახოთ.

29
00:01:40,885 --> 00:01:43,369
გამოძახების ფუნქციის განსაზღვრა შეგვიძლია
ისევე,

30
00:01:43,369 --> 00:01:46,809
როგორც ის ღონისძიების დამსწრეთათვის
განვსაზღვრეთ: სახელით

31
00:01:46,809 --> 00:01:49,350
შემდეგ კი - ახლა ის ძალიან სწრაფია,

32
00:01:49,350 --> 00:01:51,827
იმიტომ რომ
წამების არგუმენტი არ განგვისაზღვრავს--

33
00:01:51,827 --> 00:01:55,250
გვინდა, რომ ეს მილიწამების გარკვეული
რაოდენობის გასვლისას მეორდებოდეს;

34
00:01:55,250 --> 00:01:58,520
კერძოდ, ერთხელ წამში რომ მეორდებოდეს.
ანუ, ყოველ ათას მილიწამში

35
00:01:58,520 --> 00:02:01,558
იმიტომ რომ წამში ათასი მილიწამია.

36
00:02:01,558 --> 00:02:05,218
მშვენირია, ახლა ყოველ წამში
თითო რიცხვით გადადის უკან.

37
00:02:05,218 --> 00:02:10,245
490 წამი დაგრჩა, რომ მაქსიმალურად ბევრი
რამ ისწავლო!

38
00:02:10,245 --> 00:02:15,036
კიდევ ერთი ფუნქცია, რომელსაც ხანდახან
'setInterval'-ის მაგივრად ვიყენებთ

39
00:02:15,036 --> 00:02:17,227
არის 'setTimeout'

40
00:02:17,227 --> 00:02:21,782
ახლა შევცვლი და დააკვირდით, 
თუ შეამჩნევთ სხვაობას

41
00:02:21,782 --> 00:02:23,681
ერთი წამიც მოიცადეთ..

42
00:02:23,681 --> 00:02:28,297
აი, ახლა, ალბათ, ხედავთ, რომ როცა 
ვიყენებთ 'setTimeout' ფუნქციას

43
00:02:28,297 --> 00:02:33,881
ბრაუზერი ფუნქციას იძახებს ერთხელ,
გამეორების გარეშე.

44
00:02:33,881 --> 00:02:38,705
ასე რომ, ამ შემთხვევაში ეგ არ გამოგვადგება.

45
00:02:38,705 --> 00:02:42,212
მაგრამ სხვა შემთხვევებში შეიძლება ძალიან
სასარგბელო ფუნქცია აღმოჩნდეს:

46
00:02:42,212 --> 00:02:45,866
მაგალითად, თუ ჩვენს მომხმარებლებს
გამაფრთხილებელ ბანერს ვუჩვენებთ

47
00:02:45,866 --> 00:02:48,090
და გვინდა, რომ იგი 10 წამში გაქრეს.

48
00:02:48,090 --> 00:02:52,894
ახლა ეს ისევ 'setInterval'-ად
შევცვალოთ.

49
00:02:52,894 --> 00:02:56,507
ახლა, როცა მსგავს ანიმაციებს ვტესტავთ

50
00:02:56,507 --> 00:02:59,990
უნდა ვნახოთ, როგორ გამოიყურება ის თავიდან 
ბოლომდე;

51
00:02:59,990 --> 00:03:02,460
მაგალითად, უნდა ვნახოთ, რა ხდება
როცა მივიღებთ 0-ს.

52
00:03:02,460 --> 00:03:05,258
ძალიან დიდი ხანი მოგივწევს ცდა

53
00:03:05,258 --> 00:03:07,206
რაც მოსაწყენია;

54
00:03:07,206 --> 00:03:10,581
ამიტომ საწყის წერტილად ავიღოთ 5

55
00:03:10,581 --> 00:03:12,538
და ვნახოთ, რა მოხდება.

56
00:03:12,538 --> 00:03:16,732
ოთხი, სამი, ორი, ერთი, ნული...

57
00:03:16,732 --> 00:03:19,289
მინუს ერთი, მინუს ორი.

58
00:03:19,289 --> 00:03:21,878
ეს ცოტა უცნაურია.

59
00:03:21,878 --> 00:03:26,292
როცა სამყარო დასრულდება, უბრალოდ უნდა
ავფეთქდეთ და შევწყვიტოთ თვლა.

60
00:03:26,292 --> 00:03:30,111
გამოდის, რომ ჩვენ გვინდა

61
00:03:30,111 --> 00:03:32,734
შევაჩეროთ უკუთვლა, როცა ის ნულამდე მივა.

62
00:03:32,734 --> 00:03:36,319
ამის გაკეთება 'if' პირობით შეგვიძლია,
ფუნქციის შიგნითვე.

63
00:03:36,319 --> 00:03:42,227
პირველ რიგში, მიმდინარე დრო ცვლადად
უნდა შევინახო, იმიტომ რომ

64
00:03:42,227 --> 00:03:44,517
მას არაერთხელ გამოვიყენებთ.

65
00:03:44,517 --> 00:03:47,513
ავიღოთ ეს, ჩავსავთ აქ;

66
00:03:47,513 --> 00:03:51,273
და ჩავანაცვლოთ ეს ცვლადით 'currentTime'

67
00:03:51,273 --> 00:03:55,564
ახლა უნდა შევქმნა 'if' პირობა,

68
00:03:55,564 --> 00:04:01,097
რომლის გამოც ტექსტი შეიცვლება მხოლოდ მაშინ
როცა 'currentTime' 0-ზე მეტია.

69
00:04:01,097 --> 00:04:04,938
ერთის გამოკლება მხოლოდ ამ შემთხვევაში გვინდა.

70
00:04:04,938 --> 00:04:10,497
ეს აქ უნდა გადავიტანო, შიგნით.

71
00:04:10,497 --> 00:04:15,012
ეს მუშაობს.. თუმცა ამ მიდგომას ერთი დიდი
ნაკლი აქვს.

72
00:04:15,012 --> 00:04:19,444
ბრაუზერი გააგრძელებს ფუნქციის გამოძახებს 
ყოველ ერთ წამში,

73
00:04:19,444 --> 00:04:21,559
სანამ ვებ-გვერდი ღიაა.

74
00:04:21,559 --> 00:04:24,842
ბრაუზერებს კი უამრავი სხვა საქმე აქვთ 
გასაკეთებელი

75
00:04:24,842 --> 00:04:27,581
და ტყუილ-უბრალოდ არ უნდა გამოვაძახებინოთ
ფუნქცია.

76
00:04:27,581 --> 00:04:30,935
ამიტომ, სინამდვილეში გვინდა, რომ


77
00:04:30,935 --> 00:04:35,585
ბრაუზერმა შეწყვიტოს ფუნქციის გამოძახება,
როცა იგი ნულს გაუტოლდება.

78
00:04:35,585 --> 00:04:40,384
ამას ახალი მეთოდის გამოყენებით ვიზამთ,
რომელსაც ჰქვია 'window.clearInterval()'.\

79
00:04:40,384 --> 00:04:47,354
ჩავსვათ ეს 'window.clearInterval()' აქ - 
'else' -ის ველში.

80
00:04:47,354 --> 00:04:52,189
ახლა ფუნქციას უნდა მივაწოდოთ არგუმენტი,
რომ გაიგოს, რომელი ინტერვალი უნდა შეწყვიტოს.

81
00:04:52,189 --> 00:04:55,799
გვერდზე ხომ ბევრი სხვადასხვა ინტერვალი 
შეიძლება, გვქონდეს.

82
00:04:55,799 --> 00:04:58,902
იმისთვის, რომ გავიგოთ, რომელი
ინტერვალია შესაწყვეტი,

83
00:04:58,902 --> 00:05:02,983
'setInterval'-ის შედეგი უნდა შევინახოთ ცვლადად.

84
00:05:02,983 --> 00:05:07,816
ახლა მაქვს მთვლელის ცვლადი, 
რომელიც შემიძლია აქ ჩავსვა

85
00:05:07,816 --> 00:05:11,122
და გავაგებინო ფუნქციას, რა უნდა შეწყდეს
როცა მთვლელი მივა 0-მდე:

86
00:05:11,122 --> 00:05:15,571
უნდა დასრულდეს განახლება 
და ამ ფუნქციის გამოძახება.

87
00:05:15,571 --> 00:05:19,332
ყოველი ანიმაციისთვის ზედმიწევნით ზუსტად
უნდა განსაზღვროთ,

88
00:05:19,332 --> 00:05:21,695
რა პირობით უნდა ჩერდებოდეს იგი.

89
00:05:21,695 --> 00:05:26,132
და კი, შეიძლება ისეთი ანიმაცია შექმნათ,
რომელიც უსასრულოდ უნდა გრძელდებოდეს,

90
00:05:26,132 --> 00:05:29,023
მაგრამ ეს რამე გასაკუთრებით კარგი უნდა იყოს

91
00:05:29,023 --> 00:05:33,600
იმიტომ რომ თქვენი ბრაუზერი რეალურად
იტვირთება, როცა იძახებს რაღაც ფუნქციას.

92
00:05:33,600 --> 00:05:37,600
ახლა კი დროა ავაფეთქოთ ეს სამყარო!