[JavaScript] JavaScript에 대하여
by 캐떠린💡 Front-end
1. HTML
- 골격 → 블럭 태그
- 내용물 → 인라인 태그 + 텍스트
2. CSS
- 서식
3. JavaScript
- 프로그래밍 기능
✓ JavaScript란?
- 브라우저에서 동작하는 프로그래밍 언어
- Netscape → 자사 브라우저에 동작하는 프로그래밍 언어 개발
- 초기의 JavaScript는 가볍다 + 쉽다 = 기능 적다 → 현재의 JavaScript는 어렵다.
- C 계열 언어 → 기본 구문이 자바와 유사하다.
- Java ← (무관계) → JavaScript 전혀 관계가 없다!
- JavaScript의 초창기 이름은 LiveScript → 그 당시 잘나가던 Java의 이름을 따와서 JavaScript로 명칭 변경(협약 했다고 함)
- 초반(1990년대): 폼태그 유효성 검사 + 링크 조작 + 이미지 조작 등 ⇒ BOM(Browser Object Model)
- 중반(1999년~2014년): 모든 태그 조작 ⇒ DOM(Document Object Model)
- 후반(2014년~): ES6(ECMA2015) → Modern JavaScript
- ECMAScript 1.0 ~
- ES6 → Node.js 출시(구글 크롬 V8 엔진) → 비 브라우저 환경에서 JavaScript 동작 → 서버 구축 or 기타 프로그램 제작
✓ JavaScript의 주요 역할
1. 기본적인 프로그래밍 언어로서의 행동 → Core
- 변수
- 연산자
- 제어문
- 조작, 가공 등..
2. 브라우저에서만 할 수 있는 행동 → BOM, DOM
- HTML/CSS 조작
1) HTML Element 생성
2) HTML Element 수정
3) HTML Element 삭제
4) HTML Attribute 생성/수정/삭제
5) HTML PCDATA 생성/수정/삭제
6) CSS 속성(값) 생성/수정/삭제
7) 폼 태그 조작(유효성 검사)
8) 이미지 조작
9) 링크 조작
10) 기타 객체 조작
3. 서버 제작, 응용 프로그램 제작
- Node.js → ECMAScript
- Flash → ActionScript (X)
4. 확장 라이브러리
- jQuery
5. JavaScript Framework
- Angular
- React
- Vue.js
✓ HTML 문서에 JavaScript를 적용하는 방법
1. 이벤트 핸들러(Event Handler) == 이벤트
- 인라인 방식(X) '이벤트 핸들러' 또는 '이벤트'라고 부름!
- 태그에 직접 기재
- 모든(대부분) 태그 → onXXX 속성 제공
- 형식
<input type="button" value="버튼" onclick="alert('클릭');">
2. 임베디드 방식
- <script> 태그
- 형식
<script>
// Java Script 영역
alert('안녕');
</script>
3. 외부 방식
- *.js
- 참조: <script> 태그 + scr 파일 지정
- 형식
<head>
<script src="ex02.js"></script>
</head>
💡 JavaScript도 순서대로 실행한다.
✓ 자바 스크립트 구문의 실행 순서
- 동기(문장 순서대로 실행)
- 위 → 아래
- 연산자 우선 순위
// Good Case
<input type="text" name="txt1" size="50">
<script>
window.document.all.txt1.value = new Date();
</script>
// Error Case
<head>
<script>
window.document.all.txt1.value = new Date();
</script>
</head>
<body>
<input type="text" name="txt1" size="50">
</body>
// 위 > 아래 순으로 실행되는데 쩌~아래에 있는 txt1을 쩌~위에서 실행하려고 하니 txt1이 뭔지 몰라서 Error 발생!
✓ 자바스크립트 디버깅
: 값 확인 → 출력
1. alert(값); 편법
2. console.log(값); 정석 → 개발자 도구의 콘솔창에서 확인 가능
alert(100);
alert(new Date());
//개발자 도구의 콘솔창
console.log(100);
console.log(new Date());
💡<style>tag는 어디에 있어도 상관없지만 관리 차원에서 <head> 태그 안에 넣은거였지만,<script>는 위치에 따라 미치는 영향이 다르다!!
⇒<script>문 먼저 실행 후, 하단에서 해당 script문에 나올 이름을 지정한다는건 java로 치면 해당 변수를 선언하기도 전에 사용을 한거나 다름없다.
'JavaScript' 카테고리의 다른 글
| [JS] for문에서 객체 배열에 추가하기(초기화, JSON, Spread Syntax 사용) (0) | 2025.01.09 |
|---|---|
| [JavaScript Library] Toastr 라이브러리로 alert() 대체하기 :: 예쁜 알람 메세지 (0) | 2024.03.12 |
| [JavaScript] 함수(Function) (0) | 2023.10.04 |
| [JavaScript] 자료형(Data Type) (0) | 2023.10.04 |
블로그의 정보
All of My Records
캐떠린