노력이 좋아서
<step36>'js_메소드, 동기 비동기'
zoaseo
2022. 5. 10. 10:59
1) 08methodthis.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li onclick="liView(this)">menu1</li>
<li onclick="liView(this)">menu2</li>
<li onclick="liView(this)">menu3</li>
<li onclick="liView(this)">menu4</li>
</ul>
<script>
function liView(a){
console.log(a);
}
let user = {
name: 'green',
age: 20,
say() {
console.log(this.name);
}
}
let user2 = {
name: 'blue',
age: 30,
say() {
console.log(this.name);
}
}
let obj = {
print: function(){
console.log(this); //this는 객체 obj의 메소드 print를 가리킨다
}
}
function printThis(){
console.log(this); //this는 window를 가리킨다
}
printThis();
user.say();
user2.say();
console.log(this);
obj.print();
</script>
</body>
</html>2) ex06.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
li {
list-style: none;
}
ul {
display: flex;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
#div {
width: 100%;
height: 100vh;
position: relative;
z-index: 1;
}
span {}
#black {
width: 100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background: rgba(1, 1, 1, 0.5);
/* display: none; */
opacity: 0;
}
#big {
width: 600px;
height: 400px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 2;
}
span {
position: absolute;
right: 50px;
top: 50px;
color: #fff;
font-size: 48px;
z-index: 100;
}
</style>
</head>
<body>
<div id="div">
<ul>
<li>
<img src="../과제/img/info_img01.jpg" alt="1번 이미지입니다" onclick="lic(this)">
</li>
<li>
<img src="../과제/img/info_img02.jpg" alt="2번 이미지입니다" onclick="lic(this)">
</li>
<li>
<img src="../과제/img/info_img03.jpg" alt="3번 이미지입니다" onclick="lic(this)">
</li>
<li>
<img src="../과제/img/info_img04.jpg" alt="4번 이미지입니다" onclick="lic(this)">
</li>
</ul>
</div>
<div id="black" class="on"></div>
<img id="big" src="" alt="">
<span onclick="hideDiv()">X</span>
<script>
function lic(a){
console.log(a.alt);
document.querySelector('#black').style.opacity = 1;
document.querySelector('#big').src = a.src;
document.querySelector('#big').style.display = 'block';
alert(a.alt);
}
function hideDiv(){
document.querySelector('#black').style.opacity = 0;
// document.querySelector('#big').src = a.src;
document.querySelector('#big').style.display = 'none';
}
</script>
</body>
</html>3) ex06_teach.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
#wrap {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
ul {
display: flex;
}
ul li {
width: 25%;
list-style: none;
}
ul li img {
width: 100%;
}
#imgView {
position: absolute;
width: 100%;
height: 100vh;
background: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
}
#imgView span {
position: absolute;
right: 50px;
top: 50px;
color: #fff;
font-size: 48px;
}
</style>
</head>
<body>
<div id="wrap">
<ul>
<li>
<img src="../과제/img/info_img01.jpg" alt="1번 이미지입니다" onclick="viewImg(this)">
</li>
<li>
<img src="../과제/img/info_img02.jpg" alt="2번 이미지입니다" onclick="viewImg(this)">
</li>
<li>
<img src="../과제/img/info_img03.jpg" alt="3번 이미지입니다" onclick="viewImg(this)">
</li>
<li>
<img src="../과제/img/info_img04.jpg" alt="4번 이미지입니다" onclick="viewImg(this)">
</li>
</ul>
</div>
<div id="imgView">
<span onclick="hideDiv()">X</span>
<img src="../과제/img/info_img01.jpg" alt="" id="bigImg">
<p>첫번째 이미지입니다</p>
</div>
<script>
function viewImg(img){
let imgSrc = img.src;
document.querySelector('#bigImg').src = imgSrc;
document.querySelector('#imgView').style.display = 'flex';
document.querySelector('p').innerHTML = img.alt;
}
function hideDiv(){
document.querySelector('#imgView').style.display = 'none';
}
</script>
</body>
</html>4) setInterval.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
setInterval(function(){
console.log('안녕');
},2000)
setTimeout(function(){ //시간이 되었을때 한번만 실행시켜준다
console.log('앙녕');
},8000)
</script>
</body>
</html>5) fadein.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {margin: 0; padding: 0; box-sizing: border-box;}
body {
width: 100%;
height: 100vh;
}
@keyframes fadein{
0%{ opacity: 0.4;}
100%{ opacity: 1;}
}
.fadeImg {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
animation: fadein 0.5s;
}
</style>
</head>
<body>
<div class="fadeImg"><img src="../과제/img/story_img01.jpg" alt=""></div>
<div class="fadeImg"><img src="../과제/img/story_img02.jpg" alt=""></div>
<div class="fadeImg"><img src="../과제/img/story_img03.jpg" alt=""></div>
<div class="fadeImg"><img src="../과제/img/story_img04.jpg" alt=""></div>
<script>
let imgDivs = document.querySelectorAll('.fadeImg');
let indexNum = 0;
let nextNum;
// for(i=0; i<imgDivs.length; i++){
// imgDivs[i].style.display = 'none';
// }
//imgDiv안에 있는 값 div의 스타일 display를 none으로 변경
imgDivs.forEach(div => div.style.display = 'none');
imgDivs[0].style.display = 'block';
// 1) 0초일때
// indexNum = 0
// 2) 3초일때
// 1번줄 indexNum => 0 nextNum =>1
// 4번줄 indexNum => 1
// 3) 6초일때
// 1번줄 indexNum => 1 nextNum => 2
// 4번줄 indexNum => 2
// 4) 9초일때
// 1번줄 indexNum => 2 nextNum => 3
// 4번줄 indexNum => 3
// 5) 12초일때
// 1번줄 indexNum => 3 nextNum => 4
setInterval(function(){
nextNum = (indexNum+1) % 4;
console.log(nextNum);
imgDivs[indexNum].style.display = 'none';
imgDivs[nextNum].style.display = 'block';
indexNum = nextNum; //indexNum이 계속 0이기 때문에 nexNum으로 넣어준다
},3000)
</script>
</body>
</html>