Học làm web (61) - JS căn bản (3)

Tiếp theo của: Học làm web (60) - JS căn bản (2)
----

2.2.7       Sử dụng window.confirm()


Phương thức window.confirm() được sử dụng để xuất một cửa sổ kiểu modal, gồm nội dung thông báo và hai nút (OK và Cancel).

Cú pháp,

var deleteConfirm = window.confirm('Bạn các chắc chắn muốn xóa không?');

Nếu người dùng bấm nút OK thì giá trị trả về của phương thức sẽ là true, ngược lại người dùng bấm váo nút Cancel thì giá trị trả về là false. Dựa vào giá trị trả về người lập trình sẽ quyết định thực hiện các hành động tiếp theo.

Phương thức này thường được sử dụng để xác minh lại với người dùng trước các thao tác xử lý có tính chất quan trọng, ví dụ như xóa một thông tin, hay dữ liệu.

Nên hạn chế sử dụng phương thức này, vì tính chất modal làm cho chương trình JavaScript sẽ bị dừng lại khi cửa sổ được hiển thị. Từ Chrome 46.0, mặc định, phương thức này bị khóa trong phần tử iframe.

2.2.8       Canvas, SVG, image với DOM API


Canvas

HTML cung cấp phần tử canvas để tạo ra hình ảnh kiểu bitmap (raster). Có thể sử dụng DOM API để thao tác trên phần tử canvas.

Ví dụ,

<script>
      // tạo canvas
      var canvas = document.createElement('canvas');
      canvas.width = 500;
      canvas.height = 250;
      // thiết lập kiểu của canvas - ảnh hai chiều
      var context = canvas.getContext('2d');
      // thiết lập các thuộc tính cho văn bản
      context.font = '30px Cursive';
      context.fillText('Hello world', 50, 50);
      // chèn canvas vào trang web
      document.body.appendChild(canvas);
</script>

SVG

SVG (scalable vector-based graphics) là kiểu đối tượng đồ họa dựa trên vector do vậy có thể co dãn hình.

Ví dụ,

<script>
      // tạo phần tử svg, dùng phương thức createElementNS - NameSpace URI
      var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
      svg.width = 500;
      svg.height = 250;
      // tạo phần tử text với các thiết lập đi kèm
      var text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
      text.setAttribute('x', '0');
      text.setAttribute('y','50');
      text.style.fontFamily = 'Arial';
      text.style.fontSize = '50';
      text.textContent = 'Hello world';
      // gắn văn bản vào svg
      svg.appendChild(text);
      // chèn svg vào trang web
      document.body.appendChild(svg);
</script>


Hình ảnh

Tạo hình ảnh và gắn vào trang web,

// tạo hình ảnh và gắn vào trang web
      var img = new Image();
      img.src = 'https://cdn3.ivivu.com/2013/09/du-lich-da-lat-ivivu.com-3.jpg';
      document.body.appendChild(img);

2.2.9       Biến


Biến (variable) là một nơi để chứa dữ liệu (container), được gán cho một cái tên, nó có thể chứa mọi loại dữ liệu, ví dụ: số, chuỗi kí tự, phần tử DOM, một hàm. Sau đó, người lập trình có thể tham chiếu tới dữ liệu bằng cách gọi ra tên biến. Vì biến là thùng chứa dữ liệu, nên có thể dễ dàng thay đổi dữ liệu ở bên trong.

Ví dụ sau sẽ tạo ra một biến có tên là tuoi và gán cho nó giá trị là 20,

var tuoi = 20;

Để khai báo biến sử dụng từ khóa var, theo sau là tên biến, dấu “=” dùng để gán giá trị cho biến, 20 là giá trị gán cho biến, và câu lệnh kết thúc bằng dấu chấm phẩy (;).

Có thể đặt tên biến với nội dung bất kỳ, tuy nhiên, cần đặt sao cho có ý nghĩa, dễ dàng đoán ra mục đích của biến dùng để làm gì. Như ở ví dụ trên, cũng có thể dùng tên biến là “so” (số) thay cho “tuoi” (tuổi), tuy nhiên, dùng là “tuoi” sẽ cụ thể và dễ hiểu hơn.

Về mặt cú pháp, tên biến cần tuân theo các quy tắc sau,

– Tên biến phải bắt đầu bằng một chữ cái hoặc kí tự gạch dưới (_)

– Tên biến chỉ bao gồm các kí tự, kí số và kí tự gạch dưới

– Tên biến không chứa khoảng trắng

– Tên biến có phân biệt chữ hoa, chữ thường

Với tên biến gồm nhiều kí tự, để dễ dàng phân biệt giữa các kí tự, có thể sử dụng một trong hai cách sau:

– Sử dụng dấu gạch dưới (_) (underscore), ví dụ: variable_name

– Sử dụng kiểu u lạc đà (camelCase), ví dụ: variableName

JavaScript là ngôn ngữ có kiểu dữ liệu yếu, do vậy nó không yêu cầu chỉ định kiểu dữ liệu của biến khi khai báo.

Để kiểm tra kiểu dữ liệu hiện tại của một biến, sử dụng hàm typeof(tenbien).

Ví dụ,
var x = 'abc';
typeof(x);

// kết quả xuất ra là "string"

Sử dụng biến

<script>
// khai báo biến number1 và gán cho nó giá trị 5
      var number1 = 5;
      // thay đổi giá trị của number1 thành 3
      number1 = 3;
      // xuất ra màn hình
      // có thể dùng hàm console.log()
      console.log(number1) // 3
      // có thể dùng hàm window.alert()
      window.alert(number1); // 3
</script>

Cộng, trừ, nhân, chia trên các biến

<script>
      // khai báo biến number1 và gán cho nó giá trị 5
      var number1 = 3;
      number1 = number1 + 5; // 3 + 5 = 8
      console.log(number1); // 8
      number1 = number1 - 6; // 8 - 6 = 2
      console.log(number1); // 2
      var number2 = number1 * 10 // 2 * 10 = 20
      console.log(number2); // 20
      var number3 = number2 / number1; // 20 / 2 = 10
      console.log(number3); // 10
</script>

2.2.10       Các loại dữ liệu


Sau đây là một số loại dữ liệu có thể gán cho một biến,

undefined

Undefined nghĩa là chưa xác định. Khi khai báo một biến mà chưa có giá trị, thì nội dung của biến là chưa xác định. Đây là kiểu dữ liệu của một biến, khi biến đó mới chỉ có tên mà chưa chứa gì bên trong. Kiểu dữ liệu này thường được dùng để kiểm tra xem một biến đã được gán giá trị hay chưa?

Ví dụ,

var foo;
alert(foo); // sẽ xuất cửa sổ thông báo với nội dung là “undefined”

null

Cũng tương tự như kiểu dữ liệu undefined, khi gán giá trị null cho một biến, có nghĩa là biến này đã có tên nhưng chưa có giá trị.

Ví dụ,

var foo = null;
alert(foo); // sẽ xuất cửa sổ thông báo với nội dung là “null”

number

Có thế gán cho biến một số.

Ví dụ,

var foo = 5;
alert(foo); // sẽ xuất cửa sổ thông báo với nội dung là 5

Khi đó, biến foo sẽ được JavaScript xem như là số 5, nghĩa là một số, và có thể thực hiện các phép toán trên foo.

Ví dụ, có thể thực hiện foo + foo,

var foo = 5;
alert(foo + foo); // sẽ xuất cửa sổ thông báo với nội dung là 10

Ví dụ một số giá trị kiểu số,

var myInteger = 12; // kiểu số nguyên 32-bit (từ -2,147,483,648 tới 2,147,483,647)
var myLong = 9310141419482; // kiểu số nguyên 64-bit (từ -9,223,372,036,854,775,808 tới
9,223,372,036,854,775,807)
var myFloat = 5.5; // kiểu số thực 32-bit (floating-point)
var myDouble = 9310141419482.22; // kiểu số thực 64-bit

string

Biến có thể chứa một chuỗi. Khi viết mã, chuỗi sẽ được bao lại bằng dấu nháy đơn (') hoặc nháy kép (").

Ví dụ,

var foo = 'five';
alert(foo); // sẽ xuất cửa sổ thông báo với nội dung là five

Khi đó biến foo sẽ được JavaScript xem như là chuỗi “five”. Chuỗi có thể chứa các kí tự, kí số, khoảng trắng, miễn là chúng được bao trong dấu nháy. Ví dụ, nếu khai báo là var foo = '5' thì biến foo bây giờ không được xem là một số nữa mà nó sẽ được xem như là một chữ.

Khi kiểu dữ liệu trong biến là kiểu chuỗi, thì phép cộng (+) sẽ thực hiện nối hai chuỗi lại với nhau.

Ví dụ,

var foo = 'bye';
alert(foo + foo); // sẽ xuất cửa sổ thông báo với nội dung là byebye

Nếu thực hiện cộng một số và một chuỗi, JavaScript sẽ xem số như là chuỗi, vì không thể thực hiện phép cộng toán học trên chuỗi.

Ví dụ,

var foo = 'five';
var bar = 5;
alert(foo + bar); // sẽ xuất cửa sổ thông báo với nội dung là five5

boolean

Có thể gán giá trị true hoặc false cho một biến. Đây là các giá trị luận lý (boolean), được sử dụng trong các phép toán logic. Vì truefalse là hai giá trị có sẵn của JavaScript, nên không dùng dấu nháy để bao lại, nếu dùng dấu nháy sẽ làm cho JavaScript hiểu là chuỗi có nội dung là “true” chứ không phải giá trị true.

Ví dụ,

var foo = true;
alert(foo); // sẽ xuất cửa sổ thông báo với nội dung là true

Lưu ý: thực tế, mọi loại giá trị trong JavaScript đều ngầm chứa một giá trị kiểu boolean. Cụ thể, “null”, “undefined”, “0”, chuỗi rỗng (“”), sẽ mang giá trị false; các giá trị khác sẽ mang giá trị true.

NaN

NaN (Not a Number) có nghĩa là không phải số. Kiểu dữ liệu NaN có thể xuất hiện trong một số tình huống sau:

– Kết quả của phép toán: 0/0, ∞/∞ (infinity), ∞ * 0, phép toán có toán hạng là NaN

– Chuyển một chuỗi (non-numeric) hoặc undefined về dạng số

– Gán cho biến có giá trị nằm ngoài vùng cho phép


Điều gây khó hiểu là kiểu dữ liệu NaN lại là kiểu số.

Ví dụ,

var myNotANumber = NaN;
      console.log(myNotANumber);
      var NaN_example = 0/0;
      console.log(NaN_example);

array

Có thể gán một nhóm (hay mảng) các giá trị cho một biến. Array nghĩa là một mảng, mảng này gồm nhiều giá trị, mỗi giá trị nằm trong một phần tử của mảng và được đánh số thứ tự (indexed). Cũng có thể hiểu mảng là một tập các biến. Chỉ số đầu tiên của mảng là 0, sau đó là 1, sau đó là 2…v.v.

Ví dụ,

Giả sử cần lưu ba giá trị là: 5, five, và ‘5’ vào biến. Như ở các ví dụ trước đã làm, sẽ khai báo ba biến để chứa ba giá trị này, foo1, foo2, foo3. Thay vì vậy, sẽ sử dụng một biến kiểu array để chứa cả ba biến này. Khi khai báo, các phần tử của mảng được đặt trong dấu ngoặc vuông [].

var foo = [5, 'five', '5'];
alert(foo[0]); // xuất ra màn hình là 5
alert(foo[1]); // xuất ra màn hình là five
alert(foo[2]); // xuất ra màn hình là 5

Một số ví dụ khác,

// khai báo mảng rỗng
      var myArray = [];
      // khai báo mảng và khởi tạo giá trị
      var favoritFruits = ['apple', 'orange', 'strawberry'];
      var carInParkingLot = ['Toyota', 'Ferrari', 'Lexus'];
      var employees = ['Tí', 'Sửu', 'Mẹo'];
      var numbers = [1, 3, 5, 7, 9];
      var randomVariables = [4, 'một chuỗi', undefined, null, true, 2.13];
      // gán giá trị cho  mảng
      myArray = ['zero', 'one', 'two'];
      // xuất phần tử đầu tiên của mảng
      window.alert(myArray[0]); // zero
      // gán giá trị khác cho mảng
      myArray = ['Thìn', 'Dần'];
      var element = 1;
      window.alert(myArray[element]); // Dần

Object

Giống với array, object là một kiểu dữ liệu, được dùng để chứa nhiều giá trị bên trong. Khác với array, chỉ có thể truy cập tới các phần tử bẳng chỉ số, object cho phép truy cập tới các giá trị bằng tên.

Ví dụ,

// khai báo object rỗng
     myObject = {};
     // khai báo object có khởi tạo giá trị cho các thuộc tính
     name1 = {firstname: 'Nguyễn', lastname: 'Tèo', fullname: 'Nguyễn Tèo'};
     // viết các thuộc tính trên mỗi hàng cho dễ quan sát
      name2 = {
            firstname: 'Tí',
            lastName: 'undefined',
            fullname: 'Tí'
      };
      // truy cập thông qua tên thuộc tính
      window.alert(name1['fullname']); //Nguyễn Tèo
      // hoặc

      window.alert(name2.fullname); // Tí
-----------
Cập nhật [19/10/2018][8/9/2018]
-----------
Xem thêm: Tổng hợp các bài viết về Học làm web
Xem thêm: Học làm web (62) - JS căn bản (4)