[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:00.82,0:00:03.42,Default,,0000,0000,0000,,Ta lại quay lại về cái đếm ngược Oh Noes.
Dialogue: 0,0:00:03.98,0:00:07.24,Default,,0000,0000,0000,,Giờ nếu ta muốn ảnh của Oh Noes to dần ra
Dialogue: 0,0:00:07.24,0:00:09.59,Default,,0000,0000,0000,,khi đếm ngược dần về 0,
Dialogue: 0,0:00:09.59,0:00:12.27,Default,,0000,0000,0000,,thì phải làm thế nào?
Dialogue: 0,0:00:12.86,0:00:15.29,Default,,0000,0000,0000,,Một cách làm là tạo ảnh động
Dialogue: 0,0:00:15.29,0:00:19.14,Default,,0000,0000,0000,,với CSS của ảnh này với window.setInterval.
Dialogue: 0,0:00:20.66,0:00:22.94,Default,,0000,0000,0000,,Bước đầu tiên, tôi sẽ tìm ảnh này
Dialogue: 0,0:00:22.94,0:00:25.14,Default,,0000,0000,0000,,và gán nó vào một biến.
Dialogue: 0,0:00:25.17,0:00:30.17,Default,,0000,0000,0000,,ohnoes = document.getElemenyById("ohnoes");
Dialogue: 0,0:00:32.14,0:00:34.44,Default,,0000,0000,0000,,Ta đặt style khởi điểm,
Dialogue: 0,0:00:34.44,0:00:36.79,Default,,0000,0000,0000,,tức là sẽ bắt đầu từ chiều rộng này.
Dialogue: 0,0:00:36.79,0:00:39.18,Default,,0000,0000,0000,,Rồi ảnh sẽ lớn dần ra từ đó.
Dialogue: 0,0:00:39.90,0:00:44.26,Default,,0000,0000,0000,,Giờ ta viết một hàm makeItBigger
Dialogue: 0,0:00:44.54,0:00:47.64,Default,,0000,0000,0000,,để làm ảnh to ra từng chút một.
Dialogue: 0,0:00:48.39,0:00:52.74,Default,,0000,0000,0000,,Ở đây ta lấy giá trị style.width,
Dialogue: 0,0:00:53.12,0:00:58.12,Default,,0000,0000,0000,,lấy giá trị style.width từ trước và cộng thêm 1 vào.
Dialogue: 0,0:01:00.24,0:01:04.60,Default,,0000,0000,0000,,Cuối cùng tôi sẽ gọi hàm setInterval với hàm này.
Dialogue: 0,0:01:04.60,0:01:07.62,Default,,0000,0000,0000,,window.setInterval(makeItBigger),
Dialogue: 0,0:01:07.62,0:01:09.70,Default,,0000,0000,0000,,Ta muốn nó to lên từng nào nào?
Dialogue: 0,0:01:09.70,0:01:11.86,Default,,0000,0000,0000,,Hỏi cách khác là cứ bao lâu thì sẽ to lên 1 lần?
Dialogue: 0,0:01:11.86,0:01:13.88,Default,,0000,0000,0000,,Nếu ta ma muốn tạo một hình ảnh động thật mượt,
Dialogue: 0,0:01:13.88,0:01:15.38,Default,,0000,0000,0000,,thì tức là sẽ cần thay đổi trong khoảng tần suất
Dialogue: 0,0:01:15.38,0:01:18.41,Default,,0000,0000,0000,,24 khung hình mỗi giây tới 60 khung hình mỗi giây.
Dialogue: 0,0:01:18.92,0:01:23.92,Default,,0000,0000,0000,,Tôi sẽ thử với 30 khung hình mỗi giây, tức là 1000/3.
Dialogue: 0,0:01:25.66,0:01:28.34,Default,,0000,0000,0000,,Không được rồi.
Dialogue: 0,0:01:29.01,0:01:31.42,Default,,0000,0000,0000,,Bạn biết tại sao không? Hơi rắc rối đấy.
Dialogue: 0,0:01:31.42,0:01:33.96,Default,,0000,0000,0000,,Ta sẽ xem lại xem nào.
Dialogue: 0,0:01:34.14,0:01:39.07,Default,,0000,0000,0000,,Giá trị của ohnoes.style.width
Dialogue: 0,0:01:39.07,0:01:41.14,Default,,0000,0000,0000,,sau khi chạy dòng lệnh này là bao nhiêu nào?
Dialogue: 0,0:01:41.67,0:01:45.72,Default,,0000,0000,0000,,Chắc là 50px rồi sẽ đến 51px rồi,
Dialogue: 0,0:01:45.72,0:01:50.19,Default,,0000,0000,0000,,nhưng ta cứ log ra xem ohnoes.style.width là bao nhiêu.
Dialogue: 0,0:01:50.19,0:01:52.80,Default,,0000,0000,0000,,Ta đặt cái này vào trong infoDiv.
Dialogue: 0,0:01:52.100,0:01:56.30,Default,,0000,0000,0000,,Nó sẽ bằng...
Dialogue: 0,0:01:58.52,0:02:00.79,Default,,0000,0000,0000,,50px, okay.
Dialogue: 0,0:02:00.79,0:02:05.16,Default,,0000,0000,0000,,Rồi khi ta cộng thêm 1 vào 50px,
Dialogue: 0,0:02:05.74,0:02:07.90,Default,,0000,0000,0000,,50px thêm 1 là gì?
Dialogue: 0,0:02:07.90,0:02:11.40,Default,,0000,0000,0000,,Bạn đoán là 51px, nhưng JS
Dialogue: 0,0:02:11.40,0:02:15.37,Default,,0000,0000,0000,,coi 50px là 1 string,
Dialogue: 0,0:02:16.36,0:02:20.40,Default,,0000,0000,0000,,nên thêm 1 sẽ thành 50px1,
Dialogue: 0,0:02:20.40,0:02:22.64,Default,,0000,0000,0000,,tức là chả có ý nghĩa gì.
Dialogue: 0,0:02:22.64,0:02:25.96,Default,,0000,0000,0000,,Như vậy là trình duyệt sẽ không
Dialogue: 0,0:02:25.96,0:02:29.10,Default,,0000,0000,0000,,thay đổi thuộc tính width theo giá trị dở hơi này được rồi.
Dialogue: 0,0:02:29.92,0:02:33.58,Default,,0000,0000,0000,,Vậy là ta sẽ cần chuyển đổi string với đơn vị pixel này
Dialogue: 0,0:02:33.58,0:02:35.96,Default,,0000,0000,0000,,về kiểu số,
Dialogue: 0,0:02:35.96,0:02:37.74,Default,,0000,0000,0000,,rồi cộng 1 vào số đó,
Dialogue: 0,0:02:37.74,0:02:40.40,Default,,0000,0000,0000,,rồi lại thêm "px" vào sau.
Dialogue: 0,0:02:40.98,0:02:45.32,Default,,0000,0000,0000,,Ta có thể đặt cái này vào trong parseFloat,
Dialogue: 0,0:02:45.84,0:02:47.56,Default,,0000,0000,0000,,thế là đổi được về dạng số.
Dialogue: 0,0:02:47.56,0:02:50.09,Default,,0000,0000,0000,,Rồi ta đóng ngoặc cụm này lại,
Dialogue: 0,0:02:50.26,0:02:53.08,Default,,0000,0000,0000,,và thêm "px" vào sau.
Dialogue: 0,0:02:53.08,0:02:56.12,Default,,0000,0000,0000,,Được rồi. Ảnh đang to dần lên rồi.
Dialogue: 0,0:02:57.95,0:02:59.57,Default,,0000,0000,0000,,Bạn thấy cái lằng nhằng 
Dialogue: 0,0:02:59.57,0:03:01.45,Default,,0000,0000,0000,,trong việc tạo hình động với CSS
Dialogue: 0,0:03:01.45,0:03:03.81,Default,,0000,0000,0000,,là thường nó sẽ có cả chữ đơn vị ở sau giá trị số nữa, bạn sẽ phải
Dialogue: 0,0:03:03.81,0:03:06.20,Default,,0000,0000,0000,,chuyển bỏ đơn vị đó đi... trời ơi ảnh to quá...
Dialogue: 0,0:03:06.20,0:03:10.04,Default,,0000,0000,0000,,bạn phải bỏ chữ đơn vị đó ra rồi lại đưa nó lại vào sau.
Dialogue: 0,0:03:12.73,0:03:14.69,Default,,0000,0000,0000,,Ảnh này to ra quá rồi.
Dialogue: 0,0:03:14.69,0:03:17.09,Default,,0000,0000,0000,,Còn một vài vấn đề thường gặp
Dialogue: 0,0:03:17.09,0:03:20.79,Default,,0000,0000,0000,,khi sử dụng setInterval để thay đổi thuộc tính CSS.
Dialogue: 0,0:03:21.51,0:03:24.25,Default,,0000,0000,0000,,Đầu tiên là trình duyệt sẽ không phải lúc nào cũng
Dialogue: 0,0:03:24.25,0:03:28.04,Default,,0000,0000,0000,,đợi đúng theo số interval này.
Dialogue: 0,0:03:28.79,0:03:31.97,Default,,0000,0000,0000,,Nếu có event gì khác xảy ra, như là khi người dùng sử dụng trình duyệt,
Dialogue: 0,0:03:31.97,0:03:35.89,Default,,0000,0000,0000,,gõ gì đó chẳng hạn, thì có thể trình duyệt sẽ đợi xong event đó mới gọi hàm callback này,
Dialogue: 0,0:03:35.89,0:03:38.41,Default,,0000,0000,0000,,thì hoạt hình động trông sẽ không được mượt.
Dialogue: 0,0:03:39.13,0:03:41.57,Default,,0000,0000,0000,,Thứ 2 nữa là trình duyệt sẽ gọi hàm này
Dialogue: 0,0:03:41.57,0:03:43.49,Default,,0000,0000,0000,,kể cả khi tab này ẩn đi,
Dialogue: 0,0:03:43.49,0:03:47.13,Default,,0000,0000,0000,,tức là sẽ tiêu tốn tài nguyên của máy tính.
Dialogue: 0,0:03:48.41,0:03:50.31,Default,,0000,0000,0000,,Vì vậy nên là các trình duyệt hiện đại
Dialogue: 0,0:03:50.31,0:03:52.06,Default,,0000,0000,0000,,có một hàm mới,
Dialogue: 0,0:03:52.06,0:03:55.63,Default,,0000,0000,0000,,chuyên dùng để tạo hoạt hình với DOM,
Dialogue: 0,0:03:55.63,0:03:58.83,Default,,0000,0000,0000,,gọi là window.requestAnimationFrame.
Dialogue: 0,0:03:59.39,0:04:02.89,Default,,0000,0000,0000,,Làm việc với hàm đó, đầu tiên ta sẽ bỏ dòng setInterval này đi
Dialogue: 0,0:04:02.89,0:04:07.89,Default,,0000,0000,0000,,và gọi hàm requestAnimationFrame()
Dialogue: 0,0:04:09.17,0:04:11.73,Default,,0000,0000,0000,,ở trong hàm này.
Dialogue: 0,0:04:11.73,0:04:15.03,Default,,0000,0000,0000,,Và ta sẽ chỉ nó đến 
Dialogue: 0,0:04:15.03,0:04:18.24,Default,,0000,0000,0000,,hàm makeItBigger.
Dialogue: 0,0:04:19.17,0:04:24.12,Default,,0000,0000,0000,,Rồi sẽ sẽ gọi hàm makeItBigger() ngay khi tải trang web.
Dialogue: 0,0:04:27.59,0:04:30.69,Default,,0000,0000,0000,,Oh! Ảnh này đang to lên nahnh quá.
Dialogue: 0,0:04:30.69,0:04:34.67,Default,,0000,0000,0000,,Trình duyệt đang gọi hàm makeItBigger liên tục 
Dialogue: 0,0:04:34.67,0:04:37.83,Default,,0000,0000,0000,,mỗi khi cập nhật ảnh, tức là vào khoảng 60 khung hình một giây,
Dialogue: 0,0:04:37.83,0:04:39.94,Default,,0000,0000,0000,,tức là gấp đôi tần số vừa rồi.
Dialogue: 0,0:04:39.94,0:04:43.11,Default,,0000,0000,0000,,Hàm này cứ mỗi lần lại cộng thêm 1px vào chiều rộng,
Dialogue: 0,0:04:43.11,0:04:45.27,Default,,0000,0000,0000,,tính toán ra thì
Dialogue: 0,0:04:45.27,0:04:48.08,Default,,0000,0000,0000,,là cộng thêm 60px mỗi giây.
Dialogue: 0,0:04:48.08,0:04:50.83,Default,,0000,0000,0000,,Chỉ vài giây là ảnh đã to hơn cả trang rồi.
Dialogue: 0,0:04:50.83,0:04:52.77,Default,,0000,0000,0000,,Giờ to quá đi mất rồi.
Dialogue: 0,0:04:52.77,0:04:55.78,Default,,0000,0000,0000,,Vậy làm sao để làm chậm hoạt hình này lại?
Dialogue: 0,0:04:56.34,0:04:58.54,Default,,0000,0000,0000,,Có một vài cách, nhưng một cách tôi thích dùng
Dialogue: 0,0:04:58.54,0:05:01.32,Default,,0000,0000,0000,,là kiểm tra xem đã chạy bao nhiêu giây rồi,
Dialogue: 0,0:05:01.32,0:05:03.47,Default,,0000,0000,0000,,rồi tính giá trị của chiều rộng
Dialogue: 0,0:05:03.47,0:05:05.17,Default,,0000,0000,0000,,dựa theo giá trị đó.
Dialogue: 0,0:05:05.17,0:05:09.04,Default,,0000,0000,0000,,Ta bắt đầu chép lại thời gian khởi điểm, tính theo ms,
Dialogue: 0,0:05:09.04,0:05:11.03,Default,,0000,0000,0000,,trước khi hàm này được gọi.
Dialogue: 0,0:05:11.03,0:05:14.63,Default,,0000,0000,0000,,var startTime... ảnh lại to ra nữa rồi.
Dialogue: 0,0:05:14.63,0:05:17.41,Default,,0000,0000,0000,,new Date().getTime();
Dialogue: 0,0:05:17.41,0:05:20.87,Default,,0000,0000,0000,,Trong makeItBigger9) thì ta lưu giá trị của thời gian hiện tại.
Dialogue: 0,0:05:20.87,0:05:25.87,Default,,0000,0000,0000,,var currTime = new Date().getTime();
Dialogue: 0,0:05:27.01,0:05:28.69,Default,,0000,0000,0000,,Giờ ta phải tính,
Dialogue: 0,0:05:28.69,0:05:31.65,Default,,0000,0000,0000,,ví dụ nếu muốn ảnh to ra 30px/s,
Dialogue: 0,0:05:31.65,0:05:34.46,Default,,0000,0000,0000,,và bắt đầu từ 50px,
Dialogue: 0,0:05:34.46,0:05:37.18,Default,,0000,0000,0000,,ta tính toán ở đây.
Dialogue: 0,0:05:37.63,0:05:42.63,Default,,0000,0000,0000,,newWidth bằng 50 + ..., 50 là giá trị khởi điểm...
Dialogue: 0,0:05:44.45,0:05:49.03,Default,,0000,0000,0000,,cộng thêm currentTime trừ đi startTime.
Dialogue: 0,0:05:49.03,0:05:50.59,Default,,0000,0000,0000,,Giá trị này là millisecond, nên ta sẽ
Dialogue: 0,0:05:50.59,0:05:53.17,Default,,0000,0000,0000,,chia cho 1000,
Dialogue: 0,0:05:53.17,0:05:57.46,Default,,0000,0000,0000,,rồi nhân với 30,
Dialogue: 0,0:05:57.46,0:06:00.06,Default,,0000,0000,0000,,bỏi vì ta muốn tăng lên 30px mỗi giây.
Dialogue: 0,0:06:00.28,0:06:02.30,Default,,0000,0000,0000,,Đây là newWidth rồi.
Dialogue: 0,0:06:02.30,0:06:07.30,Default,,0000,0000,0000,,Giờ ta sẽ đặt style.width cho bằng newWidth.
Dialogue: 0,0:06:10.26,0:06:13.98,Default,,0000,0000,0000,,newWidth... đây được rồi,
Dialogue: 0,0:06:13.98,0:06:18.98,Default,,0000,0000,0000,,thế này là được 30px/s thật mượt rồi.
Dialogue: 0,0:06:19.97,0:06:23.98,Default,,0000,0000,0000,,Ta có thể thay đổi số này nếu muốn nó chạy 
Dialogue: 0,0:06:23.98,0:06:28.62,Default,,0000,0000,0000,,nhanh hơn chậm hơn.
Dialogue: 0,0:06:31.24,0:06:34.36,Default,,0000,0000,0000,,Còn nếu muốn dừng hoạt hình lại khi to đủ rồi thì sao?
Dialogue: 0,0:06:34.66,0:06:38.16,Default,,0000,0000,0000,,Ta có thể cho dòng này vào trong điều kiện 'if'.
Dialogue: 0,0:06:38.98,0:06:41.39,Default,,0000,0000,0000,,Dòng này đây, và chỉ chạy dòng này 
Dialogue: 0,0:06:41.39,0:06:45.36,Default,,0000,0000,0000,,nếu currentWidth nhỏ hơn 1 giá trị nào đó,\Nif the currentWidth is
Dialogue: 0,0:06:45.36,0:06:49.38,Default,,0000,0000,0000,,như là 300, thử xem nào.
Dialogue: 0,0:06:54.37,0:06:58.47,Default,,0000,0000,0000,,Thực ra không phải là currentWidth mà là newWidth mới được.
Dialogue: 0,0:06:58.85,0:07:01.66,Default,,0000,0000,0000,,Thử xem có dừng ở 300 không.
Dialogue: 0,0:07:01.66,0:07:05.63,Default,,0000,0000,0000,,Oh Noes ơi, to ra xem nào.
Dialogue: 0,0:07:06.72,0:07:08.77,Default,,0000,0000,0000,,Đẹp rồi.
Dialogue: 0,0:07:09.56,0:07:12.82,Default,,0000,0000,0000,,Kĩ thuật sử dụng requestAnimationFrame này
Dialogue: 0,0:07:12.82,0:07:15.25,Default,,0000,0000,0000,,hoàn toàn dùng được với Chrome, 
Dialogue: 0,0:07:15.25,0:07:18.21,Default,,0000,0000,0000,,Firefox và IE10 trở lên.
Dialogue: 0,0:07:18.26,0:07:21.54,Default,,0000,0000,0000,,Còn có những thư viện JS 
Dialogue: 0,0:07:21.54,0:07:25.46,Default,,0000,0000,0000,,để dùng requestAnimationFrame nếu được,
Dialogue: 0,0:07:25.46,0:07:29.58,Default,,0000,0000,0000,,và quay lai jdungf setInterval nếu là trình duyệt cũ.
Dialogue: 0,0:07:30.47,0:07:32.64,Default,,0000,0000,0000,,Đấy là một vấn đề của việc lập trình web:
Dialogue: 0,0:07:32.64,0:07:34.96,Default,,0000,0000,0000,,Mạng web thay đổi liên tục,
Dialogue: 0,0:07:34.96,0:07:36.72,Default,,0000,0000,0000,,các trình duyệt liên tục cung cấp các chức năng mới,
Dialogue: 0,0:07:36.72,0:07:40.02,Default,,0000,0000,0000,,lập trình viên cũng phát triển các kĩ thuật mới.
Dialogue: 0,0:07:40.02,0:07:43.50,Default,,0000,0000,0000,,Bạn cần liên tục học về những cái mới này
Dialogue: 0,0:07:43.50,0:00:00.00,Default,,0000,0000,0000,,thì sử dụng mới hiệu quả tối đa được.