JavaScript(JS)

justugi·2024년 5월 10일

Web

목록 보기

6/14

JavaScript(JS)

: 웹 브라우저에서 바로 실행되는 클라이언트 측 스크립트 혹은 프로그래밍 언어로, 웹 페이지에서 동적 기능을 구현한다.

동적이며 타입을 명시할 필요가 없는 인터프리터 언어
객체지향 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.
HTML의 내용, 속성, 스타일을 변경 할 수 있다.
이벤트를 처리하고 사용자와의 상호작용을 가능하게 한다.
AJAX 기술을 이용해 서버와 실시간 통신 기능을 제공.

기본 문법

주석 처리

한 줄 주석

// 한 줄 주석

여러 줄 주석

/* 여러
줄
주석/

/*
여러
줄
주석
/

소스코드 위치

1. 내부 JavaScript

: HTML 문서 내부에 자바스크립트 소스코드를 두는 방식

<script>
  alert('hello world');
</script>

현재 HTML 파일의 문서구조(DOM)에 쉽게 접근이 가능하다.
현재 화면에 동적인 요소를 부여하는 자바스크립트가 같은 소스파일에 위치하기 때문에 코드 관리와 이해가 쉽다.
자바스크립트 소스가 복잡해지는 경우 관리가 어려우며, 코드의 공유와 재활용이 어렵다.

2. 외부 JavaScript

: HTML 문서 외부에 별도의 파일을 생성하고 HTML 에서 불러와 사용하는 방식으로, 이때 자바스크립트 파일의 위치는 HTML과 동일한 서버 혹은 외부 서버일수도 있다.

//external.js 파일
function printDate() {
  alert('hello world');
}

<head>
  <script src="../external.js"></script>
  <!-- 외부 서버의 js파일 참고할 경우 아래와 같이 사용 -->
  <script src="https://www.cdn.com/myjs/external.js"></script>
</head>

웹의 HTML코드로부터 웹의 동작을 구현하는 자바스크립트 코드를 분리함으로써, 공통기능의 모듈화와 코드 재활용이 가능해지며, 가독성과 유지보수성이 좋아진다.
소스가 분리되어 있고 HTML, 자바스크립트 모두 복잡한 경우 소스 이해가 어려울 수 있다.

3. JavaScript 위치 결정

: 브라우저는 HTML의 구조와 CSS 스타일을 렌더링하는 도중 자바스크립트를 만나게 되면 이에 대한 해석과 구현이 완료될때까지 브라우저 렌더링을 멈추게 되므로, 적절한 위치선정이 필요하다.

- 문서를 초기화하거나 설정하는 가벼운 스크립트들을 주로 사용한다. - 웹페이지 로딩이 완료된 다음 실행하기 위해 일반적으로는 바로 앞에 위치한다.

내부 자바스크립트 VS 외부 자바스크립트

비교적 간단한 코드로 구성되며 현재 파일에만 적용되는 경우 내부 자바스크립트를 사용한다.

공통기능 구현이나 소스가 길어지면 외부 자바스크립트로 관리한다.

HTML 이벤트

: 일반적으로 프로그래밍 언어에서 이벤트라고 하면 사용자의 동작 혹은 프로그램에서 발생하는 특정한 상황을 의미 한다. 이벤트가 발생하면 보통 사전에 정의된 특정 코드가 실행되고 그에 따라 기능이 동작하거나 화면이 변경되는 등의 변화가 발생 한다.

웹 브라우저가 알려주는 HTML요소에 대한 사건의 발생을 의미.
자바스크립트는 이벤트에 반응하여 특정 동작을 수행할 수 있다.
입력양식으로 부터 사용자의 입력값을 가져올 수 있다.
HTML 이벤트속성은 자바스크립트 구문을 직접 실행 하거나 함수를 호출할 수 있다.

이벤트명	설명
click	클릭시 발생
change	변동이 있을시 발생
focus	포커스를 얻었을때 발생
keydown	키를 눌렀을때 발생
keyup	키에서 손을 땟을때 발생
load	문서의 로드가 완료 되었을때 발생
unload	문서가 언로드 되었을때 발생
resize	윈도우 크기가 변경될 경우 발생
mouseover	마우스가 특정 객체 위로 올려졌을 시에 발생
mousedown	마우스를 클릭 했을때 발생
mouseout	마우스가 특정 객체 밖으로 나갔을 때 발생
mousemove	마우스가 움직였을 때 발생
mouseup	마우스에서 손을 땟을때 발생
select	option 태그 등에서 선택을 했을때 발생
submit	입력양식이 제출 요청 될때 발생

이벤트 핸들러

: 이벤트 발생을 감지하고 처리할 코드를 수행하는 역할을 담당한다. HTML 태그의 속성으로 지정하거나 자바스크립트에서 DOM 엘리먼트의 속성에 콜백 함수를 정의하는 형식으로 사용할 수 있다. 이벤트 핸들러는 앞의 이벤트 이름의 앞에 on을 붙여 사용한다.

HTML 속성으로 정의
: 이벤트를 감지하기 위한 HTML 태그의 속성에 이벤트 핸들러를 기술하는 방식으로, 보통 입력양식에 작성하게 된다.

<input type="button" value="Button" onclick="alert('버튼 클릭됨!!')"></input>

onclick 속성에 자바스크립트 코드를 직접 작성하거나 이벤트 처리를 위해 구현한 함수를 호출한다.
onXXX 를 이용해 여러 이벤트 핸들러 속성을 부여하는 것도 가능하다.

자바스크립트 에서 정의
: 자바스크립트 코드를 사용해 DOM 엘리먼트 즉, 특정 HTML 태그를 선택해 속성으로 이벤트 발생시 호출될 콜백 메서드를 정의하는 형식이다.

<script>
  document.getElementById('b1').onclick = function() {alert("버튼 클릭됨!!")}
</script>

<body>
  <input type="button" id="b1">
</body>

document.getElementById() 메서드는 HTML문서에서 지정한 id 속성을 찾아 바인딩한다.
이벤트 발생시 할당된 함수부가 호출 되어 콜백 함수라고 한다.
DOM(Document Object Model)
: 문서객체모델이라고 하며 HTML 문서를 객체화한 것으로, HTML 문서의 계층적 구조와 정보를 표현한다.
페이지의 콘텐츠, 구조, 스타일 등 각각의 요소에 접근하여 읽고 조작할 수 있는 API를 제공하는 웹 페이지에 대한 인터페이스이다.
- 트리 구조
- <html>, <body> 같은 HTML 문서의 태그들을 JavaScript가 이용할 수 있는 객체로 만들면 그것을 문서 객체라고 한다.
- 자바스크립트는 DOM을 이용하여 HTML의 태그, 속성, 스타일 등을 추가/삭제 하거나 변경할 수 있다.