Khu vực javascript

Tham chiếu JavaScript đóng vai trò là kho lưu trữ dữ kiện về ngôn ngữ JavaScript. Toàn bộ ngôn ngữ được mô tả chi tiết ở đây. Khi bạn viết mã JavaScript, bạn sẽ thường xuyên tham khảo các trang này (do đó, tiêu đề là "Tham khảo JavaScript")

Ngôn ngữ JavaScript nhằm mục đích sử dụng trong một số môi trường lớn hơn, có thể là trình duyệt, tập lệnh phía máy chủ hoặc tương tự. Đối với hầu hết các phần, tài liệu tham khảo này cố gắng không phụ thuộc vào môi trường và không nhắm mục tiêu đến môi trường trình duyệt web

Nếu bạn chưa quen với JavaScript, hãy bắt đầu với hướng dẫn. Khi bạn đã nắm vững các nguyên tắc cơ bản, bạn có thể sử dụng tài liệu tham khảo để biết thêm chi tiết về các đối tượng riêng lẻ và cấu trúc ngôn ngữ

Hướng dẫn JavaScript chỉ cho bạn cách sử dụng JavaScript và cung cấp tổng quan về ngôn ngữ. Nếu bạn cần thông tin đầy đủ về một tính năng ngôn ngữ, hãy xem tài liệu tham khảo JavaScript

Hướng dẫn này được chia thành các chương sau

Tìm thấy một vấn đề nội dung với trang này?

• Chỉnh sửa trang trên Github
• Báo cáo vấn đề nội dung
• Xem nguồn trên GitHub

Trang này được sửa đổi lần cuối vào ngày 13 tháng 12 năm 2022 bởi những người đóng góp MDN

Kéo và thả là một tính năng rất phổ biến. Đó là khi bạn "chộp lấy" một đối tượng và kéo nó đến một vị trí khác

Hỗ trợ trình duyệt

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ Kéo và Thả đầy đủ

Ví dụ Kéo và Thả HTML

Ví dụ dưới đây là một ví dụ kéo và thả đơn giản

Thí dụ

Nó có vẻ phức tạp, nhưng chúng ta hãy đi qua tất cả các phần khác nhau của sự kiện kéo và thả

Tạo một phần tử có thể kéo được

Đầu tiên. Để làm cho một phần tử có thể kéo được, hãy đặt thuộc tính draggable thành true

Kéo cái gì - ondragstart và setData()

Sau đó, chỉ định điều gì sẽ xảy ra khi phần tử được kéo

Trong ví dụ trên, thuộc tính ondragstart gọi một hàm, kéo(sự kiện), chỉ định dữ liệu nào sẽ được kéo

Phương thức dataTransfer.setData() đặt kiểu dữ liệu và giá trị của dữ liệu được kéo

chức năng kéo (ev) {
ev. truyền dữ liệu. setData("văn bản", ev. Mục tiêu. Tôi);
}

Trong trường hợp này, kiểu dữ liệu là "văn bản" và giá trị là id của phần tử có thể kéo được ("drag1")

Thả ở đâu - ondragover

Sự kiện ondragover chỉ định nơi có thể bỏ dữ liệu được kéo

Theo mặc định, không thể bỏ dữ liệu/phần tử vào các phần tử khác. Để cho phép giảm, chúng ta phải ngăn việc xử lý phần tử mặc định

- Bản đồ ảnh có thể tạm hiểu là một loại ảnh đặc biệt, trên ảnh sẽ có các vùng được xác định, mỗi vùng được gán với một liên kết

- Ví dụ. Tấm hình bên trái chính là một cái bản đồ ảnh, trên tấm hình có bốn vùng

• Vùng mắt trái được gán liên kết đến trang HTML
• Vùng mắt phải được gán liên kết đến trang CSS
• Vùng mũi được gán liên kết đến trang JavaScript
• Vùng chọn được gán liên kết đến trang MySQL

⛔ Các bạn thử click vào từng vùng để trải nghiệm

1) Các thành phần cấu hình nên bản đồ ảnh

- Thông thường thì một bản đồ ảnh được tạo nên bởi hai thành phần

• Thành phần chính thứ nhất là tấm ảnh mà các bạn muốn sử dụng nó để làm bản đồ ảnh
• Thành phần thứ hai là một bản đồ hệ thống định mức (chứa các vùng đã được xác định)

2) Cách tạo một bản đồ ảnh

- Để tạo một bản đồ ảnh thì chúng ta thực hiện hai bước như sau

• Bước 1. Tạo một bản đồ hệ thống tọa độ
• Bước 2. Kết hợp tấm ảnh và bản đồ hệ thống tọa độ để tạo thành bản đồ ảnh

2. 1) Tạo bản đồ hệ thống điều độ

- tạo một bản đồ hệ thống Để định mức thì chúng ta cần phải sử dụng thẻ&

- In which

• Sử dụng thẻ để xác định một bản đồ hệ thống định vị
• Sử dụng thẻ để xác định một vùng trên bản đồ hệ thống định vị

- Đoạn mã bên dưới được sử dụng để tạo một bản đồ hệ thống tọa độ có tên là mặt, bên trong bản đồ hệ thống tọa độ này có không gian

• Vùng 1 (mắt trái) có dạng hình tròn, được liên kết đến trang tài liệu học HTML
• Vùng 2 (mắt phải) có dạng hình tròn, được liên kết đến trang tài liệu học CSS
• Vùng 3 (mũi) có dạng chữ nhật, được liên kết với trang tài liệu JavaScript
• Zone 4 (miệng) có dạng chữ nhật, được liên kết với trang tài liệu học MySQL

2. 2) Kết hợp bảng cấu hình và bản đồ hệ thống

- Sau khi đã tạo xong một bản đồ hệ thống điều độ thì công việc tiếp theo đó chính là sử dụng thẻ

- Nếu tôi thiết lập thuộc tính shape="rect" và coords="50,25,150,100" cho phần tử thì tôi sẽ xác định vùng màu đen như sau

4. 2) Vùng hình tròn

- Đối diện với vùng hình tròn, thuộc tính tọa độ phải nhận một giá trị bao gồm ba tham số

- Xác định dựa trên khoảng cách từ tâm của hình tròn đến Cạnh trái của bản đồ ảnh

- Xác định dựa trên khoảng cách từ tâm của hình tròn đến Cận cảnh của bản đồ ảnh

- Xác định dựa trên độ dài bán kính của hình tròn

- With a shaper used to doing the image size 200x200 as bên dưới

- Nếu tôi thiết lập thuộc tính shape="circle" và coords="150,100,25" cho phần tử thì tôi sẽ xác định vùng màu đen như sau

4. 3) Vùng hình đa giác

- Để xác định giá trị của các thuộc tính coords đối với một vùng "hình đa giác" thì chúng ta thực hiện các bước như sau

• Bước 1. Xác định số đỉnh của hình đa giác & vị trí của các đỉnh
• Bước 2. Xác định hướng đi của các đỉnh để tạo thành một vùng kín
• Bước 3. Xác định vị trí của từng đỉnh

(cách xác định tọa độ của một đỉnh cũng giống như cách xác định tâm của hình tròn)

• Bước 4. Chép các cấp độ của các tham số lại thành giá trị của các thuộc tính coords

- Để tạo vùng "hình đa giác" màu đen trên tấm ảnh có kích thước 400x400 giống như phía trên thì ta thực hiện các bước sau

- Bước 1. Xác định số đỉnh của hình đa giác & vị trí của các đỉnh

- Bước 2. Xác định hướng đi của các đỉnh để tạo thành một vùng kín

- Bước 3. Specify level of the tops

- Bước 4. Chép các cấp độ của các tham số lại thành giá trị của các thuộc tính coords

(ordering sắp xếp các đỉnh sẽ là. đỉnh một => đỉnh hai => đỉnh ba => đỉnh bốn => đỉnh một)

- Đỉnh đầu và đỉnh cuối phải là cùng một đỉnh, như thế mới tạo thành vùng kín

- Kết luận. value of property coords will be. 100,50,275,100,250,300,50,350,100,50

- Thuộc tính href dùng để xác định đường dẫn đến tài liệu mà người dùng sẽ được chuyển đến khi họ nhấp vào vùng

- Cú pháp

href="URL"

- Khi người dùng click vào cái ụ thì họ sẽ được chuyển đến trang tài liệu học CSS

- Thuộc tính mục tiêu được sử dụng để xác định nơi mà tài liệu sẽ được mở lên khi người dùng nhấp vào vùng

- Cú pháp

target="nơi mở tài liệu"

- Trong đó, nơi mở tài liệu có thể được xác định dựa trên một trong các loại giá trị

- Tài liệu sẽ được mở bên trong các khung hiện tại (default)

- Tài liệu sẽ được mở bên trong tab hiện tại

- Tài liệu sẽ được mở bên trong một tab mới

- Tài liệu sẽ được mở bên trong khung cha của các khung hiện tại

- Khi người dùng nhấp vào cái ụ thì trang tài liệu học CSS sẽ được mở lên trong một Tab mới

- Thuộc tính tải xuống được sử dụng để thiết lập công việc

"khi người dùng nhấp vào vùng thì tài liệu được gán với liên kết của vùng đó sẽ tự động được tải xuống"

- Khi người dùng nhấn vào cái ụ thì xin chào tập tin. txt sẽ tự động được tải xuống

- Thuộc tính tiêu đề được sử dụng để xác định tiêu đề của vùng

(khi user di chuyển con trỏ lên vùng thì tiêu đề sẽ hiện lên)

- Cú pháp

title="tiêu đề của vùng"

- Thuộc tính hình dạng được sử dụng để xác định định dạng của vùng, nó có thể nhận một trong các giá trị sau đây