2-2
자바스크립트 문법 vs 브라우저 문법
자바스크립트 문법 : var let const if function
브라우저 문법 : document.querySelector() alert() setTimeout() addEventListener()
두개는 다른거다. 브라우저 문법을 다룰줄알아야 UI 적으로 좋은 웹을 만들 수 있다.
setTimeout, setInterval
일정시간 후에 콜백함수의 내용을 실행하는 setTimeout과
일정시간마다 콜백함수의 내용을 실행하는 setInterval이다.
setTimeout(function() {
}, 1000);
setInterval(function() {
}, 1000);위처럼 사용하면 된다. 파라미터로 두가지를 받는데, 첫번째는 콜백함수, 두번째는 msec이다.
콜백함수를 사용할 때 함수를 미리 만들어 인자로 넘겨줘도 문제없다.
let secondTime = 5;
function timeCheck() {
secondTime--;
if(secondTime == 0) {
$('#fiveSecondBox').hide();
} else {
$('#fiveSecondBox').html(secondTime + '초 이내 구매시 사은품 증정 !');
}
}
setInterval(timeCheck, 1000);위처럼 말이다. 이때 주의할점은 콜백함수를 미리 만들어 넘길땐 ()없이 함수 이름으로만 파라미터를 작성하면된다.
2-3
정규표현식이 뭐냐?
문자를 검사할때 사용.
/[a-d]/.test('aefg') //true
/[가-다]/.test('다라마바') //true위 코드는 문자중에 a~d까지중 하나라도 있냐?
'다라마바'중에 가~다에 포함되는 문자가 있냐? 이런식으로 검사를 진행한다.
else if (!(/\S+@\S+\.\S+/.test(inputId))) {
alert('아이디를 이메일 형식으로 작성해주세요!');
}
else if (!(/[A-Z]/.test(inputPw))) {
alert('비번에 대문자를 포함시켜야 합니다!');
}이런식으로 회원가입을 할때, 이메일 형식을 지켰는지, 비번에 대문자를 포함했는지를 체크할 수 있다. *\S와 \S+의 차이는 S는 아무문자 '하나'만을 체크하므로 aaa와 같이 여러개의 문자엔 false를 뱉는다. 따라서 S+를 해줘야 아무문자들을 검사해도 true를 받을 수 있다.
2-4
캐러셀(이미지 슬라이드) 만들기
UI 애니메이션을 만드는 법칙
1. 애니메이션 시작 전 화면 만들기
2. 애니메이션 종류 후 화면 만들기
3. 언제 종료화면으로 변할지 JS짜기
4. transition 추가하기
<div style="overflow: hidden;">
<div class="slide-container">
<div class="slide-box">
<img src="drunken.jpg">
</div>
<div class="slide-box">
<img src="hand.jpg">
</div>
<div class="slide-box">
<img src="mirror.jpg">
</div>
<div class="slide-box">
<img src="coke.jpg">
</div>
</div>
</div>
<button class="slide-prev">이전</button>
<button class="slide-next">다음</button>.slide-container {
width: 400vw;
transition: all 1s;
}
.slide-box {
width: 100vw;
float: left;
}
.slide-box img {
width: 17%;
}- vw는 브라우저 폭에 비례한 단위(100%가 default)
- trainsition: all 1s; 를 주면 슈류륙 넘어가는 애니메이션
let index = 1;
function next(index) {
if (index == $('img').length) {
index = 1;
} else {
index += 1;
}
trsX = index - 1;
$('.slide-container').css('transform', 'translateX(-' + trsX + '00vw)');
return index;
}
function previous(index) {
if (index == 1) {
index = $('img').length;
} else {
index -= 1;
}
trsX = index - 1;
$('.slide-container').css('transform', 'translateX(-' + trsX + '00vw)');
return index;
}
$('.slide-next').on('click', function () {
index = next(index);
});
$('.slide-prev').on('click', function () {
index = previous(index);
})위와같이 index로 현재위치를 파악하고, css값을 변경해가며 이동
2-5
함수 return문 왜 쓰는데
변환기 역할을 해주기때문에, 변환기를 만들때 쓰인다.
어떠한 과정을 거쳐 특정 결과값을 퉤 뱉어주니까 그 값을 활용가능
소수점은 오차가 있는데 아주 작은 무시해도될 오차다,
toFixed()같은 메소드를 통해 반올림 해줄 수 있다.
2-6 ~ 2.7
scroll event
강의에서는 .on('scroll', function () {})로 하던데
나는 .scroll(function () {}) 이 더 편해서 이걸 사용했다.
$('.neithers').scroll(function () {
let scrollPosition = $('.neithers').scrollTop();
let scrollOverall = $('.neithers').prop('scrollHeight');
let divHeight = $('.neithers').innerHeight();
if (scrollOverall == (scrollPosition + divHeight).toFixed()) {
alert('끝까지 읽으신걸 축하드립니다 !');
}
})
$(window).scroll(function () {
if (window.scrollY > 200) {
$('.navbar-brand').css('font-size', '20px');
} else {
$('.navbar-brand').css('font-size', '30px');
}
});scroll에 대한 다양한 이벤트를 만들어보았다.
혼자 만든거
별거 아니지만 맨위로 가는 버튼을 만들었다.
$('#moveTotheTop').on('click', function () {
window.scrollTo(0, 0);
})window.scrollTo를 이용해 버튼을 클릭하면 상단으로 강제이동한다.
해당 브라우저의 전체 스크롤을 다룰땐 window로 다루면 된다.
2-8 ~ 2-9
좋은 관습 : 셀렉터 변수에 넣어서 쓰기.
셀렉터를 많이쓰면 시간성능이 좋지 않기 때문에
자주 쓰는 셀렉터는 따로 변수로 할당 해 사용하도록 하는 습관이 들이자.
let tabBtn = $('.tab-button')
let tabContent = $('.tab-content');
for (let i = 0; i < tabBtn.length; i++) {
tabBtn.eq(i).on('click', function () {
tabBtn.attr('class', 'tab-button');
tabBtn.eq(i).attr('class', 'tab-button orange');
tabContent.attr('class', 'tab-content');
tabContent.eq(i).attr('class', 'tab-content show');
});
}요로코롬
for문 왜 쓰냐?
코드 복사붙여넣기를 해주니까.
똑같은 코드를 반복할 때 사용
위 코드에서와 같이 let을 사용해야 for문 안으로 사용범위가 설정된다
var로 i를 선언하면 i는 for문 밖에서도 작동을 할 것이다.
2-10 ~ 2-11
이벤트버블링이 뭐냐 ?
어떤 HTML 태그에 이벤트가 발생되면 그 태그의 상위태그까지 이벤트가 일어났다고 인지하는 현상.
쉽게 말해 종이를 3장 정도 겹쳐놓고있는데, 제일 위에 종이에 압력을 가하면 그 뒤에 2장에도 압력이 가해지는 것과 같은 느낌.
이제 이 모달창 이외에 화면을 클릭하면 모달창을 닫게 해주고싶은데
<div class="black-bg">
<div id='modal' class="modal" tabindex="-1">
<div class="modal-dialog">
</div>
</div>
</div>위 html 태그에서 modal-dialog에 이벤트를 줘도 상위태그인 black-bg까지도 이벤트가 일어난다는 것이다.
if ($('.modal-content').on('click', function () { }));
else {
$('#modal').modal('hide');
}그럴 땐 이런식으로 코딩해줘도 되지만 이럴 때 콜백함수 파라미터로 e를 넘겨 사용할 수 있는 몇가지 유용한 메소드가 있다.(e 핸들 이라고도 부르는거 같다)
$('.modal').on('click', function (e)이렇게 클릭리스너 콜백함수에 파라미터로 'e'를 넘겨주면
e.target // 유저가 실제로 누른거
e.currentTarget(); // 이벤트리스너 달린 곳
e.preventDefault(); // 이벤트 기본동작 막아줌
e.stopPropagation(); // 상위요소로 이벤트 버블링 막아줌이러한 메소드들을 사용할 수 있다.
지금 우리의 상황에 응용해보자면
$('.modal').on('click', function (e) {
if (e.target.id == 'modal') {
$('#modal').modal('hide');
}
});위와 같이 지금 클릭한것이 modal 관련 태그가 아니라 진짜 'modal'태그 일때만 모달 창을 닫게 한다.
따라서 이벤트 버블링은 항상 일어나고 이러한 버블링을 인지하고 처리할 줄 알아야 한다라는 교훈을 얻었다.
index와 eq
지금 클릭한 것이 해당 클래스의 몇번째 요소인지를 return해주는 index()
해당 클래스의 몇번 째 요소를 선택할건지를 정해주는 eq() 가 있다.
<ul class="list">
<li class="tab-button">Products</li>
<li class="tab-button orange">Information</li>
<li class="tab-button">Shipping</li>
</ul>위와 같은 태그에서 똑같은 'tab-button'클래스 중에 몇번째 요소를 선택했는지를 알고싶으면 index를 사용하면 된다.
tabBtn.click(function () {
tabController($(this).index());
});
function tabController(index) {
tabBtn.attr('class', 'tab-button');
tabBtn.eq(index).attr('class', 'tab-button orange');
tabContent.attr('class', 'tab-content');
tabContent.eq(index).attr('class', 'tab-content show');
}위처럼 index를 사용해 tabcontroller 함수의 파라미터로 값을 넘겨줄 수 있었다.
2장의 마지막에 라이브러리에 관한 글이 있었는데, 뭐 유심히 보진 않았다.
지금은 라이브러리를 사용하는것도 좋지만, 생짜로 내가 코드를 직접 만드는게 더 도움이 될거라 생각했다!
