카테고리 없음
2021. 04. 12 리턴함수, 재귀함수, 알고리즘 등등등
쿼어어얼
2021. 4. 13. 09:06
javascript 위주로 복습
스크롤 이벤트:
드랍메뉴:
애니메이션 넣는것:
background 스크롤에 따라서 보여지는것:
사이드 메뉴에 따라 html위치 조절하는것:
눌렀을때 background 색깔조정 : ===>>> 레이아웃을 띄우는것 (((레이아웃 팝업)))
button 눌렀을때 바뀌는것:
form체크부분 만드는것:
단위 사용 방법에 따라 크기를 확대,축소를 해도 이미지가 깨지지 않는 방법===> 반응형웹에서 쓰인다:
애니메이션 일시정지 기능:
다수의 javascript코드를 깔끔하게 정리하는 방법:
반응형웹 부분: 1. 반응형으로 만들것인지 2.아예 html을 하나 새로 만들것인지
레이아웃 어떻게 초기에 디자인 할 것인지:
appendChild를 활용하여 무한으로 생성되는 html구간 만드는 방법:
display:flex 부분 사용하는 방법javascript 위주로 복습
레이아웃 팝업:
<!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;}
#layer_popup_wrap{
width:100vw;
height: 100vh;
background: tomato;
opacity: 0.6;
position:fixed;
top:0;
display: none;
}
#layer_popup{
position: relative;
width:500px;
height: 500px;
background: wheat;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.close{
background: violet;
color: teal;
width: 80px;
height: 30px;
line-height: 27px;
border-radius: 15px;
display: inline-block;
text-align: center;
cursor: pointer;
}
</style>
</head>
<body>
<button id="btn">레이어팝업</button>
<div id="layer_popup_wrap">
<div id="layer_popup">
이부분에 내용이 나옵니다.
<span class="close">닫기버튼</span>
</div>
</div>
<script type="text/javascript">
let layerBtn = document.querySelector("#btn");
let closeBtn = document.querySelector(".close");
//Element.addEventListener(이벤트명:string (((html에서 click,mouseover, mouseout, scroll 등등))), 콜백함수:Function() <--- 하나 만들어주는거다.);
/*앞으로 html에 onclick, onmouseover같은거 안쓰고 js로 처리한다.*/
layerBtn.addEventListener("click",layerFn); /* 함수 하나로 반대되는 상황을 묶어버릴수 있다. */
closeBtn.addEventListener("click",layerFn); /* 클릭하면 어떻게 하고 저기를 클릭하면 어떻게 해라 */
function layerFn(){
let popup = document.querySelector("#layer_popup_wrap");
if(popup.style.display == "none"){
popup.style.display = "block";
}else {
popup.style.display = "none";
}
}
/*삼항연산자
let popup = document.querySelector("#layer_popup_wrap");
let type = (popup.style.display == "none") ? "block" : "none";
popup.style.display = type;
*/
/* css에서 display: none 을 줘서 javascript가 늦게 먹힌다 <<<<===== javascript는 html을 먼저 읽는데 css말고 html 에서는 display가 none이 아니니까 늦게 먹힌다
따라서 html에 style display: none 을 넣어주는게 많다. */
</script>
</body>
</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>
<script type="text/javascript">
function Apple(){
a = 1;
return a; //<<<<===== return이 있는곳에서 뭔가가 실행이 되면 거기서 function은 종료된다. 즉 밑으로 더이상 내려가지 않는다.
b = 2; // 함수는 1개의 값만 내놓는다.
c = 3;
return b+c;
} /* 함수는 항상 1개만 내놓는다.() */
/* 따라서 여러개를 가져오려면 배열형태로 가져온다 */
num = Apple();
console.log(num);
function banana(how){
return how*2
}
suja = banana(16);
console.log(suja);
</script>
</head>
<body>
</body>
</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>
@media screen and (max-width:1095px){
}
</style>
</head>
<body>
필요없는 display들은 none으로 대부분 돌려진다.
<!-- vw , vh 단위 존재함 vw : view width
vh : view height
1당 1%
예를 들어 90vh 는 90%; //높이기준으로
100vw = 100% 는 100% // 넓이 기준으로 메인 비주얼 크기를 조절할때 쓰면 좋다. -->
</body>
</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>
<script type="text/javascript">
/* 재귀함수 :: 자기자신을 함수안에 넣는것. for문 대신할수 있음 */
let num = 0;
function Apple(){
if(num == 10){
console.log(num);
return num;
}
num++;
Apple();
}
Apple();
</script>
</head>
<body>
</body>
</html>
class활용:
<!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>
.w100{width:100%;}
.W1200{width:1200px; margin:0 auto;}
body{background: violet;}
#header_wrap{
background: tomato;
height: 100px;
}
#visual{
height:500px;
margin-top: 500px;
}
</style>
</head>
<body>
<div id="wrap" class="w100">
<div id="header_wrap" class="w100">
<div id="header" class="w1200">
sdfsdf
</div>
</div>
<div id="visual_wrap" class="w100">
<div id="visual" class="w1200">
sdfsdfqqqqq
</div>
</div>
</div>
</body>
</html>
display:flex 부분 사용하는 방법:
<!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;}
ul,li{list-style:none;}
.gnb{
display:flex;
width:600px;
height:900px;
flex-direction:row; /*옆으로 나열시키겠다*/
flex-wrap: nowrap; /*display:flex 부분을 고정시키겠다. 아래로 떨어뜨리겠다. <---> 아래로 안떨어지게하겠다.(nowrap)*/
justify-content: center; /* flex 박스안에 영역 정렬 */
}
.gnb > li{
width:200px;
height: 50px;
}
.gnb > li:nth-child(1){background: chartreuse;}
.gnb > li:nth-child(2){background: rebeccapurple;}
.gnb > li:nth-child(3){background: saddlebrown;}
.gnb > li:nth-child(4){background: cadetblue;}
.gnb > li:nth-child(5){background: firebrick;}
.gnb > li:nth-child(6){background: tan;}
.gnb > li:nth-child(7){background: violet;}
</style>
</head>
<body>
<ul class="gnb">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</body>
</html>
navi활용:
<!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;}
ul,li{list-style: none;}
#wrap{
width: 100%;
}
#header{
width: 1200px;
height: 100px;
margin: 0 auto;
}
.gnb{
display: flex;
flex-direction: row;
justify-content: space-between;
width: 600px;
background: red;
}
.gnb > li{
background: rebeccapurple;
width: 25%;
}
.gnb > li > ul.snb{
display: none;
}
.gnb > li > ul.snb.on{
display: block;
}
</style>
</head>
<script type="text/javascript">
//window.addEventListener("Event:String",콜백함수)
window.addEventListener("DOMContentLoaded",init); /* <<<====이거의 뜻 자체가 html이 다 Loaded되고나면 이거를 실행해라 라는 의미 (나중에 많이 쓰임) */
function init(){
let gnb = document.querySelectorAll(".gnb > li")
//반복문 for안쓰고 forEach <===== 배열을 반복할때 많이 쓰인다.
// 익명함수 = 함수이름이없는 함수가 익명함수다. direct로 함수를 넣어줄때 쓰인다.
gnb.forEach(forFn); //Array.forEach(callback:function); // <<<===gnb의 배열만큼 반복해서 실행해라 1배열 실행, 2배열 실행, 3배열 실행, 4배열 실행 ......
gnb.forEach(function(ele){
ele.addEventListener("mouseenter", menuover);
ele.addEventListener("mouseleave", menuout);
});
}
function menuover(event){
let snb = event.currentTarget.querySelector(".snb");
snb.classList.add("on");
}
function menuout(event){
let snb = event.currentTarget.querySelector(".snb");
snb.classList.remove("on");
}
/*function menu(event2){ <<<<<<=======menu를 함수 1개를 이용하여 깔끔하게 만듦
let snbAll = document.querySelectorAll(".snb");
snbAll.forEach(function(ele){
if(event2.type == "mouseenter"){
ele.classList.add("on");
} else{
ele.classList.remove("on");
}
}
)
}*/
</script>
<body>
<div id="wrap">
<div id="header">
<ul class="gnb">
<li>menu1
<ul class="snb">
<li>menu1-1</li>
<li>menu1-2</li>
<li>menu1-3</li>
</ul>
</li>
<li>menu2
<ul class="snb">
<li>menu2-1</li>
<li>menu2-2</li>
<li>menu2-3</li>
</ul>
</li>
<li>menu3
<ul class="snb">
<li>menu3-1</li>
<li>menu3-2</li>
<li>menu3-3</li>
</ul>
</li>
<li>menu4
<ul class="snb">
<li>menu4-1</li>
<li>menu4-2</li>
<li>menu4-3</li>
</ul>
</li>
</ul>
</div>
</div>
</body>
</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>
<script type="text/javascript">
/*세호씨가 도넛가게를 합니다.
배달도 합니다.
알바생을 시켜서 도넛을 배달시킬려합니다
도넛 3개 담을수 있는 박스와 5개 담을수 있는 박스가 있습니다.
알바생은 귀차니즘이라 최소한의 박스로만 배달갈려고 해요.
ex) 18개를 배달할려고 하면 3개짜리 6개도 가능하지만 5개짜리 3개 3개짜리 1개로해서 4박스로 배달이 가능하죠.
5박스 3개와 3박스 1개로 가능함.
배달을 "정확하게" N박스 배달 할려 할때 몇개의 박스를 가져가면 되는지 구하시오.
만약 정확하게 N박스를 만들수 없다면 -1을 출력하세요.
*/
var t;
basket5 = t/5
basket3 = t/3
function dounut(t){
if(t%5 == 0){
basket5
return basket5
{
if(t%3 ==0 ){
basket3
return basket3
}
else {
-1
}
return -1
}
}
}
dounut(17);
console.log(basket5)
</script>
</head>
<body>
</body>
</html>