JavaScript의 간단 정리와 출력

JavaScript가 프론트엔드에서 중요한 이유는 정적페이지가 아닌 조금 더 동적인 페이지를 만들기 위함이죠. 항상 일정하게 똑같은 페이지만 보여주는 HTML과 CSS는 사용자의 인터페이스로 하여금 지루함을 느낄 수 있을텐데요. HTML과 CSS을 포함해 JavaScript를 활용하면 웹 페이지 내에서 복잡한 기능을 구현할 수 있도록 도와주니, 사람들은 이를 스크립팅 언어라고도 부릅니다.

 

한줄 요약으로 정리하자면 자바스크립트로 구현할 수 있는 것은 우리가 옛날에 즐겨 보았던 네이버의 실시간 검색어, 혹은 현재 자주 사용하는 실시간 날씨, 주식 등이죠.

1. JavaScript 의 사용

JavaScript에서는 중복 값의 변수를 사용할 때 에러를 발생시키지 않는 경우가 종종 있는데요 이를 방지하기 위해서 스크립트를 실행하기 전에는 use strict를 선언해서 이를 허용하지 않는다는 것을 설정해주어야합니다.

'

use strict'

 

2. JavaScript 는 자료형을 따로 작성하지 않는다.

자바스크립트는 변수를 사용할 수 있지만, Java처럼, 자료형을 작성하지 않아도 됩니다. 변수의 대입되는 데이터의 형태에 따라서 자동으로 변수의 자료형이 결정되기 때문이죠. 또한 int대신 var 혹은 let을 이용하여, 데이터의 값을 지정해줄 수 있습니다.

 

var e = 1000;

console.log('e:'+ e);

var d = 100;

console.log('d:'+ d);

 

 

3. 문자열 포맷팅은 '백티'를 이용해서 데이터를 출력합니다.

만일, 여러개를 한꺼번에 출력하기를 원한다면, 콤마를 사용해서 출력할 수 있고 예시)console.log(변수1,변수2,변수3);

프로그래밍에서 가장 많이 사용했던 '+'는, 문자와 숫자사이에서는 연결하는 역할을하지만, 숫자와 숫자 사이에서는 연산하는 역할을 하게 됩니다. 

아래의 예시처럼 a값이 20이라는 정수를, b 값에 8이라는 정수를, c값에 자바스크립트라는 문자열을 선언해주고 '+'를 이용한다면 문자열을 연결해주는 것을, 그리고 연산을 해주는 것을 볼 수 있습니다.

var a = 20;
var b = 8;
var c = "자바스크립트";


var str2 = "저는 "+(a + b)+"살이고"+ c +"좋아합니다";
console.log(str2);

만일 백티를 사용한다면 어떻게 표현할까요?

백티는 우리 키보드 숫자 1 와 느낌표 ! 옆에 '`'을 이용해서 작성해주면 되는데요. `을 이용해서 작성해준다고 했을 때는, '${}' : 이를 플레이스 홀더라고 부릅니다. 기호를 함께 사용해줄 수 있습니다. 연산을 할 데이터와, 변수를 넣어서 사용할 수 있는데요. 이는 조금 더  문자열을 간단하게 사용하기 위해서 백티를 사용하는 것이랍니다.

 

-더 궁금하신 분들은 백티를 검색해보세요 : 따옴표와 더하기 방식이 아닌 템플릿 리터럴 어쩌고 나옵니다. 부호에 관한 내용은 자바스크립트 카테고리에서 '부호'라고 검색해주세요.

var str3 = `저는 ${a + b}살이고 ${c}를 좋아합니다.`;
console.log(str3);

 

4. 내가 작성한 명령어의 출력창을 확인해보고 싶다면?

JavaScript의 화면에는 console.log(데이터)를 작성해서 HTML의 웹을 켠 후 F12를 눌러주면 됩니다.

 

console.log(데이터값)