728x90
★ Front-end, Client-side Programing
- 1. HTML
- 골격 > 블럭 태그
- 내용물 > 인라인 태그 + 텍스트
- 2. CSS
- 서식
- 3. JavaScript
- 프로그래밍 기능
★ JavaScript
- 브라우저에서 동작하는 프로그래밍 언어
- Netscape > Navigator
- 초기 : 가볍다 + 쉽다 = 기능 적음 > 현재(2014년 이후) : 어려워짐..
- C 계열 언어 > 기본 구문이 자바와 유사
- Java <- (무관계) -> JavaScript
- LiveScript > JavaScript
- 초반 > 폼태그 유효성 검사 + 링크 조작 + 이미지 조작 등..
- 중반(~2013) > 모든 태그 조작 > DOM
- 후반(2014~) > ECMA2015(ES6) > Node.js 출시 (구글 크롬 V8 엔진) > 비 브라우저 환경에서 JavaScript 동작 > 서버 구축 or 그 이외 개발 등...
★ JavaScript 역사
- 1. Netscape Navigator > JavaScript 1.0 > 1.1 > ...1.8
- 2. Internet Explorer > JavaScript > JScript 1.0 > 2.0 > ..8.0
- 3. ECMA > JavaScript > ECMAScript(ES) > .. > ECMAScript 2015(ES6) > ECMAScript 2020(ES11) > .. > 현재 자바스크립트(ES6 기반)
★ JavaScript 하는 일?
- 1. 기본적인 프로그래밍 언어로서의 행동 > Core
- 변수
- 연산자
- 제어문
- 데이터 조작, 가공 등...
- 2. 브라우저에서만 할 수 있는 행동 > BOM, DOM
- HTML/CSS 조작
- a. HTML Element 생성
- b. HTML Element 수정
- c. HTML Element 삭제
- d. HTML Attribute 생성/수정/삭제
- e. HTML PCDATA 생성/수정/삭제
- f. CSS 속성 생성/수정/삭제
- g. 폼태그 조작
- h. 이미지 조작
- i. 링크 조작
- j. 기타 객체 조작
- 3. 서버 제작, 응용 프로그램 제작
- Node.js
- 4. 확장 라이브러리
- JQuery
- 5. JavaScript Framework
- Angular
- React > 셋중에 제일 인기가 많은편
- Vue.js
★ HTML 문서에 JavaScript를 적용하는 방법
- 1. 인라인 방식(없는말) > 이벤트 핸들러(Event Handler) == 이벤트
- 태그에 직접 기재
- 모든(대부분) 태그 > onXXX 속성 제공
<input type="button" value="버튼" onclick="alert('클릭');">- 2. 임베디드 방식
- <script> 태그로 기입하는 방식
- <Script> 태그는 <body>, <head> 태그 둘다 삽입 가능함.
<script>
//JavaScript 영역
alert('안녕~');
</script>- 3. 외부 방식
- *.js > 독립된 파일에 기재
- <script src="URL">
// HTML 파일에 작성
<script src="js/ex02.js"></script>
// js파일에 작성
alert('Hello~');
■ 다양한 ex)
- 현재시간을 보여주는 text박스
<input type="text" size="50" name="txt1">
<script>
window.document.all.txt1.value = new Date();
</script>- 실행 결과
- 하지만, 이 스크립트 문을 <head> 태그 안에 다시 넣으면, 실행 X
<head>
<script>
window.document.all.txt1.value = new Date();
</script>
</head>
<body>
<input type="text" size="50" name="txt1">
<script>
//window.document.all.txt1.value = new Date();
</script>
</body>- 이유 : 자바스크립트 구문의 실행 순서 때문
- 자바 스크립트 구문의 실행 순서
- 위 > 아래
- 문장 단위로
- 연산자 우선 순위
- *** HTML과 JavaScript 구문이 동시에 실행된다.
★ 자바스크립트 디버깅 > 값 확인
- 1. alert(값);
alert(new Date());- 2. consol.log(값) > 표준(권장) : 개발자 모드(F12)
console.log(new Date());
728x90
'웹페이지' 카테고리의 다른 글
| JAVASCRIPT STEP 3 - Function (0) | 2023.04.20 |
|---|---|
| JAVASCRIPT STEP 2 - DataType (0) | 2023.04.20 |
| CSS STEP 34 - Grid (0) | 2023.04.20 |
| CSS STEP 33 - Responsive (0) | 2023.04.20 |
| CSS STEP 32 - Variable (0) | 2023.04.20 |
