[Javascript] 자바스크립트 개념 및 배경
- 웹 개발/Javascript
- 2019. 3. 29. 22:53
Javascript의 개념 및 배경
자바스크립트란?
- 브라우저에서 동작하는 프로그래밍 언어(런타임 : 브라우저)
- 브라우저가 아닌 다른 환경에서 동작이 가능(Node.js)
- 가볍고 쉽다.(무겁고 어렵다(요즘))
- C 계열 언어(기본 문법이 자바와 동일)
- 초반 : 유효성검사 + 링크 제어 + 이미지 제어 + 폼태그 제어 등
- 중반 : 모든 태그를 제어
- 현재 : 브라우저가 아닌 독립실행이 가능 형태 개발
1. html : 뼈대 + 데이터
2. CSS : 1의 결과물 + 서식
3. Javascript : 1 + 2의 결과물 + 프로그래밍 기능
Javascript 하는 일?
1.기본적인 언어로서 할 수 있는 행동
- 데이터 연산
- 변수
- 조작, 가공
- 제어
- 기타 등등..
2. 브라우저에 특화된 행동
- HTML CSS 요소에 대한 조작
a. HTML 태그생성
b. HTML 태그 수정
c. HTML 태그 삭제
d. HTML, Attribute, PCDATA 제어 -> 모든 소스 제어 가능
e. CSS도 전부 제어 가능
f. 입력 양식 데이터 유효성 검사
Javascript를 HTML 문서에 적용하는 방법
1. 이벤트 방식
- 태그에 직접 기재
- onXXX = "자바스크립트 코드"
2. 내부 스크립트
-<script></script>
3. 외부 스크립트
Javascript
- 1995년 12월
- Mocha > LiveScript > JavaScript 1.0 ~ 1.8 (NetscapeNavigator > FireFox)
- JScript 1.0 ~ 8,9(IE)
- ECMAScript 5.0 ~ 6.0 -> ES6
자바스크립트의 실행순서
- <script></script> 태그 내부의 흐름순서대로
- 위에있는 script 태그부터 아래로...(기본은 1개의 script 태그로 쓰지만 가끔 다수의 script 태그를 사용하는 경우가 있음)
- 페이지상에서는 html이 가장 먼저 페이지를 그리고 css로 html에 디자인을 입히며 javascript로 프로그래밍을 통해 페이지를 그린다.
- html -> css -> javascript 순으로 인식.
JavaScript 디버깅 방법
- 값을 출력
1. alert(값);
2.document.write(값);
- 사용X
3.HTML 사용
- 사용X
4.console.log(값)
5, 개발자 도구를 이용한 방법
- F12를 눌러 만든 페이지의 소스를 보면서
- 소스코드의 번호를 누른다. ( 그럼 화살표가 생기면서 디버그 모드로 돌입 )
- 디버그를 위해 다시 페이지를 실행하면 해당 디버그줄에 서 멈추고 함수의 파라미터 값을 확인할 수 있음.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> //CSS영역 </style> <script> alert("자바스크립트"); console.log("영역"); </script> <body> <h1>HTML 영역</h1> </body> </html> | cs |
'웹 개발 > Javascript' 카테고리의 다른 글
| [Javascript] 자바스크립트 날짜 시간 자료형(Date) (0) | 2019.04.06 |
|---|---|
| [Javascript] 자바스크립트 문자열함수(length, indexOf, substring 등) (0) | 2019.04.06 |
| [Javascript] 자바스크립트, 형변환(Type Casting) (0) | 2019.04.05 |
| [Javascript] 자바스크립트 함수(메소드),Function(Method) 특징- 호이스팅 (0) | 2019.03.31 |
| [Javascript] 자바스크립트 자료형(Data Type) (0) | 2019.03.30 |