JavaScript 알아보기

연극에서 스크립트(Script)란 배우의 행동을 지시해놓은 내용을 의미합니다.

자바스크립트(JavaScript)는 HTML의 요소를 선택해서 어떻게 실행할지 지시할 수 있습니다.

어떻게 제어하는지 이번 포스트에서 알아보겠습니다.

---

변수 선언

자바스크립트에서 변수를 선언할 때는 3가지 방법을 사용합니다.

• var - 전역 범위의 변수를 선언
• let - 블록 범위의 변수를 선언
• const - 값을 유지하는 상수를 선언

 

조건문

조건이 참일 때 실행하는 명령어입니다.

• if...else - 조건이 참이라면 if 절을 거짓이라면 else 절을 실행
• switch - 표현식과 일치하는 case 절을 실행

 

반복문

반복적인 명령을 수행할 때 반복문으로 간단하게 표현할 수 있습니다.

• for
• do...while
• while

 

작성 방식

CSS와 마찬가지로 3가지의 작성 방식이 있습니다.

먼저, 인라인 자바스크립트 방식으로 사전 예약된 이벤트 핸들러를 호출해서 작성합니다.

<input type="button" onclick="alert('버튼을 클릭했습니다.')" value="클릭">

내부 자바스크립트는 HTML 안에서 <script> 태그를 이용해 작성할 수 있습니다.

<input type="button" value="클릭" onClick=sayHello()>

<script>
  function sayHello() {
    alert('안녕하세요.');
  }
</script>

외부 자바스크립트는 확장자가 js인 파일로 분리하여 작성할 수 있습니다.

외부 자바스크립트 파일을 불러올 때는 <script> 태그에서 'src' 연결합니다.

function popId() {
  let userId = document.getElementById('txt-id').value;

  if (!userId) {
    alert('아이디를 입력해주세요.');
  } else {
    alert(userId);
  }
}

<script type="text/javascript" src="login.js"/>

외부 자바스크립트 파일 적용 후 테스트

---

자바스크립트의 기본적인 문법과 작성법에 대해서 알아보았습니다.

학습한 내용이 많아 포스트에 다 담지 못한 점이 아쉽습니다.

추후 포스트에서 조금 더 자세히 각 목차에 대해 다뤄보도록 하겠습니다.

포스트를 끝까지 봐주셔서 감사합니다~