JS Basic-2 | Notion

1. Function 사용법

2. Function 데이터 받기

3. Function Return

4. Document Object

5. HTML in Javascript

1. Function 사용법

너가 계속 반복해서 사용할 수 있는 코드 ‘조각’이라고 생각하면 됨.

1-1) Function이 없는 경우

// Function이 없는 경우
console.log("Hello my name is Nico.");
console.log("Hello my name is Ssu");
console.log("Hello my name is Simon.");
…

코드가 바뀌는 부분은 ‘이름들’일 뿐임.
나머지 코드는 그냥 복사될 뿐...

1-2) Function이 있는 경우

어떤 코드를 캡슐화해서 실행을 여러 번 할 수 있게 해줌.
function sayHello() {} : Function은 실행하게 될 코드 블록이 필요함 {} 중괄호처럼.

// function이 있는 경우
function sayHello() {
	console.log("Hello my name is"); 
}

// sayHello를 실행될 때마다 console.log가 실행됨.
sayHello();
sayHello();
sayHello();

Console

2. Function 데이터 받기

function 안에 매개변수 넣기!!!

2-1) 인수(argument)가 하나일 때

// 인수로 어떤 데이터가 들어오면 
// nameOfPerson이라는 변수 이름을 쓰게 되는 거임.
function sayHello (nameOfPerson) {  // 인수는 두 개도 됨.
	console.log(nameOfPerson);
}

sayHello("nico");
sayHello("dal");
sayHello("lyn");

Console

2-2) 인수가 두 개 일때

function sayHello (nameOfPerson, age) {
	console.log("Hello My name is" + nameOfPerson + "and I'm " + age);
}

sayHello("nico", 12);
sayHello("dal", 14);
sayHello("lyn", 24);

Console

3. Function Return

3-1) Return 타입이 Integer일 때

const age = 96;

function calculateKrAge(ageOfForeigner) {
	return ageOfForeigner + 2;
}

const krAge = calulateKrAge(age);

console.log(krAge);

Console

3-2) Return 타입이 String일 때

const age = 96;

function calculateKrAge(ageOfForeigner) {
	ageOfForeigner + 2;
	return "hello";
}

const krAge = calulateKrAge(age);

console.log(krAge);

Console

4. Document Object

자바스크립트는 HTML을 불러온다.
HTML은 접착제 같은 거야. HTML CSS와 자바스크립트를 가져옴.
자바스크립트를 사용하는 이유?
- HTML과 상호작용하기 위해서임.
- 즉, HTML의 Element들을 자바스크립트를 통해 변경하고 읽을 수 있는 거임.

4-1) Document : 브라우저에 이미 존재하는 Object

console에 document를 입력하면 작성한 HTML을 가져올 수 있음.

4-2) 자바스크립트

document.title = "Hello From JS!!!";

4-3) HTML

Untitled

4-4) View

Untitled

Q : 자바스크립트와 HTML에서 볼 수 있는 사실은?
- 자바스크립트가 HTML에 이미 연결되어 있다는 거임.

5. HTML in Javascript

5-1) HTML

<html>
	<body>
		<h1 id="title">Grab me!!!</h1>
		<script scr="app.js"></script>
	</body>
</html>

5-2) Javascript

document.getElementById("title");

Console

5-3) dir(object) 메소드

자바스크립트 객체의 속성을 출력함.

const title = document.getElementById("title");

console.dir(title);

Console