Front End

[JavaScript] 연산을 해보자  – 1

[JavaScript] 연산을 해보자 – 1

Javascript
Click the link to go to the original blog site: 블로그 내용보러가기   컴퓨터가 탄생하게된 이유를 생각하면 아주 쉽게 이해 할...
Read More
[JavaScript] 문자열을 다루어 보자

[JavaScript] 문자열을 다루어 보자

Javascript
Click the link to go to the original blog site: 블로그 내용보러가기   그럼 웹 스톰을 실행합니다.   Open을 눌러 어제...
Read More
[JavaScript] 데이터 타입에 대하서 알아보자

[JavaScript] 데이터 타입에 대하서 알아보자

Javascript
Click the link to go to the original blog site: 내용 보러가기   여기서 1과 0으로 인식하는 이유는 무엇일까요? 초기 컴퓨터는...
Read More
[JavaScript] 자바스크립터 소개

[JavaScript] 자바스크립터 소개

Javascript
Click the link to go to the original blog site: 블로그 내용보러가기 웹스톰 설치 방법 http://tworab.tistory.com/51   1. 자바스크립트에 대해서 JavaScript(이하...
Read More
[JavaScript] WebStrom 설치하기

[JavaScript] WebStrom 설치하기

Javascript
Click the link to go to the original blog site: 블로그 내용보러가기   JetBrains 홈페이지 접속하기 http://www.jetbrains.com   - 홈페이지 상단에...
Read More
[JavaScript] WebStrom과 함께

[JavaScript] WebStrom과 함께

Javascript
Click the link to go to the original blog site: 블로그 내용보러가기   오늘 소개드릴 내용은 WebStorm과 JavaScript입니다.     WebStorm은 JetBrain사에서 만든 IDE...
Read More
Links/button disabled until another button is clicked:

Links/button disabled until another button is clicked:

Javascript
Links/button disabled until another button is clicked:  Click to the following link to read the article: http://stackoverflow.com/questions/14654013/links-button-disabled-until-another-button-is-clicked
Read More
[CSS study] CSS Learning Site

[CSS study] CSS Learning Site

CSS
[CSS study] CSS Learning Site Click the link to go to the blog site: http://jaewook.net/archives/375 === ▶ CSS개념을 잡기에 좋은 사이트...
Read More
Making a contact form with file upload support

Making a contact form with file upload support

HTML
Making a contact form with file upload support Click to the following link to read the article: http://www.html-form-guide.com/contact-form/contact-form-attachment.html
Read More
[JavaScript] 연산을 해보자  – 1
Javascript

[JavaScript] 연산을 해보자 – 1

Click the link to go to the original blog site: 블로그 내용보러가기

 

컴퓨터가 탄생하게된 이유를 생각하면 아주 쉽게 이해 할 수 있습니다.

인간은 창조와 상상 같은 새로운 무언가를 탄생시키기에 아주 적합한 두뇌를 가지고 있습니다.

그래서 여러가지 도구를 만들어 생활했고 인간이 가진 신체적 약점을 극복하고 오늘날 지구 상에서 가장 번창한 동물 중 하나가 되었습니다.

근데, 우리 인간이 가진 상상력은 너무나 무한하고 넘쳐나는 호기심을 조절하지 못하는 경향이 있습니다.

궁금한 것이 있으면 그 답을 알고 싶어하죠.

 

예를 들어 1,765,121,100,047,778,123,302,787,567,181,982,246,663,112,119,911 이 숫자의 제곱은 무엇일까? 하고 생각한다든지

혹은 임의의 숫자가 소수 인지 아닌지를 파악하는 것들 말이죠.

 

사람의 머리로 계산할 수 있으나 인간의 두뇌는 한 가지의 연산에 대해서 장시간의 연산을 허락하지 않습니다.

어떤 이는 수학 자체를 싫어할 수도 있고 어떤 이는 집중력이 흩어져 저 위와 같은 큰 수를 계산할 수 없게 되죠.

그렇다면 이렇게 반복적인 연산 혹은 작업을 정확하게 대신해줄 누군가가 필요합니다.

 

그것이 바로 컴퓨터죠.

현재 우리는 인터넷을 통해 웃긴 글을 보며 지내는 나날들이 더 많지만 원래 컴퓨터의 용도는 연산 입니다.

연산하지 못하는 컴퓨터는 존재할 가치가 없는 거죠. 지금도 여러분의 컴퓨터는 연산을 하고 있습니다.

그래서 연산은 컴퓨터에게 아주 중요한 기능 중 하나 입니다.

쓰다 보니 또 잡설이 길어졌군요. 본격적으로 프로그래밍에 들어가봅시다.

 

WebStorm을 실행합니다.

기존에 사용하셨던 index.html을 실행하셔도 되고 새로운 HTML 파일을 추가 해서 진행하셔도 무방합니다.

저는 새로운 HTML 파일을 추가 하겠습니다.

새 HTML 추가하기.

이름은 Calulation이라고 명명하겠습니다.

calculation은 우리나라 말로 계산, 연산이라는 뜻입니다.

공부할 때 쓰는 기본 양식입니다.

같이 공부하시는 분들은 이 기본양식을 다른 곳에다가 저장하셔도 좋고

그냥 제 블로그에서 보셔도 무방합니다.

저는 항상 이 기본 양식에서 출발하여 강좌를 진행하겠습니다.

document.write() 를 알아보자.

저번엔 <p> 태그를 통해서 HTML 화면에 결과값을 출력했으나

오늘부턴 자바스크립트에 좀 더 신경쓰기 위해

document.write() 함수를 쓰도록 할 것입니다.

간단하게 설명을 드리면 document.write(“~ 뭐가 들어가~”);

이렇게 쓰면

~뭐가 들어가~ 가 출력됩니다. ㅎㅎㅎㅎ 간단하죠?

그럼 출력해봅시다.

WebStorm에서 ALT + F2 키를 누르시면 각 브라우저 별로 실행이 가능합니다.

오늘은 연산을 공부하자!

아주 손쉽게 결과가 출력되는 것을 보실 수 있을 겁니다.

그럼 앞서 말씀드린 대로 자바스크립트의 사칙연산을 해보도록 하죠

스크립트를 작성합니다.

result라는 변수를 선언하여  1 더하기 1 연산을 해보도록 하죠.

1더하기 1 연산을 하면 result에 결과 값이 담겨지게 됩니다.

그럼 result를 출력해보죠.

document.write(result); 라고 작성하시면

위와 같이 이상한 내용이 나올 것입니다.

 

왜 이러지?

 

ㅎㅎㅎㅎ 아마 브라우저로 출력해도 아무런 내용이 나오지 않을 것입니다.

그 이유를 자세히 살펴보도록 하죠.

먼저, WebStorm에 내장된 DHTML.js를 통해 우리가 사용한 방식에

무슨 문제가 있는 지 살펴 봅시다.

정의로 이동하기!

CTRL(컨트롤)을 누르신 상태에서 document.write()에서 write를 클릭해보세요.

짠! 정의로 이동하여 DHTML.js를 보실 수 있습니다.

코드가 많이 나왔지만 두려워 하실 것 없습니다.

나중에 생각하시면 여기 있는 내용들이 “자바스크립트에서 가장 쉬운 코드이구나 ….” 하고 생각하실 겁니다.

우리가 틀린 내용은 무엇일까?

prototype.write = function(text) 이 부분을 보시면 됩니다.

프로토 타입이니 뭐니 하는 건 무시하시고 write = function(text) 이 부분만 보세요.

write라는 function에는 텍스트만 들어갈 수 있다고 하네요.

텍스트는 말 그대로 문자열만 들어갈 수 있다는 거죠.

1 + 1 = 2 인데 이것도 문자열 아닌가요??

프로그래밍에서는 숫자와 숫자의 연산의 경우 데이터 종류를 숫자로 간주하고

문자열로 간주하지 않습니다.

문자열로 변환하려면 특별한 문구가 필요하죠.

그것은 나중에 알아보도록 합시다.

result의 내용을 문자열로 바꾼다면?

이렇게 되면 document.write(result)에서 밑줄이 가는 에러 표시가 나오지 않게 되는 군요.

즉, write() 괄호 안에는 무조건 문자열만 들어가야 하네요. ㅎㅎㅎㅎ

그러면 숫자를 문자열로 바꾸어 준다면 곧바로 표시 가능하지 않을까요?

네 ^.6 맞습니다.

앞서 약간 언급했지만 숫자에서 문자열로 바꾸어 준다면 write() 함수에서 출력이 될 수 있습니다.

그럼 바꿔봅시다.

오늘도 언제나 JSHint를 도움 받아서 작성하기!!

JSHint를 사용하는 방법은 이전 편들을 보신 분들은 잘 아시겠지만

이번 편은 처음 보신 분들을 위해서 다시

ALT + Enter키

toString() 함수를 사용해 숫자를 문자로 전환하기

이전 시간에도 사용했던 toString() 함수입니다.

프로그래밍 하시면서 많이 쓰는 함수라 굳이 암기 안하셔도

머릿속에 오랫동안 기억에 남을 거에요 ㅎㅎㅎㅎ

그럼 브라우저에서 결과를 실행해봅시다.

1 + 1 은 2 !!

결과 값이 아주 정확하게 나오네요.

그럼 다른 연산도 해봅시다.

일반적인 빼기 연산 말고 음수가 나올 수 있는 상황을 만들어 보아요.

1 – 5 = ?

-4 !!

자바스크립트는 음수 표현도 할 수 있습니다.

사실, 프로그래밍에서 음수, 양수를 표현하는 것은 그리 대단한 것은 아닙니다.

ㅎㅎㅎㅎㅎ 그렇다면 이번엔 소수점 자릿수를 표현해봅시다.

2/ 10 = ? ㅎㅎㅎ 벌써 결과 나오셨나요?

분수 표현이 아닌 소숫점으로 표현되는 자바스크립트

보통 소수점으로 표현하는 것이 연산에 간결성을 유지할 수 있어서

우리가 학교에서 흔히 사용했던 분수는 찾아볼 수 없습니다.

프로그래밍에서는 소수점으로 연산을 할 수 있습니다.

 

네! 여기까지 잘 따라오셨는지 모르겠네요. ㅎㅎㅎㅎ

너무 쉽다고 생각하시는 분들이 아주 많으실 거라 생각합니다.

그럼 프로그래밍으로 구구단을 짜보는 단계로 넘어가 봅시다.

// 썌얘 아니라  //TODO 사용하기

프로그래밍을 하다보면 이 로직을 언젠간은 작성해야 하는 데 지금 당장 작성하지 못하는 경우가 있습니다.

그럴경우에 보통 // 을 써서 주석으로 남겨 놓기도 하죠.

주석은 프로그래밍 로직에는 아무런 영향을 주지 않고 코드 내부에 일종의 메모를 남길 수 있는 기능을 뜻합니다.

근데 위 사진에 보시면 일반적인 주석은 저렇게 회색빛이 나서 눈에 잘 띄지 않죠.

이러한 문제를 해결하기 위해 JetBrains 사에서 제공하는 모든 Tool에서는 TODO라는 기능을 지원합니다.

//TODO라고 써보세요.

위와 같이 색상이 바뀐 주석을 보실 수 있습니다.

나중에 큰 규모의 자바스크립트 프로그램을 작성하실 때 유용하게 사용하실 수 있을 겁니다. ㅎㅎㅎㅎ

저도 강좌를 진행하면서 계속해서 보여드릴 꺼에요. ㅎㅎ

2단을 만들어 보자

변수 gugudan 이라고 선언하고 그 초기 값을 2로 설정해줍니다.

 

gugudan에 왜 밑줄이 가지???

ㅎㅎㅎ 무시 하셔도 됩니다.

웹스톰은 사용자가 작성한 변수 명의 철자까지 검사합니다.

알아보기 쉬운 혹은 올바른 철자를 사용해 변수를 사용함으로써 코드의 가독성을 높이는 것이죠.

지금은 그냥 무시하고 다음 단계를 진행해 봅시다.

반복문을 사용하자.

프로그래밍을 이미 접하신 분들이라면 다들 한번쯤 써보셨을 겁니다.

for 반복문

모르시는 분들을 위해 간단하게 설명 드리면

var i = 1; 은 반복이 시작할 값입니다. ‘1부터 시작하겠다’는 거죠.

i<=9; 는 ‘반복이 9까지 가면 멈추겠다’ 입니다.

i++ 는 반복문이 한번 실행될 때 i의 값을 1씩 증가 시키겠다는 것입니다.

 

즉, 1부터 9까지 1단계씩 반복을 진행하겠다는 뜻이죠. ㅎ

 

근데,

반복문을 작성하다 보니 코드가 몰린 눈코입 처럼 딱 붙어 있네요.

코드를 정리 해줍시다.

CTRL(컨트롤) + ALT(알트) + L 을 눌러 보세요.

정리된 코드의 모습

for 반복문이 일정한 간격을 유지하면서 읽기 좋게 바뀌었군요.

코드 정리하는 단축키는 많이 사용하셔요.

그래야 나중에 코드를 봐도 어렵지 않게 보실 수 있습니다.

코드가 딱 붙어있으면 읽기 힘들어요.

휴~ 작성하다보니 너무 길어졌네요.

보시는 분들도 너무 길어서 질려 하시겠네요. ㅎㅎㅎ

프로그래밍의 즐거움을 드리고자 이렇게 작성하는 포스팅인데

지루함을 드리면 안되겠죠? ㅎㅎㅎ

오늘은 이만 줄이고 내일 2편을 짧게 준비해서 오도록 하겠습니다.

오늘도 좋은 밤 보내시고 좋은 꿈 꾸시길 바랍니다.

내일 뵐께요. 안뇽~ㅎㅎㅎ

[JavaScript] 문자열을 다루어 보자
Javascript

[JavaScript] 문자열을 다루어 보자

Click the link to go to the original blog site: 블로그 내용보러가기

 

그럼 웹 스톰을 실행합니다.

 

Open을 눌러 어제 만들었던 폴더를 열어줍니다.

그냥 새롭게 Create New Project를 눌러 새롭게 만들어 주셔도 무방합니다.

프로젝트 폴더에 새로운 폴더를 추가해줍니다.

여러가지 내용들을 JavaScript Project라는 폴더에 모두 보관하기 위해서죠.

이름은 JavaScript String이라는 폴더로 만들어줍니다

원하는 이름 아무거나 하셔도 무방합니다.

다음으로 넘어가볼까요?

새로운 HTML 페이지 파일도 추가해줍니다.

이름은 String_Index로 지어줍니다.

이것도 원하는 이름으로 만들어주셔도 무방합니다.

근데, 보통 웹 페이지의 첫 페이지는 Index라고 명명하기도 합니다.

<p> </p> 태그를 추가해줍니다.

위 사진 같이 p 태그를 추가 해줍니다.

<p> 태그는 Paragraph라는 뜻으로 한 페이지에 있는 단락을 나타내 줍니다.

그리고 자세히 보시면 HTML ID 값이 showMessage로 설정해져 있을 것입니다.

자바스크립트가 HTML의 특정 태그를 쉽게 찾을 수 있도록 ID 값을 설정해주는 거죠.

그 다음 스크립트 부분을 추가 해줍니다.

<script> </script> 이 부분을 <P> 태그 다음에다가 붙여주죠.

그리고 나서 Script 부분에 이제 자바스크립트 명령어를 넣어줍니다.

넣어줄 명령어는

document.getElementById(” “) 입니다.

이것에 대해서 간단하게 설명드리면 document는 Html 문서를 뜻합니다.

HTML 문서 내에서 get은 가져오겠다 무엇을?

ElementById(“rabbit”) 괄호 안에 있는 rabbit이라는 ID를 가져오겠다는 의미 입니다.

즉, 어떤 Html 문서 안에 있는 특정 Html ID값을 가진 엘리먼트를 가져오겠다는 명령이죠.

JS Hint 를 사용하자!

document.getElementById(“”)를 입력하면 ” ” 사이에서

키보드 : CTRL(컨트롤) + 스페이스(space)를 눌러주세요.

그러면 위 화면같이 showMessage라는 목록이 나오게 됩니다.

그리고 .innerHTML을 넣습니다.

여기서 .innerHTML은 showMessage라는 ID를 가진 HTML 엘리먼트에다가 “안녕하세요. 반갑습니다.” 라고 넣는다는 거죠.

그럼 웹브라우저에서는 어떻게 표시가 될까요?

한번 확인 해봅시다.

키보드 : ALT(알트) + F2 번을 부르게 되면 위와 같이 메뉴가 나타납니다.

원하는 브라우저를 선택해서 실행해봅시다.

저는 Chrome으로 실행 해보겠습니다.

그럼 브라우저에서 “안녕하세요. 반갑습니다.” 라고 표시되게 됩니다.

신기하신가요? ㅎㅎㅎㅎ 프로그래밍을 어느정도 다루어본 분들은 별로 신기하지 않을 수도 있죠.

어쨋든 다음으로 넘어가봅시다.

그렇다면 어떠한 변수를 통해서 저 문자를 표현해볼까요?

var myName = “개발 토끼”;

이렇게 적어봅시다.

그리고 “안녕하세요”라는 문자 다음에 + myName; 이라고 적어보세요.

위와 같이 다 적으셨나요?

그럼 실행해 봅시다.

이번에는 인터넷 익스플로러로 실행해보죠.

그러면 myName이라는 변수에 들어있는 “개발 토끼”라는 내용이

“안녕하세요”와 합쳐져서 위와 같이 표시되게 됩니다.

ㅎㅎㅎㅎ

여기에서 알 수 있는 것이 있죠.

[문자열 1] + [문자열] = [문자열1문자열2] 이런식으로 합쳐지게 됩니다.

그렇다면 [문자열] – [문자열]은 가능할까요? 혹은 [문자열] * [문자열]은요?

ㅎㅎㅎㅎ

아쉽게도 문자열의 합성은 + 만 사용가능합니다.

왜냐하면 예를 들어 문자열을 – 연산할 때를 가정해봅시다.

 

[안녕하세요] – [안녕!] = ?

 

이렇게 될 경우 [안녕 – 안녕]은 빼기를 통해서 소멸될 수 있겠지만 [하세요 – !] 이건 어떻게 빼야할 까요?

명확하게 결과값을 예측할 수 없죠.

 

그래서 자바스크립트는 문자열 중 특정 문자를 뺄 수 있도록 함수를 지원합니다.

그것은 바로 substring() 함수죠

substring()함수는 아주 간단합니다. 문자열의 특정 위치의 문자열만 가져오는 함수죠.

쓰는 방식은 다음 사진에서 보실 수 있습니다.

 

myName에 있는 “개발 토끼”라는 이름 중에 개발만 가져오도록 하죠.

myName.substring(0,2)를 써보세요.

그래서 그 결과값 result를

document.getElementById를 통해 출력해보세요.

그러면 결과값은 다음과 같이 출력됩니다.

“개발”이라는 문자만 표시되도록 해주죠.

원리는 간단합니다.

substring(문자열 첫번째 번호, 특정 문자열까지 번호)로 문자를 잘라버리는 거죠.

앞서 “개발 토끼”라는 것은 총 길이가 5 입니다.

왜 길이가 5일까요?

한번 알아봅시다.

스크립트를 위와 같이 변경해봅시다.

그리고 출력을 해보면 답은 ???

답은 5 입니다.

“개발 토끼”라는 문자의 길이가 총 5이죠.

표로 알아볼까요?

 개 공백
 1번 2번 3번 4번 5번

이렇기 때문에 5라는 길이죠.

 

그럼 다시 돌아가서 substring(0,2)면

 개 공백
 1번 2번 3번 4번 5번
 인덱스 0 인덱스 1 인덱스 2 인덱스 3 인덱스 4

여기서 인덱스는 컴퓨터가 숫자를 셀때 순번을 뜻합니다.

컴퓨터는 항상 숫자를 0부터 시작해서 읽습니다.

그래서 substring(0,2)는 “개발”만 표현하게 되는 것 입니다.

 

그럼 여기서 의문점이 생기죠.

3번의 공백도 포함이 된건가요???

사실 포함되지 않았습니다.

substring(0,2)는 인덱스 0번은 포함하되 인덱스 2번은 포함하지 않습니다.

그래서 인덱스 2번이 공백이 아니라 그냥 “토”라는 문자가 있었더라도

표시가 되지 않겠죠. ㅎㅎㅎㅎ

 

프로그래밍을 처음 하시는 분들은 왜 이따위로 만들어놨을까 생각하실 겁니다.

하지만, 이걸 이해하신다면 컴퓨터와 좀 더 친숙하게 지내실 수 있죠.

프로그래머는 통역사와 같습니다.

컴퓨터가 사람들을 이해할 수 있게끔 해주고

반대로 사람들이 컴퓨터를 이해할 수 있도록 도와주는

매개체와 같은 역할이죠.

 

이러한 프로그래머의 특성은 아주 매력적입니다.

여러분들도 프로그래밍을 하면서 이러한 매력을 느껴보시길 바랍니다.

오늘은 여기까지 작성하도록 하겠습니다.

 

긴글 읽어주셔서 감사합니다.

다음 시간에 또 만나요.

안뇽~

[JavaScript] 데이터 타입에 대하서 알아보자
Javascript

[JavaScript] 데이터 타입에 대하서 알아보자

Click the link to go to the original blog site: 내용 보러가기

 

여기서 1과 0으로 인식하는 이유는 무엇일까요?

초기 컴퓨터는 전기가 들어오면 1, 전기가 들어오지 않으면 0으로 인식해 참과 거짓을 구분하는 것부터 시작했습니다. 그것이 오늘날에도 이어져 온 것이죠.

따라서, 컴퓨터에게 집을 보여줬을 때 이것이 집이라는 것을 어떻게든 알려줘야 합니다. 그래야 집이라고 인식하겠죠?

더 자세히 들어가보죠.

1과 1

이것의 차이점은 무엇일까요?

사람이 이것을 봤을 때는 둘 다 1이라는 숫자 입니다.

하지만, 컴퓨터는 숫라고 인식할 수도 있고 문자라고 인식할 수도 있습니다.

즉, 컴퓨터가 바라보는 관점에서 1과 1은

1과 “1”인 것입니다.

이렇게 컴퓨터가 데이터를 인식할 수 있는 종류를 정의한 것을 데이터 타입이라고 합니다.

자세히 설명하면 첫 번째 1은 숫자 1이고 두 번째 1은 “가나다라마바사” 와 같은 문자 1로 인식하는 것이죠.

사람은 이 모두를 알아서 상황에 맞게 인식할 수 있지만, 컴퓨터는 그렇게 하질 못합니다. 따라서, 숫자인지 문자인지 정확하게 구별해줘야 하죠.

숫자와 문자를 구별해줌으로써 컴퓨터는 숫자 1에 대해서 다른 숫자와 비교하는 대소 구분 및 연산(더하기, 빼기, 나누기, 곱하기)를 할 수 있게 됩니다.

만약에 문자 1로 데이터를 준다면 대소 구분 및 연산을 할 수 없게 되겠죠?

 

자바스크립트에서 데이터 타입(종류)은 무엇이 있을까?

그렇다면 자바스크립트에서 다루는 데이터 타입에 대해서 알아봅시다.

1) 숫자 타입(Numerical Data)

숫자 타입은 우리가 생각하는 1 2 3 4 5 등 실제 숫자들을 인식하는 데이터 입니다.

2) 글자 타입(Text Data)

“안녕하세요”, “반갑습니다.”, “ㄱ” 등 글자 혹은 문자가 있는 데이터를 글자 타입 데이터라고 합니다.

만약에 “1 2 3 4 5″라고 표현했다면 이는 숫자가 아닌 글자로 표현한 데이터 입니다. 비록 숫자를 사용했지만요.

3) boolean 타입(참과 거짓)

앞서 컴퓨터는 1과 0으로 데이터를 인식한다고 했었습니다. 그래서 1이 들어오면 참, 0이 들어오면 거짓이 되는 타입을 정해준 것이 boolean 타입입니다.

자바스크립트에서는 true와 false로 값을 반환하거나 표현합니다.

4) Null 과 Undefined

Null은 데이터 타입 중에 아무것도 존재하지 않을 때 null이라고 표현합니다. 숫자, 문자 등 아무것도 없는 상태를 말이죠.

Undefined도 null과 비슷한 개념입니다. 아무것도 없죠.

근데 왜 이 2가지를 따로 분류 해놓았나요??

이것들을 구별하는 이유는 나중에 설명 드리겠습니다. 여기서 설명하기엔 너무나도 긴 설명이 필요하기 때문입니다.

이것들 외에도 객체(Obect)와 같은 타입도 있으나 이것도 추후에 자세하게 다루어 보겠습니다.

그러면 데이터 타입을 실제 자바스크립트 화면을 통해 알아보도록 합시다.

먼저 웹스톰을 실행합니다.

처음 사용하는 것이라 Create New Project를 눌러 새로운 프로젝트를 생성해 줍니다.

프로젝트 폴더 생성해주기

C 드라이브에 프로젝트를 위한 별도의 폴더를 만들도록 하겠습니다.

물론 만들지 않아도 무방합니다.

저는 소스코드를 관리하기 위해 C드라이브에 다음과 같이 폴더를 만들었습니다.

폴더명 : JavaScript Project

Empty Project를 선택 그리고 Location 변경

우리는 처음 시작이므로 빈 프로젝트로 시작하겠습니다.

프로젝트가 저장될 위치(Location)을 C드라이브에 자바스크립트 프로젝트 폴더로 변경해줍니다.

이렇게 바꿔주시면 됩니다.

웹스톰의 전체 화면

전반적으로 아주 깔끔한 WebStorm의 화면이 이제 나타났습니다.

새로운 파일을 추가 해서 자바스크립트의 데이터 타입에 대해서 알아보도록 하죠.

새 Html 파일 추가하기

왼쪽 프로젝트 폴더에서 마우스 오른쪽 버튼을 클릭 하면 위와 같이 펼침메뉴가 나오게 됩니다.

위와 같이 Html 파일을 추가 해주세요.

이름은 index.html

여기서 .html은 안 붙이셔도 자동으로 붙습니다.

Html 기본 파일 생성

그러면 위와 같이 Html 파일이 생성될 것입니다.

근데 에디터에 있는 글자 크기나 글자체가 마음에 안드는 군요. 조금 바꾸도록 하겠습니다.

바꾸는 방법은 추후 포스팅에서 알려드릴께요.

글자체 : Consolas, 글자크기 : 14

이제 소스코드 보기가 괜찮아졌네요. 계속 진행해봅시다.

자바스크립트 영역 선언

Html에서 자바스크립트를 선언하는 방법은 다양합니다.

저는 여기서 <body> </body> 태그 안에 선언해서 사용해보겠습니다.

WebStorm에는 JSHint 라는 기능이 있습니다.

아주 아주 강력한 기능이죠.

요즘 IDE에 이런거 없으면 프로그래밍 하기에 너무 불편하다고 할 만큼

개발자의 편의성을 제공하는 기능입니다.

저 위화면에서 Sc라는 글자만 입력해도 위 사진 처럼 선택 항목이 나오게 됩니다.

이 때는 간단하게 Tab 키를 눌러 주시면 자동으로 …

짠! 이렇게 자동으로 스크립트 영역을 표현해줍니다.

정말 편리하죠? ㅎㅎㅎㅎ

이건 약과니 앞으로 더 좋은 기능들을 보여드리겠습니다.

변수 선언과 그 변수의 데이터 타입을 알아보자

변수를 선언할 때는

var 변수명 = 변수값;

이런 식으로 표현합니다.

그래서 이 화면에서는 one이라는 변수를 선언하고 그 안에 숫자 1을 넣도록 하겠습니다.

그리고 typeof는 변수의 데이터 타입을 알아보도록 도와주는 것이라고 생각하시면 됩니다.

그리고 alert는 그 결과값을 웹 브라우저에서 알림 박스로 알려주는 함수라고 생각하시면 되죠.

그럼 숫자 1은 무슨 타입인지 알아볼까요?

 

웹 브라우저로 실행해보자

Html에 있는 JavaScript를 테스트 해보기 위해 WebStorm 오른쪽에 있는 웹 브라우저 선택 버튼 중 하나를 클릭하세요.

웹 개발자의 경우 Chrome, Safari, IE, Opera, Firefox 등 메이저 웹 브라우저를 다 설치하는 것이 좋습니다.

왜냐하면 웹은 모든 브라우저에서 잘 작동해야하기 때문에 모든 브라우저 테스트를 위해 모두 설치하는 것이 좋겠죠? ㅎㅎ

 

숫자 1의 데이터 타입은 number

즉, 숫자라는 이야기 입니다.

one이라는 변수에 담겨진 숫자 1은 number 숫자 데이터죠.

다른 데이터 타입도 한번 볼까요?

위와 같이 hello 변수에 “안녕하세요” 라는 문자열을 넣어봅시다

어떻게 나올까요?

이번에는 단축키를 이용해서 브라우저를 실행합시다

Alt + F2를 누르시면 위와 같이 스냅 메뉴가 나오게 됩니다.

원하는 브라우저를 선택해 테스트 해봅시다.

안녕하세요 라는 문자열은 string 타입이네요

string은 사전적 의미로 문자열이라는 뜻입니다.

즉, 문자열 데이터 타입이라는 거죠.

논외로 string은 밧줄이라는 뜻도 있습니다.

그렇다면 null을 대입해주면 어떻게 나올까요?

그러면 null 타입이라고 나오겠죠?

 

헛! Object라니 이게 무슨소리요. 브라우저 양반

나는 null을 넣었는데 너는 나에게 object를 주었어.

 

그러면 이번엔 아무것도 넣지 않은 것(unknown)을 알아보죠

과연 null이라고 나올가요?

undefined 라니!!

아무것도 넣지 않는다면 undefined라고 나오는 군요.

아주 참으로 오묘한 자바스크립트 원리입니다.

 

더이상 너무 깊게 들어가지 않겠습니다.

어짜피 나중에 논하고 싶지 않아도 논해야하 하는 문제거든요. ㅎㅎㅎㅎ

오늘은 무엇을 넣으면 어떤 타입을 가지게 되는 지 정도만 눈으로 익히시는 것만으로 충분합니다.

아마 이정도도 이해하시기 어려운 분들이 있으실 겁니다.

그러나 걱정하지마세요. 원래 모르는 상태에서 쭉 가는 거죠. ㅎㅎㅎㅎ

하다가 보면 어느 순간 이해가 되는 때가 올 것입니다.

중요한 건 매일 매일 공부하는 습관이 중요하죠.

저도 되도록 매일매일 포스트를 작성하도록 하겠습니다.

이 글을 보시는 분들도 자주 들어오셔 그냥 제가 적어놓은 글을 쭉 읽으시는 것만으로도

도움이 될 수 있도록 하겠습니다.

긴글 읽어주셔서 감사합니다.

내일은 더 좋은 내용을 찾아뵐께요. ㅎㅎㅎㅎㅎ

[JavaScript] 자바스크립터 소개
Javascript

[JavaScript] 자바스크립터 소개

Click the link to go to the original blog site: 블로그 내용보러가기

웹스톰 설치 방법

http://tworab.tistory.com/51

 

1. 자바스크립트에 대해서

JavaScript(이하 : 자바스크립트)는 웹 프로그래밍에서 가장 중요한 중심에 있는 프로그래밍 언어입니다. 정적(움직임이 없는)인 HTML과 CSS로 이루어진 웹 페이지를 동적(움직임이 있는) 페이지로 바꾸어주는 중요한 역할을 하죠.

예를 들어, 사용자가 마우스를 통해 버튼을 클릭 한다든지, 멈춰있는 이미지를 애니메이션처럼 움직이도록 한다는 등 웹 페이지를 사용자와 소통할 수 있도록 해주는 중요한 매개체 입니다.

그래서 자바스크립트는 웹 프로그래머라면 반드시 배워야할 프로그래밍 언어인 것입니다. 꼭 프로그래머만 배워야 할까요?

웹을 통해 서비스를 구현하고자 하는 일반인 분들도 필수적으로 알아야 할 언어인 것입니다.

 

 

2. 자바스크립트로 할 수 있는 것은 무엇인가?

먼저 움직임이 있는 웹 사이트를 만들 수 있습니다. 아무런 움직임이 없는 웹 사이트는 일반적인 HTML과 CSS만 있어도 구현할 수 있습니다. 하지만, 좀 더 다양한 기능을 넣고자 할 때는 자바스크립트가 있어야 하죠.

두 번째는 게임을 만들 수 있습니다. 게임을 개발할 수 있도록 도와주는 자바스크립트 프레임워크를 이용해 자유롭게 만들 수 있고 이를 웹을 통해 누구나 이용할 수 있도록 배포할 수 있습니다. 데스크톱 컴퓨터, 휴대폰, 태블릿 PC 등 인터넷만 연결되어 있다면 다양한 플랫폼에서 실행 가능하죠.

세 번째는 서버를 만들 수 있습니다. 서버는 데이터베이스를 담고 있는 정보를 사용자들에게 뿌려주는 역할을 하죠. 예전 서버 프로그램을 구현하기 위해서는 C++, JAVA, C# 등 종합 컴파일 언어를 사용해야 했지만, 지금은 구글(Google)에서 발표한 Node.js 프레임 워크를 통해서 자바스크립트로 서버를 구현할 수 있습니다.

 

 

3. 자바스크립트를 만들어보자.

자바스크립트 파일은 아주 간단하게 만들 수 있습니다. OS를 윈도우를 이용하시든 Apple OS X를 이용하시든지 동일한 방법으로 만들 수 있죠.

먼저 윈도우 기준으로 설명 드리겠습니다.

 

1) 메모장 열기
– 윈도우 메모장을 열어줍니다. 사진과 같이 메모장을 만들어도 무방합니다.

 

 

 

2) 다른 이름으로 저장하기
– 아무 이름이나 저장합니다. 그냥 TXT 파일로 저장하는 거죠.

 

 

3) 확장자 바꾸기
– 확장명을 파일이름.js로 바꾸어 줍니다.

 

 

그러면 자바스크립트 파일이 완성이 되죠.

안에 아무것도 없지만 그냥 더블 클릭해서 열기를 하게 되면 다음과 같은 화면이 나오게 됩니다.

 

 

웹스톰을 설치하신 분들은 웹스톰을 클릭해주세요.

 

 

그럼 웹스톰이 실행되면서 이렇게 js 파일로 표시되게 됩니다.

여기에다가 실제 자바스크립트 프로그래밍을 진행하는 거죠.

 

 

 

4. 자바스크립트를 본격적으로 공부하기 전에

공부를 시작하기 전에 우선 아셔야 할 사항이 있습니다.

지금 제가 작성하는 기준은 기본적인 프로그래밍 지식이 부족해도 무방하지만 웹에 대한 기초는 가지고 있으셔야 합니다. HTML은 무엇인지 웹 브라우저는 무엇인지 정도 말이죠.

하지만, 자바스크립트 강좌를 아주 쉽게 설명해서 적을 예정입니다. 아이슈타인이 말하길

 

“무언가를 정확하게 알고 있다면 아무리 어려운 것이라도 유치원 아이에게 설명할 수 있다”

라고 말이죠.

저도 이 말에 동감하는 바입니다. 아주 쉽게 설명할 수 있어야 아주 정확하게 이해하는 것이 되는 것이죠.

최대한 쉽게 서술해서 보는 독자분들이 아주 친숙하게 접근할 수 있도록 제가 많은 도움을 드리도록 하겠습니다.

 

 

5. 그 외에 자바스크립트에 대해서

– 자바스크립트는 기본적으로 HTML과 같이 사용되어야 결과를 확인하고 프로그래밍을 할 수 있습니다.

– 자바스크립트는 코드를 한 줄 한 줄 읽어서 실하기 때문에 인터프리터 언어라고도 합니다.

– 자바스크립트(JavaScript)는 자바(Java)와 연관성 없는 프로그래밍 언어입니다.

– 자바스크립트는 넷스케이프(NetScape)사 프로그래머 브렌든 아이크(Brendan Eich)가 처음 모카(Mocha)라는 이름으로 만들었으며, 이후 라이브 스크립트(LiveScript)로 이름이 변경되었다가 최종적으로 자바스크립트(JavaScript)로 불리게 되었습니다.

 

이렇게 해서 자바스크립트 소개를 간단히 마치겠습니다.

추후에 추가적인 내용을 첨부해 더 나은 자료가 될 수 있도록 노력하겠습니다.

읽어주셔서 너무 감사합니다.

다음 시간에 또 만나요 ^.^

[JavaScript] WebStrom 설치하기
Javascript

[JavaScript] WebStrom 설치하기

Click the link to go to the original blog site: 블로그 내용보러가기

 

JetBrains 홈페이지 접속하기

http://www.jetbrains.com

 

– 홈페이지 상단에 PRODUCTS 클릭 –

여기 PRODUCTS를 클릭하게 되면 다양한 JetBrains 사의 제품들을 보실 수 있습니다.

하지만, 우리에게 필요한 것은 WebStorm이죠? ㅎㅎㅎ

 

 

 

– WebStorm 클릭 –

 

 

 

 

– Download WebStorm 클릭 –

 

 

 

– 다운로드 감사 페이지 –

웹스톰을 다운로드 해줘서 너무 감사하다는 문구가 나오는 군요.

저는 오히려 제가 감사하다고 생각합니다.

아주 훌륭한 프로그램을 이렇게 만들어서 배포해주니 말입니다.

이 페이지는 다운로드가 자동으로 이루어지는 페이지 입니다.

 

근데 가끔 인터넷 익스플로러 구 버전을 이용하시는 분들 같은 경우 자동 다운로드가 나오지 않을 수 있습니다.

 

해결책 : 화면에 파란색 큰 글씨로 HTTP or HTTPS 중 하나를 클릭하면 자동으로 다운로드가 시작됩니다.

 

[JavaScript] WebStrom과 함께
Javascript

[JavaScript] WebStrom과 함께

Click the link to go to the original blog site: 블로그 내용보러가기

 

오늘 소개드릴 내용은 WebStorm과 JavaScript입니다.

 

 

WebStorm은 JetBrain사에서 만든 IDE 프로그램 입니다.

 

JetBrains 공식 홈페이지

http://www.jetbrains.com

 

이름에 Web 이라는 단어가 붙었듯이 HTMLCSSJavaScript 등 Client Side 개발을 주로 할 수 있는 통합 개발 환경(IDE)입니다.

하지만, 요즘 JavaScript를 통한 서버 구현도 가능한 기술이 나오기 시작했는데 대표적인 예가 Google에서 발표한 Node.js다. 이것 또한, WebStorm으로 개발 가능하기 때문에 JavaScript 기반 Server Side 개발도 가능합니다.

 

 

JavaScript를 공부하는 개인적인 이유

.net 개발자로 활동하면서 웹 개발 같은 경우 C# 기반인 asp.net을 사용해었습니다. 하지만, 시대가 변화함에 따라 Server Side(서버 측)에서 해줄 일은 DB 통신뿐 실제로는 거의 대부분 JavaScript가 대체하고 있죠. 따라서, Client Side(사용자 측)에서 많은 일들을 해야 하므로 JavaScript를 필연적으로 공부해야 한다는 뜻이죠.

 

 

JavaScript IDE는 어디에?

그런데 JavaScript 개발에 있어 완벽한 편의성을 제공하는 IDE가 없었습니다. C# 같은 경우 Visual Studio, Java 같은 경우 Eclipse라는 도구들이 존재하지만 JavaScript는 아직까지 Full IDE가 존재하지 않았습니다.

하지만, 웹 기술의 발달에 따라 점차 JavaScript 개발 도구가 만들어지기 시작했고. JetBrains 사는 2010년 5월 27일 WebStorm을 발표하게 됩니다. 맨 처음 WebStorm은 JavaScript를 위한 것이라기 보다 Html 기반 웹 페이지 개발에 중점을 가지고 있었다. 그러다 JavaScript 개발에 편의성을 추가하기 시작해 오늘날의 WebStorm IDE가 되었습니다.

 

 

– JetBrains 홈페이지에서 찾은 WebStorm UI –

 

 

WebStorm을 선택한 이유

 

일단 첫 번째, JetBrains 사에서 개발한 개발도구들은 아주 견고하게 잘 만들어졌고 생각합니다.

JetBrains 사에서 만든 제품 중 Intelli J를 잠깐 이용해봤는데 Java 개발자들이 많이 쓰는 Eclipse와는 차원이 다른 경험을 제공해주었죠.

Eclipse(이하: 이클립스)같은 경우 IDE 내부 버그가 아직 존재하며 그 버그가 단시간에 수정되지 않는 점 입니다. 무료로 이용할 수 있다는 장점 외에는 개발 측면에서 장점이 될 수 있는 것들이 많지 않은 것이 사실입니다. 하지만, JetBrains사에서 제공하는 개발 도구는 모두 유료인데 유료인 만큼 이클립스와 다른 차원의 개발도구 품질을 제공합니다. 그래서 WebStorm 또한 믿음이 가는 제품이라 생각합니다.

 

두 번째, 외국 Front-end 엔지니어들이 추천하는 IDE이다.

Google에서 JavaScript IDE Recommendation 이라고 검색하면 꼭 빼놓지 않고 WebStorm을 추천한다. 그리고 자바스크립트에 관해 공부하는 방법을 알려주는 웹사이트에서도 WebStorm을 사용하도록 권장하고 있습니다.

 

제목: How to Learn JavaScript Properly

자바스크립트 제대로 공부하는 방법

 

원문 주소http://javascriptissexy.com/how-to-learn-javascript-properly/

번역 주소https://nolboo.github.io/blog/2014/03/13/how-to-learn-javascript-properly/

(놀부님 블로그)

 

이 외에도 다양한 이유가 있지만 차차 설명 드리도록 하겠습니다.

 

 

유료 버전인데 어떻게 이용하는가? 샀는가?

JetBrains 사에서 제공하는 ReSharper는 직접 구매했으나 WebStorm과 IntelliJ는 학생 라이선스를 통해서 이용하고 있습니다.

 

학생 라이선스 얻는 방법

http://tworab.tistory.com/47

 

아마 많은 분들이 이런 생각이 들 것입니다. 무료 다른 툴을 이용하면 되는데 굳이 유료 개발 도구를 이용해야 하는 지 말입니다. 개발의 완성도와 편의성을 생각한다면 그만큼의 가치가 있습니다. 꼭 구입해서 혹은 30일 평가판이라도 이용해보시길 권장합니다.

 

 

– 웹스톰 가격 –

 

어쨋든 이렇게 해서 저는 WebStorm이라는 강력한 IDE를 가지고 JavaScript 프로그래밍을 공부하려고 합니다.

주기적으로 작성해서 가치 있는 자료 올리도록 하겠습니다.

 

읽어주셔서 감사합니다.

내일 또 뵈요 ^.^

Links/button disabled until another button is clicked:
Javascript

Links/button disabled until another button is clicked:

Links/button disabled until another button is clicked: 

Click to the following link to read the article: http://stackoverflow.com/questions/14654013/links-button-disabled-until-another-button-is-clicked

[CSS study] CSS Learning Site
CSS

[CSS study] CSS Learning Site

[CSS study] CSS Learning Site

Click the link to go to the blog site: http://jaewook.net/archives/375

===

▶ CSS개념을 잡기에 좋은 사이트 (아주쉽게 설명 카툰으로) -한글

▶ CSS에 대해 공부하기좋은 사이트틀 (영문)

▶ CSS로 구성된 사이트들

 

Making a contact form with file upload support
HTML

Making a contact form with file upload support

Making a contact form with file upload support

Click to the following link to read the article: http://www.html-form-guide.com/contact-form/contact-form-attachment.html