(Javascript) 자바스크립트 기초실습(1)

안녕하세요 영감을 주는 개발자 방민방민입니다. 

오늘은 Codecademy 커리큘럼에 따라 기초 문법에 대한 공부를 해 내가고자 합니다.

본 포스팅은 아래 코드카데미 Javascript 커리큘럼 중 Introduction of javascript 과정을 기반으로 하여 작성되었습니다. 참고용으로 본 포스팅을 사용하시면 될것입니다. :)

(참조 : https://www.codecademy.com/en/tracks/javascript) 

그럼 시작합니다.

1. 길이 

문자열의 길이를 출력하는 문법은 아래와 같이 length를 사용합니다. 이때 문자열의 길이를 출력하는 length 함수는 공백도 문자로 취급하여 함께 카운트 합니다. javascript 는 객체지향 언어이므로 

아래와 같이 간단한 방법으로 함수를 호출하여 다양하게 사용이 가능합니다. 

"Inspiring Bangmin".length

2. 기본 연산자 

기본 연산자는 다른 프로그래밍 언어와 크게 다르지 않습니다.

+, -, *, / 을 사용합니다. % 연산은 / 와 다르게 그 나눗셈의 나머지를 출력합니다.

3. 알림

웹페이지에서 알림창을 띄워서 사용자의 확인여부를 받는 경우가 있습니다. 이 경우 아래와 같이 confirm 이라는 문법을 사용하여 그 내부에 띄우고자 하는 메시지를 입력합니다.

confirm('This is an example of using JS to create some interaction on a website. Click OK to continue!');

그러면 아래와 같이 승인을 확인받는 메시지창을 출력하고 승인을 누르게 되면 해당 내용에 대한 true 값을 출력합니다.

4. 사용자 입력

웹상에서 메시지 창을 띄워서 사용자로부터 직접적인 입력을 받을 수도 있습니다. 이때는 prompt 라는 문법을 사용합니다. 

prompt("what is your name")
prompt("where are you from")

위와같이 입력하여 사용자로부터 name 과 home 을 받아올수 있습니다.

그런데 분명 이름과 지역을 입력하였는데 콘솔창에는 지역만을 출력합니다.. 왜그럴까요...허허.. 차후에 더 지식이 깊어지면 알수 있지 않을까 싶지만 여기서는 일단 넘어가도록 하겠습니다.

아마 변수에 해당 입력을 저장해야할것 같습니다.

5. 데이터 타입

일반적으로 String 은 "Bangmin" 과 같이 ""(quotation) 을 사용하여 표기합니다.

숫자형 Number 은 "" 없이 1234 와 같이 숫자로만 표기합니다.

true 와 false 값을 갖는 boolean 자료형도 있습니다. 아래와 같이 입력합니다.

"I'm coding like a champ".length >10

이때 콘솔은 "I'm coding like a champ" 이라는 문자열의 길이를 측정하여 10보다 큰지를 확인합니다. 

그리고 참일경우 true 를 거짓일 경우 false 를 출력합니다.

5. 콘솔

가끔은 자료 계산에서 이루어지는 몇몇 데이터들을 콘솔에서 출력하지 않는 경우가 많습니다. 이 경우 

console.log() 를 사용합니다. 이때, ( ) 안에는  console 에 출력하고자 하는 것을 입력합니다.

console.log(2*5)
console.log("Hello")

위와 같이 입력하는 경우 콘솔창은 10과 과 Hello 문자열을 각각 출력합니다.

6. 비교

비교는 다음의 문법을 사용합니다.

>  크다

<  작다

>=  크거나 같다

<=  작거나 같다

===  같다

!==  같지 않다

7. 사용자의 입력을 비교

실제로 사용자로부터 인터액티브 하게 입력되는 값에 대한 비교를 위해 간단한 예를 살펴보겠습니다.

사용자로부터 이름을 입력받을때, 해당 입력 값이 적당한 길이를 가지고 있는지를 확인해보고 싶습니다.

이 경우 아래와 같이 입력합니다.

if (confirm("Do you wanna build a snowman?")) {
    console.log("Yes I want");
}
else
{
    console.log("NO!")
}

이 웹에서는 사용자에게 Do you wanna build a snowman 이라는 출력 후에 승인을 받게되면 콘솔창에 

Yes I want  메시지를 출력합니다.

이는 간단한 예제이지만 향후에 어떤 방식으로 사용자의 입력을 이용할수 있을지에 대한 강력한 아이디어를 

주고 있습니다.:)

또한 else 를 사용하여 false 값에 대한 처리도 간단하게 해볼수있습니다.

8. N번째 문자

하나의 문자열에서 특정 몇개의 문자열을 가져오고 싶을때는 substring 함수를 사용합니다.

문자열은 시작부터 0,1,2,3 의 인덱스를 가지게 됩니다.

즉 January 에서 J는 0, a는 1, n은 2 ... 의 순서로 index 를 갖습니다. 

그런데 substring(숫자,숫자) 에서 뒤에 숫자 인덱스는 1부터 시작됩니다.....

애매모호하긴 하나 이 부분은 저도 일단 그대로 받아들여야할것같습니다.

즉 January 에서 Jan 만을 뽑기 위해서는 "January".substring(0,2) 가 아니라

"January".substring(0,3) 을 입력해야 합니다.

console.log("January".substring(0,3));
console.log("Melbourne is great".substring(0,12));
console.log("Hamburgers".substring(3,10));

위의 예를 보았을 때 위와 같이 입력하면

"January" 에서 Jan 을

"Melbourne is great" 에서 Melbourne is 를

"Hamburgers" 에서 burgers 만을 출력합니다.

9. 변수

자 바로 변수입니다. 위에서 사용자의 입력을 2번 받았을때, 두 입력 모두가 출력되지 않는 경우를 보았습니다.

이와 같이 사용자의 입력은 하나하나가 모두 자동으로 저장되지 않기 때문에 사용자의 입력이든 무엇이든 그 값을 저장할 변수가 필요합니다. 변수는 아래와 같이 선언합니다.

var varname = value;

var은 variable 의 앞 3글자를 따온 것입니다. varname 은 개발자 임의로 지정이 가능하며 value 값은 숫자, 문자열, 또는 boolean 값 모두가 입력 가능합니다!

// Use console.log to print out the length of the variable myCountry.
var myCountry = "Korea";
console.log(myCountry.length);

// Use console.log to print out the first three letters of myCountry.
console.log(myCountry.substring(0,3));

앞서 학습한 내용을 종합하여 위와같이 작성합니다.

그러면 콘솔창에는 myCountry에 저장된 값인 Korea 의 길이인 5와 substring Kor 을 출력하게됩니다.

10. 마지막

지금까지 javascript 학습에 있어 기본적이지만 강력한 힘이 될 문법에 대하여 학습해 보았습니다.

아마 프로그래밍을 해보았던 분이시라면 정말 간단한 내용일 것이고, 그렇지 않다면 어려울수도 있습니다.

최대한 자세하고 이해하기 쉽게 풀어써 두었습니다. 만약 프로그래밍이 처음이라면 절대로 읽기만 하지 마시고 

직접 코드카데미에서 작성해 보시기를 추천드립니다.

코딩은 눈으로 본다고 해서 절대로 늘지 않습니다. : )

아래의 예제를 풀어봅시다

if else 문을 활용하여 , 콘솔창에 "나는 자바 스크립트를 향한 첫 걸음을 내딛었다." 를 출력하시오.

지금까지 영감을 주는 개발자 방민방민 이었습니다. :)