---------
Phần 20. Căn bản lập trình JavaScript (3)
Clip 22: bài tập về Array
Bài tập 1. Loại bỏ các phần tử trùng nhau trong một mảng.
Ví du cho mảng
arr = [1, 2, 4, 5, 1, 3, 5, 6, 7, 3, 5, 4, 7]
Mảng kết quả
result = [1, 2, 4, 5, 3, 6, 7]
Mã tham khảo,
var arr = new Array(1, 2, 4, 5, 1, 3, 5, 6, 7, 3, 5, 4, 7);
var arrResult = new
Array();
// ý tưởng: duyệt
từng phần tử trong arr, nếu phần tử đó chưa có
// trong arrResult
thì thêm vào arrResult
for(x in arr){
if(arrResult.indexOf(arr[x]) < 0){
arrResult.push(arr[x]);
}
}
// document.write('arrResult:
' + arrResult);
arr = arrResult;
document.write('arr:
' + arr);
Bài tập 2. Tạo chỉ mục kiểu chuỗi cho mảng.
– Việc tạo chỉ mục là kiểu chuỗi giúp việc thao tác trên
mảng dễ dàng hơn.
– Khai báo mảng giống như một đối tượng, sử dụng ngoặc {}
Ví dụ,
var student = {'Họ tên' : 'Nguyễn Văn Tèo'};
document.write('Họ
tên: ' + student['Họ tên']);
Xem đoạn mã tham khảo,
var student = {'Họ' : 'Nguyễn Văn', 'Tên' : 'Tèo', 'Năm sinh' :
2000, 'Giới tính' : 1};
var result = {};
result['Họ tên'] = student['Họ'] + ' ' +
student['Tên'];
result['Tuổi'] = 2019
- student['Năm sinh'];
result['Giới tính'] =
student['Giới tính'] == 1 ? 'Nam' : 'Nữ'
// xuất thông tin một
sinh viên
for(x in result){
document.write(x +
' : ' + result[x] + '<br>');
}
Bài tập 3. Xử lý mảng lồng.
var students = new Array(
['Nguyễn Văn Tèo',
[4,5,6]],
['Nguyễn Văn Tí',
[5,7,6]],
['Lê Thị Bơ',
[6,5,6]]
);
// tính điểm trung bình
cho mỗi sinh viên
for(x in students){
var scoresOfStudent
= students[x][1];
// tính tổng điểm
của mỗi sinh viên
var temp = 0;
for(y in
scoresOfStudent){
temp +=
scoresOfStudent[y];
}
document.write('DTB
của ' + students[x][0] + ' là: ' + (temp/scoresOfStudent.length).toFixed(1) +
'<br>');
}
Clip 23: đối tượng String
Khai báo một chuỗi,
var str = new String('Chuoi trong JS');
var str1 = 'Cach khai
bao khac';
Có thể xem chuỗi chính là một mảng các kí tự,
Ví dụ,
var str = new String('Chuoi trong JS');
// chiều dài của chuỗi
document.write(str.length);
// xuất kí tự thứ 2
document.write('<br>' + str[1]);
Clip 24: các
phương thức của đối tượng String
– charAt(): dùng
để trích một kí tự
Ví dụ,
var str = new String('Chuoi trong JS');
// sử dụng charAt()
var ch = str.charAt(2);
document.write(ch);
– charCodeAt(): dùng để lấy mã ASCII của một kí tự
var str = new String('Chuoi trong JS');
document.write(str.charCodeAt(0));
– fromCharCode(): dùng để đổi một mã ASCII sang kí tự
document.write(String.fromCharCode(65));
– concat(): nối các chuỗi với nhau
var str = new String('Chuoi trong JS');
var str1 = new
String('de hieu');
document.write(str.concat(' ', str1));
– indexOf(): trả
về ví trị (đầu tiên) của một chuỗi con
var str = new String('JS Chuoi trong JS');
document.write(str.indexOf('JS'));
– lastIndexOf(): trả về ví trị (sau cùng) của một chuỗi con
var str = new String('JS Chuoi trong JS');
document.write(str.lastIndexOf('JS'));
Clip 25: các phương thức của đối tượng String (tt)
– search(): trả về vị trí tìm thấy đầu tiên của một chuỗi
(giống hàm indexOf())
var str = new String('JS Chuoi trong JS');
document.write(str.search('JS'));
– match(): tìm chuỗi theo biểu thức chính quy
var str = new
String('JSabc Chuoi trong abJScd');
document.write(str.match(/JS/g));
– replace(‘chuỗi cũ’, ‘chuỗi mới’): thay thế chuỗi
var str = new String('JS Chuoi trong JS');
document.write(str.replace('JS', 'CSS'));
– slice(‘vị trí
bắt đầu’, ‘vị trí kết thúc’): trích chuỗi con
var str = new String('JS Chuoi trong JS');
document.write(str.slice(3,5));
//Ch
Clip 26: các phương thức của đối tượng String (tt)
– substring(‘vị trí bắt đầu’, ‘vị trí kết thúc’): trích
chuỗi con
var str = new String('JS Chuoi trong JS');
document.write(str.substring(3,5)); //Ch
– substr(‘vị trí bắt đầu’, số kí tự cần lấy): trích chuỗi
con
var str = new String('JS Chuoi trong JS');
document.write(str.substr(3,5)); // Chuoi
– split(): tách chuỗi thành mảng
var str = new String('JS Chuoi trong JS');
// tách chuỗi theo
khoảng trắng
document.write(str.split(' '));
– toLowerCase(): chuyển thành chữ thường
var str = new String('JS Chuoi trong JS');
document.write(str.toLowerCase());
– toUpperCase(): chuyển thành chữ hoa
var str = new String('JS Chuoi trong JS');
document.write(str.toUpperCase());
Clip 27: các phương thức tạo HTML wrapper cho chuỗi
– anchor(): tạo phần tử a
var str = new String('JS Chuoi trong JS');
document.write(str.anchor('txtanchor'));
// <a name="txtanchor">JS Chuoi trong
JS</a>
– link(): tạo ra một liên kết
var str = new String('JS Chuoi trong JS');
document.write(str.link('http://www.google.com'));
– big(), small(), italic(), fontcolor(), fontsize(),
strike(), sub(), sup(): định dạng chữ đậm, nhỏ, nghiêng, màu, cỡ chữ, xóa chữ,
viết kiểu sub, kiểu sup.
document.write(str.big());
document.write(str.fontcolor('red'));
document.write(str.fontsize(2));
Clip 28: bài tập liên quan đến đối tượng String
Bài 1. Viết phương thức mở rộng của đối tượng String để tách
họ tên của một người thành 3 phần: họ, tên lót và tên.
Đoạn mã tham khảo.
[test.html]
<!DOCTYPE
html>
<html
lang="en">
<head>
<title>Document</title>
<script>
String.prototype.splitName = function(){
var
result;
var
spaceFirst = this.indexOf(' ');
var
spaceLast = this.lastIndexOf(' ');
if(spaceFirst > 0 && spaceLast > 0){
result
= 'Họ:' + this.slice(0, spaceFirst) + '<br>';
result
+= 'Tên lót:' + this.slice(spaceFirst + 1, spaceLast) + '<br>';
result
+= 'Tên:' + this.slice(spaceLast + 1);
}else{
result
= 'Dữ liệu không hợp lệ';
}
return
result;
}
function
splitName(){
var
fullName = new String();
fullName =
document.getElementById('full-name').value;
document.getElementById('result').innerHTML = fullName.splitName();
}
</script>
<style>
* {
padding: 0px;
margin:
0px;
}
.content{
width:
400px;
height:
200px;
margin:
20px auto;
padding:
20px;
border:
1px solid red;
text-align: center;
}
.content
input[type=button] {
padding:
2px 5px;
}
.content
#result {
text-align: justify;
font-weight: bold;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="content">
<input
type="text" name="full-name" id="full-name">
<input
type="button" value='Tách tên' onclick="splitName();">
<div
id="result"></div>
</div>
</body>
</html>
-----------
Cập nhật [3/9/2020]
-----------
Xem thêm:
- Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (21) - Căn bản JavaScript (4)_Math_Boolean_Date
- Tổng hợp các bài viết về Ngu ngơ học làm web
- Ngu ngơ học làm web (21) - Căn bản JavaScript (4)_Math_Boolean_Date