본문 바로가기

programming study/JavaScript

 (186)
[코드잇] 인터랙티브 자바스크립트 (3) (2021.2.23) 본 내용은 해당 강의 토대로 작성 이벤트 살펴보기 01. 이벤트 핸들러 등록하기 onclick 프로퍼티는 여러개의 이벤트 핸들러를 다룰 수 없다. 복잡한 로직을 다루기 어렵다. addEventListener 메소드 element.addEventListener(event, handler); 하나의 요소에 여러 독립적인 이벤트 핸들러를 등록할 수 있다. 첫 번째 파라미터 : 이벤트 타입 문자열 두 번째 파라미터 : 이벤트 핸들러 외부에서 함수를 만들고 그 함수명을 전달해야 한다. 함수 이름만 전달해야 한다(소괄호 생략) removveEventListener 메소드 element.removeEventListener(event, handler); 이벤트 핸들러를 제거할 수 있다. 첫 번째 파라미터: 이벤트 타입..
[코드잇] 인터랙티브 자바스크립트 (2) (2021.2.22) 본 내용은 해당 강의 토대로 작성 브라우저와 자바스크립트 01. 브라우저 브라우저 또한 객체이다. window : 브라우저의 창 window 브라우저의 창을 나타내는 객체 JavaScript에서의 최상단에 존재하는 객체 window 객체가 JavaScript의 모든 객체를 포함 내장 객체, 내장 함수 JavaScript의 어느곳에서나 항상 접근할 수 있다. 내장 객체, 내장 함수에 접근시 본래 window.를 써야하지만 생략 가능하다. 전역 객체 (global object) 프로퍼티에 접근하여 브라우저를 자유롭게 제어할 수 있다. window.innerWidth, window.innerHeight : 창의 너비와 높이 document 객체 console 객체 메소드 또한 존재한다. window.open(..
[코드잇] 인터랙티브 자바스크립트 (1) (2021.2.20) 본 내용은 해당 강의 토대로 작성 인터랙티브 자바스크립트 시작하기 01. 웹 서비스와 JavaScript 웹 서비스의 중심에서 다양한 분야에서 사용되는 프로그래밍 언어 웹 페이지의 여러요소들을 자유롭게 다루기 위해 등장 HTML로 구조 -> CSS로 꾸미기 -> JavaScript로 동작하기 사용자의 입력값을 받아 정보를 처리 02. HTML/CSS + JavaScript HTML/CSS는 처음의 모습에서 변화를 주기 어렵다 JavaScript를 이용하면, 실시간으로 HTML을 변화시키거나 스타일을 수정하는 것이 가능하다. 03. id로 태그 선택하기 document.getElementById('id'); document: 객체 getElementById(): 해당 id값(파라미터)을 가진 태그 선택하는..
[코드잇] 프로그래밍과 데이터 in JavaScript (3)(2021.2.16) 본 내용은 해당 강의 토대로 작성 자료형 심화 01. 다양한 숫자 표기법 지수 표기법 단위가 큰 정수, 자릿수가 많은 소수를 표현 알파벳 e 이용 e를 기준으로 왼쪽의 수에 오른쪽의 수만큼 10의 거듭제곱을 곱한다. 오른쪽의 수가 음수인 경우, 그만큼 10의 거듭제곱을 나눈다. let myNumber1 = 1e9; let myNumber2 = 16e-5; console.log(myNumber1); // 1000000000 console.log(myNumber2); // 0.00016 16진법, 8진법, 2진법 console.log로 출력 시 10진법 표기로 출력된다. 16진법 (Hexadecimal) let hex1 = 0xff; // 255 let hex2 = 0xFF; // 255 8진법 (Octal..
[코드잇] 프로그래밍과 데이터 in JavaScript (2)(2021.2.16) 본 내용은 해당 강의 토대로 작성 배열 01. 배열 (Array) 순서가 있는 여러값의 묶음 요소(element) : 배열을 이루는 각각의 값 Property Name이 필요없이 순서있는 데이터를 나열하는 경우 ley arrayName = [ 'element1', 'element2' ] index 각 요소별로 숫자 값이 매겨진다. 객체의 Property Name과 비슷한 역할 0 부터 센다. 배열의 요소 가져오기 인덱싱 arrayName[index]; 02. 배열 다루기 배열 또한 객체이다. 다양한 프로퍼티와 메소드가 있다. length 프로퍼티 배열의 요소 총 개수를 표시해준다. let myArray = ['a', 'b', 'c', 'd']; console.log(myArray.length); // 4..
[코드잇] 프로그래밍과 데이터 in JavaScript (1)(2021.2.15) 본 내용은 해당 강의 토대로 작성 객체 01. 객체와 프로퍼티 객체 (Object) 여러가지 값을 한 번에 저장할 수 있다. 객체 만들기 let object = { key1 : value1, key2 : value2 } 속성(Property) key와 value의 한 쌍 key : Property Name value : Property Value Property Value 안에 모든 자료형이 들어갈 수 있다. Property Name 주의 사항 원칙적으로 따옴표를 붙어야 하지만 붙이지 않아도 JavaScript에서 문자열로 형변환 첫 글자는 반드시 문자, 밑줄(_), 달러 기호($) 중 하나로 시작 띄어쓰기 금지 하이픈(-) 금지 불가피하게 규칙을 어기는 경우, 따옴표를 붙인다. 03. 객체에서 데이터 ..
[코드잇] 프로그래밍 핵심 개념 in JavaScript (3)(2021.2.13) 본 내용은 해당 강의 토대로 작성 제어문 01. if문 특별한 조건에 따라 코드를 실행 else:if문의 조건을 충족하지 않을 경우 실행하는 코드 if (조건부분) { ​ 동작부분 } else { ​ 동작부분 } 02. else if 문 두 가지 이상의 선택지가 필요한 경우 사용 if (조건부분) { ​ 동작부분 } else if (조건부분) { ​ 동작부분 } else { ​ 동작부분 } 03. switch문 어떤 값을 입력했는지에따라 다르게 동작한다. 비교할 값과 조건값이 일치할 때 동작부분을 수행한다. break를 만나기 전까지 모든 동작을 실행한다. default : 비교할 값이 모든 조건값과 일치하지 않을 때 수행 (생략가능) switch (비교할_값) { ​ case 조건값_1: ​ 동작부분;..
[코드잇] 프로그래밍 핵심 개념 in JavaScript (2)(2021.2.13) 본 내용은 해당 강의 토대로 작성 추상화 01. 할당 연산자 (Assignment operators) 등호(=) : 할당 연산자, 오른쪽의 피연산자를 왼쪽의 피연산자에 할당한다. 할당 연산자의 오른쪽부터 처리 처리된 값을 왼쪽의 피연산자에 할당 예시 let x = 5; x = x - 2; console.log(x); // 3 출력 02. 복합 할당 연산자 (Compound assignment operators) // 두 줄씩 같은 표현 x = x + 1; x += 1; x = x + 2; x += 2; x = x * 2; x *= 2; x = x - 3; x -= 3; x = x / 2; x /= 2; x = x % 7; x %= 7; 증가(increment), 감소(decrement) 연산자 // 두 ..

티스토리툴바