[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.64,0:00:03.88,Default,,0000,0000,0000,,Ở đây tôi có một trang web với ảnh của Oh Noes,
Dialogue: 0,0:00:03.88,0:00:07.86,Default,,0000,0000,0000,,đang sợ hãi vì sắp tới tận thế rồi,
Dialogue: 0,0:00:07.86,0:00:10.47,Default,,0000,0000,0000,,chỉ còn 500 giây.
Dialogue: 0,0:00:10.47,0:00:13.36,Default,,0000,0000,0000,,Tôi muốn cải tiến trang web này hơn một chút,
Dialogue: 0,0:00:13.36,0:00:16.93,Default,,0000,0000,0000,,bằng cách biến số này thành một số đếm ngược,
Dialogue: 0,0:00:16.93,0:00:20.78,Default,,0000,0000,0000,,để người dùng có thể xem xem còn chính xác bao nhiêu giây nữa.
Dialogue: 0,0:00:20.78,0:00:23.93,Default,,0000,0000,0000,,Khi tạo hình động cho một trang web,
Dialogue: 0,0:00:23.93,0:00:26.71,Default,,0000,0000,0000,,ta cần tìm element cần động,
Dialogue: 0,0:00:26.71,0:00:29.30,Default,,0000,0000,0000,,và thay đổi element đó đi,
Dialogue: 0,0:00:29.30,0:00:32.78,Default,,0000,0000,0000,,như ở đây là thay đổi số giây còn lại.
Dialogue: 0,0:00:32.78,0:00:37.69,Default,,0000,0000,0000,,Bước đầu tiên là tìm số đếm ngược đấy theo id.
Dialogue: 0,0:00:37.69,0:00:39.49,Default,,0000,0000,0000,,Đơn giản thôi.
Dialogue: 0,0:00:39.49,0:00:44.42,Default,,0000,0000,0000,,[gõ...]
Dialogue: 0,0:00:47.54,0:00:51.61,Default,,0000,0000,0000,,Bước thứ 2, tôi sẽ tạo một hàm để đếm ngược về 0.
Dialogue: 0,0:00:51.61,0:00:54.59,Default,,0000,0000,0000,,[gõ...]\N[typing]
Dialogue: 0,0:00:54.59,0:00:56.86,Default,,0000,0000,0000,,Giờ ta sẽ
Dialogue: 0,0:00:56.86,0:01:01.22,Default,,0000,0000,0000,,đặt text.Content, đặt cho bằng
Dialogue: 0,0:01:01.22,0:01:03.76,Default,,0000,0000,0000,,số trước trừ 1.
Dialogue: 0,0:01:03.76,0:01:06.80,Default,,0000,0000,0000,,Cái textContent này vốn thuộc kiểu string,
Dialogue: 0,0:01:06.80,0:01:09.95,Default,,0000,0000,0000,,nên ta sẽ chuyển nó về kiểu số.
Dialogue: 0,0:01:09.95,0:01:12.85,Default,,0000,0000,0000,,Ta đổi về kiểu số bằng hàm parseFloat().
Dialogue: 0,0:01:12.85,0:01:15.75,Default,,0000,0000,0000,,Rồi trừ 1 từ số đó đi.
Dialogue: 0,0:01:15.75,0:01:21.54,Default,,0000,0000,0000,,Cuối cùng ta sẽ cứ cách 1 quãng thời gian thì gọi hàm này để chạy,\NOkay, so finally, we want to
Dialogue: 0,0:01:21.54,0:01:25.33,Default,,0000,0000,0000,,tức là sẽ cứ mỗi giây chạy 1 lần.\Nwhich means a certain
Dialogue: 0,0:01:25.33,0:01:30.42,Default,,0000,0000,0000,,Ta làm thế bằng hàm window.setInterval().
Dialogue: 0,0:01:30.42,0:01:33.69,Default,,0000,0000,0000,,Hàm này sẽ nhận 2 argument:
Dialogue: 0,0:01:33.69,0:01:38.10,Default,,0000,0000,0000,,hàm callback, và số milliseconds (0.001 giây) cần đợi
Dialogue: 0,0:01:38.10,0:01:40.88,Default,,0000,0000,0000,,giữa mỗi lần gọi hàm callback kia.
Dialogue: 0,0:01:40.88,0:01:43.37,Default,,0000,0000,0000,,Ta truyền hàm callback vào
Dialogue: 0,0:01:43.37,0:01:46.81,Default,,0000,0000,0000,,cũng như lúc truyền hàm cho event listener vào: nhập tên hàm vào.
Dialogue: 0,0:01:46.81,0:01:49.35,Default,,0000,0000,0000,,Giờ bạn thấy số đếm ngược đang nhanh quá,
Dialogue: 0,0:01:49.35,0:01:51.83,Default,,0000,0000,0000,,bởi vì ta chưa nhập vào argument thứ 2,
Dialogue: 0,0:01:51.83,0:01:55.25,Default,,0000,0000,0000,,tức là số millisecond cần đợi.
Dialogue: 0,0:01:55.25,0:01:58.52,Default,,0000,0000,0000,,Ta muoosnd dợi 1 giây, nên sẽ nhập vào số 1000.
Dialogue: 0,0:01:58.52,0:02:01.56,Default,,0000,0000,0000,,bởi vì 1000ms là 1s.
Dialogue: 0,0:02:01.56,0:02:05.22,Default,,0000,0000,0000,,Thế là xong, giờ nó đang đếm ngược mỗi 1s rồi.
Dialogue: 0,0:02:05.22,0:02:10.24,Default,,0000,0000,0000,,Chỉ còn có 490 giây thôi!
Dialogue: 0,0:02:10.24,0:02:15.04,Default,,0000,0000,0000,,Còn một hàm window nữa mà ta cũng thường dùng ngoài setInterval(),
Dialogue: 0,0:02:15.04,0:02:17.23,Default,,0000,0000,0000,,là hàm setTimeout().
Dialogue: 0,0:02:17.23,0:02:21.78,Default,,0000,0000,0000,,Tôi sẽ sửa chỗ này đi thế, bạn xem có khác gì không.
Dialogue: 0,0:02:21.78,0:02:23.68,Default,,0000,0000,0000,,Đợi 1 giây rồi.
Dialogue: 0,0:02:23.68,0:02:28.30,Default,,0000,0000,0000,,Bạn thấy đây, khi dùng setTimeout
Dialogue: 0,0:02:28.30,0:02:33.88,Default,,0000,0000,0000,,thì trình duyệt chỉ gọi hàm đó 1 lần, chứ không lặp lại.
Dialogue: 0,0:02:33.88,0:02:38.70,Default,,0000,0000,0000,,Thế thì không hữu dụng lắm khi tạo hình động,
Dialogue: 0,0:02:38.70,0:02:41.73,Default,,0000,0000,0000,,nhưng có thể hữu dụng trong trường hợp khác,
Dialogue: 0,0:02:41.73,0:02:45.87,Default,,0000,0000,0000,,ví dụ như khi ta muốn trình duyệt hiện một cảnh báo ra cho người dùng
Dialogue: 0,0:02:45.87,0:02:48.09,Default,,0000,0000,0000,,rồi sau 10s thì ẩn đi.
Dialogue: 0,0:02:48.09,0:02:52.89,Default,,0000,0000,0000,,Tôi sẽ đổi cái này về lại setInterval.
Dialogue: 0,0:02:52.89,0:02:56.51,Default,,0000,0000,0000,,Khi ta test hình động thế này,
Dialogue: 0,0:02:56.51,0:03:00.41,Default,,0000,0000,0000,,ta cần kiểm tra kĩ xem từng điểm trong quá trình động sẽ thay đổi thế nào,
Dialogue: 0,0:03:00.41,0:03:02.46,Default,,0000,0000,0000,,như là khi về 0 thì sẽ thế nào.
Dialogue: 0,0:03:02.46,0:03:05.26,Default,,0000,0000,0000,,Mà đợi cái này về 0 thì lâu lắm,
Dialogue: 0,0:03:05.26,0:03:07.21,Default,,0000,0000,0000,,chán ngấy ra mất, nên
Dialogue: 0,0:03:07.21,0:03:10.58,Default,,0000,0000,0000,,ta sẽ sửa mốc ban đầu thành 5,
Dialogue: 0,0:03:10.58,0:03:12.54,Default,,0000,0000,0000,,rồi xem xem.
Dialogue: 0,0:03:12.54,0:03:16.73,Default,,0000,0000,0000,,4, 3, 2, 1, 0...
Dialogue: 0,0:03:16.73,0:03:19.29,Default,,0000,0000,0000,,-1, -2,...
Dialogue: 0,0:03:19.29,0:03:21.88,Default,,0000,0000,0000,,Thế này là không được rồi.
Dialogue: 0,0:03:21.88,0:03:26.29,Default,,0000,0000,0000,,Khi hết giờ, tận thế rồi, thì cần có nổ "Kaboom" và không được đếm nữa.
Dialogue: 0,0:03:26.29,0:03:30.11,Default,,0000,0000,0000,,Tức là ta sẽ cần dừng hình động này lại
Dialogue: 0,0:03:30.11,0:03:32.73,Default,,0000,0000,0000,,khi chạm về số 0.
Dialogue: 0,0:03:32.73,0:03:36.32,Default,,0000,0000,0000,,Ta sẽ thực hiện cái đó với điều kiện 'if' trong hàm này.
Dialogue: 0,0:03:36.32,0:03:42.23,Default,,0000,0000,0000,,Tôi sẽ gán thời gian hiện tại vào một biến,
Dialogue: 0,0:03:42.23,0:03:44.52,Default,,0000,0000,0000,,vì ta sẽ phải kiểm tra giá trị đó.
Dialogue: 0,0:03:44.52,0:03:47.51,Default,,0000,0000,0000,,Tôi lấy cái này, đặt vào đây,
Dialogue: 0,0:03:47.51,0:03:51.27,Default,,0000,0000,0000,,và sửa cái này thành currentTime.
Dialogue: 0,0:03:51.27,0:03:55.56,Default,,0000,0000,0000,,Giờ tôi sẽ viết điều kiện if
Dialogue: 0,0:03:55.56,0:04:01.10,Default,,0000,0000,0000,,để chỉ thay đổi dòng text nếu currentTime lớn hơn 0.
Dialogue: 0,0:04:01.10,0:04:04.94,Default,,0000,0000,0000,,Khi lớn hơn 0 thì ta mới trừ 1 đi.
Dialogue: 0,0:04:04.94,0:04:10.50,Default,,0000,0000,0000,,Tôi sẽ đặt cái này vào đây.
Dialogue: 0,0:04:10.50,0:04:15.01,Default,,0000,0000,0000,,Thế này là được rồi, nhưng vẫn chưa hay lắm,
Dialogue: 0,0:04:15.01,0:04:19.44,Default,,0000,0000,0000,,vì trình duyệt vẫn gọi hàm này 1 giây 1 lần
Dialogue: 0,0:04:19.44,0:04:21.56,Default,,0000,0000,0000,,khi ta còn mở trang này (cho dù chữ không thay đổi nữa).
Dialogue: 0,0:04:21.56,0:04:24.84,Default,,0000,0000,0000,,Ta không nên bắt trình duyệt làm việc thừa như thế.
Dialogue: 0,0:04:24.84,0:04:27.58,Default,,0000,0000,0000,,Còn nhiều việc khác cần làm.
Dialogue: 0,0:04:27.58,0:04:30.94,Default,,0000,0000,0000,,Vậy nên ta cần bảo trình duyệt là
Dialogue: 0,0:04:30.94,0:04:35.58,Default,,0000,0000,0000,,khi về 0 rồi thì không cần gọi hàm này nữa.
Dialogue: 0,0:04:35.58,0:04:40.38,Default,,0000,0000,0000,,Ta sẽ làm thế với hàm window.clearInterval().
Dialogue: 0,0:04:40.38,0:04:47.35,Default,,0000,0000,0000,,Ta đặt thêm else vào đây... window.clearInterval().
Dialogue: 0,0:04:47.35,0:04:52.19,Default,,0000,0000,0000,,Ta cần nhập vào 1 argument để nó biết là cần xoá interval nào,
Dialogue: 0,0:04:52.19,0:04:55.80,Default,,0000,0000,0000,,bởi vì có những lúc ta lại cần xoá nhiều interval trong trang web.
Dialogue: 0,0:04:55.80,0:04:58.90,Default,,0000,0000,0000,,Thế biết interval nào cần xoá 
Dialogue: 0,0:04:58.90,0:05:02.98,Default,,0000,0000,0000,,thì ta chỉ cần gán kết quả của setInterval() vào một biến.
Dialogue: 0,0:05:02.98,0:05:07.82,Default,,0000,0000,0000,,Giờ là ta đã có một biến thời gian, tôi copy paste nó vào đây,
Dialogue: 0,0:05:07.82,0:05:11.12,Default,,0000,0000,0000,,như vậy là biết được cần xoá interval nào khi về 0 rồi,
Dialogue: 0,0:05:11.12,0:05:15.57,Default,,0000,0000,0000,,thế thì trình duyệt sẽ không gọi hàm kia nữa.
Dialogue: 0,0:05:15.57,0:05:19.33,Default,,0000,0000,0000,,Với tất cả các hình động mà bạn viết, bạn cần để ỹ kĩ
Dialogue: 0,0:05:19.33,0:05:21.70,Default,,0000,0000,0000,,về điều kiện để dừng chuyển động đó.
Dialogue: 0,0:05:21.70,0:05:26.13,Default,,0000,0000,0000,,Cũng có những hình động mà bạn muốn chạy vô tận,
Dialogue: 0,0:05:26.13,0:05:29.02,Default,,0000,0000,0000,,nhưng mà cần để ý kĩ.
Dialogue: 0,0:05:29.02,0:05:33.60,Default,,0000,0000,0000,,Vì trình duyệt của bạn đang phải làm việc tốn tài nguyên mỗi khi gọi hàm callback về.
Dialogue: 0,0:05:33.60,0:00:00.00,Default,,0000,0000,0000,,Tiếp teho ta sẽ cải tiến hình động này thêm nữa để cho giống tận thế thật.