자바 스크립트
1. 자바스크립트(javascript)
객체 기반의 스크립트 언어
HTML 웹의 내용 작성, CSS 웹 디자인, javascript 웹의 동작을 구현
자바스크립트-----인터프리터------컴퓨터
웹 브라우저에서는 자바스크립트 소스를 읽고 처리하는 해석기(javascript interpreter)
컴파일 과정이 없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 바로 실행된다
1) 자바 스크립트 역사
1995년 넷스케이프사 브렌던아이크가 개발
모카 -> 라이브 스크립트 -> 자바스크립트
2) 자바스크립트의 특징
퍼즐 조각처럼 코드형태로 html 페이지 내장된다
컴파일 과정이 없이 브라우저 내부의 자바스크립트 처리기(인터프리터)에 의해 실행
[index.html] [웹브라우저]
<script>
자바스크립트코드 -> 인터프리터 -> 결과출력
</script>
3) 자바와 자바스크립트
직접적인 관련은 없음
문법상 비슷한 부분 C언어를 기반으로 만들어졌기 때문
자바 자바스크립트
컴파일언어 인터프리터 언어
타입검사를 엄격하게함 타입을 명시하지 않음
클래스기반의 객체지향언어 프로토 타입기반의 객체지향언어
4) 웹 페이지에서 자바스크립트의 역할
웹페이지 3가지(HTML, CSS, JS) 코드가 결합되어 작성된다
자바스크립트는 사용자의 입력을 처리하거나 웹 어플리케이션을 작성하는 등의
웹 페이지의 동적 제어에 사용된다
- 사용자의 입력 및 계산
- 웹페이지 내용 및 모양의 동적 제어
- 브라우저 제어
- 웹 서버와의 통신
- 웹 애플리케이션 작성(API)
장점
- 웹페이지의 반응성 향상
- 효율적인 데이터 전송
- 사용자와 상호작용할 수 있는 다양한 기능
2. JS 환경 구축
Node.js : 크롭 V8 JavaScript 엔진으로 빌드된 JavaSript 런타임
2009년 라이언 달이 발표
npm(node package manager) : 자바스크립트 패키지 매니저
- Node.js 사용이유
javascript 스크립트 언어, 특정 프로그램 안에서 동작하는 프로그램이기 때문에 웹 브라우저에서 동작한다
자바스크립트를 웹 브라우저에서 독립시켜, Node.js 터미널 프로그램에서 Node.js를 사용하면
웹브라우저 없이 자바스크립트를 실행할 수 있다
- 환경변수 설정(윈도우만, 맥북은 바로 가능)
폴더 경로를 복사(c:\nodejs) ★경로상에 띄어쓰기 있으면 적용되지 않음
환경 변수 -> [속성]-[고급 시스템 설정]-[환경변수]
[시스템 변수]-[새로만들기]
변수이름 : NODE_HOME
변수값 : 경로
[시스템 변수]-[Path] 더블클릭
[새로만들기]-> %NODE_HOME%
3. 자바스크립트를 작성할 수 있는 있는 위치
1) HTML 태그의 이벤트 리스너 속성에 작성
HTML 태그에는 마우스가 클릭되거나 키보드의 키가 입력되는 등의 이벤트가 발생할 때
처리하는 코드를 등록하는 리스너 속성이 있다
이 속성에 자바스크립트 코드를 작성할 수 있다
2) <script></script> 내에 작성
<head></head>, <body></body>, body태그 밖에 등 어디든 들어갈 수 있다
웹 페이지 내에서 여러번 작성할 수 있다
<script src ="경로"></script> : 외부 js 파일을 불러올 때 사용
3) 자바스크립트 파일에 작성
자바스크립트 코드를 확장자 .js인 별도의 파일로 저장하고
<script src ="경로"></script> : 외부 js 파일을 불러서 사용한다
4) url 부분 작성
<a> 태그의 href 속성 등에서 자바스크립트 코드를 작성할 수 있다
href 속성에서 자바스크립트 코드를 쓸때는 javascript 라는 키워드를 작성해야한다
4. 자바스크립트 문법
실행문은 세미콜론(;)으로 구분
대소문자를 구분
1) 자바스크립트의 식별자(이름)
식별자(identifier) : 자바스크립트 개발자가 변수, 상수, 함수에 붙이는 이름이다
식별자를 만들 때의 규칙
- 첫번째 문자 : 알파벳, 언더바, $문자만 사용가능
- 두번째 이상 문자 : 알파벳, 언더바, 0-9, $ 사용가능
- 대소문자 구분 : data, dAta는 다른 식별자이다
- 키워드 사용 불가
6variable(x)
student_id (o)
_code(o)
if (x)
calc(o)
2) 문장 구분
세미콜론으로 문장과 문장을 구분한다
한줄에 한 문장만 있는 경우 세미콜론을 생략할 수 있다
ex) i = i + 1
j = j + 1;
k = k + 1; m = m + 1;
n = n + 1 p = p + 1 (x)
3) 주석
한줄 주석 : //
범위 주석 : /* ~ */
4) 데이터 타입(typeof())
숫자타입(number) : 42, 3.41, ..
논리타입 : true, false
문자열타입 : "안녕하세요", 'javascript', "42", ...
undefined, null
undefined : 타입이 정해지지 않은 것을 의미한다
null : 값이 정해지지 않다는 값이다
5) 변수
java > 자료형 변수명 = 값;
javascript > var 변수명 = 값;
let 변수명 = 값;
- var 키워드 : 함수의 영역만 영역으로 판단한다
- let 키워드 : 모든 영역을 영역으로 판단한다
* 호이스팅(var, let 키워드의 차이)
자바스크립트 함수가 실행되기 전에 함수 내부에 필요한 변수값들을 모아
유효 범위에 최상단에 선언하는 것을 말한다
함수가 실행되기 전에 자바스크립트 Paser가 함수 실행전에 해당 함수를 훑는 과정에서
함수 내(함수 블록 "{....}")에서 존재하는 내용 중 함수가 실행에 필요한 값들을
끌어올리는 것이다
6) 상수
const 키워드 : 값을 변경시킬 수 없다
7) 지역변수와 전역변수
변수의 사용범위(scope)에 따라서 전역변수(global)와 지역변수(local)로 나뉜다
전역변수 : 영역 밖에서 선언된 변수
지역변수 : 영역 안에서 선언된 변수
8) with
객체의 속성을 짧게 참조하기 위해서 사용됨
주어진 객체의 속성을 현재 스코프의 일부처럼 다룰 수 있다
with(document) document 객체의 속성들을 직접 참조하고 있음을 의미한다
write() 메소드를 호출할 때 document.write()대신 write()메소드만으로도 호출가능하다