🦄 뀨태쀼태빵태조

# 🦄 뀨태쀼태빵태조 ## 조원 소개 #### 깃허브 맞~ 팔해주세요~ 😁😁 - 뀨태조 대장+마스코트 : [임규태](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="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="changeColor(this);" style="background-color: grey;">최강 6반 화이팅!!!</h1> </body> </html> ```