Java Scrip

 JavaScript là ngôn ngữ đối tượng, có nghĩa là bao gồm nhiều kiểu đối tượng, tuy nhiên JavaScript không phải là ngôn ngữ hướng đối tượng như Java do không hỗ trợ các lớp hay tính kế t

JavaScript

Những nội dung chính:

1 Giới thiệu

2 Cách sử dụng

3 Khai báo biến

4 Một số cửa sổ thông báo

5 Toán tử

6 Các câu lệnh

7 Khai báo hàm

8 Đối tượng

9 The Browser Object Model (BOM)

10 The Document Object Model(DOM)

11 Sự kiện và sử lý sự kiện

12 Regular Expression

1 Giới thiệu

Đặt vấn đề:

load và kiểm tra tính hợp lệ của tất cả các giá trị input từ phía người dùng Có lỗi sẽ gởi thông báo và yêu cầu nhập lại…

thiện tốc độ là rất quan trọng Làm sao các giá trị input từ phía người dùng gởi lên server là các giá trị hợp lệ, để giảm bớt công việc cho server

Giải quyết vấn đề:

hợp lệ của các giá trị ở client-side Đó là Javascript

xử lý sự kiện từ phía người dùng

 Javascript được tích hợp trong trình duyệt: Microsoft Internet Explorer

và Netscape Nevigator

1 Giới thiệu

 "Đối với các nhà phát triển Internet, hiểu Javascript thì quan

trọng như hiểu HTML ".

 Javascript là ngôn ngữ script có thể gắn vào các trang HTML.

 Nó không được biên dịch mà được trình duyệt diễn dịch Trình

duyệt đọc Javascript dưới dạng mã nguồn.

 JavaScript là ngôn ngữ đối tượng, có nghĩa là bao gồm nhiều

kiểu đối tượng, tuy nhiên JavaScript không phải là ngôn ngữ hướng đối tượng như Java do không hỗ trợ các lớp hay tính

kế thừa.

 Giống với HTML và Java, JavaScript được thiết kế độc lập với

hệ điều hành Nó có thể chạy trên bất kì hệ điều hành nào mà trình duyệt có hỗ trợ.

<script language=“Javascript” src=”b/a.js”>

//Insert all JavaScript code here

</script>

Mặc định file.js được đặt trong thư mục hiện hành

 Ghi chú trong JavaScript: Dùng dấu <!–(ẩn code javaScript trong

HTML) Dấu // (trình duyệt không biên dịch)

2 Cách sử dụng

1.2 Cặp thẻ <noscript> … </noscript> :

code trong thẻ sẽ được hiện ra Còn nếu trình duyệt có hỗ trợ Javascript thì code trong thẻ sẽ được bỏ qua

không sử dụng

1.3 Hiển thị một dòng text đơn giản:

sau: write() và writeln()

3 Khai báo biến

2.1 Biến và phân loại biến:

2.2 Khai báo kiểu dữ liệu:

 Javascript không cần khai báo kiểu dữ liệu Kiểu dữ liệu sẽ được tự

động chuyển thành kiểu phù hợp khi cần thiết

 Ví dụ 2: <script language=JavaScript>

var num=12;num = num + 8;

document.writeln(“Result is: ” + num);

3 Khai báo biến

Kiểu nguyên(Integer): biểu diễn theo 3 cách: hệ cơ số 10(chữ đầutiên phải khác 0), hệ cơ số 8(chữ đầu tiên là số 0), hệ cơ số 16(hai chữ số

Kiểu logic(Boolean): Có 2 giá trị: True hay False

Kiểu chuỗi(String): Được đặt trong dấu: “…” hay ‘…’ Để sử dụng dấu nháy kép trong chuỗi sử dụng \”

Vd: document.write(“ \”How are you?\” ”);

Kết quả: “How are you?”

 Ngoài ra còn có 2 kiểu dữ liệu đặc biệt khác là: null và undefined

4 Một số cửa sổ thông báo

window.confirm() Chúng ta cũng không cần gọi đối tượng

<script language=JavaScript>

window.alert(“Funny with JavaScript”);

</script>

4 Một số cửa sổ thông báo

 window.prompt([message],[init]): giống như alert() nhưng nó còn

cung cấp một textbox init là giá trị khởi tạo cho textbox

document.clear(); //Clears the page

if (confirm(“Are you ready? ”) == true)

alert(“Then we can process!”); else alert(“We’ll try again when you fell better”);

</script>

5 Toán tử

5.1 Biểu thức logic:

(condition) ? valTrue : valFalse: Nếu condition là đúng thì biểu thứcNhận giá trị là valTrue và ngược lại là valFalse

5.2 Kiểu toán tử(Operator):

 Kiểu gán: Toán tử gán là dấu =, mục đích gán giá trị bên phải bằng

giá trị bên trái

Kiểu gán thông thường Kiểu gán rút gọn

Lớn hơnLớn hơn hoặc bằngNhỏ hơn

Nhỏ hơn hoặc bằng

var1 % var2var++

var—

Lấy phần dưTăng var lên 1Giảm var đi 1

5 Toán tử

 Dịch bit: Ngoài ra còn một số toán tử dịch chuyển bitwise Đầu tiên

giá trị được chuyển thành 32bit, sau khi dịch giá trị lại được chuyển thành kiểu toán hạng bên trái Sau đây là các toán tử dịch chuyển:

100 thành 10000)

• Dịch phải Vd: 16>>2 = 4

• Toán tử dịch phải có chèn 0 Dịch chuyển toán hạng trái sang phải một số lượng bit bằng toán hạng bên phải Bit dấu được dịch chuyển từ trái (giống >>) Những bit bị dịch sang phải bị xóa đi Vd: -8>>>2 = 1073741822(bởi các bit dấu đã trở thành các bit số) Tất nhiên, với số dương thì >> và >>> là giống nhau

 Ví dụ 6: <script language=JavaScript>

var age = prompt(“Please insert your age”, “21”);

if (age > 20) alert(“Let’s party!”);

</script>

 If… else

if (condition){

//Các lệnh với condition đúng}else //Các lệnh với condition sai

 Ví dụ 7: <script language=JavaScript>

var mark = prompt (“please insert your mark ”, “”);

if (mark > 5) alert (“You pass this subject”);

else alert(“To learn again”);

6 Các câu lệnh

 if/ else if

if (condition1){

//Các lệnh với condition1 đúng}else if (condition2){

//Các lệnh với condition2 đúng}else //Các lệnh với conditon1 và conditon2 sai

<script language=javascript>

document.write("<H2>");

var age=eval( prompt("How old are you? ",""));

if( age > 0 && age <= 12 ){

document.write("You pay the child's fare ");

} else if( age > 12 && age < 60 ){

document.write("You pay the regular adult fare ");

} else document.write("You pay the senior fare! ");

document.write("</H2>");

</script>

6 Các câu lệnh

6.2 Các câu lệnh lặp:

 Vòng lặp For

- initExpr: Giá trị khởi tạo

- Condition: Điều kiện lặp

- expr: Giá trị khởi tạo sau khi lặp

for (initExpr; condition; expr){

//Các lệnh được thực hiện trong vòng lặp thỏa condition}

6 Các câu lệnh

 Lệnh for… in: Lệnh này dùng để lặp tất cả các thuộc tính của

đối tượng Tên biến có thể là một giá trị bất kì

for ( <variable> in <object> ){

//Các lệnh trong vòng lặp }

 Ví dụ 11: In ra tất cả thuộc tính của đối tượng window

<script language=JavaScript >

var i = 1 ; for (var x in window ){

document.writeln(“Thuộc tính ” + i + “là: ” + x +

“<br>”);

i ++ ; }

</script>

Kết quả: Được 37 dòng ứng với 37 thuộc tính

6 Các câu lệnh

 Vòng lặp do…while:

do { //Các lệnh trong vòng lặp khi condition là đúng }

Kết quả: Giống với vd ở vòng lặp For

6.3 Các câu lệnh điều kiện trong vòng lặp:

 Lệnh Break: Dùng để kết thúc vòng lặp while hay for

6 Các câu lệnh

 Ví dụ 14:

<script language=JavaScript >

var x = 1 ; while(x <= 4 ){

 Lệnh continue: Giống với lệnh break nhưng việc lặp được kết

thúc và bắt đầu từ đầu vòng lặp Đối với while , continue điều khiển quay lại điều kiện; với for ,điều khiển quay lại expr

6 Các câu lệnh

6.4 Các câu lệnh trên đối tượng:

 Lệnh with: Dùng để thiết lập đối tượng ngầm định cho một

 Lệnh new: Tạo ra một thể hiện mới của một đối tượng

objec_var = new Object (param1, parm2, …);

 Vd:

student1 = new Student( “111111” , “Luu Diec Phi” );

6 Các câu lệnh

 Lệnh this: Dùng để chỉ đối tượng hiện thời Đối tượng được gọi

thường là đối tượng hiện thời trong phương thức hay trong hàm

this.[properties]

- Vd:

<script language=JavaScript>

function Student(code, name){

this.code = code;

this.name = name;

6 Các câu lệnh

 Ví dụ 16:

<script language=JavaScript >

function Student ( code, name ){

this code = code;

this name = name;

} var Student1 = new Student (“1111110", “To Huu Bang");

var Student2 = new Student ("0000000", “Luu Diec Phi");

document.writeln("Student 1 : " + Student1 code + " " + Student1 name + "<br>");

document.writeln("Student 2 : " + Student2 code + " " + Student2 name );

</script>

7 Khai báo hàm

7.1 Các hàm có sẵn:

- JavaScript cung cấp 3 phương thức để chuyển đổi các kiểu dữ liệu

nguyên thủy: String(), Number() và Boolean()

- Vd: <script language=JavaScript>

var num1 = prompt("Enter a number: ","");

var num2 = prompt("Enter another number: ","");

var result = Number(num1) + Number(num2);

// Convert strings to numbersalert("Result is "+ result);

var myString=String(num1);

result=myString + 200; // String + Number is Stringalert("Result is "+ result); // Concatenates 200 to thealert("Boolean result is "+ Boolean(num2)); // True

</script>

Kết quả: Number

String Boolean

 parseInt(): Chuyển một chuỗi bắt đầu bằng số nguyên thành

một số nguyên (NumberBase: Cơ số)

parseInt( String , NumberBase ); Default base is 10

parseInt( String );

<script language = "JavaScript">

var grade = prompt("What is your grade? ", "");

// Grade entered as a string

grade=parseInt(grade); // Grade converted to an integerdocument.write("grade type is<em> " + typeof(grade));

grade+=10; document.write("<em><br>Aftera 10 point bonus,your grade is "

+ grade + "!<br>");

</script>

7 Khai báo hàm

 parseFloat(String): Giống parseInt() nhưng là số Float

parseFloat(“65.5 Year old”);  Kết quả: 65.5

parseFloat(“Hello 65.5”);  Kết quả: NaN

 eval(String): Đánh giá chuỗi String và tră về kết quả của

những câu lệnh trong chuỗi

 Ví dụ 18:

eval(“(5 * 10) / 2”);  25

eval(“true”);  true kiểu boolean

eval("document.writeln('abc')");  abc

7 Khai báo hàm

7.2 Cách xây dựng một hàm:

function nameFunction([param1], [param2]…){

//Các lệnh trong hàm }

 Ví dụ 19:

<script language=JavaScript >

function welcome(){

var place = “Nong Lam”;

alert(“I love ” + place );

} welcome(); //Function call

</script>

<a href ="javascript:greetings()">

<big> Click here for Salutations </big> </a><br> </center>

</body> </html>

</script>

8 Đối tượng

var car = new Object();

var friends = new Array("Tom", "Dick", "Harry");

var now= new Date("July 4, 2003");

8.1 Tạo đối tượng với Object()

<script language = "javascript">

var toy = new Object(); // Create the object

toy.name = "Lego"; // Assign properties to the object

toy.color = "red";

toy.shape = "rectangle";

</script>

8 Đối tượng

8.2 Tạo đối tượng với hàm mà người dùng định nghĩa:

<script language = "javascript">

function book(title, author, publisher){ // Defining properties

this.title = title;

this.author = author;

this.publisher = publisher;

} </script>

 Thuộc tính có thể là đối tượng:

<script language = "javascript">

var pet = new Object(); // pet is an object pet.cat = new Object(); // cat is a property of the pet // object cat is also an object

pet.cat.name="Sylvester";

pet.cat.color="black";

pet.dog = new Object();

pet.dog.breed = "Shepherd";

8.3 JavaScript core objects:

8.3.1 Array Objects: Khởi tạo một mảng:

var array_name = new Array() ; var array_name = new Array ( 100 );

var array_name = new Array (“Rose”, “Orchid”, 1 , 2 ); //Định nghĩa một mảng với bất kì kiểu dữ liệu

<script language="JavaScript" >

var book = new Array ( 5 ); // Create an Array object book[0] = "War and Peace";

book[1] = "Huckleberry Finn";

book[2] = "The Return of the Native";

book[3] = "A Christmas Carol";

book[4] = "The Yearling";

</script>

var years = new Array (10);

for(var i = 0 ; i < years length ; i++ ){

years[ i ]= i + 2000 ; document.write("years[" + i + "] = " + years[ i ] + "<br>");

}

</script>

Adds elements to the end of an array Removes and returns the first element of an array Adds elements to the beginning of an array

Creates a new array from elements of an existing array Sorts an array alphabetically, or numerically

Reverses the order of the elements in an array Removes and/or replaces elements of an array Returns a string representation of the array in local format Returns a string representation of the array

8 Đối tượng

 concat(): Nối 2 mảng thành một mảng mới

newArray = oldArray concat ( new elements );

 Ví dụ 24:

<script language="JavaScript" >

var names1 =new Array ("Dan", "Liz", "Jody" );

var names2 =new Array ("Tom", "Suzanne");

document.write("<b>First array: " + names1 + "<br>");

document.write("<b>Second array: " + names2 + "<br>");

document.write("<b>After the concatenation <br>");

names1 = names1 concat ( names2 );

document.write( names1 );

</script> First array: Dan, Liz, Jody

Second array: Tom, SuzanneAfter the concatenation

var array =new Array (“Dan”, “Liz”, “Jody”);

document.write("<b>First array: " + array + "<br>");

var str = array join (“@”);

document.write("<b>After the join <br>");

8 Đối tượng

 pop(): Loại bỏ một phần tử ở cuối

var return_value =Arrayname pop() ;

 Ví dụ 26:

<script language="JavaScript" >

var names =new Array("Tom", "Dan", "Liz", "Jody");

document.write("<b>Original array: "+ names +"<br>");

var newstring = names pop() ; // Pop off last element of array document.write("Element popped: "+ newstring );

document.write("<br>New array: "+ names + "</b>");

8 Đối tượng

 push(): Thêm vào mảng những phần tử mới ở vị trí cuối

Arrayname push( new elements ); // Appended to the array

 Ví dụ 27:

<script language="JavaScript" >

var names =new Array ("Tom" , "Dan" , "Liz" , "Jody");

document.write("<b>Original array: " + names + "<br>");

names push( "Daniel","Christian" ) ; document.write("New array: "+ names + "</b>");

</script>

Original array: Tom, Dan, Liz, JodyNew array: Tom, Dan, Liz, Jody, Daniel, Christian

names unshift( "Nicky" , "Lucy" ) ; document.write("<br>New array after the unshift: " + names );

</script>

Original array: Tom, Dan, Liz

8 Đối tượng

 slice(): Copy thành phần của mảng sang một mảng mới

var newArray = Arrayname slice( first element , last element ) ;

copy từ vị trí (first element) tới vị trí trước vị trí (last element)

 Ví dụ 29:

<script language="JavaScript">

var names =new Array( "Dan" , "Liz" , "Jody" , "Christian" , "William" ) ; document.write("<b>Original array: "+ names + "<br>");

var sliceArray =names slice( 2 , 4 ) ;

document.write("New array after the slice: ");

document.write( sliceArray );

</script>

Original array: Dan, Liz, Jody, Christian, WilliamNew array after the slice: Jody, Christian

8 Đối tượng

 splice(): Loại bõ một số phần tử trong mảng và có thể lặp lại

những phần tử đó với phần tử mới

Arrayname splice( index position , number of elements to remove ) ;

Arrayname splice( index position , number of elements to remove ,

names.splice( 1 , 2 , "Peter" , "Paul" , "Mary");

document.write("New array: " + names + "</b>");

</script>

Original array: Tom, Dan, Liz, Jody