오늘은 저번시간에 이어서 Javascript 를 배운 시간입니다.
저번시간까지는 html 이라는 뼈대를 만들고 css 로 이쁘게 치장을 해주었다면 이번 시간부터는 이쁘게 완성된 작품에 생동감을 불어 넣을 수 있는 동적인 기능을 활용할수있는 언어를 배우게 되었습니다.
다른언어의 모든 시작은 Hello world! 로 시작하게 되는데
자바스크립트에서는
console.log('hello world'); // hello world의 문법으로 consol.log 를 사용해 로그 창에 원하는 문구를 작성할 수 있습니다.
JavaScript 엔진이 코드 읽는 법
“컴퓨터는 0과 1로 이루어져 있다.”라고 많이 들어보셨을 겁니다. 실제로 그렇습니다. 우리가 사용하는 일반적인 컴퓨터는 0과 1의 조합으로 모든 정보를 표현하고 이해합니다. 이를 기계어라고 부릅니다.
그런데 자바스크립트(JavaScript)는 그렇지 않습니다. 영어도 있고, 기호도 있고, 숫자도 있습니다. 이렇게 사람이 다룰 수 있게 일정한 문법과 의미를 지닌 언어를 프로그래밍 언어라고 부릅니다. JavaScript도 프로그래밍 언어 중 하나입니다. JavaScript 엔진으로 실행할 수 있습니다.
let ourMission = 'Unlock Human Potential';
let JavaScriptWasInventedBy = 'Brendan Eich';
let JavaScriptWasInventedIn = 1995;
i++;
i--;JavaScript 엔진은 코드를 위에서부터 아래로 코드를 읽고, 해석하고, 평가하다가 문제가 있으면 에러를 발생시키고, 해당 지점에서 코드 실행을 바로 중단합니다.
영어도 ABC와 5형식부터 배우는 것 처럼, JavaScript도 기초 문법부터 충실하게 학습해야 합니다. 다만, 너무 어려운 JavaScript의 특이한 동작이나 문법까지 자세히 배울 필요는 없습니다. 우리나라 말을 하기 위해서 훈민정음을 처음부터 배울 필요가 없는 것 처럼, JavaScript도 가장 쉽고 기초적인 문법부터 학습하는 게 좋습니다.
주석 하는법
각자 코딩하는 법과 초보자들은 이게 어떤 코드인지 모를 수도있어 주석이라는 것을 작성 하는데 무리 직관적이고 간결하게 코드를 작성하려 해도, 내가 작성한 코드를 다른 개발자에게 쉽게 설명하기 어려웠습니다. 과거의 내가 열심히 작성했던 코드를 왜 그렇게 작성했는지도 기억하기 쉽지 않았습니다.
그래서 코드에 간단히 메모를 하기 위해 주석(comment)를 추가했습니다. JavaScript에서 주석은 // 다음에 작성하거나, /, / 사이에 작성하면 됩니다. 주석 처리된 코드는 JavaScript 엔진이 인식하지 않기 때문에 자유롭게 사람의 언어, 자연어를 작성할 수 있습니다.
'hello world';
/*
여러 줄의 코드를 주석 처리할 수 있습니다.
console.log('Hello');
*/자바스크립트 타입 3가지
Number 타입
JavaScript의 여러 데이터 타입 중 Number는 일상생활에서 흔히 접할 수 있는 숫자를 자바스크립트에서 표현하기 위한 데이터 타입입니다. 정수(integer)와 실수(float)을 모두 표현할 수 있습니다.
100; -100; 100.123
과 같이 정수를 표현할수 있고 음수를 표현할 수 있으면 실수를 표현할 수 있습니다.
typeof 연산자로 해당 값이 숫자 타입 인지도 확인 할수있습니다.
typeof 100;
typeof -100;
typeof 100.123;
세개다 'number' 값인 것을 확인 할 수 있습니다.
자바스크립트에서 자주쓰이는 Math 내장 객체입니다.
String 타입
JavaScript 데이터 타입 String(문자열)은 인간의 언어, 자연어를 JavaScript에서 표현하기 위한 데이터 타입입니다. 따옴표(’), 쌍따옴표(”), 백틱(')으로 감싸면 됩니다. 맥북의 경우 백틱은 영어로 전환하고 물결(~)을 누르면 입력할 수 있습니다.
한자나 이모지와 같은 특수문자도 문자열로 만들 수 있고, 숫자와 문자를 조합해서 문자열로 만들 수도 있습니다. 특히 백틱으로 만든 문자열은 줄바꿈도 가능합니다.
- 로 문자열을 이어붙일 수 있습니다. 문자열과 문자열을 이어붙일 때의 + 는 문자열 연결 연산자로써 쓰입니다. 다른 타입과 이어붙이려고 하면 모두 문자열로 변합니다. 특히, 숫자와 이어붙이기를 시도하다가 예상 못한 결과를 얻지 않도록 조심합니다. 위 이유로 가능하면 다른 타입 간의 연산을 하지 않도록 조심해야 합니다.
문자열에는 length 속성을 이용해 문자간의 길이 파악도 가능합니다.
console.log('전예훈'.length); // 3
문자열의 각 문자는 순서를 가지고 있습니다. 각 문자가 몇 번째에 위치하는지 인덱스(Index)로 확인할 수 있습니다. 첫 번째 문자의 인덱스는 0입니다. JavaScript는 우리 일상생활에서 순서를 셀 때 1부터 1, 2, 3 … 세는 것이 아니고, 0부터 세는 점을 주의해주세요. 이를 Zero-based numbering이라고 합니다.
문자열 주요 메서드
자주쓰이는 문자열의 유용한 메서드의 일부입니다.
Boolean 타입
Boolean(불리언)은 사실 관계를 구분하기 위한 타입입니다. 불리언 타입의 값은 true 혹은 false 둘 중 하나입니다.
true;
flase;
2가지로 존재하게 됩니다.
비교연산자는 두 값이 같은지 다른지를 확인 할때 유용합니다.
=== , !== : 엄격한 동치 연산자 두 피연산자의 값과 타입이 같으면 true, 다르면 false 를 반환합니다. 엄격한 동치 연산자는 보이는 값이 같아도, 두 값의 타입이 다르면 false 가 됩니다.
123 === (100 + 23); // true ("123의 값과 100 + 23의 값은 같다."는 사실이기 때문에 true)
123 === '123'; // false ("123의 값과 '123'의 값은 같다."는 사실이 아니기 때문에 false)
123 !== (100 + 23); // false ("123의 값과 100 + 23의 값은 같지 않다."는 사실이기 아니기 때문에 false)
123 !== '123'; // true ("123의 값과 '123'의 값은 같지 않다."는 사실이기 때문에 true)
==, != : 느슨한 동치 연산자 느슨한 동치 연산자는 “대체로” 타입이 달라도 값이 같으면 true, 다르면 false를 반환합니다. 이렇게 “느슨하게” 동치 여부를 판단하기 때문에 예외가 많아 현대 웹 개발에서는 사용을 권장하지 않습니다. 참고로 다른 프로그래밍 언어에서는 == , != 를 주로 사용하는데, JavaScript에서는 ===, !== 로 비교해야 합니다.
100 > 200; // false ("100은 200보다 크다."는 거짓)
200 > 100; // true ("200은 100보다 크다."는 참)
100 >= 100; // true ("100은 100보다 크거나 같다."는 참)
200 <= 100; // false ("200은 100보다 작거나 같다."는 거짓)
논리연산자
논리연산자는 두값 간의 논리 관계를 확인 할 수 있는데
|| 논리합 ( OR) 로 두 값중 하나만 true여도 true 값으로 반환 합니다.
두 값이 false 면 false 로 판단합니다.
true || false; // true
false || true; // true
100 > 200 || 200 > 100; // true ("100은 200보다 크다" 혹은 "200은 100보다 크다" 중 하나는 true)
&&: 논리곱 (AND)
두 값이 모두 true면 true 로 판단합니다. 둘중 하나도 false 면 false
rue && true // true
200 > 100 && 20 > 10; // true!:부정(NOT)
오른쪽 피연산자의 반대의 사실을 반환합니다.
!true // false
!(100 > 200) // true