Hướng dẫn hello world javascript html

Code ví dụ JavaScript Hello World.

Code ví dụ JavaScript Hello World với trình duyệt web

Tạo file hello.html với nội dung sau:

JavaScript Hello




 

Bạn chỉ cần quan tâm tới những dòng lệnh trong thẻ  vì nó chính là JavaScript, còn lại chính là phần để hiển thị.

Lệnh console.log('hello world') thực hiện in ra màn hình console của trình duyệt dòng chữ hello world

Mở file hello.html trên bằng trình duyệt web (web browser). Trong ví dụ này mình sử dụng Chrome:

Sau đó ấn F12 để xem màn hình console của trình duyệt web, kết quả:

Code ví dụ JavaScript Hello World với Node.js

Tạo file javascript hello.js với nội dung sau:

console.log('hello word')

Node.js chạy trực tiếp các file javascript chứ không cần thông qua các file html và trình duyệt web.

Mở giao diện dòng lệnh (cmd/powershell trên window hay terminal trên linux) và chạy lệnh node hello.js

Kết quả:

Okay, Done!

Hãy tạo một một ô textbox và một button, sau đó xử lý sự kiện khi click vào button thì xuất một thông báo lên trình duyệt với nội dung thông báo là giá trị của ô textbox, bài tập này khá đơn giản giúp bạn làm quen với ngôn ngữ Javascript.

Bài giải

-------------------- ######## --------------------

Ở phần lý thuyết mình đã có làm một ví dụ tương tự rồi, tuy nhiên nội dung xuất thông báo do mình tự gán vào luôn chứ không phải lấy từ ô textbox.

Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Hướng dẫn

Để giải được bài này thì bạn cần phải biết một số cú pháp Javascript sau:

Để lấy giá trị của ô textbox theo ID thì bạn sử dụng đoạn code sau:

var value = document.getElementById('id_textbox').value;

Bài viết này được đăng tại [free tuts .net]

Để xử lý sự kiện click vào button thì bạn sử dụng cú pháp sau:

var button = document.getElementById('id_button');

button.addEventListener('click', function(){
    // Code xử lý khi click
});

Cuối cùng là dùng hàm alert để in thông báo lên trình duyệt.

Tạm thời các bạn đừng thắc mắc những đoạn code này ở đâu ra, nó sẽ được mình giới thiệu ở các bài tiếp theo.

Bài giải

Trước tiên bạn tạo một file index.html với nội dung như sau:

Bây giờ chúng ta sẽ viết Javascript nằm trong cặp thẻ script nhé. Bạn hãy bổ sung một đoạn mã Javascript như sau:

var button = document.getElementById('id_button');

button.addEventListener('click', function(){
    var value = document.getElementById('id_textbox').value;
    alert(value);
});

Sau đó các bạn hãy chạy file index.html để xem thành quả nhé.

Full code cho bài này:

Full code cho bài học RUN

Chúc bạn học tốt.

Bài tập thực hành

• Có nên học Javascript không?
• Dùng phần mềm gì viết mã Javascript?
• Viết chương trình Hello World trong Javascript
• Đưa ra ví dụ ba cách viết mã Javascript
• Nên viết mã Javascript ở đâu thì tốt?
• Hãy nêu quá trình biên dịch của Javascript

Cùng chuyên mục: