Trong hướng dẫn này, chúng ta sẽ tìm hiểu, thảo luận và hiểu về biểu mẫu JavaScript. Chúng ta cũng sẽ thấy việc triển khai biểu mẫu JavaScript cho các mục đích khác nhau
Sau đây, chúng ta sẽ tìm hiểu phương pháp truy cập biểu mẫu, lấy các phần tử làm giá trị của biểu mẫu JavaScript và gửi biểu mẫu
Giới thiệu về Biểu mẫu
Biểu mẫu là những điều cơ bản của HTML. Chúng tôi sử dụng phần tử biểu mẫu HTML để tạo biểu mẫu JavaScript. Để tạo biểu mẫu, chúng ta có thể sử dụng mã mẫu sau
trong mã
- Thẻ tên biểu mẫu được sử dụng để xác định tên của biểu mẫu. Tên của biểu mẫu ở đây là "Login_form". Tên này sẽ được tham chiếu ở dạng JavaScript
- Thẻ hành động xác định hành động và trình duyệt sẽ xử lý biểu mẫu khi nó được gửi. Ở đây, chúng tôi đã không có hành động
- Phương thức thực hiện hành động có thể là đăng hoặc nhận, được sử dụng khi biểu mẫu được gửi tới máy chủ. Cả hai loại phương thức đều có thuộc tính và quy tắc riêng
- Thẻ loại đầu vào xác định loại đầu vào mà chúng tôi muốn tạo trong biểu mẫu của mình. Ở đây, chúng tôi đã sử dụng loại đầu vào là 'văn bản', có nghĩa là chúng tôi sẽ nhập các giá trị dưới dạng văn bản vào hộp văn bản
- Net, chúng tôi đã lấy loại đầu vào là 'mật khẩu' và giá trị đầu vào sẽ là mật khẩu
- Tiếp theo, chúng tôi đã lấy loại đầu vào là 'nút' khi nhấp vào, chúng tôi nhận được giá trị của biểu mẫu và được hiển thị
Ngoài hành động và phương thức, còn có các phương thức hữu ích sau đây cũng được cung cấp bởi Phần tử biểu mẫu HTML
- Gửi đi []. Phương thức được sử dụng để gửi biểu mẫu
- cài lại []. Phương pháp được sử dụng để thiết lập lại các giá trị hình thức
biểu mẫu tham khảo
Bây giờ, chúng tôi đã tạo thành phần biểu mẫu bằng HTML, nhưng chúng tôi cũng cần kết nối nó với JavaScript. Đối với điều này, chúng tôi sử dụng phương thức getElementById [] tham chiếu phần tử biểu mẫu html đến mã JavaScript
Cú pháp sử dụng phương thức getElementById[] như sau
Sử dụng Id, chúng ta có thể tạo tham chiếu
Gửi biểu mẫu
Tiếp theo, chúng tôi cần gửi biểu mẫu bằng cách gửi giá trị của nó, chúng tôi sử dụng phương thức onSubmit[]. Nói chung, để gửi, chúng tôi sử dụng nút gửi để gửi giá trị đã nhập trong biểu mẫu
Cú pháp của phương thức submit[] như sau
Khi chúng tôi gửi biểu mẫu, hành động được thực hiện ngay trước khi yêu cầu được gửi đến máy chủ. Nó cho phép chúng tôi thêm một trình lắng nghe sự kiện cho phép chúng tôi đặt các xác thực khác nhau trên biểu mẫu. Cuối cùng, biểu mẫu đã sẵn sàng với sự kết hợp giữa mã HTML và JavaScript
JavaScript là một ngôn ngữ lập trình động được sử dụng để phát triển web, trong các ứng dụng web, để phát triển trò chơi, v.v. Nó cho phép bạn triển khai các tính năng động trên các trang web không thể thực hiện được chỉ bằng HTML và CSS
Nhiều trình duyệt sử dụng JavaScript làm ngôn ngữ kịch bản để thực hiện các thao tác động trên web. Bất cứ khi nào bạn nhìn thấy menu thả xuống nhấp để hiển thị, nội dung bổ sung được thêm vào trang và màu sắc của các thành phần thay đổi linh hoạt trên trang, để đặt tên cho một số tính năng, thì bạn đang thấy tác dụng của JavaScript
Web Sẽ Như Thế Nào Nếu Không Có JavaScript?
Không có JavaScript, tất cả những gì bạn có trên web sẽ là HTML và CSS. Những điều này một mình giới hạn bạn trong một vài triển khai trang web. 90% [nếu không nhiều hơn] các trang web của bạn sẽ ở dạng tĩnh và bạn chỉ có các thay đổi động như hoạt ảnh mà CSS cung cấp
Cách JavaScript làm cho mọi thứ trở nên năng động
HTML xác định cấu trúc tài liệu web của bạn và nội dung trong đó. CSS khai báo các kiểu khác nhau cho nội dung được cung cấp trên tài liệu web
HTML và CSS thường được gọi là ngôn ngữ đánh dấu hơn là ngôn ngữ lập trình, bởi vì về cốt lõi, chúng cung cấp các đánh dấu cho các tài liệu với rất ít tính năng động
Mặt khác, JavaScript là ngôn ngữ lập trình động hỗ trợ tính toán Toán học, cho phép bạn tự động thêm nội dung HTML vào DOM, tạo khai báo kiểu động, tìm nạp nội dung từ trang web khác, v.v.
Trước khi chúng ta tìm hiểu cách JavaScript thực hiện tất cả những điều này, hãy xem một ví dụ nhanh
Kiểm tra codepen này. https. // codepen. io/Dillion/đầy đủ/XWjvdMG
Trong codepen, bạn sẽ thấy rằng khi bạn nhập vào trường nhập liệu, văn bản sẽ hiển thị trên màn hình. Điều đó được thực hiện bởi JavaScript. Bạn không thể có được điều này với HTML, CSS hoặc cả hai cùng nhau
JavaScript có thể làm được nhiều hơn những gì tôi có thể trình bày trong bài viết này. Nhưng để giúp bạn bắt đầu với JS, chúng ta sẽ xem xét
- cách sử dụng JavaScript trong HTML
- Loại dữ liệu
- biến
- bình luận
- chức năng
Cách sử dụng JavaScript trong HTML
Giống như với CSS, JavaScript có thể được sử dụng trong HTML theo nhiều cách khác nhau, chẳng hạn như
1. JavaScript nội tuyến
Tại đây, bạn có mã JavaScript trong các thẻ HTML trong một số thuộc tính dựa trên JS đặc biệt
Ví dụ: các thẻ HTML có các thuộc tính sự kiện cho phép bạn thực thi một số mã nội tuyến khi một sự kiện được kích hoạt. Đây là những gì tôi muốn nói
Click me!
Đây là một ví dụ về JavaScript nội tuyến. Giá trị của
function[]{
alert["I am inside a script tag"]
}
7 có thể là một phép tính Match nào đó, một phần bổ sung động cho DOM – bất kỳ mã JavaScript hợp lệ cú pháp nào2. JavaScript nội bộ, với thẻ
function[]{
alert["I am inside a script tag"]
}
8
function[]{
alert["I am inside a script tag"]
}
Giống như thẻ
function[]{
alert["I am inside a script tag"]
}
9 để khai báo kiểu trong trang HTML, thẻ
function[]{
alert["I am inside a script tag"]
}
8 tồn tại cho JavaScript. Đây là cách nó được sử dụng
function[]{
alert["I am inside a script tag"]
}
3. JavaScript bên ngoài
Bạn có thể muốn có mã JavaScript của mình trong một tệp khác. JavaScript bên ngoài cho phép điều này. Đối với các trường hợp sử dụng như vậy, đây là cách nó được thực hiện
// script.js
alert["I am inside an external file"];
Thuộc tính
1 của thẻ
function[]{
alert["I am inside a script tag"]
}
8 cho phép bạn áp dụng nguồn cho mã JavaScript. Tham chiếu đó rất quan trọng vì nó thông báo cho trình duyệt tìm nạp nội dung của
3
3 có thể nằm trong cùng thư mục với
5 hoặc có thể lấy từ một trang web khác. Đối với trường hợp thứ hai, bạn sẽ cần chuyển toàn bộ URL [
6]Chú ý phần mở rộng
7? Bây giờ chúng ta đã xem xét các cách áp dụng JavaScript vào HTML của mình, hãy xem xét một số tính năng của JavaScript
Các kiểu dữ liệu trong JavaScript
Trong JavaScript, dữ liệu phải thuộc loại này hay loại khác. JavaScript cần biết điều này để nó biết cách sử dụng nó với dữ liệu khác hoặc cách vận hành trên dữ liệu đó
Dưới đây là các kiểu dữ liệu cơ bản mà JavaScript hỗ trợ
- Số [ví dụ:
9,
0,// script.js alert["I am inside an external file"];
1]. trên đó bạn có thể áp dụng các phép toán số học [như phép cộng] và nhiều phép toán khác// script.js alert["I am inside an external file"];
- Chuỗi [như ________ 72, ________ 73, ________ 74]. bất kỳ thứ gì được tìm thấy giữa các dấu ngoặc đơn [_______75], dấu ngoặc kép [
6] và dấu nháy ngược [// script.js alert["I am inside an external file"];
7]. Không có sự khác biệt giữa dấu ngoặc đơn và dấu ngoặc kép, nhưng backticks có nhiều tính năng hơn, chẳng hạn như// script.js alert["I am inside an external file"];
- nội suy các biến trong chuỗi, như vậy.
8.// script.js alert["I am inside an external file"];
9 đây là một biến, được chèn vào chuỗi// script.js alert["I am inside an external file"];
- chuỗi nhiều dòng. Với các trích dẫn thông thường, bạn cần thêm các ký tự thoát như
70 cho một dòng mới, nhưng các dấu nháy ngược cho phép bạn tiếp tục chuỗi của mình trên một dòng khác, như vậyfunction[]{ alert["I am inside a script tag"] }
- nội suy các biến trong chuỗi, như vậy.
function[]{
alert["I am inside a script tag"]
}
7- Boolean [chỉ có thể có hai giá trị.
71 hoặcfunction[]{ alert["I am inside a script tag"] }
72]. giống như có [function[]{ alert["I am inside a script tag"] }
71] hoặc không [function[]{ alert["I am inside a script tag"] }
72]function[]{ alert["I am inside a script tag"] }
- Mảng [ví dụ:
75]. một nhóm dữ liệu [có thể thuộc bất kỳ loại nào, kể cả mảng] được phân tách bằng dấu phẩy. Lập chỉ mục bắt đầu từ 0. Truy cập nội dung của một nhóm như vậy có thể giống như vậy.function[]{ alert["I am inside a script tag"] }
76, trong ví dụ này sẽ trả vềfunction[]{ alert["I am inside a script tag"] }
77, vì đây là mục đầu tiênfunction[]{ alert["I am inside a script tag"] }
- Đối tượng [ví dụ
78]. cũng là một nhóm dữ liệu nhưng ở dạng một cặpfunction[]{ alert["I am inside a script tag"] }
79.function[]{ alert["I am inside a script tag"] }
80 phải là một chuỗi và giá trị có thể là bất kỳ loại nào kể cả đối tượng khác. Truy cập nội dung của nhóm được thực hiện bằng khóa, ví dụfunction[]{ alert["I am inside a script tag"] }
81 hoặcfunction[]{ alert["I am inside a script tag"] }
82 sẽ trả vềfunction[]{ alert["I am inside a script tag"] }
83function[]{ alert["I am inside a script tag"] }
- Không xác định [dữ liệu duy nhất mà loại này hỗ trợ là
84]. Dữ liệu này có thể được gán cho một biến rõ ràng hoặc ngầm định [bằng JavaScript] nếu một biến đã được khai báo nhưng chưa được gán giá trị. Ở phần sau của bài viết này, chúng ta sẽ xem xét khai báo biến và gán giá trịfunction[]{ alert["I am inside a script tag"] }
- Null [dữ liệu duy nhất mà loại này hỗ trợ là
85]. Null có nghĩa là không có giá trị. Nó giữ một giá trị, nhưng không phải là một giá trị thực – đúng hơn là nullfunction[]{ alert["I am inside a script tag"] }
- Chức năng [ví dụ:
86]. Hàm là một kiểu dữ liệu gọi một khối mã khi được gọi. Thông tin thêm về các chức năng sau trong bài viết nàyfunction[]{ alert["I am inside a script tag"] }
Các kiểu dữ liệu JavaScript có thể hơi phức tạp để hiểu. Bạn có thể đã nghe nói rằng mảng và hàm cũng là đối tượng, và điều đó đúng
Hiểu điều này liên quan đến việc hiểu bản chất của các nguyên mẫu JavaScript. Tuy nhiên, ở mức cơ bản, đây là những kiểu dữ liệu bạn cần biết đầu tiên trong JavaScript
Các biến trong JavaScript
Biến là nơi chứa các giá trị của bất kỳ loại dữ liệu nào. Chúng giữ các giá trị sao cho khi các biến được sử dụng, JavaScript sẽ sử dụng giá trị mà chúng đại diện cho thao tác đó
Các biến có thể được khai báo và có thể được gán một giá trị. Khi bạn khai báo một biến, bạn đang làm điều này
function[]{
alert["I am inside a script tag"]
}
8Đối với phần trên,
// script.js
alert["I am inside an external file"];
9 đã được khai báo, nhưng nó chưa có giá trịNhư bạn mong đợi từ phần kiểu dữ liệu, JavaScript sẽ tự động gán giá trị từ
function[]{
alert["I am inside a script tag"]
}
84 đến // script.js
alert["I am inside an external file"];
9. Vì vậy, nếu bạn cố gắng sử dụng // script.js
alert["I am inside an external file"];
9 ở bất kỳ đâu, thì
function[]{
alert["I am inside a script tag"]
}
84 sẽ được sử dụng cho thao tác đóĐây là ý nghĩa của việc gán một giá trị cho một biến
function[]{
alert["I am inside a script tag"]
}
1Bây giờ nếu bạn sử dụng
// script.js
alert["I am inside an external file"];
9, nó sẽ đại diện cho
function[]{
alert["I am inside a script tag"]
}
13Khai báo và gán có thể được thực hiện trên một dòng như vậy
function[]{
alert["I am inside a script tag"]
}
4Tại sao
function[]{
alert["I am inside a script tag"]
}
14? . JavaScript hỗ trợ ba phương thức khai báo biến, đó là- toán tử
15. điều này đã xảy ra với JavaScript kể từ khi thành lập. Bạn có thể khai báo các biến và gán giá trị cho chúng mà có thể thay đổi sau này trong mã. Đây là những gì tôi muốn nóifunction[]{ alert["I am inside a script tag"] }
function[]{
alert["I am inside a script tag"]
}
7- toán tử
14. điều này cũng rất giống vớifunction[]{ alert["I am inside a script tag"] }
15 – nó khai báo và gán giá trị cho các biến có thể thay đổi sau này trong mã. Sự khác biệt chính giữa các toán tử này làfunction[]{ alert["I am inside a script tag"] }
15 nâng các biến như vậy, trong khifunction[]{ alert["I am inside a script tag"] }
14 không nâng. Khái niệm cẩu có thể được giải thích ngắn gọn bằng đoạn mã saufunction[]{ alert["I am inside a script tag"] }
2Khi gọi hàm
function[]{
alert["I am inside a script tag"]
}
40 [
function[]{
alert["I am inside a script tag"]
}
41],
function[]{
alert["I am inside a script tag"]
}
42 đầu tiên in ra
function[]{
alert["I am inside a script tag"]
}
84 trong khi
function[]{
alert["I am inside a script tag"]
}
42 thứ hai đưa ra lỗi "Không thể truy cập
function[]{
alert["I am inside a script tag"]
}
45 trước khi khởi tạo"Điều này là do khai báo của biến
// script.js
alert["I am inside an external file"];
9 được nâng [nâng] lên đầu hàm và phép gán cho biến nằm trên cùng một dòng trong khi khai báo và phép gán của
function[]{
alert["I am inside a script tag"]
}
45 nằm trên cùng một dòngĐây là cách đoạn mã trên được biên dịch
function[]{
alert["I am inside a script tag"]
}
0Sự cố vận thăng có thể xảy ra bất ngờ và đó là lý do tại sao bạn nên sử dụng
function[]{
alert["I am inside a script tag"]
}
14 thay vì
function[]{
alert["I am inside a script tag"]
}
15- toán tử
70. điều này cũng không kéo các biến, nhưng nó còn làm một việc nữa. nó đảm bảo rằng một biến không thể được gán một giá trị khác với giá trị mà nó đã được gán trong quá trình khởi tạofunction[]{ alert["I am inside a script tag"] }
Ví dụ
function[]{
alert["I am inside a script tag"]
}
1Nhận xét trong JavaScript
Cũng giống như HTML, đôi khi chúng ta có thể muốn ghi chú bên cạnh mã của mình mà không cần phải thực thi
Chúng ta có thể làm điều này trong JavaScript theo hai cách
- với các bình luận một dòng, như thế này.
71function[]{ alert["I am inside a script tag"] }
- hoặc với các bình luận nhiều dòng, như thế này
function[]{
alert["I am inside a script tag"]
}
2Hàm trong JavaScript
Với các chức năng, bạn có thể lưu trữ một khối mã có thể được sử dụng ở những nơi khác trong mã của bạn. Giả sử bạn muốn in "JavaScript" và "Ngôn ngữ" ở các vị trí khác nhau trong mã của mình. thay vì làm điều này
function[]{
alert["I am inside a script tag"]
}
3Bạn có thể làm được việc này
function[]{
alert["I am inside a script tag"]
}
4Bằng cách này, chúng tôi đã lưu trữ khối mã lặp lại trong một chức năng có thể được sử dụng ở bất cứ đâu chúng tôi muốn. Nhưng đó không phải là tất cả. Giả sử chúng ta muốn tìm trung bình cộng của ba số. Mã cho điều này sẽ là
function[]{
alert["I am inside a script tag"]
}
5Làm điều này bên ngoài chức năng có thể không hại gì, nhưng nếu chúng ta phải làm điều đó ở nhiều nơi?
function[]{
alert["I am inside a script tag"]
}
6Như bạn sẽ nhận thấy trong tuyên bố của
function[]{
alert["I am inside a script tag"]
}
72, chúng tôi có
function[]{
alert["I am inside a script tag"]
}
73 trong ngoặc đơn. Đây là các tham số đóng vai trò giữ chỗ cho các giá trị sẽ được cung cấp khi hàm được gọiKhối mã sử dụng các trình giữ chỗ đó để tìm giá trị trung bình và từ khóa
function[]{
alert["I am inside a script tag"]
}
74 trả về giá trị trung bình từ hàmTrình giữ chỗ giúp các hàm của bạn có thể tái sử dụng sao cho các giá trị khác nhau tại các thời điểm khác nhau có thể được chuyển đến các hàm để sử dụng cùng một logic
Sự kết luận
JavaScript còn nhiều tính năng khác mà chúng ta có thể thảo luận, nhưng tôi hy vọng bài viết này đã cung cấp cho bạn một điểm khởi đầu rõ ràng để tiến xa hơn. Bây giờ bạn nên biết ngôn ngữ này là gì và làm thế nào bạn có thể sử dụng nó trên web
Trong bài viết này, chúng ta đã xem xét cách thêm mã JavaScript vào tệp HTML của mình, các loại dữ liệu khác nhau mà JavaScript hỗ trợ, các biến đóng vai trò là bộ chứa giá trị, cách viết nhận xét trong JavaScript và một chút về cách
Có rất nhiều nơi để đi từ đây, nhưng tôi khuyên bạn nên tìm hiểu về DOM và cách JavaScript tương tác với nó ở phần tiếp theo
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
QUẢNG CÁO
Người ủng hộ nhà phát triển và Người sáng tạo nội dung đam mê chia sẻ kiến thức của tôi về Công nghệ. Tôi dạy JavaScript / ReactJS / NodeJS / React Frameworks / TypeScript / et al
Nếu bạn đọc đến đây, hãy tweet cho tác giả để cho họ thấy bạn quan tâm. Tweet một lời cảm ơn
Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu