Sau mấy lời giới thiệu dài dòng về lập trình nói chúng và JavaScript nói riêng, bây giờ là lúc chúng ta tiếp xúc với những thứ cụ thể hơn. Trước hết, để bắt đầu, chúng ta cần chuẩn bị một môi trường làm việc phù hợp với đầy đủ các điều kiện cần thiết.

1 giải pháp tiện lợi và nhanh chóng để bắt đầu lập trình với JS là sử dụng những công cụ trực tuyến có săn trên mạng. Đấy là những trang web cho phép chúng ta viết mã HTML/CSS/JavaScript và hiển thị trực tiếp kết quả đạt được ngay bên cạnh. Tôi đang nhắc đến những trang web kiểu như JSFiddle, JS Bin hay CodePen, vv…

Những trang web trên rất hữu ích khi chúng ta muốn thử nghiệm và chia sẻ các đoạn mã. Dù vậy, đôi khi việc cài đặt 1 máy tính riêng để có 1 môi trường làm việc thoải mái cũng có những ưu điểm của nó.

Trình duyệt web là 1 phần mềm dùng để hiển thị các trang web. Đây chính là các phần mềm mà chúng ta sử dụng khi lướt web hằng ngày. Tất cả các máy tính cá nhân hiện này, dù là máy bàn, máy xách tay hay các thiết bị di động như điện thoại hay máy tính bảng đều tích hợp ít nhất 1 trình duyệt trong hệ điều hành của mình. Những trình duyệt nổi tiếng nhất phải kể đến là Firefox, Chrome và Internet Explorer. Tuy nhiên, bên cạnh đó thì các bạn cần biết là vẫn còn rất nhiều trình duyệt khác.

Nếu trên máy các bạn chưa có cài đặt Firefox thì các bạn có thể tải về và bắt đầu cài từ trang web chính thức của trình duyệt này. Nếu đã cài rồi, hãy đảm bảo nó đã được cập nhật đến những phiên bản mới nhất.

Đây là hình ảnh của Firefox.

Như tất cả các trình duyệt khác, Firefox có khả năng thực thi mã JavaScript. Chúng ta sẽ sử dụng nó để thử nghiệm chương trình JS mà chúng ta sẽ viết ra. Trình duyệt này cũng đồng thời cung cấp rất nhiều công cụ hữu ích cho việc lập trình web mà chúng ta sẽ thường xuyên sử dụng trong giáo trình này. Các bạn có thể mở ra chúng bằng cách ấn phím F12 trên bàn phím.

Giao diện của các công cụ này có thể mang nền sáng hoặc tối tùy theo sở thích của các bạn. Chúng ta cũng có thể thay đổi cỡ chữ hiển thị trong đó. Mục tiêu là có 1 bộ công cụ hỗ trợ với giao diện dễ nhìn nhất vì chúng ta sẽ phải dùng đến chúng rất nhiều.

Như chúng ta đã biết, lập trình tin học thực chất là công việc viết những dòng lệnh thực thị vào các tệp tin mã nguồn. Vậy nên bất kỳ phần mềm nào cho phét soạn thảo văn bản đều có thể sử dụng để viết các chương trình. Nói là vậy nhưng trong số đó vẫn có 1 số chương trình mang đến chi lập trình viên những trợ giúp quý báu hơn những phần mềm khác. Một vài trong số chúng không chỉ cho phép chúng ta viết mã mà còn có thể giúp trong việc kiểm tra và phân phối chương trình. Chúng ta gọi chúng là các IDE (Integrated Development Environment). Những IDE nổi tiếng nhất có thể kể đến là Eclipse, WebStorm và Visual Studio.

Trong giáo trình này, chúng ta sẽ hài lòng với việc sử dụng 1 trình soạn thảo văn bản « đơn giản », dễ sử dụng. Những tên tuổi nổi bật đáng chú ý trong mảng này là Sublime Text, Atom và Brackets. Ở đây chúng ta sẽ sử dụng Brackets.

Brackets là trình soạn thảo văn bản mã nguồn mở của Adobe, hoạt động trên nền Windows, Mac OSX và Linux. Nó chuyên được sử dụng trong lĩnh vực lập trình web vì sở hữu nhiều tính năng rất hữu dụng để viết mã HTML, CSS, JavaScript. Bản thân nó cũng được viết bởi những ngôn ngữ này.

Các bạn có thể tải Brackets từ trang chủ của phần mềm này. Cài đặt xong và chúng ta sẽ sẵn sàng để bắt tay vào lập trình web.

Giao diện của Brackets hoàn toàn có thể thay đổi được. Để thay đổi gam màu nền chủ đạo, chúng ta chỉ cần tùy chỉnh lựa chọn trong. Về phần bản thân tôi thì tôi cảm thấy phong cách Dark có lẽ làm dễ nhìn nhất.

Mặc định thì Brackets sẽ phân tích trực tiếp các tệp JavaScript nhờ công cụ JSLint. Công cụ này khá hữu ích lúc chúng ta cần sửa lỗi nhưng đôi khi cũng đưa ra những chỉ dẫn khá mơ hồ. Brackets vì thế cũng cho phép chúng ta bỏ tùy chọn này.

Cuối cùng, các bạn có thể thêm vào cho Brackets 1 chức năng mở rộng cho phép căn chỉnh mã nguồn cho dễ nhìn. Chức năng mở rộng này tên là Beautify. Chúng ta có thể trực tiếp cài đặt nó từ bộ quản lý chức năng mở rộng.

Gần xong rồi ! Bây giờ, các bạn gần như đã sẵn sàng để bước những bước đầu tiên trên con đường lập trình. Bước cuối cùng cần chuẩn bị chỉ còn là học cách sắp xếp và tổ chức các tệp mã nguồn của chúng ta để dễ tìm kiếm và làm việc thay vì lưu mỗi tệp 1 nơi trên máy tính. Sự ngăn nắp (ít nhất là trên máy tính) kể ra cũng là 1 đức tính tốt của các lập trình viên đấy.

Trên máy tính của chúng ta, hãy tạo ra 1 thư mục tên là intro-javascript và lưu lại ở 1 vị trí nào đấy. Đây sẽ là nơi chúng ta lưu lại tất cả các tệp được sử dụng trong giáo trình này. Tiếp đó, bên trong thư mục trên, tạo ra thư mục chuong-1 để lưu toàn bộ các tệp được nhắc tới trong chương này của giáo trình. Cuối cùng, bên trong chuong-1, hãy tạo ra 2 thư mục con tên là js và html.

Bây giờ, chúng ta sẽ tạo ra 1 tệp là baihoc.js, lưu nó vào trong thư mục js và mở nó bằng Brackets. Trong phần nội dung của tệp, chúng ta sẽ thêm vào dòng lệnh sau.

console.log("Xin chao JavaScript !");

! Phần mở rộng .js dùng để chỉ ra là trong nội dung tệp chứa mã nguồn JavaScript. Tất cả các tệp mã nguồn JS của chúng ta sẽ sử dụng phần mở rộng này.

Bước tiếp theo, hãy tạo ra tệp baihoc.html trong thư mục html và đưa nội dung sau vào trong đó.

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Giới thiệu về JavaScript</title>
</head>
<body>
    <script src="../js/baihoc.js"></script>
</body>
</html>

Đừng lo lắng nếu các bạn hoàn toàn không hiểu mình vừa làm gì ! Đây chỉ là 1 trang web đơn giản viết bằng HTML dùng để minh họa cho giáo trình thôi.

! Dù việc cắt dán đoạn mã trên thì tốn ít thời gian hơn nhưng nếu các bạn hoàn toàn chưa biết gì về lập trình thì tôi đề nghị chúng ta nên tự tay gõ lại đoạn mã. Việc này giúp chúng ta có thể dễ dàng ghi nhớ cú pháp của ngôn ngữ cũng như học cách tự chủ khi viết mã.

HTML không phải là 1 ngôn ngữ lập trình mà là 1 ngôn ngữ để trình bày nội dung. Về cơ bản, 1 trang HTML sẽ chứa các « thẻ » cho phép chúng ta hiển thị nội dung 1 cách có hệ thống.

Trang web mà chúng ta dùng làm ví dụ bên trên hơi có chút đặc biệt bởi nó không chứa bất cứ nội dung nào có thể hiển thị trên trình duyệt. Nhiệm vụ của nó chỉ là thông báo cho trình duyệt vị trí tệp mã nguồn JS mà chúng ta muốn thực thi nhờ thẻ <script>.  Vị trí này được chỉ ra bởi 1 đường dẫn src="../js/baihoc.js". Dấu .. dùng để thể hiện thư mục cha của thư mục chứa tệp HTML. Vậy nên khi chúng ta cố gắng hiển thị trang baihoc.html thì mã nguồn trong tệp baihoc.js được chỉ tới bởi đường dẫn sẽ được thực thi.

Khi chúng ta hiển thị 1 trang web trong trình duyệt thì nội dung trang web sẽ được hiển thị trong cửa sổ chính và mã JS thì được thực thi trong cửa sổ lệnh của trình duyệt.

Để chạy thử chương trình chúng ta vừa viết, hãy mở tệp HTML mà chúng ta đã lưu trong trình duyệt. Các bạn sẽ thấy như tôi đã nói là không có gì được hiển thị và chúng ta nhận được 1 trang web hoàn toàn trắng tinh. Thế nhưng, nếu chúng ta mở cửa sổ dòng lệnh của trình duyệt thông qua công cụ hộ trợ lập trình thì thông điệp "Xin chao JavaScript !" đã được hiển thị rõ ở đấy. Điều này chứng tỏ là trình duyệt đã thực thi đúng tệp mã nguồn JS mà chúng ta yêu cầu. Chúng ta thậm chí có thể xem nội dung đoạn mã được thực thi bằng cách ấn vào thẻ « Debugger » của công cụ hỗ trợ.

Nếu các bạn cũng nhận được kết quả tương tự thì xin được nâng ly chúc mừng. Vì sao ư ? Thứ nhất là môi trường lập trình của các bạn đã sẵn sàng để làm việc. Và thứ 2, quan trọng hơn, đó là chúng ta đã bắt đầu biết viết được những dòng mã JavaScript đầu tiên.