증감연산자 : 대입연산자와 다른 연산자를 묶어 간단하게 표현할때 주로 사용된다.
- 변수--; 또는 --변수 : //1 감소시킨다.
- 변수++; 또는 ++변수 : //1 증가시킨다.
- let a=++b; //변수b의 데이터를 1증가 시킨 후 변수 a에 저장한다.
- let a=b++; //변수a에 변수b의 데이터를 저장한 후 변수b의 데이터를 1증가시킨다.
<script>
let num=0;
num=num-1;
num-- //위의 식과 같은 식이다.
num++ //해당 변수가 1씩 증가한다
++num //이런 식은 변수를 먼저 변경하고 스크립트를 실행시킨다.
let a;
let b=0;
a=++b;
document.write(a); //a는 b안의 데이터를 1씩 증가시켜서 a에 넣어지도록 되어있다.
//즉 a를 출력하면 1로 나와있다 b에서 값을 늘려 a에 넣은 후 출력식(스크립트)이 실행되었기 때문
a=b++;
document.write(a); //이런 형식의 식은 스크립트를 사용하고 식을 실행하기 때문에 출력해도 0으로 나오게 된다.
</script>
변수뒤에 식을 넣는 스크립트를 먼저 실행시키고 식을 넣는 방식이 주로 쓰인다.
논리 연산자 : 주로 if 구문과 같이사용
- || : or연산자 - 피연산자 중 값이 하나라도 true가 존재하면 true결과값을 변환
- && : and연산자 - 피연산자 중 값이 하나라도 false가 존재하면 false결과값을 변환
- ! : not연산자, 단항연산자 - 피연산자 중 값이 true면 반대로 false결과값을 변환
let num=10;
let sum=20;
if((num<5) || (sum>=20)){//||는 or이라는 의미(둘중 하나라면..) 위와같은 조건식이라면 둘중에 맞는 식을 실행시킨다.
document.write("or연산자는 둘중에 한쪽만 true면 스크립트가 실행");
둘중 하나의 식이 맞다면 맞는쪽을 실행시킨다.
let num=10;
let sum=20;
if((num>=10) && (sum>=20)){//and연산자
document.write("and연산자는 둘중에 두 조건식이 모두 true 여야 스크립트가 실행");
}else{
document.write("and연산자는 둘중에 하나라도 false이면 false를 반환한다.");
}
둘다 true 이어야 실행이 가능하다 여러식이 같이 적용되어야 할때 사용된다.
let num=10;
let sum=20;
if(!(sum<20)){
document.write("not연산자는 조건식과 반대일떄 스크립트 실행");
}
식이 전부 맞지 않게 되면 실행이된다.
위 연산자를 활용해 스크롤이벤트로 배경색상이 변경되도록 할 것이다.
<style>
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
#header{
background: rgba(0,0,0,0.5);
height: 100px;
padding: 50px;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
position: fixed;
width: 100%;
}
.logo{
font-size: 1.5rem;
}
.nav{
width: 800px;
}
.gnb{
display: flex;
justify-content: space-around;
}
.gnb li{
width: calc(100%/4 - 5px);
}
.gnb li a{
display: block;
line-height: 100px;
text-align: center;
}
.sec{
height: 1000px; /*브라우저의 100%값으로 지정됨*/
padding: 100px 0;
color: #fff;
background: #eaeaea;
transition: background 1s;
}
.sec h2{
font-size: 100px;
text-align: center;
}
#footer{
height: 500px;
background: #333;
}
</style>
스타일
<body>
<div id="wrap">
<header id="header">
<h1 class="logo">
<a href="#">logo</a>
</h1>
<nav class="nav">
<ul class="gnb">
<li><a href="#section1" class="link">MENU 1</a></li>
<li><a href="#section2" class="link">MENU 2</a></li>
<li><a href="#section3" class="link">MENU 3</a></li>
<li><a href="#section4" class="link">MENU 4</a></li>
</ul>
</nav>
</header>
<main id="container">
<section class="sec" id="section1">
<h2>SECTION1</h2>
</section>
<section class="sec" id="section2">
<h2>SECTION2</h2>
</section>
<section class="sec" id="section3">
<h2>SECTION3</h2>
</section>
<section class="sec" id="section4">
<h2>SECTION4</h2>
</section>
</main>
<footer id="footer"></footer>
</div>
구조
<script>
/*특정영역까지 부드럽게 이동*/
let btnLink=document.querySelectorAll(".link");
console.log(btnLink);
btnLink[0].addEventListener("click", function(e){
e.preventDefault();
window.scrollTo({top: 0, behavior:"smooth"});
})
btnLink[1].addEventListener("click", function(e){//a태그로 이동하는데 특정 영역으로 이동시키는걸 막기 위해서 하나를 선언
e.preventDefault();
window.scrollTo({top: 1000, behavior:"smooth"});//행동을 부드럽게 한다는 의미
})
btnLink[2].addEventListener("click", function(e){
e.preventDefault();
window.scrollTo({top: 2000, behavior:"smooth"});
})
btnLink[3].addEventListener("click", function(e){
e.preventDefault();
window.scrollTo({top: 3000, behavior:"smooth"});
})
화면을 부드럽게 하기위한 자바 스크립트 (scrollTo를 사용)
/*배경색상 변경 스크립트*/
let sec=document.querySelectorAll(".sec");
window.addEventListener("scroll", function(){
let scroll=window.scrollY;
console.log(scroll) //scrollY를 통해서 위치 값을 콘솔에 불러왔다.
if((scroll>0) && (scroll<=1000)){//식으로 0보다 크거나 1000이랑 같거나 작다면 실행 둘다 true가 나와야 실행되도록 하고 싶기 때문에 (식이 2개라는 말) &&를 사용한다.
sec[0].style.background="tomato"
}else if((scroll>1000)&&(scroll<=2000)){
sec[1].style.background="gold"
}else if((scroll>2000)&&(scroll<=3000)){
sec[2].style.background="skyblue"
}else if((scroll>3000)&&(scroll<=4000)){
sec[3].style.background="yellowgreen"
}
})
스크롤의 값이 지정한 식에 따라 해당 스크롤의 높이만큼 변하면서 배경색이 바뀌도록 지정하였다. 위는 0보다 크거나 1000이랑 같거나 작다면 실행하는 식으로 둘다 맞는 식이어야 실행이 된다. 여기서는 각각 위치에 맞춰서 색을 넣어서 높이 값에 맞게 색이 변하도록 설정해 주었다. 여기서는 유지보수가 어렵기 때문에 이를 줄이기 위해서 식을 넣어준다.
else가 들어가도 되지만 if만 써도 무방하다. 각각 섹션의 높이는 같기 때문에 식을 넣어줄 수 있는데, 숫자가 들어가는 부분에 일정식을 넣어줄 수도 있다. 여기서는 1000씩 값이 늘어났기 때문에 1씩 숫자가 증가하여 곱해진것을 볼 수 있다.
for 구문을 사용해 위의 수를 자동으로 계산해줄 변수를 선언해준다. 기본값을 0으로 두고 각 인덱스 번호에 맞게 하나씩 늘어나도록 하기 위해서 i라는 변수를 선언해준다. 그리고 처음에는 값이 0으로 시작하기 때문에 첫 인덱스 0번부터 시
특정 위치에 오게 되면 이미지나 선이 커지도록 지정할 것이다.
<body>
<div id="wrap">
<header id="header">
<h1 class="logo">
<a href="#">logo</a>
</h1>
<nav class="nav">
<ul class="gnb">
<li><a href="#section1" class="link">MENU 1</a></li>
<li><a href="#section2" class="link">MENU 2</a></li>
<li><a href="#section3" class="link">MENU 3</a></li>
<li><a href="#section4" class="link">MENU 4</a></li>
</ul>
</nav>
</header>
<main id="container">
<section class="sec" id="section1">
<h2>SECTION1</h2>
</section>
<section class="sec" id="section2">
<div class="in">
<h2>SECTION2</h2>
<div class="graph-all">
<!--plan-->
<div class="graph plan">
<div class="gr-txt">
<span class="gr-tit">PLAN</span>
<span class="gr-num">100%</span>
</div>
<div class="gr-bar">
<span class="bar-bg"></span>
<span class="bar"></span>
</div>
</div>
<!--design-->
<div class="graph design">
<div class="gr-txt">
<span class="gr-tit">Design/Figma</span>
<span class="gr-num">100%</span>
</div>
<div class="gr-bar">
<span class="bar-bg"></span>
<span class="bar"></span>
</div>
</div>
<!--html-->
<div class="graph html">
<div class="gr-txt">
<span class="gr-tit">Html/CSS3</span>
<span class="gr-num">100%</span>
</div>
<div class="gr-bar">
<span class="bar-bg"></span>
<span class="bar"></span>
</div>
</div>
<!--javascript-->
<div class="graph js">
<div class="gr-txt">
<span class="gr-tit">javascript</span>
<span class="gr-num">70%</span>
</div>
<div class="gr-bar">
<span class="bar-bg"></span>
<span class="bar"></span>
</div>
</div>
</div>
</div>
</section>
<section class="sec" id="section3">
<h2>SECTION3</h2>
</section>
<section class="sec" id="section4">
<h2>SECTION4</h2>
</section>
</main>
<footer id="footer"></footer>
</div>
구조
<style>
*{
margin: 0; padding: 0;
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
color: inherit;
}
#header{
background: rgba(0,0,0,0.5);
height: 100px;
padding: 50px;
display: flex;
justify-content: space-between;
align-items: center;
color: #fff;
position: fixed;
width: 100%;
}
.logo{
font-size: 1.5rem;
}
.nav{
width: 800px;
}
.gnb{
display: flex;
justify-content: space-around;
}
.gnb li{
width: calc(100%/4 - 5px);
}
.gnb li a{
display: block;
line-height: 100px;
text-align: center;
}
.sec{
height: 1000px; /*브라우저의 100%값으로 지정됨*/
padding: 100px 0;
color: #fff;
/* background: #eaeaea;
transition: background 1s; */
}
.sec h2{
font-size: 100px;
text-align: center;
}
#section1{background: turquoise;}
#section2{background: rgb(255,35,189);}
#section3{background: rgb(255,187,0);}
#section4{background: rgb(7,106,255);}
#footer{
height: 500px;
background: #333;
}
.in{
width: 1200px;
margin: 0 auto;
border: 1px dotted yellow;
}
.graph-all{
border: 2px dotted dodgerblue;
padding: 100px 200px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
gap: 40px; /*display flex grid 둘다 넣을수 있는 속성으로 사이 띄움을 의미한다.*/
}
.graph{
width: calc(100%/2 - 60px);
border: 2px dotted cyan;
}
.gr-txt{
display: flex;
justify-content: space-between;
font-size: 14px;
}
.gr-bar{
position: relative;
margin-top: 20px;
}
.bar-bg{
display: block;
height: 10px;
border-radius: 50px;
background: #333;
}
.bar{
display: block;
height: 10px;
border-radius: 50px;
background: #fff;
position: absolute;
left: 0; top: 5px;
width: 0%;
}
</style>
스타일
내가 지정하는 퍼센트에 따라 바가 올라오도록 하는데 해당 섹션에 도달했을때 실행이 되어 올라오도록 자바스크립트를 사용할 것이다. (특정영역에서 이벤트가 발생)
//그래프가 커지는 스크립트
let bar=document.querySelectorAll(".bar");
let sec=document.querySelector("#section2");//섹션2의 객체만 저장됨 하지만 좌표값도 필요하다.
let secTop=sec.offsetTop; //다른 지정된것이 없기 떄문에 상대좌표값으로 잡아준다. sec의 top좌표값을 확인해서 변수 안에 저장, offsetTop은 상대좌표값으로 부모요소에 position이 있으면 좌표값이 변경될 수 있다.
// console.log(secTop)
window.addEventListener("scroll", function(){
let scroll=window.scrollY;
if(scroll>=secTop){
bar[0].style.width="85%";
bar[1].style.width="90%";
bar[2].style.width="95%";
bar[3].style.width="70%";
}
하지만 이렇게 하게 되면 영역에 왓을때 딱 한번만 실행되게 되고 다른 섹션에 갓다가 다시 와도 실행되지 않고 그대로 있다. 만약 해당 섹션에 갈때마다 하고 싶다면 연산자를 사용해 해당영역의 시작점 식과 끝나는 지점의 식이 함께 맞을때 실행되어야 하기 때문에 &&로 연산자를 넣어주고 if, else 구문을 활용해 해당 위치에서는 원하는 값의 바가 나타나고 아니라면(else) 0%로 바뀌어서 섹션이 변할때 마다 바가 올라오게 설정된다.
window.addEventListener("scroll", function(){
let scroll=window.scrollY;
if((scroll>=secTop)&&(scroll<2000)){
bar[0].style.width="85%";
bar[1].style.width="90%";
bar[2].style.width="95%";
bar[3].style.width="70%";
}else{
bar[0].style.width="0%";
bar[1].style.width="0%";
bar[2].style.width="0%";
bar[3].style.width="0%";
}
console.log(secTop+sec.offsetHeight)
window.addEventListener("scroll", function(){
let scroll=window.scrollY;
if((scroll>=secTop)&&(scroll<secTop+sec.offsetHeight)){
bar[0].style.width="85%";
bar[1].style.width="90%";
bar[2].style.width="95%";
bar[3].style.width="70%";
}else{
bar[0].style.width="0%";
bar[1].style.width="0%";
bar[2].style.width="0%";
bar[3].style.width="0%";
}
//그래프가 커지는 스크립트
let bar=document.querySelectorAll(".bar");
let sec=document.querySelector("#section2");//섹션2의 객체만 저장됨 하지만 좌표값도 필요하다.
let secTop=sec.offsetTop; //다른 지정된것이 없기 떄문에 상대좌표값으로 잡아준다. sec의 top좌표값을 확인해서 변수 안에 저장, offsetTop은 상대좌표값으로 부모요소에 position이 있으면 좌표값이 변경될 수 있다.
//sec2의 상단 좌표값이라고 지정함 (상대좌표값으로.)
//
console.log(secTop+sec.offsetHeight) //해당 식을 풀어보면 1000+1000인데 이렇게 작성이 되는 이유는 해당 섹션의 상대좌표값으로 해당 부모의 값이기 때문에 기본적으로 1000이 나오게 된다.
//
let num=["85%", "90%", "95%", "70%"]
window.addEventListener("scroll", function(){
let scroll=window.scrollY;
if((scroll>=secTop)&&(scroll<secTop+sec.offsetHeight)){
for(let i=0; i<bar.length; i++){
bar[i].style.width=num[i];
// bar[1].style.width="90%";
// bar[2].style.width="95%";
// bar[3].style.width="70%";
}
}else{
for(let i=0; i<bar.length; i++){
bar[i].style.width="0%";}
// bar[0].style.width="0%";
// bar[1].style.width="0%";
// bar[2].style.width="0%";
// bar[3].style.width="0%";
}
})
활용예제
실행하게 되면 애니메이션이 실행되고 섹션이 아닌 특정위치에서 진행시키고 싶다.
.ani-in{
animation: fadeIn 1s 0.5s both;
}
@keyframes fadeIn{
0%{transform: translateY(50px); opacity: 0;}
100%{transform: translateY(0px); opacity: 1;}
}
임의의 클래스에 애니메이션을 지정하고
//h2가 서서히 보이는 애니메이션
let tit=document.querySelector(".tit")
window.addEventListener("scroll", function(){
let scroll=scrollY;
console.log(scroll)
if(scroll>1000-100){
tit.classList.add("ani-in")
}
})
적용한 타이틀에 임의의 클래스를 주고 스크롤하였을때 이벤트가 발생하도록 하고 해당 스크롤이 윈도우에 있기 때문에 window로 지정하여서 진행한다. 그리고
//h2가 서서히 보이는 애니메이션
let tit=document.querySelectorAll(".tit");
let sec=document.querySelectorAll(".sec-ani");
document.querySelector(".tit-sec").classList.add("ani-in");
// let secTop=sec.offsetTop-100;
window.addEventListener("scroll", function(){
let scroll=scrollY;
console.log(scroll)
for(let i=0; i<tit.length; i++){
if(scroll>sec[i].offsetTop-100){
tit[i].classList.add("ani-in");
}
}
});
'기록 > 수업정리_javascr' 카테고리의 다른 글
| 객체 설명 (0) | 2024.08.12 |
|---|---|
| 내장객체 (날짜정보) (0) | 2024.08.02 |
| scrollTo() (0) | 2024.07.31 |
| FixedNavigation, 상대좌표값, 절대좌표값 (0) | 2024.07.29 |
| javascript_4_함수 (0) | 2024.07.18 |
