Chép bảng html trên vào notepad.Mở Browser sẽ thấy xuất hiện một khung hình bên cạnh.
Click vào chữ START thì khung hình sẽ di chuyển từ trái sang phải.Click vào chữ STOP thì khung hình sẽ trở về vị trí cũ, chỗ đã khởi hành.
Đây là một trò chơi rất thích thú cho nên người viết bài nầy sẽ cắt nghĩa chi tiết từng thành phần của javaScript căn bản nầy.
Khi nắm vững kiến thức căn bản cách viết code của javaScript nầy,chúng ta có thể áp dụng kiến thức đó làm trái banh di chuyển tự động nhanh hay chậm,từ trái sang phải,từ trên xuống dưới.
Trong bảng html trên,chúng ta tạo một khung hình chữ nhật tô màu blue có viền màu đỏ trong đó có viết chữ tuỳ thích.
Lý do tạo khung là để giúp cho những ai không biết cách tự vẽ hình.Chỉ cần viết code theo CSS thì khung hình chữ nhật sẽ tự động xuất hiện dễ dàng.
Trong phần script tags,đối với khung hình tạo bởi CSS muốn được di động tự động cần có tổng cọng 3 functions.
1-Trước tiên là function init(). Init là chử viết tắt của initialization, một thuật ngữ của programming cho biết hình đã được chúng ta cho một value là x và đang ở trong memory (In programming,initialization means to assign a value to a variable and to locate the position of the variable) và id của hình là số 1 và được chứa trong trong variable x.Vị trí của hình nằm bên trái gọi left,cách khung 0 pixel.
function init(){x=document.getElementById(1) ;
x.style.left=’0px’;}
Công thức nầy có nhiệm vụ lấy id có tên là số 1 đặt vào variable x ở vị trí 0 pixel bên trái.
function init() luôn luôn có kèm theo một code rất quan trọng là window.onload =init.
Code nầy sẽ ra lệnh cho function init() hoạt động ngay sau khi trang Web hòan tất loading.Nếu thiếu code nầy sẽ không có kết quả gì hết.
2-Viết function để cho lệnh khung hình di chuyển tự động như sau.
function doMove(){
x.style.left=parseInt(x.style.left)+1+’px’;
t=setTimeout(doMove,20;)}
“x.style.left “ấn định khung hình ở vị trí bên trái.Vế nầy tuy là chữ kết nối (string) không có con số nào hết nhưng có hàm chứa đơn vị đo lường về vị trí nên phải dùng parseInt() để lấy return value of "x.style.left".(Position data contains unit generally pixel.The content is an object not a number.In order to perform a math function we have to extract the number out of the object).
ParseInt() là gì ?
ParseInt() is a built-in core javaScript function and is used to extract an integer from string values.
Cho mỗi lần di chuyển về bên phải là 1 pixel nên viết +1+’px’ ; Nếu muốn di chuyển về bên trái thì viết -1+’px’ ; Có thể viết +2+’px’; +5+’px’;…tuỳ ý
+’px’ là diễn tả đơn vị chứ không phải cộng vào
Nếu muốn di chuyển từ trên xuống dưới thì thay chữ left bằng chữ top.
Sau 20 milliseconds thì call this function again nên viết : t=setTimeout(doMove,20;)
Công thức tổng quát cốt tuỷ làm cho hình di động là
current position=parseInt(img.style.left)
3-Viết function để cho khung hình dừng lại theo ý muốn.Có 2 cách dừng lại là trở về vị trí lúc khởi hành và dừng ngay tại chỗ.Trong bảng html trên chúng ta muốn khung hình dừng lại tại chỗ đã khởi hành nên viết function như sau.
function stop(){
clearTimeout(t);
x.style.left=’0px’;}
Trong function nầy chúng ta lấy clearTimeout(t) để xóa setTimeout chứa trong function doMove().Trong clearTimeout(t) phải chứa chữ t là id của t=setTimeout(doMove,20) thi mới có kết quả.
Muốn khung hình trở về vị trí chỗ đã khởi hành thì viết x.style.left=’0px’.
Còn muốn dừng tại chỗ thì không viết gì hết.
---------------------------------------
Khi đã hiểu rõ nguyên lý căn bản,chúng ta có thể viết javaScript nầy ngắn gọn hơn bảng html trên.Bỏ các tags head và style.
Trong phần body,mở tag rồi viết div id="1”
style= "position:relative;left:0px;width:100px;height:80px;background:blue;border:2px solid red ;” rồi đóng lại với tag /div.Chúng ta sẽ có kết qủa in hệt như cách trên.
