hoisting : var 변수 선언 이나 함수선언부가 맨위로 끌어올려진 것 처럼 적용됨.
ex)
<!--webapp/js/hoisting.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
console.log(sample3());
console.log(sample2);
console.log(sample);
sample = "text plain";
var sample;
function sample3(){
return "call sample()";
}
var sample2 = "text plain2";
</script>
</head>
<body>
</body>
</html>
<!--webapp/js/bom_location.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
location URL 주소 표시줄 제어
href or replace
-->
<button onclick="location.href='https://www.naver.com';">네이버 href 이동</button>
<button onclick="location.replace('https://www.naver.com');">네이버 replace 이동</button>
<a href="javascript:location.href='bom_history.html';">내부 파일 이동</a>
</body>
</html>
<!--webapp/js/bom_history.html-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
</script>
</head>
<body>
<!--button[onclick='history']*3-->
<!--
history.back(); // 이전 페이지로 이동 (이전 입력정보가 남아있음)
history.forward(); // 앞 페이지로 이동
history.go(정수); // 정수로 지정된 페이지로 이동, 0 : 현재 페이지
-1 이전페이지; -2 이전이전페이지
-->
<button onclick="history.back();">back();</button>
<button onclick="history.go(-2);">go(-2);</button>
<button onclick="history.forward();">forward();</button>
</body>
</html>
유투브처럼 스크롤 내리면 내용 추가되는 이벤트 만들기
<!-- webapp/js/bom_screen.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
// 브라우저가 모두 준비되었을 때 실행될 함수
window.onload = function(){
// window.screen
let widthWin = screen.availWidth;
let heightWin = screen.availHeight;
console.log("사용가능한 화면 너비", widthWin);
console.log("사용가능한 화면 높이", heightWin);
let width = screen.width;
let height = screen.height;
console.log("화면 너비", width);
console.log("화면 높이", height);
width = document.body.clientWidth;
height = document.body.clientHeight;
console.log("문서 안쪽의 너비",width);
console.log("문서 안쪽의 높이",height);
}
let i = 0;
// 윈도우 에서 스크롤 변경이 되면 수행할 함수
window.onscroll = function(){
// y scroll 위치 정보
let wy = window.scrollY;
// 문서의 현재 전체 높이
let dh = document.body.clientHeight;
// 브라우저가 출력할 수 있는 최대 높이
let wh = window.screen.height;
console.log(wy,dh,wh);
let scrollHeight = wy+ wh;
if(scrollHeight >= dh){
console.log('body에 요소 추가');
let elem = document.createElement("div");
elem.style.height = "500px";
elem.style.border = "1px solid black";
elem.innerHTML = "<h1>"+i+"</h1>";
document.body.appendChild(elem);
i++;
}
}
</script>
</head>
<body>
<h3><a href="bom_location.html">location</a></h3>
<div style="height:1600px;width:100%;border:1px solid red;"></div>
</body>
</html>
'Java > JSP' 카테고리의 다른 글
| 7.04 dto,vo / useBean (0) | 2023.07.04 |
|---|---|
| 7.03 리스트를 이용한 회원가입 구현 (0) | 2023.07.03 |
| 6.30 JSP 진짜 시작 / path , 절대경로, 디렉티브 태그 / 4대 영역 객체 - 속성객체 (0) | 2023.07.03 |
| 06.23 eclipse for JSP set up (0) | 2023.06.26 |
| 06.26 이클립스 emmet 확장 프로그램 설치 (0) | 2023.06.26 |
