[JavaScript] JavaScript 소개

[자바 스크립트 소개]

• JavaScript(JS)는 웹 사이트와 어플리케이션을 동적 및 상호 작용적으로 만드는 데 사용하는 언어 중에 하나이다.
• 서버뿐만 아니라 브라우저에서 직접 실행할 수 있다는 점이 독특하다.
• HTML/CSS와 함께 JavaScript는 가장 일반적으로 사용하는 프로그래밍 언어 중 하나이다.
• 이 때 주의할 점은 기본 Java의 클래스 사용이나 방식은 유사하지만, JavaScript는 엄연히 Java와는 다른 언어이다.
• JavaScript 작업을 쉽게 구현하기 위해서는 일반적으로 라이브러리를 많이 사용한다.
• JQuery나 React가 대표적인 JavaScript의 라이브러리라고 생각하면 된다.
• 프레임워크는 라이브러리의 모음인데, 웹 사이트 구축에 필요한 모든 코드를 제공할 수 있다.
• Vue.js, Node.js, Angular가 대표적인 JavaScript 프레임워크이다.
• JavaScript는 CSS보다 우선순위가 높다.

 

[변수 선언 방식]

1. var

• 기본적으로 JavaScript의 변수 선언 방식은 크게 3가지가 존재한다.
• var로 선언한 변수는 동일한 이름으로 여러 번 중복해서 선언이 가능하며 재할당이 가능하다.
• 아래의 예시의 경우에서 마지막에 할당된 값인 30이 age에 저장된다.
• var는 필요할 때마다 변수를 유연하게 사용할 수 있다는 것이 장점이지만 기존에 선언해둔 변수의 존재를 잊고 값을 재할당하는 실수가 발생할 수 있다.
• 이를 보완하기 위해 추가된 변수 선언 방식이 let과 const이다. 

var age = 10;
var age = 20;

age = 30;

 

2. let

• let은 var와 다르게 중복 선언이 발생하면 console에서 이미 선언되었다는 에러 메시지가 출력된다.
• 다시 말해 let으로 선언한 변수는 동일한 이름으로 여러번 중복해서 선언이 불가능하다.
• 하지만 아래 예시와 같이 age를 다시 20이라는 값으로 변경하는 것 처럼 재할당은 가능하다. 

let age = 10;

age = 20;

 

3. const

• 마지막으로 const는 중복 선언도 불가능하고 재할당도 불가능하다.
• const는 상수를 뜻하기 때문에 오직 한 번만 선언이 가능하며 값을 변경할 수도 없다.

const age = 30;

 

 

[적용 방법]

• 이번에는 직접 코드 예시를 보면서 자바 스크립트에 대해 더 알아봅시다.
• 아래의 예시는 자바 스크립트를 이용하여 버튼에 알림창과 hover 효과를 준 것 같은 기능들을 포함하였다.

See the Pen 자바스크립트 복습 by psm817 (@psm817) on CodePen.

 

 

• 먼저 자바 스크립트를 사용할 때 필수적으로 사용하는 JQuery를 HTML에 작성한다.
• JQuery 라이브러리 주소는 cdnjs.com에서 가져올 수 있으며, HTML body 태그 상단에 script 태그를 만들고 scr 속성에 해당 주소를 넣는다. <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
• 해당 라이브러리를 사용하면 우리가 조금 더 간단하게 자바 스크립트를 사용할 수 있게된다.
• 예시에서 '버튼1'의 역할은 마우스 커서를 버튼으로 가져다 놓았을 때, div 태그로 이루어진 3개의 정사각형의 배경색을 변경하도록 한다.
• '버튼2'의 역할은 버튼을 클릭했을 때, 알림창이 나오도록 한다.
• CSS에서는 간단하게 body에 flex를 주어 3개의 div 태그가 한 줄에 나란히 오도록 하였다.

 

• JavaScript(JS)를 살펴보면 가장 상단에 console.clear()이 작성되어 있는데, 이는 콘솔창을 통해 확인하게 될 때, 이 전의 기록된 히스토리들을 없애기 위해서 작성하였다. 보통 가장 위쪽에 해당 코드를 적어주는 것이 좋다.
• 콘솔화면에 출력하고 싶다면 console.log("~~") 와 같이 작성하면 된다
• 함수를 작성할 때는 function 함수명() { } 과 같이 선언해주면 된다.
• function change() 는 div 태그의 배경 색상을 변경하는 함수라고 생각하면 된다.
• 함수 안의 내용을 살펴보면 $('div').css('background-color', 'blue'); 로 작성되어 있는데, 해당 코드의 뜻은 div 태그의 총 책임자(교장)이 관리하는 div 태그 모두를 선택하여 배경 색상을 파란색으로 변경하겠다는 의미이다.
• 여기서 JQuery 라이브러리를 사용해야하는 이유를 볼 수 있다. 아래는 JQuery를 사용하지 않았을 때, 작성해야 하는 JS 코드이다. 

function change() {
    var els = document.getElementsByTagName('div');
    
    for(var i = 0; i < els.length; i++) {
        els[i].style.backgroundColor = 'blue';
    }
}

• els 라는 변수를 선언해 주고, els에는 div 태그를 관리하는 관리자가 저장된다. 다시 말해 els는 관리자 오직 한 명이 포함되어 있다.
• 그 다음 반복문을 통해 배경 색상을 변경해야 하는데 이 때, els[i]는 els라는 관리자가 관리하는 태그의 i번째를 의미한다.
• 다시 말해서 HTML에서 만들어진 div 태그의 0번째부터 마지막까지 모두 배경 색상을 변경한다는 뜻이다.
• 위와 같은 코드는 JQuery를 사용하지 않았을 때 작성해야하는 코드들이다.
• 하지만, JQuery를 사용하면 저런 변수 선언과 반복문을 사용하지 않고, 단순하게 $('div')를 사용하면 된다.
• 같은 방식으로 change2()라는 함수도 만들어주고, 이 때는 다시 원래의 색으로 돌아오도록 $('div').css('background-color', ''); 와 같이 색상 부분을 비워놓는다.

 

• change()와 change2() 함수를 이제 버튼에 적용해야하는데, 적용하는 방법은 HTML에서 적용시키고 싶은 button 태그에 onclick 이라는 속성을 주고, 속성값에 change() 함수를 작성한다. <button class="btn1" onclick="change();">버튼1</button>
• 현재까지 버튼1의 동작 상황을 보면 버튼1을 클릭해야만 색상이 바뀔 것이다. 우리는 이제 hover 효과와 같은 코드도 추가를 해줘야한다.
• JS에서 $('.btn1').mouseenter(change); 와 $('.btn1').mouseleave(change2); 를 추가해주면 이제 정상적으로 작동한다.

 

• 버튼2에는 알람창을 적용하기 위해서 function callAlert() 라는 함수를 선언해주고, 함수 내용에 alert("원하는 문구")를 작성해준다.
• 마지막으로 HTML에서 해당 기능을 수행할 수 있도록 <button class="btn2" onclick="callAlert();">버튼2</button> 와 같이 onclick을 통해 해당 함수를 호출하도록 한다.