비전공자를 위한 Javascript_#1편

안녕하세요!

매일 매일 도약하는 개발자 dany입니다~:-0

오늘은 Javascript에서

                                                       1. 변수

                                                       2. 자료형

                                                       3. alert, prompt, confirm

                                                    

이 4가지를 배워보도록 할게요~!

 

#0편에서 알려드린 코드펜 사용법 잊지 않으셨죠?

비전공자를 위한 Javascript_#0편 (tistory.com)

비전공자를 위한 Javascript_#0편

 4가지를 알고들어가기 전에 

//은 주석입니다. 

//처리된 코드는 실행할 때 무시됩니다.  

주석을 쓰는 이유는 개발할 떄 참고해야하는 점이나

기억해야 될 내용이 있을 때 

주석을 달아놓으면 다른 사람이 코드를 이해하는데

도움이 되기 때문에 사용하는 것이랍니다!

 

1. 변수

Javascript에서 변수는 어떤 것을 의미할까요? 

변수는 어떤 정보에 이름을 붙이고 싶을 때 사용합니다. 

 

예를 들어볼까요? 

name= "Dany"; 

age= 22; 

 

이런식으로 말이죠!

name이라는 변수에는 Dany라는 값이 들어가 있고, 

age라는 변수에는 22라는 값이 들어가 있습니다! 

 

참고로,

;(세미콜론)

한줄이 끝났다라는 것을의미합니다

 

name= "Dany";

age= 22; 

 

아 근데 왜 name이라는 변수의 값에만 

"" 따옴표가 들어가나요?

에러가 생기지 않으려면

Javascript에서 문자열(string)은 

항상 따옴표로 감싸줘야해요!

그냥 규칙일 뿐이니 자세히 이해할 필요는 없습니다!

ex) '자바스크립트 재미있어!' 

 

참고로, 

어떤 '따옴표' , "겹따옴표"

아무거나 써줘도 상관없다는 사실!

 

 

2. 자료형

앞에서 name변수에는 Dany라는 값과 

age라는 변수에는 22라는 값을 선언했습니다!

 

name= "Dany";

age= 22; 

 

 

See the Pen by danykde (@danykde) on CodePen.

문자형 (string)

큰따옴표와 작은 따옴표는 상관이 없습니다.

이렇게 $와 {}사이에 변수를 써주면 변환되어서 

"my name is dany" 라고 표현되어야 합니다!

13줄처럼 표현식을 넣어 22살임을 선언할 수도 있습니다.

 

 

숫자형

const age=30; //숫자형 Number

Const PI = 3.14; //소수점도 표현도 가능

숫자형은 사칙 연산이 가능합니다 

+더하기

-뺴기

/나누기

%나머지 

 

Boolean

논리적인 요소를 나타내고 

True는 참, 

false는 거짓을 의미합니다.

 

위의 사진처럼 

 name에는 dany라고 선언되어 있기에 True

Age는 22이니깐 40이여도 크지가않기 때문에

console창에 False라고 뜹니다. 

 

Null과 undefined 

Null은 존재하지 않는 값, 자바스크립트에서는 
null은 객체가 아닙니다

Undefined는 값이 할당되지 않음

 

 

 

Type of 형

 

변수를 본인이 직접 사용했다면 typeof를 거의 사용할일이 없습니다.

왜?

내가 짠 변수이기에 무슨 형인지 다 알고 있기 때문입니다. 

하지만 다른 개발자가 작성한 변수의 타입을 알아야하거나 

혹은 api 통신 등을 처리 해야할 때 많이 사용합니다.

 

 

자료형 GGull TIp!

 

여기서 주의할 점이 

실수로 일반 따옴표를 가져오면 

변수명을 그대로 가져오므로 조심하셔야해요!

 

사실 문자형에서도 더하기를 사용할 수 있다는 사실!

문자형과 문자형을 더하면

하나의 문자로 합쳐집니다.

또는

숫자형과 문자형을

섞어서 더할 수도 있어요!

이 때는 문자형을 바뀐다는 사실! 꼭 기억해주세요

 

 

 

    3. alert, prompt, confirm

사용자와 상호작용할 수 있는

대화상자 3가지를 알아보겠습니다!

 

alert 알려줌

promot 입력받음

confirm 확인받음

alert()
메세지를 띄우고 사용자가
확인 버튼 누르기 전까지 계속 떠있습니다.
일반적으로 정보를 알린다라는 정도로 사용합니다.

prompt()

사용자에게 어떤 값을 입력 받을 떄 사용합니다.

 

위 코드와 Prompt를 이용하여 

입력받을 수 있는 박스를 만들 수 있습니다.

저기다 이름을 입력하고 확인하면 

 

 

alert이 되고,  입력했던 이름이 들어가게 됩니다. 

 

Confirm()

이름에서도 알 수 있듯이 뭔가 확인 받을 때 

사용할 수 있습니다.

이렇게 confirm을 이용해서 실행할 수 있습니다.

확인을 누르면 True

취소를 누르면 False가 나옵니다. (console창에서 확인)

 

 

단점 ㅜㅜ

창이 떠있는 동안에 스크립크가 일시 정지됨.
스타일링이 불가함 위치와 모양을 못정함
CSS와 HTML을 만드는 창들도 많이 사용한다.

그러나 이런 단점들이 있어도 
basic method는 빠르고 간단하게 적영 가능한 
장점 때문에 굉장히 많이 사용되고 있다는 사실!