Jquery 02 hướng dẫn tạo slideshow ảnh bằng jquery p2

Việc xếp chồng sẽ được thực hiện bởi css. Cụ thể là container bao bên ngoài danh sách ảnh sẽ có thuộc tính position: relative trong khi đó từng item hình ảnh sẽ có thuộc tính position: absolute; top:0; left:0 đây là các css giúp các item hình ảnh xếp thành 1 chồng.

• Tiếp theo ẩn tất các các hình ảnh bằng thuộc tính display: none, tuy nhiên ngoại lệ hình đầu tiền sẽ được hiện bằng thuộc tính display: block, và hình ảnh đầu tiên sẽ được thêm 1 class active để đánh dấu là item hình ảnh được hiện.

  Hàm setInterval(code,millisec,lang) sẽ thực thi một hàm được truyền vào làm tham số sau một khoảng thời gian xác định cho đến khi bạn gọi hàm clearInterval(). Tham số của hàm clearInterval() chính là giá trị trả về của setInterval(). Ta có thể gọi giá trị đó là định danh của timer. Các tham số của hàm setInterval(): Parameter Description code Required. A reference to the function or the code to be executed millisec Required. The intervals (in milliseconds) on how often to execute the code lang Optional. JScript | VBScript | JavaScript Chuẩn bị: Chép ba tập tin ảnh vào thư mục chứa tập tin html, đặt tên các tập tin ảnh này như trong đoạn mã bên dưới. Sau đó tôi tạo một mảng các hình ảnh sẽ dùng cho slide show và một hàm dùng để thực hiện slide show là slideImage(). Bạn đổi thay đổi ảnh của một
• 46. Miêu tả 1 :link, :visited, :active, :hover Thao tác với các liên kết 2 :focus Thao tác với các đối tượng khi nó ở “focus” 3 :lang(language) Tất cả các đối tượng với thuộc tính lang 4 :first-letter Ký từ đầu tiên của một đối tượng nào đó 5 :first-line Dòng đầu tiên của một đối tượng nào đó 6 :first-child Con đầu tiên của một đối tượng nào đó 7 :before Chèn nội dung vào trước đối tượng nào đó 8 :after Chèn nội dung vào sau đối tượng nào đó
• 47. diện mẫu cho button – Dạng 1
• 48. diện mẫu cho button – Dạng 2
• 49. diện mẫu cho button – Dạng 3
• 50. diện mẫu cho box Box chứa nội dung – Dạng 01
• 51. diện mẫu cho box Box chứa nội dung – Dạng 02
• 52. diện mẫu cho box Box chứa nội dung – Dạng 03
• 53. diện mẫu cho box Box chứa nội dung (có tiêu đề ) – Dạng 01
• 54. diện mẫu cho box Box chứa nội dung (có tiêu đề ) – Dạng 2
• 55. diện mẫu cho box Box chứa nội dung (có tiêu đề ) – Dạng 3
• 56. diện mẫu cho box Box chứa nội dung (có tiêu đề ) – Dạng 4
• 57. diện mẫu cho box Box chứa nội dung (có tiêu đề ) – Dạng 5
• 58. diện mẫu cho box Box chứa nội dung (có tiêu đề ) – Dạng 6
• 59. diện mẫu cho box Box bo tròn chứa nội dung – Dạng 1
• 60. diện mẫu cho box Box bo tròn chứa nội dung – Dạng 2
• 61. diện mẫu cho box Box bo tròn chứa nội dung và tiêu đề – Dạng 1
• 62. diện mẫu cho box Box bo tròn chứa nội dung và tiêu đề – Dạng 2
• 63. diện mẫu cho box Box bo tròn chứa nội dung và tiêu đề – Dạng 3
• 64. diện mẫu cho tab Dạng 1
• 65. diện mẫu cho tab Dạng 2
• 66. diện mẫu cho tab Dạng 3
• 67. diện mẫu cho tab Dạng 4
• 68. diện mẫu cho menu Dạng 1
• 69. diện mẫu cho menu Dạng 2
• 70. diện mẫu cho menu Dạng 3
• 71. ? • Ngôn ngữ thông dịch, mã nguồn của nó được nhúng hoặc tích hợp trực tiếp vào tập tin HTML. Khi trang web được tải xong, trình duyệt sẽ thông dịch và thực hiện các mã lệnh này. • Được cung cấp hoàn toàn miễn phí
• 72. làm gì? • Làm cho trang HTML trở nên sinh động hơn. • Phản ứng lại với một sự kiện nào đó từ phía người dùng. • Đọc hoặc thay đổi nội dung của các phần tử trong trang HTML • Kiểm tra dữ liệu • Phát hiện các loại trình duyệt khác nhau • Tạo các tập tin cookie lưu trữ và truy xuất thông tin trên máy tính của người truy cập website • …
• 73. như thế nào ? • Để sử dụng Javascript rất đơn giản, chúng ta chỉ cần đưa các câu lệnh của nó vào trong thẻ index.html  Run:  Cancel: node server.js Ctrl+C Kết nối Server & Client
• 231. gửi dữ liệu đến Server Server  Gửi:  Nhận: socket.on(„name‟,function(data){ }); // server index.html server.js
• 232. liệu đến Server III. Socket.io Package server.js index.html io.sockets.on(„connection‟,function(socket){ console.log(„Client connected …‟); socket.on(„messages‟,function(data){ console.log(data); }); listen for ‘messages’ events }); server.js
• 233. liệu đến clients III. Socket.io Package clients Server client Server clients Server 1. Server gửi đến client đang tạo ra kết nối. 2. Server gửi đến tất cả các clients ngoại trừ client tạo ra kết nối để bắt đầu nó. 3. Server gửi đến tất cả các clients. socket.broadcast.emit(“name”,data); io.sockets. emit(“name”,data) socket. emit(“name”,data); 1 1 2 2 3 3
• 234. liệu đến Client III. Socket.io Package index.html io.sockets.on(„connection‟,function(socket){ console.log(„Client connected …‟); emit the 'messages' event on the client socket.emit(„messages‟,{hello:‟world‟}); }); server.js 1. Server gửi đến client đang tạo ra kết nối.
• 235. src=“http://localhost:8080/socket.io/socket.io.js” > index.html io.sockets.on(„connection‟,function(socket){ socket.broadcast.emit („messages‟ ,{hello:‟world‟}); bradcase message to all other clients connected }); server.js Server phát dữ liệu đến clients 2. Server gửi đến tất cả các clients ngoại trừ client tạo ra kết nối để bắt đầu nó.
• 236. src=“http://localhost:8080/socket.io/socket.io.js” > index.html io.sockets.on(„connection‟,function(socket){ io.sockets.emit („messages‟ ,{hello:‟world‟}); bradcase message to all other clients connected }); server.js Server phát dữ liệu đến clients 3. Server gửi đến tất cả các clients.
• 237. package • Dùng để kết nối và xử lý mysql. • Được viết bằng JavaScript • Không yêu cầu biên dịch IV. Mysql Package
• 238. uninstall mysql npm install mysql • Cài đặt • Gỡ bỏ IV. Mysql Package
• 239. require(„mysql‟).createConnection({ host : „localhost‟, user : „root‟, password : ‟123‟, database : „database_name‟ }); connection.connect(); Kết nối với Mysql IV. Mysql Package server.js
• 240. users ORDER BY id ASC', function(err, results) { if (err) throw err; else { console.log(results); } }); Truy vấn database có 3 cách IV. Mysql Package connection.query( sql, function(err,results){ }); Cách 1:  Sql : Câu truy vấn sql
• 241. users WHERE id = ?', [1],function(err, results) { if (err) throw err; else { console.log(results); } }); Truy vấn database có 3 cách IV. Mysql Package connection.query(sql, selectionArgs, function(err,results){ }); Cách 2:  Sql : Câu truy vấn sql.  selectionArgs: Mảng các tham số phụ cho câu điều kiện.
• 242. có 3 cách IV. Mysql Package connection.query(sql) .on('error', function(err) { handle error }) .on('result', function(row) { receive data }).on('end', function() { all rows have been received }); Cách 3: connection.query('SELECT * FROM users') .on('error', function(err) { throw err; }) .on('result', function(row) { console.log(row); }) .on('end', function() { console.log('end'); });
• 243. {name:‟zendvn‟}; connection.query(„INSERT INTO users SET ?',data, function(err, result) { if (err) throw err; else { console.log(result); } }); INSERT IV. Mysql Package connection.query(sql,data, function(err,results){ });  Sql : Câu truy vấn sql  data: dữ liệu cần thêm
• 244. [„nodejs‟,2]; connection.query(„UPDATE users SET name = ? WHERE id = ?„,data, function(err, result) { if (err) throw err; else { console.log(result); } }); UPDATE IV. Mysql Package connection.query(sql, selectionArgs, function(err,results){ });  Sql : Câu truy vấn sql.  selectionArgs: Mảng các tham số phụ cho câu điều kiện.
• 245. WHERE id = ?„,[2], function(err, result) { if (err) throw err; else { console.log(result); } }); DELETE IV. Mysql Package connection.query(sql, selectionArgs, function(err,results){ });  Sql : Câu truy vấn sql.  selectionArgs: Mảng các tham số phụ cho câu điều kiện.
• 246. dụng chat Chức năng ? • Nhiều người chat với nhau • 2 người chat với nhau V. Xây dựng ứng dụng Chat
• 247. ? • Html • Css • Jquery • Mysql • Php • Node.js V. Xây dựng ứng dụng Chat
• 248. xampp. o node.js  socket.io package  mysql package  date-format package V. Xây dựng ứng dụng Chat
• 249. liệu V. Xây dựng ứng dụng Chat
• 250. dụng 3 nhóm chức năng o Đăng nhập – đăng xuất o Chat giữa nhiều người ( chat room) o Chat giữa 2 người V. Xây dựng ứng dụng Chat
• 251. người clients Server V. Xây dựng ứng dụng Chat 1 2 3