자바스크립트 공부를 따로 하지않고 검색으로 해결하려다가 한계가 있다고 생각이 들었다ㅠㅠ
그래서 TCP에 있는 내용을 기반으로 공부를 해보려고 한다
공부하는 사이트 : https://www.tcpschool.com/javascript/js_intro_basic
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
자바스크립트의 언어적 특징
- 객체 기반의 스크립트 언어
- 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어
- 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있음
| 컴파일러 언어 | 인터프리터 언어 |
| 코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한 번에 머신 코드로 변환한 후 실행함 | 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간 코드인 바이트코드로 변환한 후 실행함 |
| 실행파일을 생성함 | 실행파일을 생성하지 않음 |
| 컴파일 단계와 실행 단계가 분리되어 있음 명시적인 컴파일 단계를 거치고, 명시적으로 실행 파일을 실행함 |
인터프리트 단계와 실행 단계가 분리되어 있지 않음 인터프리터는 한 줄씩 바이트 코드로 변환하고 즉시 실행함 |
| 실행에 앞서 컴파일은 단 한 번 수행됨 | 코드가 실행될 때마다 인터프리트 과정이 반복 수행됨 |
| 컴파일과 실행 단계가 분리되어 있으므로 코딩 실행 속도가 빠름 | 인터프리트 단계와 실행 단계가 분리되어 있지 않고 반복 수행되므로 코드 실행 속도가 비교적 느림 |
자바스크립트가 웹에서 할 수 있는 일
- HTML의 '내용'을 변경할 수 있음
- HTML의 '속성'을 변경할 수 있음
- HTML의 '스타일'을 변경할 수 있음
자바스크립트 문법
실행문은 세미콜론으로 구분됨 ex) var x=10;
변수나 함수의 이름, 예약어 등을 작성하거나 사용할 때 대소문자를 구분해서 사용 ex) Var로 선언 시 동작하지 않음
리터럴(literal)
리터럴은 직접 표현되는 값 그 자체를 의미함
ex) 12(숫자 리터럴) , "JavaScript"(문자열 리터럴) , '안녕하세요'(문자열 리터럴) , true(불리언 리터럴)
식별자(identifier)
변수나 함수 이름을 작성할 때 사용하는 이름
숫자로 시작할 수는 없음
예약어(키워드)는 식별자로 사용할 수 없음
자바스크립트 출력
결과물을 HTML 페이지에 출력함
- window.alert() 메소드
- HTML DOM 요소를 이용한 innerHTML 프로퍼티
- document.write() 메소드
- console.log() 메소드
window.alert() 메소드
브라우저와는 별도의 대화 상자를 띄워 사용자에게 데이터를 전달함
* window 객체의 모든 메소드나 프로퍼티를 사용할 때는 window라는 접두사 생략 가능
HTML DOM 요소를 이용한 innerHTML 프로퍼티
실제 출력을 위해 가장 많이 사용되는 방법
document 객체의 getElementByID()나 getElementMyTagName() 등의 메소드를 사용하여 HTML 요소 선택 후
innerHTML 프로퍼티를 이용하여 선택된 HTML 요소의 내용이나 속성값 등을 손쉽게 변경
document.write() 메소드
웹페이지가 로딩될 때 실행되면, 웹 페이지에 가장 먼저 데이터를 출력함
대부분 테스트나 디버깅을 위해 사용됨
* 웹페이지의 모든 내용이 로딩된 후에 실행되면, 웹 페이지 내에 먼저 로딩된 모든 데이터를 지우고 자신의 데이터를 출력함 주의해서 사용
console.log() 메소드
웹 브라우저의 콘솔을 통해 데이터를 출력함
F12를 누른 후, 메뉴에서 콘솔을 클릭하면 콘솔 화면을 사용할 수 있음
자세한 사항까지 출력되므로, 디버깅 시 많은 도움을 줄 수 있음
내부 자바스크립트 코드
<script>태그를 사용하여 HTML 문서에 삽입
HTML 문서의 <head>태그나 <body>태그, 또는 양쪽 모두에 위치할 수 있음
외부 자바스크립트 파일
외부로 작성된 자바스크립트 파일은 .js 확장자를 사용하여 저장함
해당 자바스크립트 파일을 적용하고 싶은 모든 웹 페이지에 <script>태그를 사용해 외부 자바스크립트 파일을 포함하면 됨
ex) <script src="/examples/media/example.js"></script>
장점 : HTML 코드와 자바스크립트 코드를 읽기 편함, 유지보수 쉬움, 웹 브라우저가 미리 읽어 올 수 있어 웹 페이지의 로딩 속도가 빨라짐
'javascript 공부' 카테고리의 다른 글
| javascript 연산자 (1) | 2024.04.30 |
|---|---|
| javascript 타입 (0) | 2024.04.30 |