내일배움단 Web2.1

May 20, 2022

[웹개발 종합반] 2주 1일차 개발일지(2주 1-6강)

💻TIL Web.201

1. Javascript 복습하기

1) 버튼을 누를 때 alert창 띄우기

<script>
  function hey() {
    alert("안녕!");
  }
</script>
...
<button onclick="hey()">버튼</button>

HTML 문서의 <script>태그 안에 함수를 정의한 후, <button> 태그 안에서 onclick 속성에 함수 이름을 주면 버튼을 눌렀을 때 함수를 호출할 수 있다.

2) 클릭 횟수에 따라 홀수, 짝수 alert 창 띄우기

<!-- X -->
<script>
  function hey() {
    let count = 1;
    if (count % 2 == 0) {
      alert('짝수입니다!');
    } else {
      alert('홀수입니다!');
    }
    count += 1;
  }
</script>

위의 코드를 실행시키면 버튼을 누를 떄마다 ‘홀수입니다!’ 만 뜬다. 이는 함수를 호출할 때마다 count가 다시 1로 초기화되기 때문이다. 변수를 함수 안에서 선언하면, 변수는 함수가 끝나며 자동적으로 사라진다. count의 축적된 값을 함수에 반영하려면 count의 정의(선언)가 함수 바깥쪽에서 이루어져야 한다. 즉 count가 전역 변수(함수 상관없이 스크립트 어디에서든 쓸 수 있는 변수)가 되어야 한다.

<!-- O -->
<script>
  let count = 1; 
  function hey() {
    if (count % 2 == 0) {
      alert('짝수입니다!');
    } else {
      alert('홀수입니다!');
    }
    count += 1;
  }
</script>

2. JQuery 사용하기

1) jQuery란?

JavaScript의 궁극적인 목적은 HTML을 조작해서 움직이게 하는 것이다. jQuery는 이러한 편리한 기능의 JavaScript를 미리 작성해둔 라이브러리다(CSS 대신 부트스트랩을 가져다 쓴 것과 비슷한 맥락이다.)전문 개발자들이 짜둔 코드를 가져와서 사용하는 것이므로, 사용하기 전에 꼭 맨 위에 import를 해야 한다.

2) jQuery 사용하기

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

jQuery는 위의 코드를 복사해 <head> 태그 안에 넣으면 HTML 문서에 import된다. 단, 부트스트랩을 사용할 경우에는 부트스트랩에 jQuery가 쓰이고 있기 때문에 미리 import가 되어 있으므로 한 번 더 import할 필요는 없다. 부트스트랩 템플릿으로 시작하지 않은 경우, 위의 코드로 jQuery를 import하면 된다.

3. JQuery 연습하기

1) input 박스의 값을 가져오기/입력하기

CSS에서 특정 태그나 class를 지칭해 꾸몄던 것과 마찬가지로, jQuery에서도 명령을 내리기 위해서는 먼저 명령을 내릴 대상을 지칭해야 한다. 이번에는 id를 사용해 대상을 지칭해보자.

<input type="text" id="article-url">

console 창을 열어 아래와 같은 템플릿을 입력하면 input 박스 안의 값에 접근할 수 있다.

$('#아이디').val();

$('# ')는 괄호 안 아이디 값을 가리키고, val()은 값을 가져온다. val() 안의 괄호에 특정 값을 넣으면 input 박스 안에 있던 입력값이 바뀐다.

2) div 박스 숨기기/보이기

$('#아이디').hide();
$('#아이디').show();

div 태그에 id값을 지정하고, $('')로 id를 지칭하는 부분까지는 앞 과정과 동일하다. 특정 개체를 숨기기 위해서는 직관적으로 hide()를 이용하면 된다. 다시 나타나게 하기 위해서는 같은 자리에 show()를 사용하면 된다. 이 코드를 이용해 특정 개체를 클릭하면 사라지고, 다시 클릭하면 보이는 기능을 만들 수 있다.

3) css 속성값 가져오기

// width 속성값 가져오기
$('#아이디').css('width');

// width 속성값 바꾸기
$('#아이디').css('width', '700px');

// display 속성값 가져오기
$('#아이디').css('display');

속성값을 가져오거나 바꿀 때에는 따옴표(‘‘)를 사용해야 한다.

$('#post-box').css('display');  // 'block'

$('#post-box').hide();
$('#post-box').css('display');  // 'none'

div 박스를 hide()로 숨긴 후 display 속성값을 가져오면 none이 뜨는데, 이는 해당 개체가 보이지 않는 상태라는 것을 뜻한다. 이 값을 이용하면, ‘보이지 않는 상태라면 클릭 시 다시 나타나게 해라’의 조건문 부분을 작성할 수 있다.

4) 태그 내 텍스트 입력하기

// input box의 경우
$('#아이디').val();

// input box를 제외한 경우(button 등)
$('#아이디').text();

앞에서 input 박스의 값을 가져오고 바꿀 때 val()을 이용했다면, button 등 input이 아닌 태그는 text()를 이용해 값을 가져오고 바꾼다.

5) 태그 내 html 입력하기

let temp_html = `HTML 코드`
$('#아이디').append(temp_html);

back-tick(``)을 사용하면 HTML처럼 생긴 문자열(string)이 만들어지는데, 이를 실제 HTML 태그처럼 만들 수 있다.

let temp_html = `<button>버튼!</button>`
$('#cards-box').append(temp_html);

위 예시 코드에서 append를 사용해 문자열을 추가하면, 실제 HTML 태그를 쓴 것처럼 페이지에 버튼이 추가되는 것을 볼 수 있다. 이를 이용해 카드를 구성하는 코드 자체를 back-tick 안에 넣고 append를 이용해 페이지에 더해 붙여나갈 수 있다.

6) JQuery 적용하기(나홀로메모장)

구현할 기능

초기 화면에서 포스팅 박스는 숨겨진 상태, 버튼 텍스트는 ‘포스팅박스 열기’. ‘포스팅박스 열기’ 버튼 누르면 포스팅 박스 나타나고 버튼 텍스트 ‘포스팅박스 닫기’.

스스로 해보기

<style>
  #post-box {
    display: none;
  }
</style>
...

<script>
  function openclose() {
    if ($('#post-box').css('display') == 'none') {
      $('#btn-posting-box').text('포스팅박스 닫기');
      $('#post-box').show();
    } else {
      $('#btn-posting-box').text('포스팅박스 열기');
      $('#post-box').hide();
    }
  }
</script>

...

<body>
  <button onclick="openclose()">포스팅박스 열기</button>
</body>

포스팅 박스의 초기 상태를 숨김 처리하기 위해 CSS에서 기본 display 속성을 none으로 설정했다. <script> 태그의 openclose() 함수는 포스팅 박스가 숨김 처리되었을 때는 클릭 시 포스팅 박스를 열고 버튼 텍스트를 ‘포스팅박스 닫기’로 바꾸고, 포스팅 박스가 열려 있는 경우는 클릭 시 포스팅 박스를 닫고 버튼 텍스트를 ‘포스팅박스 열기’로 바꾼다.

해설 코드

💡TIP : 코드 작성 시 alert()나 console.log()로 작동 여부 자주 확인하기!

<style>
  .posting-box {
    display: none;
  }
</style>

...

<script>
  function openclose() {
    let status = $('#post-box').css('display');
    if (status == 'none') {
      $('#btn-posting-box').text('포스팅박스 닫기');
      $('#post-box').show();
    } else {
      $('#btn-posting-box').text('포스팅박스 열기');
      $('#post-box').hide();
    }
  }
</script>

...

<body>
  <button onclick="openclose()">포스팅박스 열기</button>
</body>

해설 코드에서는 $('#post-box').css('display')를 바로 사용하지 않고 status라는 새로운 변수를 설정했는데, 코드가 더 간결해 보여서 좋은 것 같다.

4. JQuery Quiz

1) 빈칸 체크 함수 만들기

① 버튼을 눌렀을 때 입력한 글자로 alert창 띄우기

② 버튼을 눌렀을 때 칸이 비어있는 경우 ‘입력하세요!’ alert창 띄우기

힌트

function q1() {
  // 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
  // 2. 만약 입력값이 빈칸이면 if(입력값=='')
  // 3. alert('입력하세요!') 띄우기
  // 4. alert(입력값) 띄우기
}

나의 코드

function q1() {
  let inputValue1 = $('#input-q1').val();
  if (inputValue1 == '') {
    alert('입력하세요!');
  } else {
    alert(inputValue);
  }
}

해설 코드

function q1() {
  // 1. input-q1의 입력값을 가져온다.
  let value = $('#input-q1').val();
  // 2. 만약 입력값이 빈칸이면 if(입력값=='')
  if (value == '') {
  // 3. alert('입력하세요!') 띄우기
    alert('입력하세요!');
  } else {
  // 4. alert(입력값) 띄우기
    alert(value);    
  }
}

2) 이메일 판별 함수 만들기

① 버튼을 눌렀을 때 입력받은 이메일로 alert창 띄우기

② 이메일이 아니라면(‘@’ 가 없으면) ‘이메일이 아닙니다’ alert창 띄우기

힌트

function q2() {
  // 1. input-q2 값을 가져온다.
  // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 구글링!)
  // 3. info.spartacoding@gmail.com -> gmail 만 추출해서 ( .split('@') 을 이용하자!)
  // 4. alert(도메인 값);으로 띄우기
  // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
}

나의 코드

function q2() {
  let inputValue2 = $('#input-q2').val();
  if (inputValue2.includes('@')) {
    let domain = inputValue2.split('@')[1];
    let onlyDomain = domain.split('.')[0];
    alert(onlyDomain);
  } else {
    alert('이메일이 아닙니다.');
  }
}

조건문의 조건에서 === true를 써줄 수도 있겠지만, if문에서는 () 안의 조건이 참(true)일 경우 {} 안의 코드가 실행되기 때문에, 조건 안의 변수가 참/거짓의 값을 가질 경우는 값 자체가 조건의 역할을 수행할 수 있다.

해설 코드

function q2() {
  // 1. input-q2 값을 가져온다.
  let email = $('#input-q2').val();
  // 2. 만약 가져온 값에 @가 있으면 (includes 이용하기 - 찾아보자!)
  if (email.includes('@')) {
    // 3. info.spartacoding@gmail.com -> gmail 만 추출해서
    // 4. alert(도메인 값);으로 띄우기
    let domainWithDot = email.split('@')[1];
    let onlyDomain = domainWithDot.split('.')[0];
    alert(onlyDomain);
  } else {
    // 5. 만약 이메일이 아니면 '이메일이 아닙니다.' 라는 얼럿 띄우기
    alert('이메일이 아닙니다.');
  }
}

3) HTML 붙이기/지우기 연습

① 이름을 입력하면 아래에 리스트로 나오게 하기

② 다 지우기 버튼 만들기

힌트

function q3() {
  // 1. input-q3 값을 가져온다. let txt = ... q1, q2에서 했던 걸 참고!
  // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${txt}</li>`) 요렇게!
  // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
}

function q3_remove() {
  // 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
}

나의 코드

function q3() {
  let txt = $('#input-q3').val();
  let temp_html = `<li>${txt}</li>`;
  $('#names-q3').append(temp_html);
}

function q3_remove() {
  $('#names-q3').empty();
}

temp_html을 사용할 때는 항상 back-tick을 사용해야 하며, 문자열 ‘txt’가 아닌 변수 txt의 값을 이용하고자 하므로 ${} 안에 변수 이름을 넣어 표현해야 한다.

해설 코드

function q3() {
  // 1. input-q3 값을 가져온다.
  let newName = $('#input-q3').val();
  if (newName == '') {
    alert('이름을 입력하세요');
    return;
  }
  // 2. 가져온 값을 이용해 names-q3에 붙일 태그를 만든다. (let temp_html = `<li>${가져온 값}</li>`)
  let temp_html = `<li>${newName}</li>`;
  // 3. 만들어둔 temp_html을 names-q3에 붙인다.(jQuery의 $('...').append(temp_html)을 이용하면 굿!)
  $('#names-q3').append(temp_html);
}

function q3_remove() {
  // 1. names-q3의 내부 태그를 모두 비운다.(jQuery의 $('....').empty()를 이용하면 굿!)
  $('#names-q3').empty();
}

해설 코드에서는 입력칸이 빈칸일 경우 ‘이름을 입력하세요’라는 alert창 기능이 추가되었다. 입력창이 빈칸일 경우를 고려하지 않고 코드를 짜면 input 박스 아래에 빈칸이 그대로 입력된다. 다양한 경우를 생각해볼 것!

Share on

Twitter Facebook LinkedIn