[12th01] Trần Quan Đại 08050272 Đề tài: JavaScript đổi con trỏ chuột

Submitted by quandai on Sat, 10/20/2012 - 00:52

Forums:

Công Nghệ Web
GV: Trương Hoài Phan
SV: Trần Quan Đại
MSSV: 08050272

Nội dung:
- JavaScript
- Đổi con trỏ chuột
- Demo
1. JavaScript là gì?
- JavaScript là một ngôn ngữ thông dịch, mã nguồn của nó được nhúng hoặc tích hợp vào tập tin HTML. Hiên nay ngôn ngữ này được dùng rất rộng rãi cho các trang web.Nó làm cho việc tạo các trang Web động và tương tác dễ dàng hơn.
- JavaScript vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript.
- .js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript.
- JavaScript không có bộ xử lý xuất/nhập (input/output) riêng mà dựa vào phần mềm ngôn ngữ được gắn vào để thực hiện xuất/nhập.
- Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thông qua DOM. JavaScript được dùng để thực hiện một số tác vụ mà HTML không thể thực hiện được như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh...
- JavaScript thường được sữ dụng để xữ lý các sự kiện. Các sự kiện nầy là các hành động xảy ra trên trang web có thể do người dùng hoặc hệ thống tạo ra.
- Javascript là một ngôn ngữ có đặc tính động (Dynamic).
- Một trong những đặc tính quan trọng của ngôn ngữ javascript là khả năng tạo và sử dụng các đối tượng (Object). Các Object này cho phép người lập trình sử dụng để phát triển ứng dụng. Trong javascript ,các Object được nhìn theo 2 khía cạnh:
o Các Object đã tồn tại.
o Các Object do người lập trình xây dựng.
- Có 2 cách để nhúng Javascript vào trong tập tin HTML:
o Viết trực tiếp trong HTML thông qua cặp thẻ:
<script type=”text/javascript”>
//Các lệnh Javascript
</script>
o Sử dụng tập tin javascript bên ngoài. Cũng giống như CSS và PHP, chúng ta cũng có thể nhúng Javascript vào tập tin HTML bằng cách liên kết đến một tập tin bên ngoài. Sau đó gọi vào theo cú pháp:
<script type=”javascript”src=”my.js” type="text/javascript">
</script>
2. Đổi con trỏ chuột
- Có nhiều cách để đổi con trỏ chuột trên web. Ở đây tôi sẽ giới thiều 2 trong các cách đó.
a) Cách 1: sữ dụng những Cursor Styles có sẵn kết hợp với sự kiện Onmouseover
o Khi bạn Onmouseover (di chuyển con trỏ chuột lên đối tượng) thì con trỏ chuột sẽ được vẽ lại theo các cursor tương ứng. Ở đây chúng ta có các cursor được hỗ trợ là: auto, all-scroll, crosshair, default, help, inherit, move, pointer, progress, text, vertical-text, wait, no-drop, not-allowed, e-resize, n-resize, s-resize, w-resize, col-resize, row-resize, ne-resize, nw-resize, se-resize, sw-resize. Ngoài ra còn có none (ẩn luôn hình con trỏ chuột).
[url=http://nr6.upanh.com/b5.s33.d3/8b629ce5af848c5d64b1df559daefe42_50144146...

o Vd:
<script language = "JavaScript">
document.write("<img src='45x45.png' onmouseover="+'this.style.cursor="crosshair"'+">");
</script>

b) Cách 2: tự viết hàm bằng JavaScript để vẽ thêm các chuyển động quanh con trỏ chuột.
o Ở đây tôi sẽ dùng vòng lặp for để vẽ một ảnh là một điểm được lặp lại n lần. Với biến màu là xCol và điểm sau sẽ lớn hơn điểm trước theo biến dims = (i+1)/2.
for (i = 0; i < n; i++){
var dims = (i+1)/2;
d.write('<div id="x'+(idx+i)+'" style="position:absolute;
'+'top:0px;left:0px; width:'+dims+'px;height:'+dims+'px;
'+'background-color:'+xCol+';font-size:'+dims+'px"><\/div>');
}
o Các bạn cũng có thể vẽ cùng lúc nhiều ảnh bằng cách lặp lại đoạn code trong d.write.
o Hàm lấy tọa độ trang Web:
function winsize(){
var oh,sy,ow,sx,rh,rw;
if (domWw){
if(d.documentElement&&d.defaultView&& ypeofd.defaultView.scrollMaxY=="number"){
oh=d.documentElement.offsetHeight;
sy = d.defaultView.scrollMaxY;
ow = d.documentElement.offsetWidth;
sx = d.defaultView.scrollMaxX;
rh = oh-sy;
rw = ow-sx;
}
}
}
o Hàm lấy tọa độ chuột:
function mouse(e){
var msy = (domSy)?window.pageYOffset:0;
if (!e) e = window.event;
if (typeof e.pageY == 'number'){
my = e.pageY ;
mx = e.pageX ;
}
else{
my = e.clientY ;
mx = e.clientX ;
}
if (my > h-65) my = h-65;
if (mx > w-50) mx = w-50;
}

o Hàm vẽ chuyển động của ảnh mà lúc nãy đã tạo ở trên:
function assgn(){
j=0;
dy[j] = my + 50 * Math.cos(stp+j*evn*Math.PI/180)*
Math.sin((stp+j*25)/2) + scrl(0) + pix;
dx[j] = mx + 50 * Math.sin(stp+j*evn*Math.PI/180)*
Math.sin((stp+j*25)/2) * Math.sin(stp/4) + pix;
for (i = 0; i < n; i++){
if (i < n-1) {
vx[i].top = vx[i+1].top;
vx[i].left = vx[i+1].left;}
else {vx[i].top=dy[0]; vx[i].left=dx[0];}
}
setTimeout(assgn,t);
}
3. Phần Demo
- Chỉ con trỏ chuột vào các hình để xem kết quả cách 1 và bỏ ghi chú để xem kết quả cách 2. Lưu ý: các hàm themhinh, doihinh, tuyetroi, matma được gọi từ tập tin .js bên ngoài.
[url=http://www.mediafire.com/?jhlmtunxwgz7467

<html>
<head>
<title>DeMo</title>
<script langure="JavaScript">
document.write("<img src='45x45.png'onmouseover= "+'this.style.cursor="help"'+">");
document.write("<img src='45x45.png' onmouseover= "+'this.style.cursor="no-drop"'+">");
document.write("<img src='45x45.png' onmouseover= "+'this.style.cursor="move"'+">");
document.write("<img src='45x45.png' onmouseover= "+'this.style.cursor="crosshair"'+">");
document.write("<img src='45x45.png' onmouseover= "+'this.style.cursor="vertical-text"'+">");
</script>

</head>
<body >
</body>
</html>