웹개발10 - 자바스크립트 개요, 문법

2019. 06. 18 필기

 

자바스크립트(Java Script)란? : 클라이언트 및 인터넷 응용 프로그램 개발을 위한 객체지향 스크립팅 언어
--- 스크립팅 언어 : 인터프리터에 의해 실행 >> 즉, '컴파일을 하지 않아도 된다'는 뜻
--- 단순하고 작은 프로그램 개발에 적합

** '자바 스크립트'라는 이름 때문에 자바계열 언어라고 생각할 수도 있지만, 사실 문법이 비슷한 것 빼고는 서로 완전히 다른 언어라고 봐도 무방하다고 한다. 자바라는 이름이 붙은 이유는 당시 핫한 언어가 자바였기 때문에 인기편승;을 위해 그랬다는 썰이 있다.

자바 VS 자바스크립트 차이점

자바 JAVA	자바스크립트 JAVA SCRIPT
객체지향 --- 클래스 기반의 언어	객체지향 언어 --- 클래스 개념이 없음
변수 자료형을 반드시 선언(정적)	변수 자료형을 선언하지 않음(동적) -- 자료형에 관련된 키워드가 없음 -- but! 유지보수의 목적으로 var 키워드로 변수선언을 권장
서버측 언어	클라이언트측 언어
컴파일 필요	인터프리터로 실행

 

CSL(Client Script(혹은 Side) Language) : 브라우저에 의해 실행되는 언어 (HTML, CSS, JavaScript)

CSL의 실행순서 :
HTML Document Reading(읽어들이기)
>> HTML Parsing(해석; DOM Parsing 기법 - DOM Tree)
>> JavaScript명령 실행
>> CSS 스타일 적용
>>HTML 

 

자바스크립트의 특징
· 일반적으로 header 안에 선언함(but 아무데나 선언해도 OK)
--- DHTML 작성시에는 body 안에 맨 끝에 사용하는 것을 권장(속도가 조금 더 빨라짐)
· 자바와 문법이 매우 비슷(같은 회사가 만든 언어) --- 주석처리도 //자바와 동일
· 기본적으로 한 줄을 하나의 명령으로 인식
--- 따라서 명령 뒤 ; 생략 가능하지만, 그래도 명시해주는 것을 권장
· 브라우저의 요소를 객체로 표현하며, 객체 속성(Property)와 
· header 안에 <script> 태그의 src 속성으로 선언 가능

* onXXX 속성(이벤트 속성) : 이벤트 핸들러 등록

 

자바스크립트 자료형
·  문자형(String) : "" 또는 '' 안에 표현되는 문자들 
·  숫자형(Number) : 정수 또는 실수 
·  논리형(Boolean) : false 또는 true 
·  함수형(Function) : 명령 집합 
·  객체형(Object) : 속성과 메소드의 집합
·  null : 아무것도 가지지 않은 값
·  undefined : 아무런 값이 부여되지 않음(초기값 부여 X 상태 --- null과는 다름)

** 정리 잘된 블로그  >>  https://tbbrother.tistory.com/106?category=310693

자바스크립트 형변환
·  자동 형변환 - 연산자에 의해 자료형이 자동으로 변환
·  강제 형변환 - 자료형 관련 클래스 함수를 이용하여 자료형을 강제로 변환

 

자바스크립트 변수
·  var 키워드를 이용하여 변수 선언 >> [형식] var 변수명=초기값;
·  변수를 반드시 선언할 필요는 없지만, 유지보수를 위해 선언하는 것을 권장
·  변수에 값이 저장되어 있지 않을 경우 undefined로 표현
·  저장값 또는 연산자에 따라 자료형이 자동 변경

자료형 예시

<script type="text/javascript">
	var num;//자료형 : undefined
	//alert("num = "+num);
	
	num=10;//자료형 : Number
	//alert("num = "+num);
	
	num="10";//자료형 : String
	//alert("num = "+num);
	
	//변수 선언은 형식적이므로 동일한 이름의 변수 선언 가능
	var num=100;
	alert("num = "+num);
</script>

 

자바스크립트 연산자(Operator) 
·  최우선 연산자 : () [] {} 
·  단항 연산자 : + - ++ -- ! new typeof()    *cf) typeof(대상) : 대상의 자료형을 제공
·  산술 연산자 : * / % + - 
·  관계 연산자 : > < >= <= == === != !== % + -   *cf) ==  != 는 자료형 상관없이 값만 비교
·  논리 연산자 : && ||
·  삼항 연산자 : 조건식?참:거짓
·  대입연산자 : = *= /= %= += -=

연산자 예시

<script type="text/javascript">
	var a="와니블로그";
	typeof(a);

	var b=123;
	b==123;   //반환값: true
	b=="123"; //true
	b!="123"; //false
	b===123; //false
	b!==123; //false
</script>

 

자바스크립트 제어문
·  선택문 : if, switch
·  반복문 : for, while
·  기타 : continue, break, return