노마드 코더의 바닐라 JS로 크롬앱 만들기 내용 정리
Q: why should you learn JavaScript?
A: because only using html, css, js you can create
1. games - three.js (js is perfect for 3d stuff)
2. ios and android apps - react native (you can bulit apps with only html, css, js)
3. desktop app - check out this site
4. also this are used in backend to.
+realtime videio chat check this out and machine learning too.
tip💡 if you are in a situation you can't use vscode, you can use this site on your ipad, library computer etc 👉 replit
JS groung rules
JS will read your code top to bottom
Overall less code is better
DATA TYPES OF JS
number
- interger = full number(정수)
- float (ex 1.5, 2.3)
string
means text, needs to be covered with ", ' or `
boolean
true; means on or false; means off
"true"(string) is not the same as true(boolean)
null
nothingness, means there is nothing there, null is a value
undefined
means that variable is created but it doesn't have a value, undefined is a type
'null' is an assigned value, 'undefined' means no assigned value
console.log(); logging(printing) somethings to console
Variable:
to save or hold a value
const a = 2; a holds a value of 2
variables can not have a space, so capital letters are used instead of them. ex) my name (x) myName(o)
1) const:
short for constant(불변),
2) let:
let은 최초로 변수를 만들때만 사용됨, 나중에는 렛 변수명이 아닌 그냥 변수명만 쓰고 안에 value만 바꿔서 업데이트 하면됨.
3) var:
we don't use var anymore, const and let is far better because it helps programmers to read the variables and guess what it means.
array(목록화)
[이 안에 아무거나 집어 넣고, 콤마로 구분하면, 됨 ]
computer counts from zero 0 not 1
const milkTea = [blacktea, milk];array of nonsense
console.log(milkTea[1]);array 안의 2번째 함수를 가져오는 것
milkTea.push(`sugar`)sugar is add to the end of the milkTea array
[square brackets] are used when your making an array
{curly brackets} are used when your making objects
object
-Inside the object we use : , not =
-콤마로 분류됨.
-xxx.xx 형은 xxx안에 xx가 있는 것
in list all the values hold the same meaning, but in object you can tell which meaning holds what value.
//for example lets make a video game player and give her some traits//
const player = {
name: “anna”,
points: 10,
smart: true,
};
console.log(player);
console.log(player.name);
//you can also use
console.log(player['name']);
object를 업데이트 하면 값이 바뀜. 예를 들어 위의 코드 맨아래에 player.smart = 'false' 라는 한 줄을 추가하면 지능 속성이 똑똑하지 않다고 바뀜. 왜 const안에 있는데 바뀔가? 사실 똑똑하다는 속성은 const가 아니라 object안에 있기 때문.
//how to get something from the object:
console.log(player.name)
//How to add/ update somthing:
player.lastName = ‘Delvey’;
player.name = ‘Annie’
function
—function is a piece of code you can excess over and over again, and it needs (this), also needs block of codes to execute
function divide(a, b) {
console.log(a / b);
}
A and b only exsites inside the function, if you console.log them outside of the function they will not exist anymore.
argument(인수)
while you are press play on function and also send some information of that function
ex) alert(argument);
return
-return을 적으면 function이 끝나버림.
-if the function you call has a return value, when you press play, it give you the return value.
why do we need a return instead of console.log?: console.log is for showing the results in the console but by return you can use the results inside the code.
promt: very old trick, it still works but we don't use this anymore, some browsers will gonna block this kind of pop-ups
to see a type:
typeof를 앞에 붙여주면 됨.
parseInt:
change function string to number
isNaN: return a boolean, if its true it means NaN, if its false it means NUMBER
condition:
has to be true of false(boolean)
&&(and)
both of the conditions needs to be true.
True && true === true
True && false === false
False && true === false
False && false === false
|| (or)
if one of them is true then its true
True || true === true
False || true === true
True || false === true
False || false = false
- =: 벨류를 할당하는 것, assign value
- age===100(age is 100), age!==100(age isn’t 1000
— else if에서는 순서가 중요하다.
—자바 스크립트에 있는 괄호는 안쪽 괄호부터 즉 작은 괄호부터 실행된다.parseInt(promt(halo))
