공부 노트

자바스크립트 변수(var)와 조건문(if) - 20세 성인 체크

** 폰트어썸 4.7 , 제이쿼리 연결

css 속성: flex input[type=text]

jquery 속성: var if val() alert()

input 값을 가져와서 변수에 저장하기 

input 값이 빈칸, 20미만, 20이상, 숫자가 아닌 다른모든 값인 경우를 체크한다.   

    <div class="container">
        <h1>JavaScript var, val(), if</h1>
        <div class="login">
            <h2>20세 이상 성인인증 체크 제이쿼리 if 조건문</h2>
            <input id="age" type="text" placeholder="나이를 숫자로 입력">
            <button>성인인증</button>
        </div>
    </div>

body {
    margin: 0;
    line-height: 1.5em;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.container {
    text-align: center;
    background-color: #fff;
}
.login {
    padding: 30px;
    border: 1px solid #000;
}
.login input[id=age],
.login button {
    padding: 10px;
    outline: none;
}
.login button {
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

// id값이 age인 요소의 value값 받기

$('#age').val() 

// 성인인증 체크
$('.login button').click(function() {
    // 요소의 value값을 받아옴
    var num = $('#age').val();
    if(num == '') {
        alert('나이를 입력하세요.');
    } 
    else if(num < 20) {
        alert('미성년자입니다.');
    }    
    else if(20 <= num) {
        alert('성인입니다.');
    }
    else {
        // 빈칸은 아니고 입력은 했으나 입력이 잘못된경우
        alert('입력내용을 숫자로 넣으세요.');
    }
});

- 예제2 별점 주기

별점의 클릭한 별을 기준으로 (.fa) 그 이전 별은 보이게 

그 이후 별은 안보이게 active클래스 add , remove

순서 찾는 메서드 index

텍스트 내용 뿌려주는거 text, 태그도 같이 사용하고 싶으면 html

    <div class="star-rating">
        <div class="stars">
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
            <i class="fa fa-star"></i>
        </div>
        <div class="text">
            별점 주실거죠? ㅎ
        </div>
    </div>

.star-rating {
    width: 260px;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    background-color: rgba(0, 0, 0, 0.829);
}
.star-rating div {
    float: left;
    width: 50%;
}
.stars {
}
.stars .fa {
    font-size: 18px;
    cursor: pointer;
}
.stars .fa.active {
    color: yellow;
    text-shadow: 0 0 5px yellow;
}
.print {
    color: #fff;
}
.print img {
   /* 인라인끼리 중앙맞추기 */
    vertical-align: middle;
    margin-right: 5px;
}

$('.stars .fa').click(function() {
    $(this).addClass('active');

    // 클릭한 별을 기준으로 (.fa) 그 이전 별은 보이게 그 뒤에 별들은 안보이게
    $(this).prevAll().addClass('active');
    $(this).nextAll().removeClass('active');

    // 순서를 찾는 메서드 index 0 1 2 3 4
    // 텍스트내용을 출력 text, 태그+텍스트 html
    var num = $(this).index();
    $('.print').text(starRate);
    var starRate = num + 1
    if(starRate == 1) {
        // $('.print').text('별로에요');
        $('.print').html('<img src="img/icon/star-lv1.png">' + '별로에요');
    } else if(starRate == 2) {
        $('.print').html('<img src="img/icon/star-lv2.png">' + '보통 이에요');
    } else if(starRate == 3) {
        $('.print').html('<img src="img/icon/star-lv3.png">' + '그냥 그래요');
    } else if(starRate == 4) {
        $('.print').html('<img src="img/icon/star-lv4.png">' + '맘에 들어요');
    } else {
        $('.print').html('<img src="img/icon/star-lv4.png">' + '아주 좋아요');
    }
});

- 클래스 제어 메서드

    addClass() 클래스 넣기

    removeClass() 클래스 빼기

    toggleClass() 클래스 넣고빼기 토글

클래스 넣기 빼기 토글버튼과 박스를 만든다. 

박스에 active라는 클래스가 들어오면 백그라운드컬러가 변경

        .active {
            background-color: firebrick;
        }

    <div class="container">
        <a href="#none" class="add-btn">add</a>
        <a href="#none" class="remove-btn">remove</a>
        <a href="#none" class="toggle-btn">toggle</a>
        <div class="box">Box</div>
    </div>

클래스 제어 메서드 addClass removeClass toggleClass 에는

() 안에 .과 함께 클래스명을 쓰면 안된다.

addClass('active') html문서안에 active라고 적히는거라서 

ex) .클래스명을 사용하면 안된다.

$('.box').addClass('.active') -> <div class="box .active"></div> 

$('.add-btn').click(function() {
    $('.box').addClass('active');
});
$('.remove-btn').click(function() {
    $('.box').removeClass('active');
});
$('.toggle-btn').click(function() {
    $('.box').toggleClass('active');
});

- 요소 탐색 메서드 (children, siblings)

children() : 선택요소 바로 아래 단계인 자식요소 선택

siblings() : 선택요소의 형제요소 선택 (같은계층)

    <h2>요소탐색</h2>
    <ul class="menu">
        <li>
            <a href="#none">MENU-1</a>
            <div class="sub-menu">
                <a href="#none">SUB-MENU-1</a>
                <a href="#none">SUB-MENU-2</a>
                <a href="#none">SUB-MENU-3</a>
                <a href="#none">SUB-MENU-4</a>
            </div>
        </li>
        <li>
            <a href="#none">MENU-2</a>
            <div class="sub-menu">
                <a href="#none">SUB-MENU-1</a>
                <a href="#none">SUB-MENU-2</a>
                <a href="#none">SUB-MENU-3</a>
                <a href="#none">SUB-MENU-4</a>
            </div>
        </li>
    </ul>

/* menu */
.menu {
    padding: 0;
    list-style: none;
    width: 200px;
    text-align: center;
    /* border: 1px solid red; */
}
/* 메뉴 밑에 li 바로 아래있는 a만 선택 */
.menu li > a {
    display: block;
    padding: 5px;
    text-align: center;
    background-color: #000;
    color: #fff;
    border: 1px solid #ddd;
}
.sub-menu {
    display: none;
    border: 1px solid #000;
}
.sub-menu a {
    display: block;
    padding: 5px;
}

.mouseenter() 마우스가 올라갈 때

.mouseleave() 마우스가 떠날 때

.slideDown() 위에서아래로 내려오면서 show

$(this) == 자기자신 

// this == .menu li
// .menu li 밑에있는 서브메뉴.슬라이드다운
$('.menu li').mouseenter(function() {
    // stop() 메서드 : 마우스가 올라갔다가 또 한번 올라가면 그 전 애니메이션 삭제 
    // $(this).children('.sub-menu').slideDown();
    $(this).children('.sub-menu').stop().slideDown();
});
$('.menu li').mouseleave(function() {
    $(this).children('.sub-menu').stop().slideUp();
});

- .siblings() 이용 : 탭메뉴 만들기

    <h2>요소탐색2- siblings</h2>
    <div class="btn">
        <span class="active">공지사항</span>
        <span>갤러리</span>
    </div>

span클릭 -> active클래스 add (백그라운드컬러 화이트로 변경)

.btn {
    width: 300px;
    /* border: 1px solid red; */
}
.btn span {
    display: inline-block;
    width: 100px;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    background-color: #ccc;
    cursor: pointer;
}
.btn span.active {
    background-color: #fff;
    border: 1px solid #000;
}

$('.btn span').click(function() {
	// $(this) == .btn span
    // this(span)를 클릭하면 active 클래스 추가
    $(this).addClass('active');
    
    // this(span)를 클릭 -> 자기자신(span) 의 형제요소(siblings)의 active 클래스를 삭제 
    $(this).siblings().removeClass('active');
});

- 메서드(이펙트) :

.show() .hide() : 보이기, 감추기

.toggle() : 보이기 / 감추기

.slideDown() .slideUp() : 서서히 보이기(위에서 밑으로),  감추기

.slideToggle() 

*toggle은 하나가 두가지 기능!'

- show hide toggle 메서드

    <div class="container">
        <h2>show hide toggle</h2>
        <a href="#none" class="show-btn">show</a>
        <a href="#none" class="hide-btn">hide</a>
        <a href="#none" class="toggle-btn">toggle</a>
        <div class="box">Box</div>
    </div>

.container {
	width: 300px;
}
a {
	display: inline-block;
    padding: 5px;
    color: #000;
    background-color: #ddd;
    width: 70px;
    text-align: center;
    border-radius: 5px;
}
.box {
	margin-top: 10px;
    width: 240px;
    height: 200px;
    line-height: 200px;
    text-align: center;
    background-color: dodgerblue;
    color: #fff;
    display: none;
}
.btn {
	width: 210px;
}

// show hide toggle 1
$('.show-btn').click(function() {
    $('.box').show();
});
$('.hide-btn').click(function() {
    $('.box').hide();
});
$('.toggle-btn').click(function() {
    $('.box').toggle();
});

- slideDown slideUp slideToggle 메서드

슬라이드 다운 : 서서히 위에서 밑으로 내려옴

// show hide toggle 2
$('.show-btn').click(function() {
    $('.box').slideDown();
});
$('.hide-btn').click(function() {
    $('.box').slideUp();
});
$('.toggle-btn').click(function() {
    $('.box').slideToggle();
});

- fadeIn fadeOut fadeToggle 메서드

fadeIn(지속시간)   : 페이드로 나타나게 하는 효과

fadeOut(지속시간) : 페이드로 사라지게 하는 효과

fadeIn('fast') 

fadeIn('slow')

fadeIn(500) // 0.5s

fadeIn(2000) // 2s

// show hide toggle 3
$('.show-btn').click(function() {
    $('.box').fadeIn();
});
$('.hide-btn').click(function() {
    $('.box').fadeOut();
});
$('.toggle-btn').click(function() {
    $('.box').fadeToggle();
});

- click 함수

a태그 보이기 클릭 ->  p display: block 

a태그 감추기 클릭 -> p display: none

    <div>
        <h2>p 태그 감추기</h2>
        <a href="#none" class="show-btn">보이기</a>
        <a href="#none" class="hide-btn">감추기</a>
        <p>
            태그선택자 a를 클릭했습니다.
        </p>
    </div>

// custom.js

// css()는 사용하기보다는 css파일에 직접 작성하는 것이 좋다. 예시로 작성
$('p').css({'display':'none'});

// 클래스이름이 .show-btn을 클릭 
$('.show-btn').click(function() {
    $('p').css({'display':'block'});
});
$('.hide-btn').click(function() {
    $('p').css({'display':'none'});
});

- show() hide() 메서드

<head>
    <style>
        a {
            display: inline-block;
            padding: 5px;
            color: #000;
            background-color: #ddd;
            width: 100px;
            text-align: center;
        }
        .box {
            margin-top: 10px;
            width: 220px;
            height: 200px;
            line-height: 200px;
            text-align: center;
            background-color: dodgerblue;
            color: #fff;
            display: none;
        }
    </style>
</head>
<body>
    <div>
        <h2>show hide</h2>
        <a href="#none" class="show">보이기</a>
        <a href="#none" class="hide">감추기</a>
        <div class="box">box</div>
    </div>
    
    <!-- js -->
    <script src="script/jquery-1.12.4.js"></script>
    <script src="script/custom.js"></script>
</body>
</html>

// custom.js
// show() hide() 메서드 사용
$('.show').click(function() {
    $('.box').show();
});
$('.hide').click(function() {
    $('.box').hide();
})

- mouseenter, mouseleave 함수

mouseenter 마우스를 올렸을 때

mouseleave 마우스가 떠날 때

나머지 css는 위랑 같음

width 값만 210px로 변경 

팝업(모달창)은 click함수, 네비게이션은 mouseenter함수를 보통 사용한다.

    <div>
        <h2>mouseenter</h2>
        <a href="#none" class="btn">show/hide</a>
        <div class="box">Box</div>
    </div>

$('.btn').mouseenter(function() {
    $('.box').show();
});
$('.btn').mouseleave(function() {
    $('.box').hide();
});

- 필수 함수 : click mouseenter mouseleave

- 메서드(이펙트) :

.show() .hide()

.slideDown() .slideUp()

.fadeIn() .fadeout()

.stop()

- 메서드(클래스 제어) :

.addClass() .removeClass() .toggleClass()

- 메서드(요소 탐색) :

.children() .siblings()

.parent()

.find() .next() .prev()

- 제이쿼리 : 자바스크립트 라이브러리

http://jquery.com/

다운로드 시 production 버전이 소스압축된 경량화/최소화 버전 이다

다운로드 받고 스크립트 폴더 안에 넣기 

- 폴더구조 (예시) 

- 링크 

제이쿼리 오픈소스 파일이 먼저 링크되어야한다.

1. body 태그 맨뒤 

body맨 끝이라서 당연히 html문서를 다 받아왔다고 생각함 

$('.open-modal').click()
계층구조가 하나 줄어든다.

<body>

    <script src="script/제이쿼리오픈소스.js"></script>
    <script src="script/custom.js"></script>
</body>

2. head 사이

head사이에 js파일을 링크했다면 $(function() {} 이 필요하다.
$(function() {

    $('.open-modal').click()
    여기서 펑션이란 
    Document ready , html문서를 다 받아왔으면 그때 이 구문을 실행해라 라는 뜻이다. 
})

<head>
    <title>Document</title>
    
    <script src="script/제이쿼리오픈소스.js"></script>
    <script src="script/custom.js"></script>
</head>

- 제이쿼리 기본구문

$('css 선택자').함수(function() {
    실행구문;
});

// css()메서드는 사용하기보다는 css파일에 직접 작성하는 것이 좋다. 
// 페이지 상의 모든 <p> 선택
$('p')

// 클래스 선택자 : 클래스명이 btn인 요소를 선택 
$('.btn')

// 아이디 선택자 : id가 test인 요소를 선택 
$('#test')