--------------- <> -----------------
--- KHOA HỌC - CÔNG NGHỆ - GIÁO DỤC - VIỆC LÀM ---
--- Học để đi cùng bà con trên thế giới ---

Tìm kiếm trong Blog

Hiển thị các bài đăng có nhãn học làm web đà lạt. Hiển thị tất cả bài đăng
Hiển thị các bài đăng có nhãn học làm web đà lạt. Hiển thị tất cả bài đăng

Học làm web (62) - JS căn bản (4)

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

2.2.11       Các hằng tạo sẵn


null

Null là một hằng, được sử dụng để gán một cách có chủ đích cho một biến, ý báo rằng biến này chưa có giá trị. Null là một giá trị nguyên thủy (primitive value). Null không là thuộc tính của đối tượng toàn cục (global object).

Giá trị nguyên thủy[1] là dữ liệu không ở dạng đối tượng (object) và không có phương thức (method). Trong JavaScript có sáu loại giá trị (hay dữ liệu) nguyên thủy là: string, number, boolean, null, undefined và symbol.

Null có giá trị giống với undefined, nhưng null không đồng nhất với undefined. Lý do là: kiểu dữ liệu của null là object, tuy nhiên kiểu dữ liệu của undefined là undefined.

Nhập các lệnh sau vào cửa sổ Console để quan sát,

null == undefined //true

nul === undefined //false

// kiểm tra kiểu dữ liệu

typeof null //object

typeof undefined //undefined

Để kiểm tra giá trị của một biến có thực sự là null hay không, cần sử dụng phép so sánh đồng nhất (===), ví dụ:

var a = null;

a === null; // true

NaN

NaN (Not a Number) là một hằng, khi một hàm toán học hay một thao tác trong JavaScript mà không thể trả về một số cụ thể, thì nó sẽ trả về giá trị là NaN.

NaN là một thuộc tính của đối tượng toàn cục. Ví dụ, có thể tham chiếu tới thuộc tính NaN bằng các đối tượng toàn cục,

Number.NaN; // NaN

window.NaN; // NaN

Hoặc,

window.hasOwnProperty('NaN'); // true

Tuy nhiên, rắc rối lại ở chỗ, kiểu dữ liệu của NaN lại là number. Có thể kiểm tra bằng lệnh typeof,

typeof NaN; // number

Để kiểm tra một giá trị có phải là NaN hay không? không nên sử dụng phép toán so sánh ==, hoặc ===, mà phải sử dụng hàm isNaN().

Ví dụ,

NaN == NaN; // false

NaN === NaN; // false

Các hàm và thao tác trả về NaN

Các phép toán thực hiện trên dữ liệu không phải kiểu số sẽ trả về NaN. Ví dụ,

‘b’ * 3; // NaN

‘abc’ – ‘a’; // NaN

[1, 2, 3] * 2; // NaN

Phép chia 0/0,

0/0; // NaN

Tuy nhiên, phép nhân giữa hai mảng gồm một phần tử sẽ là hợp lệ,

[2] * [3]; // 6

Phép cộng giữa hai chuỗi sẽ là thao tác nối chuỗi (concatenate),

‘ab’ + ‘c’; // ‘abc’

Với các hàm toán học, nếu truyền đối số cho nó không phải kiểu số, thì hàm sẽ trả về NaN. Ví dụ,

Math.floor(‘a’); // NaN

Truyền giá trị âm cho hàm căn bậc hai sẽ trả về NaN, ví dụ,

Math.sqrt(-1); // NaN

Sử dụng isNaN()

Vì isNaN() là một hàm toàn cục, nên có thể gọi nó từ các đối tượng. Ví dụ,

window.isNaN();

Cách hoạt động của hàm window.isNaN(): đầu tiên hàm window.isNaN() sẽ kiểm tra xem đối tượng cần kiểm tra có phải là một giá trị số hay không? nếu đúng trả về giá trị false, nếu không nó sẽ chuyển đổi đối tượng cần kiểm tra sang dạng số và kiểm tra trên kết quả vừa chuyển đổi. Vì cách làm việc này, nên đôi khi hàm window.isNaN() cũng gây khó hiểu.

Quan sát một số ví dụ sau để hiểu rõ hơn về cách sử dụng hàm window.isNaN(),

isNaN(NaN);
// true, hiển nhiên, vì NaN nghĩa là không phải số
isNaN(1);
// false: vì 1 là một số
isNaN(-2e-4);
// false: vì -2e-4 là một số, có giá trị là -0.0002 (đừng nhầm dấu ‘–’ thứ hai là dấu trừ)
isNaN(Infinity);
// false: vì Infinity là một số
isNaN(true);
// false: vì true được chuyển đổi thành 1, là một số
isNaN(false);
// false: vì false được chuyển đổi thành 0, là một số
isNaN(null);
// false: vì null được chuyển đổi thành 0, là một số
isNaN("" );
// false: vì "" được chuyển đổi thành 0, là một số
isNaN(" " );
// false: vì " " được chuyển đổi thành 0, là một số
isNaN("45.3");
// false: vì "45.3" biểu diễn một số, có giá trị là 45.3
isNaN("1.2e3");
// false: vì "1.2e3" biểu diễn một số, có giá trị là 1.2e3
isNaN("Infinity");
// false: vì chuỗi "Infinity" sẽ được chuyển đổi thành Infinity
isNaN(new Date);
// false: vì đối tượng Date sẽ được chuyển đổi sang giá trị giây
isNaN("10$"); 
// true: vì chuyển đổi không thành công, dấu $ không phải là kí số 
isNaN("hello");
// true: hello là chuỗi
isNaN("undefined");
// true: undefined được chuyển thành NaN
isNaN();
// true: (ngầm hiểu là undefined) được chuyển thành NaN
isNaN(function(){});
// true: việc chuyển đổi không thành công
isNaN({});
// true: việc chuyển đổi không thành công
isNaN([1, 2]);
// true: không thể chuyển đổi thành số

Trường hợp isNaN([1, 2]) khá đặc biệt. Như đã biết isNaN([]) và isNaN([34]) đều trả về giá trị false, nhưng isNaN([true]) và isNaN([1, 2]) lại trả về giá trị true. Lý do nằm ở chỗ chuyển đổi sang dạng số trước khi kiểm tra. Cụ thể: [] được chuyển đổi thành “ ”, [34] > “34”, [true] > “true”, [1, 2] > “1, 2”. Nói chung, với hàm isNaN, một mảng sẽ được xem là NaN, trừ khi mảng chỉ gồm một phần tử, và phần tử này có thể chuyển đổi được sang dạng số.

Hàm Number.isNaN()

Từ phiên bản ECMAScript 6 trở đi, hàm Number.isNaN() được sử dụng để khắc phục vấn đề bắt buộc chuyển đổi tham số sang dạng chuỗi của hàm window.isNaN(). Hàm Number.isNaN() không chuyển đổi tham số sang dạng chuỗi trước khi kiểm tra. Kết quả là chỉ có các giá trị kiểu số và là NaN thì hàm Number.isNaN() mới trả về giá trị true, các trường hợp còn lại trả về false.

Cách làm việc của hàm Number.isNaN(), với đối số là number,

– Nếu Type(number) không là Number, trả về giá trị false

– Nếu number là NaN, trả về giá trị true

– Các trường hợp khác trả về false

Một số ví dụ,

Number.isNaN(NaN);
// true
// Numbers
Number.isNaN(1);
Number.isNaN(-2e-4);
Number.isNaN(Infinity);
// false
// giá trị không thuộc kiểu số
Number.isNaN(true);
Number.isNaN(false);
Number.isNaN(null);
Number.isNaN("" );
Number.isNaN(" " );
Number.isNaN("45.3");
Number.isNaN("1.2e3");
Number.isNaN("Infinity");
Number.isNaN(new Date);
Number.isNaN("10$"); 
Number.isNaN("hello");
Number.isNaN("undefined");
Number.isNaN();
Number.isNaN(function(){});
Number.isNaN({});
Number.isNaN([]);
Number.isNaN([1]);
Number.isNaN([1,2]);
Number.isNaN([true]);
// false

undefined và null

Undefined là một giá trị toàn cục, cho biết tình trạng (biến) chưa được gán dữ liệu.

Null là một đối tượng, được sử dụng để báo rằng, biến được thiết lập ở chế độ không có dữ liệu một cách có chủ đích, một cách tường minh.

– typeof null === ‘object’

– typeof undefined === ‘undefined’

Khi thiết lập một biến là undefined có nghĩa là biến này không còn hiệu lực. Một số xử lý (ví dụ JSON serialization) sẽ gỡ bỏ các thuộc tính có giá trị là undefined ra khỏi đối tượng. Ngược lại, thuộc tính với giá trị null, có nghĩa là thuộc tính này vẫn có hiệu lực và nó mang giá trị rỗng (empty).

Ví dụ một số thao tác dẫn tới giá trị undefined:

– Khai báo biến nhưng không gán giá trị

let foo;
console.log('is undefined?', foo === undefined);
// is undefined? true

– Truy cập tới giá trị của thuộc tính không tồn tại

let foo = {a: 'a'};
console.log('is undefined?', foo.b===undefined);
// is undefined? true

– Giá trị trả về của một hàm, mà hàm này không trả về giá trị

function foo() { return; }
console.log('is undefined?', foo() === undefined);
// is undefined? true

– Đối số của một hàm: có khai báo khi định nghĩa, nhưng khi gọi hàm thì không truyền giá trị

function foo(param) {
            console.log('is undefined?', param === undefined);
}
foo('a');
foo();
// is undefined? false
// is undefined? true

Lưu ý: undefined cũng là thuộc tính của đối tượng toàn cục window

console.log(window.undefined);
window.hasOwnProperty('undefined');
// undefined
// true

Infinity và –Infinity

Infinity (dương vô cùng) là thuộc tính của đối tượng toàn cục (global object), nó đại diện cho giá trị dương vô cùng của toán học. Trong JavaScript, cũng có thể tham chiếu tới giá trị dương vô cùng bằng thuộc tính INFINITY của đối tượng Number, cụ thể: Number.INFINITY.

Infinity có giá trị lớn hơn mọi giá trị khác. Ví dụ, lấy một số dương bất kì chia cho 0 thì sẽ được Infinity, hoặc một biểu thức toán học cho ra kết quả rất lớn, đến mức tràn số (overflow) thì cũng tạo ra một Infinity.

Ngoài Infinity, trong JavaScript còn có –Infinity. Đây là âm vô cùng, là số nhỏ hơn mọi giá trị khác. Để có –Infinity, có thể đổi dấu của Infinity hoặc tham chiều tới thuộc tính NEGATIVE_INFINITY của đối tượng Number, cụ thể: Number.NEGATIVE_INFINITY.

Ví dụ, nhập các lệnh sau vào cửa sổ Console của trình duyệt,

-(Infinity); // -Infinity

Number.NEGATIVE_INFINITY; // -Infinity

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

Infinity > 123192310293; // true

-Infinity < -123192310293; // true

1 / 0; // Infinity

Math.pow(123123123, 9123192391023); // Infinity

Number.MAX_VALUE * 2; // Infinity

23 / Infinity; // 0

-Infinity; // -Infinity

-Infinity === Number.NEGATIVE_INFINITY; // true

-0; // -0 , trong JavaScript có số -0

0 === -0; // true

1 / -0; // -Infinity

1 / 0 === 1 / -0; // false

Infinity + Infinity; // Infinity

var a = 0, b = -0;

a === b; // true

1 / a === 1 / b; // false

Một số hằng của đối tượng Number

Number.MAX_VALUE; // 1.7976931348623157e+308

Number.MAX_SAFE_INTEGER; // 9007199254740991

Number.MIN_VALUE; // 5e-324

Number.MIN_SAFE_INTEGER; // -9007199254740991

Number.EPSILON; // 0.0000000000000002220446049250313

Number.POSITIVE_INFINITY; // Infinity

Number.NEGATIVE_INFINITY; // -Infinity

Number.NaN; // NaN


Lưu ý: một số phép toán trong JavaScript sẽ bị ngưng thực thi, nếu giá trị tính toán vượt ra ngoài vùng giá trị an toàn (Number.MIN_SAFE_INTEGER , Number.MAX_SAFE_INTEGER).


[1] https://developer.mozilla.org/en-US/docs/Glossary/Primitive
-----------
Cập nhật [11/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 (63) - JS căn bản (5)

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ì true và false 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)

Học làm web (60) - JS căn bản (2)

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

2.2.3       Sử dụng console.log()


Các trình duyệt web hiện đại, Node.js, cũng như các môi trường phát triển JavaScript khác (mà có hỗ trợ việc ghi dữ liệu ra console) đều đang sử dụng rất nhiều các phương thức để ghi log (ghi vết), trong đó phổ biến nhất là phương thức console.log().

Trong các trình duyệt, phương thức console.log() chủ yếu được sử dụng trong việc tìm và sửa lỗi (debug).

Trong cửa sổ console của JavaScript (Developer tool), gõ lệnh sau và gõ Enter,

console.log(‘Hello wordl’);

Kết quả của lệnh trên sẽ ghi ra console thông tin sau :


Ở ví dụ trên, hàm console.log() đã in ra dòng chữ “hello world” và trả về giá trị undefined. Lý do là hàm console.log() không trả về một giá trị tường minh.

Quan sát giá trị của biến

Có thể sử dụng console.log() để quan sát giá trị của biến thuộc kiểu bất kì. Chỉ việc đưa tên biến vào làm đối số của hàm console.log().

Ví dụ, nhập vào cửa sổ console đoạn lệnh sau, (bấm shift + Enter để xuống hàng), bấm Enter để thực thi đoạn mã,

var foo='bar';
console.log(foo);

Kết quả của đoạn mã trên sẽ ghi ra console thông tin sau:


Nếu muốn xuất nhiều giá trị, đơn giản chỉ việc sử dụng dấu phẩy để ngăn cách giữa các giá trị.

Ví dụ,

var thisVar = 'first value';
var thatVar = 'second value';
console.log('thisVar:', thisVar, 'thatVar:',thatVar);

Kết quả của đoạn mã trên sẽ ghi ra console thông tin sau:


Khi xuất kết quả, giữa các giá trị sẽ được tự động thêm một khoảng trắng.

Placeholders

Có thể xuất ra console theo kiểu “đặt chỗ trước” (placeholders).

Ví dụ,

var greet = 'Hello';
var who = 'World';
console.log('%s, %s', greet, who);

[Kết quả xuất ra cửa sổ console là]

Hello, World

Xuất một đối tượng

Có thể sử dụng console.log() để xuất một đối tượng, cách này thường được sử dụng để xuất một kết quả trả về dưới dạng JSON của một lời gọi API.

Ví dụ,

console.log({
'Email': '',
'Groups': {},
'Id': 33,
'IsHiddenInUI': false,
'IsSiteAdmin': false,
'LoginName': 'i:0#.w|virtualdomain\\user2',
'PrincipalType': 1,
'Title': 'user2'
});

[Kết quả]


Xuất phần tử HTML

Có thể sử dụng console.log() để xuất phần tử bất kì có trong cây DOM.

Ví dụ,



Đọc thêm về chủ đề Console để tìm hiểu các khả năng khác của nó.

2.2.4       Sử dụng DOM API


Có thể sử dụng thuộc tính textContent để xuất nội dung văn bản ra giao diện trang web. Tương tự chức năng của thuộc tính innerHTML.

Ví dụ,

[HTML]

<p id="paragraph"></p>

Sử dụng đoạn mã JS sau để chèn phần nội dung cho phần tử p, và nội dung này sẽ được hiển thị trên giao diện trình duyệt.

[JS]

document.getElementById('paragraph').textContent = 'Hello World';

Ví dụ sau sẽ tạo thêm một phần tử (p), gán nội dung cho phần tử p, và gắn phần tử p vào cuối trang web,

[HTML]

<body>
            <h1>Thêm phần tử vào trang web</h1>
</body>

[JS]

var element = document.createElement('p');
element.textContent = 'Hello World';
document.body.appendChild(element);

2.2.5       Sử dụng window.alert()


Phương thức window.alert() được sử dụng để xuất nội dung ra cửa sổ trình duyệt dưới dạng một cửa sổ thông báo. Đối số của hàm chính là nội dung cần xuất.

Vì window là đối tượng kiểu toàn cục (global object), nên có thể sử dụng ở dạng viết rút gọn là alert(). Hai cách viết sau là tương đương,

window.alert(message);

alert(message);

Ví dụ,

window.alert('hello');
alert('hello');

Lưu ý: vì alert() hoạt động theo kiểu hộp thoại modal (modal prompt), nên đoạn mã gọi phương thức này sẽ bị dừng để đợi tương tác từ người dùng. Hộp thoại kiểu modal là hộp thoại do chương trình chính gọi ra, và nó phải được đóng trước khi có thể thực thi các lệnh tiếp theo của chương trình, mục đích để đảm bảo chương trình không bị rơi vào trạng thái mất kiểm soát.

Ví dụ,

alert('Dừng!');
console.log('Alert đã được đóng!');

Tuy nhiên, trong đặc tả thực tế vẫn cho phép các đoạn mã được kích hoạt bởi các sự kiện khác thực thi ngay cả khi hộp thoại modal chưa được đóng.

Trong thực tế, phương thức alert() không được khuyến khích sử dụng vì nó ảnh hưởng không tốt đến trải nghiệm người dùng. Phương thức alert() chỉ nên sử dụng trong quá trình tìm và sửa lỗi.

Trình duyệt Chrome 46.0 không cho phép chạy phương thức alert() trong phần tử iframe. Ví dụ,

<body>
            <iframe src="" frameborder="0">
                        <script>
                                     alert('inside iframe');
                        </script>
            </iframe>
           
<script>
                        alert('outside iframe');
               </script>
</body>


2.2.6       Sử dụng window.prompt()


Cách đơn giản nhất để lấy được dữ liệu do người dùng nhập vào là sử dụng phương thức window.prompt().

Cú pháp,

window.prompt(text, [default]);

– text: nội dung được hiển thị trong hộp thoại

– default: giá trị mặc định cho ô nhập liệu

Ví dụ,

var age = window.prompt('How old are you?');
console.log(age); //in giá trị do người dùng nhập vào

[Kết quả]



Nếu người dùng nhập một giá trị, rồi bấm nút OK, giá trị sẽ được trả về. Ngược lại, nếu người dùng bấm Cancel, giá trị null sẽ được trả về.

Giá trị trả về của phương thức prompt() luôn là kiểu chuỗi (string), trừ khi người dùng bấm nút Cancel, giá trị trả về sẽ là null. Với trình duyệt Safari, khi người dùng bấm nút Cancel, giá trị trả về sẽ là một chuỗi rỗng (empty string). Từ giá trị trả về kiểu chuỗi, lập trình viên có thể chuyển qua các dạng dữ liệu khác để xử lý.

Chú ý:

– Trong khi cửa sổ prompt đang hiển thị, người dùng không thể truy cập các vùng khác của trang web, vì cửa sổ prompt thuộc kiểu modal.


– Từ Chrome 46.0, phần tử iframe không cho phép chạy phương thức prompt, trừ trường hợp thuộc tính sandbox được thiết lập là cho phép modal được chạy.
-----------
Cập nhật [28/8/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 (61) - JS căn bản (3)

Học làm web (58) - CSS căn bản (34)

Tiếp theo của: Học làm web (57) - CSS căn bản (33)
----
CSS dựa trên môi trường hiển thị

CSS dựa trên môi trường hiển thị (media queries) cho phép lập trình viên tạo ra mã CSS cho từng loại môi trường (hay thiết bị) hiển thị khác nhau. Các môi trường hiển thị gồm: in (print), màn hình máy tính (screen), thiết bị cầm tay (handheld), thiết bị liên quan đến hệ thống chữ nổi (braille), màn chiếu (screen projection), thiết bị xử lý văn bản qua đường điện thoại (tty), Ti vi (TV). Sử dụng từ khóa all nếu muốn áp dụng định dạng CSS cho toàn bộ các loại môi trường. Media queries cũng xét đến các đặc trưng khác như: độ rộng của thiết bị (device-width), hướng (ngang, dọc) của màn hình (orientation) và độ phân giải (resolution).

Đây là danh sách các thuộc tính có thể kiểm tra trong chế độ media queries: width, height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color, color-index, monochrome, resolution, scan, grid. Có thể kiểm tra giá trị nhỏ nhất hoặc lớn nhất của hầu hết các thuộc tính bằng tiếp đầu ngữ min- hoặc max- tương ứng. Ví dụ: min-width: 480px dùng để kiểm tra kích thước màn hình có lớn hơn hoặc bằng 480px hay không? Như vậy, màn hình kích thước 768px sẽ thỏa điều kiện này và được áp dụng CSS, trong khi màn hình kích thước 320px sẽ không thỏa điều kiện.

Đoạn mã của media queries được viết trong tập tin CSS như các luật CSS thông thường khác. Ví dụ,

@media screen and (min-width: 480px;) {
/* các luật CSS được đặt tại đây */
}

Đoạn mã trên sẽ kiểm tra xem môi trường hiển thị có phải là screen không và kích thước có phải từ 480px trở lên hay không?

Cú pháp của câu lệnh truy vấn môi trường bắt đầu bằng @media, tiếp theo là “tên thiết bị”, sau đó là các đặc trưng và các giá trị cần kiểm tra được đặt trong ngoặc đơn (), cuối cùng, các luật CSS được đặt trong dấu ngoặc nhọn {}.

Từ khóa “and” là toán tử logic, được dùng để nối các điều kiện kiểm tra. Như ở ví dụ trên, câu lệnh truy vấn sẽ trả về kết quả là “true” nếu môi trường hiển thị là screen và có độ rộng tử 480px trở lên.

Ví dụ câu lệnh truy vấn sau kiểm tra cùng lúc ba điều kiện: là screen, độ rộng từ 700px trở lên, và màn hình xoay ngang (landscape).

@media screen and (min-width: 700px;) and (orientation: landscape) {
/* các luật CSS được đặt tại đây */
}

Đặt lệnh truy vấn trong thẻ link

Lệnh @media ngoài việc đặt trong một tập tin CSS, còn có thể đặt trong thẻ link của tài liệu HTML. Mục đích là để tải tập tin CSS nếu thỏa điều kiện cho trước.

Ví dụ, đoạn mã dưới đây sẽ tải tập tin định dạng cơ bản trước (styles.css), nếu màn hình có độ rộng từ 780px trở lên thì tải thêm tập tin định dạng mở rộng (2column-styles.css).

<head>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="2column-styles.css" media="screen and
(min-width:780px)">
</head>

Lưu ý: Việc đặt lệnh truy vấn trong thể link cũng có nhược điểm là cần thêm một request về server, do vậy có thể ảnh hưởng đến tốc độ hiển thị trang web.

Mobile First

Trong kĩ thuật responsive, phương pháp được sử dụng nhiều là ưu tiên thiết bị di động trước (mobile first). Nghĩa là, thực hiện định dạng cho thiết bị nhỏ nhất, đơn giản nhất trước, sau đó sử dụng media queries để thiết lập riêng cho các trường hợp còn lại (trường hợp có màn hình lớn hơn, có thêm nhiều đặc trưng hơn).

Theo phương pháp mobile-first, người ta thường sử dụng từ khóa min- trong các câu truy vấn kích thước màn hình, nghĩa là nếu thiết bị có độ rộng ít nhất là xyz hoặc lớn hơn thì sẽ áp dụng thêm những CSS tương ứng. Điều này đảm bảo tính kế thừa của định dạng CSS, các định dạng sau sẽ dựa trên các định dạng trước đó.

Cần lưu ý đến thứ tự ưu tiên khi thực thi mã CSS để đặt các tập tin CSS cho phù hợp, cụ thể, các tập tin định dạng cơ bản sẽ áp dụng trước, sau đó đến CSS cho màn hình nhỏ và cuối cùng là CSS cho màn hình lớn.

Lab 2.8 (tt) (exercise 18-3, p.450, [3])

Một số kích thước màn hình

Một câu hỏi được đặt ra là: với kích thước màn hình bao nhiêu thì nên thiết lập một định dạng CSS riêng?

Như đã biết, các thiết bị duyệt web có kích thước rất đa dạng, có thể xoay đứng hoặc xoay ngang. Do vậy, làm định dạng CSS cho từng trường hợp như vậy là không thể. Trong thực tế, thường tạo ba thiết kế CSS cho ba loại màn hình chính (mobile phone, tablet và desktop). Hình sau liệt kê các kích thước của mỗi loại thiết bị, dựa vào thông tin này để quyết định chọn kích thước cho mỗi media queries.



2.8.7       Câu hỏi & bài tập


1. Mục đích của reset CSS là gì?

a. Ghi đè các định dạng mặc định của trình duyệt

b. Để lập trình viên luôn kiểm soát được định dạng CSS của họ

c. Ngăn ngừa phần tử kế thừa các định dạng CSS không mong muốn

d. Tất cả đáp án trên

2. Mục đích của CSS sprites là gì?

a. Tăng tốc độ tải và hiển thị trang web

b. Gom nhiều ảnh nhỏ vào một ảnh lớn để giảm kích thước tập tin

c. Giảm số lượng HTTP request về server

d. a và c

e. Tất cả đáp án trên

3. Mục đích của kĩ thuật “dùng hình ảnh thay thế chữ” là gì?

a. Để thụt đầu hàng cho các văn bản có kích thước lớn

b. Sử dụng đối tượng đồ họa thay thế cho văn bản

c. Gỡ bỏ nội dung văn bản, thay vào đó là một hình ảnh

d. Giúp duy trì nội dung và ngữ nghĩa của tài liệu

e. b và d

f. Tất cả đáp án trên

4. Ứng với mỗi câu lệnh truy vấn (cột trái), chọn ngữ nghĩa tương ứng (cột phải)

a. @media screen and (max-width: 800px) { }
Áp dụng định dạng này khi in trên trang giấy xoay đứng
b. @media screen and (min-device-width: 800px) { }
Áp dụng định dạng này cho tất cả thiết bị hiển thị đen-trắng
c. @media print and (orientation: portrait) { }
Áp dụng tập tin CSS mở rộng này khi màn hình hiển thị có kích thước 800px trở lên
d. <link rel="stylesheet" href="special.css"
media="screen and (min-width: 800px)">
Áp dụng định dạng này khi thiết bị hiển thị có độ rộng nhỏ hơn 800px
e. @media all and (monochrome) { }
Áp dụng định dạng này khi thiết bị hiển thị có độ rộng tử 800px trở lên

5. Ứng với mỗi đoạn mã, hãy chọn hình kết quả tương ứng.


(1.) table { border-collapse: collapse;}
td { border: 2px black solid; }

(2.) table { border-collapse: separate; }
td { border: 2px black solid; }

(3.) table {
border-collapse: separate;
border-spacing: 2px 12px; }
td { border: 2px black solid; }

(4.) table {
border-collapse: separate;
border-spacing: 5px;
border: 2px black solid; }
td { background-color: #99f; }

(5.) table {
border-collapse: separate;
border-spacing: 5px; }
td {
background-color: #99f;
border: 2px black solid; }





3         Tài liệu tham khảo chính


[1] Jon Duckett, HTML&CSS design and build websites, John Wiley & Son, 2011

[2] Tutorials Point, HTML hypertext markup language, ebook, 2015

[3] Jennifer Niederst Robbins, Learning web design, O’Reilly, 2012



-----------
Cập nhật [19/8/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 (58_1) - Mini project (hosting, domain, git, html, css)