[JavaScript] Nomad Academy, 바닐라 JS로 크롬 앱 만들기 - Function, DOM / 20.06.03

출처 : www.youtube.com/watch?v=wUHncG3VwPw&list=PL7jH19IHhOLM8YwJMTa3UkXZN-LldYnyK

 

 

#2.1. Your first JS Function

Const nicoInfo = {

name: "Nico",

age: 33,

gender: "male",

isHandsome: true

}

console.log(nicoInfo.favFood)

 

- console은 자바스크립트에 내장되어 있는 객체임.

  log는 객체이자 함수이다.

→ built in function (내장함수)

 

- fuction : 무언가를 실행할 수 있는 코드. 원하는 대로 쓸 수 있다.

 

<script>


function sayHello(){
	console.log('Hello!');
    }
    
sayHello();
console.log("Hi!")


</script>

 

- 정의된 함수가 Nicolas를 가지고 갈 수 있도록 

함수를 정의할 때 ()안에 변수를 넣어줘야 한다. (parameter)

parameter안에 들어갈 것은 어떤 것이던 넣어줄 수 있다.

 

 

 

#2.1.1 More Function Fun

* 백틱 = `을 통한 새로운 스트링 방식

함수의 내용 안에 변수와 문자열을 섞어쓰기 위해 다음과 같은 방식을 이용한다.

 

<script>


function sayHello(name, age){
    console.log(`Hello ${name} you are ${age} years old`)};

sayHello("Nicolas", 15);



//return(값을 돌려주는 것):  Hello Nicolas you are 15 years old



</script>

백틱을 이용하여 스트링과 변수를 이어준 코드

 

<script> 


function sayHello(name, age){ 
    console.log(`Hello ${name} you are ${age} years old`);
}

const greetNicolas = sayHello("Nicolas", 14)

console.log(greetNicolas)


//return(값을 돌려주는 것):  Hello Nicolas you are 14 years old 
//                           undifined



</script>

 

undifined상태에 놓이지 않기 위해서는

함수 안에 return을 붙여준다.

sayHello는 console.log만 찍어주고 아무것도 반환(return)하지 않은 상태이기 때문이다.

코드는 그럼 바로 아래와 같이 된다.

 

<script> 


function sayHello(name, age){ 
    return `Hello ${name} you are ${age} years old`;
}

const greetNicolas = sayHello("Nicolas", 14)

console.log(greetNicolas)


//return:  Hello Nicolas you are 14 years old 



</script>

- console.log와 다르게 return은 ()안에 내용을 입력하지 않는다.

 

 

<script>


const calculator = {
	plus: function(a, b){
		return a + b;
   }
}


const plus = calculator.plus(5, 5)

console.log(plus)
//결과값: 10


</script>

덧셈에 대한 함수를 만들고 

그것에 대한 매개변수를 넣은 객체를 실행시켜

console에 나타나게 한 코드이다.

 

 

<script>


const calculator = {
	minus: function (a, b){
		return a - b;
    }
}

const minus = calculator.minus(10, 5)

console.log(minus);


</script>

빠보야.. 아예 새로 파지 말고.. calculator는 객체니까 그 안에 key: value값으로 집어넣어보자.

 

 

<script>


const calculator = {
	plus: function(a, b){
    	return a+b;
    },
    minus: function(a, b){
    	return a-b;
    },
    div: function(a, b){
    	return a/b;
    },
    mul: function(a, b){
    	return a*b;
    },
    squareRoot: function(a, b){
    	return a**b;
    }
}

const plus = calculator.plus(1, 1)
const minus = calculator.minus(10, 5)
const div = calculator.div(10, 5)
const mul = calculator.mul(5, 5)
const squareRoot = calculator.squareRoot(2, 2)


console.log(plus, minus, div, mul, squareRoot);
//결과값: 2 5 2 25 4


</script>

하.. 은근 참고하면서 했는데도 어렵네

쉼표쓰는거라던가 중괄호 닫기 이런거 안되서 실패를 거듭하여 완성.

 

 

#2.2 JS DOM Functions

DOM (Document Object Module)

자바스크립트는 html의 모든 요소를 가지고 와 객체로 사용한다.

그러한 객체는 많은 key를 가지고 있다.

 

- .innerHTML : html내용 수정

title.innerHTML= "Hi!! js"

과 같이 HTML내부의 내용을 DOM객체를 통해 수정할 수 있다.

 

 

 

#2.3 Modifying the DOM with JS

html, css를 자바스크립트로 수정할 수 있다. 신기...

오픈 마이드를 가진다 ㅋㅋㅋㅋ

쩝.. 찔린다.

 

- console.dir(x);

객체 x에 들어 있는 모든 종류의 object를 볼 수 있음

 

- document.querySelector("x");

노드의 첫 번째 자식을 반환,

document의 모든 자식을 검색하겠다는 뜻.

""내용의 변수x에는

id일 때는 #x, class일때는 .x 방식으로 써주면 된다.

 

노드가 뭐지?

 

 

#2.4 Events and event handlers

function handleResize(){
    console.log("I have been resized")
}


window.addEventListener("resize", handleResize);

 

함수를 쓸 때 handleResize()로 쓰지 않는 것이 중요.

()를 쓰면 바로 소환한다는 의미이지만

현재 나는 이벤트가 일어날 '때' 함수를 쓰고 싶은 것이니까 ()를 써주지 않는다.

 

function handleResize(event){
    console.log(event)
}


window.addEventListener("resize", handleResize);

호출하면 이벤트에 대한 정보를 알 수 있다.

나중에 동작을 제어하기 전에 어떤 것을 다룰 수 있는지 한 번 보는 것도 나쁘지 않다고 하신다.