자바스크립트 기초

# 자바스크립트 기초

## 자바스크립트의 2대 구성요소

• 변수
• 값

 

## 자바스크립트의 2대제어요소

• 조건문
• 반복문

 

## 자바스크립트가 CSS보다 우선순위가 높다.

• CSS와 자바스크립트에서 동일한 항목에 대해 작업을 한다면, 우선순위가 높은 자바스크립트의 값으로 적용된다.

See the Pen 자바스크립트가 CSS보다 우선순위가 높다. by dlagusgh1 (@dlagusgh1) on CodePen.

 

## 자바스크립트와 CSS가 협력하는 예제

See the Pen 자바스크립트와 CSS 협력 방법 by dlagusgh1 (@dlagusgh1) on CodePen.

 

## 콘솔

### 자바스크립트 - 콘솔 출력 ( console.log( ) )

• console.clear( ); => 콘솔 비우기.
• console.log("출력할 문구 등 입력"); => 콘솔에 입력한 문구 등 출력

See the Pen 콘솔 출력 예제(자바스크립트) by dlagusgh1 (@dlagusgh1) on CodePen.

 

## 변수

### 자바스크립트 - 변수 값 변경(변수 사용 없이 변경)

• 주어진 변수에 변경하고자 하는 값을 직접 입력.

See the Pen 자바스크립트 변수 변경(변수사용 없이) by dlagusgh1 (@dlagusgh1) on CodePen.

### 자바스크립트 - 변수 값 변경(별도의 변수 사용)

• 주어진 변수 외에 별도의 변수를 생성하여 주어진 변수 중 한 값을 저장 후 해당 변수를 이용하여 변경

See the Pen 자바스크립트 변수 값 변경(별도의 변수 사용) by dlagusgh1 (@dlagusgh1) on CodePen.

 

## 변수 심화

### 자바스크립트 변수 심화 - 구구단 8단 출력(변수 사용 없이)

See the Pen 자바스크립트 변수 심화 99단 출력(변수 사용 없이) by dlagusgh1 (@dlagusgh1) on CodePen.

### 자바스크립트 변수 심화 - 구구단 8단 출력(dan 변수만 사용)

See the Pen 자바스크립트 - 변수 값 변경(dan 변수만 사용) by dlagusgh1 (@dlagusgh1) on CodePen.

### 자바스크립트 변수 심화 - 구구단 8단 출력(dan, i 변수 사용)

See the Pen 자바스크립트 변수 심화 99단 출력(변수 사용) by dlagusgh1 (@dlagusgh1) on CodePen.

 

## 조건문

### 자바스크립트 - 성년/미성년인지 구분하는 조건문

• if ~ else로 조건 설정하여 조건에 따라 콘솔 출력.

See the Pen qBZEVVz by dlagusgh1 (@dlagusgh1) on CodePen.

 

 

## 반복문(while)

### 자바스크립트 구구단 8단 출력(while문 사용)

See the Pen 자바스크립트 구구단 8단 출력(while문 사용) by dlagusgh1 (@dlagusgh1) on CodePen.

### 자바스크립트 1부터 100까지 출력(while문 사용)

See the Pen 자바스크립트 1부터 100까지 출력(while문 사용) by dlagusgh1 (@dlagusgh1) on CodePen.

### 자바스크립트 1부터 100까지의 합 출력(while문 사용)

See the Pen 자바스크립트 1부터 100까지의 합 출력(while문 사용) by dlagusgh1 (@dlagusgh1) on CodePen.

### 자바스크립트 1, 2, 3을 10번 출력(while문 사용)

See the Pen 자바스크립트 1, 2, 3을 10번 출력(while문 사용) by dlagusgh1 (@dlagusgh1) on CodePen.

### 자바스크립트 구구단 2~9단 출력(while문 사용)

See the Pen 자바스크립트 구구단 2~9단 출력(while문 사용) by dlagusgh1 (@dlagusgh1) on CodePen.

 

## 반복문(for)

### 자바스크립트 구구단 8단 출력(for문 사용)

See the Pen 자바스크립트 구구단 8단 출력(for문 사용) by dlagusgh1 (@dlagusgh1) on CodePen.

### 자바스크립트 구구단 2~9단 출력(for문 사용)

See the Pen 자바스크립트 구구단 2~9단 출력(for문 사용) by dlagusgh1 (@dlagusgh1) on CodePen.

### 자바스크립트 구구단 2~9단 출력(이중 for문 사용)

See the Pen 자바스크립트 구구단 2~9단 출력(for문 2개만 사용) by dlagusgh1 (@dlagusgh1) on CodePen.

### 자바스크립트 구구구단 출력(삼중 for문 사용)

See the Pen 자바스크립트 구구구단 출력(삼중 for문 사용) by dlagusgh1 (@dlagusgh1) on CodePen.

### 자바스크립트 1부터 1000까지 출력(for문)

See the Pen 자바스크립트 1부터 1000까지 출력(for문) by dlagusgh1 (@dlagusgh1) on CodePen.

### 자바스크립트 1부터 1000까지 합 출력(for문)

See the Pen 자바스크립트 1부터 1000까지 합 출력(for문) by dlagusgh1 (@dlagusgh1) on CodePen.

## 함수

### 값의 종류

• 실행할 수 없는 계열 : 숫자, 문장, 객체, 논리값(true/false)
• 실행할 수 있는 계열 : 함수

### 자바스크립트 함수

• 함수란 쉽게 말해 함수(자판기)를 만드는 행위이다.
• 다음 예제에서 중 괄호( { } )의 의미 : 함수의 시작과 끝을 정의.
• 다음 예제에서 변수의 이름은 say 이고 이를 함수명이라고도 한다.

var say = function() {
	console.log("== 함수 시작 ==");
    console.log("안녕하세요.");
    console.log("반갑습니다!");
    console.log("== 함수 끝 ==");
}


// sqy 라는 변수안에 있는 데이터를 실행한다. 즉, 함수(자판기)를 실행하는 행위
say();
say();
say();

### 자바스크립트 typeof 함수(값의 타입을 반환)

• 함수(자판기)에 입력 값(동전과 음료수 선택버튼 번호)을 넣으면, 반환 값(음료수)를 얻을 수 있다.
• typeof 함수는 인자로 입력받은 값의 타입을 반환(리턴)한다.

var a = 1 > 1;
var typeOfA = typeof(a);
comsole.log("typeOfA : " + typeOfA); // boolean

var b = 1 > 1;
var typeOfB = typeof(b);
comsole.log("typeOfB : " + typeOfB); // boolean

var c = 1 + 1;
var typeOfC = typeof(c);
comsole.log("typeOfC : " + typeOfC); // number

var d = "1 + 1";
var typeOfD = typeof(d);
comsole.log("typeOfD : " + typeOfD); // string

### 함수 정의 후 실행하는 예제

// 문제 : 함수 3개를 정의하고 실행해주세요.

console.clear();

var 함수1 = function() {
    console.log("함수1 실행됨");
};

함수1();	// "함수1 실행됨" 출력.

var 함수2 = function() {
    console.log("함수2 실행됨");
};

함수2();	// "함수2 실행됨" 출력.

function 함수3() {
    console.log("함수3 실행됨");
}

함수3();	// "함수3 실행됨" 출력.

### 함수&매개변수

• 매번 다르게 행동하는 함수 생성 예제1

console.clear();

// 문제 : 매번 다르게 행동하는 함수를 만들어주세요.

console.log("== 정답1 ==");
function hello(a) {
    console.log(a);
}

var a;
a = "안녕하세요."
hello(a);
// 출력 => 안녕하세요.

a = "곤니짜와."
hello(a);
// 출력 => 곤니짜와

a = "헬로."
hello(a);
// 출력 => 헬로



console.log("== 정답2 ==");
// 전역변수
var mode = 0;

function hello() {
    // 지역변수라고 합니다.
    // 함수가 실행될 때 매번 새로 만들어집니다.
    var temp = 0; // 이 라인은 정답과 관련이 없습니다.
    
    mode++;
    
    if ( mode == 1 ) {
        console.log("안녕하세요.");
    }
    else if ( mode == 2 ) {
        console.log("곤니짜와");
    }
    else {
        console.log("헬로");
    }
}

hello();
// 출력 => 안녕하세요.

hello();
// 출력 => 곤니짜와

hello();
// 출력 => 헬로

• 매번 다르게 행동하는 함수 생성 예제2

console.clear();

// 문제 : 매번 다르게 행동하는 함수(v2)를 만들어주세요.

function hello(a) {
    
    var msg;
    
    if(a == "한국어") {
        msg = "안녕하세요.";
    } else if(a == "일본어") {
        msg = "곤니짜와.";
    } else if(a == "영어") {
        msg = "헬로.";
    }
    
    console.log(msg);

}

// "한국어" => 함수에게 넘기는 부가적인 정보, 인자
hello("한국어");
// 출력 => 안녕하세요.

hello("일본어");
// 출력 => 곤니짜와

hello("영어");
// 출력 => 헬로

• 특정 언어로 여러번 인사하는 함수 생성(매개변수 2개)

console.clear();

// 문제 : 특정 언어로 인사를 여러번 하는 함수를 만들어주세요.

function hello(msg, i) {

    if (msg == "영어") {
        msg = "hello";   
    } else if (msg == "한국어") {
        msg = "안녕하세요";
    } else if (msg == "일본어") {
        msg = "곤니짜와"
    } 
    
    for ( var k = 1; k <= i; k++ ) {
        console.log(msg);
    }
}
hello("영어", 2);
// 출력
// hello
// hello
hello("한국어", 5);
// 출력
// 안녕하세요.
// 안녕하세요.
// 안녕하세요.
// 안녕하세요.
// 안녕하세요.
hello("일본어", 6);
// 출력
// 곤니짜와
// 곤니짜와
// 곤니짜와
// 곤니짜와
// 곤니짜와
// 곤니짜와

• 매개변수 2개 printDan 함수

// 문제 : 매개변수 2개짜리 printDan 함수를 구현해주세요.

console.clear();

function printDan(dan, limit) {
    console.log("== " + dan + "단 출력 ==");
    
    for ( var i = 1; i <= limit; i++ ) {
        console.log(dan + " * " + i + " = " + dan * i);
    }
}

printDan(3, 3);
// 출력
/*
== 3단 출력 ==
3 * 1 = 3
3 * 2 = 6
3 * 3 = 9
*/

printDan(2, 1);
// 출력
/*
== 2단 출력 ==
2 * 1 = 2
*/

 

## 함수&리턴

• 매개변수는 함수(자판기)에서 데이터가 들어오는 입구.
• return(리턴) 구문은 함수(자판기)에서 데이터가 나가는 출구.
• 함수의 호출 구문은 return 이후의 값으로 변신한다.
• 참고로 데이터는 오직 딱 1개만 리턴될 수 있다.

console.clear();

var plus = function(num1, num2) {
	// 지역 변수 sum
    // 지역 변수 sum은 전역 변수 sum과 아무 관련이 없다.(동명이인 같은 것) 
	var sum = num1 + num2; 
    
    return sum;
}

// 전역 변수 sum
var sum;

sum = plus(2, 4); // 함수 실행되면 6으로 변신.
console.log("sum : " + sum); // sum = 6

sum = plus(10, 20); // 함수 실행되면 30으로 변신.
console.log("sum : " + sum); // sum = 30

### 함수의 리턴을 이용 4칙연산 함수 만들기

// 문제 : 4칙연산 함수를 만들고 실행해주세요.

console.clear();

var CalculatorPlus = function(a, b) {
    return a + b;
}

var CalculatorMinus = function(a, b) {
    return a - b;
}

var CalculatorMultiply = function(a, b) {
    return a * b;
}

var CalculatorDivision = function(a, b) {
    return a / b;
}

var plus = CalculatorPlus(10, 20);
var minus = CalculatorMinus(30, 10);
var multiply = CalculatorMultiply(10, 20);
var division = CalculatorDivision(20, 10);

console.log("plus : " + plus);
console.log("minus : " + minus);
console.log("multiply : " + multiply);
console.log("division : " + division);

 

## 객체

### 자바스크립트 객체

• { } : 객체를 변수 외부에 만든다. 그리고 주소값을 리턴(반환) 한다.

var 사람1 = {};  // 사람1이라는 변수에는 객체(버스와 비슷)가 아닌, 객체의 주소값이 저장된다.

// 아래는 주소값을 이용하여 객체(실체)에 접근, 좌석(이름, 나이)를 만들고 값을 넣는다.
사람1.이름 = "홍길동";
사람1.나이 = 22;

console.log("사람1 이름 : " + 사람1.이름); // 사람1 이름 : "홍길동"
console.log("사람1 나이 : " + 사람1.나이); // 사람1 나이 : 22

console.log(사람1); // 나이 : 22, 이름 : "홍길동"

• 아래처럼 추가도 가능하다.

console.clear();

var 사람1 = {
	"이름" = "홍길동",
	나이 = 22
};

// 추가
사람1.성격 = "정의로움";

console.log(사람1);	// 나이: 22, 성격: "정의로움", 이름: "홍길동"

• 아래와 같이 값을 넣을수도 있다.

console.clear();

var 사람1 = {};

// 사람1.이름 = "홍길동"; 과 동일
사람1["이름"] = "홍길동";


// 사람1.나이 = 22; 과 동일
사람1["나이"] = 22;

var 이름 = "나이";

console.log("사람1 이름 : " + 사람1.이름);	// 사람1 이름 : 홍길동
console.log("사람1 나이 : " + 사람1[이름]);	// 사람1 나이 : 22

console.log(사람1);	// 나이: 22, 이름: "홍길동"

### 자바스크립트 각기 다른 3가지 방법으로 객체 생성

// 문제 : 각기 다른 3가지 방법으로 객체를 만들어주세요
console.clear();

var 사람1 = {
    이름 : "홍길동",
    나이 : 22
};

console.log(사람1.이름); // 객체를 한번에 만듬
// 출력 => 홍길동



var 캐릭터1 = {};
캐릭터1.공격무기 = "활";

console.log(캐릭터1.공격무기); // `.` 문법으로 데이터 채워넣기
// 출력 => 활



var 김제동 = {};
김제동["성격"] = "좋음";

console.log(김제동.성격); // [] 문법으로 데이터 채워넣기
// 출력 => 좋음

### 자바스크립트 객체안의 함수를 올바르게 정의

// 문제 : 객체안의 함수를 올바르게 정의해주세요.
// 조건 : 아래와 같이 출력되어야 합니다.

console.clear();
var 사람1 = {};
  사람1.이름 = "홍길동";
  사람1.나이 = 22;
    
사람1.자기소개 = function() {
    console.log("저는 " + 사람1.나이 + "살 " + 사람1.이름 + "입니다.");
};

사람1.자기소개();
// 출력 => 저는 22살 홍길동입니다.


사람1.나이++;
사람1.이름 = "홍길순";

사람1.자기소개();
// 출력 => 저는 23살 홍길순입니다.

 

### 자바스크립트 객체안의 함수를 올바르게 정의(this 사용)

// 문제 : 객체안의 함수를 올바르게 정의해주세요.
// 조건 : 아래와 같이 출력되어야 합니다.
// 조건 : this를 사용해주세요.

console.clear();
var 사람1 = {};
	사람1.이름 = "홍길동";
	사람1.나이 = 22;
    
사람1.자기소개 = function() {
    // this는 주어를 의미
    // this는 자기소개라는 일을 수행하는 주체(주어)에 해당
    // this는 `사람1`안에 들어있는 객체를 의미
    // 같은 객체안에 들어있는 식구끼리는 this.으로 접근할 수 있습니다.
    console.log("저는 " + this.나이 + "살 " + this.이름 + "입니다.");
};

사람1.자기소개();
// 출력 => 저는 22살 홍길동입니다.


사람1.나이++;
사람1.이름 = "홍길순";

사람1.자기소개();
// 출력 => 저는 23살 홍길순입니다.

 

## 자바스크립트의 4대 구성요소

### 조건문

• if문
• switch문

### 반복문

• while
• for
• do while

### 변수

### 값(데이터, 자료)

• 자료형

### 실행할 수  없는 자료(데이터)

• 숫자(number)
• 문장(string)
• 논리(boolean)
• 객체(object) : 갹체는 일종의 버스이다. 버스에는 승객을 계속 추가할 수 있다. 복잡한 자료를 만들때 사용하며, [ ], . 문법으로 객체 내부의 변수(좌석)을 관리한다.

### 실행할 수 있는 자료(데이터) - 함수

• 지역 변수 : 함수가 실행될 때만 잠깐 생겼다가 사라지는 하루살이 변수( 찰나동안에만 존재 ), 해당 변수의 활동범위는 함수를 벗어날 수 없다.
• 매개 변수 : 지역변수의 한 종류로 함수의 데이터 입구 역할을 한다.
• 리턴(return) : 함수의 데이터 출구 역할을 한다.

 

## 세미콜론 안 붙이는 곳

• if, switch, while, for, function 뒤
• 단, 아래 형식에는 세미콜론을 붙인다.

var hello = function() { 

};