닭발에서 개발까지

preventDefault 란? a 태그나 submit 태그는 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행됩니다. preventDefault 를 통해 이러한 동작을 막아줄 수 있습니다. 주로 사용되는 경우는 1. a 태그를 눌렀을때도 href 링크로 이동하지 않게 할 경우 2. form 안에 submit 역할을 하는 버튼을 눌렀어도 새로 실행하지 않게 하고싶을 경우 (submit은 작동됨) 1번은 직관적이니까 예시는 생략하고 2번을 예시로 들자면 예시 이러한 구구단의 정답을 받는 form 이 있고, 거기에 EventListener 를 추가해주었습니다. 정답 form 밑에는 resultDiv 가 있어서 정답 여부를 출력하게끔 하였습니다. 이 함수를 실행하면 밑에 정답! 혹은 땡! 이..

Study/JS 2020. 7. 16. 19:00

삼항 조건 연산자 삼항 조건 연산자는 자바스크립트에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 보통 if문의 단축 형태로 쓰입니다. 기본형 조건식 ? 실행문1 : 실행문2; 조건식의 값이 true면 실행문 1을 실행하고, false면 실행문 2를 실행합니다.

Study/JS 2020. 7. 16. 18:58

자바스크립트를 이용하여 문서에 HTML 요소를 추가할 수 있습니다. 이 때 필요한 자바스크립트 속성은 다음과 같습니다. .createElement() .createTextNode() .appendChild() .createElement()는 요소를 만듭니다. 예를 들어 .createElement( 'h1' ) 은 다음과 같은 코드를 생성합니다. .createTextNode()는 선택한 요소에 텍스트를 추가합니다. 예를 들어 .createTextNode( 'My Text' ) 는 My Text라는 문자열을 만듭니다. .appendChild()는 선택한 요소 안에 자식 요소를 추가합니다. 다음은 Click이라는 텍스트를 가진 button 요소를 추가하는 예제입니다. 각 줄의 의미는 다음과 같습니다. var ..

Study/JS 2020. 7. 16. 18:52

See the Pen abdaRVX by JungSungHun (@JungSungHun) on CodePen. add() // class 이름을 추가 remove() // class 이름을 삭제 toggle() // class 값이 있는지 체크하고 없으면 추가, 있으면 제거한다. item(index) // 해당 위치의 클래스를 반환 contains() // 포함된 여부를 확인가능 replace(old, new) // 클래스명을 바꾸기

Study/JS 2020. 7. 15. 20:18

자바스크립트로 주기적인 작업을 실행하기 위해서 setInterval과 setTimeout 메소드를 사용할 수 있습니다. 두 가지는 비숫하지만 중요한 차이점을 가집니다. - setInterval 함수 : 일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다.clearInterval 함수를 사용하여 중지할 수 있습니다. 주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있습니다. - setTimeout 함수 : 일정한 시간 후에 작업을 한번 실행합니다. 보통 재귀적 호출을 사용하여 작업을 반복합니다. 기본적으로 setInterval 과는 달리 지정된 시간을 기다린후 작업을 수행하고, 다시 일정한 시간을 기다린후 작업을 수행하는 방식입니다. 지정된 시간 사이..

Study/JS 2020. 7. 14. 18:52

웹에서 성장하였으며 클래스 개념이 없는 언어로 일급함수를 사용할 수 있으며 동적 언어입니다. 이벤트 중심(event-driven)의 프로그래밍 언어 인터프리터 언어(클라이언트의 웹 브라우저에 의해 해석되고 실행) HTML 문서 내에 기술되어지고 HTML 문서와 함께 수행되어지는 언어 웹 문서(HTML)에 삽입해서 사용하는 스크립트 언어 웹 브라우저에서 웹 문서를 실할 때 프로그램 코드가 해석됩니다. 컴파일 과정을 거치지 않는 인터프리터 언어 형태이기 때문에 비교적 자료형 조사를 철저하게 하지 않습니다. 객체 지향적 특성을 모두 가지고 있다고 말할 수는 없지만 객체를 정의하여 사용 할 수는 있습니다(객체기반의 언어) 자바스크립트는 프로토타입 기반의 언어 HTML에 연산, 제어 등 프로그래밍적 요소를 만들고..

Study/JS 2020. 6. 3. 21:16