Ngu ngơ học làm web (20) - Căn bản lập trình JavaScript (3)

tiếp theo của: Ngu ngơ học làm web (19) -  Căn bản lập trình JavaScript (2)
---------

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]
-----------