1. 목적 2. 예시 3. 자주 사용하는 이벤트의 종류 1. 목적 addEventListener()는 document의 특정 요소(id, class, tag 등) event(ex. click하면 함수 실행, 마우스 갖다대면 함수 실행 등)를 등록할 때 사용한다. 2. 예시 버튼 웹 페이지의 '버튼'을 클릭할 때 마다 hello world!가 출력된다. 3. 자주 사용하는 이벤트의 종류 이벤트 설명 click 마우스버튼을 클릭하고 버튼에서 손가락을 떼면 발생한다. mouseover 마우스를 HTML요소 위에 올리면 발생한다. mouseout 마우스가 HTML요소 밖으로 벗어날 때 발생한다. mousedown 클릭을 하기 위해 마우스버튼을 누르고 아직 떼기 전인 그 순간, HTML요소를 드래그할 때 사용할 ..
1. 콜 스택 (call stack) 2. 콜 스택 예제 1. 콜 스택 (call stack) 스택 프레임 (stack frame) 메모리의 스택(stack) 영역은 함수의 호출과 관계되는 지역 변수와 매개변수가 저장되는 영역이다. 스택 영역은 함수의 호출과 함께 할당되며, 함수의 호출이 완료되면 소멸한다. 함수가 호출되면 스택에는 함수의 매개변수, 호출이 끝난 뒤 돌아갈 반환 주소값, 함수에서 선언된 지역 변수 등이 저장된다. 이렇게 스택 영역에 차례대로 저장되는 함수의 호출 정보를 스택 프레임(stack frame)이라고 한다. 콜 스택 (call stack) 콜 스택이란 컴퓨터 프로그램에서 현재 실행 중인 서브루틴에 관한 정보를 저장하는 스택 자료구조이다. 콜 스택을 사용하는 주된 이유는 현재 실행..
1. txt 변수에 e가 몇 개 들어갔는지 구하여라. 2. txt 변수를 5개씩 잘라서 배열에 넣어라. 3. 배열의 요소에 e, z, d, v, n 중 하나 이상 포함되어 있다면, 요소를 삭제하라. 4. 바뀐 배열의 요소 값 중 중복되는 값을 제거하라. // 1번 문제풀이 let arr = txt.split("e"); // e가 있는 부분을 기준으로 txt 문자열을 분할 console.log(arr); console.log(arr.length - 1); // e의 갯수가 n일 때 arr의 요소 갯수는 n+1개 // 2번 문제풀이 let arr2 = []; let splitFive; for (let i = 0; i < txt.length; i++) { if (i%5 == 0) ..
1. spread 2. rest JavaScript(ES6)에서 . . .기호는 Spread Operator와 Rest Parameter 이렇게 2가지 방법으로 쓰인다. 1. spread operator spread operator는 반복 가능한 객체(iterable object)를 함수의 인자 혹은 배열 literal의 요소로 확장한다. 쉽게 설명하자면, 배열과 같은 여러 개의 데이터를 가진 데이터 타입을 , , , 으로 구분되는 여러 개의 요소로 펼치는(spread) 곳에 사용한다는 것이다. 대표적인 사용법 중 하나는 iterable 객체를 함수의 인자로 펼쳐서 호출하는 것이다. function foo(a, b, c, d) { console.log(a, b, c, d); } const arr = ['..
1. 얕은 복사 (Shallow Copy) 2. 깊은 복사 (Deep Copy) console.log(1 == 1); // true console.log({} === {}); // false console.log([] === []); // false let a = {}; let b = {}; console.log(a === b); // false a = { name: 'javascript' }; b = { name: 'javascript' }; console.log(a.name === b.name); // true a와 b를 둘다 {}로 선언하면 console.log(a === b); 의 결과가 true가 나올 것으로 예상했지만, false가 나왔다. 이는 두 객체가 각각 다른 메모리에 할당되어 있기 때..
1. new 연산자 2. 문자열 메소드 3. Array의 메소드 4. 비구조화 할당 (구조분해 할당) 5. switch문 1. new 연산자 new 연산자는 자바스크립트 고유의 예약어이며 고유의 연산자(operator)이다. new 라는 의미는 영역(block)을 지정하여 함수 내부의 정의된 내용을 실행해주는 것이다. let str = "010-1234-5678"; let str2 = new String("010-1234-5678"); str는 문자열로 선언한 것이고, str2는 문자열 객체로 선언한 것이다. str과 str2의 데이터 타입을 콘솔에 출력해보면 str1은 "string", str2는 "object"로 출력된다. 하지만, str과 str2의 값을 비교하면 str == str2는 true가 ..
1. 이중 for 문 2. 자료구조 (스택, 큐) 3. 재귀함수 4. 콜 스택 5. 스택 오버플로우 6. 동적 계획법 1. 이중 for 문 for 문 안에 for 문이 들어가 있는 구조를 이중 for 문이라고 한다. 흔한 예시로는 구구단이 있다. // 구구단 n단 출력 function gugudan(num) { for (let i = 1; i < 10; i++) { console.log(num+" * "+i+" = "+num*i); } } gugudan(6); // 구구단 모두 출력 for (let i = 1; i < 10; i++) { for (let j = 1; j < 10; j++) { console.log(i+" * "+j+" = "+(i*j)); } } 첫 번째 예시의 경우 gugudan(n)의..
1. JSON 2. prototype 1. JSON JSON은 JavaScript Object Notation의 줄임말로 "속성-값 쌍" 또는 "키-값 쌍"으로 이루어진 데이터 오브젝트를 전달하기 위해 인간이 읽을 수 있는 텍스트를 사용하는 개방형 표준 포맷이다. 본래는 자바스크립트 언어로부터 파생되어 자바스크립트의 구문 형식을 따르지만 언어 독립형 데이터 포맷이다. 즉, 프로그래밍 언어나 플랫폼에 독립적이므로, 구문 분석 및 JSON 데이터 생성을 위한 코드는 C, C++, C#, JAVA, JavaScript, Pearl, Python 등 수많은 프로그래밍 언어에서 쉽게 이용할 수 있다. JSON 파일의 확장자는 .json이다. 2. prototype JAVA는 객체지향 언어이고, Python은 함수..
1. 속성과 메소드 2. 배열 1. 속성과 메소드 배열 내부에 있는 값은 요소(element)라고 부르고, 객체 내부에 있는 값은 속성(property)이라고 부른다. 배열의 요소처럼 객체의 속성도 모든 형태의 자료형을 가질 수 있다. 객체의 속성 중 함수 자료형인 속성을 메소드(method)라고 부른다. 자바스크립트 - 객체, 속성, 메소드 비교 구분 객체 속성 메소드 원어 object property method 특징 프로그램의 대상이 되는 모든 것 객체의 속성, 성격, 특징 객체의 기능, 성능, 역할 예 창, 문서 색깔, 크기, 모양 저장, 닫기 속성과 메소드의 차이를 쉽게 생각하면, 속성 뒤에는 ()가 붙지 않고, 메소드 뒤에는 ()가 붙는다. 이는 메소드가 함수 자료형이기 때문에 값을 삽입해주어..
1. 큰따옴표("") 2. 작은따옴표('') 3. 억음부호(``) 자바스크립트를 배우다 보면 " ' `와 같은 문자 부호를 자주 볼 수 있다. 오늘은 이 3가지 부호에 대해 설명해보고자 한다. 따옴표는 대화나 인용하는 글이나 말, 또는 강조하는 말이나 글의 앞뒤에 쓰는 문장 부호이다. 인용 부호 또는 인용부라고도 한다. 세계에서 통용하는 따옴표의 종류는 큰따옴표("")와 작은따옴표('')이다. 대한민국에서는 겹화살활호(《》)와 홀화살괄호()도 따옴표로 사용가능하다. 주로 세로 쓰기나 보수적 글 쓰기에서 겹낫표와 낫표(「」)도 따옴표에 속한다. 1. 큰따옴표("") 큰따옴표의 경우 글 가운데에서 직접 대화를 표시할 때, 말이나 글을 직접 인용할 때 사용한다. 국어에서는 큰따옴표 안에 작은따옴표를 넣어서 쓰..
1. 돼지 그림 출력 2. n = 5*x + 3*y 1. 돼지 그림 출력 난이도 : ★☆☆☆☆ 첫 번째 문제는 [그림 1]과 같은 돼지 그림을 출력하는 것이다. 언뜻 보면 console.log(""); 의 ""안에 다 때려넣으면 될 것 같지만 그렇게 단순하지 않다. 그 이유는 " ' `와 같은 문자 처리 때문이다. 만약 a""b를 출력하고 싶다면 console.log("a""b"); 라고 써주면 될 것 같지만 이 경우 에러가 뜬다. 이는 console.log();의 ()안에 한 쌍의 "", '', ``가 들어갈 수 있기 때문이다. 따라서 ""와 같은 표현을 중복해서 쓰고 싶다면 앞에 역슬래시(\)를 붙여주어야 한다. 다른 방법으로, 닫는 기호를 ''나 ``로 바꿔주어서 같은 표현이 중복되는 것을 피할 수..
1. function 1. function 함수는 JavaScript에서 기본적인 구성 블록 중 하나이다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야 한다. function 함수이름() {}의 문법으로 함수를 정의할 수 있고, return 문은 함수에 의해 반환된 값을 지정한다. 반환된 값은 함수 밖에서 사용할 수 있다. 함수 내에서 정의된 변수는 변수가 함수의 범위에서만 정의되어 있기 때문에, 함수 외부의 어느 곳에서든 액세스하는 것이 불가능하다. 그러나, 함수가 정의된 범위 내에서 정의된 모든 변수나 함수는 액세스할 수 있다. 즉, 전역함수는 모든 전역 변수를 액세스할 수 있다. ※ 함수를 선언하는 방법 (1) 명명 함수 선언 (named function declaratio..
- Total
- Today
- Yesterday
- Browser Object Model
- DOM
- 키워드
- History 객체
- Char
- bom
- short
- 변수
- Navigator 객체
- window 객체
- int
- 리액트 #React #props #state #javascript
- 컴파일
- Screen 객체
- keyword
- c언어
- gcc
- stdio.h
- Document Object Model
- long
- location 객체
- 자료형
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |