TCP school | 1. 자바스크립트 시작
1. 자바스크립트 개요
JavaScript
- 객체 기반의 스크립트 언어.
- 웹의 동작 구현 가능.
- 주로 웹 브라우저에서 사용되나 Node.js 같은 프레임워크 사용하면 서버 측 프로그래밍 가능.
- 컴퓨터나 스마트폰에 포함된 대부분의 웹 브라우저에는 자바스크립트 인터프리터 내장.
2. 자바스크립트 기초
특징
1. 객체 기반의 스크립트 언어
2. 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어.
3. 객체 지향형 프로그래밍과 함수형 프로그래밍 모두 표현 가능.
C언어 같은 언어는 소스 파일 작성 후, 해당 파일을 컴파일하여 사용자가 실행할 수 있는 실행 파일(.exe)로 만들어 사용.
하지만 인터프리터 언어는 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어.
웹 브라우저에 포함된 인터프리터가 소스 코드를 직접 해석하여 바로 실행해줌.
3. 자바스크립트 소개
자바스크립트가 웹 프로그래밍에서 할 수 있는 일
1. HTML의 내용 변경
2. HTML의 속성 변경
3. HTML의 스타일 변경
4. 자바스크립트 문법
프로그램 : 컴퓨터가 실행할 수 있는 명령(instruction)으로 이루어짐. 명령들을 실행문(statement)라고 함. 즉, 프로그램이란 특정 결과를 얻기 위하여 컴퓨터에 의해 실행되는 실행문의 집합.
자바스크립트 문법
- 세미콜론(;)으로 구분
- 대소문자 구분
리터럴(literal) : 표현되는 값 그 자체.
식별자(identifier)
- 변수나 함수의 이름을 작성할 때 사용하는 이름.
- 영문자(대소문자), 숫자, 언더스코어(_), 달러($)만 사용 가능.
- 숫자로 시작할 수 없음.
- 유니코드 문자셋 사용.
식별자 작성 방식
1. Camel Case 방식 : trueFalse
2. Underscore Case 방식 : true_false
keyword : 키워드 = 예약어(reserved word)
주석(Comment)
- //
- /* */ : 중첩 사용 안됨.
5. 자바스크립트 출력
자바스크립트는 결과물을 HTML 페이지에 출력 가능.
1. window.alert() 메소드
alert("내용");
2. HTML DOM 요소 이용한 innerHTML 프로퍼티
: document 객체의 메소드를 사용하여 HTML 요소 선택, innerHTML 프로퍼티 이용하여 HTML 요소의 내용이나 속성값 변경.
<script>
var str = document.getElementById("text");
str.innerHTML = "이 문장으로 바뀌었습니다!";
</script>
3. document.write() 메소드
: 웹 페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력.
: 테스트나 디버깅을 위해 사용.
<script>
document.write(4 * 5);
</script>
: 웹 페이지의 모든 내용이 로딩된 후에 실행되면, 웹 페이지에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터 출력.
4. console.log() 메소드
6. 자바스크립트 적용
HTML 문서에 자바스크립트 적용하는 방법
1. 내부 자바스크립트 코드로 적용
: <script>태그를 사용하여 HTML 문서 안에 삽입 가능.
: <head>태그나 <body>태그 또는 양쪽 모두에 위치할 수 있음.
2. 외부 자바스크립트 파일로 적용
: 외부에 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장.
: 적용하고 싶은 모든 웹 페이지에 <script>태그를 사용하여 외부 자바스크립트 파일을 포함하면 됨.
: 웹의 내용을 담당하는 HTML 코드로부터 웹의 동작을 구현하는 자바스크립트 코드를 분리 가능.
: 외부 자바스크립트 파일은 웹 브라우저가 미리 읽어올 수 있어 로딩 속도도 빨라짐.