Làm cách nào để hiển thị đầu vào từ dấu nhắc JavaScript?

Sau khi bạn nhấn Return hoặc Enter, một cửa sổ bật lên sẽ xuất hiện trong cửa sổ trình duyệt của bạn với trường văn bản, như được hiển thị ở đây

Nhắc người dùng nhập liệu

Sau khi bạn nhập tên của mình và nhấp vào OK, cửa sổ bật lên sẽ biến mất và giá trị mà bạn đã nhập trong cửa sổ bật lên sẽ hiển thị trong bảng điều khiển, như được hiển thị ở đây

Hiển thị tên của bạn

Điều đó tốt và tốt nếu tất cả những gì bạn muốn làm là thu thập dữ liệu và ngay lập tức lặp lại dữ liệu đó như một con vẹt. Nhưng nếu bạn muốn làm gì đó với dữ liệu do người dùng nhập vào thì sao?

Để lưu trữ dữ liệu do người dùng nhập vào một biến, bạn tạo một biến mới rồi theo dõi biến đó bằng = . Sau đó, bạn làm theo nó với câu lệnh nhắc.

var username = prompt("What is your name?");

Điều quan trọng cần lưu ý là một dấu bằng duy nhất ( = ) trong JavaScript được gọi là toán tử gán. Công việc của nó là đặt giá trị bên phải vào biến bên trái.

Khi bạn nhấn Return hoặc Enter, một cửa sổ bật lên sẽ xuất hiện trong trình duyệt của bạn, giống như trước đây

Khi bạn nhập tên của mình vào cửa sổ bật lên và nhấp vào OK, Bảng điều khiển JavaScript in ra không xác định, cho biết rằng câu lệnh đã kết thúc và không có gì khác để thực hiện

Để xem giá trị bạn vừa nhập, bạn có thể nhập tên biến vào bảng điều khiển. JavaScript phản hồi với giá trị của biến, như được hiển thị ở đây

Làm việc với bất kỳ ngôn ngữ động nào đều yêu cầu khả năng đọc, xử lý và xuất dữ liệu người dùng. JavaScript đặc biệt hữu ích khi bạn muốn lấy thông tin người dùng và xử lý thông tin đó mà không gửi dữ liệu về máy chủ. JavaScript nhanh hơn nhiều so với việc gửi mọi thứ đến máy chủ để xử lý, nhưng bạn phải có khả năng đọc đầu vào của người dùng và sử dụng đúng cú pháp để làm việc với đầu vào đó. Bài viết này sẽ tập trung vào việc truy xuất đầu vào của người dùng và hiển thị nó trên màn hình thông qua các phần tử HTML hoặc lời nhắc.  

Hiển thị lời nhắc và truy xuất phản hồi của người dùng

JavaScript có một vài phương thức đối tượng cửa sổ mà bạn có thể sử dụng để tương tác với người dùng của mình. Phương thức prompt() cho phép bạn mở cửa sổ phía máy khách và nhận đầu vào từ người dùng. Chẳng hạn, có thể bạn muốn người dùng nhập họ và tên. Thông thường, bạn có thể sử dụng biểu mẫu HTML cho thông tin nhập của người dùng, nhưng bạn có thể cần lấy thông tin trước khi gửi biểu mẫu trở lại máy chủ của mình để xử lý. Bạn có thể sử dụng cửa sổ. phương thức prompt() cho một lượng nhỏ thông tin. Nó không dành cho các khối văn bản lớn, nhưng nó hữu ích khi bạn cần thông tin trước khi người dùng tiếp tục sang trang khác

Đoạn mã sau là một ví dụ về cửa sổ. phương pháp nhanh chóng.  

var customerName = prompt("Vui lòng nhập tên của bạn", "");

nếu (tên khách hàng. = không) {

tài liệu. getElementById("chào mừng"). bên trongHTML =

"Xin chào " + tên khách hàng + ". Hôm nay bạn thế nào?";

}

Dòng mã đầu tiên sử dụng phương thức nhắc. Lưu ý rằng chúng ta không cần đối tượng "window" vì JavaScript kế thừa các phương thức DOM chính và hiểu rằng đây là một phương thức nội bộ. Tham số đầu tiên trong lời nhắc là những gì bạn muốn hiển thị cho người dùng. Trong ví dụ này, chúng tôi muốn người dùng nhập tên, vì vậy lời nhắc hiển thị "Vui lòng nhập tên của bạn. " Tham số thứ hai là văn bản mặc định. Văn bản mặc định này giúp người dùng hiểu nơi nhập tên, nhưng nếu anh ta nhấp vào "OK" mà không nhập tên, văn bản "" sẽ được sử dụng cho tên người dùng. Bạn có thể tạo các kiểm tra trong mã JavaScript của mình để phát hiện khi người dùng không nhập tên và chỉ cần nhấp vào OK, nhưng mã này giả định rằng bất kỳ văn bản nào được nhập đều là tên của người dùng.  

Lưu ý câu lệnh "if" kiểm tra xem biến "tên khách hàng" có phải là null không. Logic này kiểm tra để đảm bảo rằng người dùng đã nhập nội dung nào đó. Nó chỉ kiểm tra xem một số ký tự đã được nhập vào, vì vậy người dùng có thể nhập bất kỳ thứ gì để bỏ qua câu lệnh "if". Mã trong câu lệnh "nếu" sau đó hiển thị thông báo cho người dùng trong div "chào mừng". Chúng tôi đã đề cập đến việc đọc và viết văn bản lên một trang web và đây là một ví dụ khác về việc viết văn bản vào phần HTML bên trong của div. Hãy nhớ rằng thuộc tính innerHTML ghi bất kỳ thẻ hoặc văn bản nào trong thẻ div mở và đóng

Sử dụng phương pháp này để nhận phản hồi chuỗi ngắn từ người dùng của bạn trước khi họ truy cập một trang hoặc trước khi họ chuyển sang trang khác trong cấu trúc trang web của bạn

Hộp thông báo xác nhận JavaScript

Cửa sổ. phương thức nhanh chóng là một cách để đọc đầu vào của người dùng, nhưng JavaScript cũng cung cấp một cách để nhận xác nhận từ người dùng. Chẳng hạn, bạn có thể muốn xác nhận rằng người dùng đã nhập đúng thông tin và muốn tiếp tục thanh toán. Cửa sổ xác nhận hiển thị số tiền người dùng sẽ bị tính phí và người dùng có tùy chọn xác nhận hoặc hủy bỏ. Bạn có thể viết một hàm JavaScript phức tạp để tạo một cửa sổ mới để xác nhận hoặc bạn có thể sử dụng cửa sổ bên trong. xác nhận phương pháp. Phương thức này trả về kết quả đúng boolean nếu người dùng nhấp vào "OK" hoặc kết quả sai boolean nếu người dùng nhấp vào "Hủy. " Lời nhắc này là một cách nhanh chóng để nhận được xác nhận mà không cần sử dụng bất kỳ logic mã hóa phức tạp nào

Nhìn vào đoạn mã JavaScript sau

var r = confirm("Bạn có chắc muốn gửi thanh toán không?");

nếu (r == đúng) {

x = "Đã gửi thanh toán. “;

} khác {

x = "Thanh toán bị hủy. “;

}

cảnh báo (x);

Tiện ích chính trong đoạn mã trên là chức năng "xác nhận". Đây là một chức năng JavaScript nội bộ từ đối tượng cửa sổ. Nói cách khác, sử dụng "cửa sổ. xác nhận ()" và "xác nhận" dẫn đến cùng một chức năng. JavaScript xử lý việc thừa kế cho bạn, vì vậy bạn không cần nhớ sử dụng đối tượng cửa sổ. Cửa sổ xác nhận cũng được tạo sẵn và hiển thị cho người dùng. Trong ví dụ này, lời nhắc hiển thị với nội dung "Bạn có chắc chắn muốn gửi thanh toán không?" . OK là xác nhận trả về "true. " Nếu người dùng nhấp vào "OK", biến x chứa văn bản "Đã gửi thanh toán. " Ngược lại, nếu người dùng nhấp vào nút "Hủy", x chứa dòng chữ "Đã hủy thanh toán. " Văn bản sau đó được hiển thị cho người dùng bằng chức năng "cảnh báo". Đây là lần đầu tiên chúng ta thấy chức năng cảnh báo, đây cũng là một phần của đối tượng cửa sổ. Nhập "cảnh báo" và "cửa sổ. cảnh báo" dẫn đến cùng một cuộc gọi phương thức. Lời nhắc cảnh báo là phổ biến trong quá trình gỡ lỗi và phát triển ứng dụng web, vì đó là cách nhanh chóng để kiểm tra logic của bạn và xem luồng điều khiển mã của bạn. Hàm cảnh báo trong ví dụ này kiểm tra xem cửa sổ xác nhận có phản hồi đúng kết quả không và biến x chứa đúng văn bản

Hiển thị văn bản từ đầu vào của người dùng

Có ba thẻ HTML chính được sử dụng để hiển thị văn bản sau khi bạn nhắc người dùng. Bạn đã thấy hai hàm JavaScript nội bộ nhận đầu vào của người dùng, nhưng làm cách nào để bạn hiển thị lại cho người dùng? . Cái thứ ba, thẻ văn bản, là một trường biểu mẫu được sử dụng để lấy đầu vào chuỗi từ người dùng. Bạn thường sử dụng thẻ này để nhận đầu vào như tên hoặc địa chỉ, nhưng bạn cũng có thể hiển thị thông tin đầu vào từ người dùng

Các thẻ span và div là một cách để chỉ hiển thị thông tin bạn đã đọc trong các cửa sổ nhắc JavaScript. Bạn cũng có thể hiển thị dữ liệu bạn đã truy xuất từ ​​cơ sở dữ liệu

Hãy sử dụng ví dụ trước khi chúng tôi nhắc người dùng nhập tên. Sau đó, chúng tôi sử dụng đầu vào để hiển thị đầu ra trong phần tử div. Chúng tôi đã thấy điều này trước đây, nhưng đây là lần đầu tiên chúng tôi sử dụng đầu vào trực tiếp từ người dùng

Mã JavaScript đầu tiên của tôi

Lần này, chúng tôi đã đưa vào HTML để cho bạn thấy cách lời nhắc JavaScript hoạt động với các phần tử HTML. Phần tử chúng tôi đang sử dụng là thẻ div HTML có id là "welcome. " Dấu nhắc JavaScript hỏi tên người dùng và sau đó hiển thị kết quả trong div "chào mừng". Bạn cũng có thể sử dụng cùng mã này để hiển thị kết quả trong phần tử span bằng cách sử dụng cùng một mã ngoại trừ thay đổi thẻ div thành thẻ mở và đóng span.  

Bạn đã nhiều lần nhìn thấy thuộc tính innerHTML, thuộc tính này kiểm soát văn bản trong các thẻ div hoặc span mở và đóng, nhưng nếu bạn muốn sử dụng đầu vào để điền trước một trường biểu mẫu thì sao? . Sử dụng cùng một ví dụ đầu vào như chúng ta đã sử dụng trước đây, đoạn mã sau sử dụng dấu nhắc đầu vào để nhập tên người dùng vào trường văn bản "tên người dùng".  

Đoạn mã trên thay đổi một chút so với ví dụ div trước đó. Mã này sử dụng cùng một phương thức nhắc để lấy tên người dùng, nhưng sau đó nó hiển thị thông tin trong phần tử "đầu vào" với loại được đặt là "văn bản. " Một lần nữa, bạn sẽ nhận thấy rằng thuộc tính thẻ id được sử dụng, cho phép chúng tôi lấy phần tử DOM theo id và thay đổi thuộc tính của nó. Phần tử đầu vào của biểu mẫu sử dụng thuộc tính "giá trị" chứ không phải thuộc tính InternalHTML. Bạn sẽ thuộc lòng các thuộc tính phần tử DOM khi bạn sử dụng chúng thường xuyên hơn. Cũng lưu ý rằng thẻ HTML đầu vào không có thẻ đóng. Dấu kết thúc "/>" có thể được sử dụng khi bạn không cần chứa văn bản trong thẻ mở và thẻ đóng. Sử dụng bộ kết thúc sạch hơn và tuân theo các tiêu chuẩn HTML5.  

JavaScript được sử dụng để thao tác giao diện người dùng trong một ứng dụng web, vì vậy phần tiếp theo này là một cái nhìn quan trọng về việc lấy đầu vào của người dùng và sử dụng đầu vào đó để thay đổi các thành phần. Bạn sẽ sử dụng chức năng này thường xuyên khi làm việc với các trang JavaScript và HTML

Quản lý kiểu trang web bằng JavaScript và CSS

Chúng tôi đã đề cập đến việc hiển thị đầu ra cho người dùng và đọc đầu vào từ lời nhắc của cửa sổ trong JavaScript. Một lợi ích của việc sử dụng JavaScript là tích hợp nó với CSS. Các tệp CSS chứa các kiểu cho trang web của bạn và JavaScript cho phép bạn thay đổi các kiểu này một cách linh hoạt. Chẳng hạn, bạn có thể muốn thay đổi màu của một số văn bản khi người dùng di chuột qua đoạn văn hoặc hiển thị menu thả xuống khi người dùng nhấp vào nút. Có thể thực hiện các loại hành động này bằng CSS và JavaScript. Cả hai ngôn ngữ này hoạt động cùng nhau để tạo giao diện người dùng phía máy khách nhanh. Bài viết này trình bày một số điều cơ bản khi làm việc với CSS và JavaScript.  

CSS là gì?

Cascading Style Sheets từ lâu đã là một phần thiết kế của trang web. HTML là cơ sở mã, nhưng CSS tạo kiểu cho các phần tử. Cho dù đó là kiểu dáng của màu sắc liên kết, kích thước phông chữ hay vị trí div trên trang, CSS đều sẽ làm việc đó cho bạn. Ngôn ngữ CSS tách mã khỏi thiết kế, vì vậy bạn có thể áp dụng các kiểu cho một số trang web mà không cần bất kỳ mã bổ sung nào. Cắm trang CSS và để biểu định kiểu thực hiện thiết kế cho bạn. Bạn cũng có thể làm việc với một nhà thiết kế có thể làm việc với CSS để tạo kiểu cho trang web của bạn trong khi bạn tạo mã.  

Sử dụng các lớp phần tử

CSS sử dụng các lớp giống như các ngôn ngữ hướng đối tượng khác. CSS cho phép bạn xác định một lớp mà sau đó bạn chèn vào HTML của mình. Các lớp có thể được sử dụng theo tên trong HTML của bạn bằng cách sử dụng thuộc tính "lớp" được xác định trong hầu hết các thẻ HTML. Hãy lấy một ví dụ về một lớp CSS trong mã bên dưới.  

p {
    căn chỉnh văn bản. trung tâm;
     màu sắc. màu xanh lục;
}

Trong lớp CSS ở trên, một thiết kế được đặt cho thẻ "p" HTML. Tên và cú pháp kiểu CSS cần một chút thời gian để làm quen, nhưng ví dụ cụ thể này sẽ căn chỉnh văn bản của đoạn văn vào giữa và thay đổi màu phông chữ thành màu xanh lá cây. Vấn đề với mã này là tất cả các thành phần đoạn văn sẽ có cùng một thiết kế. Để khắc phục hạn chế này, bạn có thể tạo cùng một kiểu lớp CSS với tên lớp thay vì bao gồm tất cả các thẻ p.  

Đoạn mã sau là một ví dụ về cùng một lớp ngoại trừ nó được đặt tên.  

.center {
    căn chỉnh văn bản. trung tâm;
     màu sắc. màu xanh lục;
} 

Trong ví dụ này, chỉ những phần tử sử dụng lớp "trung tâm" mới kết hợp căn chỉnh văn bản ở giữa và phông chữ màu xanh lá cây. Trang HTML sau đây chỉ cho bạn cách sử dụng kiểu CSS.  

Chào người dùng

Lưu ý thẻ "style" chứa lớp "center" mà chúng ta đã tạo. Bạn cũng có thể sử dụng các tệp CSS bên ngoài và liên kết chúng trong các trang của mình. Trong ví dụ trên, chúng tôi đã tạo một đoạn văn và gán cho nó lớp "trung tâm" bằng cách sử dụng thuộc tính "lớp". Các lớp trong CSS được biểu thị bằng dấu chấm trước tên lớp. Đó là tất cả những gì cần thiết để liên kết các kiểu CSS với các thành phần HTML của bạn. Lớp thứ hai có tên "center_black" được đặt với các thuộc tính giống như "center" ngoại trừ văn bản có màu đen. Bạn có thể sử dụng JavaScript để tự động thay đổi kiểu giữa lớp "trung tâm" và lớp "center_black".  

Nếu bạn còn nhớ, chúng tôi đã sử dụng phương thức "getElementById" nhiều lần để trỏ mã JavaScript tới một phần tử HTML cụ thể. Bạn có thể làm tương tự với việc thay đổi thuộc tính lớp CSS. Nhìn vào đoạn mã JavaScript sau.  

tài liệu. getElementById("tên người dùng"). className = "center_black";

Dòng mã này thay đổi lớp được áp dụng từ "center" thành center_black. Thông thường, bạn thay đổi một lớp sau một sự kiện nhất định từ người dùng. Chẳng hạn, bạn có thể muốn thay đổi lớp dựa trên thời điểm người dùng di chuột qua đoạn văn. Chúng tôi đã thảo luận về các sự kiện trong một chương trước. Khi người dùng di chuột qua một phần tử, sự kiện "onmouseover" sẽ kích hoạt. Bạn có thể ghi đè sự kiện này và đặt chức năng của riêng mình. Trong trường hợp này, bạn ghi đè sự kiện onmouseover và đặt nó thành một hàm JavaScript thay đổi lớp CSS. Đoạn mã sau là một ví dụ dựa trên mẫu mã trước đó.  

Chào người dùng

Các kiểu và mã đoạn giống nhau ngoại trừ một hàm JavaScript đã được thêm vào và sự kiện "onmouseover" được chèn vào thẻ HTML của đoạn. Sự kiện onmouseover gọi hàm JavaScript "ChangeStyle. " Khi người dùng di chuột qua đoạn văn bản, màu văn bản sẽ chuyển sang màu đen. Ví dụ này là một trong nhiều thay đổi động mà bạn sẽ cần tạo khi làm việc với CSS và JavaScript.  

Làm việc với CSS3, Hoạt ảnh và Hiệu ứng chuyển tiếp

Nhiều năm trước, cách duy nhất để tạo hoạt ảnh động là sử dụng Adobe Flash. HTML5 và CSS3 cho phép bạn thoát khỏi Flash và sử dụng lập trình gốc cho bất kỳ trình duyệt nào. Người dùng của bạn không còn cần cài đặt plugin hoặc cập nhật Adobe Flash để chạy trang web của bạn. Thay vào đó, bạn có thể tích hợp JavaScript với các kiểu chuyển đổi CSS để tạo hiệu ứng động cho các đối tượng bằng cách sử dụng quy trình có tên là chuyển đổi

Chuyển tiếp sử dụng hình ảnh động hoặc hình dạng khi người dùng di chuột qua phần tử HTML hoặc nhấp vào nút. Chẳng hạn, bạn có thể muốn mở rộng hộp văn bản trên toàn trang khi người dùng di chuột qua hộp văn bản đó. Thay vì hiển thị hộp nhỏ hơn và sau đó là hộp lớn hơn, các kiểu CSS chuyển tiếp và JavaScript hiển thị hộp đang phát triển mở rộng từ từ bằng hoạt ảnh

Hãy lấy ví dụ HTML sau

Chào người dùng

Sức mạnh của phần tử div này nằm ở lớp CSS "div". Lớp đầu tiên chỉ định lượng thời gian cho quá trình chuyển đổi. Trong ví dụ này, quá trình chuyển đổi diễn ra trong 2 giây. Lớp đầu tiên chỉ xác định thời gian chuyển tiếp, nhưng lớp div thứ hai chỉ định độ rộng của phần mở rộng. Div mở rộng từ trạng thái hiện tại lên 300 pixel trong 2 giây.  

Chúng tôi có thể thay đổi kiểu CSS cơ bản này để chỉ xảy ra khi người dùng gửi cho chúng tôi đầu vào. Chẳng hạn, bạn có thể muốn áp dụng chuyển đổi khi người dùng nhấp vào nút. Bạn có thể làm điều này bằng cách sử dụng JavaScript, ghi đè sự kiện "onclick" và thay đổi kiểu CSS ngay lập tức. Dưới đây là một ví dụ về cách bạn có thể sử dụng các kiểu chuyển đổi với JavaScript.  

Chào người dùng

Nhấp vào đây

Chúng tôi đã sử dụng sự kiện "onclick" trước đây. Trong ví dụ này, hàm "ChangeStyle()" tương tự được gọi như ví dụ trước. Tuy nhiên, lần này hàm JavaScript đổi style thành class "changewidth". Chúng tôi đã sử dụng các thuộc tính CSS tương tự, thay đổi div "tên người dùng" từ chiều rộng hiện tại thành chiều rộng 300 pixel.  

Cho đến nay, chúng tôi đã sử dụng các kiểu CSS nội tuyến, nhưng điều này có nghĩa là bạn cần thay đổi tất cả các trang web của mình để thực hiện các thay đổi toàn cầu cho tất cả các kiểu của bạn một cách hiệu quả. Kiểu viết mã này không hiệu quả vì bạn có thể quên trang, mắc lỗi chính tả khi thay đổi quá nhiều trang và vô tình chèn cú pháp CSS hoặc lỗi bug. Để loại bỏ khả năng xảy ra lỗi và thực hiện các thay đổi của bạn trên toàn cầu, tốt hơn hết bạn nên chèn một trang kiểu CSS vào mã trang web của mình. Bạn lưu tất cả các kiểu CSS của mình trong một tệp văn bản, lưu trữ nó trên máy chủ web của bạn và liên kết biểu định kiểu với trang HTML của bạn. Khi bạn thay đổi một lớp CSS trong tệp bên ngoài, tất cả các tệp HTML liên kết với tệp CSS của bạn cũng thay đổi. Một tệp CSS và các thay đổi liên quan ảnh hưởng đến tất cả các tệp HTML của bạn mà không cần chỉnh sửa bất kỳ mã HTML nội bộ nào. Mã HTML sau đây lấy từ ví dụ trước ngoại trừ tệp CSS được lưu trữ bên ngoài và được liên kết bằng thẻ "liên kết". Lưu ý rằng thẻ liên kết được chèn vào phần đầu bằng mã JavaScript.  

Chào người dùng

Nhấp vào đây

Lưu ý rằng các kiểu nội tuyến CSS đã bị loại bỏ khỏi mã. Các kiểu được lưu trong tệp CSS có tên "mystyles. css. " Thẻ liên kết sau đó liên kết tệp với mã HTML của bạn, nơi bạn có thể gọi bất kỳ lớp nào. Bạn nên sử dụng các tệp bên ngoài cho cả hàm và lớp JavaScript và CSS.  

Chúng tôi đã đề cập đến một số lớp CSS và sự kiện mà bạn có thể kích hoạt để tự động thay đổi kiểu. JavaScript có một số phương thức và sự kiện mà bạn có thể sử dụng để thay đổi kiểu CSS chỉ bằng một vài dòng mã.  

Làm thế nào bạn sẽ lấy đầu vào nhanh chóng từ người dùng?

Hộp thoại nhắc trong JavaScript là gì?

JavaScript có hệ thống đầu vào đầu ra không?

Làm cách nào tôi có thể gửi đầu vào của người dùng tới API bằng JS?