생활코딩 JavaScript.

🍋 JavaScript 중요 사항

1. 기본 사항

• 생활코딩 → 크롬 개발자 도구 확인
• 생활코딩 → JavaScript 사전
• F12 누른 뒤, 개발자 도구의 console 창에서 간단한 코드 입력 후 실행 결과 바로 확인 가능.
• console.log( ); 명령어 사용하면 console 창에서 실행 결과 확인 가능.
• 개발자 도구를 유용하게 잘 사용하자. 개발자 도구를 사용하지 않으면 오류를 알 수 없음.
• 개발자 도구에서 source → 라인넘버(breakpoint) 선택 →F5 → 디버거 사용 가능.
• document.write("Hello World"); document.write(20-10);
  → 자바스크립트에서 사용하는 출력 명령어. // Hello World, 10 출력

2. 숫자

• Math.pow(a, b); → a를 b제곱한 결과
• Math.round(a); → a를 반올림한 결과
• Math.ceil(a); → a를 올림한 결과
• Math.floor(a); → a를 내림한 결과
• Math.sqrt(a); → a를 제곱한 결과
• Math.random(); → 실행할 때마다 랜덤한 숫자를 보여줌

3. 문자

• 작은 따옴표 사이에 작은 따옴표를 출력하려면? → \'
  ex) alert('I\'m love green smoothie.');
• typeof 연산자를 사용하여 피연산자의 데이터 타입을 알 수 있음.
  ex) typeof 1; typeof "1"; → number, string
• 문자열.length → 문자열의 길이 출력

4. 변수

• 변수 선언 → var a = 1;
  var은 생략이 가능하지만 웬만하면 그냥 적는 것을 추천, 또한 변수에 꼭 숫자만 대입하는 것은 아님.

5. 비교

• 동등 연산자 → ==
• 일치 연산자 → ===
• 일치 연산자의 경우, 좌항과 우항이 데이터 타입까지 정확하게 일치할때 True.
  웬만하면 동등 연산자보다 일치 연산자를 사용하는 것을 추천.
  동등 연산자는 일치 연산자보다 엄격하지 않으며, 아예 다른 것도 True로 판단할 때가 있기 때문. 더불어 추후에 오류 가능성이 높아질 수 있음.
• NaN === NaN // false
  이유는 NaN의 경우 0/0으로 연산 자체가 불가능하기 때문.
• 동등 연산자의 부정 !=, 일치 연산자의 부정 !==

6. 조건문

• else if 또는 else 조건문은 앞의 조건문에 해당되는 코드가 동작하지 않았을 때에만 적용.
• prompt 명령어 → 사용자로부터 어떠한 값을 읽어올 수 있음 (C언어에서 scanf와 비슷한 역할)

var color = prompt("좋아하는 색깔은?", "");
// 뒤의 따옴표 안에 '초록'이라고 입력하면 입력창에 '초록'이 미리 삽입되어 있음.

• prompt로 입력받은 값은 숫자도, 문자도 → 문자로 입력받음.
• false로 간주되는 것들
  1. 빈 문자열 ('')
  2. null
  3. undefined
  4. NaN
  5. 값이 할당되지 않은 변수

7. 반복문 (loop, iterate)

• for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드)
  ex) for(i = 0; i < 10; i++)
• ++i;는 i값을 1만큼 증가하고 사용, i++;는 i값을 사용하고 1만큼 증가.
• break;는 반복문 밖으로 빠져나오게끔 하는 것.
  반복문 안에 조건문이, 그 안에 break;가 있으면 어떤 조건을 만족하면 반복문 밖으로 빠져나옴.
• continue;는 어떤 조건을 만족하면 그 순간에만 종료되고 다시 반복문 위로 올라감.

8. 함수

• 함수의 형식

function mathod1 (num1, num2) {
	return num1+num2;
    }

• 위의 함수에서 num1, num2는 매개변수(파라미터)이고 num1, num2에 대입되는 숫자는 인자.
  result = mathod1(10, 20); // 10, 20은 인자
• 함수의 매개변수 여러 개 OK, 하지만 return 값은 1개.
• 함수는 코드 여기저기에서 반복적으로 재사용할 수 있음. 따라서 코드의 재사용성, 유지보수, 가독성이 높아지는 장점이 있음.
• 함수 정의 방법

var numbering = function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
numbering();

  // 위 아래 같은 뜻.

function numbering(){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
}
numbering();


(function (){
    i = 0;
    while(i < 10){
        document.write(i);
        i += 1;
    }   
})();
  // 익명함수로, 함수 정의와 동시에 바로 사용.

9. 배열

• 배열은 대괄호 사이에 정의
• 함수의 return 값을 배열로 선언하면 실제로는 하나의 값을 리턴하지만 배열에 선언된 갯수에 따라 여러개의 값을 리턴할 수 있음.

function A () {
	return ['A', 'B', 'C'];
}

result = A();

document.write(result[1]);
document.write(result[2]);

• a.toUpperCase(); → 소문자를 대문자로
• a.length; → 배열에 담긴 원소의 갯수
• 배열은 반복문, 조건문 등과 같이 사용될 때 좋음

function get_members() {
	return ['Hello', 'happy', 'good'];
}

members = get_members();

for(var i = 0; i < members.length; i++) {
	document.write(members[i].toUpperCase() + "<br>");
}

• 배열의 추가
  1. a.push('a'); → 인자로 전달된 원소를 배열의 맨 뒤에 추가
  2. a.concat('a', 'e'); → 여러개의 원소를 배열의 맨 뒤에 추가
  3. a.unshift('z'); → 인자로 전달된 원소를 배열의 맨 앞에 추가
  4. a.splice(1, 2, 'x', 'y'); → 배열의 위치 중, 첫번째 위치에서부터 두 개의 원소를 삭제하고, 그 자리에 'x'와 'y'를 추가
  
  
• 배열의 제거
  1. a.pop(); → 맨 뒤에 있는 원소를 제거
  2. a.shift(); → 맨 앞에 있는 원소를 제거
  
  
• 배열의 정렬
  1. a.sort(); → 배열의 원소들을 오름차순(abcd..)으로 정렬
  2. a.reverse(); → 배열의 원소들을 내림차순(zxy...)으로 정렬

10. 객체

• 객체는 배열과 다르게 인덱스를 문자로 표현할 수 있으며, 순서가 없음 (key, value로 나타냄)
• 객체는 중괄호 사이에 정의
• for - in문과 사용하는 것이 좋음
  for(key in 객체 이름) { } → 이런 식으로 사용이 가능하며 key라는 변수 이름은 변경 가능
  key 대신 for(var name in 객체 이름) { } 이렇게도 사용 가능

var grades = {'happy': 27, 'sad':60 , 'soso':49};

for(key in grades) {   // in 앞에 키, 뒤에 객체 이름
	document.write("<li>key : "+key+", value : "+grades[key]+"</li>");
}

• 객체 안에 함수 선언도 가능

var grades = {
	'list' : {'happy': 99, 'sad': 88,'soso':12},
	'show' : function(){
		alert("Nice!");
	}
}

alert(grades['list']['happy']);
grades['show']();

• this는 함수가 속해있는 객체를 의미

var grades = {
	'list' : {'happy': 99, 'sad': 88,'soso':12},
	'show' : function(){
		for(var name in this.list) {
			console.log(name, this.list[name]);
			}
		}
}

grades.show();

🎁 참조 및 출처

• 생활코딩 JavaScript 수업 전반 (실행방법과 실습환경 ~ 객체) ↓
  https://opentutorials.org/course/743/4646