스파르타코딩 웹개발 2주차

카테고리 없음

스파르타코딩 웹개발 2주차

Hanachoi 2022. 4. 17. 01:55

#Java script 복습

1주차에 만든 나홀로 메모장에 [포스팅박스 열기]라는 alert를 만들어 놨었음.(누르면 안녕!이라고 뜸)

<a onclick="hey()" class="btn btn-primary btn-lg" href="#" role="button">포스팅박스 열기</a>

hey()라는 함수를 넣어놌는데 누르면 '안녕!'이라고 뜨게 되어 있음

<script>
        function hey(){
            alert('안녕!')
        }
    </script>

여기서 한 번 누르면 첫번째에 '홀수' 두번째에는 ' 짝수'라고 alert을 뜨게 만드려면?
count는 function 밖에서 선언을 해줘야 함. 만약 function안에 있다면 이 함수가 실행되고 끝나는 순간 이 count = 1은 사라지는것! 그러면서 계속 새로운 count가 생기고 계속 1일수 밖에 없게 됨. 그래서 function밖에서 count를 잡아줘야 숫자가 축적되어서 실행된다. 함수 밖에서 변수선언하기!

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

#JQuery 시작하기

JQuery란 : Html의 요소들을 조작하는 편리한 javascript를 미리 작성해둔것. 라이브러리. 시작 할 때 import해서 쓰면 짧고 간단하게 쓸 수 있음 = 미리 작성된 자바스크립트 코드(그래서 import 해야됨)
https://www.w3schools.com/jquery/jquery_get_started.asp

jQuery Get Started

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

Google CDN 코드 복사해서 html 파일<head></head>안에 넣어두면 됨
하지만 우리는 이미 bootstrap을 사용하면서 위에 코드에 동일한 코드가 들어가있는걸 알 수 있음. 두 번씩 import할 필요는 없으니까 지우지만 부트스트랩을 안쓰면 따로 import해야된다는것 기억하기

#id 값

우리가 CSS에서 색을 바꾸거나 모양을 바꿀때는 지정을 할 수 있어야 했음. 우리가 무언가 명령을 내리고 싶을때는 다 지칭할 수 있어야 된다. 이제는 id라는 값을 쓰게 됨
posting box에서 <input> 부분에 id 값을 줄 거임. id="exampleInputEmail1"부분을 우리는 "article-url"로 바꾸자. 그럼 위에 lable에 있는 것에서 빨간불이 뜨지만, 필요없으므로 그냥 위에도 지워주면 된다.

 <div class="posting-box">
            <div class="form-group">
            <label for="exampleInputEmail1">아티클 URL</label>
            <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="">
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">간단코멘트</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">기사저장</button>
        </div>

지금 보이는 화면에서 아티클 URL밑 칸에 세종대왕을 쓴 뒤, [오른쪽클릭>검사>console]로 들어가서 밑에 있는 코드를 치면 '세종대왕'이 결과로 나옴. 여기에 [.val()]안에 '장영실'이라고 치면 장영실이라고 화면에서 바뀌게 됨

$('#article-url').val();

$('#')안에 id 값을 안에 써서 지칭할 수 있다. .val()은 그 지칭대상을 어떻게 하겠다는 걸로 이해하면 됨.

#div 숨기기/보이기

<div class="posting-box" id="post-box">
            <div class="form-group">
            <label>아티클 URL</label>
            <input type="email" class="form-control" id="article-url" aria-describedby="emailHelp" placeholder="">
            </div>
            <div class="form-group">
                <label for="exampleFormControlTextarea1">간단코멘트</label>
                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">기사저장</button>
        </div>

posting-box class에는 id 값이 없어서 "post-box"라고 칭해줌.
밑 코드처럼 써주면 박스를 숨기거나 보여줄 수 있음.

$('#post-box').hide()

$('#post-box').show()

밑 코드로 크기를 조절할 수 도 있음.

$('#post-box').css('width','700px')

display none(숨기기)/block(보이기) : 클릭했을때 블럭이 있으면 안보이게, 없으면 보이게 하는식으로 만들 수 있음 if 구문을 사용해서

$('#post-box').css('display')

#태그 내 텍스트 입력하기

posting-box안에 있는 버튼에 id값 btn-posting-box를 주고 아래 코드 입력하며 내용 바뀜

$('#btn-posting-box').text('랄라')

#태그 내 html입력하기

html을 동적으로 입힐 수도 있음
card-colums에 입힐거니까 거기에 id값을 주자. id="cards-box"를 붙여주고

let temp_html = `<button>나는 버튼이다</button>`
// 백틱``을 넣어 줘야함 ~을 쉬프트 안누르면 나오는 버튼 
$('#cards-box').append(temp_html)

이렇게 넣어주면 버튼을 붙일 수 도 있음
똑같이 카드를 그대로 입히고 싶다면,

let temp_html = `<div class="card">
                <img class="card-img-top"
                     src="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
                     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>`

title을 바꾸고 싶을때 아래처럼 바꿀 수도 있음

let title='아무거나제목!'
let temp_html = `<div class="card">
                <img class="card-img-top"
                     src="https://images.unsplash.com/photo-1552832230-c0197dd311b5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8cm9tZXxlbnwwfHwwfHw%3D&w=1000&q=80"
                     alt="Card image cap">
                <div class="card-body">
                    <a href="http://naver.com/" class="card-title">${title}</a>
                    <p class="card-text">기사의 요약 내용이 들어갑니다. 동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라만세 무궁화 삼천리 화려강산...</p>
                    <p class="card-text comment">여기에 코멘트가 들어갑니다.</p>

                </div>`

#포스팅박스 열고 닫기 기능 구현하기

포스팅박스 버튼을 누르면 열리고 닫히는 기능 구현하기. <포스팅박스>버튼 에 달려있던 onclick 부분을 "oepnclose()"로 바꿔주자. 그리고 script부분에 아래 코드 적어주기.

 <script>
       function openclose(){
           let status = $('#post-box').css('display');
           if(status=='block'){
               $('#post-box').hide();
           }else{
               $('#post-box').show();
           }
       }
    </script>

열고 닫히는 과정에서 [포스팅박스 열기] / [포스팅박스 닫기]로 버튼이 바뀌게 하고 싶다면, 버튼에 달려있는 id값을 불러서 코드 써주기

<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>

처음 페이지에 접속할 때 부터 포스팅박스가 접혀져 있길 바란다면, css 에서 바꿔줄 수 있음.

.posting-box{
            width : 500px;
            margin : 0px auto 30px auto;
            border: 3px solid black;
            border-radius: 10px;
            padding: 30px;

            display: none;
            // 위 코드를 작성해주면 처음부터 포스팅박스가 닫혀져 있음