Bài 1: Javascript là gì? Viêt ứng dụng javascript đầu tiên

0

1. Javascript là gì?

Javascript là một ngôn ngữ lập trình kịch bản dự vào đối tượng phát triển có sẵn hoặc tự định nghĩa ra, javascript được sử dụng rộng rãi trong các ứng dụng Website. Javascript được hỗ trợ hầu như trên tất cả các trình duyệt như Firefox, Chrome, … thậm chí các trình duyệt trên thiết bị di động cũng phải hỗ trơ nó.

Nếu bạn đã biết qua về HTML5 thì bạn thấy có các khái niệm như sessionStore hay localStore, đây là hai đối tượng được tạo nên từ Javascript nên rõ ràng trong HTML5 cũng có sử dụng nó. Với những ứng dụng đó thì bạn thấy javascript không thể chết trong các ứng dụng website được.

Hay thậm chí có những ứng dụng Webgame người ta sử dụng javascript để xử lý các thao tác trên Client, nếu không có nó thì thông thường chọn Flash để xây dựng nhưng lại gặp vấn đề load chậm nên có một số người chọn Javascript để làm.

2. Các thư viện Javascript đình đám hiện nay

Những ứng dụng to lớn của Javascript khiến người ta không thể quên nó được. Hiện nay có rất nhiều libraries, Framework được viêt như:

  • AngularJS: Một thư viện dùng để xây dựng ứng dụng Single Page
  • NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng dụng realtime
  • Sencha Touch: Một Framework  dùng để xây dựng ứng dụng Mobile
  • ExtJS: Một Framework dùng xây dựng ứng dụng quản lý (Web Applications)
  • jQuery: Một thư viện rất mạnh về hiểu ứng

3. Viết chương trình javascript đầu tiên

Qua khái niệm javascript là gì? thì bạn thấy tất cả các trình duyệt đều hỗ trợ nên ta không cần phải download thư viện gì cả mà thông qua những đoạn mã script giúp trình duyệt nhận diện được đó là javascript.

Cặp thẻ <script language=”javascript”></scipt>

Tất cả những đoạn mã Javascript đều phải đặt trong cặp thẻ script như trên, ví dụ:

 

1
2
3
<script language="javascript">
    alert("Hello World!");
</script>

 

Đặt thẻ script javascript ở đâu?

Có ba cách đặt sau đây:

Internal – viết trong file html hiện tại

Thông thường chúng ta sẽ viết những đoạn mã javascript trên phần head, tuy nhiên đó không phải là điều kiện bắt buộc, nghĩa là bạn có thể đặt ở đâu tùy thích miễn là những đoạn mã đó phải được bao lại bằng thẻ script.

Ví dụ đặt trong thẻ head:

 

1
2
3
4
5
6
7
8
9
10
11
<html>
    <head>
        <title></title>
        <script language="javascript">
            alert("Hello World!");
        </script>
    </head>
    <body>
        
    </body>
</html>

Ví dụ đặt trong thẻ body: 

 

 

1
2
3
4
5
6
7
8
9
10
<html>
    <head>
        <title></title>
    </head>
    <body>
        <script language="javascript">
            alert("Hello World!");
        </script>
    </body>
</html>

 

External – viết ra một file js khác rồi import vào

Hoặc bạn viết những đoạn mã javascript ở một file có phần mở rộng là .js, sau đó dùng thẻ script để import vào (giống CSS vậy). Ví dụ file JS của mình có tên là demo.js thì lúc này mình import vào như sau:

 

1
<script language="javascript" src="demo.js"></script>

Lúc này bên trong file demo.js bạn không đặt thẻ scirpt nữa nhé vì nó là file .js rồi nên trình duyệt tự nhận diện mã JS

 

Inline  – viết trực tiếp trong thẻ HTML

Inline nghĩa là bạn sẽ viết những đoạn mã Javascript trực tiếp trong thẻ HTML luôn. ví dụ dưới đây viết inline  vì đoạn alert(1) được đặt trong sự kiện onclick.

 

1
<input type="button" onclick="alert(1)" value="Click Me"/>

 

Viết chương trình Hello World!

XEM DEMO

Bước 1: Bây giờ chúng ta thực hành nhé, bạn hãy tạo một file index.html và lưu tại bất kì vị trí nào, desktop hay ổ D, ổ C gì đó thì tùy bạn, miễn là phần mở rộng là .html và gõ nội dung sau vào:

 

1
2
3
4
5
6
7
8
<html>
    <head>
        <title></title>
    </head>
    <body>
        <input type="button" value="Click Me"/>
    </body>
</html>

Chạy lên bằng Firefox hoặc Chrome bạn thấy xuất hiện một button. Bây giờ ta sẽ viết ứng dụng khi click vào button đó thì sẽ xuất hiện một thông báo Hello World nhé. Nhưng có lưu ý với bạn là button đó mình có đặt id=clickme

 

Bước 2: Viết javascript khi click vào button có id=clickme thì thông báo lên màn hình.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
    <head>
        <title></title>
    </head>
    <body>
        <input type="button" id="clickme" value="Click Me"/>
        <script language="javascript">
        
        // Lấy element có id=clickme lưu vào biến button
        var button = document.getElementById('clickme');
        
        // Khi click vào element chứa trong button thì thực hiện một function,
        // bên trong function thông báo lên Hello World!
        button.addEventListener('click', function(){
            alert('Hello World!');
        });
        </script>
    </body>
</html>

 

Lưu ý là bạn phải đặt đoạn mã javascript bên dưới button như trong demo nhé, nếu bạn đặt ở trên là sẽ bị lỗi đấy, lý do tại sao thì trong các    bài tiếp theo mình sẽ giải thích.

Vậy là xong rồi đấy cheeky bây giờ thì bạn biết javascript là gì? rồi phải không nào.

Nguồn:freetuts.net

Share.

About Author

Leave A Reply