'자바스크립트 코딩'에 해당되는 글 17건

자바스크립트에는 타이머 함수가 내장되어 있습니다. 

타이머 함수란 지정한 시간에 지정한 함수를 실행하게 하는 함수 입니다. 

■ 타이머 설정하기 ( setTimeout )

setTimeout 함수 내부에 function(){ ... } 과 3000 이라는  파라미터 값이 들어 왔습니다. 

function 내부는 실행할 함수를 정의 합니다. 

두번째 3000 이라는 값은 3000 밀리세컨드 후 function 함수에서 정의한 동작을 실행 시킨다는 의미 입니다. 

3000 밀리세컨드, 쉽게 이야기 해서 3초 후에 동작 시킵니다.

위 코드를 적용 후 페이지를 로드 하게 되면 페이지 로딩 완료 후 3초가 지나면 알림이 뜨게 됩니다. 

■ 타이머 취소하기 ( clearTimeout )

실행시킨 타이머를 취소 시키는 방법은 내장 함수인 clearTimeout 함수를 콜하면 됩니다. 이때 파라미터 값은 실행 취소시킬 setTimeout 의 ID 값을 넘겨 주면 됩니다. 

위와 같이 setTimeout 을 clearTimeId 라는 변수 형태로 지정을 해줍니다. 

이때 clearTimeId 라는 변수가 clearTimeout 함수를 호출 시 사용하게 되는 id 값이 됩니다. 

stopTimer() 함수를 선언하여 호출되는 시점에 clearTimeout(clearTimerId) 와 같이 실행하게 되면 setTimeout 함수가 실행 되지 않고 취소 되어 버립니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

웹에서 특정 문구를 복사 하거 버튼 하나 클릭으로 링크를 복사하는 방법을 알아 보겠습니다. 

■ 텍스트를 클립보드에 복사(copy)하기

위와 같이 input 의 value 값을 복사후 ctrl + v (붙여넣기) 또는 마우스 우클릭 후 붙여넣기 하는 방법에 대해 정리 해보겠습니다. 

▶ HTML code

id 값이 inputField 인 input 태그의 입력 값을 버튼을 클릭하여 클립보드에 복사 하고자 합니다. 

그리고 아래 input 태그에 붙여 넣기를 해보는 방식으로 처리 하겠습니다. 

▶ Javascript Code

var textField = document.getElementById('inputField');

textField 라는 변수에 inputField 라는 id 를 가진 요소를 담습니다. 

textField.select();

textField 라는 요소를 선택 합니다. 

document.execCommand('copy');

document.execCommand 는 명령어를 실행하기 위해 사용 하는 함수입니다. 

명령어 종류는 copy, cut, delete 등등, 많은 명령어들이 지원되고 있습니다. 

참조) https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand

여기서는 copy 를 사용했습니다. 즉, 선택된 영역의 값을 복사 한다는 의미 입니다. 

위 내용들만 있으면 작업은 끝났습니다. 실제 위 코드가 적용된 화면을 보시겠습니다. 

※ 아래 input 필드에 붙여넣기 (Ctrl + v) 해보세요

첫번째 input 에 원하는 문구를 입력 후 문구 복사하기 버튼을 클릭 합니다. 

두번째 input 에 붙여넣기 (ctrl + v) 또는 마우스 우클릭 후 붙여넣기 선택 하시면 클립보드에 복사된 내용이 붙여넣기 됩니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

 Data Types (데이터 유형)

최신 자바스크립트 표준(ECMAScript 2015)에서는 7가지 데이터 유형을 정의하고 있습니다. 

■ primitive data type: 객체가 아니며 함수를 제공하지 않는 데이터 유형

• Boolean: true or false
• null: null 값을 표현하는 특수 키워드. 자바스크립트는 대소문자 구분을 하기 때문에 Null, NULL 등과 다른 값
• undefined: 값이 정의 되지 않았음을 의미하는 최상위 속성
• Number: integer (1, 2, 3 등의 정수) 또는 floating-point (3.1415 등의 부동소수점) 등의 숫자 
• String: 텍스트 값을 나타내는 일련의 문자 
• Symbol: (ECMAScript 2015 에 처음 등장) 인스턴스가 고유하고 변경 할 수 없는 데이터 유형

위와 같이 6개의 primitive data type 과 Object(객체) 를 포함하여 7가지 데이터 유형이 있습니다. 

 Data type conversion (데이터 형변환)

자바스크립트는 변수 선언 시 변수의 데이터 유형을 지정할 필요가 없으며 스크립트 실행 중 필요에 따라 데이터 유형이 자동으로 변환 됩니다. 

testVar 라는 변수를 숫자 79 로 선언 했지만 아래 쪽에서 다시 String 형으로 재 선언 해도 오류가 발생 하지 않습니다. 

실행 결과는 아래와 같습니다. 

1. testVar = 79

2. testVar = 데이터 형 변환이 자동으로 이루어짐

숫자형 값과 문자 값을 + 기호를 이용할 경우 숫자형 값이 문자형으로 변환 됩니다. 

위 예제를 실행 하면 아래와 같은 결과 값이 나옵니다. 

아기는 올해로 2살 이다

위 예제도 동일하게 문자형 값과 숫자형 값 사이에 + 기호를 이용하였습니다. 

물론 이번에도 숫자 10은 문자형으로 자동 형변환 되어 아래와 같은 결과를 리턴합니다. 

3810

+ 기호를 제외한 다른 기호들은 숫자형을 문자형으로 변환하지 않습니다. 반대로 문자형을 숫자형으로 변환 하는것 과 같은 결과를 리턴 합니다. 

변수 y 와 z 는 각각 10을 빼거나 곱하기를 했습니다. 

결과는 아래와 같습니다. 

y = 28

z = 380

그렇다면 + 기호와 다른 기호들을 같이 사용할 경우 어떻게 될까요? 

'38' 과 10 사이에 + 기호가 들어가 첫번째 10을 문자열로 변환합니다. 

이때까지 결과 값은 '3810' 입니다. 

'3810' - 10 을 한 값이 최종 a 값이 되는데요.

- 기호를 이용하여 '3810' 이 숫자 형이 되어버립니다. 

3810 - 10 을 하여 최종 결과는 3800 이 됩니다. 

a = 3800

여기서 한가지 의문점이 있을 수 있습니다. 

숫자형 문자열은 덧셈이 안될까요? 

가능합니다. 바로 + 기호를 문자열 앞에 사용 하는 방법으로 말이죠. 

위의 x 값을 정의 할때와 다르게 '38' 앞에 + 기호를 이용했습니다. 

이는 숫자형 문자열을 숫자로 인식 시키는 기능을 합니다. 

결과는 어떻게 나올까요? 

당연히 결과 값은 48 이 나옵니다. (그렇지 않다면 굳이 이 예제를 들 필요 없겠죠? ^^)

b = 48

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

앞서 변수 선언에 대해 포스팅을 했는데요. 일반적으로 variable scope 라고 부르는 변수 영역이라는 것이 있습니다. 

변수 영역이라 부르니 어렵죠? 변수가 선언되어 사용될 수 있는 영역이라고 생각 하시면 됩니다. 

일반적으로 변수는 Global Variable 과 Local Variable 두가지 종류로 분류되고 있습니다. 

▶ 함수 (function) 외부에서 선언되면 Global Variable 

▶ 함수 내부에서 선언되면 해당 함수 내에서만 사용 되므로 Local Variable

변수 a 는 함수 밖에서 선언 되어 있습니다. Global 변수입니다. 

변수 b 는 함수 안에서 선언 되었습니다. Local 변수 입니다. 

글로벌 변수와 달리 로컬 변수는 지정된 영역안에서만 사용 가능 합니다. 이를 Variable Scope 이라고 부릅니다. 

즉, 변수 a 는 글로벌 변수 이므로 함수 안이든 밖이든 상관 없이 사용 가능하지만 변수 b 는 선언된 함수 내에서만 사용 가능합니다. 

위 코드를 실행 시켰을때 a 값은 정상적으로 로그가 찍히겠지만 b 값은 변수 밖에서 호출 하였으므로 오류가 발생하게 됩니다. 

만약 위와 같이 함수 안에서 호출 한다면 당연히 원하는 값을 보실 수 있습니다. 

함수 내부에서 선언된 경우만 Local Variable 로 판정 되는 것은 아닙니다. 

위 코드를 실행 할 경우 어떤 결과가 나올까요? 

if 절 안에서 변수 선언을 했지만 true 상태이므로 if 절 안 코드를 실행 시키게 됩니다. 즉, Global 함수 선언과 동일하다고 생각 하시면 됩니다. 

위 코드를 실행 하면 결과 값은 10 이 리턴 됩니다. 

이번에는 if 절 조건이 false 입니다. 즉, if 절 내부 코드가 읽혀 지지 않습니다. 

프로그램상으로 봤을때 변수 y 가 선언되지 않았습니다. 

위 코드를 실행하면 결과는 undefined 가 리턴 됩니다. 

variable scope 상으로 봤을때 위 코드이 변수 y 는 로컬 변수와 같은 역할이 되었습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

자바스크립트를 재미있게 공부 할 수 있는 방법이 있어 포스팅 합니다. 

https://www.javascript.com/

위 링크로 접속 시 메인 화면에서 Try JavaScript 라른 문구가 보이면서 따라하기를 요구 합니다. 

여기서 하라는 데로만 따라하면 재미있게 자바스크립트를 배울 수 있습니다. 

첫 화면에 "사용자 이름"; 과 같이 입력후 키보드의 엔터키를 치라고 합니다. 

step 별로 코드를 따라 쳐보면서 따라가기를 하면 됩니다. 

alert 을 호출 하는 방법등도 배웁니다. 

짧은 try 모드 후 Keep Learing 을 클릭 하면 아래와 같은 공부 할 수 있는 목차가 나옵니다. 

동영상을 시청도하며 공부를 할 수 있습니다. 

동영상 시청이 끝나면 게임을 하듯이 문제를 풀어 나가는 구조 입니다. 

처음 공부를 시작 하시는 분들이라면 도움이 많이 될 것 같습니다. 

자바스크립트에서 변수 선언은 아래 세가지 키워드를 사용하는 방법이 있습니다.  

var / let / const

마지막으로 const 키워드에 대해 알아 볼까 합니다. 

■ const 키워드

const 키워드는 앞서 알아본 let 키워드와 비슷하게 블록 범위의 변수를 선언할때 사용 합니다. 

const 는 Constants, 즉 상수를 의미합니다. 즉, 고정 값이라는 의미 입니다. 한번 선언하면 var 키와드나 let 키워드로 선언한 변수와 달리 변경이 불가능 합니다. 

위와 같이 x 값을 선언 했지만 아랫중에서 100 으로 재선언 하려 시도 합니다. 

이경우 Uncaught TypeError 오류가 발생 합니다. 

실행 결과는 아래와 같습니다. 

Uncaught TypeError: Assignment to constant variable.

상수값에 값을 적용하려 했기에 오류가 발생 했다는 내용입니다. 

위와 같이 try ~ catch ~ 로 exception 처리를 하여 오류 메세지를 찍어 보겠습니다. 

TypeError: Assignment to constant variable.

    at test.jsp:12

x ==> 1004

test.jsp 파일 12라인에서 TypeError 가 발생했다는 오류 로그를 확인 할 수 있습니다. 

const 키워드로 변수를 선언 하는 경우는 고정 값으로 변하지 않는 값을 필요로 할 경우 사용하면 요긴하겠습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

자바스크립트에서 변수 선언은 아래 세가지 키워드를 사용하는 방법이 있습니다.  

var / let / const

이번에는 let 키워드에 대해 알아 볼까 합니다

■ let 키워드

var 키워드와는 다르게 블록 범위의 로컬 변수를 선언하는데 사용합니다. 물론 글로벌로 선언은 가능하지만 로컬에서 별도로 let 키워드를 사용하요 동일한명의 변수를 선언 시 완전히 다른 변수로 사용 됩니다. 

위와 같이 y 라는 변수를 let 키워드로 선언합니다. 

위와 같이 코드를 작성 했을 경우를 살펴 보겠습니다. 

글로벌로 선언된 상태에서 변수 값을 50 에서 40으로 변경하는 시도를 했습니다. 

당연하게도 실행 시 y 값은 40으로 변경 되어 있습니다. 

첫번째 if 절에서 y = 30 으로 선언했습니다. 여전히 새로운 let 키워드 사용 없이 기존 변수 값을 30으로 변경하려 시도 했습니다. 

결과는 y = 30 으로 나옵니다. if 절 밖에서 y 값을 찍어봐도 동일하게 y = 30 입니다. 

두번째 if 절에서 let 키워드를 사용하여 y 를 50 으로 선언했습니다. 

5. y = 50 으로 실행 결과 값이 나옵니다. 

여기서 우리는 let 키워드를 사용했다는 것에 주목해야 하며 if 절 안에서 로컬 변수로 선언 되었다는 것을 인지 해야 합니다. 

마지막 console 로그를 찍었을때 최종적으로 나오느 y 값은 무엇일까요? 

50 이라고 생각 하실수도 있지만 30 이 리턴됩니다. 

if 절 안에서 let y = 50 과 같이 let 키워드를 사용한 경우 로컬변수로 글로벌변수 y 와 다른 변수로 인식 됩니다. 

위 코드를 실행 한 실제 결과 값은 아래와 같습니다. 

1. points = 50    (Global Variable)

2. points = 40    (Global Variable)

3. points = 30    (Global Variable)

4. points = 30    (Global Variable)

5. points = 50    (Local Variable)

6. points = 30    (Global Variable)

let 키워드는 var 키워드와 달리 변수 선언 순서에 유의해야 합니다. 

위와 같이 먼저 변수 선언을 한 이후 호출 하는 경우는 문제가 없습니다. 

하지만 위와 같이 아직 선언되지 않은 변수를 호출 하고자 하면 Uncaught ReferenceError 오류가 발생합니다. 

var 키워드의 경우가 특이 했던 거였습니다. let 은 다른 언어들과 비슷한 선언 순서를 유지하고 있습니다. 

var 키워드와 let 키워드의 또다른 차이점을 하나 더 정리하면 아래와 같습니다. 

위와 같이 block statement scope 내에서 (if절) var 키워드와 let 키워드를 이용하여 서로 다른 변수를 선언 했습니다. 

그리고 if절 밖에서 각각의 변수 값을 찍어 보면 어떻게 될까요? 

var 키워드는 글로벌 및 로컬 구분 없이 사용 된다고 했습니다. 

즉, var_keyword 값이 1로 리턴 됩니다. 

하지만 let 키워드는 로컬변수로 선언 한다고 생각하면 됩니다. 즉, if 절 내에서 선언하여 사용 했기 때문에 if 절 밖에서는 해당 변수는 존재하지 않는 변수 이므로 Uncaught ReferenceError 오류가 발생 합니다. 

아래는 위 코드의 실행 결과 입니다. 

var_Keyword ==> 1

Uncaught ReferenceError: let_Keyword is not defined

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

자바스크립트에서 변수 선언은 아래 세가지 키워드를 사용하는 방법이 있습니다.  

var / let / const

먼저 var 키워드에 대해 알아 볼까 합니다. 

■ var 키워드

일반적으로 javascript 에서 변수 선언을 할때 가장 많이 사용하는 키워드 입니다. 

선택적으로 변수 값을 초기화하여 변수를 선언합니다. 

위와 같이 x 라는 변수 값을 20으로 초기화 할 수 있습니다. 

처음에 var x; 와 같이 변수 값을 초기화 하지 않고 선언만 한 이후 

필요한 경우에 x = 20; 과 같은 방법으로 초기화 할 수 있습니다. 

첫번재와 두번재 모두 아래 코드를 실행 시 동일한 값을 리턴 합니다. 

결과는 아래와 같습니다. 

x = 20

중요한것은 var 키워드는 로컬(local) 및 글로벌(global) 변수로 모두 사용 가능합니다. 

이미 글로벌 변수로 var x = 20 으로 선언 했지만 if절 안에서 로컬변수로 다시 var x = 16 으로 선언했습니다. 

그리고 다시 if 절 밖에서 x 값에 + 20을 했을때 처음 글로벌로 선언한 20 에 20을 더한것이 아니라 로컬에서 선언한 16 에 20을 더했습니다. 

즉, var 키워드는 로컬이든 글로벌이든 변수명이 동일하면 하나의 변수로 사용하게 됩니다. 

변수 선언 순서는 크게 상관 없습니다. 

일반적으로 변수선언을 먼저 하고 사용하고자 하는 곳에서 호출 합니다. 

위와 같이 변수선언을 뒤에서 해도 문제가 없습니다. (다른 언어들과 다르게 조금 특이한 케이스 입니다.)

하지만 변수 선언이 되지 않은 변수 값을 호출 하고자 하면 Uncaught ReferenceError 가 발생 합니다.

c 가 정의되지 않았다는 오류 메세지를 보실 수 있습니다. 

위 세 코드를 실행 하면 아래와 같은 결과가 나옵니다. 

a 값은 undefined

b 값은 undefined

Uncaught ReferenceError: c is not defined

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

javascript 에서 comment 를 이용하는 방법은 c++ 이나 java 등 여타 다른 언어들과 별반 다르지 않습니다. 

사용 방법은 아래와 같이 크게 세가지 정도 있습니다. 

■ One-Line Comments

위와 같이 두개의 슬래시 (/) 를 붙여 사용하여 뒤에 따라오는 줄은 모두 comment 로 인식하게 하는 방법이 있습니다. 

■ Multi-Line Comments

위와 같이 /* 로 시작하여 */ 로 끝날때까지 그 사이에 들어 오느 모든 내용은 comment 로 인식하게 됩니다.

■ Nest Comments

한 라인에서 /* 로 시작하여 */ 로 끝나는 모양새를 nest comments 라고 부릅니다. 

사실 Multi-line Comments 와 비슷합니다. 

Multi-Line Comments 와 비슷한 구조입니다.

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D

안녕하세요. 제임스 입니다. 

JSON.stringify ( value[, replacer[, space]] ) 

위 함수를 이용하여 문자열의 가독성을 높이는 방법을 알아 보겠습니다. 

var lottoDrawNum 이라는 변수값이 JSON string 입니다. 

변수명을 보시면 아시겠지만 나눔로또 (805회) 당첨 번호 정보 입니다. 

이를 위와 같이 호출 하게 되면 결과는 아래와 같이 나옵니다. 

JSON.stringify(a) = 

{"bnusNo":42,"firstAccumamnt":17064247876,"firstWinamnt":4266061969,"returnValue":"success","totSellamnt":73065981000,"drwtNo3":13,"drwtNo2":12,"drwtNo1":3,"drwtNo6":32,"drwtNo5":31,"drwtNo4":18,"drwNoDate":"2018-05-05","drwNo":805,"firstPrzwnerCo":4}

가독성이 좀 떨어집니다.

만약 정말... 엄청 긴 json 값이 있다면... 상상하기도 싫을 겁니다.

가독성을 뛰어나게 해줄 수 있는 방법이 있습니다. 

바로 JSON.stringify() 의 replace 와 space 파라미터를 활용 하는 방법입니다. 

더 정확하게는 replace 는 사용하지 않고 space 를 잘 이용하는 방법입니다. 

replacer 에 null (사용하지 않습니다) 을 space 에 2를 입력했습니다. 

space 파라미터에 숫자값이 들어 갈 경우 최종 문자열의 간격을 제어 할 수 있습니다. 

2를 입력 함으로써 각각의 문자열 (key:value, 또는 {, } 등등)의 간격을 스페이스 2칸으로 지정 했습니다. 

위 코드를 실행 시키면 아래와 같은 결과가 나옵니다. 

JSON.stringify(a, null, 2) = 

{

  "bnusNo": 42,

  "firstAccumamnt": 17064247876,

  "firstWinamnt": 4266061969,

  "returnValue": "success",

  "totSellamnt": 73065981000,

  "drwtNo3": 13,

  "drwtNo2": 12,

  "drwtNo1": 3,

  "drwtNo6": 32,

  "drwtNo5": 31,

  "drwtNo4": 18,

  "drwNoDate": "2018-05-05",

  "drwNo": 805,

  "firstPrzwnerCo": 4

}

가독성이 정말 좋아 졌습니다. 

첫번째 "{" 이후 줄바꿈이 일어나고 첫번째 key:value 값이 프린트 되는데 두칸의 스페이스 공간이 생겼습니다. (직접 코드 작성해서 테스트 해보세요 ^^)

space 에 숫자뿐만 아니라 TAB 효과를 주는 문자를 사용 할 수 있습니다. 

이미 많이 알고 있는 TAB 효과를 주는 문자는 !!! "\t" 입니다. 샘플 코드 보실까요?

앞선 코드의 2 대신에 '\t' 가 들어 갔습니다. 

실행 결과는 아래와 같습니다. 

JSON.stringify(a, null, \t) = 

{

"bnusNo": 42,

"firstAccumamnt": 17064247876,

"firstWinamnt": 4266061969,

"returnValue": "success",

"totSellamnt": 73065981000,

"drwtNo3": 13,

"drwtNo2": 12,

"drwtNo1": 3,

"drwtNo6": 32,

"drwtNo5": 31,

"drwtNo4": 18,

"drwNoDate": "2018-05-05",

"drwNo": 805,

"firstPrzwnerCo": 4

}

문자열간 간격이 확실히 넓어 졌습니다. 실제로 위 코드를 실행 해보신 후 결과 값에 마우스 커서를 가져가 보면 탭 공간으로 한칸만 잡혀 있습니다. 

JSON 문자열 가독성 높이기 JSON.stringify() 함수의 세번째 인자 "space" 부분만 잘 사용하면 간단하게 할 수 있습니다. 

▼ 도움이 되셨다면 로그인이 필요 없는 ▼

▼ 하트 클릭 한번 부탁 드립니다 ▼

감사합니다 :D