자바스크립트
-
자바스크립트 시계 만들기Let's Code/JavaScript 2021. 3. 16. 23:46
DOM HTML의 모든 컨텐츠를 웹 브라우저의 메모리 상에 올려 자바스크립트로 접근하기 위해 DOM 문서를 사용한다. HTML의 모든 태그를 자바스크립트에서 객체로 불러올 수 있다. 요소 접근 메서드 document.getElementById(""): document는 가장 포괄적인 범위로, HTML 전 문서를 탐색하여 ""사이 들어가는 Id 요소를 호출한다. document.querySelector(""): 특정 태그, 또는 .가 붙을 경우 클래스, #가 붙을 경우 ID 요소를 호출한다. 요소 변환 메서드 요소.innerHTML = 을 통해 해당 요소 내 값을 재할당할 수 있다. 날짜 호출 메서드 Date()은 달, 날짜, 요일, 시간, 분, 초 등 시간과 관련된 모든 요소를 호출한다. date.get..
-
자바스크립트: 객체의 기본Let's Code/JavaScript 2021. 3. 10. 17:30
객체의 기본 - 자바스크립트의 8가지 자료형은 '객체형' (객체)와 '원시형primitive type' (나머지 7)로 구분할 수 있다. 원시형은 한 가지 데이터 타입만, 객체형은 다양한 데이터 타입을 저장할 수 있다. - 객체 문법: { 키Key: 값Value, 키2: 값2 } // 여기서 키: 값의 한 쌍이 프로퍼티Property. 키 (또는 프로퍼티 이름이나 식별자)에는 문자형만 허용되지만 값에는 제한 없음. - 객체 생성법: 1) '객체 생성자' 문법 2) '객체 리터럴' 문법 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 - 프로퍼티 접근: 점 표기법(dot notation)을 사용하여 프로퍼티 값만 호출 또는 특정 ..
-
자바스크립트: If, While, For, SwitchLet's Code/JavaScript 2021. 3. 6. 21:12
모던자바스크립트 2.10 ~ 2.14 (https://ko.javascript.info/first-steps) If문 (If statement) - 조건에 따라 다른 행동을 취할 때 사용하며, 괄호 안의 결과가 true일 경우만 동작을 실행한다. - if 문 후 ( ) 안에 조건을, { } 안에 실행할 동작을 쓴다. (동작이 하나일 경우 {}를 쓰지 않아도 되지만 가독성이 하락한다.) - If 문의 ( ) 는 값을 불린형으로 반환한다. - False일 경우 행동을 별도로 지정해주고 싶다면 else, 조건문을 nest하고 싶으면 else if를 사용한다. if (year == 2015) { alert( "정답! 와아~~" ); } 조건부 연산자 ? (Conditional operator) - 조건부 연산자..
-
자바스크립트의 기본 연산자Let's Code/JavaScript 2021. 3. 6. 19:34
모던자바스크립트 2.7 ~ 2.9 (ko.javascript.info/first-steps) 형 변환 형 변환(Type Conversion): 적절한 자료형으로 자동으로 변환하는 과정 - alert 메서드는 자동으로 전달받은 값을 문자형(string)으로 변환 - 수학 연산자 (+, -, *, /)는 자동으로 값을 숫자형으로 변환하여 계산: 이 때 null은 0, boolean은 0 혹은 1, 숫자 이외의 값이 포함된 string 혹은 undefined의 경우 NaN으로 변환 - 논리 연산은 자동으로 값을 불린형으로 변환하여 연산을 수행: 0/빈 문자열/null/undefined/NaN 외엔 모두 true ("0"도 true) 기본 산술 연산자 - 피연산자(operand): 연산이 수행되는 대상, 인수(..
-
자바스크립트 모달 팝업 띄우기Let's Code/JavaScript 2021. 2. 28. 19:27
Alert 함수 Alert 함수는 텍스트와 OK 버튼으로 구성된 modal 팝업을 띄운다. 유저는 OK 버튼으로 팝업을 종료할 수 있다. (이렇게 유저가 해당 팝업을 처리한 다음에야 나머지 웹페이지 기능을 사용할 수 있는 팝업을 modal window라고 부른다.) Prompt 함수 result = prompt(title, [default]); Prompt 함수는 특정 텍스트와 유저가 문자열을 입력할 수 있는 창이 있는 modal 팝업을 띄운다. 첫 번째 파라미터는 팝업 안에 표시되는 텍스트 메시지이며, 두 번째 파라미터는 유저가 아무것도 입력하지 않았을 경우의 디폴트 값을 결정한다. 이 때, 유저가 특정한 값을 입력하면 텍스트로 결과값이 처리되며, 입력하지 않았을 경우 null 타입으로 처리된다. (*..
-
자바스크립트 자료형과 TypeofLet's Code/JavaScript 2021. 2. 28. 18:53
동적 형식 (Dynamic data type) 자바스크립트에는 8개의 자료형(Data type)이 있으며, 변수에 한 자료형이 지정된 후 다른 자료형의 값으로 변경할 수 있다. 이를 동적 형식 (Dynamic Data Type)이라 지칭한다. 자료형 1) 숫자(Number): 자연수(integer)와 소수(floats)를 모두 포함한다. * (곱셈), / (나눗셈), + (덧셈), - (뺄셈)과 같은 연산자를 사용할 수 있다. Infinity(무한대), -Infinity(음의 무한대), NaN(컴퓨터 연산 오류)과 같은 특별한 숫자도 Number에 포함된다. 자바스크립트 내 수학 연산은 "안전safe"한데, 이는 아무리 불가능한 연산이라고 해도 NaN으로 처리될 뿐 스크립트를 정지시키지 않는다는 뜻이다...
-
자바스크립트 변수 선언까지Let's Code/JavaScript 2021. 2. 14. 22:32
태그 안에 위치한다. 만약 script에 type이나 language와 같은 속성이 붙는다면 과거에 만들어진 코드라는 뜻. (현재는 자바스크립트가 디폴트 언어이므로 쓰이지 않는다.) src 속성으로 저장된 자바스크립트 파일을 불러올 수 있다. (src 속성을 사용할 경우 해당 태그 안에 작성된 코드는 자동으로 무시되므로, html 안에 코드를 직접 작성하고 싶으면 src 속성이 지정되지 않은 별도 태그를 작성해야 한다.) 마찬가지 원리로, 여러 태그를 사용하면 여러 파일을 불러올 수 있다. Javascript 파일을 별도로 저장할 때 장점 Javascript를 .js 파일로 별도로 저장하여 불러올 경우, 브라우저는 그 파일을 캐시로 저장한다. 따라서 같은 웹사이트에 접속했을 때, 더 빠르게 홈페이지의 기..