Cách hiển thị tên người dùng chào mừng trong html bằng javascript
Sự khởi đầu của hành trình phát triển web (front-end) có thể khó khăn. Đánh dấu ban đầu thực sự kỳ lạ. CSS đôi khi làm cho trang của bạn đẹp, đôi khi bạn không biết tại sao một thuộc tính duy nhất lại biến trang của bạn thành một mớ hỗn độn. Và trong trường hợp đây là lần đầu tiên bạn làm việc với một ngôn ngữ lập trình, thì JavaScript có thể là ngôn ngữ khó khăn nhất trong ba ngôn ngữ này. Tuy nhiên, khi cuối cùng bạn đã nắm được HTML, CSS và JavaScript, bạn sẽ làm gì với chúng? . Hãy nghĩ về điều gì đó bạn muốn làm với kiến thức mới tìm được của mình, không quan trọng nếu nó “hữu ích”, không quan trọng nó phức tạp như thế nào. Chỉ cần làm điều gì đó giúp bạn cải thiện HTML, CSS và JavaScript. Và làm ơn, đừng bao giờ quên giá trị của việc xây dựng những thứ ngu ngốc. ) Hôm nay, như bạn đã biết từ tiêu đề, tôi sẽ hướng dẫn bạn cách tạo trang đăng nhập bằng HTML, CSS và JavaScript. Nhưng đừng lo lắng. Một lần nữa, như tiêu đề đã nói, đây là trang đăng nhập đầu tiên của bạn, có nghĩa là mã càng đơn giản càng tốt và sẽ có giải thích đi kèm với mỗi đoạn mã Tuy nhiên, trước khi chuyển sang mã, hãy để tôi chỉ cho bạn những gì chúng tôi sẽ tạo Như bạn có thể thấy, trang chứa tiêu đề, biểu mẫu đăng nhập (tên người dùng và mật khẩu) và nút đăng nhập “gửi” dữ liệu đầu vào. Lưu ý rằng tôi đã sử dụng dấu ngoặc kép xung quanh nội dung gửi vì thực tế không có nội dung gửi nào. Cả tên người dùng và mật khẩu đều không được gửi đến máy chủ để được xác thực. Thay vào đó, khi người dùng nhấp vào nút đăng nhập, chúng tôi xác thực rằng tên người dùng là “người dùng” và mật khẩu là “web_dev” bằng JavaScript. Nếu chúng khớp nhau thì hộp thoại cảnh báo sẽ hiển thị và trang được tải lại (để đơn giản); Bây giờ bạn đã quen thuộc hơn với kết quả cuối cùng, hãy chuyển sang viết mã HTMLChúng tôi sẽ bắt đầu với HTML, vì nó chịu trách nhiệm về thông tin được hiển thị trên trang. Nói cách khác, trước tiên chúng ta sẽ viết và cấu trúc tất cả thông tin có trong trang mà không cần lo lắng về kiểu dáng (CSS) hay tính tương tác (JavaScript). Phân tích tệp HTML hoàn chỉnh trong bao lâu tùy thích và khi bạn đã sẵn sàng, hãy chuyển sang phần giải thích tệp HTMLNhư thường lệ trong các tệp HTML, chúng tôi có hai phần. Trong Bên trong phần tử Nhân tiện, nếu bạn đang thắc mắc tại sao các phần tử Tất nhiên, chúng tôi sử dụng nhiều id và lớp để tạo điều kiện thuận lợi cho công việc của chúng tôi với CSS. Các id cho phép chúng tôi chọn các phần tử HTML một cách rõ ràng, nghĩa là mỗi id đại diện cho một phần tử của tệp của chúng tôi. Mặt khác, các lớp được sử dụng khi chúng ta có một tập hợp các kiểu CSS mà chúng ta muốn lặp lại cho nhiều phần tử. Tiếp theo, chúng ta sẽ thấy cách sử dụng thực tế của các id và lớp này Bây giờ chúng ta có CSS, nói cách khác, kiểu trang của chúng ta. Để sửa đổi từng thành phần trong tệp HTML của chúng tôi, chúng tôi có thể chọn chúng bằng cách sử dụng id, lớp hoặc tên thẻ, mặc dù tùy chọn cuối cùng không được khuyến khích. Bạn thấy đấy, kiểu của các bộ chọn CSS cụ thể hơn sẽ ghi đè lên kiểu của những bộ chọn ít cụ thể hơn. Ví dụ: kiểu của bộ chọn id sẽ ghi đè lên kiểu của bộ chọn lớp và kiểu của bộ chọn lớp sẽ ghi đè lên kiểu của bộ chọn tên thẻ. Nói cách khác, luôn làm cho bộ chọn CSS của bạn càng cụ thể càng tốt để chỉ ảnh hưởng đến các thành phần bạn muốn bị ảnh hưởng Và đừng quên, trong khi bộ chọn tên thẻ chỉ cần tên của thẻ, bộ chọn id bắt đầu bằng dấu thăng ( Như đã nói, bạn vẫn có thể sử dụng bộ chọn tên thẻ. Chẳng hạn, hãy nhìn vào phần đầu của mã ý chính. Tên thẻ Vẫn trên Chúng tôi sẽ chỉ sử dụng các trường hợp sử dụng bố cục lưới đơn giản nhất, nghĩa là, để làm cho một phần tử sử dụng hiển thị lưới và sau đó định vị nội dung của nó cho phù hợp, nhưng tôi khuyên bạn nên xem xét Bố cục lưới khi bạn có thể. Đó là một công cụ đơn giản nhưng mạnh mẽ để định vị các thành phần trong trang của bạn Đối với Hàng đầu tiên của lưới, tiêu đề, giữ nguyên. Sửa đổi duy nhất mà nó nhận được là được căn giữa, do nội dung của Mặt khác, hàng thứ hai có một số sửa đổi (dòng 26 đến 49), vì chúng ta cần sửa đổi cả hàng chứa thông báo lỗi và sau đó là chính thông báo lỗi. Chúng tôi sử dụng bố cục dạng lưới một lần nữa để căn giữa thông báo bên trong hàng thứ hai và làm cho Đối với thông báo lỗi, chúng tôi chỉ xem xét kích thước và kiểu dáng của nó. Do lưu ý rằng ban đầu Bây giờ chúng ta chỉ cần xem qua các bộ quy tắc của Sau đó, chúng tôi tạo kiểu cho các trường biểu mẫu. Vì chúng tôi muốn cả hai trường (tên người dùng và mật khẩu) trông giống nhau, nên chúng tôi tạo một bộ quy tắc duy nhất chọn lớp được cung cấp cho cả hai thành phần, Đối với các sửa đổi về kiểu dáng, đó là một số thay đổi nhỏ để làm cho hai yếu tố Cuối cùng, chúng tôi thay đổi phong cách của nút đăng nhập để trông đẹp hơn. Không có gì mới ở đây, ngoại trừ Được rồi, chúng tôi đã học qua HTML và chúng tôi vừa hoàn thành CSS. Bây giờ chúng tôi đang ở trong nhà với JavaScript Đối với người mới bắt đầu, chúng tôi nhận được tất cả các yếu tố mà chúng tôi sẽ cần để làm việc khi sử dụng JavaScript. biểu mẫu đăng nhập, nút đăng nhập và thông báo lỗi đăng nhập. Chúng tôi làm điều đó bằng cách gọi phương thức Sau đó, chúng tôi tạo một trình lắng nghe sự kiện cho nút đăng nhập, loại Bên trong chức năng, chúng tôi bắt đầu bằng cách ngăn hành vi mặc định là nhấp vào nút đăng nhập (tức là gửi dữ liệu biểu mẫu). Trong phần trình diễn này, chúng tôi không muốn gửi dữ liệu, chúng tôi chỉ muốn xác thực dữ liệu đó bằng JavaScript, do đó, Sau đó, chúng tôi lấy các giá trị do người dùng nhập vào trong các trường biểu mẫu Bây giờ là những bước hoàn thiện. Bất cứ khi nào người dùng nhấp vào nút đăng nhập, chúng tôi sẽ truy xuất bất kỳ giá trị nào đã được nhập vào các trường biểu mẫu. Nhưng chúng ta cần phải làm gì đó với những thông tin đăng nhập đó. Sau đó, chúng ta sẽ viết một khối if/else để thực thi một đoạn mã nếu thông tin đăng nhập hợp lệ hoặc một đoạn mã khác nếu chúng không hợp lệ. Chúng ta cũng cần một điều kiện phải không? . Để đơn giản, việc xác thực đó sẽ kiểm tra xem tên người dùng đã nhập có phải là “người dùng” và mật khẩu là “web_dev” không. Theo cú pháp JavaScript, điều này có nghĩa là trong đó Nếu thông tin đăng nhập thực sự hợp lệ, thì chúng tôi sẽ hiển thị hộp thoại cảnh báo với thông báo rằng người dùng đã đăng nhập thành công và tải lại trang tiếp theo (một lần nữa, chỉ vì mục đích đơn giản). Nhưng nếu tên người dùng hoặc mật khẩu không hợp lệ, thì chúng tôi sẽ thay đổi thuộc tính |
