Điều này sẽ giúp bạn thiết lập một máy chủ web cục bộ được gọi là lite-server với VS Code, đồng thời hướng dẫn bạn lưu trữ các tệp html tĩnh trong localhost và debug mã Javascript của bạn
1. Cài đặt nút. js
Nếu chưa được cài đặt, hãy tải xuống tại đây
Nó đi kèm với npm [trình quản lý gói để thu thập và quản lý các thư viện phát triển của bạn]
2. Tạo một thư mục mới cho dự án của bạn
Ở đâu đó trong ổ đĩa của bạn, hãy tạo một thư mục mới cho ứng dụng web của bạn
3. thêm một gói. json vào thư mục dự án
Sau đó sao chép/dán văn bản sau
{
"name": "Demo",
"version": "1.0.0",
"description": "demo project.",
"scripts": {
"lite": "lite-server --port 10001",
"start": "npm run lite"
},
"author": "",
"license": "ISC",
"devDependencies": {
"lite-server": "^2.5.4"
}
}
4. Cài đặt máy chủ web
Trong một cửa sổ đầu cuối [dấu nhắc lệnh trong Windows] được mở trên thư mục dự án của bạn, hãy chạy lệnh này
npm install
Thao tác này sẽ cài đặt lite-server [được xác định trong gói. json], một máy chủ tĩnh tải chỉ mục. html trong trình duyệt mặc định của bạn và tự động làm mới nó khi tệp ứng dụng thay đổi
5. Khởi động máy chủ web cục bộ
[Giả sử bạn có một chỉ số. html trong thư mục dự án của bạn]
Trong cùng một cửa sổ đầu cuối [dấu nhắc lệnh trong Windows] hãy chạy lệnh này
npm start
Đợi một giây và lập chỉ mục. html được tải và hiển thị trong trình duyệt mặc định của bạn được cung cấp bởi máy chủ web cục bộ của bạn
lite-server đang xem các tệp của bạn và làm mới trang ngay khi bạn thực hiện thay đổi đối với bất kỳ tệp html, js hoặc css nào
Và nếu bạn đã cấu hình Mã VS để lưu tự động [menu Tệp / Lưu tự động], bạn sẽ thấy các thay đổi trong trình duyệt khi bạn nhập
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 đủ
APIDrag và Drop4. 09. 03. 56. 012. 0Ví 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
npm install
hàm kéo[ev] {
ev. truyền dữ liệu. setData["văn bản", ev. Mục tiêu. là];
}
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
npm install
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 nên luôn bao gồm các thuộc tính
npm install
npm install
Phần tử
npm install
Văn bản giữa
npm install
npm install
HTMLTự động phát
Để tự động bắt đầu video, hãy sử dụng thuộc tính
npm install
Thí dụ
Trình duyệt của bạn không hỗ trợ thẻ video.
Ghi chú. Trình duyệt Chromium không cho phép tự động phát trong hầu hết các trường hợp. Tuy nhiên, tự động phát tắt tiếng luôn được cho phép
Thêm
npm install
npm install
Thí dụ
Trình duyệt của bạn không hỗ trợ thẻ video.
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ợ đầy đủ phần tử
npm install
Định dạng video HTML
Có ba định dạng video được hỗ trợ. MP4, WebM và Ogg. Trình duyệt hỗ trợ cho các định dạng khác nhau là