FrontEnd/JavaScript

JS 데이터 타입 Number : 숫자, 콘솔 상 보라색 String : 문자, 콘솔 상 검은색 Boolean : 논리, 콘솔 상 파란색 Object : 객체, {객체} {키1:밸류1, 키2:밸류2, ...} Array : 배열 [배열요소1, 배열요소2, ...] Null : null값 (참조 대상이 없음을 나타내는 키워드) undefined : 정의되어 있지 않은 상태를 표현하는 키워드 NaN : Not a Number (숫자가 아닙니다. 라고 나타내는 키워드이지만 Number 타입이다.) Number 타입으로 값이 인식되어야하는 시점에 Number가 아닌 데이터를 사용한 경우 리턴되는 특수한 값 Infinity : 무한대, Number 타입의 특수한 값(키워드) 양의 무한대를 나타내는 키워드 특정 숫..

Transition 속성 속성을 서서히 변화시키는 속성 아래 네가지 속성을 한번에 적용하는 속성이다. Transition-property transition 이 적용될 CSS를 지정한다 none: 적용안함 all: 모든 속성 CSS property: 해당 속성만 적용 Transition-duration 속성의 변화가 진행되는 시간을 지정한다 시간 단위로 s또는 ms를 사용한다. Transition-delay 속성의 변화가 시작되는 시점을 지연시키는 속성 시간 단위로 s또는 ms를 사용한다. Transition-timing-function 속성의 변화가 진행되는 속도를 조절하는 속성 기본값: ease (천천히 시작해서 보통속도 진행 후 천천히 마무리) linear: 항상 일정한 속도

자바스크립트, JavaScript HTML 문서에서 동작을 제어하는 언어 Button 을 클릭했을 때 발생하는 이벤트 처리(Event Listener) Form에 입력한 값이 적절한 지 판단하기(Validation) HTML 문서의 head 태그에 script 태그를 작성하여 자바스크립트 코드를 작성하여 사용한다. 브라우저의 자바스크립트 엔진에 의해 인터프리트방식으로 동작한다. 자바스크립트 파일(.js)을 HTML 문서에서 로드해서 사용하기도 한다. 자바스크립트 코드는 브라우저에게 전달되어야 실행된다. 민감한 정보나 핵심코드를 입력해서는 안된다. Javascript는 에러가 나게되면 남은 아래쪽 코드는 일절 수행하지 않는다.

DOM, Document Object Model 문서 객체 모델 document 객체를 통해 관리된다. document 객체는 window 객체의 내장 객체 중 하나 HTML 문서의 body 태그의 내용 요소들을 다룰 수 있다. 자바스크립트 코드로 HTML 문서의 요소(태그)들에 접근하고 관리할 수 있게 해주는 객체 모델 DOM 관련 용어 요소 (Element) HTML 문서 내의 태그 문서 객체(Document Object) 자바스크립트 코드를 이용하여 요소에 접근할 수 있도록 객체화한 것 HTML요소와 자바 스크립트코드의 연결 지점(인터페이스) DOM 트리(tree) 모든 문서 객체들을 트리구조로 표현한 것 모든 요소들을 계층적 구조인 트리 구조로 저장해둔 것 노드(Node) DOM 트리의 구성 요소..

DOM 객체 함수, DOM API Node 생성 document.createElement("tagName") 요소노드 만들기 ** HTML 표준 태그가 아니어도 생성된다. h1, h2 등 표준태그가 아닌 test 같은걸 넣어도 생성된다. document.createTextNode("Text") 텍스트 노드 만들기 Node 추가 DOM객체.appendChild(대상객체) DOM 객체에 대상객체를 연결한다(자식으로 추가해준다) ex) var pTag = document.createElement("p") : p태그 요소 생성 document.body.appendChild(pTag) : body 태그에 pTag 요소 추가 ** document.body 와 body 태그는 똑같다. ex2) var div = do..

JS Event 처리코드 작성(등록)하는 방법 이벤트(Event)가 발생하면 해당 이벤트에 알맞은 동작을 수행할 수 있도록 코드를 작성해둬야한다. 이벤트 처리코드 == 이벤트 핸들러(handler) == 이벤트 리스너(Event Listener) 이벤트가 발생했을 때 그 상황에 맞춰 동작할 코드 HTML 태그의 이벤트 속성을 이용한 인라인 방식으로 등록하기 button onclick="alert('clicked')"> div onmousemove="console.log('moved')"> DOM을 이용한 이벤트 리스너 바인딩 - 1 (Event Attribute 사용) button id="btnOk"> 라고 하면, script 태그를 이용하여 btnOk.onclick = fu..

자바스크립트에서 제공하는 기본 대화상자 alert 확인버튼과 메세지를 출력하는 Alert 창, 주로 확인용으로 사용된다. 확인 버튼과 메세지를 출력하는 Alert 창 confirm 확인버튼, 취소버튼, 메세지가 들어가는 Confirm 창 반환값이 Boolean 타입이다 확인, 취소 두가지와 메세지가 들어가는 Confirm 창 (반환값이 Boolean 타입이다. True(확인) Or False(취소)) prompt 확인버튼, 취소버튼, 메세지, 텍스트필드가 들어가는 Prompt 창 확인, 취소 두가지와 텍스트필드, 메세지가 들어가는 Prompt 창

MDN 자바스크립트 레퍼런스 참고하기 자동 형변환 Number + Sting -> Sting ex) 123 + "Hello" -> "123Hello" Boolean + String -> String ex) true + "Hi" -> "trueHi" Boolean + Number -> Number ex) true + 5 -> 6 true + true +5 -> 7 (true == 1, false== 0) 강제 형변환 /// 문자 -> 숫자 parseInt( "숫자형태" ) parseFloat ( "숫자형태" ) Number( "숫자형태" ) /// 숫자 -> 문자 String( 숫자 ) 숫자데이터.toString(n) 숫자데이터.toFixed(n) // Number 파랑 console.log(50); //..