[JS] 1. 자바스크립트 개요 및 자료형

1. JS 개요

2. JS의 자료형

---

1.JS 개요

JavaScript란?

웹 브라우저에서 실행이 가능한 "인터프리터" 방식의 스크립트 언어

• 인터프리터 : 컴파일 과정 없이(기계어로 번역하는 중간 과정이 없음), 작성한 소스코드가 한 줄씩 실행되는 방식의 언어

HTML(틀)은 웹문서의 내용을 구성하고, CSS(디자인)는 웹 문서의 레이아웃이나 색상, 스타일 등을 지정한다.
여기에 JS를 추가하면웹 문서의 각 요소를 가져와서 필요에 따라 스타일을 변경하거나 움직이게 할 수 있다.

즉, html의 조작과 변경을 담당하는 언어이다.

1.1. JS의 장단점

• 장점

(1) 코드를 작성한 후 즉시 실행결과를 볼 수 있다.(간단한 개발에서 큰 장점을 보임)

(2) 클래스, 접근제한자, 반환형, 변수자료형 등을 문법상 기술할 필요가 없으므로 초보자가 다루기 쉽다.(그만큼 안전성이 떨어지긴 함)

(3) 지원하는 라이브러리 및 프레임워크가 굉장히 많다.

• 단점

(1) 컴파일 언어보다 실행 속도가 느리다.(컴파일 과정을 통한 최적화 과정이 없으므로)

(2) 큰 규모의 어플리케이션 개발에 있어서 적합하지 못하다.

1.2. JS 사용방법

자바스크립트는 script 태그 내부에 작성하며 작성 위치에 따라 inline 스크립트 방식, internal(내부) 방식, external(외부) 방식이 있다.

• inline 스크립트 방식
  : CSS와 유사하게 태그 내 직접 작성하는 방법

<li>
	<input type="button" value="실행" onclick="alert('안녕')">
</li>

• internal(내부) 방식
  : CSS의 style태그와 유사하게 태그 내 script 태그를 작성하여 js영역에 작성한다.

<li>internal(내부) 방식 사용
	<script>
    // js영역
		function abc() {
			console.log('hello')
		} 
	</script>
	<input type="button" value="실행2" onclick="abc();">
</li>

• external(외부) 방식
  : html 바디 영역에 script 태그 내 외부 JS 파일 경로를 작성한다. JS 기능들은 바디 영역 제일 하단에 넣어 놓는다.

<script src="~/.js 경로"></script>

1.3. JS 기본 입출력 방법

(1) 알림 창 출력하기(alert)

웹 브라우저에 작은 알림창을 열어 메시지 표시

alert('메시지')
html영역
<input type="button" value="alert" onclick="test0()">

자바스크립트 영역
function test0() {
            alert('안녕하세요');
        }

(2) 확인 창 출력하기(confrim)

확인 창은 사용자가 확인, 취소 버튼 클릭 가능

confirm('메시지')

html영역
<input type="button" value="confirm" onclick="test1();">

자바스크립트 영역
function test1(){
            var boolean = confirm("이 파일을 삭제하시겠습니까?");
            if(confirm("이 파일을 삭제하시겠습니까?")){
                alert("파일 삭제완료");
            }
        }

(3) 프롬프트 창에서 입력받기(prompt)

사용자로부터 문자열 입력값을 받아옴

prompt(메시지) 또는 prompt(메시지, 기본값)

html영역
<input type="button" value="prompt" onclick="test2();">

자바스크립트영역
function test2(){
	var name = prompt("당신의 이름은?");

   if(!name) {
    	alert("올바른 이름을 입력하십쇼...");
	} else {
		alert(`당신의 이름은 [${name}]입니다`); 
	}
}

---

2. 자바스크립트의 자료형

자바스크립의 자료형은 아래와 같다.

• 기본유형(숫자, 문자열, 논리형),
• 복합유형(배열, 객체),
• 특수 유형(undefined, null)
  
  

2.1. number형

정수와 실수 모두 number형이다.

html 영역
<input type="button" value="자료형" onclick="dataType()">
 
자바스크립트 영역
<script>
	function dataType(){
		i = 777;
		j = 3.14;
		console.log(i, typeof(i)); 
  		console.log(j, typeof(j)); 
...

2.2. 문자형(string)

작은 따옴표(' ')나 큰 따옴표(" ")로 묵은 데이터
공백('', "")도 문자열 타입

<script>
	function dataType(){
		var i='js is very hard';
    	console.log(i, typeof(i));
...

2.3. 논리형(boolean)

true, false로 값 표현하는 자료

2.4. undefined

undefined : 자료형이 정의되지 않은 상태
null: 데이터의 값이 유효하지 않은 상태

<script>
	function dataType(){
		var i;
		console.log(i, typeof(i));
...

<script>
	function dataType(){
		var i = null;
        console.log(i, typeof(i));
...

2.5. 배열(object 타입)

하나의 변수에 값을 여러개 저장, 대괄호로 묶어서 값 저장

<script>
	function dataType(){
		i=[1,2,3,'하이', 3.14, false] //new arrayList();와 유사
		console.log(i, typeof(i));