반응형
HTML : 웹 페이지의 뼈대에 해당하는 웹 페이지의 구조를 정의
CSS : 웹 페이지의 외형에 해당하는 레이아웃 및 디자인을 변경
JavaScript : 웹 페이지의 두뇌에 해당하는 동적 기능을 추가하여 동작하도록 함
1. 자바스크립트(Javascript) 개요
* 정적인 HTML 웹 페이지의 제한적인 기능을 동적(click, edit)으로 변화시키는 웹 개발 언어
* 자바스크립트로 작성된 문서는 클라이언트에 그대로 전달되어 클라이언트에서 동작
- 특징
- 자바스크립트는 인터프리터 언어로 컴파일(자바, C 등)가 아니다.
- 인터프리터 언어는 기본적으로 실행 직전에 코드를 읽어 바로 번역하여 동작한다.
- 입력된 코드가 클라이언트에 그대로 전송되므로 실행시 클라이언트의 자원을 사용한다.
- 자바스크립트 코드는 기본적으로 HTML 문서에 직접 코딩하여 사용한다.
- 자바 또는 C언어와 다르게 변수 타입을 따로 정의하지 않는다. - ECMA
- 기술 및 통신업계 국제적 비영리 표준기관
- ECMAScript6 - ES6, ECMA 기술 규격에 정의된 표준화된 스크립트 프로그래밍 언어 - PS
- 자바스크립트는 원래 웹페이지의 동적인 기능을 프로그래밍하기 위한 언어로 출발
- 점점 그 성능과 기능의 발전 및 확장되어 현재는 클라이언트 뿐만 아니라 서버 그리고 PC 및 모바일 기기등에서 컨버팅하여 동작할 수 있도록 영역이 확장
- 그 영역 확장의 중심에 대표적으로 Node.js가 있음
2. 자바스크립트 대표적 작성 방법
<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>JavaScript</h1>
<!-- 인라인 작성법 X -->
<input type="button" value="click me!" onclick="alert('Hello World!')" />
</body>
</html>
<script>
// 내부 작성법 X
document.write('반갑습니다.');
</script>
<!-- 외부 작성법 O -->
<script src="./welcome.js"></script>
- 인라인(Inline)
- 태그 안에 직접 기입하는 방식 - 내부(Internal)
- HTML 문서 내에서 영역을 구분해서 기술
- <script> 태그를 생성해서 그 안에 기술 - 외부(External)
- 외부 파일에 자바스크립트만 작성하여 파일을 불러와 사용
3. 자바스크립트 출력의 여러 형태
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>JavaScript</h1>
</body>
</html>
<script>
document.write("<h1>안녕하세요</h1>");
document.write("<br/>");
document.writeln("반갑습니다.");
document.write("자바스크립트입니다.");
console.log("로그를 출력합니다.");
console.dir(["출력할 데이터", "안녕하세요","이제는 우리가","헤어져야 할시간..."]);
console.error("에러를 출력합니다. 경고 경고!!!!!");
alert("경고창을 표시합니다.");
</script>- 도큐먼트(HTML)에 내용 출력
- 기본 출력 : document.write("출력한 내용");
- 줄바꿈 출력 document.writeln("출력한 내용"); - 콘솔창에 로그 출력(디버깅용)
- 기본 출력 : console.log("출력할 내용");
- 구조 출력 : console.dir("출력할 내용[자료형]");
- 에러 출력 : console.error("출력한 내용"); - 알림창 출력
- 알림창 : alert("출력할 내용");
반응형
'FrontEnd > JavaScript' 카테고리의 다른 글
| [JavaScript] JavaScript 함수 (0) | 2022.09.22 |
|---|---|
| [JavaScript] JavaScript 배열 (0) | 2022.09.22 |
| [JavaScript] 자바스크립트 조건문(삼항연산자), 반복문 (1) | 2022.09.20 |
| [JavaScript] 자바스크립트 연산자 (0) | 2022.09.16 |
| [JavaScript] 자바스크립트 변수, 자료형 (0) | 2022.09.16 |