JAVASCRIPT - 초급 7편

* return 함수

return 함수 : 함수 값을 반환 + 함수 종료

ex )

function (a) {
  return a
  console.log(a)
}
// * return은 함수 종료기능이 있기 때문에 이렇게 작성시 하단에 코드는 작동되지 않는다

---

간단한 예시)

분과 초 입력시 ms 단위로 변환

function funMS(a,b) {
	var ms = ((a * 60) + b) * 1000;
	// 1초는 1000
	// 60초는 1분 = 60*1000
	return ms
}
console.log(funMS(1,30));
console.log(funMS(2,10));

---

가격 입력시 10% 할인 + 첫구매시 1.5달러 추가할인

function funD(a,b) {
	var num = parseInt(a * 0.9)
	if ( b === true ) {
		var num1 = parseFloat(num - 1.5)
		return num1
	}else {
		return num
	}
}
console.log(funD(70, false))
console.log(funD(10, true))

* 스크롤바 이벤트

1. scrollY , pageYOffset , $(window).scrollTop()

scrollY : 유저가 얼마나 스크롤을 내렸는지 ( window에서만 사용 가능 )

pageYOffset : 위와 동일하지만 호환성 좋음 ( window이외도 사용 가능 )

jquery : $(window).scrollTop()

예시

// javascript
window.addEventListener('scroll', function () {
	console.log(window.scrollY);
	console.log(window.pageYOffset);
}
// jquery                        
$(window).on('scroll', function () {
	$(window).scrollTop();
})

---

2. scrollTo(x좌표,y좌표), $(window).scrollTop(y좌표)

강제로 스크롤하기

jquery : $(window).scrollTop(y좌표)

예시

// javascript
window.addEventListener('scroll',function() {
	window.scrollTo(0,100); // 0,100좌표로 이동
}
// jquery
$(window).on('scroll', function () {
	$(window).scrollTop(100); // 0,100좌표로 이동
})

---

3. window.scrollBy(x좌표, y좌표)

현재 위치부터 스크롤 이동하기

예시

// javascript
window.addEventListener('scroll',function() {
	window.scrollBy(0,100); // 현재 위치에서 0,100좌표로 추가 이동
}

---

4. scrollHeight

실제 요소 높이

document.querySelector(".box").addEventListener("scroll", function () {
	var b = document.querySelector(".box").scrollHeight
})

---

5. clientHeight

눈에 보이는 요소 높이

document.querySelector(".box").addEventListener("scroll", function () {
	var c = document.querySelector(".box").clientHeight
})

---

간단한 예시

1. 스크롤바 내리면 로고 작게 만들기

window.addEventListener('scroll',function() {
	if ( scrollY >= 100 ) {
      document.querySelector(".logo").style.width = "100px";
    } else if (scrollY < 100 ) {
      document.querySelector(".logo").style.width = "200px";
    }
}

2. 스크롤바 끝가지 내리면 alert 띄우기

document.querySelector(".box").addEventListener("scroll", function () {
	var a = parseInt((document.querySelector(".box").scrollTop).toFixed(0))
    // * 현재 스크롤 값을 받아오게되면 소수점으로 받아오게되어 반올림을 해주고
    // toFixed는 문자열로 변환되기 때문에 계산을 위하여 숫자로 변환해준다*
    var b = document.querySelector(".box").scrollHeight
    var c = document.querySelector(".box").clientHeight
    if ( a + c >= b ) {
      alert("최하단")
    }
})