0.1.2.2 Chèn JavaScript trong HTML bằng một file độc lập 1 Time right now is: " + d.getHours () + ":" + d.getMinutes () + ":" + d.getSeconds () 1.0.0.1 ví dụ JavaScript để xác thực email address 1.1 'result'> 1.1.0.1 Lời kết Hướng dẫn gọi hàm javascript trong html mới nhất 2020 rong bài tut này, chúng tôi sẽ chỉ bạn mẹo thêm JavaScript trong HTML. Các hàm trong JavaScript là các đối tượng và có thể có các thuộc tính. Vì vậy, chúng ta có thể tạo các biến tĩnh bằng cách khai báo các thuộc tính của hàm. Chúng duy trì các giá trị của chúng như các biến toàn cục và không thể sửa đổi bên ngoài các hàm, làm cho chúng gọn gàng hơn nhiều so với các biến toàn cục. Trong lập trình JavaScrip, với vòng for … of, ta không cần phải tạo nhiều biến để định nghĩa, mà khi gọi hàm chạy vẫn trả về được tất cả số lượng tham số truyền vào. Như ví dụ trên, thay vì phải tạo ra 10 biến và console.log () 10 biến đó để định nghĩa cho hàm Hàm có trả về kết quả Đối với hàm có kết quả trả về, chúng ta cần dùng từ khoá return để trả về kết qủa mà nó đã tính toán được. Khai báo biến có kiểu dữ kiệu tương ứng với kết quả trả về của hàm để nhận giá trị trả về. Như ví dụ tìm sum () của chúng ta, nhiệm vụ của nó là tính tổng của 2 số nguyên a, b nhập vào. public class Main { Javascript format giá tiền với toFixed () Ví dụ: 12345.67120398 trở thành 12,345.67. Chúng ta có thể làm đơn giản Kiểu tiền tệ trong JavaScript như ví dụ dưới đây. var yourBalance = 2489.8237; //returns 2489.824 (rounds up) yourBalance.toFixed (3); //returns 2489.82 yourBalance.toFixed (2); //returns 2489.8237000 (pads the decimals) yourBalance. Hàm LEFT/ RIGHT: 2 hàm này dùng để rút trích các kí tự hoặc kí số trong 1 chuỗi kí tự. =LEFT (test; number_chars) =RIGHT (test; number_chars) Test: chuỗi kí tự muốn lấy từ bên trái hoặc phải. Number_chars: số kí tự muốn lấy. 11. Hàm MID: Hàm tính này dùng để lấy những kí tự ở W4UoEx. Cú pháp khai báo hàmCú pháp gọi hàm Hàm trong JavaScript là một khối lệnh bao gồm nhiều câu lệnh được sử dụng để thực hiện một công việc nhất định. Chẳng hạn, chúng ta có thể tạo một hàm để tính lương của nhân viên, một hàm để tính tổng số tiền của hoá đơn, một hàm để tính chặng đường đi của một nhân vật trong game… Trong bài viết này, chúng ta sẽ tìm hiểu về hàm trong JavaScript nhé. Một hàm cần được khai báo declare trước khi được gọi call. Ví dụ Chúng ta khai báo hàm tính tổng của 2 số a và b như sau function additionFunctiona, b{ return a + b; }Code language JavaScript javascript Sau đó, chúng ta gọi hàm này như sau let result = additionFunction1,3;Code language JavaScript javascript Trong doạn mã trên, chúng ta gọi hàm additionFunction và gán giá trị trả về cho biến result biến result sẽ có giá trị là 4. Cú pháp khai báo hàm Để khai báo một hàm trong JavaScript, chúng ta sử dụng từ khoá function, kèm theo tên hàm và danh sách các tham số parameter. Hàm có thể trả về một giá trị bằng cách sử dụng từ khoá return. function nameparameter1, parameter2, parameter3 { // code to be executed }Code language JavaScript javascript Ví dụ Chúng ta khai báo một hàm trả về diện tích của hình chữ nhật như sau function getRectangleAreawidth, length{ return width * length; }Code language JavaScript javascript Trong đó function là từ khoá bắt buộc, được sử dụng khi khai báo là tên của hàmwidth và length là tên của các tham sốreturn là từ khoá được sử dụng để trả về một giá trị Cú pháp gọi hàm Sau khi khai báo hàm thì chúng ta có thể gọi nó. Chẳng hạn, chúng ta có thể gọi một hàm khi người dùng nhấn chuột vào một nút, hoặc khi người dùng nhấn một phím bất kỳ… Để gọi hàm, chúng ta sử dụng tên của hàm và truyền vào các tham số theo yêu cầu của hàm đó. Chẳng hạn, chúng ta gọi hàm getRectangleArea như sau let area = getRectangleArea10, 5;Code language JavaScript javascript Trong đó, 10 và 5 là các đối số được truyền vào tương ứng với các tham số width và height của hàm getRectangleArea. Câu hỏi Tại sao chúng ta lại cần sử dụng hàm trong các chương trình? Các bạn có thể tham khảo các bài viết hay về JavaScript tại đây. Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm. Trong bài này freetuts sẽ hướng dẫn bạn giải bài tập tính tổng hai số bằng javascript, qua đó bạn có thể tự viết chương trình tính tổng cực kì dễ viết này được đăng tại không được copy dưới mọi hình thức. Bài tập cộng 2 số là cơ bản nhất trong lập trình, bằng cách sử dụng toán tử cộng và kết hợp các hàm khác để tạo ra ứng dụng tính tổng. Tuy nhiên, bài này mình sẽ bổ sung thêm kiến thức nâng cao để những bạn có nền tảng rồi tham khảo nhé. 1. Tính tổng hai số bằng javascript đơn giản Ví dụ 1 Cho hai biến a và b, hãy viết chương trình tính tổng hai số a và b rồi in lên trình duyệt. let a = 20; let b = 30; // Tính tổng let tong = a + b; hai số là " + tong; Ví dụ 2 Cho hai ô input textbox và 1 input button. Hãy viết chương trình khi click vào button thì tính tổng hai số ở hai ô viết này được đăng tại [free tuts .net] function sum{ let a = Number let b = Number let sum = parseInta + b; = sum; } Trong ví dụ này thì mình sử dụng hàm Number để ép kiểu string sang kiểu number. Ví dụ 3 Tính tổng hai số trong object javascript Giả sử mình có một object như sau let numbers = { number1 20, number2 30 }; Để tính tổng hai số number1 và number2 thì ta làm như sau let numbers = { number1 20, number2 30 }; let sum = + // 50 2. Kiểm tra dữ liệu trước khi tính tổng bằng javascript Khi lấy dữ liệu từ người dùng thì bạn phải kiểm tra định dạng dữ liệu trước rồi mới tính toán sau. Bước này giúp chương trình không bị lỗi và đảm bảo ứng dụng không bị dừng đột ngột. Đối với bài tập tính tổng hai số trong js này thì ta chỉ cần chắc chắn rằng hai số mà người dùng nhập vào là number. Vì vậy, bạn chỉ cần áp dụng kỹ thuật ép kiểu dữ liệu trong javascript và lệnh if else là có thể xử lý được. function sum{ let a = let b = // Kiểm tra dữ liệu if a == "" b == ""{ alert"Vui lòng nhập vào hai số"; return false; } // Ép kiểu dữ liệu a = Numbera; b = Numberb; if isNaNa isNaNb{ alert"Bạn phải nhập vào hai số"; return false; } let sum = parseInta + b; = sum; } 3. Viết hàm cộng hai số bằng javascript Để cho bài toán đơn giản hơn thì ta sẽ viết một hàm cộng hai số. Mình sẽ viết nhiều hàm, từ đơn giản đến phức tạp để các bạn dễ hiểu hơn. Hàm 1 Không validate dữ liệu. function suma, b{ return a + b; } // Hoặc dùng arrow function let sum = a, b => { return a + b; }; Hàm 2 Có validate dữ liệu function suma, b{ a = Numbera; b = Numberb; if isNaNa isNaNb{ return false; } return a + b; } // Hoặc dùng arrow function let sum = a, b => { a = Numbera; b = Numberb; if isNaNa isNaNb{ return false; } return a + b; }; Hàm 3 Kết hợp try catch javascript để bắt lỗi. function suma, b{ try{ a = Numbera; b = Numberb; if isNaNa isNaNb{ throw new Error'Dữ liệu bạn nhập vào không phải là số'; } return a + b; } catch e{ return false; } } Trên là tất cả những cách cộng hai số trong javascript nói chung và bài tập tính tổng hai số bằng javascript nói riêng. Trong bài này chúng ta sẽ tìm hiểu function trong Javascript. Function hay còn gọi là hàm, được sử dụng rất nhiều khi làm việc với viết này được đăng tại không được copy dưới mọi hình thức. Kể từ phiên bản ES6 trở đi thì hàm trong Javascript có rất nhiều cách tạo khác nhau, điển hình nhất là các khái niệm về arrow function, callback function, khiến những người mới học cảm thấy đau đầu. Nhưng bạn đừng quá lo lắng bởi trong bài này mình sẽ nói tất cả những kiến thức cần biết về function / hàm trong JS nhé. 1. Function trong Javascript là gì? Function hay còn gọi là hàm, là tập hợp một đoạn code dùng để xử lý một nhiệm vụ nào đó. Code bên trong function không được biên dịch cho tới khi được gọi đến. Chính vì vậy khi sử dụng function sẽ giúp chương trình được linh hoạt hơn. Ví dụ Bạn đang xây dựng chức năng hiển thị danh sách sản phẩm cho trang chủ, trang chuyên mục, ... và nhiều trang khác. Lúc này nếu trang nào bạn cũng code từ A - Z thì sẽ mất khá nhiều thời gian, thay vào đó hãy viết nó vào một function và gọi đến nó ở những trang cần sử viết này được đăng tại [free tuts .net] 2. Một ví dụ về lợi ích của function trong Javascript Từ bài 1 tới giờ ta đang code từng đoạn code riêng lẻ và khi cần thì code lại, như vậy giả sử ta cần xử lý vấn đề đó trong 1000 trường hợp thì ta phải code lại 1000 lần nên rất tốn thời gian, chính vì vậy người ta nghĩ ngay đến hàm, hàm sẽ gom một số đoạn code vào một khối xử lý và khi cần thì gọi ra dùng. Giả sử mình viết chương trình kiểm tra số chẵn hay lẻ như sau var number = 2; if number % 2 == 0{ alert'Số chẵn'; } else { alert'Số lẻ'; } Nếu mình cần kiểm tra cho 100 số thì sẽ viết lặp lại đoạn code trên 100 lần, điều này quả là tệ hại phải không các bạn? Nhưng đừng lo bởi khi sử dụng hàm trong Javascript thì ta sẽ gom chúng vào thư viện riêng và chỉ gọi tới khi cần. 3. Cách tạo function trong Javascript Trước tiên hãy xem cú pháp tạo hàm trong Javascript như thế nào đã nhé. Cú pháp function name_of_functionvar1, var2, var3, ... { // Some code } Trong đó function là từ khóa của javascript nên bắt buộc phải như vậy name_of_function là tên của hàm, thông thường chúng ta tạo những tên có ý nghĩa như find_max, find_min, ... var1, var2 var3, ... là các tham số truyền vào hàm. Ví dụ viết hàm kiểm tra số chẵn hay lẽ thì ta sẽ có một tham số đó là số cần kiểm tra. Đương nhiên bạn có thể tạo một hàm không có tham số. Ví dụ Viết hàm kiểm tra một số chẵn hay lẻ. // Tạo hàm function check_numbernumber { if number % 2 == 0{ alertnumber + ' là số chẵn'; } else { alertnumber + 'Số lẻ'; } } 4. Cách gọi hàm trong Javascript Để gọi hàm thì ta chỉ cần gọi đến tên hàm, sau đó truyền vào các tham số cần thiết. Ví dụ dưới đây là mình đã gọi hàm check_number 5 lần và có truyền giá trị cho tham số của hàm. // Sử dụng hàm kiểm tra cho 5 số check_number1; check_number2; check_number3; check_number4; check_number5; Các bạn thấy mình đã tạo một hàm với tham số truyền vào có tên là number. Như vậy khi sử dụng nếu ta truyền số 1 vào thì lúc này biến number trong hàm sẽ có giá trị là 1, tương tự cho 2, 3,4,5. Lưu ý với các bạn trong javascript không tồn tại khái niệm con trỏ và tham chiếu trong hàm 5. Hàm có return và hàm không có return Hàm có return là hàm có sử dụng từ khóa return để đặt ở cuối hàm với mục đích trả kết quả về để sử dụng tiếp ở những đoạn code bên ngoài. Ví dụ ta cần viết một hàm tính tổng của hai số a và b thì hàm này phải trả về giá trị là tổng của hai số a, b. Xem ví dụ sau // Khai báo hàm function tinh_tonga, b { // trả về kết quả là a + b return a + b; } // Sử dụng var so1 = 1; var so2 = 2; // truyền so1 và so2 vào hàm var ketqua = tinh_tongso1, so2; alertketqua; Hàm không có return là hàm không có sử dụng từ khóa return đặt trong hàm. Ví dụ viết chương trình in ra tổng của hai số a và b. // Khai báo hàm function tinh_tonga, b { là ' + a + b; } // Sử dụng var so1 = 1; var so2 = 2; // truyền so1 và so2 vào hàm tinh_tongso1, so2; Như vậy tùy vào mục đích mà ta dùng có return hay không có return. Nhưng thông thường ta sử dụng return ở những trường hợp cần lấy kết quả đó để xử lý tiếp, như ở ví dụ trên đó là mình lấy kết quả để in thông báo. 5. Giá trị mặc định của tham số default parameter Có một số trường hợp bạn muốn một tham số nào đó có thể được truyền hoặc không cần truyền vào đều được, lúc này chúng ta phải sử dụng nó như một tham số mặc định. Javascript không có cú pháp gán giá trị mặc định như PHP mà thay vào đó chúng ta sử dụng toán tử . Ví dụ Hàm hiển thị một thông báo. function showMessagemessage { // Nếu message không được truyền vào hoặc giá trị nó là rỗng // thì sẽ được thay thế bằng giá trị 'Không có tin nhắn' message = message 'Không có tin nhắn '; } // Cách 1 không truyền tham số showMessage; // Cách 2 Truyền tham số showMessage'Chào mừng bạn đến với Toán tử gồm hai vế, trong đó nếu vế TRÁI có giá trị rỗng undefined, null, false, ... kết quả sẽ trả về vế PHẢI, ngược lại nó sẽ trả về vế TRÁI. 6. Cách tạo hàm arrow function trong Javascript Arrow function còn được gọi là hàm mũi tên, tức là ta sẽ tạo hàm bằng cách sử dụng ký tự =>. Cách tạo này xuất hiện kể từ phiên bản ES6. Cú pháp var name_of_function = var1, var2, var3, ... => { // Nội dung function }; So sánh với cú pháp cơ bản mà chúng ta đã học ở đầu bài sẽ là function name_of_functionvar1, var2, var3, ... { // Nội dung function } Ví dụ Viết hàm kiểm tả một số có chia hết cho 3 hay không bằng hai cách trên. Cách 1 Sử dụng hàm thông thường. function chia_het_cho_3number{ if number % 3 == 0{ return true; } return false; } Cách 2 Sử dụng arrow function var chia_het_cho_3 = number => { if number % 3 == 0{ return true; } return false; }; 7. Một số ví dụ tạo hàm trong javascript Ví dụ 1 Viết chương trình kiểm tra một năm có phải là năm nhuận hay không Năm nhuận là năm chia hết cho 4, nếu chia hết cho 100 thì nó phải chia hết cho 400. Đây là định nghĩa năm nhuận còn chính xác hay không thì mình không biết nhé D vì có trường hợp nó sai. // khai báo hàm function kiem_tra_nam_nhuannam { // nếu năm chia hết cho 100 // thì kiểm tra nó có chia hết cho 400 hay không if nam % 100 == 0 { // nêu chia hết cho 400 thì là năm nhuận if nam % 400 == 0{ alertnam + ' là năm nhuận'; } else { // ngược lại không phải năm nhuận alertnam + ' không phải năm nhuận'; } } else if nam % 4 == 0{ // trường hợp chia hết cho 4 thì là năm nhuận alertnam + ' là năm nhuận'; } else { // cuối cùng trường hợp không phải năm nhuận alertnam + 'không phải là năm nhuận'; } } // sử dụng kiem_tra_nam_nhuan4; Ví dụ 2 thực hiện lại ví dụ trên nhưng sử dụng return để trả kết quả vè, nếu true thì là năm nhuận, false thì không phải năm nhuận. // khai báo hàm function kiem_tra_nam_nhuannam { // nếu năm chia hết cho 100 // thì kiểm tra nó có chia hết cho 400 hay không if nam % 100 == 0 { // nêu chia hết cho 400 thì là năm nhuận if nam % 400 == 0{ return true; } else { // ngược lại không phải năm nhuận return false; } } else if nam % 4 == 0{ // trường hợp chia hết cho 4 thì là năm nhuận return true; } else { // cuối cùng trường hợp không phải năm nhuận return false; } } // sử dụng var flag = kiem_tra_nam_nhuan4; if flag{ alert'là năm nhuận'; } else { alert'không phải là năm nhuận'; } Trong ví dụ này thay vì alert trực tiếp trong hàm thì ta trả về kết quả true/false, sau đó kiểm tra kết quả này nếu true thì là năm nhuận, nếu false thì không phải là năm nhuận. 9. Các hàm có sẵn trong Javascript là gì? Hàm có sẵn trong Javascript là những hàm được tích hợp sẵn trong trình biên dịch của Javascript. Bạn có thể gọi đến những hàm này ở bất cứ đâu trong chương trình. Mình có soạn một series riêng về danh sách các hàm trong js, mới bạn tham khảo tại đây. Lời kết Qua bài này bạn đã hiểu được cách tạo và sử dụng hàm trong javascript, Sau này khi lập trình với JS thì bạn sử dụng hàm rất nhiều, vì vậy cần phải nắm vững nó nhé. Function JavaScript hàm trong JavaScript là một thành phần không thể thiếu trong cấu trúc chương trình. Hàm giúp chương trình trở nên rõ ràng, dễ hiểu bằng cách gộp những đoạn code lặp lại. Nhờ vậy mà việc bảo trì phần mềm cũng dễ dàng hơn. Ngoài ra, một hàm tốt độc lập và thực hiện một chức năng nhất định có thể tái sử dụng trong nhiều dự án khác nhau. Điều này giúp nâng cao hiệu suất công việc của lập trình viên. 💡 Trong bài viết về tương tác người dùng với alert, confirm và prompt bạn đã biết về các hàm có sẵn như alert, confirm và prompt. Sau đây, mình sẽ giới thiệu những thành phần cơ bản của hàm trong JavaScript. Qua đó, bạn sẽ hiểu hàm là gì, cách xây dựng hàm và ứng dụng hàm vào các dự án. Hàm trong Javascript là gì? Hàm trong JavaScript là một chương trình con giúp thực thi một công việc cụ thể. Để định nghĩa hàm trong JavaScript, bạn sử dụng từ khoá function với cú pháp là function functionName[parameter1], [parameter2],... { statement1; statement2; ... } Trong đó function là một từ khóa trong JavaScript dùng để định nghĩa hàm. functionName là tên của hàm tên tự đặt. [parameter1], [parameter2],... danh sách các tham số của hàm không bắt buộc. Cuối cùng là thân hàm, bao gồm một hoặc nhiều câu lệnh nằm trong cặp dấu ngoặc {}. Ví dụ hàm sayHello function sayHello { from } Để gọi hàm, bạn sử dụng tên hàm function sayHello { from } sayHello; // Hello from Khi gọi hàm, đoạn code bên trong thân hàm sẽ được thực thi. Trong ví dụ trên, đoạn code được thực hiện hai lần ứng với hai lần gọi hàm. Bạn có thể thấy rằng, hàm giúp tránh lặp lại code. Giả sử bạn cần thay đổi nội dung với trên, bạn chỉ cần thay đổi một chỗ bên trong thân hàm. Đến đây chắc bạn đã phần nào hiểu được hàm là gì rồi phải không? Sau đây, mình sẽ đi vào chi tiết các đặc điểm của hàm trong JavaScript. Biến cục bộ trong hàm Một biến được khai báo bên trong hàm, chỉ sử dụng được bên trong thân hàm đó. Biến này gọi là biến cục bộ hay biến địa phương. Ví dụ về biến cục bộ trong JavaScript function sayHello { const message = "Hello from } sayHello; // Hello from // Uncaught ReferenceError message is not defined Trong ví dụ trên, biến message là biến cục bộ bên trong hàm sayHello. Tức là biến message chỉ dùng được ở trong thân hàm sayHello. Khi bạn cố gắng truy cập vào biến message ở ngoài hàm, bạn sẽ bị lỗi Uncaught ReferenceError message is not defined. Biến ngoài hàm trong JavaScript Một hàm trong JavaScript có thể truy cập vào biến được khai báo bên ngoài hàm, ví dụ let message = "Hello from function sayHello { } sayHello; // Hello from Hơn nữa, bạn có thể thay đổi giá trị của biến ngoài hàm từ trong thân hàm let message = "Hello from function sayHello { message = "Hi!"; } sayHello; // Hi! // Hi! Tuy nhiên, nếu bên trong thân hàm khai báo một biến trùng tên với biến ngoài hàm thì biến ngoài hàm "bị bỏ qua" let message = "Hello from function sayHello { let message = "Hi!"; } sayHello; // Hi! // Hello from 📝 Biến toàn cục Một biến được khai báo ở ngoài tất cả các hàm, gọi là biến toàn cục. Biến toàn cục có thể được sử dụng và thay đổi giá trị ở mọi nơi trong chương trình. Vì vậy, bạn nên hạn chế sử dụng biến toàn cục. Điều này giúp hàm trở nên tốt hơn, dễ dàng tái sử dụng hơn vì nó độc lập với các biến bên ngoài. Truyền tham số vào hàm Trong trường hợp bạn muốn sử dụng giá trị của biến bên ngoài vào trong thân hàm, bạn có thể truyền tham số vào hàm thay vì sử dụng biến toàn cục. Ví dụ truyền tham số vào hàm function sayHellomessage { } sayHello"Hello!"; // Hello! sayHello"Hi!"; // Hi! Khi hàm sayHello được gọi, giá trị string được sao chép copy vào biến cục bộ message. Trong thân hàm sẽ sử dụng biến cục bộ đó. khi truyền tham số vào hàm ngoại trừ object là kiểu dữ liệu tham chiếu, hàm trong JavaScript luôn thực hiện sao chép dữ liệu mà không làm thay đổi giá trị biến bên ngoài. Ví dụ let message = "Hello from function sayHellomessage { message = "Hi!"; } sayHello; // Hi! // Hello from Bạn thấy rằng là bên trong hàm đã gán giá trị Hi! cho biến message. Nhưng giá trị của biến message bên ngoài không hề thay đổi. 📝 Số lượng tham số của hàm là không giới hạn. Ví dụ hàm có nhiều tham số function sayHellomessage, site { + " from " + site; } sayHello"Hello", " // Hello from Giá trị tham số mặc định Đối với hàm có tham số mà khi gọi hàm, bạn không truyền giá trị vào thì giá trị của tham số đó là undefined, ví dụ function sayHellomessage, site { + " from " + site; } sayHello"Hello"; // Hello from undefined Trong trường hợp này, bạn có thể định nghĩa "giá trị mặc định" cho tham số bằng cách sử dụng toán tử gán = như sau function sayHellomessage, site = " { + " from " + site; } sayHello"Hello"; // Hello from Lúc này, nếu bạn không truyền giá trị vào tham số site thì giá trị của nó mặc định là Trong ví dụ trên, giá trị mặc định chỉ là một giá trị string. Tuy nhiên, giá trị mặc định có thể là một biểu thức hoặc thậm chí là một hàm khác, ví dụ function aFunction { // code } function sayHellomessage, site = aFunction { + " from " + site; } Trong ví trên, hàm aFunction chỉ được gọi khi bạn không truyền giá trị cho tham số site. Return trong JavaScript Hàm trong JavaScript có thể trả về giá trị khi gọi hàm. Ví dụ hàm tính tổng hai số function suma, b { return a + b; } const result = sum1, 2; // 3 Từ khóa return trong JavaScript có thể đặt ở bất kỳ đâu trong thân hàm. Khi gặp từ khóa return, hàm sẽ dừng lại và trả về giá trị sau return. Có thể dùng nhiều từ khóa return trong hàm function suma, b { if a === null a === undefined { số không hợp lệ!"; return; } if b === null b === undefined { số không hợp lệ!"; return; } return a + b; } const result1 = sum; // Tham số không hợp lệ! Ví dụ trên, mình kiểm tra điều kiện cho a và b. Nếu chúng bằng null hoặc undefined thì sẽ return luôn mà không thực hiện tính tổng. Bạn cũng thấy rằng, hai vị trí return đầu tiên không có giá trị nào theo sau. Khi đó, giá trị trả về mặc định là undefined function suma, b { return; } let r = sum1, 2; // undefined Ngoài ra, nếu hàm không có return thì giá trị trả về cũng là undefined function suma, b {} let r = sum1, 2; // undefined không được xuống dòng ngay sau return. Vì JavaScript sẽ hiểu là bạn không return giá trị nào cả. Ví dụ function suma, b { return; a + b; } const result = sum1, 2; // undefined Trình thông dịch JavaScript sẽ tự động thêm dấu ; ngay sau return. Do đó, giá trị trả về của hàm trên là undefined. Và thành phần a + b phía dưới sẽ không bao giờ được chạy tới. Nếu cần xuống dòng thì bạn phải đưa giá trị trả về vào trong cặp dấu ngoặc đơn như sau function suma, b { return a + b; } const result = sum1, 2; // 3 Cách đặt tên hàm trong JavaScript Quy tắc đặt tên hàm trong JavaScript cũng giống như quy tắc đặt tên biến hay hằng trong JavaScript Bắt đầu bằng chữ cái, dấu gạch dưới _ hoặc kí tự "đô la" $. Sau kí tự đầu tiên, ngoài những kí tự trên, bạn có thể sử dụng thêm số 0-9. Không sử dụng từ khoá và từ dự trữ. Chuẩn hóa cách đặt tên hàm Vì hàm ứng với một hành động, nên tên hàm chuẩn thường bắt đầu bằng một động từ. Ví dụ một số động từ hay dùng để đặt tên hàm get... - trả về một giá trị. set... - gán giá trị cho một biến. check... - kiểm tra một số thứ và trả về giá trị boolean. display... - hiển thị một số thứ. ... Dĩ nhiên, JavaScript không quy định bạn phải đặt tên như vậy. Bạn chỉ cần đặt tên đúng theo quy tắc phía trên là đủ. Nhưng rõ ràng là nếu bạn đặt tên đúng chuẩn thì đồng nghiệp hoặc chính bản thân bạn khi đọc code sẽ dễ dàng hiểu được ý nghĩa của từng hàm. Sự phát sinh hàm trong chương trình Khi lập trình, thông thường sẽ có hai trường hợp mà bạn nên viết hàm Một đoạn chương trình được lặp đi, lặp lại nhiều lần. Việc gom chúng lại thành một hàm sẽ giúp chương trình ngắn gọn hơn, dễ hiểu hơn. Và khi cần thay đổi, bạn chỉ cần sửa một lần trong nội dung hàm, thay vì phải sửa nhiều chỗ. Bạn cần tách toàn bộ chương trình thành những phần nhỏ hơn. Hay còn gọi là module hoá. Lúc này, bạn có thể xây dựng logic cho toàn bộ chương trình trước khi thật sự định nghĩa nội dung từng hàm. Cách tiếp cận này gọi là "top-down". Với những dự án lớn, mỗi thành viên thường chỉ được làm những module nhỏ trong toàn bộ một project lớn. Sau đó khi các module nhỏ hoàn thành, sẽ có người ghép những module nhỏ đó thành một chương trình hoàn chỉnh. Do đó, việc phân chia chương trình thành những hàm tốt là vô cùng quan trọng. Như thế nào là một hàm tốt? Đây là một câu hỏi rất khó để trả lời. Theo mình, hàm tốt là hàm thỏa mãn một số điều kiện sau Một hàm chỉ thực hiện một chức năng duy nhất Độc lập với các yếu tố bên ngoài biến toàn cục, môi trường thực thi,... Dễ dàng tái sử dụng Tuy nhiên, không phải lúc nào bạn cũng có thể thoả mãn những yêu cầu trên. Hoặc không nhất thiết phải thoả mãn tất cả những yêu cầu trên. Pure function và non-pure function Nhìn chung, có hai loại hàm trong JavaScript là pure function hàm thuần khiết và non-pure function hàm không thuần khiết. Hàm thuần khiết là hàm không phụ thuộc vào yếu tố bên ngoài biến toàn cục, môi trường thực thi,.... Bất cứ khi nào bạn gọi hàm thuần khiết với cùng một đối số thì kết quả trả về luôn giống nhau. Do đó, pure function rất dễ để sử dụng, tái sử dụng hay bảo trì,... Theo mình, hàm thuần khiết là một hàm tốt. Ví dụ hàm thuần khiết function pureFuncnumber, factor { return number * factor; } let ret = pureFunc2, 10; // 20 Bạn thấy rằng, với cùng một giá trị truyền vào là 2 và 10 thì kết quả luôn là 20. Do đó, hàm trên là hàm thuần khiết. Ngược lại với hàm thuần khiết, hàm không thuần khiết là hàm phụ thuộc vào biến toàn cục hay môi trường thực thi. Vì vậy, khi bạn gọi cùng một hàm với cùng một đối số, nhưng kết quả lại có thể khác nhau. let factor = 10; function nonPureFuncnumber { return number * factor; } let ret = nonPureFunc2; // 20 factor = 11; ret = nonPureFunc2; // => 22 Rõ ràng, hàm nonPureFunc không phải là hàm thuần khiết. Vì hàm này phụ thuộc vào biến ngoài hàm là factor. Nghĩa là khi giá trị của biến factor thay đổi, kết quả trả về của hàm cũng thay đổi dù cho cùng giá trị truyền vào là 2. Tổng kết Vậy hàm là gì? Hàm trong JavaScript là một chương trình con giúp thực thi một công việc cụ thể với cú pháp là function functionName[parameter1], [parameter2],... { statement1; statement2; ... } Trong đó Tham số truyền vào hàm được sao chép vào biến cục bộ bên trong hàm. Trường hợp không truyền giá trị vào thì giá trị của tham số là undefined. Bạn có thể sử dụng toán tử = để khai báo giá trị mặc định cho tham số trong hàm. Biến cục bộ khai báo bên trong hàm chỉ dùng được ở thân hàm. Code bên ngoài không thể truy cập vào biến cục bộ trong hàm. Hàm có thể đọc và cập nhật giá trị của biến ngoài hàm. Nhưng khi bên trong hàm có khai báo một biến cùng tên với biến ngoài hàm thì biến ngoài hàm bị "bỏ qua". Hàm có thể trả về giá trị bằng cách dùng từ khóa return. Có thể có nhiều từ khóa return trong thân hàm. Khi gặp từ khóa return, hàm sẽ dừng lại ngay lập tức và trả về giá trị sau return. Nếu không có giá trị, biểu thức,... nào sau return, hoặc không có từ khóa return thì giá trị trả về của hàm là undefined. Quy tắc đặt tên hàm cũng giống quy tắc đặt tên biến và hằng. Và tên hàm nên bắt đầu bằng một động từ. Nên ưu tiên viết hàm thuần khiết để dễ dàng tái sử dụng, dễ dàng kiểm thử và tránh lỗi. Thực hành Bài 1 Viết hàm trả về giá trị nhỏ nhất của hai số giả sử giá trị truyền nào luôn là số. Xem đáp án function mina, b { return a < b ? a b; } min2, 5; // 2 min4, -1; // -1 min3, 3; // 3 Trường hợp hai số truyền vào bằng nhau thì dĩ nhiên kết quả là giá trị của hai số đó. Bài 2 Viết hàm kiểm tra xem một số có phải là số nguyên tố hay không. Nếu là số nguyên tố thì trả về true. Ngược lại, trả về false. Xem đáp án function isPrimenumber { if isNaNnumber return false; if number < 2 return false; if number === 2 return true; for i = 2; i * i <= number; i++ { if number % i === 0 return false; } return true; } // Ví dụ isPrime"abc"; // false isPrime0; // false isPrime2; // true isPrime5; // true isPrime6; // false Trong đó, hàm isNaNnumber dùng để kiểm tra giá trị của biến number xem có phải là NaN hay không. Nói cách khác, nếu isNaNnumber trả về false thì giá trị của number là số. Có rất nhiều ứng dụng cần hiển thị giá tiền, ví dụ như ứng dụng thương mại điện tử, ứng dụng về thuế phí, Có nhiều lý do, các giá trị này được lưu trong database là giá trị thô kiểu number – vì để phục vụ việc tính toán dễ hơn chẳng hạn. Do đó, để hiển thị giá trị tiền cho người dùng được thân thiện hơn, bạn cần phải định dạng lại. Chưa kể, mỗi một quốc gia lại có quy tắc định dạng tiền tệ khác nhau. Có nơi dùng dấu phẩy để ngăn hàng nghìn, có nơi lại dùng dấy phẩy để ngăn phần thập phân. Ví dụ bạn có 21450 USD hai mươi mốt nghìn bốn trăm năm mươi đô la mỹ, sẽ hiển thị là $21, Tương tự, với tiền euro thì lại ngược lại € Trong bài viết này, mình sẽ chia sẻ cách định dạng các con số theo định dạng tiền tệ tiếng Anh người ta hay gọi là format Number as currency. Let’s go 😊 Phương pháp 1 Sử dụng hàm có sẵn Trong Javascript, cách đơn giản nhất để định dạng giá trị tiền tệ là sử dụng hàm có sẵn Hàm này nó có hỗ trợ cả định dạng theo từng quốc gia. Cú pháp options. formatprice Trong đó locales mã quốc gia tương ứng khi hiển thị định dạng tiền. Bạn có thể tham khảo danh sách mã quốc gia này tại đây. options Có nhiều tùy chỉnh trong options này lắm, nhưng trong đó bạn chỉ cần quan tâm tới 2 tùy chỉnh chính style và currency Mình sẽ giải thích chi tiết về hai option trên nhé. style Bạn sử dụng tùy chỉnh này để xác định kiểu định dạng. Bạn có thể truyền vào một trong ba giá trị sau số thập phân bình thường decimals, tiền tệ currency, hay đơn vị đo lường units. Trong bài viết này, chúng ta là currency. currency tùy chọn này để chỉ định đơn vị tiền tệ, ví dụ USD, VND, CAD… Tùy chọn này nó cũng hỗ trợ hiển thị ký hiệu tiền tệ tương ứng với locale. Ví dụ bằng code const price = 21450; const USDollar = new { style 'currency', currency 'USD', }; const VND = new { style 'currency', currency 'VND', }; ' + // Dollars $21, Nam đồng ' + // Việt Nam đồng ₫ Phương pháp 2 Sử dụng thư viện Trong trường hợp bạn muốn tùy biến nhiều hơn nữa, bạn có thể xem xét sử dụng thư viện bên thứ 3. Cá nhân hay sử dụng thư viện Với thư viện này, bạn có thể sử dụng trên cả frontend hoặc backend đều được. Cách cài đặt thư viện Với NodeJS npm install -save Với HTML, bạn thêm vào thẻ script như bình thường Cách sử dụng const price = 21450; {symbol "đ"}.format // đ21, {symbol "$"}.format // $21, Thư viện này khá là mạnh, bạn có thể tùy biến rất nhiều. Trong đó, bạn có thể thay đổi ký tự phân tách hàng nghìn và ký tự phân tách chữ thập phân. Mặc định, ký tự dấu phẩy “,” dùng để phân tách hàng nghìn. Bạn hoàn toàn có thể đổi lại. const price = 21450; { symbol 'đ', separator '.', decimal ',' } .format; // Còn rất nhiều tính năng và tùy chọn khác nữa, bạn có thể khám phá trong trang tài liệu chính thức của thư viện này nhé. Phương pháp 3 Tự code Ngoài 2 trường phái sử dụng thư viện hoặc hàm có sẵn, bạn thích tự mình làm tất cả. Với ưu điểm là code tự viết nên mình sẽ hiểu rõ và tối ưu chính xác với nhu cầu thực tế của dự án. Nhưng nhược điểm là khả năng sẽ bug nhiều đấy 😊 Dưới đây là một gợi ý dành cho bạn. /** * Định dạnh số theo tiền tệ * param price - giá trị tiền * param symbol - ký tự đại diện cho đơn vị tiền */ function formatCurrencyprice, symbol = "$" { var DecimalSeparator = Number' 1; var priceWithCommas = var arParts = StringpriceWithCommas.splitDecimalSeparator; var intPart = arParts[0]; var decPart = > 1 ? arParts[1] ''; decPart = decPart + '00'.substr0, 2; return symbol + intPart + DecimalSeparator + decPart; } const price = 21450; Tạm kết Trong bài viết này, mình đã giới thiệu một số phương pháp để định dạng một số thành chuỗi tiền tệ, giúp người dùng dễ đọc hơn. Ngoài những cách trên, bạn còn giải pháp nào hay hơn không? Đừng ngại để lại chia sẻ bên dưới bình luận nhé. 💦 Đọc thêm về Javascript Xóa thuộc tính khỏi Object trong Javascript 2 cách Deep Clone Objects trong Javascript – Giới thiệu một biện pháp cực mạnh [Javascript] Các cách xóa phần tử trong mảng Array

hàm tính tiền trong javascript