바닐라 JS로 크롬 앱 만들기 #2 WELCOME TO JAVASCRIPT
#2.1~10
- 데이터 타입
- 변수에 데이터를 저장하는 방법
- 데이터를 배열, 객체 안에 정리하는 방법
+ how to get(접근)/update(수정)/add(추가) an element/a property - 함수 안에 데이터를 미리 넣어놓는 것보다, 함수 밖에서 데이터를 넣을 수 있게 하는 것이 훨씬 낫다
+ how send data to the function, how we receive data from the outside world.
복습문제
a+b / a-b / a/b / a**b
const calculator = {
add: function(a,b){
console.log(a+b);
},
minus: function(a,b){
console.log(a-b);
},
div: function(a,b){
console.log(a/b);
},
powerOf: function(a,b){
console.log(a**b);
}
};
calculator.add(1,2);
calculator.minus(1,2);
calculator.div(1,2);
calculator.powerOf(1,2);TIL #2.0
브라우저는 HTML 파일만을 읽을 수 있고,
CSS와 JS 파일은 HTML 파일 내에서 실행될 수 있다
link Tag in HTML
Link to an external style sheet:
<head> <link rel="stylesheet" href="styles.css"> </head>
It defines the relationship between the current document and an external resource. It is most often used to link to external style sheets or to add a favicon to your website. The 'link' element is an empty element, it contains attributes only.
rel Attribute
Required. Specifies the relationship between the current document and the linked document
value
alternate/author/dns-prefetch/help/icon/license/next/pingback/
preconnect/prefetch/preload/prerender/prev/search/stylesheet
href Attribute
Specifies the location of the linked document
value
URL
script Tag in HTML
<body> <script src="app.js"></script> </body>
It is used to embed a client-side script (JavaScript). Its element either contains scripting statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
src Attribute
Specifies the URL of an external script file
value
URL
TIL #2.3
const와 let의 차이점
Always const, sometimes let, never var
- "그래, 이 프로그램 어디에선가 myName이 업데이트 될 수 있겠구나. 반면 a와 b는 업데이트될 일이 없겠네"라고 이해할 수 있다.
const a = 5;
const b = 2;
let myName = 'Cein';- const와 let을 쓰면, 언어에 의해 보호를 받을 수 있다.
반면 var를 사용하면 실수로 a를 업데이트해도 오류가 뜨지 않는다. (nevervar)
Uncaught TypeError: Assigment to constant variable
at app.js:10TIL #2.4
- null은 절대로 자연적으로 발생하지 않는다. 변수 안에 어떤 것이 없다는 것을 확실히 하기 위해 인위적으로 할당한다.
- undefined는 어떤 변수가 존재하는데 값이 할당되지 않았을 때 발생한다.
- true는 켜져있음(1, on), false는 꺼져있음(0, off)를 의미한다.
TIL #2.6
array와 object의 차이점
array: 설명이 필요없는 데이터의 모음. 리스트는 모든 값이 같은 의미를 갖는다. 배열 안에는 모든 유효한 데이터타입 또는 변수가 들어갈 수 있다.
object: property를 가진 데이터를 저장
@@.xxx의 형태
@@는 object, @@ 안 어딘가에 xxx가 있다는 의미이다
const myObject;
myObject의 property가 변화되어도, myObject 자체의 데이터 타입만 바뀌지 않으면 문제없다.
TIL #2.7
function이란
계속해서 반복적으로 사용할 수 있는 코드 조각
TIL #2.8
-
function에게 정보를 보내고(send), 받는(receive) 방법
function sayHello(nameOfPerson)//변수 nameOfPerson으로 데이터 바깥세상으로부터 (2)받기, receive argument{ console.log(nameOfPerson); } sayHello("nico"); //변수 nameOfPerson으로 데이터 (1)보내기, send argument 및 호출 sayHello("dal"); //변수 nameOfPerson으로 데이터 (1)보내기 및 호출 sayHello("lynn"); //변수 nameOfPerson으로 데이터 (1)보내기 및 호출 -
argument의 순서는 중요하다
-
argument 변수는 function 블럭 바깥에서 존재하지 않는다.
-
나만의 @@.xxx 만들기
const player = {
name: "nico",
sayHello: function(otherPersonName){
console.log("hello " + otherPersonName + ", nice to meet you!")
},
};
player.sayHello("lynn"); // "hello lynn, nice to meet you!"