Bài 2: Biến và toán tử
Hệ thống bài cũ
Giới thiệu về JavaScript Giới thiệu về JavaScript Lịch sử JavaScript Lịch sử JavaScript Mục đích của JavaScript Mục đích của JavaScript JavaScript và Browser JavaScript và Browser Chương trình JavaScript Chương trình JavaScript Vị trí mã JavaScript Vị trí mã JavaScript Sơ lược về mã JavaScript Sơ lược về mã JavaScript IDE cho JavaScript IDE cho JavaScript
Biến và toán tử 2
Mục tiêu bài học
Biến và khai báo biến Biến và khai báo biến Kiểu dữ liệu Kiểu dữ liệu Ép kiểu Ép kiểu Toán tử Toán tử Cấu trúc điều khiển Cấu trúc điều khiển Lệnh lựa chọn đơn Lệnh lựa chọn đơn Debug Debug
Biến và toán tử 3
BIẾN, KIỂU DỮ LIỆU BIẾN, KIỂU DỮ LIỆU & TOÁN TỬ & TOÁN TỬ
Biến và toán tử 4
Biến và khai báo biến
var tenbien
Biến dùng để lưu trữ dữ liệu Biến dùng để lưu trữ dữ liệu Cú pháp Cú pháp Cách đặt tên biến Cách đặt tên biến
Tên biến bao gồm chữ cái và số, nhưng tên biến không Tên biến bao gồm chữ cái và số, nhưng tên biến không được bắt đầu bằng số được bắt đầu bằng số Tên biến không bao gồm dấu cách và dấu câu, ngoại trừ Tên biến không bao gồm dấu cách và dấu câu, ngoại trừ dấu gạch dưới (_) dấu gạch dưới (_)
Có thể khai báo nhiều biến trên một dòng Có thể khai báo nhiều biến trên một dòng
var x, y, zeta var x, y, zeta
Có thể vừa khai báo vừa khởi tạo giá trị cho biến Có thể vừa khai báo vừa khởi tạo giá trị cho biến
var x = 1 var x = 1 var x = 1, y = "hello" var x = 1, y = "hello"
Biến và toán tử 5
Kiểu dữ liệu
JavaScript hỗ trợ những kiểu dữ liệu sau JavaScript hỗ trợ những kiểu dữ liệu sau
Kiểu số Kiểu số Kiểu chuỗi ký tự Kiểu chuỗi ký tự Kiểu Boolean Kiểu Boolean Kiểu mảng Kiểu mảng Object Object
Biến và toán tử 6
Kiểu số
JavaScript không chia ra kiểu Double, Integer… như các JavaScript không chia ra kiểu Double, Integer… như các ngôn ngữ khác. ngôn ngữ khác. Java gộp lại thành một kiểu duy nhất là kiểu số Java gộp lại thành một kiểu duy nhất là kiểu số
var 20 var 20 var 1.5 var 1.5 var 0xd var 0xd
Biến và toán tử 7
Demo sử dụng kiểu số
Chapter 4 Example
Chapter 4 Example
Biến và toán tử 8
Các hàm thao tác với kiểu số
isNAN() isNAN()
Xác định xem tham số truyền vào có phải là số hay không Xác định xem tham số truyền vào có phải là số hay không Nếu là số, trả về False Nếu là số, trả về False Nếu không phải là số, trả về True Nếu không phải là số, trả về True
alert(isNaN("4")) alert(isNaN("4"))
alert(isNaN("four")) alert(isNaN("four"))
Biến và toán tử 9
Đối tượng Math
Javascript cung cấp đối tượng Math để thao tác với dữ liệu kiểu số
Ví dụ
Kết quả
Phương thức Math.random()
Math.abs(x) Math.abs(x)
Math.abs(-2) Math.abs(-2)
2 2
Math.pow(x,y)
8
Math.round(x)
Math.round(2.6)
3
Giải thích Trả về số ngẫu nhiên trong khoảng từ 0 đến 1 Trả về giá trị tuyệt đối Trả về giá trị tuyệt đối của x của x Trả về giá trị của x mũ y Math.pow(2,3) Trả về giá trị làm tròn của x
Biến và toán tử 10
Kiểu chuỗi ký tự
String được bao quanh bởi cặp dấu nháy kép String được bao quanh bởi cặp dấu nháy kép
"Hello world" "Hello world" Ký tự đặc biệt Ký tự đặc biệt
Ký tự \'
Giải thích '
\"
"
\b \b
\t
\n
Dấu cách Dấu cách Dấu tab Xuống dòng
alert("Hello\t\'hi\'\ngoodbye!") alert("Hello\t\'hi\'\ngoodbye!")
Biến và toán tử 11
Các thuộc tính và phương thức của String
Thuộc tính length Thuộc tính length
var x = "Toi la String."; alert(x.length) var x = "Toi la String."; alert(x.length)
Phương thức subString Phương thức subString
var x = "Toi la String."; alert(x.subString(0,3)) var x = "Toi la String."; alert(x.subString(0,3))
Biến và toán tử 12
Các thuộc tính và phương thức của String
Phương thức concat Phương thức concat var firstString = " Day la mot xau ky tu " var finalString = firstString.concat(" Them mot xau ky tu nua ") alert(finalString)
Phương thức toUpperCase Phương thức toUpperCase
var firstString = " Day la mot xau ky tu " var firstString = " Day la mot xau ky tu " var finalString = firstString.toUpperCase() var finalString = firstString.toUpperCase() alert(finalString) alert(finalString)
Phương thức toUpperCase Phương thức toUpperCase
var firstString = " Day la mot xau ky tu " var finalString = firstString.toLowerCase() alert(finalString)
Biến và toán tử 13
Kiểu Boolean
Kiểu Boolean có hai giá trị là true và false Các biểu thức Boolean thường được sử dụng trong các cấu trúc điều khiển
if (x > 18) { if (x > 18) {
alert("Hi") alert("Hi")
} }
Biến và toán tử 14
Mảng
Mảng là kiểu dữ liệu dùng để lưu một tập các dữ liệu có Mảng là kiểu dữ liệu dùng để lưu một tập các dữ liệu có kiểu giống nhau kiểu giống nhau Cú pháp khai báo và gán giá trị cho mảng Cú pháp khai báo và gán giá trị cho mảng
Cách thứ nhất Cách thứ nhất
var convat = new Array() var convat = new Array() convat[0] = "meo" convat[0] = "meo" convat[1]= "ho" convat[1]= "ho" convat[2] = "voi" convat[2] = "voi"
Cách thứ hai Cách thứ hai
var convat = new Array("meo", "ho", "voi");
Cấu trúc điều khiển, hàm và xử lý sự kiện 15
Giá trị Null và Undefined
Giá trị Null Giá trị Null
Null nghĩa là không gì cả Null nghĩa là không gì cả var x = null nghĩa là x không tham chiếu đến đâu cả var x = null nghĩa là x không tham chiếu đến đâu cả var x = null khác với var x = "" var x = null khác với var x = ""
Kiểu Undefined Kiểu Undefined
Chưa xác định giá trị Chưa xác định giá trị
var x alert(x)
Biến và toán tử 16
Ép kiểu
Ép kiểu ngầm định
Trình thông dịch tự động chuyển kiểu
var x = 100 alert(“Hello” + x)
Biến và toán tử 17
Ép kiểu
Ép kiểu tường minh
Ép kiểu số thành chuỗi
var x = String(100) alert(typeof(x))
Ép kiểu chuỗi thành số var x = “100” var x = “100” var y = Number(x) var y = Number(x) alert(typeof(y)) alert(typeof(y))
Biến và toán tử 18
Toán tử
Toán tử số học Toán tử số học
Toán tử +
-
Giải thích Cộng Trừ Nhân
*
Chia
/
% %
Chia lấy dư Chia lấy dư
Toán tử logic Toán tử logic
Toán tử &
Giải thích Và
|
Hoặc XOR
^
NOT
!
Biến và toán tử 19
Toán tử
Toán tử quan hệ và toán tử bằng
Toán tử >
<
>=
<= <=
==
!=
Giải thích Lớn hơn Bé hơn Lớn hơn hoặc bằng Bé hơn hoặc bằng Bé hơn hoặc bằng Bằng Khác
Biến và toán tử 20
Toán tử
Toán tử một ngôi
Toán tử +
-
++
Giải thích Chuyển toán hạng sang số dương Chuyển toán hạng Chuyển toán hạng sang số âm sang số âm Tăng
--
Trừ
Biến và toán tử 21
Toán tử tăng và toán tử giảm
var x = 4; x++; alert (x);
Biến và toán tử 22
Toán tử tăng và toán tử giảm
Sự khác nhau giữa ++x và x++
var x = 4;
var x = 4; var y = ++x; alert ("x = "+x+" y ="+y);
var y = x++; alert ("x = "+x+" y ="+y);
Biến và toán tử 23
Hàm Prompt
Dùng để lấy dữ liệu do người dùng nhập vào Dùng để lấy dữ liệu do người dùng nhập vào Hàm trả về giá trị mà người dùng đã nhập Hàm trả về giá trị mà người dùng đã nhập
var x = prompt(); alert (x)
Mã này sẽ lấy dữ liệu do người dùng nhập vào và hiển Mã này sẽ lấy dữ liệu do người dùng nhập vào và hiển thị thị
Cửa sổ cho người dùng nhập thông tin
Hiển thị giá trị người dùng đã nhập
Biến và toán tử 24
CẤU TRÚC CẤU TRÚC
ĐIỀU KHIỂN ĐIỀU KHIỂN
Biến và toán tử 25
Cấu trúc điều khiển
Cấu trúc tuần tự Cấu trúc lựa chọn Cấu trúc lặp
Biến và toán tử 26
Lệnh lựa chọn
Lệnh lựa chọn đơn Lệnh lựa chọn kép Lệnh đa lựa chọn
Biến và toán tử 27
Lệnh lựa chọn đơn
Cú pháp
if (điều_kiện) {
//Thực hiện
}
Các trường hợp
if (x < 350) { //Thực
if (! điều_kiện) { //Thực
var x = 3 var x = 3 var y = 4 var y = 4 if (x == y) { if (x == y) { //Thực //Thực
hiện }
hiện }
hiện hiện } }
Biến và toán tử 28
Ví dụ lệnh lựa chọn If…Then
var x = prompt("Hay nhap vao so be hon 100:"); var x = prompt("Hay nhap vao so be hon 100:"); if (x >= 100) if (x >= 100) { {
alert("Ban vua nhap gia tri la: " + x + ", gia tri nay khong alert("Ban vua nhap gia tri la: " + x + ", gia tri nay khong
be hon 100"); be hon 100"); } }
Biến và toán tử 29
Điều kiện phức tạp
Dùng toán tử logic để kết hợp nhiều mệnh đề đơn thành một mệnh đề phức tạp hơn
var x = prompt("Hay nhap vao so be hon 100 va lon hon 50:"); var x = prompt("Hay nhap vao so be hon 100 va lon hon 50:");
if ((x < 51) || (x > 99)) { if ((x < 51) || (x > 99)) {
document.write("
Ban vua nhap gia tri la: " + x + "
"); document.write("Ban vua nhap gia tri la: " + x + "
"); document.write("Gia tri nay khong nam trong khoang tu 50
document.write("Gia tri nay khong nam trong khoang tu 50
den 100"); den 100"); } }
Biến và toán tử 30
Công cụ gỡ lỗi
Công cụ gỡ lỗi giúp người lập trình tìm và sửa lỗi (bao Công cụ gỡ lỗi giúp người lập trình tìm và sửa lỗi (bao gồm lỗi logic và lỗi biên dịch) gồm lỗi logic và lỗi biên dịch) Vì mã JavaScript được thông dịch trên trình duyệt, nên Vì mã JavaScript được thông dịch trên trình duyệt, nên mỗi trình duyệt sẽ xây dựng bộ gỡ lỗi riêng. mỗi trình duyệt sẽ xây dựng bộ gỡ lỗi riêng. IE: IE:
Microsoft Script Debugger (Debug ngay trên trình duyệt IE) Microsoft Script Debugger (Debug ngay trên trình duyệt IE) Visual Studio Visual Studio
FireFox FireFox
FireBug FireBug
Biến và toán tử 31
DEBUG
Biến và toán tử 32
Gỡ lỗi cho IE
Sử dụng Visual studio để gỡ lỗi
Mở file bằng IE: Click vào file Chọn Open With Chọn Internet Explorer Visual studio tự động chuyển sang chế độ gỡ lỗi
Biến và toán tử 33
Demo cài đặt FireBug
Vào trang web http://www.getfirebug.com Nhấn vào Button Install FireBug Download bản FireBug phù hợp với version của Firefox đang sử dụng
Firebug đã được cài đặt
Biến và toán tử 34
Demo sử dụng FireBug để gỡ lỗi
Bật chế độ firebug Bật chế độ firebug
Mở firefox Mở firefox Bật chế độ firebug bằng cách nhấn vào biểu tượng firebug Bật chế độ firebug bằng cách nhấn vào biểu tượng firebug hoặc vào từ Menu của FireFox như hình bên hoặc vào từ Menu của FireFox như hình bên Biểu tượng FireBug
Cửa sổ FireBug xuất hiện
Biến và toán tử 35
Demo sử dụng FireBug để gỡ lỗi
Bật chế độ Console để gỡ lỗi: Nhấn vào mũi tên bên phải console, chọn Enable
Biến và toán tử 36
Demo sử dụng FireBug để gỡ lỗi
Gỡ lỗi
Mở trang scopping.html
Cử sổ thông báo lỗi
Lỗi ở dòng 21
Biến và toán tử 37
Demo sử dụng FireBug để gỡ lỗi
Nhấn vào lỗi để hiển thị đoạn mã bị lỗi
Cử sổ thông báo lỗi
Biến và toán tử 38
Gỡ lỗi bằng Microsoft Script Debugger
BTVN: Tìm hiểu các gỡ lỗi trực tiếp trên IE bằng Microsoft Script Debugger
Biến và toán tử 39
Tổng kết bài học
JavaScript hỗ trợ các kiểu biến: Kiểu số, kiểu String, JavaScript hỗ trợ các kiểu biến: Kiểu số, kiểu String, kiểu Boolean và kiểu Object kiểu Boolean và kiểu Object Kiểu mảng để lưu các dữ liệu cùng kiểu với nhau Kiểu mảng để lưu các dữ liệu cùng kiểu với nhau JavaScript hỗ trợ giá trị null và undefined. Null nghĩa JavaScript hỗ trợ giá trị null và undefined. Null nghĩa là biến không tham chiếu đến đâu cả, còn undefined là biến không tham chiếu đến đâu cả, còn undefined nghĩa là biến chưa xác định nghĩa là biến chưa xác định JavaScript cũng có hai kiểu ép kiểu: Ép kiểu tường JavaScript cũng có hai kiểu ép kiểu: Ép kiểu tường minh và ép kiểu ngầm định minh và ép kiểu ngầm định Biến được khai báo bằng từ khóa var, theo sau là tên Biến được khai báo bằng từ khóa var, theo sau là tên biến biến JavaScript hỗ trợ các toán tử logic, toán tử số học, JavaScript hỗ trợ các toán tử logic, toán tử số học, toán tử quan hệ và toán tử một ngôi toán tử quan hệ và toán tử một ngôi
Biến và toán tử 40
Tổng kết bài học
JavaScript cung cấp 3 cấu trúc điều khiển: Cấu trúc JavaScript cung cấp 3 cấu trúc điều khiển: Cấu trúc tuần tự, cấu trúc lựa chọn và cấu trúc lặp tuần tự, cấu trúc lựa chọn và cấu trúc lặp Cấu trúc lặp gồm lệnh lựa chọn đơn (if) Cấu trúc lặp gồm lệnh lựa chọn đơn (if) Vì mã JavaScript được thông dịch trên trình duyệt, nên Vì mã JavaScript được thông dịch trên trình duyệt, nên mỗi trình duyệt sẽ xây dựng bộ gỡ lỗi riêng. mỗi trình duyệt sẽ xây dựng bộ gỡ lỗi riêng. FireBug gỡ lỗi cho FireFox, Microsoft Script FireBug gỡ lỗi cho FireFox, Microsoft Script Debugger gỡ lỗi cho IE. Visual Studio tích hợp bộ gỡ lỗi Debugger gỡ lỗi cho IE. Visual Studio tích hợp bộ gỡ lỗi cho IE cho IE
Biến và toán tử 41
![Tài liệu ôn tập môn Lập trình web 1 [mới nhất/chuẩn nhất]](https://cdn.tailieu.vn/images/document/thumbnail/2025/20251208/hongqua8@gmail.com/135x160/8251765185573.jpg)
