---
# System prepended metadata

title: "\U0001F984 뀨태쀼태빵태조"

---

# 🦄 뀨태쀼태빵태조

## 조원 소개
#### 깃허브 맞~ 팔해주세요~ 😁😁
- 뀨태조 대장+마스코트 : [임규태](https://github.com/lktgt15)
- 뀨태조 쫄다구 : [이연주](https://github.com/joylish)

## 🔥 이번주 작업물을 전시합니다~
### 01. 북카페
- 👶 뀨태

    [지금 바로 보러가기🏃‍♀️](https://codepen.io/lktgt15/pen/abBjaxZ)
![](https://i.imgur.com/7FiabIZ.png)

- 🐰 연주

    [지금 바로 보러가기🏃‍♀️](https://codepen.io/joylish/pen/PobaMyB)
![](https://i.imgur.com/IpemVUJ.png)

### 02. 로또
- 👶 뀨태
    
    [지금 바로 보러가기🏃‍♀️](https://codepen.io/joylish/pen/gOLjjVg) 
![Before](https://i.imgur.com/GrbTI7W.png)
![After](https://i.imgur.com/Ci9cZDz.png)

- 🐰 연주
    
    [지금 바로 보러가기🏃‍♀️](https://codepen.io/joylish/pen/BaQPLyw)
![](https://i.imgur.com/OZTBhBj.png)


## 🖐 이번주 공유할 것
- [codepen](https://codepen.io/)을 쓰시면 서로 공유할 수 있어요!
- [깨알 짝지자랑] 규태님이 알고리즘 공부 자료를 공유해주셨어요! 쀼태대장님은 👹 알고리즘 대마왕 DMW 👹

## 📙 이번주 공부 정리
### DOM ( Document Object Model )

- 문서의 내용을 객체로 표현  
- `<tag>` : 객체를 표현, 계층구조를 가짐, 노드라고 생각, 노드의 타입(Element,Text 등),이름,밸류등을 알아낼 수 있음  
- Element는 밸류가 없고 name이 있음  
- TextNode는 name이 없고 밸류가 있음  
`<h1>(E) => <TextNode>(T)` 일 때 TextNode를 찾으려면 h1을 찾아야함. 이름으로 찾기, 루트부터 탐색 등 방법이 다양함  

1. Browser는 html 파싱  
2. tag(element) 객체로 생성  
3. Tree 구성  
4. Tree대로 화면에 그린다.  

*DOM TREE*를 조작하면 화면이 변경된다. => Dynamic HTML 효과를 준다.  

### 가변인자함수

```JavaScript

<script type="text/javascript">
	function myFunc(num1,num2){
		console.log(num1+"/"+num2);
	}

/* 	myFunc(1); 인자 부족 : 에러안남
	myFunc(2,3);
	myFunc(4,5,6); 인자 초과 : 에러안남 */

	function sumAll(){
		let ret = 0;
		for(let i=0;i<arguments.length;i++){
			ret += arguments[i];
		}
		return ret;
	}
	
	console.log(sumAll(10));
	console.log(sumAll(10,20));
	console.log(sumAll(10,20,30));
</script>
```


### 함수 이름 겹침, 함수 인자로 넘김, 함수 리턴

```HTML5
<script type="text/javascript">
	function myFunc(num1,num2){
		console.log(num1+"/"+num2);
	}

/* 	myFunc(1); 인자 부족 : 에러안남
	myFunc(2,3);
	myFunc(4,5,6); 인자 초과 : 에러안남 */

	// 가변인자함수
	function sumAll(){
		let ret = 0;
		for(let i=0;i<arguments.length;i++){
			ret += arguments[i];
		}
		return ret;
	}
	
	console.log(sumAll(10));
	console.log(sumAll(10,20));
	console.log(sumAll(10,20,30));
	
	function big(value1,value2){
		return value1>value2?value1:value2;
	}
	
	console.log(big(100,200));
</script>
<script type="text/javascript" src="./js/util.js"></script>
```
- 스크립트에서 함수 이름이 겹칠 수 있다.  

```HTML
<script type="text/javascript">
	function myFunc(num1,num2){
		console.log(num1+"/"+num2);
	}

/* 	myFunc(1); 인자 부족 : 에러안남
	myFunc(2,3);
	myFunc(4,5,6); 인자 초과 : 에러안남 */

	// 가변인자함수
	function sumAll(){
		let ret = 0;
		for(let i=0;i<arguments.length;i++){
			ret += arguments[i];
		}
		return ret;
	}
	
	console.log(sumAll(10));
	console.log(sumAll(10,20));
	console.log(sumAll(10,20,30));
	

	
	function process(){

		function big(value1,value2){
			return value1>value2?value1:value2;
		}
		console.log(big(100,200));
	}

	process();
	console.log("outer : "+big(100,200));

</script>
<script type="text/javascript" src="./js/util.js"></script>
```

- 함수 안에 함수를 만들어서 script간 충돌을 막을 수 있다.  

```HTML
<script type="text/javascript">
	function display(viewHandler){
		let msg = "hello World!";
		// msg 화면에 나타내기 : 상황에 따라 다름.
		// 상황에 따라 달라지는 코드 (==> 함수)를 매개변수로 받아 실행
		viewHandler(msg);
	}
	
	display(function(msg){
		alert(msg);
	});

</script>
</head>
<body>
	<div id="greeting"></div>
	<script type="text/javascript">
		display(function(msg){
			document.getElementById("greeting").innerText = msg;
		});
	</script>
</body>
```

- 함수를 인자로 넘기면 다양한 상황에 대응할 수 있다.  

## 생성자 함수

```JavaScript
// 생성자함수 	: 규칙이 없다.
// 			: 사용하는 쪽에서 new 연산자와 함께 사용될 때 비로소 생성자 함수로 동작한다

function Person(name,age){
	// 생성자함수에서 this는 만들어질 객체를 가리킨다.
	
	// 동적 속성 추가
	this.name = name;
	this.age = age;
	this.increaseAge = function(){
		this.age++;
	}
}

let p1 = new Person("김재환",26);
```

다만 increaseAge는 객체마다 가지고 있을 필요가 없다.  

```JavaScript
// 생성자함수 	: 규칙이 없다.
// 			: 사용하는 쪽에서 new 연산자와 함께 사용될 때 비로소 생성자 함수로 동작한다

function Person(name,age){
	// 생성자함수에서 this는 만들어질 객체를 가리킨다.
	
	// 동적 속성 추가
	this.name = name;
	this.age = age;
}

// 클래스를 흉내낸다.
// Person 함수 객체에 prototype 
Person.prototype.increaseAge = function(){
	this.age++;
};

let p1 = new Person("김재환",26);
let p2 = new Person("송중기",37);

console.log(p1.name+"/"+p1.age);
console.log(p2.name+"/"+p2.age);

```
실행 결과는 같지만 메모리구조는 당연히 다르게 된다.  

### 고차함수

함수를 인자로 받거나 리턴하는 것을 말한다.  

```JavaScript
let arr = [200,10,60,450,30];

arr.forEach(function(element){
	console.log(element);
});

{
	let res = arr.filter(function(element,index){
		// 결과에 포함시키고 싶으면 true, 미포함이면 false
		// return element<100;
		return index%2==1;
	});
	console.log(res);
}

{
	let res = arr.map(function(element){
		return element**2;
	});
	console.log(res);
	console.log(arr);
}

{
	let res = arr.filter(element => element < 100).map(element => element+50);
	console.log(res);
}
```

## this

```JavaScript
	// this : 자신이 속한 객체, 미래에 생성될 객체 자기 자신을 가리키는 자기참조변수
	//		: 호출 시점에 결정됨
	function sayHello(){
		console.log(this);
		console.log("Hello "+this.name);
	}
	sayHello(); // 일반함수로 호출 : this --> 전역객체(window)
	
	let greeting = {
		name : "김재환",
		sayHi : sayHello,
	}
	
	greeting.sayHi(); // 객체의 메소드로 호출 : this --> 해당 메소드를 호출하는 객체
	
	new sayHello(); // 생성자함수로 호출 : this --> 생성되는 객체
```

## Event

- 특별한 사건, 상황  
- UI상에서 발생하는 어떤 Action, 상황  

1. Event : 발생한 이벤트 관련 정보  
2. Event Source : 이벤트 발생 근원지(대상)  
3. Event Handler : 이벤트 발생시 처리기  


```HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	
	function changeColor(){
		console.log(this);
		this.style.backgroundColor = 'pink';
		console.log('change');
	}
</script>

</head>
<body>
<!-- 	<h1 onclick="this.style.backgroundColor = 'pink';console.log('change');" style="background-color: grey;">최강 6반 화이팅!!!</h1>
 -->	
 	<h1 onclick="changeColor();" style="background-color: grey;">최강 6반 화이팅!!!</h1>
</body>
</html>
```
changeColor()는 h1것이 아니기 때문에 this는 Window를 가리킨다.  

```HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	
	function changeColor(element){
		console.log(element);
		element.style.backgroundColor = 'pink';
		console.log('change');
	}
</script>

</head>
<body>
<!-- 	<h1 onclick="this.style.backgroundColor = 'pink';console.log('change');" style="background-color: grey;">최강 6반 화이팅!!!</h1>
 -->	
 	<h1 onclick="changeColor(this);" style="background-color: grey;">최강 6반 화이팅!!!</h1>
</body>
</html>
```