----
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>
Đọc thêm về createElementNS tại đây: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS
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: Học làm web (62) - JS căn bản (4)