01. Introduction to Javascript

알림창 띄우기

alert("안녕하세요!"); 

개발자가 확인하고 싶은 내용을 출력하는 함수. 일반 사용자가 볼 수 없도록 개발자 도구를 통해서만 확인 가능.

console.log()

Assignment

• 콘솔창에 "I love WeCode!" 메세지가 출력되도록 해주세요.
• 기존에 있던 코드들은 모두 삭제하고 "I love WeCode!" 만 출력되도록 해주시면 됩니다.

console.log("I love WeCode!");

02. 주석(Commenting)

주석(Commenting)이란 '코드를 작성하긴 했지만 브라우저에서 해당 코드를 실행시키지 말고 무시하라'

• 한 줄 주석 - slash 두 개(//)로 시작
• 여러 줄 주석 - /* ... */

03. Variables

"직업", "이름"과 같은 역할을 하는 것을 변수(variable)라고 하며, "김개발", "개발자"와 같은 값은 값(value)이라고 한다.

var name = "김개발";
var job = "fronted developer";
var myName = "김개발";
var full Name = "김개발";

• 한파일에서 같은 변수 이름을 중복해서 사용할 수 없음
  대소문자 구분
• 변수 이름을 정할 때, 첫 번째 문자는 반드시 글자나 밑줄, 달러기호 중 하나임

let name = "wecode";
const birthday = 19910223;

• let 키워드를 사용하면 변수 값을 수정할 수 있다.
• const 키워드를 사용한 변수 값은 수정할 수가 없다.
• let 키워드는 변수를 새로 생성할 때만 사용됨. 값을 수정할 때는 변수 앞에 let 키워드를 사용하지 않음.
• let 키워드에서 같은 변수 이름을 중복해서 쓰면 에러가 뜸

let name = "김개발";
let job = "frontend developer";
name = "김코딩";
job = "목수";

Assignment

• index.js에 variables 라는 함수가 있습니다.
• 그 안에 myAge라는 변수가 이미 선언되어 있습니다.
• yourAge라는 변수를 새롭게 선언하고 나이를 할당해주세요.
• myAge와 yourAge 변수의 합이 50이 될 수 있도록 yourAge의 값을 정해주세요.

const yourAge = 29;

04. Function (함수) - 기본

함수란? 하나의 특정한 작업을 수행하도록 설계된 독립적인 블록.
변수에 이름이 있듯, 함수도 이름이 있다. 함수 이름을 부르면, 함수 내에 있는 코드가 실행이 된다.

function checkCorrect() {
let hi = "안녕하세요";
return hi;

함수가 checkCorrect라는 이름으로 정의되어 있으므로,

checkCorrect();
'안녕하세요'가 호출된다.

1) add 함수 정의

function add() {
let sum = 3+3;
return sum;
}

2) add 함수 실행(호출)

add();

Assignment

함수 작성에 익숙해지셨나요? 아래의 설명을 듣고 함수를 작성해주세요.

• 함수 이름은 checkYear로 해주세요.
• 올해 년도를 return 합니다.
• 년도를 작성할 때는 ""(쌍따옴표)없이 숫자만 4자리 써주세요.

  const thisYear = 2021;
  return thisYear;
  checkYear();

05. Function(함수) - 데이터 반환하기(1)

모든 함수는 return 반환을 한다. 함수는 항상 데이터를 반환하기에 그 결과를 변수에 저장할 수도, 다른 로직에 사용할 수도 있다.

let result4 = noParameter();
console.log(result4)
console.log(noParameter())

함수가 반환을 생략하면 undefined라는 값을 반환한다.

function getName(name) <- 소괄호 옆에 적힌 name은 매개변수 (parameter이다)
return nmae + '님';

매개변수는 외부로부터 들어오는 값을 담아 함수 내부에서 사용하도록 하는 변수의 역할을 한다. 변수의 이름이라고도 부른다.

let result1 = getName('개발자');
console.log(result1); <- 콘솔에 개발자님이 출력된다.

이렇게 개발자와 같은 실질적인 값을 인자(argument)라고 부른다. 매개변수(paramete)이 '변수의 이름'이라면 인자(argument)는 그 자리에 들어갈 구체적인 값을 말한다.

Assignment

함수 작성에 익숙해지셨나요? 아래의 설명을 듣고 함수를 작성해주세요.

• 함수 이름은 addTen 입니다.
• 받은 parameter에 10을 더해서 반환(return)해주세요.

function addTen(num) {
  return num+10;
}

06. Math Expressions

let myNumber1 = 6;
let my Number2 = 3+3;
let a = 1.3;
let b = 2;
let c = -10;
console.log(a+b);
console.log(b*c/10);
console.log(a+10);
console.log(450-30);
console.log(a+10*b*b/2+3);
```jsx
**num++**는 num = num +1과 같은 뜻이다.
**num--**는 num = num -1과 같은 뜻이다.
```jsx
let num = 1;
num++; <- num = num+1;
console.log(num);

let num = 1;
let newNum = num++;
console.log(num);
console.log(newNum);

답으로 num = 1, newNum는 2라고 예상했는데, 실제 답은 num = 2, newNum =1이 나온다.

이 프로세스를 풀어서 설명하면 아래와 같다.

let num = 1;
let newNum = num; <- newNum = 1
num++; <- num =2

newNum에도 2를 할당하고 싶으면 아래와 같이 작성해야 한다.

let newNum = ++num;

let num = 1;
num++;
let newNum = num;
console.log(num); <- 2
console.log(newNum); <-2

Assignment

index.js에 작성 되어 있는 mathExpression 함수의 결과 값이 22가 나오도록 수정해 주세요.

 let result = (5 + 6) * (10 / (2 * 2.5));

07. 텍스트 문자열의 연결

상황에 맞도록 userName 변수에 각각 다른 값을 넣어보자.

let userName = "김개발";
alert(userName);
alert("안녕하세요!" +userName + "님");

아래는 모두 같은 결과가 나옴.

console.log("안녕+"하세요");
let hi ="안녕";
console.log(hi+"하세요");
let ha = "하세요";
console.log(hi+ha);

let message = "감사합니다., ";
let userName = "김개발";
let banger = "님!";
let customMess = message + userName + banger;
console.log(customMess); <- "감사합니다., 김개발님!"

console.log("2"+"2") <- 22
console.log(2+2); <- 4

const iAmString = "983";
const iAmNumber = 983;
const iAmStringToo = "0";
const iAmNumberToo = 0;
const iAmAlsoString = "-10";
const iAmAlsoNumber = -10;

console.log("2 더하기 2는 " + 2 + 2); <-"2 더하기 2는 22"

String과 Number을 더하면 항상 String으로 변환됨.

Assignment

• index.js 에 textConcatenation 함수를 수정하여서 다음 문장이 리턴 될 수 있도록 해주세요.

"2 더하기 2는 4"

• hint) 뒤의 2 + 2 수학식이 먼저 계산되도록 묶어주세요.

 let text = "2 더하기 2는 " +  (2 + 2);

08. if문

let answer = 3+3;
let (answer > 5) {
alert("5보다 큰 숫자!");
}

let answer = 3+3;
if (answer > 5) {
alert("5보다 큰 숫자!");
}
else {
alert("5보다 작거나 같은 숫자!");}

let answer = 3 + 3;
if (answer > 15) {
alert("15보다 큰 숫자!");}
else if (answer > 10) {
alert("10보다 큰 숫자!");}
else if (answer > 5) {
alert("5보다 큰 숫자!");}
else {
alert("5보다 작거나 같은 숫자!");
}

Assignment

• myFavoriteColor 함수는 "색깔"을 인자로 받고 3가지 결과 값을 리턴합니다.
• if문을 사용해 다음 조건에 맞게 함수를 구현 해주세요.
  • color 가 "navy" 이면 "Good!" 리턴
  • color 가 "yellow" 이면 "Bad!" 리턴
  • 그 외의 경우 "Whatever!" 리턴

function myFavoriteColor(color) {
  if (color === "navy") {
    return "Good!";}
    else if (color === "yellow") {
    return "Bad!";}
    else {
    return "Whatever!"
  }
}

09. 비교 연산자

비교 연산자는 연산자 양쪽에 있는 두 값, 좌항과 우항을 비교하는 연산자이다. 비교 연산자의 종류에는 동치 연산자 (==, ===, !=, !==)와 관계 연산자(>, <, >=, <=)가 있다.

• === 엄격 일치 비교 vs. ==추상 동등 비교

if ("3" == 3) {
return true;}

if ("3" === 3) {
return false;}

Assignment

• 우리나라는 20살 부터 술을 마실 수 있습니다. 우리나라 사람들이 가장 즐겨마시는 술은 소주 입니다.
• canIDrinkSoju 함수 안에 비교 연산자를 사용하여 다음의 경우들이 구현될 수 있도록 해주세요.
  • age 가 20살 보다 어리면: "애야 가서 공부나 해라!" 리턴
  • age 가 50살 이상이면: "건강을 위해서 술은 적당히 마시세요!" 리턴
  • 그 외의 경우에는: "소주에는 곱창 어떠신가요?" 리턴

function canIDrinkSoju(age) {
if (age < 20) {
  return "애야 가서 공부나 해라!";}
  else if (age >=50) {
    return "건강을 위해서 술은 적당히 마시세요!";}
  else {
    return "소주에는 곱창 어떠신가요?";
  }
}

10. 논리연산자

const answer = prompt("어디사세요?");
if (answer === "선릉"){
alert("가까우시네요!");
}else if (answer ==="강남") {
alert("가까우시네요!");
}else if (answer ==="을지로") {
alert("조금 멀리 사시네요.");
}else {
alert("거긴 어디인가요?");
}

비효율적인 코드를 줄이기 위해 or에 해당하는 || 연산자를 써보자.

const answer = prompt("어디사세요?");
if (answer === "선릉" || answer === "강남" || answer === "역삼") {
alert("가까우시네요!);
} else if (answer === "을지로") {
alert("조금 멀리 사시네요.");
} else {
alert("거긴 어디인가요?");
}

이번에는 '그리고' && 연산자를 봐 보자.

const hobby = prompt("취미가 무엇인가요?");
const morning = prompt("아침형 인간인가요?");
if (hobby === "축구" && morning ==="네") {
alert("조기축구회를 추천합니다.");
} else {
alert("무슨 동아리가 좋을지 생각해볼게요.");
}

if (age>65|| age <21 && res ==="한국")

컴퓨터는 왼쪽에서 부터 해석하기 때문에 위가 맞는 해석이다. 자신이 원하는 대로 괄호로 묶어 줄 수도 있다.

if (age > 65 || (age < 21 && res ==="한국"))
if ((age > 65 || age < 21) && res ==="한국")

Assignment

• rockPaperScissors 함수를 구현해서 가위 바위 보 게임을 구현해 보도록 하겠습니다.
• 가능하면 || 와 && 연산자 둘다 사용해주세요.
• player1과 player2 중 이긴 사람이 누군지 리턴해주세요.
• 예를 들어, player1이 이겼으면 "player1" 이 리턴 되고 그 반대의 경우라면 "player2"가 리턴이 되어야 합니다.
• 만일 비기는 경우에는 무조건 "player1"이 리턴 되어야 합니다.
• player1 과 player2 의 값은 다음 셋 중 하나 입니다.
  • "가위"
  • "바위"
  • "보"
• 예를 들어, player1은 "가위" 이고 player2는 "보" 이면 "player1" 이 리턴 되어야 합니다.

function rockPaperScissors(player1, player2) {
  let result; <- result를 선언해주고 if문 사용하기
  if ( player1 === "가위" && (player2 === "보" || player2 == "가위") ) {
    result = "player1" 
  } else if (player1 === "바위" && (player2 === "가위" || player2 == "바위")) {
    result = "player1"
  } else if (player1 === "보" && (player2 === "바위" || player2 == "보")) {
    result = "player1"
  } else {
    result = "player2"
  }
  return result <- 결괏값 반환하기
}