써니스크립트 글쓰기

이벤트 버블링이벤트가 발생했을 때 가장 안쪽 타겟요소에서부터 시작해서 부모요소로 거슬러올라가며 전파되는 단계.브라우저의 기본 이벤트 전파 방식.타깃리스너 실행 이후 전파된다.버튼 ✅"click" 이후, ↑document> ↑ *addEventListener("click", ~) 가 부착되어있다면, (event.currentTarget) ↑ ↑ (event.target)활용- 이벤트 위임부모 요소에 리스너를 한번만 등록해두면 자식요소의 이벤트 클릭을 감지할 수 있다.-> 부모 요소 안에 이벤트를 감지해야하는 자식요소가 동적으로 여러개 생기는 경우 효과적 (ex. 태그 안의 들)function attachTodoListEvents() { const todoList = document...

컴퓨터 : 10진법 숫자 연산 -> 2진법 변환해서 이해 하고 연산 진행 -> 결과를 다시 10진법으로 바꿈. 소수점은 2진법 변환 시 숫자가 무한히 반복된다. 저장장치의 한계로 일정 자릿수에서 반올림해서 저장되기 때문에 소숫점 연산을 하게 되면 작은 오차가 존재할 수 밖에 없다. ​ 이 오차를 없애는 방법 각 숫자에 10을 곱해서 정수로 만들고 연산 한 뒤, 10을 나눈다. 소수점 연산 라이브러리 사용 반올림 사용 .toFixed() 숫자 .toFixed( 자릿수 ) --> 주의! 문자로 변환됨. 숫자로 재변환 필요 Number() 또는 parseInt(), parseFloat()

애니매이션은 CSS로 처리하는것이 자바스크립트로 하는것 보다 성능적으로 좋음 one-way 애니매이션 1) 시작시 스타일 설정 (CSS) - 안보이는상태 -> 보이는상태의 애니매이션을 원한다면 display : none; 대신 visibility : hidden; 으로 설정해야함. 2) 종료시 스타일 설정 (CSS) display : block; 대신 visibility : visible; 으로 설정해야함. 3) 언제 종료 스타일로 변할지 코드 작성 (JS) ex) 버튼누르면, 종료스타일 추가( .classList.add( '종료스타일' ) ) 4) transition 추가 (CSS) 시작 스타일에 transition 속성 추가 ex) transition : all 1s; 더보기 https://sunny..

CSS파일이나 JS파일을 연결해올 때 아래와 같이 사용하는 link 태그 - 태그는 사이에 기재한다. 갯수 제한 X - link 태그에 쓰이는 속성들 rel(필수속성) 현재 문서와 연결할 리소스와의 관계. stylesheet : 스타일시트로 연결할때. (가장 많이 쓰임) alternate : 현재 문서의 대체버전에 대한 링크로 연결할 때.(ex.번역페이지, 프린트페이지 등) author : 현재 문서의 저자에 대한 링크로 연결할 때. help : 도움말 문서를 연결할 때. license : 저작권 정보 관련 문서로 연결할 때 ...등등 추가 참고 ) http://www.tcpschool.com/html-tag-attrs/link-rel herf 연결될 외부 리소스의 주소(절대주소, 상대주소 둘다 가능함)..

- 소수 여부 판별 방법 // 매개변수 n이 소수라면 true를, 소수가 아니라면 false를 반환 isPrime(n) { //나누는 숫자는 2부터 시작 let divnum = 2; //1은 소수가 아님 if (n == 1) { return false; } //n보다 작은걸로 나누는데 나누어떨어지면 false while(n > divnum) { if(n % divnum === 0) { return false; } else { divnum++ ; } } //관문을 다 거치고도 살아남았다면 소수! return true; } - 소수의 합 구하기 (var버전) //소수들을 더해야 하니 0부터 더해나가자 var result = 0; // 1부터 200까지의 자연수 for(var num = 1; num

Math.random() 0~1사이의 랜덤 실수 Math.random()*n 에 - Math.floor 을 적용하면, 0 ~ n-1 까지의 정수 => ( 배열 인덱스에 적용하기 좋음 ) - Math.ceil 을 적용하면, 1 ~ n 까지의 정수 - Math.round를 적용하면, 0 ~ n 까지의 정수

태그.onclick = 함수이름; 같은역할 태그.addEventListener("click", 함수이름); ->아래 방식으로 이벤트를 넣어주면 .removeEventListener =>으로 이벤트 지울 수 있음 클래스명으로 자바스크립트 변화를 주고싶을때 클래스명 잘 활용하기 태그.classList.contains("클래스명") => ()속 클래스명이 있는지 확인.true / false 반환 태그.classList.add("클래스명") => 원래 할당된 클래스명 + 새로운 ()속 클래스명 추가 태그.classList.remove("클래스명") =>()속 클래스명 제거 ==> 태그.classList.toggle("클래스명") 한줄이면 끝남! ()속 클래스명이 있으면 없애고 없으면 추가하고! CSS에 클래스명..

document.getElementBy~ - getElementById("id명") => 해당 id를 가진 요소가 불려짐 console.dir( document.getElementById("id명") ) => 해당 id를 가진 요소의 속성(상세정보)들이 불려짐 *[콘솔 오류메세지] Uncaught TypeError : Cannot set property '@@@' of ~~ null @@@의 값이 null이라 속성을 지정할수 없다. => id명 class명을 바르게 호출했는지 살펴보자. - getElementsByClassName("class명") => 해당 클래스이름을 가진 요소들의 속성이 배열에 담겨져서 불려짐 - getElementsByTagName("태그명") => 해당 태그로 지정된 요소들이 배..

반목문의 내부에 사용되어 반복문의 반복여부를 결정함. break; 자신이 포함된 가장 가까운 반복문을 빠져나가는 구문. 반복문 속의 조건문에서 사용. switch문에서도 사용 가능 *) return; 과 break; 차이점. 자바스크립트의 함수 속의 return은 값의 반환뿐만 아니라 exit의 기능도 하기 때문에 return 과 동시에 함수가 끝남. break;는 반복문만 탈출하고 상위내용 이어서 진행 continue; 반복문 안(의 조건문)에서만 사용가능한 구문. 반복문 실행 중 continue 아래 부분은 실행하지 않고 반복문 다시 실행. for문 안에 있을때는 증감식으로 이동. while문 안에 있을 때는 조건식으로 이동. ( -> 그래서 증감식을 continue 전에 기재함.) 증감은 하고싶지만..

\ 역슬래시 기호 그 뒤에 따라 오는 문자가 특수하게 처리되어야 한다는 것을 나타내며 종종 탈출 문자라고도 한다. 보여주고 싶은 문자 앞에 사용함. - 특수 문자를 보여주기 위해 사용된다. - 그러나 공백 앞에 쓰일 때는 그냥 문자로 쓰인다. - "를 표현하기 위해 \"를 사용한다. += 변수에 더한값을 다시 변수에 저장 num = num+3 -> num += 3 =+ 라는 연산자는 없다. 그저 num = (+3) (양수3) 을 적은 것 같은 의미가 된다. 순서 안바뀌게 조심!! typeof typeof 변수 또는 typeof(변수) 의 형태로 사용함. typeof 다음에 위치하게 되는 변수나 값이 어떤 타입(Type)의 데이터인지 문자열로 나타낸다. 1. string 2. number 3. boolea..