Làm cách nào để chuyển biến từ JavaScript sang HTML?
Nếu một hàm được gọi với các đối số bị thiếu (ít hơn so với khai báo), các giá trị bị thiếu được đặt thành 2 Show
Đôi khi điều này có thể chấp nhận được, nhưng đôi khi tốt hơn là gán giá trị mặc định cho tham số Giá trị tham số mặc địnhES6 cho phép các tham số chức năng có giá trị mặc định Ví dụNếu y không được thông qua hoặc không xác định, thì y = 10 function myFunction(x, y = 10) { Thông số phần còn lại chức năngTham số còn lại (. ) cho phép một hàm coi số lượng đối số không xác định là một mảng Ví dụhàm tổng(. args) { đặt x = tổng(4, 9, 16, 25, 29, 100, 66, 77); Tự mình thử »Đối tượng đối sốCác hàm JavaScript có một đối tượng tích hợp được gọi là đối tượng đối số Đối tượng đối số chứa một mảng các đối số được sử dụng khi hàm được gọi (gọi) Bằng cách này, bạn có thể chỉ cần sử dụng một hàm để tìm (ví dụ) giá trị cao nhất trong danh sách các số Ví dụx = findMax(1, 123, 500, 115, 44, 88); function findMax() { Hoặc tạo một hàm để tính tổng tất cả các giá trị đầu vào Ví dụx = sumAll(1, 123, 500, 115, 44, 88); function sumAll() { Nếu một hàm được gọi với quá nhiều đối số (nhiều hơn so với khai báo), những đối số này có thể được truy cập bằng cách sử dụng đối tượng đối số Các đối số được truyền theo giá trịTham số, trong lời gọi hàm, là đối số của hàm Đối số JavaScript được truyền theo giá trị. Hàm chỉ biết các giá trị, không biết vị trí của đối số Bạn chỉ có thể sử dụng biến Javascript trong HTML bằng cách liên kết biến Javascript với phần tử HTML bằng thuộc tính 3 hoặc 4Liên kết biến Javascript với phần tử HTML
Mã số
Gán id cho phần tử Mã số
Nếu bạn kiểm tra điều này bây giờ, tất cả những gì bạn sẽ thấy là Giờ đây, bạn có thể thêm Javascript vào trang của mình bằng thẻ script
Bây giờ, bạn có thể bắt đầu làm việc với Javascript. Tạo biến Javascript của bạn Mã số
Bạn lấy phần tử trong Javascript bằng giá trị id được gán Mã số
Để hiển thị biến trong HTML, hãy gán biến cho phần tử trong Javascript bằng thuộc tính InternalHTML Mã số
Kết quả Hoàn thành mã
Bạn có thể sử dụng phương pháp trên cho các biến chuỗi và số Sử dụng biến mảng Javascript trong HTMLĐể xem các biến mảng và đối tượng trong HTML, bạn phải lặp qua các mục trong Javascript trước khi chuyển chúng sang HTML Ví dụ
Kết quả Bạn cũng có thể tương tác với mã cho dự án này Chào bạn. Tôi là Avic Ndugu Tôi đã xuất bản hơn 100 bài đăng trên blog về HTML, CSS, Javascript, React và các chủ đề liên quan khác. Khi tôi không viết, tôi thích đọc sách, đi bộ đường dài và nghe podcast Sau khi đọc một vài bài viết trước, bây giờ bạn sẽ biết JavaScript là gì, nó có thể làm gì cho bạn, cách bạn sử dụng nó cùng với các công nghệ web khác và các tính năng chính của nó trông như thế nào ở cấp độ cao. Trong bài viết này, chúng ta sẽ tìm hiểu những điều cơ bản thực sự, xem xét cách làm việc với các khối xây dựng cơ bản nhất của JavaScript - Biến điều kiện tiên quyết. Trình độ máy tính cơ bản, hiểu biết cơ bản về HTML và CSS, hiểu biết về JavaScript là gì. Khách quan. Để làm quen với những điều cơ bản về các biến JavaScriptCông cụ bạn cầnTrong suốt bài viết này, bạn sẽ được yêu cầu nhập các dòng mã để kiểm tra mức độ hiểu nội dung của mình. Nếu bạn đang sử dụng trình duyệt trên máy tính để bàn, thì nơi tốt nhất để nhập mã mẫu của bạn là bảng điều khiển JavaScript của trình duyệt (xem Công cụ dành cho nhà phát triển trình duyệt là gì để biết thêm thông tin về cách truy cập công cụ này) một biến là gì?Biến là nơi chứa một giá trị, chẳng hạn như một số chúng ta có thể sử dụng trong tổng hoặc một chuỗi mà chúng ta có thể sử dụng như một phần của câu ví dụ về biếnHãy xem một ví dụ đơn giản ________số 8
Trong ví dụ này, nhấn nút sẽ chạy một số mã. Dòng đầu tiên bật lên một hộp trên màn hình yêu cầu người đọc nhập tên của họ, sau đó lưu giá trị vào một biến. Dòng thứ hai hiển thị thông báo chào mừng bao gồm tên của họ, được lấy từ giá trị biến và dòng thứ ba hiển thị tên đó trên trang Không có biếnĐể hiểu tại sao điều này lại hữu ích như vậy, hãy nghĩ xem chúng ta sẽ viết ví dụ này như thế nào mà không sử dụng biến. Nó sẽ kết thúc trông giống như thế này 0 1Có thể bạn chưa hiểu hết cú pháp chúng tôi đang sử dụng (chưa. ), nhưng bạn sẽ có thể có được ý tưởng. Nếu chúng tôi không có sẵn các biến, chúng tôi phải hỏi tên của người đọc mỗi khi chúng tôi cần sử dụng nó Các biến chỉ có ý nghĩa và khi bạn tìm hiểu thêm về JavaScript, chúng sẽ bắt đầu trở thành bản chất thứ hai Một điều đặc biệt về các biến là chúng có thể chứa bất kỳ thứ gì — không chỉ các chuỗi và số. Các biến cũng có thể chứa dữ liệu phức tạp và thậm chí toàn bộ chức năng để làm những điều tuyệt vời. Bạn sẽ tìm hiểu thêm về điều này khi bạn tiếp tục Ghi chú. Ta nói biến chứa giá trị. Đây là một sự khác biệt quan trọng để thực hiện. Các biến không phải là các giá trị; . Bạn có thể coi chúng giống như những hộp các tông nhỏ mà bạn có thể đựng đồ trong đó. Khai báo một biếnĐể sử dụng một biến, trước tiên bạn phải tạo nó — chính xác hơn, chúng tôi gọi đây là khai báo biến. Để làm điều này, chúng tôi gõ từ khóa 15 theo sau là tên bạn muốn gọi biến của mình 3Ở đây chúng tôi đang tạo hai biến có tên là 16 và 17. Hãy thử gõ những dòng này vào bảng điều khiển của trình duyệt web của bạn. Sau đó, hãy thử tạo một (hoặc hai) biến với các lựa chọn tên của riêng bạnGhi chú. Trong JavaScript, tất cả các hướng dẫn mã phải kết thúc bằng dấu chấm phẩy ( 18) — mã của bạn có thể hoạt động chính xác đối với các dòng đơn lẻ, nhưng có thể sẽ không hoạt động khi bạn viết nhiều dòng mã cùng nhau. Cố gắng tập thói quen bao gồm nóBạn có thể kiểm tra xem các giá trị này hiện có tồn tại trong môi trường thực thi hay không bằng cách chỉ nhập tên của biến, e. g 7Chúng hiện không có giá trị; . Khi bạn nhập tên biến, bạn sẽ nhận được giá trị là 19. Nếu chúng không tồn tại, bạn sẽ nhận được thông báo lỗi — hãy thử nhập 9Ghi chú. Đừng nhầm lẫn một biến tồn tại nhưng không có giá trị xác định với một biến hoàn toàn không tồn tại — chúng là những thứ rất khác nhau. Trong hộp tương tự mà bạn đã thấy ở trên, không tồn tại có nghĩa là không có hộp (biến) cho một giá trị đi vào. Không có giá trị được xác định có nghĩa là có một hộp, nhưng nó không có giá trị bên trong nó Khởi tạo một biếnKhi bạn đã khai báo một biến, bạn có thể khởi tạo nó với một giá trị. Bạn thực hiện việc này bằng cách nhập tên biến, theo sau là dấu bằng ( 30), theo sau là giá trị bạn muốn cung cấp cho nó. Ví dụ 1Bây giờ hãy thử quay lại bảng điều khiển và nhập những dòng này. Bạn sẽ thấy giá trị mà bạn đã gán cho biến được trả về trong bảng điều khiển để xác nhận giá trị đó, trong từng trường hợp. Một lần nữa, bạn có thể trả về các giá trị biến của mình bằng cách nhập tên của chúng vào bảng điều khiển — hãy thử lại các giá trị này 7Bạn có thể khai báo và khởi tạo một biến cùng một lúc, như thế này 3Đây có lẽ là điều bạn sẽ làm hầu hết thời gian, vì nó nhanh hơn thực hiện hai thao tác trên hai dòng riêng biệt Một lưu ý về varCó thể bạn cũng sẽ thấy một cách khác để khai báo biến, sử dụng từ khóa 31 0Quay lại khi JavaScript được tạo lần đầu tiên, đây là cách duy nhất để khai báo biến. Thiết kế của 31 khó hiểu và dễ mắc lỗi. Vì vậy, 15 đã được tạo trong các phiên bản JavaScript hiện đại, một từ khóa mới để tạo các biến hoạt động hơi khác với 31, khắc phục các sự cố của nó trong quá trình nàyMột vài sự khác biệt đơn giản được giải thích dưới đây. Bây giờ chúng ta sẽ không đi sâu vào tất cả sự khác biệt, nhưng bạn sẽ bắt đầu khám phá ra chúng khi bạn tìm hiểu thêm về JavaScript (nếu bạn thực sự muốn đọc về chúng ngay bây giờ, vui lòng xem trang tham khảo let của chúng tôi) Để bắt đầu, nếu bạn viết một chương trình JavaScript nhiều dòng để khai báo và khởi tạo một biến, thì bạn thực sự có thể khai báo một biến với _____131 sau khi bạn khởi tạo nó và nó vẫn hoạt động. Ví dụ 1Ghi chú. Điều này sẽ không hoạt động khi nhập các dòng riêng lẻ vào bảng điều khiển JavaScript, chỉ khi chạy nhiều dòng JavaScript trong tài liệu web Điều này hoạt động nhờ cẩu - đọc var cẩu để biết thêm chi tiết về chủ đề này Nâng không còn hoạt động với 15. Nếu chúng ta thay đổi 31 thành 15 trong ví dụ trên, nó sẽ bị lỗi. Đây là một điều tốt — khai báo một biến sau khi bạn khởi tạo nó dẫn đến mã khó hiểu, khó hiểu hơnThứ hai, khi bạn sử dụng 31, bạn có thể khai báo cùng một biến bao nhiêu lần tùy thích, nhưng với 15 thì không thể. Sau đây sẽ làm việc 2Nhưng những điều sau đây sẽ gây ra lỗi ở dòng thứ hai 3Bạn sẽ phải làm điều này thay vì 4Một lần nữa, đây là một quyết định ngôn ngữ hợp lý. Không có lý do gì để khai báo lại các biến - nó chỉ khiến mọi thứ trở nên khó hiểu hơn Vì những lý do này và hơn thế nữa, chúng tôi khuyên bạn nên sử dụng 15 trong mã của mình, thay vì 31. Không còn lý do nào để sử dụng 31 vì nó đã được hỗ trợ kể từ Internet Explorer 11Ghi chú. Nếu bạn đang thử mã này trong bảng điều khiển của trình duyệt, hãy sao chép và dán toàn bộ từng khối mã vào đây. Có một tính năng trong bảng điều khiển của Chrome cho phép khai báo lại biến với 15 và 75 5Cập nhật một biếnKhi một biến đã được khởi tạo với một giá trị, bạn có thể thay đổi (hoặc cập nhật) giá trị đó bằng cách đặt cho nó một giá trị khác. Hãy thử nhập các dòng sau vào bảng điều khiển của bạn 6Bỏ qua quy tắc đặt tên biếnBạn có thể gọi một biến gần như bất cứ thứ gì bạn thích, nhưng có những hạn chế. Nói chung, bạn chỉ nên sử dụng các ký tự Latinh (0-9, a-z, A-Z) và ký tự gạch dưới
Ghi chú. Bạn có thể tìm thấy một danh sách khá đầy đủ các từ khóa dành riêng để tránh tại Ngữ pháp từ vựng — từ khóa Ví dụ về tên hay 7Ví dụ về tên xấu 8Hãy thử tạo thêm một số biến ngay bây giờ, lưu ý đến hướng dẫn ở trên các loại biếnCó một vài loại dữ liệu khác nhau mà chúng ta có thể lưu trữ trong các biến. Trong phần này, chúng tôi sẽ mô tả những điều này một cách ngắn gọn, sau đó trong các bài viết sau, bạn sẽ tìm hiểu về chúng chi tiết hơn Cho đến nay chúng tôi đã xem xét hai cái đầu tiên, nhưng có những cái khác sốBạn có thể lưu số trong biến, số nguyên như 30 (còn gọi là số nguyên) hoặc số thập phân như 2. 456 (còn được gọi là số float hoặc số dấu phẩy động). Bạn không cần khai báo các loại biến trong JavaScript, không giống như một số ngôn ngữ lập trình khác. Khi bạn cung cấp cho một biến một giá trị số, bạn không bao gồm dấu ngoặc kép 9DâyChuỗi là các đoạn văn bản. Khi bạn cung cấp cho một biến một giá trị chuỗi, bạn cần đặt nó trong dấu nháy đơn hoặc kép; 00BooleansBooleans là giá trị true/false — chúng có thể có hai giá trị, 92 hoặc 93. Chúng thường được sử dụng để kiểm tra một điều kiện, sau đó mã được chạy khi thích hợp. Vì vậy, ví dụ, một trường hợp đơn giản sẽ là 01Trong khi trên thực tế, nó sẽ được sử dụng nhiều hơn như thế này 02Điều này đang sử dụng toán tử "nhỏ hơn" ( 94) để kiểm tra xem 6 có nhỏ hơn 3 không. Như bạn có thể mong đợi, nó trả về 93, vì 6 không nhỏ hơn 3. Bạn sẽ học được nhiều hơn về các toán tử như vậy sau này trong khóa họcMảngMảng là một đối tượng duy nhất chứa nhiều giá trị được đặt trong dấu ngoặc vuông và được phân tách bằng dấu phẩy. Hãy thử nhập các dòng sau vào bảng điều khiển của bạn 03Khi các mảng này được xác định, bạn có thể truy cập từng giá trị theo vị trí của chúng trong mảng. Hãy thử những dòng này 04Dấu ngoặc vuông chỉ định giá trị chỉ mục tương ứng với vị trí của giá trị bạn muốn trả về. Bạn có thể nhận thấy rằng các mảng trong JavaScript không được lập chỉ mục. phần tử đầu tiên ở chỉ số 0 Bạn sẽ học được nhiều hơn về mảng trong một bài viết trong tương lai Các đối tượngTrong lập trình, một đối tượng là một cấu trúc mã mô hình hóa một đối tượng thực tế. Bạn có thể có một đối tượng đơn giản đại diện cho một hộp và chứa thông tin về chiều rộng, chiều dài và chiều cao của nó hoặc bạn có thể có một đối tượng đại diện cho một người và chứa dữ liệu về tên, chiều cao, cân nặng, ngôn ngữ họ nói, cách thức Hãy thử nhập dòng sau vào bảng điều khiển của bạn 05Để lấy thông tin được lưu trữ trong đối tượng, bạn có thể sử dụng cú pháp sau 06Bây giờ chúng ta sẽ không xem xét các đối tượng nữa — bạn có thể tìm hiểu thêm về những đối tượng đó trong một mô-đun trong tương lai gõ độngJavaScript là một "ngôn ngữ được nhập động", có nghĩa là, không giống như một số ngôn ngữ khác, bạn không cần chỉ định loại dữ liệu mà một biến sẽ chứa (số, chuỗi, mảng, v.v. ) Ví dụ: nếu bạn khai báo một biến và đặt cho nó một giá trị trong dấu ngoặc kép, trình duyệt sẽ coi biến đó là một chuỗi 07Ngay cả khi giá trị trong dấu ngoặc kép chỉ là chữ số, nó vẫn là một chuỗi — không phải số — vì vậy hãy cẩn thận 08Hãy thử nhập từng dòng ở trên vào bảng điều khiển của bạn và xem kết quả là gì. Bạn sẽ nhận thấy rằng chúng tôi đang sử dụng một toán tử đặc biệt có tên là 96 — toán tử này trả về kiểu dữ liệu của biến bạn nhập sau nó. Lần đầu tiên nó được gọi, nó sẽ trả về 97, vì tại thời điểm đó, biến 98 chứa một chuỗi, 99. Hãy xem và xem những gì nó trả về lần thứ hai bạn gọi nóHằng số trong JavaScriptCũng như các biến, bạn có thể khai báo các hằng. Chúng giống như các biến, ngoại trừ việc
Ví dụ: sử dụng 15, bạn có thể khai báo một biến mà không cần khởi tạo nó 09Nếu bạn cố gắng thực hiện việc này bằng cách sử dụng 75, bạn sẽ thấy lỗi 10Tương tự, với 15, bạn có thể khởi tạo một biến, rồi gán cho nó một giá trị mới (điều này còn được gọi là gán lại biến) 11Nếu bạn cố gắng thực hiện việc này bằng cách sử dụng 75, bạn sẽ thấy lỗi 12Lưu ý rằng mặc dù một hằng số trong JavaScript phải luôn đặt tên cùng một giá trị, nhưng bạn có thể thay đổi nội dung của giá trị mà nó đặt tên. Đây không phải là sự phân biệt hữu ích cho các loại đơn giản như số hoặc booleans, nhưng hãy xem xét một đối tượng 13Bạn có thể cập nhật, thêm hoặc xóa các thuộc tính của một đối tượng được khai báo bằng cách sử dụng 75, bởi vì mặc dù nội dung của đối tượng đã thay đổi nhưng hằng số vẫn trỏ đến cùng một đối tượng 14Khi nào thì dùng const và khi nào thì dùng letNếu bạn không thể làm được nhiều với 75 như bạn có thể làm với 15, tại sao bạn lại thích sử dụng nó hơn là 15? . Nếu bạn sử dụng 75 để đặt tên cho một giá trị, nó sẽ cho bất kỳ ai đang xem mã của bạn biết rằng tên này sẽ không bao giờ được gán cho một giá trị khác. Bất cứ khi nào họ nhìn thấy cái tên này, họ sẽ biết nó ám chỉ điều gìTrong khóa học này, chúng tôi áp dụng nguyên tắc sau về thời điểm sử dụng 15 và khi nào sử dụng 75Sử dụng 75 khi bạn có thể và sử dụng 15 khi bạn phảiĐiều này có nghĩa là nếu bạn có thể khởi tạo một biến khi bạn khai báo nó và không cần gán lại nó sau này, hãy biến nó thành một hằng số Kiểm tra kỹ năng của bạnBạn đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . biến Tóm lượcĐến bây giờ, bạn đã biết một lượng vừa phải về các biến JavaScript và cách tạo chúng. Trong bài viết tiếp theo, chúng ta sẽ tập trung vào các con số một cách chi tiết hơn, xem xét cách làm toán cơ bản trong JavaScript Làm cách nào để chuyển hàm JavaScript trong HTML?JavaScript. Truyền một hàm JavaScript làm tham số . Giải pháp mẫu. - Mã HTML. <. . Mã JavaScript. hàm addStudent(id, refreshCallback) { refreshCallback(); . nhật ký ('Xin chào'); . Sơ đồ Bản thử trực tiếp Làm cách nào để chuyển giá trị tham số trong HTML?Thẻ HTML . Chúng ta có thể sử dụng nhiều hơn một thẻ |