Bài giảng javascript

JAVASCRIPT CƠ BẢN
Nguyễn Trọng Bảo
JavaScript là gì?
JavaScript là một ngôn ngữ kịch bản (scripting language) dựa vào đối tượng có sẵn hoặc do người dùng tự định nghĩa.
JavaScript là một ngôn ngữ thông dịch (interpreted language: có nghĩa là các script thực hiện mà không cần biên dịch sơ bộ).
JavaScript là ngôn ngữ lập trình nhẹ, có thể tích hợp được với Java và HTML.
JavaScript là một nền tảng mã nguồn mở.







Một số thư viện JavaScript phổ biến
AngularJS: Thư viện để xây dựng ứng dụng Single Page.
NodeJS: Một thư viện được phát triển phía Server dùng để xây dựng ứng dụng realtime.
Sencha Touch: Một Framewok dùng để xây dựng ứng dụng mobile.
ExtJS: Framewok xây dựng ứng dụng quản lý (Web Application).
jQuery:Thư viện hiệu ứng dùng để phát triển các hiệu ứng cho website.







Java có giống JavaScript?
Java và JavaScript là hai ngôn ngữ hoàn toàn khác nhau về cả khái niệm và thiết kế.
Java (được phát triển bởi Sun Microsystems) là một ngôn ngữ lập trình phức tạp cùng thể loại như C và C++.
JavaScript hội tụ đầy đủ sức mạnh cũng như cú pháp của ngôn ngữ C cơ bản.
JavaScript có thể làm gì?
Cung cấp cho các nhà thiết kế HTML một công cụ lập trình.
Có thể đặt các đoạn văn bản động vào trang HTML.
Phản ứng với các sự kiện (event).
Đọc và viết các phần tử HTML.
Kiểm tra dữ liệu.
Có thể xác định trình duyệt của người dùng
Tạo các cookie.
Chèn JavaScript vào tài liệu Web
Có 2 cách để nhúng JavaScript vào tài liệu website.
Nhúng vào cặp thẻ hoặc






Demo
Chèn JavaScript vào tài liệu Web
Có 2 cách để nhúng JavaScript vào tài liệu website.
Sử dụng javascript bằng file bên ngoài

Trong đó:
src là đường dẫn tới nơi chứa tập tin javascript.
‹script language="javascript"› khai báo cho tài liệu web biết được ngôn ngữ scripting đang được sử dụng.
Demo
Sử dụng JavaScript
Nguyễn Trọng Bảo
Khoa CNTT - HaUi
Cú pháp cơ bản của lệnh
JavaScript xây dựng các hàm, các phát biểu, các toán tử và các biểu thức trên cùng một dòng và kết thúc bằng ;
JavaScript phân biệt chữ hoa, thường
Các khối lệnh
Nhiều dòng lệnh có thể được liên kết nhau bởi { }
Ví dụ:
{
document.writeln(“Tôi là");
document.writeln(“Sinh viên HaUI");
}
Chú thích trong JavaScript
Chú thích một dòng bắt đầu bằng //
// Day la chu thich
Chú thích nhiều dòng bắt đầu bằng /* và kết thúc bằng */
/*
Phan chu thich
tren nhieu dong
*/
Cách khai báo biến
Các quy tắc về tên biến
Tên biến phân biệt chữ hoa, thường
Y và y là hai biến khác nhau
Tên biến phải bắt đầu bằng một ký tự hay dấu gạch dưới _
Sử dụng phát biểu var để khai báo biến
var x;
var ten=“javascript”;


Các toán tử số học
Các toán tử gán
Sử dụng toán tử + trên chuỗi
Toán tử + dùng để nối các biến dạng chuỗi hay các chuỗi lại với nhau
txt1 = “Xin”
txt2 = “chao”




Chú ý: Nếu cộng một chuỗi với một số thì kết quả sẽ là một chuỗi

Toán tử so sánh
DEMO
Toán tử logic và toán tử điều kiện


Toán tử điều kiện
Cú pháp: tenBien = (DieuKien) ? giaTri1 : giaTri2
VD:
str = ( a>=5 ) ? “>= 5” : “<5”


Câu lệnh If
Cú pháp:
if (điều kiện)
{
  Đoạn mã này sẽ được thực hiện nếu điều kiện đúng
}
Ví dụ:
var d=new Date();
var time=d.getHours();
if (time<10) {
  document.write("Chào buổi sáng");
}
Câu lệnh If…Else
Cú pháp:
if (điều kiện)
{
  Đoạn mã này sẽ được thực hiện nếu điều kiện đúng
}
else
{
Đoạn mã này sẽ được thực hiện nếu điều kiện sai
}
Câu lệnh If…else if…else
Cú pháp câu lệnh If…else:
if (điều kiện 1)
{
  Đoạn mã này sẽ được thực hiện nếu điều kiện đúng
}
else if (điều kiện 2)
{
Đoạn mã này sẽ được thực hiện nếu điều kiện 1 sai
}
else
{
Đoạn mã này sẽ được thực hiện nếu các điều kiện trên sai
}
Câu lệnh switch
Cú pháp:
switch(n)
{
case 1:
  Thực hiện khối lệnh 1
  break;
case 2:
  Thực hiện khối lệnh 2
  break;
default:
  Đoạn này sẽ được thực hiện nếu n
khác với case 1, 2
}
DEMO
Hàm - Function
Cú pháp
function TenHam(var1,var2,...,varX)
{
Mã lệnh
}
Câu lệnh return
Chỉ ra giá trị trả về của hàm
Phạm vi của biến
Biến cục bộ
Biến toàn cục

Hộp thoại Popup
Có 3 loại
Alert box
Confirm box
Prompt box

Alert box – hộp thoại thông báo
Cú pháp
alert(“Doan van ban");
Ví dụ










Confirm box – Hộp thoại xác nhận
Được sử dụng để yêu cầu người dùng kiểm tra hay xác nhận một vấn đề gì đó
Cú pháp:
confirm(“Doan van ban”);
Ví dụ:


Prompt box
Yêu cầu người dùng nhập thông tin gì đó trước khi vào trang web
Cú pháp
prompt("Doan van ban", "giaTriMacDinh");
Ví dụ:

Câu lệnh lặp for
Cú pháp
for (var=startValue;var<=endValue;var=var+increment)
{
Đoạn mã gì đó
}
DEMO
Câu lệnh lặp while
Cú pháp câu lệnh while
while (var<=endvalue)
 {
Mã lệnh 
  }
Cú pháp câu lệnh do … while
do
{
  Mã lệnh 
 }
while (var<=endvalue);
Các ký tự đặc biệt
Sự kiện - Event
Một hành động được phát hiện bởi JavaScript
Ví dụ:
Click chuột
Tải trang web hay hình ảnh
Rê chuột lên một điểm nào của trang web
Chọn một ô nhập liệu nào của form
Gửi form dữ liệu (submit)
Bấm một phím
Chú ý:
Các sự kiện thường được kết hợp với một hàm và hàm đó sẽ không được thực thi cho đến khi sự kiện xảy ra
Một số sự kiện trong javascript: onBlur, onFocus, onChange
Đối tượng JavaScript
Nguyễn Trọng Bảo
Giới thiệu
JavaScript là ngôn ngữ lập trình hướng đối tượng, tên tiếng anh là Object Oriented Programming (OOP)
OOP cho phép định nghĩa các đối tượng và dùng đối tượng đó để tạo biến
Đối tượng chỉ là loại dữ liệu đặc biệt bao gồm các thuộc tính và phương thức
Thuộc tính
Là các giá trị liên quan đến đối tượng


Phương thức
Là hành động được thực hiện bởi đối tượng

Đối tượng String
Dùng để xử lý các loại dữ liệu chuỗi
Phương thức tạo lập String
var txt = new String(“ chuoi gi do “);
Ví dụ:
var txt = new String(“Hello world”);
var txt="Hello world!";
document.write(txt.length);
document.write(txt.toUpperCase());
Một số phương thức
Đối tượng Date
Được sử dụng để làm việc với ngày tháng và thời gian.
Phương thức tạo lập
new Date() // lấy ngày tháng hiện tại
new Date(milliseconds) //mili giây tính từ 1970/01/01
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)
Tham khảo các thuộc tính và phương thức của đối tượng Date tại địa chỉ
http://www.w3schools.com/jsref/jsref_obj_date.asp

Ví dụ
Ví dụ 1:
today = new Date()
d1 = new Date("October 13, 1975 11:13:00")
d2 = new Date(79,5,24)
d3 = new Date(79,5,24,11,33,0)
Ví dụ 2:
var myDate=new Date();
myDate.setFullYear(2010,0,14);
Ví dụ 3:
var myDate=new Date();
myDate.setDate(myDate.getDate()+5);
So sánh 2 đối tượng Date

Mảng - Array
Được sử dụng để lưu trữ nhiều giá trị trong một biến duy nhất.
Cách tạo mảng
var myCars=new Array();
myCars[0]="Saab";      
myCars[1]="Volvo";
myCars[2]="BMW";

var myCars=new Array("Saab","Volvo","BMW");

var myCars=["Saab","Volvo","BMW"]; // literal array
Truy cập và chỉnh sửa mảng
Truy cập các phần tử của mảng thông qua chỉ số tính từ 0
Ví dụ:
document.write(myCars[0]);

myCars[0]="Opel";
document.write(myCars[0]);
DEMO
Đối tượng Boolean
Các đối tượng Boolean đại diện cho hai giá trị: "true" hoặc "false".
Tạo đối tượng Boolean
var myBoolean=new Boolean();
Tạo đối tượng với giá trị ban đầu là false
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
Tạo đối tượng với giá trị ban đầu là true
var myBoolean=new Boolean(true);
var myBoolean=new Boolean("true");
var myBoolean=new Boolean("false");
var myBoolean=new Boolean("Richard");

Đối tượng Math
Cho phép thực hiện tính toán
Bao gồm các hằng số và các phương thức
Các thuộc tính của Math
Cách dùng:
Math.E
Math.PI
Các phương thức của Math
Form Validation
Kiểm tra dữ liệu trước khi gửi về server
Thường kiểm tra các trường hợp sau
Dữ liệu rỗng
Địa chỉ email
Ngày tháng
Các trường số