LOGO

MVCMVC

Write less, do more

jQuery

Contents

Vấn đề áp dụng mô hình MVC2

Giải pháp3

Client side MVC4

Javascript jQuery1

Demo5

LOGO

Javascript jQueryJavascript jQuery

MVCMVCjQuery

Javascript jQuery

- jQuery là một framwork javascript mã nguồn mở được sử dụng rộng rãi nhất hiện nay.- Giúp viết mã nhanh javascript, ngắn gọn,

súc tích trên cùng một công việc.- Truy vấn tập tin Htmlxử lí sự kiện,

animate, ajax,...- Với jQuery mã nguồn hoạt động giống

nhau trên mọi trình duyệt.

Javascript jQuery

Tạo Object :var doiTuong= {

thuocTinh : giaTri,

}

Chú ý : giaTri có thể là chuổi số hoặc function, các thuộc tính đều có là public

Vd :

var sinhvien = {

mssv : “0912000”

getDiemTB : function(){

return 10;

}

}

Javascript jQuery

- Nội dung giới thiệu jQuery đã có nhóm được phân công thiết trình nên nhóm mình không tập trung quá sau vào nó mà chỉ giới thiệu những cái cơ bản có liên quan đến demo của nhóm. Các bạn muốn tìm hiểu sau có thể lên trang chủ của jQuery hoặc đợi nhóm sau thuyết trình

Javascript jQuery

Khai bao classvar TenClass = function(thamso1,thamso2){

this.thuocTinhPrivivate = thamso1;var thuocTinhPublic = thamso2;

}Vd :var SinhVien = function(mssv, hoten ){

var _mssv = mssv;var _hoTen = hoten;this.getMSSV = function(){

return _mssv;}this.getHoTen = function(){

return _hoTen;}

}var sv = new SinhVien("0912000","Nguyen Van A");

Javascript jQuery

Array :$(function () {

var dsTen = new Array();

dsTen[0] = "Nguyễn Văn A";

dsTen[1] = "Trần Văn B";

/*

* hoặc

* var dsTen = ["Nguyễn Văn A", "Trần Văn B"];

*/

$.each(dsTen, function (index, value) {

alert("Phần tử thứ " + index + " = " + value);

});

});

 

Javascript jQuery

Mở rộng đối tượng jQuery$.extend({

min: function (a, b) { return a < b ? a : b; },

max: function (a, b) { return a > b ? a : b; }

});

Kết quả :

$.min(2, 3); // => 2

$.max(4, 5); // => 5

Javascript jQuery

Mở rộng phần tử jQuery ( được tạo ra với selector)

$.fn.extend({

check: function () {

return this.each(function () { this.checked = true; });

},

uncheck: function () {

return this.each(function () { this.checked = false; );

}

})

Kết quả :$("input[@type=checkbox]").check();

$("input[@type=radio]").uncheck(); 

Javascript jQuery

Json (JavaScript Object Notation) :Một cách đơn giản thì như sau khi khai báo một object :var sv = { mssv : '09129000', ten:'hello'}

Khi trang web của bạn yêu cầu server trả về một ‘json’, server sẽ trả về một chuổi sau :

{ mssv : '09129000', ten:'hello'}Chuổi này chính là json

Javascript jQuery

Ajax (Asynchronous JavaScript and XML) : là kĩ thuật gửi và nhận dử liệu giữa server là client một cách bất đồng bộ.

$.ajax({async : function,beforeSend : function,cache : boolean,complete : function,data : Object,ArraydataType : xml | html | scipt | text,error : function,success : function,timeout : mili giây,type : POST|GET,url : địa chỉ

})

LOGO

(Server side)

MVCMVCjQuery

Vấn đề áp dụng mô hình MVCVấn đề áp dụng mô hình MVC

Vấn đề áp dụng

Controller

Model

View

HTTPrequest

HTTPRespond

Selects andRenders

Read Data to render

initializes

MVC tại server

Vấn đề áp dụng

Javascript, ajax (các script client) đóng vai trò quan trọng trong ứng dụng web(làm tăng tính tương tác,validation, hiệu ứng …) , vậy chúng được quản lí ở đâu trong mô hình MVC này ?

Vấn đề

Ta thấy rằng các client scipt không thuộc vào trong các mô hình MVC server side này.

Vấn đề áp dụng

Không quản lí

Rối rấm

Khó bảo trì, kiểm

tra

View quản lí toàn bộ

Củng không cải thiện được

Javascript, ajax

LOGO

Giải phápGiải pháp

MVCMVCjQuery

Giải pháp

MVC :- Phân chia sự phụ thuộc.- Mềm dẻo.- Tái sử dụng.Þ Dể kiểm tra, dò lổiÞ Tại sao chỉ áp dụng với

server side ???

Giải pháp

MVC server side + MVC client side=ALL !!!!

LOGO

Server,Client MVCServer,Client MVC

MVCMVCjQuery

Server,Client MVC và jQuery

Sơ đồ

Model

Controller

View

Model

Controller

View

request

Respond