Cách gọi một hàm JavaScript trong HTML – cách gọi javascript trong html

Trong hướng dẫn này, bạn sẽ học cách gọi các hàm JavaScript từ các trang HTML để làm cho chúng tương tác.
HTML và CSS có thể cấu trúc một trang web, có thể cung cấp cho một trang web sự xuất hiện và khả năng phản hồi.

Bạn đang xem : cách gọi javascript trong html

Trong hướng dẫn này, bạn sẽ học cách gọi các hàm JavaScript từ các trang HTML để làm cho chúng tương tác. < / p>

HTML và CSS có thể cấu trúc một trang web, có thể cung cấp cho trang web diện mạo và khả năng phản hồi. JavaScript giúp một trang web tương tác với người dùng và hướng dẫn họ đến thông tin phù hợp. Bạn có thể sử dụng các hàm JavaScript để xây dựng các trang web phản hồi các sự kiện thông thường của người dùng như nhấp chuột, nhấn phím, tải trang, di chuột qua.

Chúng tôi sẽ đi từng bước để giúp bạn nắm được các khái niệm cốt lõi về Phát triển web bằng các mẫu mã dễ làm theo.

Sử dụng các hàm JS với các thuộc tính sự kiện HTML

Bạn có thể sử dụng các thuộc tính sự kiện trong điều khiển HTML để gọi hàm Javascript khi một sự kiện xảy ra.

HTML cung cấp một tập hợp các thuộc tính sự kiện như vậy để bao gồm một loạt các sự kiện.

Một vài ví dụ phổ biến – onclick , onchange , onload , onmouseover , onmouseout onkeydown .

Xin lưu ý rằng các thuộc tính sự kiện HTML chỉ hoạt động với các điều khiển có thể hành động. Các nút và liên kết là một vài ví dụ về các điều khiển như vậy.

Đây được cho là cách tiếp cận đơn giản nhất để gọi một hàm JavaScript từ một phần tử HTML.

Cách gọi một hàm JavaScript bằng cách sử dụng các thuộc tính sự kiện HTML

Hãy phát triển một trang web chấp nhận tên của người dùng. Khi người dùng nhấp vào nút gửi, trang web sẽ hiển thị thông báo chào mừng đến người dùng.

Chúng tôi sẽ sử dụng thuộc tính sự kiện HTML onclick , để gọi hàm khi người dùng nhấp vào nút. Chức năng này sẽ chào đón người dùng bằng một thông báo cảnh báo.

Bạn sẽ cần tạo HTML và tệp JavaScript để thử ví dụ. Hãy tạo index.html cho mã nguồn HTML và scripts.js cho mã nguồn JavaScript. Chúng tôi cũng sẽ sử dụng các mã nguồn này cho các ví dụ sau với những thay đổi tối thiểu.

Mã nguồn HTML

Bạn có thể viết hoặc sao chép mã nguồn dưới đây vào tệp index.html của mình. Mã nguồn HTML này hiển thị một hộp văn bản và một nút gửi. Người dùng có thể nhập tên vào hộp văn bản.

  

& lt;! DOCTYPE html & gt;

& lt;

html

lang

=

"vi"

& gt; & lt;

đầu

& gt; & lt;

tiêu đề

& gt; Chức năng Gọi từ HTML & lt; /

title

& gt; & lt; /

đầu

& gt; & lt;

body

& gt; & lt;

nhãn

cho

=

"fullName"

& gt; Nhập tên của bạn: & lt; /

nhãn < / p> & gt; & lt;

đầu vào

loại

=

"văn bản"

tên

=

"fullName"

id

=

"fullName"

/ & gt;

& lt;! - Thuộc tính sự kiện onclick được sử dụng để gọi hàm showAlert () - & gt;

& lt;

nút

nhập

=

"gửi"

onclick

=

"showAlert ()"

& gt; Nút gửi & lt; /

& gt; & lt;

script

src

=

"/scripts.js"

& gt; & lt; /

script & gt; & lt; /

nội dung

& gt; & lt; /

html

& gt;

Ví dụ trên sử dụng thuộc tính sự kiện onclick trong nút đánh dấu để gửi. Trình duyệt gọi hàm showAlert () nếu người dùng nhấp vào nút gửi.

Mã nguồn JavaScript

Hãy viết mã nguồn dưới đây vào tệp scripts.js -

  

hàm

showAlert

() {

var

tên

=

tài liệu.

getElementById

(

"fullName"

).

giá trị

;

alert

(

"Xin chào"

+

tên

+

"!" < / p>); }

Hàm này tìm kiếm hộp văn bản HTML có id là “fullName”. Nó tìm nạp thông tin đầu vào của người dùng và sử dụng thông tin đó để hiển thị thông báo.

Sản lượng mong đợi

Khi hoạt động, trang web yêu cầu người dùng cuối nhập tên đầy đủ của người dùng. Nếu bạn nhập “John Collins”, hệ thống sẽ hiển thị thông báo “Xin chào John Collins!”.

Sử dụng các hàm JS với trình xử lý sự kiện JavaScript

JavaScript cung cấp một tập hợp các thuộc tính của trình xử lý sự kiện có khả năng thực hiện các lệnh gọi hàm. Bạn có thể sử dụng chúng với các đối tượng JavaScript để gọi các hàm trong trường hợp có điều khiển HTML.

Mỗi thuộc tính này tương ứng với một sự kiện cụ thể. Một vài ví dụ phổ biến - onload , onclick , onmouseover , onmouseout onkeydown . Bạn có thể lấy danh sách đầy đủ từ nhiều trang web trên Internet.

Các trình xử lý sự kiện JavaScript cũng hoạt động cho các phần tử HTML không thể hành động. Điều này có nghĩa là bạn có thể biến ngay cả phần tử & lt; div & gt; thành điều khiển có thể nhấp bằng trình xử lý sự kiện.

Các trình xử lý sự kiện JavaScript chỉ có thể gọi một hàm trong một sự kiện cho một phần tử HTML. Đây là một hạn chế mở đường cho các trình xử lý sự kiện Javascript đi vào hình ảnh.

Cách gọi hàm JavaScript bằng cách sử dụng trình xử lý sự kiện trong HTML

Chúng tôi sẽ phát triển một trang web chấp nhận tên của người dùng. Khi người dùng nhấp vào nút gửi, trang web sẽ hiển thị thông báo chào mừng đến người dùng.

Ở đây, chúng tôi sẽ sử dụng thuộc tính trình xử lý sự kiện JavaScript, onclick để gọi một hàm JavaScript khi người dùng nhấp vào nút gửi.

Mã nguồn HTML

Bạn có thể viết hoặc sao chép mã nguồn HTML bên dưới trong tài liệu HTML của mình, index.html . Mã nguồn HTML này hiển thị một hộp văn bản và một nút gửi. Người dùng có thể nhập tên vào hộp văn bản.

  

& lt;! DOCTYPE html & gt;

& lt;

html

lang

=

"vi"

& gt; & lt;

đầu

& gt; & lt;

tiêu đề

& gt; Chức năng Gọi từ HTML & lt; /

title

& gt; & lt; /

đầu

& gt; & lt;

body

& gt; & lt;

nhãn

cho

=

"fullName"

& gt; Nhập tên của bạn: & lt; /

nhãn < / p> & gt; & lt;

đầu vào

loại

=

"văn bản"

tên

=

"fullName"

id

=

"fullName"

/ & gt; & lt;

nút

nhập

=

"gửi"

id

=

"submitButton"

& gt; Nút gửi & lt; /

& gt; & lt;

script

src

=

"/scripts.js"

& gt; & lt; /

script & gt; & lt; /

nội dung

& gt; & lt; /

html

& gt;

Mã nguồn JavaScript

Bạn có thể viết hoặc sao chép mã nguồn bên dưới trong tệp JavaScript của mình, scripts.js

  

var

bttn

=

tài liệu.

getElementById (

"submitButton"

);

hàm

showAlert

() {

var

tên

=

tài liệu.

getElementById

(

"fullName"

).

giá trị

;

alert

(

"Xin chào"

+

tên

+

"!" < / p>); }

// Đã sử dụng thuộc tính xử lý sự kiện onclick để gọi hàm showAlert ()

bttn

.

onclick

=

showAlert

;

Trong ví dụ này, trình xử lý sự kiện onclick gọi hàm showAlert () . Lệnh gọi hàm này xảy ra khi bạn nhấp vào nút gửi HTML.

Sản lượng mong đợi

Nếu bạn nhập tên “John” và nhấp vào nút gửi, hệ thống sẽ hiển thị thông báo - “Xin chào Jhon!”.

Cách sử dụng trình xử lý sự kiện để gọi một hàm JavaScript trong HTML

Bạn có thể tận dụng trình xử lý sự kiện JavaScript để nghe các sự kiện và gọi các hàm.

Phương thức trình xử lý sự kiện gắn trình xử lý sự kiện với một đối tượng và gọi hàm mong muốn khi bạn kích hoạt một sự kiện cụ thể trên đối tượng.

Đây là cách tiếp cận mạnh mẽ nhưng linh hoạt nhất để gọi các hàm từ HTML.

JavaScript cung cấp hai phương pháp trình xử lý sự kiện dưới đây có thể được sử dụng với các đối tượng JavaScript-

  • addEventListener () - Thêm một trình xử lý sự kiện vào một phần tử HTML và gọi các hàm trong một sự kiện được chỉ định.
  • removeEventListener () - Xóa một trình xử lý sự kiện khỏi một phần tử HTML.

Bạn phải chuyển các tham số dưới đây cho các phương thức xử lý sự kiện JavaScript này -

  • Tên sự kiện - Bạn cần chuyển tên sự kiện DOM HTML thực tế. Ví dụ về một số sự kiện phổ biến - nhấp chuột, thay đổi, tiêu điểm, di chuyển chuột, v.v.
  • Tên hàm - Bạn phải chuyển tên hàm vào đây. Trình duyệt gọi hàm này để phản hồi lại sự kiện trên đối tượng.
  • Bạn có thể chỉ định bất kỳ số lượng trình nghe sự kiện nào cho một đối tượng. Do đó, bạn có thể thực hiện nhiều lệnh gọi hàm trong một sự kiện duy nhất của điều khiển HTML.

Mẫu mã để gọi hàm JavaScript bằng cách sử dụng trình xử lý sự kiện

Chúng tôi sẽ phát triển một trang web chấp nhận tên của người dùng. Khi người dùng nhấp vào nút gửi, trang web sẽ hiển thị thông báo chào mừng đến người dùng.

Ở đây, chúng tôi sẽ sử dụng trình xử lý sự kiện JavaScript để gọi một hàm JavaScript khi người dùng nhấp vào nút gửi.

Mã nguồn HTML

Bạn có thể viết hoặc sao chép mã nguồn HTML bên dưới trong tài liệu HTML của mình, index.html. Mã nguồn HTML này hiển thị một hộp văn bản và một nút gửi. Người dùng có thể nhập tên vào hộp văn bản.

  

& lt;! DOCTYPE html & gt;

& lt;

html

lang

=

"vi"

& gt; & lt;

đầu

& gt; & lt;

tiêu đề

& gt; Chức năng Gọi từ HTML & lt; /

title

& gt; & lt; /

đầu

& gt; & lt;

body

& gt; & lt;

nhãn

cho

=

"fullName"

& gt; Nhập tên của bạn: & lt; /

nhãn < / p> & gt; & lt;

đầu vào

loại

=

"văn bản"

tên

=

"fullName"

id

=

"fullName"

/ & gt; & lt;

nút

nhập

=

"gửi"

id

=

"submitButton"

& gt; Nút gửi & lt; /

& gt; & lt;

script

src

=

"/scripts.js"

& gt; & lt; /

script & gt; & lt; /

nội dung

& gt; & lt; /

html

& gt;

Mã nguồn JavaScript

Tệp JavaScript bên ngoài, scripts.js phải có mã nguồn bên dưới -

  

var

bttn

=

tài liệu.

getElementById (

"submitButton"

);

hàm

showAlert

() {

var

tên

=

tài liệu.

getElementById

(

"fullName"

).

giá trị

;

alert

(

"Xin chào"

+

tên

+

"!" < / p>); }

hàm

showWelcomeMessage

() {

var

tên

=

tài liệu.

getElementById

(

"fullName"

).

giá trị

;

alert

(

"Chào mừng",

+

tên

+

"!"

); }

// Phương thức trình xử lý sự kiện

bttn

.

addEventListener

(

"nhấp chuột"

,

showAlert

);

bttn

.

addEventListener

(

"nhấp chuột"

,

showWelcomeMessage

);

Khi người dùng nhấp vào nút gửi, trình duyệt sẽ thực hiện hai lệnh gọi hàm. Các hàm là showAlert () showWelcomeMessage () .

Sản lượng mong đợi

Nếu bạn nhập John làm đầu vào và nhấp vào nút gửi, hệ thống sẽ hiển thị hai thông báo quay lại:

  • Xin chào John!
  • Chào mừng, John!

Kết luận

Tóm lại, đây là những điều bạn đã học được trong hướng dẫn này:

  • Bạn có thể sử dụng các thuộc tính sự kiện HTML, trình xử lý sự kiện JavaScript để gọi các hàm. Chúng có thể gọi một hàm duy nhất trong một sự kiện của một điều khiển cụ thể.
  • Các thuộc tính sự kiện HTML chỉ hoạt động với các phần tử HTML có thể hành động.
  • Trình xử lý sự kiện JavaScript hoạt động cả với các điều khiển có thể hành động và không thể hành động.
  • Các phương thức xử lý sự kiện JavaScript chấp nhận các sự kiện HTML DOM. Do đó, chúng mang lại cho bạn sự linh hoạt để lắng nghe một loạt các sự kiện. Ngoài ra, chúng cho phép bạn gọi nhiều hàm trong một trường hợp điều khiển.
  • Quy tắc ngón tay cái ở đây là, bạn nên sử dụng thuộc tính trình xử lý sự kiện khi bạn cần gọi một hàm duy nhất trong một sự kiện điều khiển. Trong trường hợp bạn cần nhiều lệnh gọi hàm trong một sự kiện, bạn nên chọn phương pháp trình xử lý sự kiện.

Nhận của tôi
sách điện tử miễn phí

để chuẩn bị cho cuộc phỏng vấn kỹ thuật hoặc bắt đầu
Tìm hiểu JavaScript toàn ngăn xếp


Xem thêm những thông tin liên quan đến chủ đề cách gọi javascript trong html

The 'call' Method in JavaScript | Function Call Explained

  • Tác giả: dcode
  • Ngày đăng: 2018-03-19
  • Đánh giá: 4 ⭐ ( 6328 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The 'call' method in JavaScript (Function.prototype.call) allows you to call a function or method like normal with the extra functionality of specifying the value for this 'this' keyword - or the current object.

    It is similar to the 'apply' method in that it allows you to specify the value for 'this' however you pass in arguments separated by comma using the call method.

    In this video I take you through a simple example of the call method, showing you exactly what it does and being as simple as possible.

    For your reference, check this out:
    https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call

    Follow me on Twitter @dcode!

    If this video helped you out and you'd like to see more, make sure to leave a like and subscribe to dcode!

Cách gọi hàm JavaScript trong HTML

  • Tác giả: quachquynh.com
  • Đánh giá: 4 ⭐ ( 9505 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

DOM HTML trong javascript

  • Tác giả: toidicode.com
  • Đánh giá: 4 ⭐ ( 2649 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sau khi đã tìm kiếm được các thẻ HTML trong javascript thì giờ chúng ta sẽ cùng đi tìm hiểu các hàm tác động vào nó. Cụ thể bài này chúng ta sẽ tìm hiểu các hàm lấy ra giá trị của các thẻ HTML đó.

Hướng dẫn gọi hàm javascript trong html mới nhất 2020

  • Tác giả: xaydungweb.vn
  • Đánh giá: 4 ⭐ ( 2132 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Gọi hàm javascript trong html là một trong những keyword được search nhiều nhất trên Google về chủ đề gọi hàm javascript trong html. Trong bài viết này, xaydungweb.vn sẽ viết bài viết Hướng dẫn gọi hàm javascript trong html mới nhất 2020.

Hướng dẫn gọi hàm javascript trong html mới nhất 2020

  • Tác giả: lamweb.vn
  • Đánh giá: 5 ⭐ ( 1595 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn gọi hàm javascript trong html mới nhất 2020

Sử dụng nút HTML để gọi hàm JavaScript

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 8919 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Có một số cách để xử lý các sự kiện với HTML / DOM. Không có…

Bài 03: Cách Nhúng (chèn) JavaScript Vào HTML

  • Tác giả: hocban.vn
  • Đánh giá: 3 ⭐ ( 6487 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Dưới đây mình sẽ lần lượt hướng dẫn bạn 03 cách để nhúng (chèn) JavaScript vào HTML. Tùy trường hợp mà bạn sẽ vận dụng cách tương ứng.

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Tạo bảng bằng JavaScript - thêm vào bảng javascript