< web(front-end)의 3요소 >
[ 정적인 화면 구성 ]
- HTML : 웹 문서의 큰 틀 (뼈대)
- CSS : 스타일(색상, 테두리, 디자인, 글꼴 등등...)
[ 동적인 효과 ]
- JavaScript : 웹 문서 상에 이벤트가 발생했을 때 추가적으로 실행해야 하는 동작들 처리
프로그래밍 언어로 변수, 조건문, 반복문 사용 가능
< 스크립트 언어 >
- 프로그램의 동작을 사용자의 요구에 맞게 수행되도록 함
- 매우 빠르게 배우고 짧은 소스코드로 상호작용 하도록 고안됨
< JavaScript >
- 웹브라우저에서 가장 많이, 가장 기본적으로 사용되는 인터프리터 방식*의 스크립트 언어
자바 | 컴파일* + 인터프리터 방식 * 컴파일 방식 - 컴파일 단계를 거치고 나서 실행되는 개념 (오류잡기 수월) - 소스코드를 한 번 다 읽어내고 나서 프로그램이 실행됨 |
자바스크립트 | * 인터프리터 방식 - 컴파일 단계를 거치지 않고 곧바로 실행되는 개념 - 실행하면서 소스코드를 한 줄씩 읽어내면서 실행 (실시간으로 분석해서 실행) - 코드상에 문법적인 문제가 있다면 바로 알 수 없고 실행시점에 알려줌 |
< 자바스크립트 장단점 >
장점 | 단점 |
요소에 이벤트가 발생했을 때, 코드를 한 줄씩 읽어나가면서 수행되기 때문에 수행속도가 빠름 |
웹에 특화된 기술 : 내부에서 제공되는 기술이 제한적임 |
간단한 코드 작성으로 초보자가 접하기 쉬운 언어 (단순한 구조, 원칙) |
HTML내에 소스코드를 작성하기 때문에 외부에 공개됨 (개발자 도구) : 보안에 취약 |
언어 자체의 완성도가 높지 않음 |
< 자바스크립트 소스코드 작성 위치에 따른 종류 >
inline (인라인) | 이벤트를 부여하고자 하는 요소 내에 간단한 소스코드를 작성해서 실행되게 하는 방법 |
주로 실행해야 하는 소스코드가 매우 소량일 경우 사용 | |
internal (내부) | 해당 HTML문서 내에 script 태그 영역에 함수 단위로 소스코드를 작성해서 어떤 요소에 어떤 이벤트 발생 시, 해당 함수를 호출함으로써 실행시키는 방식 |
script 태그는 head, body 태그 내에 아무 곳이나 적어도 상관 없음 | |
external (외부) | 별도의 .js파일로 소스코드들을 작성해서 해당 HTML문서에 script 태그를 가져다가 실행되게 하는 방법 |
유지보수에 좋음 |
'개발 > Front-end' 카테고리의 다른 글
[JavaScript] 자바스크립트 변수 선언 - var, let, const / 자료형 (0) | 2022.10.29 |
---|---|
[JavaScript] 자바스크립트 데이터 입출력 / 요소(Elements)에 접근하기 (0) | 2022.10.29 |
[CSS] 레이아웃 관련 스타일 - width, height / display / position / z-index / float (0) | 2022.10.29 |
[CSS] 테두리 관련 스타일 / 배경 관련 스타일 (0) | 2022.10.28 |
[CSS] 영역 관련 스타일 / 여백 및 간격 관련 스타일 (0) | 2022.10.28 |