Một số phương thức của mảng trong Javascript

Để viết các ứng dụng với javascript thì việc vận dụng mảng là một điều hết sức cần thiết. Javascript cũng như các ngôn ngữ lập trình khác cũng có mảng và cách thức làm việc của mảng trong Javascript cũng tương tự, vấn đề cần quan tâm là các chức năng thao tác với mảng thì mỗi một ngôn ngữ lập trình đều viết sẵn một số hàm hoặc phương thức để thao tác, ý nghĩa của các hàm thì giống nhau chỉ khác ở cách khai báo và cách gọi tên hàm của từng ngôn ngữ.

Trong bài viết này chúng ta sẽ tìm hiểu một số phương thức thường được dùng để thao tác với các phần tử mảng trong Javascript.

Trong PHP bạn có thể khai báo mảng bằng rất nhiều cách ngắn gọn trong đó có một cách rất đơn giản là sử dụng dấu ngoặc vuông "[]" khi nào cần sử dụng mảng mà không cần phải khai báo trước, trong dấu ngoặc vuông có thể bỏ trống và PHP sẽ tự gán key cho mảng đó. Trong Javascript thì bạn không thể khai báo theo cách ngằn gọn giống PHP như trên mà cần phải khai báo mảng trước sau đó mới có thể sử dụng. Cú pháp khai báo mảng của Javascript là new array("phần tử","phần tử",..."").

Một điều nhấn mạnh rằng mảng trong Javascript là một đối tượng, sau đây sẽ là một số phương thức cần thiết để bạn thao tác với mảng:

  1. push("phần tử", "phần tử") -> Phương thức sẽ thêm phần tử vào cuối mảng
  2. unshift("phần tử", "phần tử") -> Phương thức sẽ thêm phần tử vào đầu mảng
  3. pop() ->Phương thức sẽ xóa phần tử cuối trong mảng
  4. shift() ->Phương thức sẽ xóa phần tử đầu trong mảng
  5. sort() ->Phương thức sẽ sắp các phần tử mảng theo giá trị tăng dần đồng thời gán lại key theo thứ tự tăng dần, chú ý phương thức chỉ có tác dụng với mảng có key liên tiếp bắt đầu từ 0
  6. concat() ->Phương thức kết hợp hai mảng thành một
  7. slice(ví trí bắt đầu, vị trí kết thúc) ->Phương thức tách ra một mảng con
  8. join() ->Phương thức tạo một chuỗi từ một mảng, đối số là chuỗi nối các giá trị của phần tử trong mảng
  9. reverse() ->Đảo ngược các vị trí phần từ trong mảng đồng thời xắp lại key

Ngoài ra chúng ta còn có một số các phương thức hữu dụng khác như every(), some(), filter(), forEach(), map() tuy nhiên chúng lại không được hổ trợ bởi các trình duyệt cũ như IE7.
Có một phương thức vô cùng mạnh mẽ khác trong javascript đó là phương thức splice(), nó có thể thay thế cho các phương thức như pop(), push(),shift(), unshift() ở trên:

  1. splice(vị trí bắt đầu, số lượng) ->Phương thức sẽ xóa một số phần tử tại vị trí bất kỳ trong mảng
  2. splice(vị trí bắt đầu, số lượng, "phẩn tử mới", "phần tử mới",""...) ->Khi thêm đối số vào phương thức nó sẽ thay thế các phần tử mới vào các phần tử đã xóa.

Chúng ta có thể thấy việc thao tác với các phần tử mảng trong Javascript cũng không có gì khó khăn điều quan trọng là chúng ta biết vận dụng các phương thức của chúng khi cần thiết. Bài viết này tôi chỉ mang hình thức giời thiệu, nếu bạn muốn thực sự làm việc với Javascript thì chí ít bạn cũng phải biết chút ít kiến thức về lập trình căn bản, bạn có thể tự làm ví dụ để hiểu rõ hơn nếu bạn chưa thực sự hiểu về nó.

jQuery basic: Attribute Selectors, Custom Selectors

Bài viết này sẽ giới thiệu cách chọn phần tử theo thuộc tính và giựa theo các tùy chọn về vị trí của phần tử.

Attribute Selectors

Has Attribute: [foo]

Chọn các phần tử có thuộc tính là foo

Attribute Value Equals: [foo=bar]

Chọn các phần tử có thuộc tính foo với giá trị bằng bar

Attribute Value Does Not Equal: [foo!=bar]

Chọn các phần tử không có thuộc tính foo với giá trị bằng bar

Attribute Value Begins: [@foo^=bar]

Chọn các phần tử có thuộc tính foo với giá trị bắt đầu bằng bar

Attribute Value Ends: [@foo$=bar]

Chọn các phần tử có thuộc tính foo với giá trị cuối bằng bar

Attribute Value Contains: [@foo*=bar]

Chọn các phần tử có thuộc tính foo với giá trị có chứa chuỗi bằng bar

Custom Selectors

Even Element (:even)

Chọn các phần tử chẵn, bạn cũng có thể sử dụng :nth-child(even) với chức năng tương tự

Odd Element (:odd)

Chọn các phần tử lẻ, bạn cũng có thể sử dụng :nth-child(odd) với chức năng tương tự

Nth Element (:eq(n), :nth(n))

Chọn phần tử theo thứ tự chỉ mục, phần tử đầu tiên bắt đầu với chỉ mục bằng 0, cách thức chọn này là khác với nth-child(n)

Greater Than :gt(n)

Chọn các phần tử có chỉ mục lớn hơn n, phần tử đầu tiên bắt đầu với chỉ mục bằng 0

Less Than : lt(n)

Chọn các phần tử có chỉ mục nhỏ hơn n, phần tử đầu tiên bắt đầu với chỉ mục bằng 0

First :first

Chọn phần tử đầu tiên, điều này là tương đương với nth(0), eq(0), còn nếu chọn theo phần tử con thì nó tương đương với nth-child(1)

Last :last

Chọn phần tử cuối cùng

Contains :contains(text)

Chọn các phần tử có chứa nội dung text

Visible :visible

Chọn các phần tử đang được hiển thị

Hidden :hidden

Chọn các phần tử đang được ẩn

Ở trên là những cách thức để bạn chọn phần tử trong jQuery, các bài viết thuộc seri jQuery basic chỉ mang hình thức giới thiệu dành cho những ai mới làm quen với jQuery, hoặc cũng là một bài ôn lại cho những ai đã hiểu về nó.

Tham khảo (jQuery Reference Guide and docs.jquery.com)

Hiểu rõ về các phương thức sự kiện được viết trong jQuery

DOM cho chúng ta một số event để tương tác với người dùng trên DOM, nay chúng ta có nhiều lựa chọn hơn khi dùng jQuery, khá nhiều phương thức được viết trong jQuery để thực hiện cho một vài sự kiện người dùng trên DOM hoặc một số sự kiện tự định nghĩa, qua nhiều phiên bản tiến lên có một số phương thức trong jQuery đã được thay thế nhưng vẫn giữ lại hoặc đã bỏ đi, một vài liệt kê sau sẽ sơ lược lại những gì jQuery đã viết để có cách nhìn rõ ràng và tổng quát hơn về các phương thức sự kiện cũng như có mối liên hệ tới các sự kiện trong DOM.

bind()/on()/delegate()/one()

  • bind( eventType [, eventData ], handler )
  • on( events [, selector ] [, data ], handler )
  • delegate( selector, eventType, eventData, handler )
  • one( events [, selector ] [, data ], handler )

từ phiên bản 1.7 thì jQuery đưa vào on() lúc này bind(), delegate() và on() đều như nhau vì thực tế chỉ là bind() và delegate() gọi on(), nhưng on() có thể gắn một hành động cho một hoặc nhiều sự kiện tới những phần tử được chọn, bind() thì không có thêm tham số selector (trong jQuery bind() gọi on() với tham số selector là null). Các sự kiện được liệt kê trong chuỗi bằng khoảng trắng để cùng thực hiện một hành động hoặc có thể chuyển vào dạng object để viết hành động cho từng sự kiện. Trong code jQuery phương thức one() cũng gọi on() nhưng với tham số cuối bằng 1 điều này để one() thực hiện hành động cho sự kiện chỉ lần đầu tiên điều này cũng tương đương với việc ta gọi off() trong khi thực hiện một hành động cho sự kiện bằng gọi on(). Tóm lại mục đích chung của tất cả các phương thức trên thì cũng tương tự như addEventListener() của DOM (từ IE8 về trước thì là attachEvent)

unbind()/off()/undelegate()

unbind() và undelegate() đều gọi off(), mục đích thì cũng tương tự như removeEvenListener() của DOM (từ IE8 về trước thì là detachEvent)

live(), die()

đã được remove từ phiên bản 1.9

blur()/focusout(), focus()/focusin()

blur() được giới thiệu trước và sau đó jQuery đã giới thiệu thêm focusout() đây là 2 phương thức ngắn gọn của on(), hai phương thức này tương tự nhau vì thực tế là blur() gọi focusout(), mục đích giống như phương thức onblur() và onfocusout() của DOM. Sự khác nhau của 2 phương thức này ở chỗ focusout() sẽ có thể ảnh hưởng lên các phần tử con của nó còn blur() phải là chính nó. Trong jQuery thì focusout() có thể làm việc được trên cả firefox còn onfocusout() của DOM hiện tại thì không (ví dụ http://jsfiddle.net/tuG33/1/). Cách hiểu về focus() và focusin() cũng tương tự.

load(), unload(), resize(), scroll(), submit(), change(), select(), click(), dblclick(), keydown(), keyup(), keypress()

Một phương thức ngắn gọn của on(), mục đích giống như onload(), onunload(), onresize(), onscroll(), onsubmit(), onchange(), onselect(), onclick(), ondblclick(), onkeydown(), onkeyup(), onkeypress() của DOM. Cần phải nói thêm về sự khác nhau giữa keydown/keyup với keypress là keydown/keyup thực hiện gán hành động cho sự kiện với các phím(key) trên bàn phím lúc này chúng ta có keycode còn keypress cũng gán hành động cho sự kiện với các phím nhưng lúc này là charcode nghĩa là ký tự được nhập vào nên nó sẽ không làm việc với các phím không nhập ký tự như shift, alt hay ctrl..., ví dụ phím "a" có keycode là 65 còn charcode là 97

hover() / mouseenter(), mouseleave() / mouseover(), mouseout()

  • hover( handlerIn, handlerOut )

Một phương thức ngắn gọn của on(). Đây đều là những sự kiện về mouse khi rê con trỏ lên và rời khỏi một phần tử nhưng sự khác nhau là mouseover() và mouseout() ảnh hưởng lên cả phần tử con của nó còn 2 cái kia thì chỉ chính nó. Những sự kiện này cũng tương tự như các sự kiện onmouseenter(), onmouseleave(), onmouseover(), onmouseout() của DOM. Sự kiện hover() là phương thức gọn để thực hiện 2 sự kiện là mouseenter() và mouseleave(), các phương thức sự kiện khác như mousemove(), mouseup(), mousedown() thì mục đích cũng tương tự như các sự kiện của DOM

error()

Dùng để thực hiện một hành động nào đó khi hình ảnh hoặc một phần tử nào đó tải không đúng, hiện phương thức này đã được phản đối từ phiên bản 1.8, phương thức này cũng gần tương tự như onerror() của DOM

Mẹo nhỏ khi sử dụng Chrome Dev Tools

Chrome Dev Tools là một bộ công cụ không thể thiếu cho Web Developer khi phát triển web trên Google Chrome. Nó cho phép ta có thể kiểm tra cấu trúc HTML của web, debug javascript, … Nhưng bên cạnh đó Chrome Dev Tools còn có rất nhiều chức năng mà có thể bạn chưa biết

1. Chrome Dev Tools dạng dọc

Bình thường khi chúng ta mở Chrome Dev Tools (nhấn F12 hoặc Inspect Element) thì nó sẽ nằm ở bên dưới của Google Chrome.  Nhưng nó còn có thể chuyển sang dạng dọc như hình dưới đây:

Chrome Dev Tools - Vertical

Khi ở dạng dọc, Chrome Dev Tools rất thích hợp để ta phát triển các web responsive. Ta có thể kéo độ rộng của nó to hoặc nhỏ để phù hợp với độ phần giải của từng thiết bị desktop, mobile. Khác...


Debug javascript với Chrome Dev Tools

Bạn đã bao giờ phải đau đầu khi đoạn JavaScript của mình không chạy không? Và sau đó lại phải sử dụng hàm alert() để xem code đó có chạy không. Rất mất công và khó thành công! Đặc biệt là khi ứng dụng web ngày càng yêu cầu xử lí phức tạp hơn nên JavaScript được viết rất nhiều vì thế việc debug rất cần thiết. Đừng lo lắng! Chrome Dev Tools đã giúp chúng ta rất nhiều  Chúng ta cùng bắt đầu tìm hiểu về debug JavaScript nhé.

Bắt đầu debug

Như ta đã biết, lỗi trong code bao gồm:

  • Lỗi cú pháp: Code không thể chạy được và thông báo ra lỗi.
  • Lỗi ngữ nghĩa: Code chạy được nhưng không ra kết quả mong muốn.

Lỗi cú pháp

Lỗi của pháp sẽ được hiển thị trên Console của Chrome Dev Tools.

Loi cu phap

 Khác...