📌JavaScript

💡HTML 파일과 자바스크립트 연결하기

내부 스크립트 방법(internal script) : HTML 문서 안에서 script 태그의 콘텐츠 영역에 자바스크립트 코드를 작성한다.

<script>
  document.write("스크립트 작성");
</script>

외부 스크립트 방법(external script) : 별도의 js 확장자 파일을 만들어 자바스크립트 코드를 작성하고 이 파일을 HTML 문서 안에서 script 태그로 연결한다.

<!-- 외부 js 파일 연결방법의 예 -->
<script src="../js/day08_js1.js"></script>

💬script 태그는 웹 브라우저 화면이 표시되는 것에 영향을 미치지 않도록 body 태그가 끝나기 전의 위치에 사용하도록 한다.

💡시작하기에 앞서...

자바스크립트 언어는 인터프리터 방식의 언어이다. 한 줄씩 수행하다가 오류가 발생하면 즉시 실행이 종료되고 오류 메시지와 오류가 발생한 줄 번호를 웹 브라우저의 콘솔창에 출력한다.

console.log("Hello World!");

console.log("After");
consol.log("After2"); //console에 오타 발생
console.log("After3");
console.log("After4");

🔽실행결과

-> 4번 라인의 오류 메시지 출력 후 그 아래로는 실행이 되지 않은 결과를 볼 수 있다.

📌JavaScript 기초문법

💡변수

변수는 값이 변하는 데이터를 저장하고 관리하기 위한 공간이다. 자바스크립트는 변수에 타입을 나누지 않는다. 변수 선언 시 변수를 생성하고 값을 저장하는 문법에서 var, let, const 키워드를 사용해 변수의 식별자를 지정할 수 있다.

📖 변수선언 var

console.log(numv); //선언 이전에도 수행은 된다. 이는 호이스팅의 개념.

var numv = 400;
console.log(numv);
numv = 500;
console.log(numv);

var numv = 1000; //동일한 변수명을 선언함에도 오류가 발생하지 않았다.
console.log(numv);

🔽실행 결과

-> 위에 주석으로 언급된 호이스팅(hoisting)이란 var 키워드로 변수를 선언하고 할당했을 때, 변수 선언을 자바스크립트의 스코프(scope) 맨 위로 올려 실행하는 것이다. 실제로 numv라는 변수가 선언되지 않았음에도 console.log(numv); 실행 시 오류가 발생하지 않고 undifined가 출력된 결과를 볼 수 있다. 또, 동일한 변수명을 재선언했음에도 오류가 발생하지 않고 출력되는 결과도 볼 수 있다.

📖 변수 선언 let

console.log(numv);
let numv = 400;

🔽실행 결과

런타임에러! let의 경우 var와 달리 선언이 되지 않은 변수 사용 시 오류 메시지로 출력해준다.

let numv = 400;
console.log(numv);
let numv = 1000; //let은 동일한 변수명을 재선언하면 컴파일 에러가 발생하므로 이렇게도 사용할 수 없다.

📖 변수 선언 const
상수(constant)는 변하지 않는 수이다. const 키워드는 재할당이 안 되는 특징 때문에 상수 변수를 선언할 때 사용하는 키워드라고 하기도 한다.

const num1 = 10;

console.log("아래 num1출력");
console.log(num1);

num1 = 20;
console.log(num1);

🔽실행 결과

-> 상수에 다른 값을 넣어 런타임에러가 발생한 결과를 볼 수 있다.

💡문자열

문자열은 큰따옴표나 작은따옴표 다 사용가능하다.

let str = "문자열";
console.log(str);

let str1 = "문자열";
let str2 = '문자열';
console.log(str1);
console.log(str2);

//문자열에 포함되지 않은 따옴표로 감싸서 출력
let str3 = "문자열 중에 '작은따옴표'를 출력";
let str4 = '문자열 중에 "큰따옴표"를 출력';
console.log(str3);
console.log(str4);
let str5 = "문자열 '작은' " + '"큰따옴표" 만들어놓고';
console.log(str5);

//이스케이프 문자를 이용해 따옴표 출력
let str6 = "문자열 '작은' \"큰따옴표\"만들어놓고";
console.log(str6);
console.log(str5+str6); //문자열 더하기

//백틱을 이용한 따옴표 출력
let str7 = `백틱으로 감싼 문자열 "큰따옴표" '작은따옴표'`;
console.log(str7);

//문자열 더하기
let s1 = "대한민국";
let s2 = "천안시";
let s3 = "교육실";
console.log(s1 + "충남" + s2 + "휴먼" + s3);

//백틱(`)과 달러($)의 활용
console.log(`${s1} 충남 ${s2} 휴먼 ${s3}`);

🔽실행 결과

💡숫자형

let num1 = 10;
let num2 = 20.5;
let num3 = 100;
let num4 = 550.555;

console.log(num1+num2); //30.5
console.log(num3+num4); //650.555

🔽실행 결과

-> 자바스크립트는 변수에 타입을 나누지 않으니 형변환을 신경쓰지 않아도 된다.

💡논리형

let isbool1 = true;
let isbool2 = false;
console.log(isbool1);
console.log(isbool2);
let bool3 = 100 < 200; //true
let bool4 = 50 > 30; //true
console.log(bool3);
console.log(bool4);

🔽실행 결과

💡undefined & null

undefined는 변수에 아무런 값도 할당되지 않은 상태를 나타내는 값이다. null은 이와달리 임의로 null값을 넣은 상태로, 변수를 의도적으로 비워두기 위해 사용하는 값이다.

let vvv;
console.log(vvv); //undefined

let nnn = null; //임의로 null 값을 넣음.
console.log(nnn); //null

🔽실행 결과