22.01.22 JQuery적용하기 <나만의 메모장>, JQuery Quiz

<나만의 메모장>

중간중간 alert나 console.log 로 잘 되고 있는지 확인하는 습관

    <script>
	function openclose() {
		alert('good!')
}
    </script>
----------------------------------------------------
<script>
	function openclose() {
		let status = $('#post-box').css('display');
		console.log(status);
}
    </script>

적용해보기

<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 

crossorigin="anonymous">

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
        integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
        crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
        integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
        crossorigin="anonymous"></script>

    <title>스파르타코딩클럽 | 부트스트랩 연습하기</title>

    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200&display=swap" rel="stylesheet">

    <style>
        * {
            font-family: 'Noto Serif KR', serif;
        }
        .wrap{
            width: 900px;
            margin: auto;

        }

        .comment {
            color: blue;
            font-weight: bold;
        }
        .posting-box {
            border: 2px solid;
            border-radius: 5px;

            width: 500px;
            margin: 0px auto 30px auto;

            padding: 30px;

            font-weight: bold;
	        display: none;                                    <-new! 페이지 열었을 때 기본 상태 닫겨있게

        }

    </style>

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

</head>

<body>
    <div class="wrap">
              <div class="jumbotron">
          <h1 class="display-4">나홀로 링크 메모장!</h1>
          <p class="lead">중요한 링크를 저장해두고, 나중에 볼 수 있는 공간입니다</p>
          <hr class="my-4">
          <p class="lead">
            <a onclick="openclose()" id="btn-posting-box" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 

열기</a>
          </p>
        </div>

            <div class="posting-box" id="post-box">
              <div class="form-group">
                <label for="">아티클 URL</label>
                <input type="email" class="form-control" id="article-url" aria-describedby="emailHelp" >

              </div>
              <div class="form-group">
                <label for="exampleFormControlTextarea1">간단 코멘트</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
              </div>
              <div>
                  <button type="submit" class="btn btn-primary">Submit</button>
              </div>

</div>

        <p> <div class="card-columns" id="cards-box">
                 <div class="card">
                <img class="card-img-top" src="https://images.chosun.com/resizer/k6L-J7LOYHpzi7J0o6f-

LAfbtVw=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/RWXHN2ZUBBXGLLFHBULDVSWBAA.jpg" 

alt="Card image cap">
                <div class="card-body">
                  <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠 </a>
                  <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리

나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
              </div>
                   <div class="card">
                <img class="card-img-top" src="https://images.chosun.com/resizer/k6L-J7LOYHpzi7J0o6f-

LAfbtVw=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/RWXHN2ZUBBXGLLFHBULDVSWBAA.jpg" 

alt="Card image cap">
                <div class="card-body">
                  <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠 </a>
                  <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리

나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
              </div>
                   <div class="card">
                <img class="card-img-top" src="https://images.chosun.com/resizer/k6L-J7LOYHpzi7J0o6f-

LAfbtVw=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/RWXHN2ZUBBXGLLFHBULDVSWBAA.jpg" 

alt="Card image cap">
                <div class="card-body">
                  <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠 </a>
                  <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리

나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
              </div>
                   <div class="card">
                <img class="card-img-top" src="https://images.chosun.com/resizer/k6L-J7LOYHpzi7J0o6f-

LAfbtVw=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/RWXHN2ZUBBXGLLFHBULDVSWBAA.jpg" 

alt="Card image cap">
                <div class="card-body">
                  <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠 </a>
                  <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리

나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
              </div>
                   <div class="card">
                <img class="card-img-top" src="https://images.chosun.com/resizer/k6L-J7LOYHpzi7J0o6f-

LAfbtVw=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/RWXHN2ZUBBXGLLFHBULDVSWBAA.jpg" 

alt="Card image cap">
                <div class="card-body">
                  <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠 </a>
                  <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리

나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
              </div>
                   <div class="card">
                <img class="card-img-top" src="https://images.chosun.com/resizer/k6L-J7LOYHpzi7J0o6f-

LAfbtVw=/464x0/smart/cloudfront-ap-northeast-1.images.arcpublishing.com/chosun/RWXHN2ZUBBXGLLFHBULDVSWBAA.jpg" 

alt="Card image cap">
                <div class="card-body">
                  <a href="http://naver.com/" class="card-title">여기 기사 제목이 들어가죠 </a>
                  <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리

나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>
                </div>
              </div></p>


            </div>
    </div>

</body>

</html>

문자열 넣을 땐 ' '를 적어줘야하는데 계속 까먹어서 오류 떴다.

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>jQuery 연습하고 가기!</title>

    <!-- JQuery를 import 합니다 -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

    <style type="text/css">
        div.question-box {
            margin: 10px 0 20px 0;
        }
    </style>

    <script>
        function q1() {
            let txt = $('#input-q1').val();
            console.log(txt)                         //내가 한게 맞는지 수시로 console.log 로 확인하는 습관!
                                                     //한번에 다 짜놓고 돌렸는데 오류 났을 때 어느 부분인지 찾기 힘드니까 그때그때!
            if (txt == '') {
                alert('입력하세요!');
            } else {
                alert(txt);
            }
            // 1. input-q1의 입력값을 가져온다. $('# .... ').val() 이렇게!
            // 2. 만약 입력값이 빈칸이면 if(입력값=='')
            // 3. alert('입력하세요!') 띄우기
            // 4. alert(입력값) 띄우기
        }

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

        function q3() {
            let name = $('#input-q3').val();
            let temp_html = `<li>${name}</li>`;
            $('#names-q3').append(temp_html);
            // 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()를 이용하면 굿!)
            $('#names-q3').empty();
        }

    </script>

</head>

<body>
    <h1>jQuery + Javascript의 조합을 연습하자!</h1>

    <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>
    <hr />
    <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>
    <hr />
    <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>
</body>

</html>

진짜 바본가? ''써야 할 땐 안 쓰고 안 써야 할 땐 쓰고 ㅠㅠㅠ...

세번 했는데 계속 버벅 거리네

내일 다시 해봐야지

'스파르타 > 웹개발' 카테고리의 다른 글

22.01.26 2주차 과제 <원페이지 쇼핑몰에 환율 계산기 달기> (0)	2022.01.27
22.01.24 Java Script & Ajax Quiz (0)	2022.01.25
22.01.21 Javascript 복습, JQuery 다뤄보기 (0)	2022.01.21
1주차 개발일지 (0)	2022.01.21
22.01.20 1주차 과제 <나만의 쇼핑몰 페이지 만들기> (0)	2022.01.21

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Dandi_coding

22.01.22 JQuery적용하기 <나만의 메모장>, JQuery Quiz

'스파르타 > 웹개발' 카테고리의 다른 글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

22.01.22 JQuery적용하기 <나만의 메모장>, JQuery Quiz

'스파르타 > 웹개발' 카테고리의 다른 글

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역