✔️ JavaScript
객체(Object) 기반 스크립트 언어로, 동적 html 화면 구성을 위한 언어
JS는 html과 css로 만들어진 웹 페이지를 동적으로 만들어주는 언어이다.
back-end 개발이 가능한 스펙으로 진화한 JavaScript가 바로 node.js이다.
🔷 Visual Studio Code 설치
JavaScript를 이용하기 위해 Visual Studio Code(vsc)를 설치했다.
크롬 검색창에 vsc를 검색한 다음 자신의 운영체제에 맞는 것을 설치하면 된다.
기존에 사용하던 경로의 폴더 열기
File -> Open Folder 를 선택하여 작업할 폴더를 지정
html 작업시 새로고침 하지 않아도 변경 사항이 바로 적용되는 라이브 서버 기능을 추가로 설치할 것이다.
- 확장 프로그램 설치
좌측 사이드바의 메뉴를 선택하여 Live Server를 설치해주자.
가장 처음에 나오는 것으로 설치하면 된다.
설치가 완료되면 html파일을 Open With Live Server로 열어서 실시간으로 확인할 수 있다!
📝 VSC 알아보기
Eclipse 와 화면 구성 / 단축키가 비슷한 편이며 자동 완성 기능의 편의성이 매우 좋다.
좌측의 EXPLORER에서 마우스 우클릭으로 파일 삭제, 생성 등이 가능하다.
Eclipse에서는 Drag-and-drop(끌어다놓기)로 프로젝트 공유 및 파일 가져오기가 가능했는데 이 기능은 지원되지 않는다.
- 주요 단축키 기능
실행 :
F5
문장 이동하기 :Alt+화살표
문장 복사하기 :Alt+Shift+화살표
<!-- -->주석 :Ctrl+/
주석과 블록 주석도 단축키가 동일하다.
- 명령어 살펴보기
html 파일 생성 후 ! 입력 + Enter를 누르면 다음과 같은 코드가 생성된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>다음과 같은 코드 입력 후 자동완성 기능을 통해 코드를 작성도 가능하다.
div>(header>ul>li*2>a)+footer>p 입력 후 enter :
이와 같은 명령어들은 해당 사이트에서 더 많은 종류를 자세히 확인 가능하다.
☑️ 변수, 함수 생성하기
Java Script(js)의 코드는 .html , .js , .jsp 파일에 개발이 가능하며, 코드는 script tag(element) 내부에 작성한다.
script tag는 다음과 같다 : <script> </script>
💠 변수 생성하기
<변수 생성 문법>
변수명 = 값; //타입 없이도 값 대입으로 선언 가능!
var 변수명;
let 변수명;
const 변수명;
<변수 호출>
변수명으로 가능
ex)console.log(변수명)js의 변수는 타입 제한이 없으며 값 대입 시점에 변수의 타입이 정해진다.
fruit 변수에 apple 데이터를 넣고, 실행하여 콘솔창에서 확인해보자.
- console.log()
콘솔창에서 출력을 확인하려면 console.log()를 이용할 수 있다.
<script>
fruit = 'apple';
console.log(fruit);
</script>
//console : applehtml 파일을 실행하면 열리는 크롬 창에서 F12로 관리자 모드를 연 뒤, Consol 에서 apple 이 출력되는 것이 보인다.
- var , let , const
var , let , const 키워드로 변수를 생성한 뒤 출력을 확인해보자.
<script>
var a1 = 1;
let a2 = 2;
const a3 = 3;
console.log(a1, a2, a3);
</script>
//console : 1 2 3var , let , const는 각각 다른 특성을 가지고 있다.
var: 중복 선언 가능 ⭕, 재할당 모두 가능 ⭕
let: 중복 선언 불가❌, 재할당은 가능 ⭕
const: 중복 선언 불가❌, 재할당 불가❌
var 변수는 재할당과 중복 선언이 모두 가능하여 의도하지 않은 값이 대입되거나, 변수 생성 전 출력을 먼저 해도 undefined를 반환하여 출력해버리는 문제가 존재한다.
따라서let과 const를 사용하는 것을 권장한다.
[ 출처 ] : var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프
<script>
var a1 = 1;
a1 = 11;
let a2 = 2;
a2 = 22;
const a3 = 3;
//a3 = 33;
console.log(a1, a2, a3);
</script>
//consol : 11, 22, 3var과 let은 재할당한 결과가 출력되는 것을 확인할 수 있다.
const는 재할당시 오류가 발생한다.
- let
let은 선언된 범위 내에서만 사용 가능한 변수로, scope에 예민하다.
scope(스코프) : 변수명, 함수명, 클래스명 등 식별자의 유효범위
scope는 선언된 중괄호 { } 범위 내부라고 생각하면 되는데, let은 Java의 로컬변수와 비슷하다고 볼 수 있다.
💠 함수 생성하기
함수는 다음과 같은 문법으로 생성할 수 있다.
<함수 선언 문법>
function 함수명([변수명1, ...]) {
실행할 문장 1;
실행할 문장 2;
...
}
<함수 호출>
함수명();
함수명([변수값1, ...])간단한 사용자 정의 함수를 생성한 뒤 콘솔창에서 확인해보자.
<script>
function test1(){
var a1 = 11;
let a2 = 12;
console.log(a1);
console.log(a2);
}
test1(); //함수 호출로 실행
</script>
//console : 11, 12이번에는 함수 내부에 아무 if문을 적용한 뒤 출력 결과를 확인해보자.
<script>
function test1(){
if(true){
var a1 = 11;
let a2 = 12;
}
console.log(a1);
console.log(a2);
}
test1();
</script>
//console : 11, Uncaught ReferenceError: a2 is not definedlet으로 선언한 a2가 출력되지 않음 : let은 scope에 예민함!
if문 안에서 선언했기 때문에 if문 범위를 벗어나면 적용되지 않는다.
이번에는 parameter로 값을 받아서 출력하는 함수를 만들어보자.
<script>
function test2(a, b) {
console.log('첫번째 값 : ' + a);
console.log('두번째 값 : ' + b);
}
test2();
test2(1);
test2(1, 2);
test2(1, 2, 3);
</script>순서대로 parameter에 [ 값 X / 값 하나만 주기 / 값 두개 주기 / 값을 하나 더 많이 주기 ]를 적용시켰다.
출력 결과는 다음과 같다.
test2(); //첫번째 값 : undefined, 두번째 값 : undefined
test2(1); //첫번째 값 : 1, 두번째 값 : undefined
test2(1, 2); //첫번째 값 : 1, 두번째 값 : 2
test2(1, 2, 3); //첫번째 값 : 1, 두번째 값 : 2값이 없어도 실행은 되는 상태로 undefined를 출력하고, 값이 하나 더 많이 들어오면 알아서 걸러내는 유연한 처리가 가능한 것을 확인할 수 있다.
typeof( ) 연산자
typeof()는 parameter로 받은 값의 타입을 보여주는 연산자이다.
간단한 함수를 작성하여 입력받은 값과, 해당 값의 타입들을 확인해보자.
<script>
function test3(v){
console.log(v);
console.log(typeof(v));
}
test3(); //undefined, undefined
test3(1); //1, number
test3('a'); //a, string
test3('string'); //string, string
test3(true); //true, boolean
test3(new Date()); //Wed Jun 29 2022 23:16:56 GMT+0900 (한국 표준시), object
</script>입력받은 값의 타입이 콘솔창에 출력되며 값을 입력하지 않으면 undefined으로 출력된다.
비교연산자
아래 코드를 통해 비교연산자의 차이를 알아보자.
console.log(1 == 1);
//console : true1은 1과 동일하므로 true가 출력된다.
그렇다면 다음 코드를 살펴보자.
console.log(1 == '1');숫자 1을 문자 1과 비교하는 코드이다. 결과는 true로 나왔다.
숫자와 문자인데 어떻게 동일하다고 나온 것일까?
바로 비교연산자의 차이 때문이다.
== : 형태가 동일한 경우 true 반환
=== : 형태와 타입이 모두 동일한 경우 true 반환
위에서 사용한 ==의 경우, 타입에 관계 없이 데이터의 형태가 1로 동일했기 때문에 true가 반환된 것이다.
console.log(1 == 1); //true, 형태 일치
console.log(1 == '1'); //true, 형태 일치
console.log(1 === 1); //true, 형태/타입 일치
console.log(1 === '1'); //false, 형태 일치, 타입 불일치형태와 타입 모두를 비교하는 연산자인 ===를 사용하여 다시 비교해보았다.
상황에 따라 형태만 비교하는 경우 == / 형태와 타입 모두 동일해야하는 경우에는 ===를 사용할 수 있다.
대입연산자
다양한 대입 연산자는 해당 사이트에서 예제 확인이 가능하다 : W3School
대입연산자 +=는 값을 더한 후 다시 대입하는 연산자이다.
a = a+b -> a+=b변수를 선언하여 1을 값으로 준 뒤, 대입연산자로 2를 더해 출력해보자.
var a = 1;
console.log(a += 2);
//console : 3a = a+2와 같으므로 3이 출력된 것을 콘솔창에서 확인 가능하다.
