자바스크립트 15

소수점 숫자 연산시 주의사항

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

자바스크립트 2022.10.19

애니매이션 만드는 법

애니매이션은 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..

자바스크립트 2022.10.08

외부문서를 연결해주는 <link>

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

자바스크립트 2022.10.07

소수 문제

- 소수 여부 판별 방법 // 매개변수 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

자바스크립트 2022.09.23

event 설정

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

자바스크립트 2022.09.08

document.getElementBy~ 알아보기

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

자바스크립트 2022.09.08

분기문 break; continue;

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

자바스크립트 2022.09.01

기타 개념

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

자바스크립트 2022.08.23

e 02-3 주사위 게임 만들기, 소수 출력하기

주사위 게임 만들기 var dice = Math.floor( Math.random() * 6 ) + 1; 왜 6을 곱하나? 왜 1을 더하나? 랜덤 출력이 대략 (0.01~0.9) 까지 나옴 0~9(랜덤숫자 소수점 첫째자리) 를 곱했을때, 십의 자리에 6개 숫자가 나와야함.주사위 숫자가 6개이므로. 5단) 0~4 까지밖에 안나옴 -> 5개 (부족함) 6단) 0~5 까지 나옴 -> 6개 --> 1씩만더해주면 주사위숫자 가능! 7단) 0~6 까지 나옴 -> 7개 (과함) 대신...1,3,6이 나올 확률이 적을것 같다. 형평성 문제.. 다른 방법은 없는지? 소수 출력하기 (소수 : 1과 자기 자신으로만 나누어 떨어지는 수) 1로 나누어떨어짐 -> O (자신보다 작은)그 사이 숫자 나누어떨어짐 -> X 자기자신으..

자바스크립트 2022.08.23