Tự học JavaScript căn bản cho website, khái niệm về javaScript cần biết

Thảo luận trong 'Lập trình Javascript, js' bắt đầu bởi admin, 19/5/14.

  1. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,900
    Đã được thích:
    1,199
    Điểm thành tích:
    113
    Giới tính:
    Nam
    JavaScript là ngôn ngữ kịch bản của trang Web.


    JavaScript được dùng trong hàng triệu trang web để thêm chức năng, kiểm tra dữ liệucủa form, nhận biết các trình duyệt, và nhiều hơn thế nữa.
    JavaScript là ngôn ngữ kịch bản phổ biến nhất trên internet, nó hoạt động trong tất cả các trình duyệt lớn, chẳng hạn như Internet Explorer, Firefox, Chrome, Opera,và Safari.
    Trước khi bạn tìm hiểu về javascript, bạn nên có một sự hiểu biết cơ bản về các ngôn ngữ HTML / XHTML

    1. JavaScript là gì?


    • JavaScript được thiết kế để thêm tương tác với các trang HTML.
    • JavaScript là một ngôn ngữ kịch bản.
    • Một ngôn ngữ kịch bản là một ngôn ngữ lập trình nhẹ.
    • JavaScript thường được nhúng trực tiếp vào các trang HTML.
    • JavaScript là một ngôn ngữ thông dịch (có nghĩa là các tập lệnh thực thi mà khôngcần biên dịch sơ bộ).
    • Mọi người đều có thể sử dụng JavaScript mà không cần mua một giấy phép.
    2. Có phải Java và JavaScript là như nhau?

    - Câu trả lời là : Không!
    - Java và JavaScript là hai ngôn ngữ hoàn toàn khác nhau trong cả hai khái niệm và thiết kế!
    - Java (được phát triển bởi Sun Microsystems) là ngôn ngữ lập trình mạnh mẽ và phức tạp hơn - trong cùng thể loại như C và C + +.
    JavaScript có thể làm gì?

    • JavaScript cho người thiết kế HTML một công cụ lập trình – Người sử dụng HTML thông thường không phải là lập trình viên, nhưng JavaScript là một ngôn ngữ kịch bản với một cú pháp rất đơn giản. Hầu như bất cứ ai có thể đặt vài mẫu code Javascriptvào các trang HTML của họ
    • JavaScript có thể đặt một đoạn text động vào trang HTML - Một câu lệnh như thế này: document.write ( "<h1>" + name + "</h1>#")có thể ghi một chuỗi từ biến name vào trang HTML(kèm theo định dạng là <h1>)
    • JavaScript có thể bắt các sự kiện - JavaScript có thể được thiết lập để thực hiện khi một vài thứ diễn ra, ví dụ như khi một trang đã hoàn tất tải hoặc khi người dùng nhấp vào một phần tử HTML, v.v…
    • JavaScript có thể đọc và viết các phần tử HTML - JavaScript có thể đọc và thay đổi nội dung của một phần tử HTML
    • JavaScript có thể được dùng để xác nhận dữ liệu - JavaScript có thể được dùng để xác nhận dữ liệu mẫu trước khi nó được gửi lên máy chủ. Điều này giúp tiết kiệm tài nguyên xử lý của máy chủ.
    • JavaScript có thể được sử dụng để nhận biết các trình duyệt của khách truy cập- JavaScript có thể được sử dụng để phát hiện các trình duyệt của khách truy cập,và tùy thuộc vào trình duyệt, ta có thể tải một trang được thiết kế riêng cho trìnhduyệt đó.
    • JavaScript có thể được sử dụng để tạo cookies - JavaScript có thể được dùng để lưu trữ và lấy các thông tin trên máy tính của khách truy cập.
      • Ví dụ dưới đây cho thấy cách sử dụng JavaSript để viết văn bản trên một trang web:
    <html>
    <body>
    <script type="text/javascript">
    document.write("Hello World!");​
    </script>
    </body>
    </html>

    • Ví dụ dưới đây cho thấy làm thế nào để thêm các thẻ HTML vào JavaScript:
    <html>
    <body>
    <script type="text/javascript">
    document.write("<h1>Hello World!</h1>");​
    </script>
    </body>
    </html>

    3. Giải thích ví dụ ở trên

    Để chèn một mã JavaScript vào một trang HTML, ta sử dụng <script> tag. Bên trong<script> thẻ ta sử dụng các loại thuộc tính để xác định ngôn ngữ kịch bản.
    Vì vậy, các <script type="text/javascript"> và </script> cho biết nơi JavaScript bắt đầu và kết thúc:
    <html>
    <body>
    <script type="text/javascript">
    ... nơi viết code javascript​
    </script>
    </body>
    </html>
    Lệnh Document.write là một lệnh JavaScript chuẩn để xuất ra một trang.

    • Bằng cách nhập lệnh document.write giữa thẻ <script> và </script>#, trình duyệt sẽ nhận biết nó như là một lệnh JavaScript và thực thi các dòng mã. Trong trường hợp này, trình duyệt sẽ viết vào trang từ "Hello World!"
    <html>
    <body>
    <script type="text/javascript">
    document.write("Hello World!");​
    </script>
    </body>
    </html>
    Lưu ý: Nếu ta đã không dùng thẻ <script>, trình duyệt sẽ coi đối xử với document.write ( "Hello World!") như là dạng văn bản thuần túy, và chỉ cần viết dòng trên vào trang web mà không cần xử lý. Làm thế nào giải quyết với các trình duyệt đơn giản? Trình duyệt không hỗ trợ JavaScript, sẽ hiển thị JavaScript như một phần của nội dung trang (text thuần túy).
    Để ngăn cản chúng làm điều này, là một phần của chuẩn JavaScript, HTML thẻ ghi chú nên được sử dụng để "ẩn" của JavaScript.
    Chỉ cần thêm một thẻ chú HTML <!-- trước khi câu lệnh JavaScript đầu tiên!, Và một dấu --> (hết ghi chú) sau câu lệnh JavaScript cuối, như thế này:
    <html>
    <body>
    <script type="text/javascript">
    <!--
    document.write("Hello World!");​
    //-->
    </script>
    </body>
    </html>
    Hai dấu xuyệt trước dòng ghi chú cuối (//) là ký hiệu ghi chú của Javascript. Nó ngăn chặn Javascript thực thi thẻ -->
    JavaScripts trong một trang sẽ được thực thi ngay lập tức trong khi trang tải vào trình duyệt. Đây không phải là những gì ta luôn luôn muốn. Đôi khi chúng ta muốn thực thi một kịch bản khi tải trang, khi khác lại muốn thực thi người dùng kích hoạt một sự kiện.

    Kịch bản trong thẻ <head>

    • Script sẽ được thực hiện khi chúng được gọi, hoặc là khi một sự kiện được kích hoạt.
    • Nếu bạn đặt một đoạn mã trong head, bạn sẽ đảm bảo rằng kịch bản được tải trước khi bất cứ ai sử dụng nó.
    • Ví dụ:
    <html>
    <head>
    <script type="text/javascript">
    function message() {
    alert("This alert box was called with the onload event");
    }​
    </script>
    </head>
    <body# onload="message()">
    </body>
    </html>

    Kịch bản trong thẻ <body>

    • Kịch bản để được thực hiện khi tải trang.
    • Nếu bạn đặt một kịch bản trong phần body, nó tạo ra những nội dung của trang.
    • Ví dụ:
    <html>
    <head>
    </head>
    <body>
    <script type="text/javascript">
    document.write("This message is written by JavaScript");​
    </script>
    </body>
    </html>

    Kịch bản trong thẻ <head> và <body>

    • Bạn có thể đặt một số lượng không giới hạn các script trong tài liệu của bạn, bạncó thể để script trong cả body và head.
    <html>
    <head>
    <script type="text/javascript">
    ....​
    </script>
    </head>
    <body>
    <script type="text/javascript">
    ....​
    </script>
    </body>

    Sử dụng JavaScript ngoài

    • Nếu bạn muốn chạy một đoạn JavaScript trên nhiều trang, không cần viết kịch bản tương tự trên mỗi trang, bạn có thể viết đoạn JavaScript đó trong một tập tin bênngoài.
    • Lưu tập tin JavaScript bên ngoài này với phần mở rộng là .js.
    • Lưu ý: Các kịch bản bên ngoài không thể chứa các thẻ <script>!
    • Để sử dụng các tập tin mở rộng bên ngoài, trỏ đường dẫn đến tập tin thông qua thuộc tính src của thẻ <script>
    • Ví dụ:
    <html>
    <head>
    <script type="text/javascript" src="xxx.js"></script>
    </head>
    <body>
    </body>
    </html>


    • Một phát biểu JavaScript là một lệnh đến trình duyệt. Mục đích của lệnh này là để cho trình duyệt biết nó phải làm gì.
    • Phát biểu sau yêu cầu trình duyệt viết từ "Hello Dolly" lên trang web:
    document.write("Hello Dolly");

    • Có một điều bình thường là ta thêm một dấu chấm phẩy ở cuối mỗi phát biểu. Hầu hết mọi người nghĩ rằng đây là đúng cú pháp lập trình, và các trang web đều làm như vậy.
    • Các dấu chấm phẩy là tùy chọn (theo tiêu chuẩn JavaScript), nếu không có chấm phẩy, kết thúc một dòng sẽ là kết thúc một phát biểu. Tôi phải nói với bạn điều này bởi một số ví dụ bạn bắt gặp không dùng dấu chấm phẩy. Đương nhiên, nếu muốn viết nhiều phát biểu trên cùng một hàng, dấu chấm phẩy khi kết thúc một phát biểu thật là tiện lợi.
    Kịch bản JavaScript

    • Mã JavaScript (hoặc ta chỉ cần gọi là JavaScript) là một chuỗi các câu lệnh JavaScript.
    • Mỗi một phát biểu được thi hành bởi trình duyệt trong trình tự khi ghi.(trên xuống dưới)
    • Ví dụ này sẽ viết một heading và hai paragraphs tới một trang web:
    <script type="text/javascript">
    document.write("<h1>This is a heading</h1>");
    document.write("This is a paragraph.");
    document.write("This is another paragraph.");
    </script>

    Khối Javascript

    • Các câu lệnh JavaScript có thể được nhóm lại với nhau trong khối.
    • Khối bắt đầu bằng dấu "{" và kết thúc bằng một dấu "{"
    • Mục đích của khối là để tạo ra một chuỗi các câu lệnh thực hiện cùng nhau.
    • Ví dụ này sẽ vVí dụ này sẽ viết một tiêu đề và hai đoạn tới một trang web:

    <script type="text/javascript">
    {
    document.write("<h1>This is a heading</h1>");
    document.write("
    This is a paragraph.
    ");
    document.write("This is another paragraph.");
    }
    </script>


    • Ví dụ trên không phải là hữu ích. Nó chỉ chứng tỏ việc sử dụng một khối. Bình thường, một khối được sử dụng để liên kết các phát biểu với nhau trong một hàm hoặc trong một điều kiện (trong đó một nhóm phát biểu cần được thực thi nếu một điều kiện được đáp ứng).
    • Bạn sẽ tìm hiểu thêm về chức năng và điều kiện trong chương sau.
    Ghi chú trong Javascript

    • Ghi chú có thể được thêm vào để giải thích phát biểu JavaScript, hoặc để làm cho mã dễ đọc hơn.
    • Ghi chú trên một dòng bắt đầu với //. Ví dụ sau sử dụng ghi chú trên một dòng để giải thích đoạn code:
    <script type="text/javascript">
    // Write a heading
    document.write("<h1>This is a heading</h1>");
    // Write two paragraphs:
    document.write("This is a paragraph.");
    document.write("This is another paragraph.");
    </script>

    • Ghi chú trên nhiều dòng
    • Ghi chú trên nhiều dòng bắt đầu với /* và kết thúc bằng */.
    • Ví dụ sau sử dụng ghi chú trên nhiều dòng để giải thích đoạn code:
    <script type="text/javascript">
    /*
    The code below will write
    one heading and two paragraphs
    */
    document.write("<h1>This is a heading</h1>");
    document.write("This is a paragraph.");
    document.write("This is another paragraph.");​
    </script>

    Sử dụng ghi chú để ngăn chặn việc thực thi

    • Trong ví dụ sau ghi chú được sử dụng để ngăn chặn việc thực hiện của một dòng mã lệnh (có thể thích hợp cho việc gỡ lỗi):
    <script type="text/javascript">
    //document.write("<h1>This is a heading</h1>");
    document.write("This is a paragraph.");
    document.write("This is another paragraph.");​
    </script>


    • Trong ví dụ sau ghi chú được sử dụng để ngăn chặn việc thực hiện một khối lệnh (có thể thích hợp cho việc gỡ lỗi)
    <script type="text/javascript">
    /*
    document.write("<h1>This is a heading</h1>");
    document.write("
    This is a paragraph.
    ");
    document.write("
    This is another paragraph.
    ");
    */​
    </script>

    Sử dụng ghi chú cuối dòng

    • Trong ví dụ bên dưới, ghi chú được đặt ở cuối dòng
    <script type="text/javascript">
    document.write("Hello"); // Write "Hello"
    document.write(" Dolly!"); // Write " Dolly!"​
    </script>

    Cảm ơn các bạn đã đọc bài viết tại ITSEOVN về javaScript.
     
    Cảm ơn đã xem bài:

    Tự học JavaScript căn bản cho website, khái niệm về javaScript cần biết

  2. toyota
    Tham gia ngày:
    15/5/14
    Bài viết:
    12
    Đã được thích:
    0
    Điểm thành tích:
    0
    Bài viết khá chi tiết cho người mới học javascript
    Thanks add.
     
  3. mcbooks
    Tham gia ngày:
    27/8/14
    Bài viết:
    21
    Đã được thích:
    0
    Điểm thành tích:
    1
    Bài viết tốt cho người mới bắt đầu như mình, hi vọng có thêm những bài chuyên sâu hơn nữa.
     
  4. admin
    Tham gia ngày:
    22/5/13
    Bài viết:
    4,900
    Đã được thích:
    1,199
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Ok, mình sẽ viết thêm nhiều tài liệu.