JavaScript, theo phiên bản hiện hành, là một ngôn ngữ lập trình kịch bản dựa trên đối tượng được phát triển từ các ý niệm nguyên mẫu. Ngôn ngữ này được dùng rộng rãi cho các trang web, nhưng cũng được dùng để tạo khả năng viết script sử dụng các đối tượng nằm sẵn trong các ứng dụng. Nó vốn được phát triển bởi Brendan Eich tại Hãng truyền thông Netscape với cái tên đầu tiên Mocha, rồi sau đó đổi tên thành LiveScript, và cuối cùng thành JavaScript. Giống Java, JavaScript có cú pháp tương tự C, nhưng nó gần với Self hơn Java. .js là phần mở rộng thường được dùng cho tập tin mã nguồn JavaScript.
Phiên bản mới nhất của JavaScript là phiên bản 1.5, tương ứng với ECMA-262 bản 3. ECMAScript là phiên bản chuẩn hóa của JavaScript. Trình duyệt Mozilla phiên bản 1.8 beta 1 có hỗ trợ không đầy đủ cho E4X - phần mở rộng cho JavaScript hỗ trợ làm việc với XML, được chuẩn hóa trong ECMA-357.
Cùng thời điểm Netscape bắt đầu sử dụng công nghệ Java trên trình duyệt Netscape, LiveScript đã được đổi tên thành JavaScript để được chú ý hơn bởi ngôn ngữ lập trình Java lúc đó đang được coi là một hiện tượng. JavaScript được bổ sung vào trình duyệt Netscape bắt đầu từ phiên bản 2.0b3 của trình duyệt này vào tháng 12 năm 1995. Trên thực tế, JavaScript không được phát triển dựa từ Java. Do đó JavaScript chỉ dựa trên các cách đặt tên của Java. Java Script gồm 2 mảng là client-server thực hiện lệnh trên máy của end-user và web-server.
Sau thành công của JavaScript, Microsoft bắt đầu phát triển JScript, một ngôn ngữ có cùng ứng dụng và tương thích với JavaScript. JScript được bổ sung vào trình duyệt Internet Explorer bắt đầu từ Internet Explorer phiên bản 3.0 được phát hành tháng 8 năm 1996.
DOM (Document Object Model), một khái niệm thường được nhắc đến với JavaScript trên thực tế không phải là một phần của chuẩn ECMAScript, DOM là một chuẩn riêng biệt có liên quan chặt chẽ với XML.
JavaScript là một ngôn ngữ lập trình dựa trên nguyên mẫu với cú pháp phát triển từ C. Giống như C, JavaScript có khái niệm từ khóa, do đó, JavaScript gần như không thể được mở rộng.
Cũng giống như C, JavaScript không có bộ xử lý xuất/nhập (input/output) riêng. Trong khi C sử dụng thư viện xuất/nhập chuẩn, JavaScript dựa vào phần mềm ngôn ngữ được gắn vào để thực hiện xuất/nhập.
Trên trình duyệt, rất nhiều trang web sử dụng JavaScript để thiết kế trang web động và một số hiệu ứng hình ảnh thông qua DOM. JavaScript được dùng để thực hiện một số tác vụ không thể thực hiện được với chỉ HTML như kiểm tra thông tin nhập vào, tự động thay đổi hình ảnh,... Ở Việt Nam, JavaScript còn được ứng dụng để làm bộ gõ tiếng Việt giống như bộ gõ hiện đang sử dụng trên trang Wikipedia tiếng Việt. Tuy nhiên, mỗi trình duyệt áp dụng JavaScript khác nhau và không tuân theo chuẩn W3C DOM, do đó trong rất nhiều trường hợp lập trình viên phải viết nhiều phiên bản của cùng một đoạn mã nguồn để có thể hoạt động trên nhiều trình duyệt. Một số công nghệ nổi bật dòng JavaScript để tương tác với DOM bao gồm DHTML, Ajax và SPA.
Bên ngoài trình duyệt, JavaScript có thể được sử dụng trong tập tin PDF của Adobe Acrobat và Adobe Reader. Điều khiển Dashboard trên hệ điều hành Mac OS X phiên bản 10.4 cũng có sử dụng JavaScript. Công nghệ kịch bản linh động (active scripting) của Microsoft có hỗ trợ ngôn ngữ JScript làm một ngôn ngữ kịch bản dùng cho hệ điều hành. JScript .NET là một ngôn ngữ tương thích với CLI gần giống JScript nhưng có thêm nhiều tính năng lập trình hướng đối tượng.
Mỗi ứng dụng này đều cung cấp mô hình đối tượng riêng cho phép tương tác với môi trường chủ, với phần lõi là ngôn ngữ lập trình JavaScript gần như giống nhau.
Khoảng trắng:
Dấu cách, tab và ký tự dòng mới sử dụng bên ngoài một chuỗi ký tự được gọi là khoảng trắng. Khác với C, khoảng trắng trong JavaScript có thể ảnh hưởng trực tiếp tới ý nghĩa của câu lệnh. Sử dụng phương pháp "tự động thêm dấu chấm phẩy", bất cứ một dòng JavaScript nào thích hợp sẽ được coi là một câu lệnh hợp lệ (giống như có dấu chấm phẩy trước ký tự dòng mới).
Tuy trong phần lớn trường hợp, dấu chấm phẩy trước khi kết thúc một dòng JavaScript là không cần thiết để đoạn mã nguồn hoạt động chính xác, lập trình viên nên sử dụng dấu chấm phẩy sau mỗi câu lệnh để đoạn mã nguồn dễ nhìn hơn. Ngoài ra, do đặc thù của JavaScript - chuyên dùng trên trang web, kích cỡ của đoạn mã nguồn là quan trọng, có một số phần mềm có thể làm giảm kích cỡ của đoạn mã nguồn JavaScript bằng cách bỏ đi những khoảng trắng không cần thiết, để những phần mềm này hoạt động chính xác, lập trình viên cần thêm dấu chấm phẩy vào cuối mỗi câu lệnh.
Chú giải:
Cú pháp chú giải của JavaScript giống với C++. Lập trình viên có thể chú giải trên nhiều dòng bằng cách bao bọc chú giải với /* và */ hoặc sử dụng // để chú giải từ vị trí // đến hết dòng.
Biến:
Trước khi sử dụng biến trong JavaScript, lập trình viên không nhất thiết phải khai báo biến. Có hai cách để định nghĩa biến trong JavaScript. Một là sử dụng cú pháp var để khai báo biến:
Ngoài ra, lập trình viên có thể chỉ việc gán cho biến một giá trị để sử dụng biến đó. Biến được định nghĩa ngoài tất cả các hàm hoặc được sử dụng mà không khai báo với cú pháp var sẽ được coi là biến toàn cục, những biến này có thể sử dụng trên toàn trang web. Biến được khai báo với var bên trong một hàm là biến cục bộ của hàm đó và chỉ có thể sử dụng được bên trong hàm đó.<script language="JavaScript">var tên_biến;</script>
Đối tượng:
Kiểu của JavaScript được chia ra làm hai loại: kiểu cơ bản và đối tượng. Đối tượng trong JavaScript là một thực thể có tên xác định và có thuộc tính trỏ đến giá trị, hàm hoặc cũng có thể là một đối tượng khác. Có nghĩa là, đối tượng trong JavaScript là một mảng kết hợp (associative array) tương tự như mảng trong PHP hay từ điển trong Python, PostScript hoặc Smalltalk.
JavaScript có một số đối tượng định nghĩa sẵn, bao gồm mảng (Array), đối tượng đại số Bool (Boolean), đối tượng ngày tháng (Date), đối tượng hàm (Function), đối tượng toán học (Math), đối tượng số (Number), đối tượng đối tượng (Object), đối tượng biểu thức tìm kiếm (RegExp) và đối tượng chuỗi ký tự (String). Các đối tượng khác là đối tượng thuộc phần mềm chủ (phần mềm áp dụng JavaScript - thường là trình duyệt).
Bằng cách định nghĩa hàm khởi tạo, lập trình viên có thể tạo đối tượng. JavaScript là một ngôn ngữ lập trình dựa trên nguyên mẫu do đó thừa kế diễn ra giữa các đối tượng, không phải giữa các lớp (JavaScript không hề có lớp). Đối tượng thừa kế thuộc tính từ các nguyên mẫu của chúng.
Lập trình viên có thể thêm hoặc xóa thuộc tính hoặc hàm trong đối tượng sau khi đối tượng đã được tạo. Để làm việc này cho tất cả các đối tượng được tạo từ cùng một hàm khởi tạo, lập trình viên có thể sử dụng thuộc tính prototype của hàm khởi tạo để truy cập đối tượng nguyên mẫu. Lập trình viên không nhất thiết phải tự xóa các đối tượng đã tạo, JavaScript tự động gom rác tất cả những biến không còn được dùng nữa.
<script language="JavaScript">function samplePrototype() {this.attribute1 = "someValue"; // thêm một thuộc tính cho đối tượngthis.attribute2 = 234; // thêm thuộc tính nữa cho đối tượngthis.function1 = testFunction; // thêm một hàm vào đối tượng}function testFunction() {alert(this.attribute2); //hiển thị 234}var sampleObject = new samplePrototype; // khởi tạo một đối tượngsampleObject.function1(); // gọi hàm function1 của đối tượng sampleObjectsampleObject.attribute3 = 123; // thêm một thuộc tính nữa cho đối tượng sampleObjectdelete sampleObject.attribute1; // xóa bỏ 1 thuộc tínhdelete sampleObject; // xóa bỏ đối tượng</script>
Cấu trúc dữ liệu:
Một cấu trúc dữ liệu tiêu điểm là mảng (Array), mảng trong JavaScript là một bảng liên kết chỉ mục đến giá trị. Trong JavaScript, tất cả các đối tượng đều có thể liên kết chỉ mục đến giá trị, nhưng mảng là một đối tượng đặc biệt có thêm nhiều tính năng xử lý chỉ mục và dữ liệu đặc biệt (ví dụ: push, join, v.v.)
Mảng trong JavaScript có thuộc tính length. Thuộc tính length của JavaScript luôn luôn lớn hơn số chỉ mục lớn nhất trong mảng một đơn vị. Trong phần lớn ngôn ngữ lập trình, những thuộc tính có tính năng như length thường là thuộc tính chỉ đọc, tuy nhiên, với JavaScript, lập trình viên có thể thay đổi thuộc tính length. Bằng cách thay đổi thuộc tính length, lập trình viên có thể làm mảng lớn hơn hoặc nhỏ hơn (và xóa đi những chỉ mục lớn hơn hoặc bằng thuộc tính length mới).
Mảng trong JavaScript là mảng rải rác, có nghĩa là cho dù lập trình viên có một mảng như sau:
Trong trường hợp này, dù mảng có đến chỉ mục mang số 100 thì mảng cũng chỉ chiếm bộ nhớ của hai số 0 và 5. Tuy nhiên, thuộc tính length sẽ có giá trị 101 do chỉ mục lớn nhất của mảng trong ví dụ trên là 100.<script language="JavaScript">var test = new Array();test[2] = 0;test[100] = 5;</script>
Một số ví dụ về mảng:
<script language="JavaScript">var test = new Array(10); // Tạo một mảng 10 chỉ mụcvar test2 = new Array(0,1,2,,3); // Tạo một mảng với bốn giá trị và 5 chỉ mụcvar test3 = new Array();test3["1"] = 123; // Hoàn toàn đúng cú pháp</script>
Lập trình viên cũng có thể định nghĩa cấu trúc bằng đối tượng như sau:
<script language="JavaScript">var myStructure = {name: {first: "Mel",last: "Smith"},age: 33,hobbies: [ "chess", "jogging" ]};</script>
<script language="JavaScript">if (biểu_thức_1){khối lệnh được thực hiện nếu biểu thức 1 đúng;}else if (biểu_thức_2){khối lệnh được thực hiện nếu biểu thức 2 đúng;}else{khối lệnh được thực hiện nếu cả hai biểu thức trên đều không đúng;}</script>
<script language="JavaScript">var x = prompt("Nhập vào giá trị của x:");x = parseFloat(x);if (!isNaN(x)) {if (x > 0){alert("x > 0");}else if (x == 0){alert("x = 0");}else{alert("x < 0");}}else{alert("giá trị bạn nhập không phải là một số");}</script>
<script language="JavaScript">điều_kiện ? biểu_thức_đúng : biểu_thức_sai;</script>
<script language="JavaScript">while (biểu_thức_điều_kiện) {khối lệnh cần thực hiện nếu biểu_thức_điều_kiện trả về true;}</script>
Ví dụ:<script language="JavaScript">do{khối lệnh;} while (biểu_thức_điều_kiện);</script>
<script language="JavaScript">while (0 > 1){alert("while"); // Câu lệnh này sẽ không bao giờ được thực hiện}do{alert("do ... while"); // Bạn sẽ nhận được thông báo do ... while một lần duy nhất} while (0 > 1);</script>
<script language="JavaScript">for (biểu_thức_khởi_tạo; biểu_thức_điều_kiện; biểu_thức_thay_đổi_giá_trị){Khối lệnh cần lặp;}</script>
<script language="JavaScript">for (biến in đối_tượng){khối lệnh cần thực hiện, có thể sử dụng đối_tượng[biến] để truy cập từng thuộc tính (phần tử) của đối tượng;}</script>
<script language="JavaScript">switch (biểu_thức_điều_kiện){case kết_quả_1 :khối lệnh cần thực hiện néu biểu_thức_điều_kiện bằng kết_quả_1;break;case kết_quả_2 :khối lệnh cần thực hiện néu biểu_thức_điều_kiện bằng kết_quả_2;break;default :khối lệnh cần thực hiện nếu biểu_thức_điều_kiện cho ra một kết quả khác;}</script>
<script language="JavaScript">function tên_hàm(đối_số_1, đối_số_2){các câu lệnh cần thực hiện mỗi khi hàm được gọi;return giá_trị_cần_trả_về;}tên_hàm(1, 2); // Gọi hàm tên_hàm với hai đối số 1 và 2 ứng với đối_số_1 và đối_số_2tên_hàm(1); // Gọi hàm tên_hàm với đối_số_1 có giá trị 1, đối_số_2 có giá trị undefined</script>
<script language="JavaScript">Array.prototype.fold =function (value, functor) {var result = value;for (var i = 0; i < this.length; i++) {result = functor(result, this[i]);}return result;}var sum = [1,2,3,4,5,6,7,8,9,10].fold(0, function (a, b) { return a + b })</script>
<script language="JavaScript">function() { thân hàm; }</script>
Hàm trên sẽ hiển thị thông báo khi một số phím trên bàn phím có thể gây sự kiện onkeypress được nhấn.<script language="JavaScript">document.onkeypress = function(e) {alert("Bạn vừa nhấn một phím trên bàn phím");}</script>
<script language="JavaScript">try{Khối lệnh cần thực hiện có thể gây lỗi;}catch (error){Khối lệnh cần thực hiện trong trường hợp có lỗi;}finally{Khối lệnh luôn được thực hiện;}</script>
Các Phương Pháp Nhúng Javascript Vào HTML:
Ngôn ngữ Javascript họat động tương tác với Ngôn ngữ HTML. Bởi vì chương trình dịch Mã Javascript đã được tích hợp vào Trình duyệt, do vậy cũng giống nhiều ngôn ngữ thiết kế Web khác (như CSS), Javascript cung cấp 3 phướng pháp chèn mã vào trang HTML như sau:
3 Phương pháp nhúng Javascript vào HTML:
Phương pháp 1: Nhúng trực tiếp trong trang HTML hoặc khai báo trong thành phần <Head></Head>-Heading Embed
Nhúng trực tiếp các đọan mã vào trang HTML.
Xem ví dụ:
Trong đó: <script language="javascript"> là khai báo ngôn ngữ scripting đang dùng. Thẻ này và khai báo này là bắt buộc trong trường hợp bạn sử dụng nhiều Scripting language trên cùng một trang. Phần khai báo: type="text/javascript" có thể có hoặc không, tùy theo ứng dụng đoạn codes này vào mục đích nào cho trang HTML(như trong trường hợp này là cho Text). Khai báo: <!-- dùng để che giấu script với các trình duyệt không hỗ trợ Javascript. Tuy vậy hầu hết các Trình duyệt mới đều hỗ trợ Jvascript để đáp ứng nhu cầu của Web. Và kế đến là các codes để chạy đoạn mã Javascript, trong ví dụ này là document.write("Hello, World!!!");, là một phương pháp viết text ra trình duyệt của Javascript. Khai báo: //--> để đóng khóa mở <!--. Trong trường hợp bạn không muốn che giấu Javascript thì bạn có thể bỏ hai khóa này.<html><head><title>Nhúng trong trang</title></head><body bgcolor="#FFFFF" text="#000000"><script language="javascript" type="text/javascript"><!--document.write("Hello, World!!!");//--></script></body></html>
Cuối cùng, để đóng đoạn mã, chúng ta dùng thẻ đóng: </script>
Một các nhúng khác là đặt trong thành phần <Head></Head>, như ví dụ dưới đây:
Xem ví dụ 2:
Đoạn Codes trên đây dùng để chận phím bên phải. Khi phím này click vào trang Web có chứa đọan mã này thì trình duyệt hiển thị cảnh báo "No DownLoad Please".
<head><script language="javascript" type="text/javascript">message = "No Download Please!";function NoRightClick(b) {if(((navigator.appName=="Microsoft Internet Explorer")&&(event.button > 1))||((navigator.appName=="Netscape")&&(b.which > 1))){alert(message);return false;}}document.onmousedown = NoRightClick;</script></head>
Phương pháp 2: Call an external file- Gọi một file từ ngòai.
Giả sử bạn có một tập tin Javascript dài và phức tạp và File này cần đặt trong tất cả các trang HTML hoặc ASP. Nếu như trang nào bạn cũng phải chèn đoạn mã như phương pháp 1 thì mất nhiều thời gian và phải kiểm tra đoạn codes. Để giảm kích thước của trang Web và đở tốn thời gian, Javascript cho chúng ta 1 phương pháp chèn đoạn mã Javascript bằng cách gọi từ ngoài vào. Muốn gọi tập tin Javascript, trước hết tập tin đó phải có phần mở rộng là .js. Và trong tập tin này không được chứa thẻ mở và đóng <script></script>
Ví dụ bạn có tập tin tooltip.js và muốn tập tin này được chèn vào các trang Web, thì trong mỗi trang Web bạn dùng đoạn Codes này ở phần <Head></Head> hoặc tại vị trí nơi bạn muốn trang Web tương tác với mã HTML như sau:
<script language="javascript" src="tooltip.js"> </script>
Trong đó tập tin tooltip.js là tập tin được lưu với phần mở rộng .js. Trong tập tin này chứa dòng code sẽ là các đoạn code và các hàm điều khiển tooltip. Khi đó tại vị trí cần hiển thị tooltip, bạn chỉ việc gọi các Function thông qua các Event handler. Ngoài ra các đoạn mã Javascript hợp lệ Form cũng dùng phương pháp này, nhưng với điều kiện các tham chiếu đến các vùng trong Form phải cùng tên với các khai báo trong hàm Hợp Lệ Form. Chúng ta sẽ đề cập đến phương pháp tham chiếu đối tượng và thuộc tính trong các bài học và ví dụ về Javacript.
Phương pháp 3: Nhúng trong câu-Inline Implementation
Ngoài hai phương pháp trên dành cho các đoạn Codes Javascript dài và phức tạp, Javascript cung cấp 1 phương pháp đơn giản dành cho các Event handlers hoặc gọi các đối tượng như Javascript:window.location... Dưới đây là một ví dụ sử dụng Event Handler để thay đổi màu nền của Thẻ Table Data (TD).
Xem ví dụ:
<td onMouseOver="this.style.backgroundColor='red'" onMouseOut="this.style.backgroundColor='blue' " bgcolor="blue"><a href="Link đến trang tài liệu html">Tên của đường link</a></td>
Trong đó: onMouseOver và onMouseOut là 2 event handlers (tạm dịch là: Lệnh điều khiển 1 sự kiện, bộ quản lý sự kiện) điều khiển chuột. Nghĩa là: Khi chuột đặt lên đường Link(onMouseOver) thì This=đối tượng này, Style=Phong cách của đối tượng này. backgroundColor: đặc tính của đối tương là màu nền của TD thành đỏ, khi chuột rời khỏi Link (OnMouseOut) thì background của TD chuyển sang màu xanh. Và giá trị màu nền mặt nhiên của TD là màu xanh. Chúng ta sẽ đề cập đến lệnh này nhiều hơn. Phương pháp này được dùng khi đọan code ngắn và thực hiện một công việc nhỏ nào đó.
Tham khảo thêm: w3schools
0 nhận xét:
Đăng nhận xét
Vui lòng viết Tiếng Việt có dấu !