Biểu mẫu đầy đủ của JavaScript

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

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ào

2. JavaScript nội bộ, với thẻ 8

Giống như thẻ

9 để khai báo kiểu trong trang HTML, thẻ

8 tồn tại cho JavaScript. Đây là cách nó được sử dụng

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ẻ

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,

  // script.js
  alert("I am inside an external file");
  

  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
• 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 (

  // script.js
  alert("I am inside an external file");
  

  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ư
  • nội suy các biến trong chuỗi, như vậy.

    // script.js
    alert("I am inside an external file");
    

    8.

    // script.js
    alert("I am inside an external file");
    

    9 đây là một biến, được chèn vào chuỗi
  • 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ậy

7

• Boolean (chỉ có thể có hai giá trị.
  71 hoặc
  72). giống như có (
  71) hoặc không (
  72)
• 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.
  76, trong ví dụ này sẽ trả về
  77, vì đây là mục đầu tiên
• Đối tượng (ví dụ
  78). cũng là một nhóm dữ liệu nhưng ở dạng một cặp
  79.
  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ụ
  81 hoặc
  82 sẽ trả về
  83
• 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ị
• 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à null
• 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ày

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

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ừ

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ì

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

1

Bâ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

13

Khai báo và gán có thể được thực hiện trên một dòng như vậy

4

Tại sao

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ói

7

• toán tử
  14. điều này cũng rất giống với
  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à
  15 nâng các biến như vậy, trong khi
  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ã sau

2

Khi gọi hàm

40 (

41),

42 đầu tiên in ra

84 trong khi

42 thứ hai đưa ra lỗi "Không thể truy cập

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

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

0

Sự 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

14 thay vì

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ạo

Ví dụ

1

Nhậ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.
  71
• hoặc với các bình luận nhiều dòng, như thế này

2

Hà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

3

Bạn có thể làm được việc này

4

Bằ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à

5

Là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?

6

Như bạn sẽ nhận thấy trong tuyên bố của

72, chúng tôi có

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ọi

Khối mã sử dụng các trình giữ chỗ đó để tìm giá trị trung bình và từ khóa

74 trả về giá trị trung bình từ hàm

Trì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

---

Dillion Megida

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

HTML và JavaScript là gì?

Việc sử dụng JavaScript là gì?

Tại sao JS được gọi là JavaScript?

JavaScript có phải là mã hóa không?