본문 바로가기

전체 글

 (102)
Chapter 12. 변수와 호이스팅 1. 변수의 이해 변수는 해당 정리본의 초두에도 다룬적이 있지만, 간략하게 말해 데이터를 담기위한 ‘공간’을 말한다. 자바스크립트는 선언단계에서 데이터 타입이 따로 지정되지 않는다. 이유는 HTML의 데이터 체계가 다양한 종류의 데이터를 취하고 표현하기 때문인데, 이에 따라 편의성을 위해 선언단계에 데이터 타입을 지정하지 않는것이다. 문제는 이러한 특성에 의해 변수의 데이터 타입을 자바스크립트가 자동으로 설정하는 것인데, 이러한 과정을 포함하는 단계가 바로 ‘호이스팅’이다. 또한 자바스크립트 자체로 서버 언어랑 데이터 베이스 역할을 하기 때문에 자세하게 조정하는 것이 어렵다. (자세한 조정을 위해서는 별도 개념 학습이 필요한 것이다.) 결국 자바스크립트 내에서 자동으로 처리해야할 데이터가 필요하다는 것이..
Chapter 11. canvas (객체의 기본 이해) 1. 캔버스 태그는 HTML에서 개발자가 지정한 모양의 그림을 그리거나 표현하는 태그이다. 해당 기능을 CSS로 소개하는 경우도 있으나 캔버스 태그를 다루는 방법이나 개념은 자바스크립트에 가깝다. 캔버스 태그는 해당 태그 자체에 다양한 문자 데이터를 가지고 있다. 이 문자 데이터에 입력된 값에 따라 화면에 ‘그림’이 표현된다. 이러한 개념을 컨텍스트라고 하는데, 이미지를 글로 표현하는 것이다. 이 컨텍스트는 본래 문자들의 집합인 프로그래밍 언어에서 그림을 표현하기 위한 기법이라는데 의의를 가진다. 파이썬이나 자바로 GUI(그래픽 유저 인터페이스)를 구현할 때도 적용되는 방식이다. 2. 사용방법: 컨텍스트 추출 우선 태그 안에 태그를 생성한다. 그 후 자바스크립트를 이용해 캔버스에 부여된 요소를 가져온다...
Chapter 10. function 1. 개요 함수는 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미한다. JavaScript에서 함수도 하나의 데이터 타입에 해당한다. 따라서 함수를 변수에 대입하거나 함수를 프로퍼티에 지정하는 것도 가능하다. 또한 데이터 타입으로 규정되었으므로 함수 내에 다른 함수를 중첩하여 정의하는 것도 가능하다. 2. 함수 선언과 사용 function 함수 이름(매개변수 목록){실행문} 함수는 데이터의 한 종류이기 때문에 위와 같이 타입, 이름, 구성 요소로 정의할 수 있다. 매개변수는 함수가 값을 취해서 조작할 데이터 혹은 상태를 말한다. 실행문은 매개 변수로 취해온 값을 연산하여 반환하거나 혹은 반환없이 동작만 수행할 수도 있다. // addNum라는 이름의 함수를 정의함. function addNu..
Chapter 09. 동작에 따라 데이터를 변화시키는 방법 1. 개요 JavaScript를 이용하면 지정된 데이터의 모양을 바꾸거나 변화시킬 수 있다. 클릭이나 마우스가 다가갔을때, 벗어났을 때 등 다양하게 적용이 가능하다. 해당 기능의 기본적인 구동은 ‘함수’를 이용하는 것이며 함수란 입력되는 데이터에 따라 기능이 변화하는 형태의 수식을 말하는데, 기본적인 형태는 function(){}이다. ()는 변화하는 값을, {} 안에는 실행할 실행문이 기재된다. 2. function을 이용하여 동작을 설정 function은 특정 조건에 동작을 정의하는 기능을 한다. function의 동작과 기능은 window(브라우저)에서 나타나는 동작에 따라 다르게 나타날 수 있다. 기본적으로 동작에 대한 정의와 정보를 이미 자바스크립트에서 정의하고 있기 때문에 개발자가 별도로 브라..
Chapter 08. 데이터를 추출하는 방법 (DOM 기초 2) 1. 개요 HTML 문서를 통해 데이터를 입력받거나 구성한다면 해당 데이터들은 데이터의 집합인 ‘객체’ 정보일 가능성이 높다. 객체 정보는 다수의 데이터로 구성된 상태이기 때문에 개발자가 필요한 정보를 추출할 필요가 있다 . 2. 특정 객체 구조에서 부분을 지정하는 방법 1) 문서에서 특정 정보를 변수에 할당 Document(HTML 문서) 안에 위치한 id 혹은 class를 포함한 태그 전체를 가져오고 싶다면 document.getElementById 혹은 document.getElementsByClassName을 사용한다. var 변수=document.getElementById("아이디"); var 변수=document.getElementsByClassName("클래스"); var 변수=documen..
Chapter 07. 배열 변수 1. 개요 배열은 선언된 변수에 ‘동일한 타입의 데이터가 다수 담긴 상태’를 말한다. 일반적으로 유사한 데이터가 담기기 때문에 변수 명은 동일하지만, 데이터 사이에 구분을 위해 ‘인덱스’를 부여하고 이를 구별한다. 2. 배열의 생성과 참조 1) var arr = [배열요소1, 배열요소2,...]; // 배열 리터럴을 이용하는 방법 2) var arr = Array(배열요소1, 배열요소2,...); // Array 객체의 생성자를 이용하는 방법 3) var arr = new Array(배열요소1, 배열요소2,...); // new 연산자를 이용한 Array 객체 생성 방법 배열을 생성하는 방법은 총 3가지로, 배열 변수명과 배열 요소를 정렬하여 선언한다. 사용 방법은 다양하지만 동작은 같다. 기본적으로 위..
Chapter 06. 입력 값을 취하는 방법 (DOM 기초 1) 1. input의 값 가져오기 input은 사용자가 값을 입력할 수 있는 태그인데, 대부분의 웹사이트는 input으로 값을 입력받고 값에 따라 화면을 구현한다. html을 통한 화면 구현은 모양만 구현하는 것이기 때문에 일련의 동작에는 Javascript를 통한 지정이 필요하다. (input 에 대한 설명은 HTML 문서의 chapter 8을 참고하라) 2. function 이름(값) {동작} function은 지정된 값에 따라 동작을 수행하는 규칙문으로 메소드, 함수라고도 한다. 값으로 지정한 일정 값에 따라 구현하는 값이 다르며, 일정한 규칙을 가진다. 중요한 점은 function의 연산순서가 body의 콘텐츠보다 우선 순위에 있다는 것이다. 때문에 function으로 구현하는 콘텐츠는 컴퓨터에게 있..
Chapter 05. 조건문과 반복문 1. 개요 조건문이란 특정 조건이나 값에 따라 실행문을 실행하는 명령어를 말한다. 컴퓨터의 기본 원리가 0과 1로 전류를 흐르게 하는 동작이만큼, 컴퓨터의 구동에서 조건이라는 것은 매우 중요한 위치를 가진다. 또한 조건과 마찬가지로 컴퓨터가 특정 작업을 반복하는 것은 현대 인류 사회의 노동 구조를 바꾸었다. 프로그램에서 조건문과 반복문의 중요성은 말로 다 표현할 수 없으며, 현재 사용하는 프로그램의 대부분은 조건문과 반복문을 기반으로 제작이 가능하다. 2. 조건문: if(조건){실행문1; 실행문2; …;} 조건이 참이라면 {} 안의 실행문을 실행한다. if만으로도 조건에 따른 실행문 구현이 가능하지만 일반적으로 if(조건){실행문1} else{실행문2}으로 사용한다. 조건이 맞다면 실행문 1이 실행되고,..

티스토리툴바