js chatbot 챗 봇 만들기 기초 연습

연습용 챗봇 만들기

서버를 다루지 못해 js코드만 사용했다. 

 

함수 외 선언

    let count = 0; // 조건문을 선택하는 길잡이
    let container = document.getElementById('container');
    let retext = document.getElementById('retext'); // 봇 대답 텍스트
    let addQuestion; // 등록 질문
    let addAnswer; // 등록 답변
    let commend = [ // 질문과 답변에 배열
      {
        'question' : '안녕',
        'answer' : '안녕 냥~',
      },
      {
        'question' : '잘가',
        'answer' : '잘가라 냥~',
      },
      {
        'question' : '불꺼줘',
        'answer' : function(){
          retext.innerHTML = '불을 꺼줬다 냥'
          retext.style.color = '#fff'
          container.style.backgroundColor = '#000';
        },
      },
      {
        'question' : '불켜줘',
        'answer' : function(){
          retext.innerHTML = '불을 켜줬다 냥';
          retext.color = '#000';
          container.style.backgroundColor = '#fff';
        },
      },
      {
        'question' : '따',
        'answer' : '안녕 냥~',
      },
      ]

하나의 함수 내에 상황에 따라 여러 조건문을 사용하기 위한 길잡이 역할의 변수 count를 선언 

변경될 html태그를 가져오기 container , retext

추가로 질문과 답변을 등록하기 위한 임의의 변수 선언(등록되지 않은 대화를 배우기 위한) addQuestion , addAnswer

기본적으로 등록한 대화를 객체형태의 배열로 선언 commend 

객체형태의 배열이 아닌 따로 조건문을 사용하여 실행해도 무방함 ( 이렇게 사용할 경우 조건의 ||(or)등을 사용하여 대화의 다체로운 변화를 주기가 용이하다.)

 

 

 

함수 내부 1

function chat(){
      let value = document.getElementById('chat_text'); // 입력하는 input태그

      for(let i = 0; i < commend.length ; i ++){
        if(value.value == commend[i].question){ // 배열을 순회하여 조건 찾기
         if(typeof(commend[i].answer) == 'string'){ 
           retext.innerHTML = commend[i].answer; // 답이 문자열이면 그대로 내용 변경
           value.value = ""; // 작성 칸 초기화
           return; // 해당되면 해당 값 반환 후 함수 종료
         }else{
           let fn = commend[i].answer;
           fn();                                //  답이 함수면, 함수 실행
           value.value = ""; // 작성 칸 초기화
           return; // 해당되면 해당 값 반환 후 함수 종료
         }        
        }
      }
      retext.innerHTML = '모르겠어요 <br> 말을 가르쳐 주실래요? (네, 아니요)'; // 값을 찾지 못하면 실행되는 질문

      /*(조건 코드 생략)*/

      count = 1;  // 다음 실행에는 조건문 1에 해당
      addQuestion = value.value;  // 전에 작성한 질문 저장
      value.value = "";  // 작성 칸 초기화
    }

기본 구조는 위에 코드를 갖는다. 

 

입력 받은(질문 받은) 값을 미리 정한 대화에 있는지 배열을 순회하여 찾기

값의 답을 찾고 그 값이 문자열이라면 대답 text에 표시, 만약 함수라면 함수를 실행 ( 숫자나 불린 등 다른 문자열은 사용 안했지만, 조건문을 추가로 활용 할 수 있다.)

 

만일 정해둔 답에 값이 없다면, 위에 텍스트를 작성하고, 생략된 다음 조건문에 부합할 수 있도록 count를 1로 재선언 

및 답이 없던 질문을 새로운 변수에 할당[addQuestion] ( 질문을 등록하기 위함)

 

 

위 코드에 생략된 함수 내 코드

      if(count === 1){
        if(value.value === '네'){
          retext.innerHTML = `(${addQuestion})에 해당되는 답을 작성해 주세요` // 전에 작성한 진문에 대한 답 요구
          count = 2; // 다른 조건문으로 연결
          value.value = ""; // 작성 칸 초기화
          return;
          
        }else if(value.value === '아니요'){
          retext.innerHTML = '아쉽다 냥~'
          count =0; // 처음 상태
          value.value = ""; // 작성 칸 초기화
          return;
        }else{
          alert('대답을 하지 않으셨습니다.');
        }
      }

      if(count === 2){
        addAnswer = value.value;
        retext.innerHTML = `${addQuestion}이라는 질문에<br>${addAnswer}의 답변이 등록 됐습니다.`
        commend.push({question: addQuestion , answer: addAnswer + ` 냥 ~ `});
        count = 0;
        value.value = ""; // 작성 칸 초기화
        return;
      }

함수를 한 번 실행하게되면 count 값은 1이 되고, 그 다음 함수를 실행하면 (실행 후 기존 답이 없다는 가정하에) 

대답이 '네'인 경우 기존에 할당한 질문에 대한 답을 요구하고 count 2로 재선언하여 새로운 조건문에 부합을 시킨다.

대답이 '아니요'인 경우에는 count를 0으로 선언하여 초기화한다.

 

'네' 대답 후 다시 함수를 실행시키게 되면, count가 2임으로 질문과 답변을 기존 배열에 추가한다. 

 

 

여기서 서버에 저장하지 않기 때문에 새로고침을 하면 저장한 내용이 초기화된다. 

 

 

 

---

아주 기본만 알고 기본기만 사용하여 작성한 코드입니다. 많은 오류가 있을 것 같네요..... 기회가 된다면 더 깔끔하고 오류 없는 코드로 돌아오겠습니다.

---

전체 코드

    let count = 0; // 조건문을 선택하는 길잡이
    let container = document.getElementById('container');
    let retext = document.getElementById('retext'); // 고양이 대답 글
    let addQuestion; // 등록 질문
    let addAnswer; // 등록 답변
    let commend = [ // 질문과 답변에 배열
      {
        'question' : '안녕',
        'answer' : '안녕 냥~',
      },
      {
        'question' : '잘가',
        'answer' : '잘가라 냥~',
      },
      {
        'question' : '불꺼줘',
        'answer' : function(){
          retext.innerHTML = '불을 꺼줬다 냥'
          retext.style.color = '#fff'
          container.style.backgroundColor = '#000';
        },
      },
      {
        'question' : '불켜줘',
        'answer' : function(){
          retext.innerHTML = '불을 켜줬다 냥';
          retext.color = '#000';
          container.style.backgroundColor = '#fff';
        },
      },
      {
        'question' : '따',
        'answer' : '안녕 냥~',
      },
      ]
    function chat(){
      let value = document.getElementById('chat_text'); // 입력하는 input태그

      for(let i = 0; i < commend.length ; i ++){
        if(value.value == commend[i].question){ // 배열을 순회하여 조건 찾기
         if(typeof(commend[i].answer) == 'string'){ 
           retext.innerHTML = commend[i].answer; // 답이 문자열이면 그대로 내용 변경
           value.value = ""; // 작성 칸 초기화
           return; // 해당되면 해당 값 반환 후 함수 종료
         }else{
           let fn = commend[i].answer;
           fn();                                //  답이 함수면, 함수 실행
           value.value = ""; // 작성 칸 초기화
           return; // 해당되면 해당 값 반환 후 함수 종료
         }        
        }
      }
      retext.innerHTML = '모르겠어요 <br> 말을 가르쳐 주실래요? (네, 아니요)'; // 값을 찾지 못하면 실행되는 질문

      
      if(count === 1){
        if(value.value === '네'){
          retext.innerHTML = `(${addQuestion})에 해당되는 답을 작성해 주세요` // 전에 작성한 진문에 대한 답 요구
          count = 2; // 다른 조건문으로 연결
          value.value = ""; // 작성 칸 초기화
          return;
          
        }else if(value.value === '아니요'){
          retext.innerHTML = '아쉽다 냥~'
          count =0; // 처음 상태
          value.value = ""; // 작성 칸 초기화
          return;
        }else{
          alert('대답을 하지 않으셨습니다.');
        }
      }

      if(count === 2){
        addAnswer = value.value;
        retext.innerHTML = `${addQuestion}이라는 질문에<br>${addAnswer}의 답변이 등록 됐습니다.`
        commend.push({question: addQuestion , answer: addAnswer + ` 냥 ~ `});
        count = 0;
        value.value = ""; // 작성 칸 초기화
        return;
      }
      
      count = 1;  // 다음 실행에는 조건문 1에 해당
      addQuestion = value.value;  // 전에 작성한 질문 저장
      value.value = "";  // 작성 칸 초기화
    }

    const act = document.getElementById('act');
    act.addEventListener('click', chat);