Techmaster: Web cơ bản: August 2018

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

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ú ý:

( 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

document.head.ten_the

hoặ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.children

trả về 1 mảng các con trực tiếp của thằng body

document.body.children

Ngoà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:

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){
document.write(p);
document.write(obj[p]);
}

2=='2' sẽ trả về true
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ì:

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(){}
var ten_ham = function(){};
doi_tuong.phuong_thuc=function(){};

break: thoát khỏi câu lệnh lặp
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

- 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

Sunday, August 26, 2018

bài tập web âm nhạc

hiện tại:
tìm một số trang web nghe nhạc nổi tiếng
bắt chước => ăn trộm ảnh của trang web => tự sướng

Nên làm:
bắt chước => quan sát => suy nghĩ phân tích (có chức năng gì, điểm gì nổi bật)(các trang web nghe nhạc nổi tiếng có điểm gì chung...)

Chỉ copy thì sản phẩm sẽ fail

Friday, August 24, 2018

Reset CSS

*{
padding: 0;
margin: 0;
}

Thursday, August 23, 2018

Pseudo Class (sử dụng với thẻ a và các thẻ khác)

Chú ý

- Một số Pseudo Class hay dùng:

:hover	Chọn element ở trạng thái di chuột qua
:first-child	Chọn element mà là element con đầu tiên của 1 element khác
:last-child	Chọn element mà là element con cuối cùng của 1 element khác
:nth-child(n)	Chọn element mà là element con thứ n của 1 element khác
:not(selector)	Chọn element mà không phải là selector

- Khi sử dụng thẻ <a> thường chỉ cần style 2 màu là màu khi hover và các màu còn lại

a {
    color: black;
}

a:hover {
    color: grey:
}

- Có thể vào trang http://www.0to255.com/ để lấy mã màu tương đồng khi sử dụng Pseudo Class :hover

------

Code mẫu cho thẻ a:

a:link{
 color: red;
}
a:visited{
 color: green;
}
a:hover{
 color: blue;
}
a:active{
 color:yellow;
}

List

Hướng dẫn tạo menu 2 cấp cơ bản bằng thẻ <ul> (hoặc <ol>):

1. Chuẩn bị 1 danh sách các menu cấp 1. Ví dụ:

<ul id="menu">
    <li><a href="/">Trang chủ</a></li>
    <li><a href="/about.html">About</a></li>
    <li><a href="/khoa-hoc.html">Khóa học</a></li>
</ul>

Bỏ dấu tròn trước mỗi thẻ <li> đi bằng thuộc tính CSS:

#menu {
    list-style-type: none;
}

Nếu sử dụng menu ngang, chúng ta phải dàn các item lên thành hàng ngang, khi đó chúng ta có thể biến <li>thành inline element hoặc inline-block, hoặc sử dụng thuộc tình float. Ví dụ tạo menu ngang sử dụng thuộc tính float: left; lên thẻ <li> nằm trực tiếp trong menu:

#menu > li {
    float: left;
}

2. Tạo menu cấp 2 bằng thẻ <ul> và đặt trong thẻ <li> của menu cấp 1. Ví dụ:

<ul id="menu">
    <li><a href="/">Trang chủ</a></li>
    <li><a href="/about.html">About</a></li>
    <li>
        <a href="/khoa-hoc.html">Khóa học</a>
        <ul>
            <li><a href="#">HTML</a></li>
            <li><a href="#">PHP</a></li>
            <li><a href="#">NODEJS</a></li>
        </ul>
    </li>
</ul>

Sau đó ẩn menu cấp 2 đi:

#menu > li > ul {
    list-style-type: none;
    display: none;
}

Và chỉ hiển thị khi di chuột qua menu item của menu cấp 1:

#menu > li:hover > ul {
    display: block;
}

Vậy là ta đã có một menu 2 cấp. Tuy nhiên các bạn cần chỉnh sửa margin, padding và thêm các hiệu ứng cho đẹp hơn.

--------

list-style-type: kiểu của marker
list-style-position: inside; sẽ đưa các marker vào trong list (mặc định các trình duyệt sẽ hiển thị marker ở padding bên phải của list)
ngoài ra, các trình duyệt đều set padding mặc định cho list, nên để thống nhất hiển thị ta phải set lại padding

CSS3 effect

Wednesday, August 22, 2018

căn giữa với css3

Muốn căn giữa thằng con trong thằng cha thì thằng cha set như sau:
display: flex;
justify-content: center;//căn giữa theo chiều ngang
align-items: center;//căn giữa theo chiều dọc

-----
căn theo chiều dọc thằng con trong thằng cha thì thằng cha set như sau;
display: flex;
align-items: center;
------

nếu thằng con được set là position = absolute thì
set thằng con như sau

top:50%;
left: 50%;
transform: translate(-50%,-50%)

----
nếu chỉ căn giữa theo chiều ngang:
width: 100px; //ví dụ
margin: auto
text-align: center;

hoặc set thằng cha:
display: flex;
justify-content: center;
----
nếu muốn căn giữa ảnh theo chiều ngang:
display:block;

margin:auto;

---

nếu muốn căn giữa 1 element trong cả viewport(thẻ body) thì

.wrapper{

display: flex;

justify-content: center;

align-items: center;

width: 100vw;

height: 100vh;

}

với wrapper là thẻ phủ ngoài tất cả các thẻ