스파르타 코딩 웹개발 2주차 강의 (1) - JQuery

오늘은 항해99의 강의를 통해 제이쿼리에 대해서 배웠다.

제이쿼리란, 쉽게 말해 디자인을 하기 쉽게 이미 만들어 놓은 부트스트랩처럼 자바스크립트 코드를 쉽게 작성하기 위해 개발자들이 이미 만들어 놓은 자바스크립트의 라이브러리 정도로 이해하면 될 것 같다.  

오늘도 역시 배운것을 확실히 이해하고 넘어갈 수 있도록 퀴즈가 주어졌고, 퀴즈 내용은 다음과 같다.

위의 화면 내용을 구현하기 위해 작성한 코드 내용은 다음과 같다.

1번, 2번 퀴즈 문제

box.includes('@')는 box라고 선언한 변수에 @가 포함되어 있는지는 묻을 때 사용한다.

box.split('@')은 box안의 값을 @를 기준으로 나눈다는 뜻으로, 예를 들어 hong@gmail.com이라는 이메일이 있으면 [hong, gmail.com]과 같이 2개의 배열이 생긴다.

3번 퀴즈 문제

이번 제이쿼리를 배우면서 백틱(backtick)(``)에 대해 다시 한 번 편하다는 것을 느꼈다. 예를 들어 3번 퀴즈에 `<li> ${plusBox}</li>`라고 적힌 부분은 백틱(``)으로 표현한 것이라면 홑따옴표('')로 표시하면 '<li>'+plusBox+'</li>와 같다.

백틱은 자바스크립트 ES6부터 나온 표기방식으로 백틱(``)에 +연산기호 없이 한줄로 표기가 가능하다.(변수는 EL태그(${})로 감싸주어야 한다.) 태그와 변수사이에 +연산기호로 구분해주고 그때마다 홑따옴표('')로 표시해 줘야 하는 것을 생각하면 백틱을 사용하는 것이 훨씬 편하다는 생각이 든다. 

names.append(temp_html)에서 append는 names뒤에 temp_html이라고 선언한 값을 붙여준다는 뜻이다.

$('#names-q3').empty()는 id names-q3으로 가져온 값들을 전부 비워준다는 뜻이다.

문제 내용(id값 참고)