[개발일지] JavaScript & JQuery 기초 수업 Level 2-1

<코딩애플 온라인강의 수강일지>

Level 2-1 JavaScript

 

1. setTimeout() / setInterval()

 - 콜백함수, ms 순으로 쓴다

//setTimeout() - 5초 후에 실행

setTimeout(function(){
	$('.alert').hide()
    },5000)
    



//함수를 만들어 두고 콜백으로 실행

setTimeout(function () { func() }, 5000)

function func() {
            $('.alert').hide()
}



//setIneterval() - 1초마다 실행

setInterval(function () { console.log('hi') }, 1000)

 

 

2. 문자 검사 기능: includes() / 정규식

//includes()

'abc'.includes('ab') // true


//정규식

/a/.test('abcde') // true


//정규식 활용법

/[a-z]/.test('abcde') // a부터 z중 아무 글자 1개 포함 여부
/[a-zA=z]/.test('abcde') // 모든 알파벳 중 하나 포함 여부

/[ㄱ-ㅎ가-핳]/.test('ㅋㅋㅋ') // 자음과 모든 한글 포함 여부

/[0-9]/.test('1kda') // 아무 숫자 포함 여부

/\S/.test('ㅋㅋㅋㅋ') // 아무 문자, 특수문자 포함

/^a/.test('adsdf') // a로 시작 여부
/a$/.test('adsdfa') // a로 종결 여부

/a|b/.test('bbb') // or
/a&b/.test('adsbfa') // and

/\S+@\S+\.\S/.test('aaa@bbb.cc') // 이메일 형식 갖는지 여부

//정규식을 이용하여 ID/PW 형식 검사하기

		$('#submit').on('click', function (e) {
            let email = $('#id').val()
            let pw = $('#pw').val()
            if (email == '') {
                alert('please insert ID')
                e.preventDefault();
            } else if (/\S+@\S+\.\S/.test(email) == false) {
                alert('wrong email')
                e.preventDefault();
            } else if (pw == '') {
                alert('please insert PW')
                e.preventDefault();
            } else if (/[A-Z]/.test(pw) == false) {
                alert('no cap')
                e.preventDefault();
            } else { }
        })

 

 

3. 캐러셀 만들기

    <div style="overflow: hidden;">
        <div class="slide-container">
            <div class="slide-box">
                <img src="https://codingapple.com/wp-content/uploads/2022/02/car1.png" alt="" srcset="">
            </div>
            <div class="slide-box">
                <img src="https://codingapple.com/wp-content/uploads/2022/02/car2.png" alt="" srcset="">
            </div>
            <div class="slide-box">
                <img src="https://codingapple.com/wp-content/uploads/2022/02/car3.png" alt="" srcset="">
            </div>
        </div>
    </div>

    <button class="slide">1</button>
    <button class="slide">2</button>
    <button class="slide">3</button>
    <button class="prev">prev</button>
    <button class="next">next</button>

        function slideImage(a) {
            $('.slide-container').css('transform', 'translateX(' + a * -100 + 'vw)')
        }

        let imgNow = 0

        for (let b = 0; b < $('.slide').length; b++) {
            $('.slide').eq(b).on('click', () => {
                slideImage(b)
                imgNow = b
                console.log(imgNow)
            })
        }

        $('.next').on('click', () => {
            if (imgNow == 2) {
                imgNow = 0
            } else {
                imgNow = imgNow + 1
            }
            $('.slide-container').css('transform', 'translateX(' + -100 * (imgNow) + 'vw)')
            console.log(imgNow)
        })

        $('.prev').on('click', () => {
            if (imgNow == 0) {
                imgNow = 2
            } else {
                imgNow = imgNow - 1
            }
            $('.slide-container').css('transform', 'translateX(' + -100 * (imgNow) + 'vw)')
            console.log(imgNow)
        })

 

 

4. return 문법

 - return 문법은 함수 종료도 포함

        function vat(a) {
            var num = (a * 1.1).toFixed(2) // toFixed(소수점 자르기)
            return parseFloat(num) // parseFloat() 문자 --> 숫자로 변환
            return parseInt(num) // parseInt() 문자 --> 정수로 변환
        }