실전 JavaScript

WordCounter.js

본 수업은 자바스크립트를 이용해서 문서 내의 단어 빈도 랭킹을 구하는 프로그램을 만들어보는 수업입니다. 

댓글

댓글 본문
작성자
비밀번호
  1. Seongho Kim
    소스코드(https://github.com......unt)에 대한 간략한 설명...
    웹브라우저 자바스크립트 마지막 수업에서 링크를 따라 이리로 들어왔는데...알고 보니 여러 수업들로 이 프로그램 구현 과정을 자세하게 설명하고 있군요. 그냥 아래 설명은 짧은 개관 정도라 생각하고 보시기 바랍니다.

    /* 1. 문서를 읽어들여 화이트스페이스 2개 이상 짜리는 제거 --> 뉴라인은 스페이스로 --> 스페이스로 단어 구분 --> 배열로 저장 */
    wordsChunk = document.getElementsByTagName('body')[0].textContent.replace(/\s{2,}/g, '').replace(/\n/g, ' ').split(' ');

    /* 2. wordSortTable 객체 생성 --> 전체 단어뭉치의 모든 단어를 소문자로 변환 */
    wordSortTable = {};
    for(i = 0; i < wordsChunk.length; i++){
    var current = wordsChunk[i].toLowerCase();

    /* 3. wordSortTable(객체=연관배열)에 단어별 저장, key는 단어, 같은 단어면 value(빈도) 1 증가 */
    wordSortTable[current] = wordSortTable[current] == undefined ? 1 : wordSortTable[current]+1;
    }

    /* 4. wordSort 배열 생성 --> 단어 길이 1이면서 Word가 아닌 경우 스킵 --> wordSortTable 객체에 저장된 데이터 하나씩 읽어서 wordSort 배열에 저장 (한 레코드는 key(단어), value(빈도)로 구성된 배열임, 따라서 전체 배열은 2차원 배열이 됨) */
    wordSort = [];
    for(var name in wordSortTable){
    if(name.length == 1 && name.match(/\W/g))
    continue;
    wordSort.push([name, wordSortTable[name]]);
    }

    /* 5. wordSort 배열의 단어를 빈도에 따라 정렬하고 --> 1위 ~ 40위까지를 추려서 wordSort 배열에 저장 */
    wordSort.sort(function(a, b) {return b[1] - a[1]});
    wordSort = wordSort.slice(0, 40);

    /* 6. 타이틀과 함께 출력 cf. 2차원 배열 각각의 엘리먼트는 {단어, 빈도}로 구성됨 */
    str = 'WordCounter.js (by 서툰 영어의 시대)\n';
    for(var i = 0; i < wordSort.length; i++){

    /* 7. 각 배열은 두 번째 엘리먼트가 빈도, 첫 번째 엘리먼트가 단어, 매 레코드 끝에 뉴라인 찍어줌 */
    str += wordSort[i][1] +", "+ wordSort[i][0] + "\n";
    }
    alert(str);
  2. 감사합니다... 어떻게 이 프로그램을 만드는지도 알고 싶어요. ^^
  3. Byeong Heon Lee
    감샤감샤
  4. tachyon
    감사합니다
  5. 우욱진
    감사합니다~
    대화보기
    • JustStudy
      2016.-07.19 화
      고맙습니다 3.
    • JustStudy
      2016.07.03 월
      고맙습니다 2.
    • JustStudy
      고맙습니다
    • sugarui
      아... 이분 닉네임 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ
      대화보기
      • bluetree
        링크주소입니다.
        https://github.com......unt
      • 2015-11-13
        신기하네요 ㅎㅎ
      • 엔터를 땅치면 요롷케
        일등이다~ 감사합니다.
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기