개발자입니다
노마드코더 JS로 크롬앱만들기) #2 WELCOME TO JAVASCRIPT - Data types, Variables, const and let, Booleans, Arrays, Objects, Functions, Returns, Conditions 본문
노마드코더 JS로 크롬앱만들기) #2 WELCOME TO JAVASCRIPT - Data types, Variables, const and let, Booleans, Arrays, Objects, Functions, Returns, Conditions
끈기JK 2022. 9. 24. 09:46개발자 도구 - Console에서 javascript 작성 가능하다.
내 폴더에 momentum 폴더를 만든다 - VS Code 에서 불러들인다 - 아래와 같이 만든다
// app.js
alert("hi");// index.html
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>Momentum</title>
</head>
<body>
<script src="app.js"></script>
</body>
</html>// style.css
body{
background-color: beige;
}
■ data types
-integer: 2
-float: 1.5
-string: "hello"
console.log() 괄호 안에 ' ' 또는 " " 사용한다.
-variable 만들기
const a = 5;
const b = 2;
const myName = "nico";
console.log(a + b);
console.log(a * b);
console.log(a / b);
console.log("hello" + myName);
-variable 종류
const: 값을 바꿀수 없다. 값 업데이트시 에러 발생한다.
let: 값 변경 가능
var: 과거에 const, let이 없을때 많이 사용했으나 이제 잘 쓰지 않는다.
-그외 종류
boolean: true, false 타입이 있다.
null: variable에 값이 없는 것으로 "null"과 다르다.
undefined: variable에 값이 주어지지 않았다.
NaN: Not a Number
-array(배열)
// [] 안에 입력하면 배열이 된다.
const daysOfWeek = [mon, tue, wed, thu, fri, sat, sun];
// 아래와 같이 여러 데이터 타입을 입력할 수도 있다.
const nonsense = [1, 2, "hello", false, null, true, undefined, "nico"];
// Get Item from Array
console.log(daysOfWeek[4]); // 0부터 시작하므로 fri가 나온다.
// Add one more day to the Array
daysOfWeek.push("sun");
// 값 업데이트
daysOfWeek[6] = "weekend";
-Objects
Objects 타입은 {} 로 묶는다. 그리고 내부에서는 변수 값 저장시 : 를 사용한다.
const player = {
name: "nico",
points: 10,
fat: true,
}
console.log(player.name); // console.log(player["name"]); 로 쓸 수 있다.
player.fat = false; // const 내부 데이터는 수정 가능하다.
player.points = player.points + 15; // 10 + 15를 의미
player.lastName = "potato"; // 존재하지 않는 데이터를 이런식으로 추가 가능하다.
■ function
: 함수를 만들어서 필요할때 꺼내 쓸 수 있다.
function sayHello(nameOfPerson, age) {
console.log("Hello my name is " + nameOfPerson + " and I am " + age);
}
sayHello("nico", 10);
sayHello("hel", 23);
sayHello("lynn", 21);
object 안에 function을 넣는 방법
const player = {
name: "nico",
sayHello: function (otherPersonsName) {
console.log("hello " + otherPersonsName + " nice to meet you");
}
};
player.sayHello("lynn");
player.sayHello("nico");
argument 1개만 받는 함수에 여러개 입력해도 1개만 인식한다.
function minusFive(potato) {
console.log(potato - 5);
}
minusFive(10, 10, 12, 34);
-Homework1: Calculator 만들기
const calculator = {
add: function (a, b) {
console.log(a + b);
},
sub: function (a, b) {
console.log(a - b);
},
mul: function (a, b) {
console.log(a * b);
},
div: function (a, b) {
console.log(a / b);
},
pow: function (a, b) {
console.log(a ** b);
},
};
calculator.add(5, 2);
calculator.sub(5, 2);
calculator.mul(5, 2);
calculator.div(5, 2);
calculator.pow(5, 2);
■ Return
const age = 96;
function calculateKrAge(ageOfForeigner) {
return ageOfForeigner + 2;
})
const krAge = calculateKrAge(age);
console.log(krAge);
Homework1 코드를 console.log를 사용하지 않고 작성한다.
const calculator = {
add: function (a, b) {
return a + b;
},
sub: function (a, b) {
return a - b;
},
mul: function (a, b) {
return a * b;
},
div: function (a, b) {
return a / b;
},
pow: function (a, b) {
return a ** b;
},
};
■ conditionals(조건문)
prompt(메시지, 기본값): 창 띄워 값 입력. 그러나 요즘은 안쓴다.
const age = prompt("How old are you?");
console.log(age);
typeof age: age가 어떤 데이터 타입인지 반환한다.
parseInt(데이터) : 데이터를 Int로 데이터 타입 변경한다.
isNaN(데이터): 데이터가 NaN인지 true or false 반환한다.
조건 두가지 비교시: &&, ||
const age = parseInt(prompt("How old are you?"));
if (isNaN(age) || age < 0) {
console.log("Please write a real positive number");
} else if (age < 18) {
console.log("You are too young.");
} else if (age >= 18 && age <= 50) {
console.log("You can drink");
} else if (age > 50 && age <= 80) {
console.log("You should exercise");
} else if (age > 80) {
console.log("You can do whatever you want.");
}
