JongDDA의 한걸음 한걸음씩
[JavaScript] 자바스크립트란? 본문
자바스크립트란?
자바스크립트는 브라우저를 조작하기 위한 프로그래밍 언어로서 HTML이나 CSS만으로는 부족한 기능을 보충하기 위해 사용하는 언어다.
브라우저 조작이란?
브라우저의 가장 중요한 역할은 웹 페이지를 표시하는 것이다. 웹 페이지는 HTML과 CSS, 이미지 등으로 구성된다.
이 HTML과 CSS는 브라우저가 한번 읽은 후에는 변하지 않는다는 특징이 있다. 즉, 다음 페이지로 이동하지 않는 한 브라우저가 표시하는 것은 기본적으로 같은 HTML과 CSS이다. HTML과 CSS는 정적인 데이터인 것이다.
그런데 자바스크립트를 사용하면 정적인 데이터를 실시간으로 변경해서 일부 콘텐츠를 변경하거나 이미지 슬라이드 쇼 같은 동작을 구현할 수 있게 된다.
구체적인 변경 예
- 태그로 감싼 텍스트를 변경할 수 있다.
- 요소를 추가 또는 삭제한다.
- 태그의 속성 값을 변경한다.
- CSS 값을 변경한다.
자바스크립트의 특징
- 자바스크립트는 인터프리터 언어이다.
- 클라이언트 사이드 언어이다.
- 객체 기반 언어이다.
- 다양한 공개 라이브러리를 사용할 수 있다.
자바스크립트의 동작원리
자바스크립트를 비롯한 프로그래밍 언어의 동작은 아래의 세 가지만 기억하면 된다.
- 입력
- 가공(처리)
- 출력
예를 들어 특정 태그에 작성되어 있는 내용을 수정하는 자바스크립트 동작을 한다고 했을 때, 프로그램은 아래와 같은 순서로 동작을 한다.
- 수정하고자 하는 데이터를 선택한다(입력).
- 입력받은 데이터를 수정한다(가공).
- 수정 완료된 데이터를 화면에 표시한다(출력).
자바스크립트 동작 처리 시점
입력, 가공, 출력의 기본 처리 흐름을 하는 시점은 정하기 나름인데, '언제 처리를 실행할지 정하는 것'을 자바스크립트에서는 '이벤트(event)'라고 한다.
따라서 자바스크립트로 프로그래밍할 때는 거의 모든 경우에 이벤트, 입력, 가공, 출력의 4단계 과정을 거친다. 이를 어떻게 정할지 여부는 사용자가 설계하기 나름이다.
자바스크립트 학습을 위해 필요한 것들
- 브라우저 : 가급적 최신 버전을 사용하고, 크롬을 사용하는 것이 좋다.
- 텍스트 편집기 : 자바스크립트 코드를 작성하기 위해 필요하다.
- 개발자 도구 : 각 브라우저에 탑재된 개발자 도구 사용이 가능해야 한다.
자바스크립트를 통한 세 가지 출력
- 콘솔에 출력하기 : 주로 실제 웹사이트를 공개하기 전 테스트 용도로 많이 사용한다.
- 다이얼로그 박스 출력하기 : 박스를 띄워 거기에 데이터를 출력한다.
- HTML이나 CSS에 출력하기 : 웹문서 코드를 조작해서 웹사이트 내용을 변경해 출력한다.
콘솔에 출력하기
console.log(x) 코드를 작성하면 콘솔에 데이터 출력을 할 수가 있다.
x에 들어갈 수 있는 것들
- 정수, 실수 등 숫자형 데이터
- 문자열 데이터
- 계산식(이 경우 결과물이 출력된다)
console.log(x) 의 특징
- 콘솔에 x를 출력한다.
- x는 하나의 데이터이다. 그것이 연산식일지라도 하나로 친다.
- x는 자바스크립트 문법상 유효해야만 한다.
HTML 문서에 직접 작성하기
HTML 문서 안에 <script>~</script> 를 추가하면 그 안에 직접 자바스크립트를 기술할 수 있다. <script> 태그는 <head> 태그나 <body> 태그 내부 어디에나 추가할 수 있다. 일반적으로 <body> 태그 종료 전에 추가한다.
자바스크립트 파일 읽기
자바스크립트 프로그램을 별도의 파일에 저장하고, 그 파일을 HTML 문서에서 불러올 수도 있다. 이 경우 아래와 같이 코드를 작성해주면 된다.
<script src="파일위치를 기준으로 한 경로"></script>
이때 자바스크립트 파일의 확장자는 .js 이다.
경고 다이얼로그 박스 표시하기
아래와 같은 코드를 작성하면, 다이얼로그 박스가 나타난다.
입력, 가공, 출력의 관점
위의 코드의 괄호 안에 출력하고자 하는 데이터를 입력하면, alert가 다이얼로그에 출력할 수 있는 기능을 수행하여 그 결과로 다이얼로그에 메시지를 출력하는 것이다.
HTML 요소 변경하기
HTML 요소를 변경하기 위해서는 두 단계의 처리가 필요하다.
- 변경하고자 하는 부분의 HTML 태그와 콘텐츠를 가져온다(입력).
- 가져온 요소의 콘텐츠를 변경한다(가공과 출력).
자바스크립트 주석 처리
자바스크립트 선언문 안에서 실행문이 아닌 설명글을 적고 싶을 때는 주석 처리를 하면 된다.
한줄만 주석으로 처리할 때와 여러줄을 주석으로 처리할 때의 방법이 다르다.
//한 줄 설명글인 경우 /* 설명글이 여러 줄인 경우 이렇게 처리합니다. */
HTML의 기법으로 자바스크립트를 주석처리하면 안 된다.
자바스크립트 코드 입력 시 주의할 점
- 자바스크립트는 대/소문자를 구별한다.
- 실행문을 마치고 나서는 세미콜론을 쓰는 것이 좋으나, 이는 선택사항이다.
- 큰따옴표와 작은따옴표의 겹침 현상을 주의해야 한다.
- 시작하는 괄호(대중소 모두)와 끝나는 괄호의 짝이 맞지 않으면 안된다.
예제코드)
'개발 > 프론트엔드' 카테고리의 다른 글
| [JavaScript] 데이터형 (0) | 2021.03.14 |
|---|---|
| [JavaScript] 변수 (0) | 2021.03.14 |
| [HTML] 미디어 쿼리 (0) | 2021.03.09 |
| [HTML] 반응형 웹 및 반응형 디자인, 뷰포트(viewport) (0) | 2021.03.05 |
| [HTML] 트렌지션 및 애니메이션 (0) | 2021.03.04 |
