✔ 함수의 return 문법 & 소수(6강)
함수 function 문법
- 긴 코드를 짧게 축약해서 쓸 수 있음
- 파라미터로 기능 업그레이드 가능
- return을 쓰면 함수를 쓰고 나서 원하는 값을 내보냄
return 문법
- 함수 안에서 return 문법을 사용해 return 오른쪽에 값을 적으면 함수가 실행되고 난 자리에 return 값을 반환함
- return을 만나면 함수가 바로 종료됨
function hello(){
console.log('안녕'); // 실행
return 123;
console.log('반가워'); // 실행 안됨
}
var a = hello();
console.log(a); // 123 출력부가세 계산
<script>
// 부가세 계산기 만들기
function vat(a){
return a * 0.1;
}
console.log(vat(5000));
console.log(vat(7000));
</script>소수 연산
소수 연산법
- 컴퓨터는 2진법으로 설계 되어 있음
- 10 + 20 을 계산 → 1010 + 10100으로 연산 → 10진법으로 다시 보내줌
문제점
- but ) 1.1 이라는 숫자는 2진법으로 바꾸면 1.00011001100110011001100 ... 무한 반복
→ 무한한 숫자를 저장할 수 없어 적절히 끊고 반올림해1.00011001100110011001101와 같이 저장
→ 오차 발생
해결
- 덧셈하기 전에 10 곱해서 덧셈하고 10으로 나누기
- 외부라이브러리 사용
- 무시할 정도로 작은 오차라면 반올림
소수점 반올림
숫자.toFixed(자리수)
(1.1 + 0.3).toFixed(1);
- 주의점 :
toFixed()를 사용하면문자로 변환함
→ 123과 '123'은 다른 타입이기 때문에 주의해야 함
parseFloat() , parseInt()
- '숫자'를 숫자로 변환하고 싶을 때
- 즉, 문자처럼 생긴 숫자를 숫자로 변경함
parseFloat('123')// 실수로 변환
parseInt('123')//정수로 변환
Q1
- 함수에 분과 초를 차례로 파라미터로 입력하면 ms단위로 바꿔주는 함수
<script>
function ms(min, sec){
var result = ((min*60) + sec)*1000;
return result;
}
console.log(ms(1, 30)); // 90000
console.log(ms(2, 10)); // 130000
</script>Q2
- 가격을 파라미터로 입력하면 10% 할인된 가격을 돌려주는 함수
- 첫 구매여부도 true/false로 둘째파라미터에 입력해서 첫 구매가 맞을 경우 추가로 1.5 달러도 할인
- 소수로 인한 오차도 나올 수도 있으니 오차는 깔끔하게 처리
<script>
function sale(price , first){
var salePrice = price * 0.9;
if(first === true){
return parseFloat((salePrice - 1.5).toFixed(2));
}
return parseFloat(salePrice.toFixed(2));
}
console.log(sale(70, false)); // 63
console.log(sale(10, true)); // 7.5
</script>✔ 스크롤 이벤트 관련 기능(7강)
스크롤 이벤틀 리스너
window: 전체페이지 의미, scroll 이벤트는 관습적으로 window 붙임window.addEventListener('scroll', function(){})- Y는 세로, X는 가로
window.scrollY
window.scrollY
: 현재 페이지를 얼마나 위에서 부터 스크롤했는지 px 단위로 알려줌
window.scrollTo(X, Y)
window.scrollTo(0, 100)
: 위에서부터 100px 위치로 강제로 스크롤 해줌
window.scrollBy(x, y)
window.scrollBy(0, 100)
: 현재 위치에서부터 +100px 만큼 스크롤- 일반적으로 스크롤 위치가 바로 바뀌지만,
bootstrap설치했을 때 천천히 이동하게됨
→ css파일에 :root { scroll-behavior : auto }를 추가하면 스크롤 위치가 바로 바뀜
jQuery (scrollTop)
scrollTop(100)
: 위에서부터 100만큼 이동- 스크롤 이동 및 스크롤 위치 동시에 출력
- scrollY와 같음
$(window).on('scroll', function(){
$(window).scrollTop();
})Q1.
- 스크롤바 100px 내리면 로고 폰트사이즈 작게
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<span class="badge bg-dark text-light">Dark 🔄</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<script>
window.addEventListener('scroll', function(){
if(window.scrollY > 100){
document.querySelector('.navbar-brand').style.fontSize= '15px';
} else {
document.querySelector('.navbar-brand').style.fontSize= '30px';
}
});
</script>div 박스의 스크롤바
.scrollTop
- div 박스의 스크롤바 내린 양
.scrollHeight
- 스크롤 가능한 실제 높이
.clientHeight
- 화면에서 보이는 DIV 박스의 실제 높이
Q2
스크롤바 다 내렸는지 확인
- div 스크롤바 내린 양(scrollTop) + 화면에서 보이는 div 박스 높이(clientHeight)
== div 실제높이(scrollHeight) 일 경우 alert 띄우기
but. 스크롤 내린 양은 정수단위로 나오지 않고 os마다 부정확해서 오차가 있을 수 있음
→scrollRow + seeHeight > scrollHeight - 10해서 10px정도 오차 관리
- 플래그 변수
: 프로그램의 상태를 추적하는 데 사용되는 변수
- 특정 코드 블록이 한 번만 실행되도록 하기 위해 사용
- 프로그램 특정 상태를 추적해 조건에 따라 다른 동작을 수행하도록 함
- 오류 발생 여부 추적해 적절한 오류 처리 가능
<!--회원 약관-->
<div class="lorem" style="width: 200px; height: 100px; overflow-y: scroll">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Quae voluptas voluptatum minus praesentium fugit debitis at,
laborum ipsa itaque placeat sit, excepturi eius.
Nostrum perspiciatis,
eligendi quae consectetur praesentium exercitationem.
</div>
<script>
var alertShown = false; // 플래그 태그 변수
//이벤트 핸들러 외부에 선언해 매번 이벤트 발생할 때마다 변수가 초기화 되는 문제 해결)
// div의 스크롤바를 다 내리면 alert
document.querySelector('.lorem').addEventListener('scroll', function(){
var scrollRow = document.querySelector('.lorem').scrollTop; // 일반 div 박스의 경우 scrollY 불가
var scrollHeight = document.querySelector('.lorem').scrollHeight; // div의 실제 스크롤 높이
var seeHeight = document.querySelector('.lorem').clientHeight;
//console.log(scrollRow); // div의 스크롤 내린 양
//console.log(scrollHeight); // 실제 스크롤바의 높이
//console.log(seeHeight); // 화면에 보이는 div박스의 높이
// div의 스크롤바 내린 양 + 눈에보이는 div박스 width == div의 실제 높이
if(scrollRow + seeHeight > scrollHeight - 10){ // 오차
if(!alertShown){
alert("회원 약관을 모두 읽으셨습니다.")
alertShown = true; // 플래그 태그를 true로 설정해 다시 알림 표시하지 않음
}
}
});
</script>✔ 페이지 스크롤 응용(8강)
현재페이지의 스크롤 체크
- 브라우저마다 오차가 있을 수 있음
- scrollHeight 구하는 코드는 페이지가 로드 완료 되고 나서 실행해야 정확
→<body>가 끝나기 전 적는 것이 좋음
document.querySelector('html').scrollTop; //현재 웹페이지 스크롤양
document.querySelector('html').clientHeight; //현재 웹페이지 보이는 높이
document.querySelector('html').scrollHeight; //현재 웹페이지 실제높이
window.scrollY // 현재 웹페이지의 실제 높이 .scollHeight와 같음응용
- 페이지를 내릴때 마다 페이지를 얼마나 읽었는지 알려주는 UI
- 스크롤 가능한 전체 높이를 scrollHeight - clientHeight로 계산
→ 현재 스크롤 위치를 나눠 퍼센트로 변환
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="navbar-brand">Navbar</span>
<span class="badge bg-dark text-light">Dark 🔄</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="scroll-box">
<div class="scroll-state"></div>
</div>
</div>
</nav>
<script>
window.addEventListener('scroll', function(){
var scrollTop = document.querySelector('html').scrollTop;
var scrollHeight = document.querySelector('html').scrollHeight;
var clientHeight = document.querySelector('html').clientHeight;
var progress = ((scrollTop) / (scrollHeight - clientHeight)) * 100;
document.querySelector('.scroll-state').style.width = progress + '%';
});
</script>✔ 탭기능 만들며 배우는 for 반복문(9강)
html
<div class="container mt-5">
<ul class="list">
<li class="tab-button orange">Products</li>
<li class="tab-button">Information</li>
<li class="tab-button">Shipping</li>
</ul>
<div class="tab-content show">
<p>상품설명입니다. Product</p>
</div>
<div class="tab-content">
<p>스펙설명입니다. Information</p>
</div>
<div class="tab-content">
<p>배송정보입니다. Shipping</p>
</div>
</div>
<!--자바스크립트 모듈화-->
<script src="index9.js"></script> css
ul.list {
list-style-type: none;
margin: 0;
padding: 0;
border-bottom: 1px solid #ccc;
}
ul.list::after {
content: '';
display: block;
clear: both;
}
.tab-button {
display: block;
padding: 10px 20px 10px 20px;
float: left;
margin-right: -1px;
margin-bottom: -1px;
color: grey;
text-decoration: none;
cursor: pointer;
}
.orange {
border-top: 2px solid orange;
border-right: 1px solid #ccc;
border-bottom: 1px solid white;
border-left: 1px solid #ccc;
color: black;
margin-top: -2px;
}
.tab-content {
display: none;
padding: 10px;
}
.show {
display: block;
}jQurey 셀렉터 요소 선택
$('.tab-button)하면 해당 요소 모두를 가져옴$( ).eq(x)
:$( ) 셀렉터로 찾은 요소 중에 x번째 요소만 선택하고 싶을때
querySelectorAll()[0]과 같음
javascript
$('.tab-button').eq(0).on('click', function(){
$('.tab-button').removeClass('orange');
$('.tab-button').eq(0).addClass('orange');
$('.tab-content').removeClass('show');
$('.tab-content').eq(0).addClass('show');
}); ✔ 탭기능 만들며 배우는 for 반복문2 (10강)
반복문에서 var과 let
for 안에서 var i=10
- var 변수는 범위가 function
→ var i 들어있는 포스트잇은 for 바깥에 생성 - 즉, 반복문을 한 번 돈 후 var i 변수는 3이 됨
for 안에서 let i=10
- let 변수는 범위가 { }
- let i 들어있는 포스트잇은 for 안쪽에 3개 생성
- 컴퓨터는 변수가져다쓸 때 가까운거 가져다 쓰려고 함
확장성 있는 코드
- 원하는 기능이 잘 구현되었는가
- 확장성좋은가
- 나중에 관리가 쉬울 것인가
- 성능문제 없는가
for 문으로 탭 전환
$('.tab-button').length
:'.tab-button'요소의 개수 가져옴
var button = $('.tab-button');
var content = $('.tab-content');
for(let i=0; i<$('.tab-button').length; i++){
button.eq(i).on('click', function(){
button.removeClass('orange');
button.eq(i).addClass('orange');
content.removeClass('show');
content.eq(i).addClass('show');
});
}
ByeolGyu