프로젝트를 만들기 전에 자바스크립트 프로그래밍 언어를 배워보자.
강의 #2.0
학습 날짜 : 23.07.15
- 자바 스크립트를 다루는 방법은 브라우저의 콘솔을 이용하는 것이다.
(자바스크립트는 브라우저에 이미 설치되어 있기 때문에) - 콘솔은 긴 자바스크립트 코드를 적성하기에는 유용하지 않다.
→ Visual Strudio Code 이용 - 브라우저는 HTML을 열고, HTML이 CSS와 자바스크립트를 가져온다.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<title>Momentum</title>
<link rel='stylesheet' type='text/css' media='screen' href='style.css'>
</head>
<body>
<script src='app.js'></script>
</body>
</html>브라우저 콘솔창을 열어두는 것에 익숙해지도록!
강의 #2.1 데이터 타입(Data Types)
학습 날짜 : 23.07.16
- 숫자(Number)
- 정수(integer)
- 소수(float)
- 연산기호를 이용하여 계산할 수 있다.(integer 타입과 float 타입 구분없이)
- 문자(String)
""안에 입력해야 함- 문자를 결합할 수 있다.
ex) "Hello! " + "JavaScript"Hello! JavaScript
강의 #2.2 변수(Variables)
학습 날짜 : 23.07.16
console.log();: 콘솔에 log 또는 print한다.- 변수는 값을 저장하거나 유지하는 역할을 한다.
- 변수 선언 방법
const: 상수(constant) - 바뀌지 않는 값- 변수명은 낙타 표기법(Camelcase) 사용, 공백(띄어쓰기) 불가
ex) const veryLongVariableName = 0;
- 변수를 사용하지 않았을 경우, 수정하려면 하나씩 다 수정해줘야 한다. 그러나 변수를 사용하면 수정하기 쉬워진다.
console.log(5+2);
console.log(5*2);
console.log(5/2);
const a=5;
const b=2;
console.log(a+b);
console.log(a*b);
console.log(a/b);강의 #2.3 변수 만드는 방법(const and let)
학습 날짜 : 23.07.16
- 자바스크립트에서 변수를 만드는 방법
const: 상수(constant) / 생성 후 값이 바뀔 수 없음let: 생성할 때 사용 / 생성 후 값을 바꿀 수 있음(재선언 X)var: 어디서든 변경 가능(재선언 O)
→ 문제점이 생길 수 있어 사용하지 않는 것이 좋다.
const를 기본으로 사용하고, 업데이트를 해야 한다면 let을 사용하자.
( var은 쓰지 말자! )
강의 #2.4 데이터 타입(+Booleans)
학습 날짜 : 23.07.17
- 데이터 타입에는 숫자, 문자 말고 boolean이 있다.
- boolean 값에는 true(참)와 false(거짓)가 있다.
null: 아무 것도 없음을 의미undefined: 정의되어 있지 않음을 의미 / 변수를 만들었지만 값을 주지 않았을 경우 / 메모리 안에는 존재하는데 값이 들어가 있지 않음
강의 #2.5 배열(Arrays)
학습 날짜 : 23.07.23
- 데이터 정리하는 법 → 데이터 구조 : 가장 기본적인 것
배열 - 배열은 하나의 변수 안에 데이터의 리스트를 가지는 것이다.
- 배열 작성 방법
- 시작과 끝에
대괄호[]를 사용한다. - 배열 안 각각의 항목은
쉼표,로 분리한다.
- 시작과 끝에
- 배열 안의 데이터에 접근할 때 :
변수[인덱스]
*인덱스는 0부터 시작한다. - 배열에 요소 추가하기 :
변수.push()
강의 #2.6 객체(Objects)
학습 날짜 : 23.07.23
object: property를 가진 데이터를 저장- 객체 만드는 방법
- 시작과 끝에
중괄호{}를 사용한다. =을 사용하지 않고,:을 사용한다.- 하나의 property를 작성하고
쉼표,를 붙인다.
- 시작과 끝에
const player = {
name : "hy",
points : 20,
fat:false,
};- property 변경하기
변수명.속성 = 변경할 속성값
ex)player.points = "100";
- object에 추가하기(원하는 어떤 property든 만들 수 있다.)
변수명.속성 = 속성값
ex)player.lastName = "hi";
설명이 필요하지 않은 데이터 리스트들은 array
설명이 필요한 정보가 담긴 데이터 리스트들은 object
강의 #2.7 함수(Fuctions 1)
학습 날짜 : 23.07.23
function: 어떤 코드를 캡슐화하여, 실행을 여러 번 할 수 있게 해준다.- 함수 만드는 법
function 함수명(){
//실행할 코드
}- 실행 방법
함수명()
- argument(인수)
- function을 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법
소괄호()안에 작성한다.
강의 #2.8 함수(Fuctions 2)
학습 날짜 : 23.07.23
- 함수에서 데이터를 받는 방법
- 함수명 뒤에 오는
소괄호()에 작성한다. - argument로 데이터가 들어오면 그것을 변수에 저장하여 받는다.
- argument는 여러 개를 받을 수 있다.(순서 중요!)
- argument는 함수 내에서만 존재한다.
- 함수명 뒤에 오는
function plus(a, b){
console.log(a + b);
}
plus(2,6);- 객체 안에서 함수를 사용할 때
변수명 : function(){ 실행할 코드 }
const player2 = {
name : "Ryan",
sayHello : function(otherPersonName){
console.log("hello! " + otherPersonName + ", Nice to meet you~");
}
};
player2.sayHello("hy");
player2.sayHello("mg");강의 #2.9 요약 및 정리(Recap 1)
학습 날짜 : 23.07.24
- 데이터 타입
- String
- Number
- Booleans
- null(비어있음), undefined(변수에 값을 부여하지 않은 상태)
- 변수
- const a=6;
- let isHyFat=false;
const와let의 차이는 데이터를 업데이트 할 수 있는가 없는가이다.const: 데이터 업데이트 Xlet: 데이터 업데이트 O
- var는 사용하지 말자!
- 배열
- 요소의 인덱스는 0부터 시작한다.
- 요소의 값을 변경할 수 있다. ex)
days[2]=wed; - 요소를 추가할 수 있다. ex)
days.push(sun)
강의 #2.10 요약 및 정리(Recap 2)
학습 날짜 : 23.07.24
- 객체
- 연관되어 있는 property들을 그룹으로 묶어서 저장해야 할 때 사용
- 업데이트 및 추가 가능 ex)
player.name = "hy";
- 함수
- 실행 방법 :
함수명(); - 데이터를 보내는 방법 : 함수를 실행할 때 () 안에 인수를 적는다.
ex)plus(3,4); - 데이터를 받는 방법 : 함수를 선언할 때 () 안에 인수를 적는다.
- 실행 방법 :
function plus(a, b){
console.log(a + b);
}강의 #2.11 return(Returns)
학습 날짜 : 23.07.25
- console.log는 console에 무언가를 기록하여 보여준다.
결과를 보여주지만 값이 저장되지는 않는다. - 보통 function으로 무언가를 해서 결괏값을 얻는다.
이때, function의 결괏값을 받아야 한다. →return사용 - 함수를 실행하면 return한 값을 반환한다.
- 함수에서 return을 하면 원하는대로 반환한 값을 사용할 수 있다.
강의 #2.12 요약 및 정리(Recap 3)
학습 날짜 : 23.07.25
- function을 변수에 할당하면 그 변수는 function의 결과 type을 가지게 된다.
const plusResult = calculator.plus(3,7); - 함수 밖에서 function의 결괏값을 얻고 사용할 때
return을 사용한다. - console.log를 하면 콘솔창에서는 보여지더라도 값을 저장하지는 않는다.
한 번 return하면 function은 끝이 난다!
return을 하면 함수는 작동을 멈추고 결과 값을 반환하고 종료된다.
강의 #2.13 조건문(Conditionals 1)
학습 날짜 : 23.08.05
prompt(): 사용자에게 창을 띄우고 값을 받는다.- 답을 할 때까지 코드의 실행을 멈추고, 오래된 방법이다.
- 숫자를 입력해도 String 타입으로 입력된다.
typeof키워드를 사용하면 데이터 타입을 확인할 수 있다.
parseInt(): String을 Number로 변환한다.- 숫자가 아닌 String을 입력하면 변환이 안된다. → NaN(not a number)
함수는 내부에서 외부로 실행된다.
const age = parseInt(prompt("How old are you?"));
prompt() 함수가 실행된 후 parseInt() 함수가 실행된다.
강의 #2.14 조건문(Conditionals 2)
학습 날짜 : 23.08.05
isNaN(): NaN인지를 판별하는 방법, boolean을 반환한다.- if문
if(조건문){
//조건문이 참일 때 실행할 코드
}else{
//조건문이 거짓일 때 실행할 코드
}- 조건문은 boolean으로 판별 가능해야 한다.
강의 #2.15 조건문(Conditionals 3)
학습 날짜 : 23.08.05
- 조건이 하나보다 많을 경우
- else if문
if(조건문){
// if 조건문이 참일 경우 실행
}else if(조건문){
// if 조건문이 거짓일 경우 and else if 조건문이 참일 경우
}else{
// if 조건문이 거짓일 경우 and else if 조건문이 거짓일 경우
}&&(and) :- 좌항과 우항이 모두 true여야 true를 반환한다.
- 두 항 중 하나라도 false이면 false를 반환한다.
- true && true === true
- false && true === false
- true && false === false
- false && false === false
||(or) :- 좌항과 우항 중 하나라도 true이면 true를 반환한다.
- 두 항 모두 false일때 false를 반환한다.
- true || true === true
- false || true === true
- true || false === true
- false || false === false
- 좌우가 같다는 연산은
===또는==이다.
강의 #2.16 요약 및 정리(Recap 4)
학습 날짜 : 23.08.05
=: 값(value)을 할당한다.==- 동등 연산자
- 값만 비교하여 같으면 true, 다르면 false를 반환한다.
===- 일치 연산자
- 값과 값의 데이터 타입이 모두 같은지를 비교하여 같으면 true, 다르면 false를 반환한다.
안녕하세요, 웹 개발자 이하영입니다!