lập trình webfront end
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (63.79 KB, 33 trang )
head
dùng để thiết lập cho giao diện
body
thết kế giao diện
các thẻ html
<head>
thẻ mở
</head>
thẻ đóng
format
title
con lùi vào 1 tab so với cha
thay đổi tên của tab giao diện
link - favicon thay đổi icon của tab giao diện
link online
link tuyệt đối
ghép giữa đường dẫn thư mục và tên file
link tương dối
./ lấy đường dẫn dựa trên địa chỉ của file đang code
../
code đọc từ trên xuống dưới
=============================================================
h
thẻ tiêu đề
chữ to, nét đậm, chiếm hết ròng
p
thẻ lưu 1 đoạn văn
chiếm hết ròng
br
thẻ ngắt ròng
span
chỉ hỗ trợ để trên thuộc tính
tương tự đoạn text khơng có thẻ
b/i/u
center
đậm/ nghiêng/ gạch chân
thẻ căn giữa
các thẻ HTML có tính kế thừa
=================================================================
img
thẻ hiển thị ảnh
src
dẫn nguồn ảnh
alt
chữ thay thế nếu ảnh lỗi
a
dẫn link
khi click vào thì sẽ đưa đến địa chỉ được quy định trong link
=================================================================
input
type = text
nhập text ngắn trên 1 ròng
type = password
nhập text ngắn trên 1 ròng
ẩn nội dun g
textarea
nhập đoạn văn, nhập trên nhiều ròng
type = date
chọn ngày tháng
type = file
chọn file upload
type = radio
trắc nghiệm, chọn 1 đáp án duy nhất
lưu ý set name
type = checkbox
select / option
trắc nghiệm, chọn tùy ý
lựa chọn 1 đáp án duy nhất
chọn sẵn 1 đáp án
====================================================
table
tr
thẻ tạo bảng
ròng trong bảng
table row
td
data trong rong
table data
lưu ý table, tr, td phải đi với nhau
th
table heading
thẻ tạo ô tiêu đề
chữ đậm, căn giữa
=======================================================
=======================================================
Các cách thêm style
C1
dùng attribute style
style='key: value ; key2 : value2'
code đọc từ trên xuống, trái qua phải
=> nội dung sau sẽ ghi đè nội dung trước
thêm style trực tiếp và thẻ HTML
C2 internal style: thêm style nội bộ
dùng thẻ style để thêm thuộc tính
cú pháp
<style>
the {
áp dụng style cho tất cả các thẻ cùng tên trên giao diện
key: value ;
key2 : value2
}
.class{
áp dụng style cho tất cả thẻ cùng tên class
....
}
#id{
....
áp dụng style cho thẻ có id khớp với điều kiện
khơng được phép trùng tên id trên giao diện HTML
}
</style>
trỏ càng cụ thể thì ưu tiên càng cao
!important > inline style > #id > .class > thẻ > * > kế thừa
C3: thêm style bằng file css : external style
tạo file .css
<link rel="stylesheet" href="./index.css">
cú pháp giống internal style
==============================================================
background
color
đổi màu nền
đổi màu chữ
font-size
điều chỉnh cỡ chữ
đơn vị px, ...
font-weight
font-style
điều chỉnh chữ đậm, chữ nhạt
italic: nghiêng
normal: bình thường
text-decoration
overline: gạch trên
line-through: gạch giữa
under-line: gạch dưới
border : độ dày / nét vẽ / màu
border: 1px solid black
border-collapse: collapse
gộp border của table thành 1
text-align
căn lề chữ
lưu ý cần có khoảng trống thừa để căn chỉnh
left/right// :
justfy
trái / phải
căn lề 2 bên
center
giữa
text-transform
chuyển đổi chữ hoa, chữ thường
uppercase
tất cả viết hoa
lowercase
tất cả viết thường
capitalize
font-family:
viết hoa chữ đầu
thay đổi font chữ
@font-face {
font-family: ten;
src: url(link);
đặt tên cho font chữ mới
liên kết đến file font chữ
}
==========================================================
content
nội dung bên trong 1 thẻ
border
đường viền bao ngoài thẻ
padding
khoảng trống giữa content và border
padding thuộc quyền sở hữu của thẻ
margin
khoảng trống dùng chung từ border ra ngồi
margin khơng thuộc sở hữu của thẻ nào
border: độ dày / net vẽ / màu sắc
thêm border 4 mặt chung setting
border-top
thêm border trển đỉnh
border-bottom
border-left
thêm border dưới đáy
thêm border bên trái
border-right
thêm border bên phải
border-radius
bo tròn đường viền
==================================================
padding: 10px
set padding chung 4 mặt
padding: 10px 20px
set padding trên dưới / trái phải
padding: 10 20 30 40
set padding theo chiều kim đồng hồ bắt đầu từ top
==================================================
margin: 10px
margin 4 mặt bằng nhau
margin: 10 20
set margin trên dưới / trái phải
margin: 10 20 30 40
margin: auto
set margin theo chiều kim đồng hồ bắt đầu từ top
tự động chia đều margin
dùng khi có margin thừa
width
điều chỉnh chiều rộng
nếu dùng đơn vị % thì sẽ tỷ lệ với kích thước của thẻ cha gần nhấn
height
điều chỉnh chiều cao
box-sizing: border-box width, height sẽ gồm cả border, padding, content
====================================================
display
display: block
điều chỉnh hiển thị
hiển thị dạng khối
chiếm chỗ nguyên cả ròng
khoảng thừa được thế bằng margin
display: inline
hiển thị dạng text
chiến chỗ đúng bằn nội dung bên trong
không dùng đc width, height
display: inline-block
giống inline nhưng dùng được width, height
không chiến cả rịng nữa
display: none
hủy hiển thị
mất hồn tồn khỏi giao diện
visible:hidden
tàng hình
vẫn hiển thị trên giao diện
============================================================
opacity:
filter:
làm mờ, nhìn xuyên thấu
đổi hiệu ứng cho img
cursor:
đổi con trỏ
hover:
style chỉ áp dụng khi đưa con trỏ vào
the:hover{...}
.class:hover{...}
#id:hover{...}
=========================================================
position
static
sử dụng để thay đổi vị trí thẻ HTML bằng top, left, right, bottom
set position về mặc định
vô hiệu top, left, right, bottom
relative
fixed
top, left, right, bottom căn chỉnh dựa trên vị trí ban đầu
cố định vị trí
top, left, right, bottom lấy cạnh màn hình là mốc để căn chỉnh
sticky
lai giữa relative và fixed
top, left, right, bottom lấy cạnh màn hình là mốc để căn chỉnh
top, left, right, bottom hoạt động như ngưỡng giới hạn
thẻ html di chuyển bình thường, đến khi đạt giới hạn sẽ bị giữ lại
lưu ý: sticky trong quan hệ cha con
absolute
căn chỉnh theo quan hệ cha con
thẻ cha có position thì top, left, right, bottom căn theo thẻ cha
nếu thẻ cha khơng có position thì top, left, right, bottom căn theo màn hình
%: di chuyển theo kích thước của thẻ cha
transform: translate(X, Y) %: di chuyển theo tỷ lệ kích thước của chính nó
===========================================================
lấy code HTML của icon
fontawesome
lấy file css của icon
fontawesome cdn
====================================
hover
trỏ theo quan hệ cha con
cha con {
....
}
.rightHeader:hover {
...
}
thẻ có :hover là thể kích hoạt sự kiện
thẻ đứng cạnh {}
là thẻ nhận stype
=========================================================================
bootstrap
1. setup css gán lên đầu
js gán cuối file
=========================================================================
reponsive giao diện tương thích đa phương tiện
@media đóng gói thuộc tính
giải phóng các thuộc tính bên trong nếu đạt đủ yêu cầu
=================================================================
row
col-
chia thành 12 phần bằng nhau
chiếm chỗ trong 12 phần đó
==================================================================
git init
khởi tạo
git remote add origin link
git add .
liên kết
đonhs gói
git comit -m ' '
so sánh
git push origin name
đồng bộ từ local lên github
=====================================================
git clone link lấy toàn bộ code trên github về khi mới tham gia dự án
git pull origin name đồng bộ từ github về local
luôn pull trước khi push
git log
xem lịch sử comit
git checkout id quay lại lịch sử
git checkout name di chuyển qua lại giữa các nhánh
==========================
git checkout -b name
tạo và chuyển nhánh mới
==================================================================
console.log(Noi dung)
hiển thị nội dung dưới terminal
code name
chạy file name
======================================================================
var name = value
khai báo biến name có giá trị là 'value'
=======================================================================
string
var string = 'value'
khai báo string trên 1 dòng
var string = "value"
khai báo string trên 1 dòng
var string = `value`
khai báo string trên nhiều dòng
chèn biến vào trong string ${name}
=====================================================================
object
var object = {
khai báo các thuộc tính liên quan đến 1 đối tượng
key : value,
key1 : value1,
key2 : value2,
}
object.key
object.key = value
truy vấn data trong object
ghi đè nội dung trong object
lấy key đúng theo nghĩa đen
object['key']
truy vấn data ở trường 'key' trong object
object['key'] = value
gán đè 'value' vào 'key' trong object
có thể dùng logic để truy vấn
delete object.key
xóa data trong object
=======================================================================
array
var arr = [value1, value2,.....]
arr[index]
truy vấn data ở vị trí 'index' trong array
index đếm từ 0
arr[index] = value
arr.length
arr[length - 1]
typeof
ghi đè value vào phần tử vị trí index
số phần tử trong array
phần tử cuối cùng
kiểm tra kiểu dữ liệu
===============================================================================
TOÁN TỬ
+
number + number thì hoạt động cộng số bình thường
cịn lại là ghép chuỗi
NaN
not a number
xảy ra khi ép kiểu về dạng number nhưng kết quả khơng tính tốn dc
-*/ %
tự động ép kiểu dữ liệu về number để tính tốn
%
phép tốn lấy số dư
<
nhỏ hơn
>
lớn hơn
<=
nhỏ hơn hoặc bằng
>=
lớn hơn hoặc bằng
==
bằng
===
so sánh bằng và kiểu dữ liệu
!
nghịch đảo
!==
khác
============================================================================
||
điều kiện hoặc
true nếu ít nhất 1 điều kiện đúng
false tất cả các điều kiện đều sai
&&
điều kiện và
trả về true khi tất cả điều kiện đều đúng
false thì có 1 điều kiện sai
============================================================================
x += 3
x=x+3
x -= 3
x=x-3
x *= 3
x=x*3
x /= 3
x=x/3
x++,++x
tăng 1 đơn vị
x++
dùng x trước rồi tăng 1 đơn vị
++x
cộng 1 trước rồi dùng x
x--,--x
giảm 1 đơn vị
x++
dùng x trước rồi giảm 1 đơn vị
++x
giảm 1 trước rồi dùng x
**
là số mũ
căn thì dùng số mũ thập phân
=====================================================================================
điều kiện ? kq nếu true : kết quả nếu false
====================================================================================
Hàm điều kiện
if (đk) {
code thực thi nếu đk đúng
}else{
code thực thi nếu đk sai
}
==================================================================================
while (dk){
code thực thi đến khi nào điều kiện sai thì dừng
}
lưu ý vịng lặp sẽ thực thi đến khi nào đk sai thì dừng
==========================================================================
do {
code thực thi
thực thi code trc 1 lần rồi mới xét đk
} while(dk)
đảm bảo code thực thi luôn chạy trc 1 lần
==========================================================================
for(start, stop, speed ){
code thực thi
}
for (var key in tenobject){
tenobject[key]
}
for (var value of array){
//code thực thi
value chính là từng phần tử trong array
}
break
continue
phá vỡ kết thúc vòng lặp
bỏ qua vịng lặp
=========================================================================
function
viết ra các hàm có thể tái sử dụng được logic bên trong
có thể dùng dc trong nhiều trường hợp
Khai báo
function ten (input){
input đầu vào
//code
code xử lý để ra output
return output
return : trả kết quả
}
Sử dụng
ten(input)
==========================================================================
ArrayMethod
...array
liệt kê các phần tử trong array,object
copy array , .object
gộp array,object
findIndex(
function(value,index){
value giá trịn từng phần tử trong array
//
index vị trí phần tử trong array
}
return true thì trả về vị trí phần tử đầu tiên thỏa mãn
)
return false thì k có phần tử thỏa mãn điều kiện => trả về -1
forEach(function(value,index){
//
biến thể của for
value giá trị từng phần tử trong array
}
index vị trí phần tử trong array
)
bỏ qua các phần tử rỗng
includes(value,start)
kiểm tra sự tồn tại của value trong array
start : vị trí bắt đầu tìm kiếm
value : giá trị tìm kiếm
true nếu có phần tử === value
true nếu khơng phần tử === value
indexOf(value,start)
start : vị trí bắt đầu tìm kiếm
value : giá trị tìm kiếm
trả về vị trí đầu tiên tìm thấy
khơng tìm thấy trả về -1
lastindexOf(value,end)
end : vị trí bắt đầu tìm kiếm
value : giá trị tìm kiếm
trả về vị trí cuối cùng tìm thấy
khơng tìm thấy trả về -1
array.isArray(dâta)
kiểm tra data có phải array hay k
true là array
false k là array
join(x)
gộp các phần tử array lại với nhau và trả về string
x được chèn giữa các phần tử
object.key(obj)
push()
trả về array chứa tất cả từ khóa của obj đầu vào
thêm n phần tử vào cuối array
pop()
xóa phần tử cuối cùng của array
unshift()
thêm phần tử đầu array
shift()
xóa phần tử đầu tiên trong array
splice(start,delete,data)
start vị trí bắt đầu làm việc
delete số lượng xóa đi
data thêm mới vào vị trí start
reverse()
tạo ra array viết theo chiều ngược lại
slice(start,end)
copy và tạo mới
start : điểm bắt đầu copy
end : điểm kết thúc copy
toString()
ép kiểu về dạng chuỗi
var newArr = array.map(function(value, index){
//
value: giá trị phần tử trong array
return newValue
})
index: vị trí phần tử trong array
newArr sẽ lưu trữ toàn bộ kết quả trả về bởi map
map return gì thì newArr chứa cái đó
số lượng phần tử trong newArr ln bằng số lượng phần tử của array
var newArr = array.filter(function(value, index){
///
return true
})
filter dùng để tạo array mới sau khi lọc bớt phần tử trong array ban đầu
return true thì giữ lại
return false thì lọc bỏ đi
array.sort(function(after, before){
after: số liền sau
})
before: số liền trước
return số âm => after đảo lên trước before
return số dương => before đứng trc after
return 0
return a-b
=> giữ nguyên vị trí
sắp xếp tăng dần
================================================================================
StringMethod
length
độ dài string
string[i]
lấy kí tự thứ i của string
slice(start,end)
cắt string từ start đến end
substring(start,end)
cắt string từ start đến end (dùng riêng cho string)
subst(start,end)
cắt string từ start đến end (dùng riêng cho string)
charCodeAt(kí tự)
trả về ví trí kí tự trong bảng ascii
fromCharCode
trả ra kí tự của vị trí index trong bảng ascii
startsWith()
kiểm tra phần tử đầu của string
endsWith()
kiểm tra phần tử cuối của string
indexOf(value,start)
value : giá trị tìm kiếm
start : ví trí bắt đầu tìm kiếm
trả về kí tự đầu tiên tìm kiếm
lastIndexOf(value,end)
value : giá trị tìm kiếm
end : vị trí kết thúc tìm kiễm
trả về kí tự cuối cùng tìm kiếm
includes(value,start)
value : giá trị tìm kiếm
start : ví trí bắt đầu tìm kiếm
trả về true nếu có kí tự tìm kiếm
false nếu k có
replace(find value, replace value)
find value : kí tự tìm kiếm
replace value : kí tự thay thế
tạo ra string mới có kí tự được thay thế theo yêu cầu
find value = /kí tự/gi
split('x')
sửa tồn bộ
tạo ra array từ string ban đầu
x là tín hiệu cắt
toLowerCase()
tất cả viết thường
toUpperCase()
tất cả viết hoa
====================================================================================
DATE
new Date()
new Date(string)
new Date(number)
thời gian hiện tại
string phải ở định dạng năm tháng ngày
trả về date quy đổi theo milisec so sánh với 1/1/1970
new Date(năm,tháng,ngày,giờ,....)
trả về date cụ thể theo thời gian yêu cầu
tháng đếm từ 0
get
truy vấn date object
getFullyear
truy vấn năm
getMonth
truy vấn tháng
getDate
truy vấn ngày
getDay
truy vấn thứ trong tuần
0 là CN, 6 là thứ 7
set tương tự get
toString
hiển thị date dạng string
================================================================================
Math Method
abs
giá trị tuyệt đối
cbrt
căn bậc 3
pow(cơ số, số mũ)
max(...number)
số mũ
tìm số lớn nhất
