[사전캠프 Day 7] 자바스크립트 (JS)

브라우저에 동적인 기능을 추가하기 위해 Javascript를 씀! 

 

1) let으로 변수(와 해당하는 값) 선언, 두개에 다른 문자열 더하면 하나의 문장으로 생성 가능.

 

 

2) 리스트 [], 딕셔너리 {}

let a = ['사과', '배', '수박'];
console.log(a[0]);

let person = {'name':'bob', 'age':30, 'height':180};
let name = person['name'];
console.log(name); //bob

 

 

3) 반복문(리스트와 주로 같이 쓰임), 조건문

let age = 15;
if(age < 20) {
console.log('청소년입니다');
}else{ console.log('성인입니다');}

let ages = [1,2,3,4,5,6];
ages.forEach(el => {
console.log(el)
});

 

 

4) 함수

function hey(){
alert('안녕하세요');
}


//html에서 onclick ="hey()" 이런식으로 클릭 시 해당 함수 작동하도록 만들 수도 있음.

 

 

jQuery: HTML 요소들을 조작하는 JS를 미리 더 쉽게 작성해둔 라이브러리.

 

jQuery 이용 시 사용하는 jQuery CDN 코드

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

 

 

 

요소의 id이용해서 해당 텍스트 바꾸는 함수

function hey() {
$('#title').text('텍스트 바꾸기');
}

 

 

 

리스트 안에 딕셔너리 타입의 요소들을 넣고 사용해보기

    function checkResult() {
      let c = [
        { name: "영수", age: 30 },
        { name: "철수", age: 35 },
      ];
      $(".button-part").text(c[1]["age"]);
    }

 

 

 

아래 코드는 forEach를 사용해서 fruits 리스트에 담긴 요소들을 하나씩 가져오고, q1이라는 id 값을 갖는 요소 안에 p태그로 가져온 요소들을 추가해 준다.

    function checkResult() {
      let fruits = ["사과", "배", "감", "귤", "수박"];
      $("#q1").empty(); //특정요소의 내용을 비우는 코드임.
      fruits.forEach((el) => {
        // let temp_html = `<p>${el}</p>`;
        // $("#q1").append(temp_html);
        $("#q1").append(`<p>${el}</p>`); //리스트 아에 있는 요소 하나씩 반복문으로 추가해주기
      });
      
    }

temp_html이라는 변수를 하나 생성해서 추가해주면 가독성은 높아질 수 있으나, for문이 동작할 때마다 변수를 계속 생성해주는 과정이 불필요하다고 생각했다.그래서 el 요소가 forEach문 실행 시 중간변수없이 추가되게끔 수정했다. 찾아보니 실제로 중간 변수를 굳이 정의하는 것은 조금 더 많은 메모리를 사용할 가능성이 있으나, 현대의 브라우저와 JS 엔진에서는 성능에 거의 영향을 주지 않는다고 한다. 고로, 중간 변수 사용은 코드 가독성을 높이거나, 문자열 생성 로직이 복잡할 때 사용해도 괜찮을 것 같다.

 

 

아래는 onclick시 실행시킬 함수를 작성했는데, 해당 리스트 안에 있는 딕셔너리의 값을 반복해서  p태그로 담아 q2 아이디를 갖는 요소에 추가한다. 

function checkResult() {
      let people = [
        { name: "서영", age: 24 },
        { name: "현아", age: 30 },
        { name: "영환", age: 12 },
        { name: "서연", age: 15 },
        { name: "지용", age: 18 },
        { name: "예지", age: 36 },
      ];

      $("#q2").empty();

      people.forEach((a) => {
        let name = a["name"];
        let age = a["age"];
        $("#q2").append(`<p>${name}은 ${age}살 입니다`);
      });
    }

 

 

 

결과........

하지만, 문제는 저 '은/는'이 제대로 구별되어져서 출력하지 않는다는 것이 거슬린다...

 

그래서 검색 끝에 추가한 코드...

 function checkEunNun(str) {
      const lastChar = str.charCodeAt(str.length - 1); //마지막 글자(배열 형식으로 생각했을때 마지막 글자의 인덱스가 length - 1임) 떼어와서
      // 유니코드로 바꾸기
      // 검색 결과 종성 인덱스는 (한글 유니코드값 - 0xAC00) % 28 임

      const isLastChar = (lastChar - 0xac00) % 28;
      //위에 값이 있으면 '은', 없으면 '는' 리턴.

      if (isLastChar) {
        return "은";
      }
      return "는";
    }

    function checkResult() {
      let people = [
        { name: "서영", age: 24 },
        { name: "현아", age: 30 },
        { name: "영환", age: 12 },
        { name: "서연", age: 15 },
        { name: "지용", age: 18 },
        { name: "예지", age: 36 },
      ];

      $("#q2").empty();

      people.forEach((a) => {
        let name = a["name"];
        let age = a["age"];

        $("#q2").append(`<p>${name}${checkEunNun(name)} ${age}살 입니다`);
      });
    }

이름의 종성을 유니코드로 변환 후 종성이 있으면 '은', 없으면 '는'을 출력하는 함수 만들어서 사용해보았다.

 

짜잔~~~ 한결 보기 편하다 ㅎ

 

 

오늘은 JS, jQuery에 대한 기초적인 개념을 배우고 활용해보았다. jQuery는 비교적 요소를 쉽게 가져다 쓰고 기능을 추가할 수 있는 것 같아서 HTML, CSS와 같이 사용하기 더욱 편리할 것 같다.