# 자바스크립트 기초
## 자바스크립트의 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 실행됨" 출력.
### 함수&매개변수
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();
// 출력 => 헬로
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 함수를 구현해주세요.
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대 구성요소
### 조건문
### 반복문
### 변수
### 값(데이터, 자료)
### 실행할 수 없는 자료(데이터)
- 숫자(number)
- 문장(string)
- 논리(boolean)
- 객체(object) : 갹체는 일종의 버스이다. 버스에는 승객을 계속 추가할 수 있다. 복잡한 자료를 만들때 사용하며, [ ], . 문법으로 객체 내부의 변수(좌석)을 관리한다.
### 실행할 수 있는 자료(데이터) - 함수
- 지역 변수 : 함수가 실행될 때만 잠깐 생겼다가 사라지는 하루살이 변수( 찰나동안에만 존재 ), 해당 변수의 활동범위는 함수를 벗어날 수 없다.
- 매개 변수 : 지역변수의 한 종류로 함수의 데이터 입구 역할을 한다.
- 리턴(return) : 함수의 데이터 출구 역할을 한다.
## 세미콜론 안 붙이는 곳
- if, switch, while, for, function 뒤
- 단, 아래 형식에는 세미콜론을 붙인다.
var hello = function() {
};