목록Javascript (7)
minstory
Events 살펴보기 const title = document.querySelector('h1'); console.dir(title); console.dir 결과값으로 properties를 볼 수 있는데, 이 중에 on-으로 시작하는 것들이 사용가능한 events이다. Events 넣는 두가지 방법 title.addEventListener('click', handleTitleClick); //removeEventListener 사용 가능 title.onclick = handleTitleClick; //동일한 이벤트에 대해 여러개 콜백함수 지정 불가능 *window events 구글링하는 방법: 'window web api mdn' 검색
String Number Boolean Null : 변수에 값은 주어졌는데, 그 값은 '아무것도 없음'이다. *never happens automatically (비어있다는 것을 의도적으로 표현함) Undefined : 변수는 만들어졌지만 값이 주어지지 않음. (컴퓨터 메모리는 존재) const name = null; console.log(name); -> null const something; console.log(something); -> undefined Truthy & Falsy
함수 정의문 //기본형 function 함수명() { 코드; } //익명함수 선언 & 변수에 참조 참조 변수 = function() { 코드; } * 일반 함수 정의 vs 익명 함수 선언 참조 일반함수정의는 호이스팅(hoisting) 기술을 지원한다. 호이스팅 : 함수 정의문보다 호출문이 먼저 나와도 함수 정의문을 끌어올려 함수를 호출 testFnc(); function testFnc() { 코드; } --- 크게 3가지 함수 형태가 있다 --- 기본형 함수 매개변수가 있는 함수 (인자로 배열을 받을 수 있다) 매개변수가 없는 상태에서 데이터를 인자로 전달하여 함수 호출 -> arguments로 참조함 (기명/익명) return문 : 이후에 코드가 있더라도 결괏값을 반환하고 함수 강제 종료 이전 다음 유..
객체의 구성요소 속성(Property) 기능(Method) 자바스크립트의 객체 : 내장객체, 브라우저 객체 모델, 문서 객체 모델 내장객체 : 브라우저의 자바스크립트 엔진에 내장된 객체 필요 시 객체를 생성해서 사용 가능 -> 문자(String), 날짜(Date), 배열(Array), 수학(Math), 정규표현객체(RegExp Object) 등 브라우저 객체 모델 (BOM) : 브라우저에 계층 구조로 내장되어 있는 객체 브라우저 객체 - window )) location, document, screen, history, navigator 등 문서 객체 모델 (DOM) : HTML 문서 구조 HTML의 모든 요소들을 문서 객체로 선택하여 자유롭게 속성을 바꾸고, 원하는 스타일(CSS)을 적용할 수도 있다...
연산자 문자 결합 연산자) 숫자형과 문자형이 섞이면 문자형 데이터로 저장됨. var result; result = "가나다" + 123; // 가나다 123 //str을 출력하면 문자가 아닌 태그로 인식되어 표가 출력된다. A===B 비교할 때 표기된 숫자과 자료형 모두 같아야 함 A!==B 조건연산자 (조건) ? a : b; 조건이 참이면 a 수행, 거짓이면 b 수행 ex) var result = a>b >? "it's true" : "it's false" ;
onclick과 같은 이벤트 안에서 실행되는 코드에서는 현재 코드가 속해 있는 태그를 가리키도록 약속돼 있는 특수한 키워드를 사용한다. -> this 키워드 변수 사용 var target = document.querySelector('body'); ↓ refectoring
Javascript : 정적인 웹 문서에 동작을 부여한다. 특징) 객체 기반 언어 최근에 등장한 다양한 라이브러리 : JQuery, Angular JS, React JS, Node JS, PhoneGap ...etc 이전에는 클라이언트 컴퓨터에서만 작동하는 언어였으나, Node JS를 사용할 경우 백엔드 언어와 같이 서버에서도 작동한다. 생활코딩) HTML vs Javascript HTML : 시간 순서에 따라 실행할 필요 없음 -> "프로그래밍언어"라고 하지 않음 Javascript : 시간 순서에 따라 웹 브라우저의 여러 기능이 실행돼야 함 -> "프로그래밍언어" 자료형 자동변환 변수에 저장된 값을 바꾸면 변수의 자료형이 자동으로 변환된다. test = 10; --> test는 정수형 test = "..