자바스크립트 기초

1. 자바스크립트

: 웹사이트의 동적인 부분을 제작할 때 사용하는 프로그래밍 언어 -> IoT, 하이브리드앱, 서버개발 등 폭넓게 사용된다.

 

2. html 에 자바스크립트 연동방법

: script 태그의 src프로퍼티에 js파일 경로를 준다.

<script src="index.js"></script>

 

3. 자바스크립트의 변수

1. 변수만들기

1. 변수 선언 : 데이터를 담을 공간을 생성

var fruit;   ## var + 변수이름

한번 fruit라는 공간을 생성했으면 안의 데이터를 변경할 때는 새로 선언할 필요가 없다.

2. 변수 초기화 : 생성된 변수에 데이터를 전달

fruit = "apple";

3. 변수 선언과 초기화를 동시에 한다.

var fruit = "apple";

 

2. 변수 문법

1. 변수명은 숫자로 시작할 수 없다.

2. 변수명은 최대한 자세하게, 의미를 알 수 있는 단어들의 조합으로 만들어야 변수만 봐도 안에 무슨 데이터가 담겨있는지 알기 쉽다.

 

4. 자바스크립트의 데이터타입

1. String 문자열

문자열을 만드는 방법 : 따옴표( " ", ' ' ) 안에 작성.

* 따옴표는 큰따옴표와 작은따옴표를 섞어쓰면 안된다.

* 영어에서 apostrophe (')를 사용해야 할 때는 큰따옴표를 사용하거나  \' 를 사용해야 한다.

* \ 를 출력하고 싶으면 이스케이프 시퀀스와 구분하기 위해 \\ 로 작성해야 한다.

 

2. Number 숫자

: 정수, 실수를 모두 포함한다.

 

3. Function 함수 

1. 함수를 만드는 방법 : function 키워드를 사용하여 생성한다.

   1. 변수를 선언하고 함수를 넣는 방법

var func1 = function(){
	console.log("Hello");
}

   2. 변수 선언 없이 function 키워드를 쓰고 바로 함수를 쓰는 방법

function func1(){
	console.log("Hello");
}

 

2. 함수 호출 : 

함수이름();

 

3. 함수 구성방법

   * 매개변수 : 함수 밖에서 전달받은 데이터 ( 인자 ) 를 매개변수를 통해 받아서 함수안에서 변수처럼 사용한다.

   * 인자 : 함수를 호출할 때 함수에 전달하는 데이터

   * return : 함수 안의 데이터를 함수 밖에서 함수를 호출한 곳으로 돌려줄 때 사용한다. 함수 안의 데이터는 return 하지 않으면 함수 밖에서 사용할 수 없다.

 

4. Array 배열

: 비슷한 성격의 데이터를 대괄호를 이용하여 하나의 변수로 묶어놓은 것.

1. index 좌표값 : 배열안 데이터의 좌표값. 0부터 순서대로 주어진다.

   * 배열 데이터 추출 방법 : 배열이름[ index ]; 

var fruit = ['오렌지', '포도', '귤'];
console.log(fruit[index]);   // 배열의 index번째 데이터 추출.

   * 배열 데이터 변경 방법 : 배열이름[ index ] = 새로운 데이터

var fruit = ['오렌지', '포도', '귤'];
fruit[0] = '딸기';   // 배열의 0번째 데이터를 딸기로 바꿈.

 

5. Object 객체

: 여러 종류의 데이터 타입을 중괄호를 이용하여 하나의 변수로 묶어놓은 것. 객체를 생성하는 것을 객체화라고도 한다.

1. 객체를 만드는 방법

var food = {
    name : "pizza",
    price : 20000,
    pieces : 8,
    kind : ['불고기', '페퍼로니', '시카고', '하와이'],
    cal : function(price, pieces){ return price / pieces; }
}

 

프로퍼티 : name, price, pieces, kind 등 안에 함수 외의 다른 데이터 타입이 들어있는 변수

메서드 : cal 처럼 함수가 들어있는 변수

데이터 : 프로퍼티에 들어있는 데이터 값

 

2. 객체 데이터 출력하는 방법

console.log(food.name);   // 객체명.프로퍼티명

console.log(food['price']);   // 객체명['프로퍼티명']

 

3. 객체 데이터 변경하는 방법

객체 데이터를 출력하는 방법처럼 객체명.프로퍼티명 이나 객체명 [ '프로퍼티명' ] 에 새로운 데이터를 주면 된다.

 

6. Boolean

: true 나 false 데이터가 들어가 있는 상태.

 

7. undefined

: 변수 안에 데이터를 입력하지 않은 상태

8. null

: 임의로 변수 안에 빈 데이터를 삽입한 상태, 변수에 null 값을 주면 null 데이터 타입이 된다.

 

4. 자바스크립트의 프로퍼티와 메서드

: 자바스크립트에 이미 존재하는 내장 프로퍼티, 메서드들.

1. 문자열의 프로퍼티와 메서드

1. .length : 문자열 길이

2. .charAt(index) : 문자열의 index번째 문자 추출

3. .split(" ") : 공백을 기준으로 문자를 나눠 배열로 출력, ( )안에 다른 값을 주면 그 값을 기준으로 나눔.

그 외 문자열 메서드

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String

String - JavaScript | MDN

 

2. 배열의 프로퍼티와 메서드

1. .length : 배열에 든 데이터의 개수

2. .push() : 배열의 뒤에 데이터 삽입하고, 배열의 length를 리턴한다.

3. .unshift() : 배열의 앞에 데이터 삽입하고, 배열의 length를 리턴한다.

4. .pop() : 배열 뒤의 데이터 제거하고, 제거한 데이터를 리턴한다.

5. .shift() : 배열 앞의 데이터 제거하고, 제거한 데이터를 리턴한다.

6. .sort() : 유니코드에 따라 정렬된다.

var arr = [1, 20, 5, 41, 324];
arr.sort();

위 코드의 결과는 [1, 20, 324, 41, 5] 로 나온다.

정확하게 오름차순 정렬을 하려면 두 숫자의 크기를 비교하는 함수를 만들어서 sort() 메서드에 넣어야 한다.

arr.sort(
	funtion compareNumbers(a,b){ return a-b; }
);

그러면 arr이 [1, 5, 20, 41, 324] 로 잘 정렬된다.

그 외 배열 메서드

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

 

 

7. .splice(x, y) : 배열에서 x 인덱스부터 y개 원소를 제거

8. .join() : 배열을 문자열로 붙여서 반환.

.join(' ') : 매개변수에 띄어쓰기를 주면 공백을 기준으로 이어붙인다.

 

3. Math 라이브러리의 메서드

1. Math.abs(-5);           // 5  : 절대값을 반환

2. Math.ceil(1.2);         // 2  : 올림

3. Math.floor(2.7);        // 2  : 내림

4. Math.round(2.4);        // 2  : 반올림  

5. Math.random();          // 0.1247632423812195 : 0과 1사이의 랜덤 숫자 출력.

6. Math.pow(x, y);         // x의 y 제곱

그 외의 Math 라이브러리 메서드

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Math

Math - JavaScript | MDN

 

4. 문자를 숫자로 변환하는 메서드

parseInt("11.11");       // 11        : 정수 형태로 반환

parseFloat("11.11");   // 11.11   : 실수형태로 반환

 

5. 자바스크립트에서 출력하는 명령어

1. console.log( 변수명 )   : 변수 안의 데이터를 확인할 때 콘솔에서 사용하는 명령어

** 콘솔 : 웹페이지의 개발자도구나 ide의 터미널 같은 공간

2. document.write( 변수명 ) : 변수의 데이터를 웹 화면에 출력할 때 사용하는 명령어

3. document.writeln( 변수명 ) : 띄어쓰기를 포함하여 웹 화면에 출력할 때