복습용연습장

https://hyunu0504.github.io/blog7/ https://hyunu0504.github.io/blog7/ hyunu0504.github.io setTimeout, setInterval, clearTimeout, clearInterval를 이용한 버튼 만들기 HTML 5 5초 후부터 작동되는 버튼 5초 후부터 작동안되는 버튼 CSS body { background-color: #eee; } .colors { background-color: grey; height: 500px; width: 500px; } .colors2 { background-color: green; height: 500px; width: 500px; } .btn { margin-right: 50px; margin-bo..

JAVA SCRIPT 2022. 6. 12. 11:37

이벤트 위임으로 탭메뉴 만들기 https://hyunu0504.github.io/blog6/# https://hyunu0504.github.io/blog6/ hyunu0504.github.io 이벤트 위임이란 부모 요소에만 이벤트를 등록해서 자신에게 발생한 이벤트를 다른 요소에서 처리하는것이다 결국 이벤트 버블링을 이용해서 이벤트 위임을 할 수 있다. 원래는 요소 하나하나에 이벤트를 달아줬다면 이벤트 위임을 사용하면 부모요소에만 이벤트를 달아주면 된다. 이벤트를 남용하면 사이트 성능에도 영향이 있고, 유지보수에도 안좋기 때문에 이벤트 위임을 사용하면 좋다. HTML 링크1 링크2 링크3 링크4 CSS body { margin: 0; } ul { display: flex; list-style: none; ..

JAVA SCRIPT 2022. 6. 9. 17:18

이벤트 버블링 a b c 위에는 a안에 b안에 c가 들어있는 div 박스이고 a박스 클릭시 a출력, b클릭시 b, c클릭시 c가 출력되는 이벤트다. 그런데 a를 클릭하면 a만 출력 b를 클릭하면 b와 그 부모요소 a까지 출력 c를 클릭하면 c와 b와 a가 출력된다. 즉 자식요소에서 발생된 이벤트는 자식에서 부모로 또 그 부모로 계속 전파되는것이 이벤트 버블링이다. 이벤트 버블링 해결법 stopPropagation() const a = document.querySelector('.a'); const b = document.querySelector('.b'); const c = document.querySelector('.c'); a.addEventListener('click',function(){ cons..

JAVA SCRIPT 2022. 6. 9. 01:24

https://hyunu0504.github.io/blog5/ 눈 hyunu0504.github.io 티스토리에 코드블럭이랑 구분선이 있는지 처음 알았다 HTML CSS body { margin: 0; /* 여백 제거 */ background-color: rgba(0, 0, 0, 0.855); /* 배경 */ overflow: hidden; /* 드래그바 삭제 */ } .snow { background-color: white; /* 배경 */ border-radius: 50%; /* 테두리 둥글게 */ width: 8px; /* 가로 */ height: 8px; /* 세로 */ animation-name: sn; /* 키프레임 id */ animation-duration: 5s; /* n초에 걸쳐서 실행..

JAVA SCRIPT 2022. 6. 8. 00:48

Math.radom() 무작위 값을 받는 Math.random() Math.random()만 사용하면 소수값이 출력된다. 값이 필요한 만큼 * n 해준다. Math.floor()로 내림해서 소수값을 받지 않는다. 뒤에 +1을 해주면 0의 값은 안받을 수 있다. Math.min(), Math.max() 인자로 받는 값중에 가장 작은 값을 출력해주는 Math.min() 인자로 받는 값중에 가장 큰 값을 출력해주는 Math.max() 배열을 인자로 받으려면 ...로 괄호를 제거해서 사용 Math.abs() 절대값으로 출력해주는 Math.abs() Math.pow() 인자를 2개 받고 제곱값 출력해주는 Math.pow( a, b ) a의 b제곱 Math.sqrt() 제곱근의 값을 출력해주는 Math.sqrt( )

JAVA SCRIPT 2022. 6. 7. 18:47

Math.ceil(), Math.floor() 소수점에 값이 있으면 무조건 올림하는 Math.ceil 소수점에 값이 있으면 무조건 내림하는 Math.floor Math.round() 1의자리 정수까지 반올림 해준다. Math.round()로 정수자리 반올림 round로 정수자리까지 반올림하려면 Math.round( 변수명 * n ) / n 0.1 = 십의자리 0.01 = 백의자리 0.001 = 천의자리 .... Math.round()로 소수자리 반올림 round로 소수자리까지 반올림하려면 Math.round( 변수명 * n ) / n 10 = 소수 첫째자리 100 = 소수 둘째자리 1000 = 소수 셋째자리 ....

JAVA SCRIPT 2022. 6. 6. 18:25

toFixed() Math.round와 같이 반올림해주는 toFixed( n ) 그런데 toFixed()를 사용해서 반올림하게되면 반환하는 값이 문자열로 변경된다. toFiexd를 사용해서 나온값에 typeof로 확인해보면 string이 출력된다, Number()를 사용해서 숫자열로 다시 변경해주면 된다. isNaN() NaN인지 불리언값으로 출력해주는 isNaN() 숫자로 변환할 수 없는 값을 숫자로 변환할때 NaN이 된다. NaN은 NaN을 등호 ==, ===를 사용해서 비교 할 수가 없다. 그럴때 isNaN()으로 비교 할 수 잇다. 문자열을 가진 count변수에 Number로 숫자열로 변경하려고 해서 값이 NaN이 됐다. count라는 변수의 값은 NaN인데 등호 == , === 를 해서 비교해봐..

JAVA SCRIPT 2022. 6. 5. 13:37

toUpperCase(), toLowerCase() 문자열을 대문자로 변경해주는 toUpperCase() 소문자로 변경해주는 toLowerCase() 원래의 배열에는 영향 x substring() substring( a, b ) slice()랑 차이점은 음수를 인식하지 못하고 a와 b의 위치를 바꿔도 동일하게 동작한다. a부터 b사이의 문자열을 반환 substr() substr( a, b ) a는 시작점 b는 갯수를 뜻한다 위에서 substr( 4 ,2 )는 4번째 인덱스부터 2개를 반환하는값 trim() 맨 앞 맨 뒤 공백을 없애준다 repeat() repeat( n ) 문자열을 n번 반복해준다

JAVA SCRIPT 2022. 6. 5. 01:27