Công cụ
- photoshop
- balsamiq
- sketch app (cho mac)
Tuesday, October 2, 2018
Mockup giao diện
Mockup: vẽ phác thảo, vẽ nháp giao diện
Công cụ
Công cụ
Sunday, September 23, 2018
Soạn thảo HTML siêu nhanh với Emmet (gõ code CSS tự sinh ra HTML)
Emmet – công cụ hỗ trợ soạn thảo HTML siêu nhanh
Các bạn lập trình viên làm việc với HTML chắc hẳn nhiều lần cảm giác mỏi mệt khi viết các dòng HTML gây tốn thời gian của bạn. Cách đây vài phút, trong lúc xem một video hướng dẫn vài mẹo nhỏ về HTML5, ngẫu nhiên thấy được cách viết HTML rất nhanh chóng, tôi lập tức tìm hiểu làm thế nào để có thể viết HTML nhanh như vậy. Sau đây cũng xin chia sẻ cùng các bạn cách để viết HTML nhanh chóng này.Công cụ hỗ trợ thực hiện điều mà tôi vừa nói mang tên Emmet. Emmet không phải là một trình soạn thảo văn bản mà là một phần bổ trợ cho các trình soạn thảo văn bản, IDE lập trình.
Sử dụng Emmet
Khi sử dụng Emmet, các bạn có thể viết HTML theo cách viết CSS một cách nhanh chóng. Ví dụ, bạn gõ dòng mã sau và ấn TAB sau khi gõ xong:.contain>form#new-form>input.text-input
Đoạn mã HTML được sinh ra như sau:
Cài đặt Emmet
Emmet có thể được cài đặt trên nhiều trình soạn thảo văn bản hay các IDE. Trong bài viết này tôi hướng dẫn cách cài đặt Emmet trên trình soạn thảo SublimeTextvà IDE PhpStorm. Ngoài ra bạn có thể tìm hiểu thêm Emmet hỗ trợ các trình soạn thảo/IDE nào thông qua địa chỉ http://emmet.io/download/Cài đặt Emmet trên SublimeText
Bước 1: tải gói bổ trợ Emmet tại đây
Bước 2: trên thanh menu của SublimeText, vào menu Preferences, chọn Browse Packages…
Khởi động lại SublimeText và thử cảm giác thành quả với emmet thôi, bạn sẽ thấy mình có thể soạn thảo HTML siêu nhanh chóng.
Cài đặt Emmet trên IDE PhpStorm
Vào menu File, chọn Setting, trên hộp thoại Setting, kích vào mục Plugins, kích vào nút Browse Repositories…
Để tham khảo thêm cách sử dụng Emmet hiệu quả, các bạn có thể xem video dưới đây hoặc truy cập website http://docs.emmet.io/ để biết thêm chi tiết.
Chúc các bạn luôn vui vẻ với công việc lập trình.
https://www.youtube.com/watch?v=8n923UBjV9w
Layout
độ rộng trang web thường từ 1000 => 1200px
2 bước design:
1. Cấu trúc thường gặp của 1 trang HTML
2. Cấu trúc trang HTML sử dụng các thẻ HTML5
3. Chức năng của một số thẻ hay dùng
2 bước design:
- Chia layout (vẽ sơ qua trên giấy nháp)
- Làm mockup
- balsamic (vẽ drap)
- sketch app (vẽ pixel perfect)
1. Cấu trúc thường gặp của 1 trang HTML
2. Cấu trúc trang HTML sử dụng các thẻ HTML5
3. Chức năng của một số thẻ hay dùng
- Thẻ <header>: Phần đầu của trang web, cũng có thể là phần đầu của bài viết (chú ý thẻ <header> khác với thẻ <head>).
- Thẻ <nav>: Chứa điều hướng chính của trang web (menu chính)
- Thẻ <section>: Dùng để nhóm các phần nội dung liên quan đến nhau, và thông thường mỗi section sẽ có tiêu đề riêng của nó.
- Thẻ <article>: Chứa các khối nội dung độc lập trên trang web, ví dụ như: các bài viết, các đoạn comment, … Một section có thể chứa nhiều article có nội dung liên quan, hoặc nếu 1 article có nội dung lớn thì nó cũng có thể chứa nhiều section.
- Thẻ <aside>: Có tác dụng tùy vào vị trí của nó trên trang HTML. Nếu aside nằm trong article thì nó chứa thông tin liên quan đến article nhưng không quá cần thiết đối với article (ví dụ như 1 đoạn chú thích cho bài viết hay các đường link đến bài viết cùng chuyên mục). Nếu aside nằm ngoài article thì nó chứa thông tin liên quan đến toàn bộ trang nhưng không phải thông tin chính (ví dụ như danh sách các bài viết mới nhất, thông tin quảng cáo, ...)
- Thẻ <footer>: Phần cuối của trang web, cũng có thể là phần cuối của bài viết.
- Thẻ <address>: Chứa thông tin liên hệ, tác giả (của bài viết hoặc của trang web). Nếu là thông tin liên hệ của trang web thì thường đặt trong footer.
Bootstrap
Sử dụng để responsive trang web
phải import cả file bootstrap.css và bootstrap.js (ngoài ra cả jquery, vì boostrap sử dụng jquery)
bản 4.0 trở lên còn sử dụng thêm thư viện popper.js
ví dụ tạo menu => sử dụng component : navbar
Chú ý
- Glyphicons trong Bootstrap sử dụng tương tự như Font Awesome.
- Khi sử dụng menu, để highlight 1 item ta gán thêm class "active" vào thẻ <li>. Ví dụ người dùng đang ở trang Album ảnh thì ta thêm class="active" vào thẻ <li> của Album ảnh
--------------------------
tạo main content => sử dụng 2 container (tức là thẻ div hoặc thẻ section bao quanh toàn bộ nội dung, làm cho phần bên trong ko tràn ra ngoài)
=> ko nên sử dụng container-fluid mà nên sử dụng container
-----------
Grid system
------------
2 cách CSS cho ảnh:
Hay sử dụng nhất là modal
Modal:
2 cách gọi modal
Cách 1: sử dụng các attribute của html
Cách 2: qua jquery
Ví dụ
$('#myModal').modal('show'); //hiển thị modal
$('#myModal').modal('toggle');//bật tắt modal
//tắt backdrop element cho nên kích ở ngoài modal sẽ ko tắt được modal (mặc định backdrop = true c
cho nên kích ngoài modal sẽ tắt được modal)
$('#myModal').modal({backdrop:false});
//tắt backdrop nhưng nền của trang web vẫn bị mờ đi
$('#myModal').modal({backdrop:"static"});
// ấn esc thì modal không bị đóng
$('#myModal').modal({keyboard:false});
phải import cả file bootstrap.css và bootstrap.js (ngoài ra cả jquery, vì boostrap sử dụng jquery)
bản 4.0 trở lên còn sử dụng thêm thư viện popper.js
Phần CSS của bootstrap:
Các component trong bootstrap được sử dụng để tạo các component của trang webví dụ tạo menu => sử dụng component : navbar
Chú ý
- Glyphicons trong Bootstrap sử dụng tương tự như Font Awesome.
- Khi sử dụng menu, để highlight 1 item ta gán thêm class "active" vào thẻ <li>. Ví dụ người dùng đang ở trang Album ảnh thì ta thêm class="active" vào thẻ <li> của Album ảnh
<li class="active"><a href="#">Album ảnh <span class="sr-only">(current)</span></a></li>--------------------------
tạo main content => sử dụng 2 container (tức là thẻ div hoặc thẻ section bao quanh toàn bộ nội dung, làm cho phần bên trong ko tràn ra ngoài)
- container (độ rộng xác định ở một số loại kích thước màn cụ thể)
- container-fluid (width không được xác định, tức là phần tử cha rộng bao nhiêu nó sẽ rộng bấy nhiêu. vì nó là thẻ div mà nếu width ko được xác định thì nó sẽ rộng hết chiều rộng phần tử cha)
=> ko nên sử dụng container-fluid mà nên sử dụng container
-----------
Grid system
- hệ thống layout lưới của bootstrap sử dụng mô hình 12 cột => có thể layout 1, 2, 3, 4, 6, 12 cột trong 1 hàng , hoặc layout tùy ý khác
- sử dụng các thẻ div, mỗi thẻ thuộc class row hoặc col
- tao các row trong các container. mỗi row đều có margin-left và margin-right là -15px (vì tại mỗi col đều có padding là 15px nên để căn chỉnh cho các col trong row áp sát vào viền ngoài trang web thì phải sử dụng row để bao ngoài cac col)
- trong các row tạo các col: col-xs-{number 1-12} col-sm-{1-12} col-md-{1-12} col-lg-{1-12}. sô 1-12 là span từ 1-12 cột
- xs :extra small device (smartphone), sm small device (tablet), md medium device (laptop), lg large device (desktop)
------------
2 cách CSS cho ảnh:
- sử dụng img-responsive cho ảnh
- đặt thẻ <img> trong 1 thẻ <div> (hoặc thẻ <a>) với class thumbnail để tạo viền cho ảnh.
Phần Javascript của bootstrap
Là tập hợp các plugin của jqueryHay sử dụng nhất là modal
Modal:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>2 cách gọi modal
Cách 1: sử dụng các attribute của html
data-toggle="modal" data-target="#myModal" (là id của modal đó)
Cách 2: qua jquery
$('#myModal').modal(options)Ví dụ
$('#myModal').modal('show'); //hiển thị modal
$('#myModal').modal('toggle');//bật tắt modal
//tắt backdrop element cho nên kích ở ngoài modal sẽ ko tắt được modal (mặc định backdrop = true c
cho nên kích ngoài modal sẽ tắt được modal)
$('#myModal').modal({backdrop:false});
//tắt backdrop nhưng nền của trang web vẫn bị mờ đi
$('#myModal').modal({backdrop:"static"});
// ấn esc thì modal không bị đóng
$('#myModal').modal({keyboard:false});
Media query
Giúp định nghĩa CSS cho từng loại thiết bị, từng loai kích thước màn hình
<meta name="viewport" content = "width = device-width, initial-scale = 1.0"/>
width = device-width (chiều rộng trang web bằng chiều rộng thiết bị)
initial-scale = 1.0 (zoom là 1, trang web sẽ KO bị zoom khi màn hình ở độ phân giải thấp như trên di động)
cách thiết kế trang web responsive sử dụng fluid (liquid) layout:
trên mobile người dùng ko phải cuộn ngang để xem nội dung
chữ không bị nhỏ quá
ảnh không bị nhỏ quá
Ví dụ tôi có 1 trang web giao diện 2 cột trên Desktop nhưng trên Mobile thì chỉ có 1 cột (do màn hình Mobile bé nên sẽ phải đơn giản hơn màn hình Desktop)
Nếu tôi viết CSS cho Desktop trước, code của tôi sẽ trông như sau:
<meta name="viewport" content = "width = device-width, initial-scale = 1.0"/>
width = device-width (chiều rộng trang web bằng chiều rộng thiết bị)
initial-scale = 1.0 (zoom là 1, trang web sẽ KO bị zoom khi màn hình ở độ phân giải thấp như trên di động)
cách thiết kế trang web responsive sử dụng fluid (liquid) layout:
- luôn set <meta name="viewport" content = "width = device-width, initial-scale = 1.0"/>
- sử dụng max-width cho thẻ div.wrap
- sử dụng % để set width cho các element khác bằng bao nhiêu % của thằng cha của nó
trên mobile người dùng ko phải cuộn ngang để xem nội dung
chữ không bị nhỏ quá
ảnh không bị nhỏ quá
Chú ý
Chú ý khi thiết kế giao diện web responsive chúng ta nên thiết kế cho mobile trước (Mobile first CSS) bởi vì làm theo cách này thường sẽ dễ hơn và giúp file CSS của chúng ta nhẹ hơn, do đó load trang web sẽ nhanh hơn.Ví dụ tôi có 1 trang web giao diện 2 cột trên Desktop nhưng trên Mobile thì chỉ có 1 cột (do màn hình Mobile bé nên sẽ phải đơn giản hơn màn hình Desktop)
Nếu tôi viết CSS cho Desktop trước, code của tôi sẽ trông như sau:.content {
/* Style cho màn hình Desktop */
float: left;
width: 60%;
/* Style lại cho màn hình Mobile */
@media (max-width: 800px) {
float: none;
width: 100%;
}
}.content {
/* Mặc định chiều rộng của thẻ div là 100% nên không cần viết thêm gì */
/* Viết lại style cho Desktop */
@media (min-width: 800px) {
float: left;
width: 60%;
}
}Thursday, September 20, 2018
Table
<table>
<thead>
<tr>
<th>0</th>
<th>0</th>
<th>0</th>
</tr>
</thead>
<tbody>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>0</td>
<td>0</td>
<td>0</td>
</tr>
</tbody>
<tfoot>
</tfoot>
</table>
dfds
Wednesday, September 12, 2018
Form
Login form:
chú ý:
<form>
<label for="email">Email</label><br/>
<input type="text" id="email" name="email" /> <br/>
<label for="password">Password</label><br/>
<input type="password" id="password" name="password" /> <br/>
<input type="checkbox" id="remember" name="remember" />
<label for="remember">Remember the login account</label><br/>
<input type="submit" value="Login" />
</form>
- Thẻ <form> có 2 thuộc tính khá quan trọng đó là:
- action: Chỉ ra nơi xử lý dữ liệu form khi form được submit (thường là đường dẫn đến 1 trang nào đó, nếu để rỗng thì sẽ lấy mặc định là trang hiện tại)
- method: Phương thức gửi dữ liệu. Có 2 giá trị là GET và POST. Phương thức GET gửi dữ liệu lên dưới dạng các cặp key/value và chúng ta có thể nhìn thấy trên URL (độ dài bị giới hạn), do đó phương thức GET dùng trong trường hợp mà dữ liệu gửi lên không cần bảo mật và không quá nhiều (ví dụ như search của Google). Phương thức POST thì gửi dữ liệu qua body mesage của HTTP request nên dữ liệu không nhìn thấy được qua URL, thích hợp để gửi các dữ liệu cần bảo mật hoặc nhiều dữ liệu như form đăng nhập, đăng ký.
- Nếu trong form có sử dụng <input type="file"/> (cho phép người dùng upload file) thì form phải có thuộc tính enctype="multipart/form-data" và method="post".
- Sử dụng jQuery để lấy giá trị của input, ta dùng phương thức .val(). Tương tự khi muốn set giá trị cho input.
- Với một số input kiểu select, checkbox, radio thì ta phải đặt thuộc tính value => khi gửi lên thì trình duyệt mới biết gửi giá trị gì
------
Khi truyền thông tin qua URL, sẽ có những giá trị đặc biệt bị encode cho hợp lệ ví dụ như dấu cách (khoảng trắng) sẽ bị convert thành %20. Để lấy được giá trị ban đầu ta sử dụng function decodeURIComponent(), ngược lại với nó là function encodeURIComponent()
- Với một số input kiểu select, checkbox, radio thì ta phải đặt thuộc tính value => khi gửi lên thì trình duyệt mới biết gửi giá trị gì
------
Khi truyền thông tin qua URL, sẽ có những giá trị đặc biệt bị encode cho hợp lệ ví dụ như dấu cách (khoảng trắng) sẽ bị convert thành %20. Để lấy được giá trị ban đầu ta sử dụng function decodeURIComponent(), ngược lại với nó là function encodeURIComponent()
Monday, September 10, 2018
Tip layout
càng nhiều thẻ div thì xử lý css dễ hơn
Ảnh
thường mỗi ảnh sẽ nằm trong 1 thẻ div (vd để tạo viền cho ảnh mà các viền ko chồng lên nhau mà layout vẫn sd border-box, vd để sử dụng overflow hidden nếu các ảnh width/height không đều)
div{
width:200px;
}
div > img{
width: 100%;
display:block;
}
thường mỗi ảnh sẽ nằm trong 1 thẻ div (vd để tạo viền cho ảnh mà các viền ko chồng lên nhau mà layout vẫn sd border-box, vd để sử dụng overflow hidden nếu các ảnh width/height không đều)
div{
width:200px;
}
div > img{
width: 100%;
display:block;
}
JQuery
$('css selector') sẽ trả về các đối tượng tương ứng với selector đó
các hàm
html() // thay đổi html
css('color','red') //thay đổi màu chữ
append('xxx');//thêm xxx vào sau phần text của element
prepend('xxx');//thêm xxx vào trước phần text của element
các hàm
html() // thay đổi html
css('color','red') //thay đổi màu chữ
append('xxx');//thêm xxx vào sau phần text của element
prepend('xxx');//thêm xxx vào trước phần text của element
Wednesday, September 5, 2018
Browser Object Model (BOM)
Tương tự với Document Object Model, Browser Object Model (BOM) cũng là một object. Đó là object window và nó chứa toàn bộ các hàm, các biến khác trong Javascript (kể cả object document). Object window mô tả cửa số trình duyệt mà người dùng sử dụng để truy cập website. Chúng ta có thể dùng Javascript để tương tác với trình duyệt qua object window.
Ví dụ lấy kích thước của trình duyệt:
| window.innerWidth | Lấy chiều rộng bên trong trình duyệt (phần hiển thị trang web, không tính thanh cuộn scroll bar) |
| window.outerWidth | Lấy chiều rộng của toàn bộ trình duyệt |
| window.innerHeight | Lấy chiều cao bên trong trình duyệt (phần hiển thị trang web, không tính thanh cuộn scroll bar) |
| window.outerHeight | Lấy chiều cao của toàn bộ trình duyệt |
Friday, August 31, 2018
JS: các cấu trúc dữ liệu
stack và queue: sử dụng array
array.push tương đương stack.push
array.pop tương đương stack.pop
array.push tương đương queue.enqueue
array.shift tương đương queue.dequeue
array.push tương đương stack.push
array.pop tương đương stack.pop
array.push tương đương queue.enqueue
array.shift tương đương queue.dequeue
Thursday, August 30, 2018
JS: prototype
Object.prototype.say(){//some code}
thì tất cả các đối tượng trong trang web đều có thêm phương thức say
vd :
a = new Object();
a.say();//đã được định nghĩa
--CHú ý:
thì tất cả các đối tượng trong trang web đều có thêm phương thức say
vd :
a = new Object();
a.say();//đã được định nghĩa
--CHú ý:
( new Foo ).__proto__ === Foo.prototype;
( new Foo ).prototype === undefined;prototype is not available on the instances themselves (or other objects), but only on the constructor functions.
DOM
DOM (Document Object Model): có thể hiểu đơn giản là một object tên là document
object này do trình duyệt tạo ra khi tải trang html
truy cập đến các thẻ
thẻ <head> sử dụng document.head
thẻ <body> sử dụng document.body
(chú ý thẻ <html> chính là đối tượng document)
Các thẻ khác nằm trong head và body không thể truy vấn trực tiếp theo kiểu
mà phải truy vấn theo cấu trúc cha - con
trả về 1 mảng các con của thằng head
trả về thằng cha trực tiếp của thằng con
-------
Lấy các element trong HTML:
document.getElementById('id của thẻ'); //trả về 1 element
document.getElementsByClassName('tên class');//trả về 1 mảng các element có cùng class name
document.getElementsByTagName('img');//trả về 1 mảng các thẻ ảnh
Thay đổi/ truy xuất các nội dung của các element trong HTML:
obj.innerHTML;// trả về html trong đối tượng obj
obj.innerText;// chỉ trả về đoạn text bên trong, bỏ qua tât cả các thẻ bên trong obj
obj.attr=X; // thiết lập thuộc tính attr của obj thành X
vd:
img[0].src="http://path/to/image.jpg";//thiết lập thuộc tính src của ảnh đầu tiên
-------
Tìm element theo selector trong CSS
document.selectSelectorAll('p img');//trả về tất cả các ảnh nằm trong các đoạn văn
Thay đổi style của element:
obj.style.color="red";//đổi màu chữ của element thành đỏ
Chú ý:
obj.style.fontSize='1.5em'; //không thể sử dụng font-size vì JS không chấp nhận dấu -
DOM Event:
<element onclick="myScript">
object.onclick = function(){myScript};
object.addEventListener("click", myScript);
object này do trình duyệt tạo ra khi tải trang html
truy cập đến các thẻ
thẻ <head> sử dụng document.head
thẻ <body> sử dụng document.body
(chú ý thẻ <html> chính là đối tượng document)
Các thẻ khác nằm trong head và body không thể truy vấn trực tiếp theo kiểu
document.head.ten_thehoặc
document.body.tên_thẻ
mà phải truy vấn theo cấu trúc cha - con
trả về 1 mảng các con của thằng head
document.head.childrentrả về 1 mảng các con trực tiếp của thằng body
document.body.childrenNgoài ra, có thể lấy thằng con nhưng nó sẽ trả về tất cả các node:
element.childNodes()
trả về thằng cha trực tiếp của thằng con
obj.parentNode
-------
Lấy các element trong HTML:
document.getElementById('id của thẻ'); //trả về 1 element
document.getElementsByClassName('tên class');//trả về 1 mảng các element có cùng class name
document.getElementsByTagName('img');//trả về 1 mảng các thẻ ảnh
Thay đổi/ truy xuất các nội dung của các element trong HTML:
obj.innerHTML;// trả về html trong đối tượng obj
obj.innerText;// chỉ trả về đoạn text bên trong, bỏ qua tât cả các thẻ bên trong obj
obj.attr=X; // thiết lập thuộc tính attr của obj thành X
vd:
img[0].src="http://path/to/image.jpg";//thiết lập thuộc tính src của ảnh đầu tiên
-------
Tìm element theo selector trong CSS
document.selectSelectorAll('p img');//trả về tất cả các ảnh nằm trong các đoạn văn
Thay đổi style của element:
obj.style.color="red";//đổi màu chữ của element thành đỏ
Chú ý:
obj.style.fontSize='1.5em'; //không thể sử dụng font-size vì JS không chấp nhận dấu -
DOM Event:
<element onclick="myScript">
object.onclick = function(){myScript};
object.addEventListener("click", myScript);
Tuesday, August 28, 2018
JS: Function
- Demo trong video viết trực tiếp thẻ <script> vào trong tài liệu HTML chỉ để giúp các bạn tập trung được vào code javascript. Trên thực tế phải viết đầy đủ các thẻ html, head, body như thường lệ.
- Lệnh return dùng để trả về kết quả và sau khi đã return thì các lệnh nằm sau nó sẽ không được thực hiện nữa.
- Từ khóa this dùng để trỏ tới chính object mà gọi 1 hàm nào đó. Ví dụ object hero có phương thức say() thì khi gọi hero.say(), this nằm trong hàm say() sẽ tương đương với chính object hero. Chúng ta sử dụng this để tránh lặp lại tên object hoặc trong trường hợp với các object mà chúng ta không rõ tên.
- Sử dụng hàm document.write() với tham số là 1 chuỗi HTML để thay đổi nội dung của trang HTML hiện tại. Ví dụ:
document.write("<h1>Bài tập</h1>");
- Sử dụng console.log() với tham số bất kỳ để lấy ra giá trị của nó (xem ở phần Console của trình duyệt). Ví dụ:
x = 5 + 4;
console.log(x);JS: biến và kiểu dữ liệu
- Số có thể chia làm 2 loại là số nguyên (Integer) và số thập phân (Float). Với số thập phân (Float) ta dùng dấu chấm chứ không dùng dấu phẩy và không dùng ký tự trắng để phân cách (ví dụ: 1.5 chứ không phải 1,5).
- Một phép toán số học không hợp lệ sẽ trả về dữ liệu là NaN (Not A Number), tuy nhiên kiểu dữ liệu của NaN là number.
- Ký tự ngoặc đơn hoặc ngoặc kép là ký tự đặc biệt dùng để tạo ra chuỗi, cho nên nếu trong 1 chuỗi có chứa ký tự ngoặc đơn thì chúng ta dùng ngoặc kép để tạo chuỗi và ngược lại. Ví dụ:
var string1 = "Let's go!";
var string2 = '<a href="#">Link</a>';
Ngoài ra chúng ta có thể thêm ký tự \ đằng trước để đánh dấu rằng đây là ký tự đặc biệt cần hiển thị (escape character)
var string3 = 'Let\'s go!';
- Tham khảo các hàm xử lý số có sẵn trong Javascript: http://www.w3schools.com/js/js_number_methods.asp
- Tham khảo các hàm xử lý chuỗi có sẵn trong Javascript: http://www.w3schools.com/jsref/jsref_obj_string.asp
Ví dụ với hàm toUpperCase() có tác dụng biến 1 chuỗi thành viết hoa:
var name = "robin".toUpperCase();
thì giá trị của name sẽ là "ROBIN"
- Khi một biến được khai báo mà chưa gán giá trị, nó sẽ có kiểu là undefined. Trong trường hợp một biến đã có giá trị và chúng ta muốn bỏ giá trị đó đi ta dùng kiểu dữ liệu là null chứ không gán lại thành undefined. Ví dụ:
x = null;
- Khi sử dụng typeof với 1 array chúng ta sẽ nhận được kết quả là "object" do array cũng là 1 object trong Javascript. Để kiểm tra 1 biến có phải là array hay không chúng ta sử dụng phương thức isArray() của đối tượng dựng sẵn Array như sau
var arr = [1, 2, 3];
var obj = { name: "Huy" };
var x = Array.isArray(arr);
var y = Array.isArray(obj);
Kết quả trả về sẽ là kiểu boolean: x = true và y = false;
- Array và Object là 2 kiểu dữ liệu đặc biệt, nó có thuộc tính tham chiếu nên sẽ không thể sao chép như biến thông thường. Ví dụ, với các kiểu dữ liệu như number, string, boolean ta có thể sao chép biến như sau:
var x = 1;
var y = x; // y copy giá trị của x nên y có giá trị bằng 1
x = 2; // thay đổi giá trị của x thì y vẫn có giá trị bằng 1
nhưng đối với 1 array hoặc object thì do chúng là đối tượng và khi dùng phép gán thì các biến đều tham chiếu đến cùng 1 đối tượng nên sẽ không thể copy bằng phép gán:
var a = [1,2,3];
var b = a; // b tham chiếu đến a
a[0] = 10; // thay đổi giá trị a[0], do cả 2 biến đều tham chiếu đến 1 mảng nên có giá trị giống nhau là [10,2,3]. Do đó b[0] có giá trị bằng 10
b[1] = 11; // thay đổi giá trị b[1] thì cả 2 biến vẫn có giá trị giống nhau là [10,11,3]
- Để copy 1 array ta có thể dùng cách sau:
var x = [1,2,3];
var y = x.slice();
- Với Object, chúng ta có thể khai báo theo kiểu function tương tự như Class ở các ngôn ngữ khác để có thể tái sử dụng các thuộc tính và phương thức. Ví dụ như sau:
function person(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
var personA = new person('Ford Happy', 16, 'Male');
var personB = new person('Lora Romey', 10, 'Female');
- Trong khi trao đổi dữ liệu giữa các ngôn ngữ khác nhau, người ta thường sử dụng 1 kiểu dữ liệu gọi là JSON (JavaScript Object Notation) dựa trên object trong Javascript. Các bạn có thể tham khao chi tiết hơn tại đây http://www.json.org/
Để hiển thị các nội dụng của mảng:
Để hiển thị các nôi dung của object
2==='2' sẽ trả về false
Một chuỗi mà không có dấu ' hoặc " => sẽ bị trình duyệt coi là 1 biến
Để hiển thị các nội dụng của mảng:
for(var i =0; i < arr.length; i++){
document.write(arr[i]);
}
for(i in a){
document.write(arr[i]);
}
Để hiển thị các nôi dung của object
for (var p in obj){2=='2' sẽ trả về true
document.write(p);
document.write(obj[p]);
}
2==='2' sẽ trả về false
Một chuỗi mà không có dấu ' hoặc " => sẽ bị trình duyệt coi là 1 biến
Javascript
Ở khóa học web căn bản: chỉ học ES5 (2009)
mặc dù các công ty bây giờ đều yêu cầu biết ES6 vì các js framework đều sử dụng ES6
Chú ý: nên đặt khai báo javascript trước </body> bởi vì:
alert("");
console.log("");
undefined là khi không có giá trị trả về
sử dụng ' và " cho string đều được, tuy nhiên phải đồng bộ (không được phép nửa đơn nửa kép)
Với string , chỉ có duy nhất phép nối chuỗi (phép cộng)
cộng number và string, kết quả sẽ là string
typeof(ten_bien)
array:
continue: thoát khỏi vòng lặp hiện tại, nhảy sang vòng lặp tiếp theo
mặc dù các công ty bây giờ đều yêu cầu biết ES6 vì các js framework đều sử dụng ES6
Chú ý: nên đặt khai báo javascript trước </body> bởi vì:
- tăng tốc độ load dom => người dùng ko thấy trang web bị giật
- nếu load js trước dom thì một số hàm trong js có gọi đến dom có thể sẽ bị lỗi
alert("");
console.log("");
Biến
khai báo biến:var ten_bien;gán giá trị
ten_bien = giá trịcác kiểu giá trị:
number, string, boolean, array, object
undefined là khi không có giá trị trả về
sử dụng ' và " cho string đều được, tuy nhiên phải đồng bộ (không được phép nửa đơn nửa kép)
Với string , chỉ có duy nhất phép nối chuỗi (phép cộng)
cộng number và string, kết quả sẽ là string
typeof(ten_bien)
array:
var mang = [];object
var doi_tuong={};function:
function ten_ham(){}break: thoát khỏi câu lệnh lặp
var ten_ham = function(){};
doi_tuong.phuong_thuc=function(){};
continue: thoát khỏi vòng lặp hiện tại, nhảy sang vòng lặp tiếp theo
Thư viện font awesome
- Để tạo ra các icon trên trang web một cách dễ dàng, chúng ta có thể sử dụng thư viện Font Awesome. Đó là 1 bộ font nhưng với các ký tự là các icon. Tạo icon theo cách này sẽ có những lợi ích rất lớn mà 1 ảnh không làm được như:
- Dung lượng nhỏ, tùy chỉnh kích thước tùy ý mà không bị vỡ hình
- Áp dụng được các thuộc tính CSS dành cho font như: màu sắc, đổ bóng, ...
- Cài đặt:
- Truy cập trang http://fortawesome.github.io/Font-Awesome/ và chọn Download.
- Giải nén ra và copy toàn bộ file css, file font vào trong project.
- Link đến file css font-awesome.min.css
- Sử dụng: Sử dụng các class sẵn có lên trên các inline element như <i>, <b>, ... Ví dụ:
Đây là icon cốc bia <i class="fa fa-beer"></i> <br/>
Đây là icon quyển sách <i class="fa fa-book"></i>
- Tham khảo danh sách các icon của Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/
Monday, August 27, 2018
Font
Hướng dẫn
- Để thay đổi font chữ trong CSS ta dùng thuộc tính font-family (hoặc dùng tắt bằng thuộc tính font), ví dụ:
p {
font-family: "Helvetica Neue";
}
Tuy nhiên, việc hiển thị font chữ sẽ phụ thuộc vào trình duyệt, hệ điều hành, ... do đó chúng ta nên sử dụng một vài font tương đồng nhau để dự phòng, ví dụ:
/* Sử dụng font Helvetica Neue, nếu trình duyệt hoặc hệ điều hành không hỗ trợ thì chuyển qua font Helvetica, Arial hoặc sans-serif */
p {
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
Tham khảo các bộ web safe fonts (sử dụng trên mọi trình duyệt)
http://www.w3schools.com/cssref/css_websafe_fonts.asp
http://www.w3schools.com/cssref/css_websafe_fonts.asp
- Với các website nhiều chữ (tin tức, blog, ...) thì nên sử dụng font họ Sans-Serif, là font chữ không chân (không có gạch ngang ở dưới chân ký tự), dùng font chữ này sẽ dễ đọc hơn.
- Ngoài các font cung cấp sẵn chúng ta cũng có thể sử dụng font bên ngoài bằng cách dùng CSS @font-face. Ví dụ:
/* Định nghĩa 1 font tên là robin, trỏ đường dẫn đến file font là special_font.woff */
@font-face {
font-family: robin;
src: url(special_font.woff);
}
/* Thay đổi font cho thẻ p */
p {
font-family: robin;
}
Chú ý là đặt tên font có thể chứa dấu cách, khi đó chúng ta phải bao lại bởi cặp ngoặc kép.
- Một font có thể có nhiều định dạng khác nhau, mỗi trình duyệt lại hỗ trợ các kiểu định dạng khác nhau. Do đó nếu import font từ bên ngoài, chúng ta nên import nhiều định dạng để trang web hiển thị tốt trên các trình duyệt khác nhau. Ví dụ:
@font-face {
font-family: "my font";
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
Tham khảo các định dạng font và trình duyệt hỗ trợ: http://www.w3schools.com/css/css3_fonts.asp
- Sử dụng Google font:
- Truy cập vào trang https://www.google.com/fonts, chọn kiểu font, kiểu style mong muốn rồi bấm quick-use
- Chọn tiếp các options phù hợp rồi copy code vào trang web theo 1 trong 3 cách: sử dụng thẻ <link> trong HTML, @import trong CSS hoặc dùng Javascript (bước 3). Chú ý khi sử dụng @import trong CSS (dùng để nhúng CSS từ file này sang file khác) thì @import phải ở trên cùng, trước khi có style xuất hiện (thường ở ngày dòng đầu tiên của file) và không khuyến khích dùng nhiều import (http://stackoverflow.com/questions/10036977/best-way-to-include-css-why-use-import)
- Nếu chúng ta có 1 file font, có thể vào trang web sau để convert file đó sang các định dạng khác nhau:
http://www.fontsquirrel.com/tools/webfont-generator
http://www.fontsquirrel.com/tools/webfont-generator
Subscribe to:
Posts (Atom)