반응형

자바스크립트 9

[자바스크립트 과외] 9. Day4 요점정리

[객체로서의 함수] 자바스크립트에서의 함수는 Function이라는 객체이다. 객체의 특징을 그대로 따르기 때문에, 함수는 속성과 메서드를 갖는다. 또한 함수는 다음과 같은 특징들을 갖는다. 1. 함수는 변수나 프로퍼티나 배열 요소에 대입할 수 있다. 2. 함수는 함수의 인수로 사용할 수 있다. 3. 함수는 함수의 반환값으로 사용할 수 있다. 4. 함수는 프로퍼티와 메서드를 가질 수 있다. 5. 함수는 이름없는 리터럴로 표현할 수 있다. (익명 함수) 6. 함수는 동적으로 생성할 수 있다. 이러한 특징을 가진 객체를 가리켜 일급객체라고 하고, 일급 객체인 함수를 일급 함수라고 한다. 자바스크립트 함수는 일급함수이기 때문에, 함수형 프로그래밍을 할 수 있다. Function객체의 프로퍼티는 아래와 같다. 프..

[자바스크립트 과외] 8. Day3 요점정리

[프로그램의 실행과 평가과정] 실행 가능한 코드는 크게 세 가지로 나뉘며, 이들 코드는 평가 후, 적절한 실행문맥(E.C.)을 형성하게 된다. 실행문맥의 구조를 그림으로 그리면 아래와 같다. 위와 같은 실행문맥은, Stack이라는 가상의 자료구조로 관리가 되며, Stack에 새로운 문맥이 들어오는 것을 push, 기존에 존재하던 문맥이 삭제되는 것을 pop이라고 한다. 스택의 가장 아랫부분에는 전역 코드를 실행하기 위한 전역 실행 문맥이 존재한다. 어떤 함수를 호출(Call)하게 되면, 그 즉시 스택에 새로운 실행 문맥이 push되며, 해당 함수의 작업을 모두 마치고 return을 하게 되면(명시되어있지 않은 경우 undefined를 반환하며 함수를 마친다.), 해당 함수에 대한 실행 문맥은 pop되어 ..

[자바스크립트 과외] 7. Day2 요점정리

[Window] 웹 브라우저에 내장된 전역객체인 Window 객체에는 대화상자를 표시하기 위한 세 개의 메서드가 있다. 1. window.alert(); 2. window.prompt(); 3. window.confirm(); 실무에서는 prompt() 메서드 사용을 지양하지만, 이번 섹션에서는 단순히 이런 기능도 있다는 정도로 짚고 넘어간다. Window 객체의 메서드들은 window. 를 생략해도 호출된다는 특징이 있다. [Console] Console 객체의 메서드를 이용해서 콘솔에 값을 출력해보았다. 사용한 메서드는 아래와 같다. 1. console.dir(); 2. console.log(); 3. console.info(); 4. console.warn(); 5. console.error(); ..

[자바스크립트 과외] 5. 객체(Object)란?

다음 내용 >> 객체란, 실제 우리가 살아 숨쉬고 있는 공간을 추상화하기 위해 나타난 개념이다. 때문에, 우리가 알고 있는 모든 사물을 객체로 만들어서 생각할 수 있다. 객체는 크게 보았을 때, 두 가지를 포함하고 있다. 바로 속성(Property / Attribute)과 기능(Function / Method)이다. 영어이름이 다양하게 붙는 이유는 상황에 따라 혹은 사람에 따라 부르는 이름이 제각각이기 때문이다. 이건 마치 우리의 멀쩡한 이름을 두고 별명으로 부르는 친구나, 집에서는 아들/딸로 불리우는 것과 같은 이치이다. 실제 우리 주변의 사물도 속성과 기능으로 나눌 수 있다. 예를 들면 스마트폰에는 볼륨, 신호세기, 배터리 잔량이라는 속성이 있고, 볼륨업/다운, 신호세기 감지, 배터리 잔량 감지 라는..

[자바스크립트 과외] 4. 진리표

다음 내용 >> 이번에 배울 내용은 수학과의 집합론 수업이나, 기타 교양의 논리학 수업을 들었다면 알 수도 있는 내용이다. 혹, 그런 교육을 받아본적 없다고 하더라도 겁먹지 말자. 참 또는 거짓을 판별할 수 있는 문장을 얼컫어, '명제'라고 한다. 아래는 명제의 예이다. 1은 4보다 크다. 모든 정수의 합은 9999보다 크다. 9 - 7 = 2이다. => 참인지 거짓인지 판별할 수 있기 때문에, 모두 명제에 해당한다. 아래는 명제가 아닌 것의 예이다. 저 꽃은 아름답다. 나는 잘 생겼다. 그는 코딩을 잘 한다. => 아름답다, 잘 생겼다, 코딩을 잘 한다의 기준은 주관적이기 때문에 명제에 해당하지 않는다. 이러한 명제를 간단하게 기호로 p, q로 나타낸다.그러면 아래 표와 같은 상황을 생각할 수 있다. ..

[자바스크립트 과외] 2. 합성함수

다음 내용 >> 합성함수란, 말 그대로 2개 이상의 함수를 합성한 것이다. 예를들어 f라는 함수의 입력값이 3일 때 출력값이 2라고 가정하고, g라는 함수의 입력값이 2일 때 출력값이 1이라고 가정해보자. 이때 g(f(3))을 생각해볼 수 있는데, 괄호의 가장 안 쪽부터 풀어나가면 쉽게 풀 수 있다. f(3)이 2라고 했으므로 이(g(f(3)))를 g(2)로 고쳐 쓸 수 있고, g(2)의 출력값은 1이라고 했으니 최종 정답은 1이 된다. 이와 같이 2개의 함수 뿐만 아니라 여러개의 함수들을 합성시켜서 원하는 값을 받을 수도 있다는 사실을 알면 된다. 지금은 예를 통해 합성함수에 접근하기 위해서 간단한 숫자만을 예로 들었지만, 논리적으로 다양한 처리가 이어지는 프로그래밍에서 어떤 함수(여기에서는 함수 f)..

[자바스크립트 과외] 1. 함수(function)란?

다음 내용 >> 함수(function)란, 기능이다. 우리 주변에서도 '기능'을 가진 많은 물건을 찾을 수 있는데 가장 예로 들기 좋은 것이 자판기나 키보드이다. 키보드에서 'ㅋ'에 해당하는 키를 클릭하면 'ㅋ'이 나온다. 자판기에 돈을 넣고 알로에 음료 버튼을 누르면, 알로에 음료가 나온다. 이는 곧 함수다. 수학에서의 함수는 입력값에 대한 반환값이 단 하나라는 특징이 있는데, 이를 그대로 따라한 것이 프로그래밍의 함수이다. 다만 차이라면, 프로그래밍에서의 함수는 입력값의 개수가 0개일 수 있다는 점이다. 만약 키보드에서 'ㅋ'에 해당하는 키를 클릭했는데 'ㄱ'도 나오고 'ㅋ'도 나오면 굉장히 난감한 상황이 펼쳐지는 것이다. 일종의 고장난 키보드라고 할 수 있다. 마찬가지로 자판기도 알로에 음료 버튼을..

[자바스크립트 과외] 0. 과외 준비를 하면서...

다음 내용 >> 내일부터 회사의 한 직원분을 대상으로 자바스크립트 코딩 과외를 하기로 했다. 하필 자바스크립트인 이유는 우리 회사에서 초급자에게 가장 많이 부여하는 파트가 웹 화면 개발이기 때문이다. 짧아야 4시간, 아마도 6-8시간 정도 과외가 진행될 것 같다. 내일 하루를 위해 나는 이번 주 내내 진도 나갈 부분에 대해서 먼저 공부하고, 어떻게 이 내용을 전달할지 고민해보았다. 내 과외 방식은 언제나 그래왔듯, 프로그래밍에 대해 아무런 지식도 없다는 것을 전제로 하기 때문에 이런 고민이 필수이다. 우선 수학에서 의미하는 함수와, 프로그래밍 개념에서 의미하는 함수에 대해서 설명하고, 기본적인 삼각비, 그리고 진리표, 이진법에 대해서 설명하려고 한다. 물론, 문과생에 비전공자가 들어도 이해할 수 있는 수..

자바스크립트(Javascript) DOM 선택자(Selector)

이번 포스트에서는 자바스크립트에서의 가장 기본적인 선택자에 대해서 소개해드려고 합니다. 최신문법과 기존문법 두가지를 모두 소개해드리며, 제이쿼리는 기세가 많이 꺾인 상황이지만 아직 사용하는 기업 및 프레임워크가 존재하기 때문에 간단하게 남기도록 하겠습니다. 자바스크립트로 DOM 선택하는 방법 // [ID로 선택] // 자바스크립트 ES6 이후 문법(ID는 유일성을 가정함.) document.querySelector("#header"); // 자바스크립트 ES5 이하 문법 document.getElementById("header"); // [Class로 선택] // 자바스크립트 ES6 이후 문법 // ("box"라는 클래스명이 여러개인 경우, querySelector 메소드는 첫번째 객체만 선택됨.) do..