JavaScript là một trong những ngôn ngữ linh hoạt trên thế giới. Nó cho phép chúng tôi các nhà phát triển xây dựng trang web, máy chủ, ứng dụng di động, phần cứng và thậm chí cả AI. Vì vậy, không có gì ngạc nhiên khi đây là một trong những…

Bạn đang xem: cách tạo trang web bằng javascript

Cách xây dựng trang web chỉ với JavaScript

Ảnh của Hans McMurdy – © JavaScript-First: HTTP

JavaScript là một trong những ngôn ngữ linh hoạt trên thế giới. Nó cho phép chúng tôi các nhà phát triển xây dựng trang web, máy chủ, ứng dụng di động, phần cứng và thậm chí cả AI. Vì vậy, không có gì ngạc nhiên khi nó là một trong những ngôn ngữ lập trình phổ biến nhất trên thế giới.

Trong bài viết này, chúng ta sẽ thảo luận về HTTP là gì và học JavaScript bằng cách xây dựng một máy chủ HTTP, thay vì học HTML và CSS trước. Hình ảnh trên là ví dụ về những gì chúng tôi sẽ xây dựng.

Xin lưu ý: Phần xấu vi phạm được cố ý bỏ ra khỏi bài viết này nhằm gây tò mò và khuyến khích bạn để xây dựng một cái gì đó của riêng bạn, thay vì tạo điều kiện cho địa ngục hướng dẫn. Tất cả mã có thể được tìm thấy và nhiều hơn nữa có thể được tìm thấy trên Kho lưu trữ JavaScript đầu tiên và là một phần của cuốn sách mã nguồn mở. học trong môi trường phát triển từ xa với GitPod .

Giới thiệu về JavaScript & amp; Nút

Nếu bạn chưa quen với JavaScript hoặc hệ sinh thái Node.js, tôi đã viết một bài báo về nó. Vui lòng kiểm tra nó ở liên kết bên dưới.

Nếu bạn không biết JavaScript hoặc vẫn còn mới, vui lòng lưu ý rằng các ví dụ của chúng tôi sử dụng các tính năng và đặc điểm của ES6 đằng sau cờ thử nghiệm trong nút. Những thứ này không có sẵn khi Node.JS ra mắt lần đầu với tiêu chuẩn ES 5.

HTTP: Hiểu HTTP và HTML

Trước khi bắt đầu viết mã, hãy nhanh chóng xem qua HTTP là gì bằng cách xem nội dung của trang trình bày. Các thuật ngữ trong trang trình bày này nhằm giúp giải thích các phương thức HTTP mà chúng tôi sẽ sử dụng.

Nói đơn giản hơn nữa:

“ Khi bạn, độc giả đang xem bài viết này, trình duyệt (máy khách) đang thực hiện yêu cầu đối với máy chủ. Sau đó, máy chủ sẽ gửi một phản hồi (200 HTTP) dưới dạng HTML, hiển thị trang có nội dung được đặt thành HTML ”

Tiếp theo, chúng ta sẽ xây dựng một máy chủ HTTP đơn giản gửi HTML đến máy khách (trình duyệt).

HTML là gì

HTML không ngôn ngữ lập trình bất chấp những gì bạn đã đọc trên twitter hoặc những người đó làm việc cho công ty nào, v.v. Nó là viết tắt của Hyper Text Markup Language , bởi vì nó là một ngôn ngữ đánh dấu. Phiên bản ngắn gọn về lý do tại sao nó được tạo ra, là cho phép các học giả chia sẻ tài liệu với siêu văn bản / siêu liên kết trong không gian địa lý. 99% HTML bạn cần biết để thực hiện dự án này hoặc phát triển web có thể được giải thích trong 1 phút hoặc một GIF. 1% còn lại dành cho nghiên cứu yêu cầu của dự án & amp; kinh nghiệm thực tế.

Ảnh của Hans McMurdy – © JavaScript-Đầu tiên: Giải thích HTML

Giới thiệu về dự án:

Ví dụ đầu tiên chúng ta sẽ xem qua là cách đọc một tệp html với mô-đun fs và gửi nó đến máy khách bằng mô-đun http . Cả hai đều được tích hợp vào API cốt lõi của nút. Sau đó, chúng tôi sẽ cấu trúc lại nhiều lần để kích hoạt mô-đun ESM thay vì sử dụng request.

Mục tiêu của bài viết này:
Đến cuối bài viết này, độc giả sẽ có thể :

1. Phân biệt giữa máy khách và máy chủ.

2. Mô tả HTTP là gì và cách sử dụng phương thức http của nút.

3. Giải thích HTML là gì và cách sử dụng HTML trong chuỗi mẫu.

4. Xác định cú pháp cơ bản của HTML và cách kiểm tra nó.

5. Giải thích cách HTML được gửi từ máy chủ tới trình duyệt bằng HTTP

6. Trình bày cách sử dụng phương thức `fs` của nút để đọc HTML và phương thức` http` để tạo máy chủ.

7. Tạo các hàm đơn giản sử dụng các ký tự mẫu để soạn bố cục và thành phần html bằng cách sử dụng bootstrap 5 và vanilla javascript theo cách tương tự như phản ứng ở phía máy chủ.

Thư mục cuối cùng sẽ trông như thế nào.

Ví dụ đầu tiên chúng ta sẽ xem xét cách đọc một tệp html với fs mô-đun và gửi nó đến máy khách với mô-đun http . Cả hai đều được tích hợp vào API cốt lõi của nút.

Xem Thêm  Dự án học máy đầu tiên của bạn bằng Python từng bước - cách tạo máy học trong python

Tạo một tệp index.html và điền vào nó bằng bất kỳ html hợp lệ nào. Sau đó, tạo một tệp có tên index.js và đặt đoạn mã bên dưới vào bên trong, chạy nó với npx gật đầu index.js .

Nói một cách đơn giản, chúng tôi đang nhập hoặc“ yêu cầu ”phương thức http tích hợp mà tôi đã đề cập trước đó. Sau đó, chúng tôi đang sử dụng nó để tạo một máy chủ cơ bản và sử dụng hàm gọi lại . Sau đó, chúng tôi sẽ kiểm tra url của đối tượng yêu cầu để đảm bảo rằng nó có đến trang chủ với ‘/’ hay không. Nếu điều đó đúng, chúng tôi sẽ đọc tệp html, viết tiêu đề http, ghi dữ liệu và kết thúc phản hồi. Máy chủ đang chạy trên cổng 7000.

Ảnh của Hans McMurdy – © JavaScript-First:

Sau khi bạn bắt đầu hoạt động, chúng tôi sẽ đổi tên nó thành < code class = "fl oz pa pb pc b"> index.mjs . và xóa tệp html ngu ngốc đó vì chúng tôi sẽ không bao giờ sử dụng nó.

Thư mục cuối cùng của bạn trông như thế nào.

Như bạn có thể thấy, không có tệp HTML hoặc CSS nào. Đó là bởi vì tất cả html sẽ được tạo ở phía máy chủ với JavaScript vani và các phương pháp Node API cơ bản. Mọi css hoặc JavaScript phía máy khách sẽ nằm trong chuỗi mẫu hoặc được phân phát bởi CDN.

 

.
├── readme.md < br /> ├── index.mjs
├── package.json
├── layout /
│ ├── main.mjs
│ ├── template.mjs
├── trang /
│ ├── home.mjs
│ ├── about.mjs
├── components /
│ ├── nav. mjs
├── use /
│ ├── helpers.mjs

Bước 1: Sử dụng tập lệnh NPM với package.json để chạy mô-đun ESM.

Chúng tôi sẽ thêm một tập lệnh bắt đầu chạy index.mjs với nút bấm để theo dõi các thay đổi và tải lại, thêm các mô-đun thử nghiệm.

 < p class = "fw ok lr jf pc b do pg ph l pi" id = "54a1"> "scripts": {
"start": "npx gật gù --experimental-modules index.mjs"
},

Tiếp theo , chúng tôi sẽ thêm đoạn mã sau vào index.mjs . Có thể tìm thấy mã tại đây .

Bây giờ, để giải thích những gì đang xảy ra ở đây. Chúng tôi đang nhập hoặc “yêu cầu” http được tích hợp sẵn. Sau đó, chúng tôi sẽ cấu trúc lại điều này để sử dụng nhập ESM. Sau đó, chúng tôi đang sử dụng nó để tạo một máy chủ cơ bản và sử dụng hàm gọi lại để đặt phản hồi của máy chủ theo yêu cầu của trình duyệt . Máy chủ đang chạy trên cổng 8080.

Ảnh của Hans McMurdy - Máy chủ JavaScript vani đơn giản

Tại sao không sử dụng Công cụ mẫu?

Đây là thứ.
Chúng tôi thực sự không cần chúng.
Ngoài ra, theo nhiều cách, điều này thực sự mạnh mẽ hơn, nhanh hơn và ít tốn công sức học tập hơn vì không cú pháp mới được giới thiệu.

Về mặt bảo mật, có những hạn chế bất kể bạn chọn theo hướng nào, các công cụ mẫu thêm một phần phụ thuộc khác, trong khi điều này sẽ buộc bạn phải duy trì một thư viện chuỗi nhỏ để khử trùng và xác thực đầu ra html, điều mà chúng tôi đã giành được 't đề cập trong bài viết này.

Bước 1: Sử dụng tập lệnh NPM với package.json để chạy mô-đun ESM.

Chúng tôi sẽ thêm một tập lệnh bắt đầu chạy tệp index.mjs với gật đầu để xem các thay đổi và tải lại, thêm mô-đun thử nghiệm.

 

"scripts": {
"start": "npx gật gù --experimental-modules index.mjs"
},

Để chạy dự án, chúng tôi chỉ cần chạy npm start và mở trình duyệt đến localhost: 8000 .

Bước 2: Máy chủ - bố cục bên cạnh với các chức năng & amp; mẫu chữ

Điều gì sẽ xảy ra nếu tôi nói với bạn, bạn cũng không thực sự cần react?
Điều gì sẽ xảy ra nếu tôi nói rằng chúng ta chỉ có thể cấu trúc lại ở trên bằng cách gói chuỗi mẫu bằng một hàm trả về html dựa trên các tham số của chúng ta. định nghĩa?

Trong gif, chúng tôi thực hiện chính xác điều đó bằng cách tạo một hàm có tên HtmlTemplateString () .

Chúng tôi sẽ sử dụng hàm này để tạo bố trí cơ bản máy phát điện. Tất cả những gì chúng tôi làm chỉ đơn giản là chuyển html có liên quan cho đầu trang, nội dung và chân trang trên một trang bằng cách gọi hàm này với các giá trị làm đối số và lưu trữ kết quả trong một số biến.

Ảnh của Hans McMurdy - Máy chủ JavaScript vani đơn giản

Chúng tôi thậm chí có thể truyền các hàm vào đối số này và tạo các thành phần giống như phản ứng trên máy chủ mà không cần bất kỳ khuôn khổ chính nào.

Bước 3: Cấu trúc lại bằng các tiện ích

Để làm cho mã này có thể tái sử dụng nhiều hơn, chúng tôi sẽ phải cấu trúc lại nó cho các chức năng tiện ích khác nhau. Trong trường hợp này, chúng tôi sẽ tạo một hàm ghi các tiêu đề http và gửi html cuối cùng với bảng soạn sẵn ít hơn một chút.

Thay vì viết trang ví dụ sau:

 

res.writeHead (200, {
'Content-Type': 'text / html' ,
'Content-Length': page1.length,
'Expires': new Date (). toUTCString ()
})
res.end (page1);

Chúng tôi sẽ gói gọn tất cả trong một hàm kế thừa đối tượng phản hồi và tạo page1 một tham số có thể được sử dụng trực tiếp hoặc được sử dụng như một lệnh gọi lại xác thực html của chúng tôi. Sau đó, cuối cùng, chúng tôi sẽ lưu hàm này trong use / helpers.mjs . Nếu bạn chọn đi xuống con đường này, điều này sẽ hữu ích cho việc thêm các chức năng tiện ích khác.

 

xuất const headers = (dữ liệu, phản hồi) = & gt; {
response .writeHead (200, {
'Content-Type': 'text / html',
'Content-Length' : data .length,
'Expires': new Date (). toUTCString ()
})
response .end ( data )
}

Tiếp theo, chúng ta sẽ quay lại index.mjs và kết thúc mã máy chủ trong IIFE không đồng bộ và sử dụng câu lệnh chuyển đổi cho mỗi trang và gọi hàm tiêu đề bên trong. Chúng tôi chưa xác định trang giới thiệu… Vì vậy, điều này rõ ràng sẽ xảy ra lỗi.
Nhưng đó là lý do tại sao bạn muốn đọc toàn bộ nội dung này trước khi vô ý sao chép mã.

Ảnh của Hans McMurdy - Máy chủ JavaScript đơn giản

Bước 4: Tạo bố cục có thể sử dụng lại với chuỗi mẫu

Tiếp theo chúng ta ' Sẽ sử dụng tiện ích mở rộng Bootstrap 5 để nhanh chóng tạo ra một mẫu có thể sử dụng lại bằng lệnh ! b5- $ và sau đó nhấn tab để tạo mẫu, hoàn chỉnh với cdn cho css và không phụ thuộc JavaScript của khung và các kiểu tùy chỉnh, cũng có các mẫu khác có sẵn như masonry nhưng chúng tôi ' Tôi sẽ giữ cho nó đơn giản ở đây.

Cuối cùng, chúng tôi sẽ chỉnh sửa html theo cách chúng tôi muốn.

Trong trường hợp của tôi, tôi giữ cho nó đơn giản bằng cách thêm tiêu đề, điều hướng, nội dung và footer, các tham số, chúng tôi sẽ chuyển thành phần chức năng khác vào chúng làm đối số sau này. Chúng tôi sẽ lưu mã này trong layout / main.mjs .

Ảnh của Hans McMurdy - Máy chủ JavaScript vani đơn giản

Bước 5: Tạo Thành phần NavLinks phía Máy chủ

Điều đầu tiên chúng ta sẽ làm là tạo thành phần có thể tái sử dụng để tạo lượt thích trang từ một mảng đối tượng (dữ liệu). Chúng tôi sẽ đặt mã này trong components / nav.mjs . Html được tạo bởi hàm này sẽ được chuyển vào thành phần tiếp theo mà chúng tôi tạo.

Ảnh của Hans McMurdy - Máy chủ JavaScript đơn giản

Bước 6: Tạo Thành phần điều hướng phía máy chủ

Ngày mới dòng bên dưới thành phần trước đó, trong cùng một tệp components / nav.mjs , chúng ta sẽ tạo một thành phần mới. Đây sẽ là một hàm đơn giản trả về html, thay vì hàm trước đó lặp lại trên một mảng. Bên trong câu lệnh return, chúng ta sẽ thêm `` và bên trong chuỗi mẫu, chúng ta sẽ nhập b5 -navbar-default và nhấn tab. Thao tác này sẽ tạo html cần thiết cho thành phần Nav chính của chúng tôi và chúng tôi sẽ chỉ cần chỉnh sửa nó một cách thích hợp.

Nav () có thể tái sử dụng cuối cùng, chấp nhận hai đối số, nội dung và biểu trưng.
Nội dung là đối số mà chúng tôi sử dụng để chuyển thành phần trước đó vào.
Biểu trưng chỉ được sử dụng để quảng bá thương hiệu một cách trơ trẽn.

Bước 7: Xây dựng Navbar của chúng tôi

Bây giờ chúng ta sẽ đặt cả hai cái này lại với nhau rồi sử dụng cái đó trong điều hướng có thể tái sử dụng chấp nhận hai đối số, nội dung và biểu tượng. Trong cùng một tệp components / nav.mjs . Tốt nhất là bạn muốn dữ liệu từ các trang được lấy từ cơ sở dữ liệu nhưng chúng tôi sẽ giữ nó đơn giản và tạo tất cả trong cùng một tệp.

Đầu tiên chúng ta tạo một mảng đối tượng có tên & amp; url, nếu bạn muốn, bạn cũng có thể thêm thông tin cho các biểu tượng và dữ liệu, v.v. nhưng chúng tôi sẽ không đề cập đến điều đó ở đây. Sau đó, chúng tôi sẽ tạo biến links để lưu trữ html của mỗi NavLink và chuyển các trang chủ làm đối số cho dữ liệu. Cuối cùng, chúng tôi sẽ chuyển biến đó vào thành phần Nav () của chúng tôi và lưu trữ html cuối cùng bên trong một biến có tên NAV. Chúng tôi sẽ xuất biến đó và sử dụng lại trên mỗi trang.

Bước 8: Xây dựng Trang của chúng tôi

Tiếp theo, chúng ta sẽ xây dựng trang chủ của mình bên trong pages / home.mjs . Chúng tôi sẽ bắt đầu bằng cách nhập bố cục của mình, HTML () NAV () . Sau đó, thêm dữ liệu meta của chúng tôi trong đối số đầu tiên với & lt; title & gt; #JavaScriptFrist Bootstrap Site & lt; / title & gt; . Sau đó, chúng tôi sẽ chỉ sử dụng đối số nội dung của mẫu của chúng tôi. Chúng tôi không xây dựng bất kỳ thứ gì đủ phức tạp để sử dụng đối số footer cho hàm bố cục của chúng tôi, HTML () .

Bước 9: Tổng hợp tất cả lại

Bây giờ chúng ta sẽ quay lại ./ index.mjs và tập hợp tất cả lại với nhau.
Bạn sẽ nhận thấy tôi đã nhận xét một số mã.
Đó là một ví dụ sử dụng tìm nạp ở phía máy chủ để tạo bố cục khối xây động trên trang giới thiệu. Tôi sẽ không đề cập đến vấn đề đó trong bài viết này vì tôi muốn để lại điều gì đó để bạn tự suy nghĩ và nghiên cứu hoặc một lý do để tham gia các lớp co giật .

Hiện tại, tôi sẽ chỉ nhập trang chủ và gọi nó trong headers () . Bằng cách đó khi chúng ta truy cập something.com/ , nó sẽ hiển thị trang của chúng ta.

Cảm ơn vì đã đọc cái từ này ói.

Tôi không quan tâm đến việc vỗ tay nhưng nếu bạn thấy bài viết này thú vị, hãy bắt đầu một cuộc trò chuyện dưới đây, nếu bạn không đồng ý, điều đó cũng tuyệt. Nhưng dù thế nào đi chăng nữa, hãy giữ cuộc trò chuyện dân sự và mang tính xây dựng để biến web trở thành một nơi tốt hơn cho mọi người.

Nếu bạn thích đọc bài viết này, hãy cân nhắc theo dõi tôi vì tôi sẽ viết một bài tiếp theo về HTTPS và thiết lập SSL.

Nếu bạn không Không biết SSL / TSL hoặc HTTPS là gì, hãy xem một bài viết trước đây tôi đã viết để bạn hiểu tại sao nó quan trọng và tại sao nên sử dụng nó cho mọi trang web bất cứ khi nào có thể.

JavaScript Bằng tiếng Anh Thông thường

Bạn có biết rằng chúng tôi có ba ấn phẩm và một kênh YouTube không? Tìm liên kết đến mọi thứ tại plainenglish.io !


Xem thêm những thông tin liên quan đến chủ đề cách tạo trang web bằng javascript

Tạo đồng hồ đơn giản bằng HTML CSS và JAVASCRIPT | QUANG CHIẾN

  • Tác giả: Quang Chiến
  • Ngày đăng: 2020-03-16
  • Đánh giá: 4 ⭐ ( 9013 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo đồng hồ đơn giản bằng HTML CSS và JAVASCRIPT | QUANG CHIẾN

    Code: https://drive.google.com/file/d/1vpwAhjtYbcGLUA8Qpdqj3JqrWZgtoTkF/view?usp=sharing

    Liên hệ với mình tại :
    ♥ Gmail: quangchien01.ot@gmail.com
    ▲ Đây là kênh youtube của mình: https://goo.gl/Ny4uMJ

Thiết Kế Chatbox Bằng CSS Javascript Cho Trang Web

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 3 ⭐ ( 1941 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách thiết kế chatbox bằng HTML, CSS và Javascript cho thiết kế website nhé!

Bài 03: Cách Nhúng (chèn) JavaScript Vào HTML

  • Tác giả: hocban.vn
  • Đánh giá: 4 ⭐ ( 8870 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Dưới đây mình sẽ lần lượt hướng dẫn bạn 03 cách để nhúng (chèn) JavaScript vào HTML. Tùy trường hợp mà bạn sẽ vận dụng cách tương ứng.

15 trang web học JavaScript miễn phí trong năm 2022

  • Tác giả: hocjavascript.net
  • Đánh giá: 3 ⭐ ( 7006 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: học trực tuyến là phương pháp ngày càng phổ biến vì tính linh hoạt và cá nhân hóa của nó. Dưới đây là 15 trang web học JavaScript miễn phí tốt

Bài 03: Sử dụng Javascript tạo Responsive cho Website

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 8320 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách sử dụng javascript để xây dựng chức năng responsive cho website, lý do là có nhiều website không hỗ trợ CSS3 media query nên bắt buộc sử dụng javascript.

Tạo Tính Năng Đa Ngôn Ngữ Cho Website Với JS

  • Tác giả: codelearn.io
  • Đánh giá: 4 ⭐ ( 1722 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đây là bài viết hướng dẫn cách tạo tính năng đa ngôn ngữ cho website bằng cách implement đầu tiên đó là sử dụng thư viện JavaScript và file JSON.

Lập trình web với Visual Studio Code: HTML, CSS, JavaScript

  • Tác giả: www.hieuda.com
  • Đánh giá: 3 ⭐ ( 2191 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn lập trình web html, css, javascript bằng visual studio code. Cài đặt để lập trình web nhanh nhất bằng live server, emmet trên vscode.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php