[코딩기록] 2-1. 자바스크립트, jQuery

샘샘이·2022년 10월 5일
0

스파르타코딩클럽

목록 보기
3/3

하는 내내.. 그래서 자바스크립트를 왜 하는건데..?
콘솔을 왜 보는건데..? 이건 진짜 바뀌는게 아니잖아!!... 왜 하지..?
하는 생각뿐이라 하기 싫었는데..😖

아.. 직접 해보니까 알겠다.. 편하잖아!?

모르겠으면 무조건 구글링하기
구글링 하는 습관 들이기!


jQuery

  • html의 요소들을 조작하는 편리한 자바스크립트를 미리 작성해둔 것
  • 쓰기 전에 미리 '임포트' 할 것
  • <head> 안에 임포트 해주기
  • 사용할때도 <head> 안에 넣어주기
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

  • 칸에 입력하는 것이기 때문에 <input> 만들어주기
  • <input-q1> 로 고쳐주고 스크립트를 <head> 안에 <script> </script>
<div class="question-box">
        <h2>1. 빈칸 체크 함수 만들기</h2>
        <h5>1-1. 버튼을 눌렀을 때 입력한 글자로 얼럿 띄우기</h5>
        <h5>[완성본]1-2. 버튼을 눌렀을 때 칸에 아무것도 없으면 "입력하세요!" 얼럿 띄우기</h5>
        <input id="input-q1" type="text" /> <button onclick="q1()">클릭</button>
    </div>
  • 크롬 ▶ 콘솔창에서 값 조회

값이 없을 경우 뜨지 않지만 빈칸 안에 값이 있을 경우 그 값으로 조회된다

$(`#input-q1').val()

값을 입력해서 조회하면 빈칸 안에 입력한 값이 채워진다

$('#input-q1').val('메롱')
  • q1을 onclick했을 때의 function
  1. input-q1의 값 조회 val
  2. 만약 txt가 빈칸이면 뜨는 alert
  3. 그렇지 않을 경우에 뜨는 alert
function q1() {
          let txt = $('#input-q1').val()
          if (txt == '') {
            alert('입력하세요!')
          } else {
            alert(txt)
          }

  • <input-q2> 로 고쳐주고 스크립트를 function q1 밑에 입력
 <div class="question-box">
        <h2>2. 이메일 판별 함수 만들기</h2>
        <h5>2-1. 버튼을 눌렀을 때 입력받은 이메일로 얼럿 띄우기</h5>
        <h5>2-2. 이메일이 아니면(@가 없으면) '이메일이 아닙니다'라는 얼럿 띄우기</h5>
        <h5>[완성본]2-3. 이메일 도메인만 얼럿 띄우기</h5>
        <input id="input-q2" type="text" /> <button onclick="q2()">클릭</button>
    </div>
  • 크롬 ▶ 콘솔창에서 값 조회

빈칸 안에 들어갈 예상 값을 myemail로 설정하기

let myemail = 'abc@naver.com'

도메인만 alert 띄우기 위해 발라내기
1. 결과값 : naver.com (@을 기준으로)

myemail.split('@')[1]

2. 결과값 : naver (@과 .을 기준으로)

myemail.split('@')[1].split('.')[0]
  • q2를 onclick했을 때의 function
  1. input-q2의 값 조회
  2. 같음을 나타내는 ==
    @를 포함한다 = ('@') == ture
  3. true일 경우, 콘솔에서 조회한 값 넣고 alert에 발라낸 도메인 값만 뜨게 하기
  4. 아닐 경우에 뜨는 alert
  function q2() {
          let txt = $('#input-q2').val()
          if (txt.includes('@') == true) {
            alert(txt.split('@')[1].split('.')[0])
          } else {
            alert('이메일이 아닙니다.')
          }

  • <input-q3> 로 고쳐주고 스크립트를 function q2 밑에 입력
    <div class="question-box">
          <h2>3. HTML 붙이기/지우기 연습</h2>
          <h5>3-1. 이름을 입력하면 아래 나오게 하기</h5>
          <h5>[완성본]3-2. 다지우기 버튼을 만들기</h5>
          <input id="input-q3" type="text" placeholder="여기에 이름을 입력" />
          <button onclick="q3()">이름 붙이기</button>
          <button onclick="q3_remove()">다지우기</button>
          <ul id="names-q3">
              <li>세종대왕</li>
              <li>임꺽정</li>
          </ul>
      </div>
  1. input-q3의 값 조회
  2. 데이터가 더 생겨야 하니까 이미 있는 데이터 양식 <li></li> 붙여주기
  3. names-q3에 붙여야 하니까 맞게 입력해주고 .append(temp_html)
  function q3() {
            let txt = $('#input-q3').val()
            let temp_html = `<li>${txt}</li>`
            $('#names-q3').append(temp_html)
        }
  1. 다지우기 버튼을 누르면 remove
  2. names-q3에 있는 데이터를 지워준다 .empty(빈칸)
  function q3_remove() {
            $('#names-q3').empty()
        }
profile
할 수 있으니까 하고 있지!

0개의 댓글