Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
Similaire à 외계어 스터디 3/5 function and object
Similaire à 외계어 스터디 3/5 function and object (20)
Plus de 민태 김
Plus de 민태 김 (18)
외계어 스터디 3/5 function and object
- 1. 1 2 3 4 5 Overview Expressions & statements Function & Object Event & Library Storage & Network & SCM(git) Learn Programming with Web Language For non-developers
- 3. 아들바보
- 4. 문법에 지배당하지 않고! 생각하는 방식을 탐구하기 명심하세요“ ”
- 5. 두 프로그램의 차이는?
- 6. y = f(x) 함수(function)는 한 번 정의하면 몇 번이든 실행할 수 있는 Javascript 코드 블록이다. 코드 블록 실행
- 7. 함수의 이름 매개변수 (Arguments) 반환값 y = f(x)
- 8. y = f(x) 함수의 이름 == 변수 매개변수 (Arguments) 반환값 호출(실행)
- 9. 함수의 이름 == 변수 매개변수 (Arguments) 반환값 호출(실행) Javascript에서 함수는 조금 특이한 변수이다. ! “변수 myfunction 은 매개변수 x, y를 전달받아 코드 블럭을 실행 한 후 반환값을 호출자에게 돌려 주는 특이한 변수이다” 변수 myfunction가 가진 고유한 기능인! 함수 기능을 괄호()를 이용하여 실행하고 있다. '이름이 f인 이상한 상자’ 에 물건을 넣으면 값이 나오는 기능 y = f(x)
- 10. 특이하다는 것의 의미 Javascript에는 다양한 값(숫자,문자,함 수 등) 들을 모아놓은 복합체가 있다 우리는 그것을! 객체라 한다
- 11. 객체(Object)의 형태
- 12. 객체(Object)의 사용
- 13. 객체(Object), 복합체의 의미 객체 O는 원시 데이타 형을 가질 수 있다 객체 O는 함수 F를 가질 수 있다 함수 F는 함수F2를 가질 수 있다 함수는 객체의 한 종류다 객체 O는 객체 O2를 가질 수 있다
- 14. 실습 - 1부터 10까지 숫자 표시하기 *HTML 버전
- 15. 실습- 1부터 10까지 숫자 표시하기 * JS 버전
- 16. 실습 - 짝수는 빨간색, 짝수는 파란색 표시
- 17. 실습 - 홀짝수를 CSS를 이용하기
- 18. 실습 정리 : 코드 다시보기 객체 객체 window의 변수 (함수를 저장) 객체 함수 함수에 전달할 값 객체 반환 객체 함수
- 19. 객체(Object)로 무엇을 하는가? 프로그래머의 의도에 따라 객체는 아무 것도 없는 빈 객체 {}부터 무한에 가까울 정도로 복잡한 객체가 될 수도 있습니다 높은 자유도를 가진 객체로 프로그 래머들은 현실 세계를 묘사합니다
- 20. 사람 객체(Object) 묘사 나이 먹음, 다이어트 하기, 뺄샘 기능(function)이 있고 나이, 키, 몸무게, 취미를 가 지고 있는 사람을 객체로 묘사. 가지고 있는 기능을 호출함으로써 객체 스스로의 상 태를 변경할 수 있고 특수기능(뺄샘)을 실행하여 세상에 도움을 줄 수 도 있다.
- 21. 객체지향 방식으로 변경한 실습 코드 왼쪽과 오른쪽의 차이는? *참고: 두 프로그램은 동일한 동작을 수행합니다.
- 22. 소스 코드가 길어졌다! 22줄 vs. 36줄
- 23. 처음보는 코드 형태가 보인다.
- 24. 왼쪽의 코드에서 보이던 요소들이 오른쪽은 분산되어있다!
- 25. 사라진 태그가 있다 ?
- 26. ... 처음 보는 코드 “new” List 는 함수를 값으로 저장한 변수이고! List( ) 는 그 함수를 실행시키는 구문이다. new 명령어는 함수에게! ‘복사본’을 만들어 반환하라고! 지시하는 지시자이다 하나씩 풀어봅시다
- 27. 처음 보는 코드 “new” Javascript 에서 함수는 객체다.! new로 호출되어 반환된 함수의 ‘복사본’을 객체의 ‘인스턴스’라 한다! 인스턴스는 new를 이용하여 1개 이상, 원하는 수 만큼 만들 수 있다! 만들어진 인스턴스들은 각 각 완전한 독립체이며 독립된 공간을 점유한다 ... 하나씩 풀어봅시다
- 28. 하나씩 풀어봅시다 처음 보는 코드 “this” 함수 안에서 var me 와 this.me 는 변수 ‘me’를 만든다는 점에서 같다! var 로 생성된 변수는 함수가 실행되는 동안만 유지된다! this에 추가하여 만든 변수는 함수의 인스턴스에서도 유지된다
- 29. 하나씩 풀어봅시다 처음 보는 코드 “this” 함수 안에서 var me 와 this.me 는 변수 ‘me’를 만든다는 점에서 같다! var 로 생성된 변수는 함수가 실행되는 동안만 유지된다! this에 추가하여 만든 변수는 함수의 인스턴스에서도 유지된다 값은 10 값이 없다 (undefined)
- 30. 하나씩 풀어봅시다 처음 보는 코드 “this” this.parent 와 this.add 는 this에 추가된 함수다! 따라서 List 의 인스턴스 list 에서 호출할 수 있게된다! this의 값들은 인스턴스 안에서 공유(접근, 사용)된다. List 객체의 변수 me가 add 함수 내에서도 사용되 고 있는 것 을 볼 수 있다
- 31. 코드가 “분산” 되어있는 이유 동일한 동작을 수행하는 코드의 중복을 최대한 억제한다! 동일한 코드는 함수를 만들어 호출하여 재사용한다! 함수 또한 공통 요소가 있다면 객체로 묘사하여 결합한다! 객체에 포함된 함수를 객체의 멤버 함수(메소드)라 하고! 객체에 포함된 변수를 속성이라 한다. List 객체는 ! parent, add 두 개의 ! 멤버 함수(메소드)가 있다
- 32. 코드가 “분산” 되어있는 이유 어떤 객체가 있고, 객체가 제공하는 여러 기능들이 있다고 가정하면! 객체를 사용하기 위해 인스턴스를 만들어 객체를 사용할 수 있다! 객체가 제공하는 기능의(메소드, 또는 변수) 사용법을 안다면! 객체를 만드는 행위와 사용하는 행위는 완전히 독립될 수 있다 내가 만든 칼로 전쟁을 하던 무를 썰던 난 상관 하지 않고 칼을 만들겠소!
- 33. 객체를 만드는 행위! 만드는 과정은 사용을 전제로 하나, 사 용법은 다양해 질 수 있다. 예) 몇 개의 객체 인스턴스가 만들어 질지 예상할 수 없다. 객체를 사용하는 행위! 사용하는 행위는 필요에 따라, 원하는 방식으로(객체가 제공하는 자유도 범위에서) 사용되어질 수 있다. 사용자 입장에서 객체의 제공 기능을 아는것은 중요하나 어떻 게 만들어 졌는지 아는것은 불필요하다 코드가 “분산” 되어있는 이유
- 34. 코드의 규모가 “진짜 길어” 졌을까?
- 35. 실제 만들고자 하는 부분만 본다면 (1) 코드는 실제 동작의 의미와 유사해졌고,! 따라서 구현 하고자 하는 의미가 선명해졌으며,! UI 추가를 위한 반복적인 시스템 코드들이 제거되었다. 실제 만들고자 하는 부분만 본다면 (2) 추가로 새로운 리스트(UL)가 필요한 경우 List 객체를 재사용 함으로서 생성하는 객체의 코드 구조에 따른 의존성이 제거됨 코드의 규모가 “진짜 길어” 졌을까?
- 36. 객체의 정보 “은닉과 약속” 으로 정리 정보의 은닉 객체는 객체 사용자에게 내부 구조를 숨긴다! 내부 구조를 은닉한다는건 외부 구조와 독립됨을 의미한다 객체의 약속 객체는 객체가 제공하는 기능을 공개한다. ! 이를 인터페이스라 하며 규정된 입력을 넣으 면 약속된 동작이 수행될 것을 보장한다. 이 약속을 기반으로 사용자는 객체가 제공하는 범위 안에서 자유롭게 객체를 사용하며, 제 작자는 약속의 테두리 안에서 외부와 독립된 내부를 자유롭게 변경할 수 있는 자유를 누 릴 수 있다.
- 37. 이것을 프로그래머들은 “캡슐화(encapsulation)” 라 한다 병이 걸려 약을 먹어야 한다면 우리는 약사의 지시대로 식후 30분 후, 하루 3번 두 알씩 먹 는다는 약속만을 알면 된다. 하지만 약속은 중요하다. 환자에게 통보 없이 약의 사용법이 바뀐다면 환자가 죽 을 수 도 있기 때문이다. 그렇게 많은 프로그래머들이 지옥을 경험한다.
- 38. 이상한 코드
- 39. 이상한 코드 클로저로만 접근할 수 있는 변수! 자바스크립트 함수는 클로저를 갖는다. 클로저는 함수와 함수가 만들어진 환경으로 구성되며, 환 경은 함수 생성 당시 접근 가능한 변수 등을 말한다. 인스턴스에 생성된 변수! 일반 변수와 마찮가지로 언제든 인스턴스에 변수를 추가할 수 있 다. 만들어진 인스턴스에만 존재.
- 40. 이상한 코드 객체의 기능을 확장! prototype을 이용하여 자바스크 립트는 객체의 특성을 확장할 수 있다. prototype 으로 확장된 지 점을 기준으로 이후 모든 인스턴 스에 확장된 내용이 적용된다.
- 41. 클로저를 이용한 함수 생산 5를 반환 3.333333
- 42. 함수를 이용한 색다른 코드 작성 방법 객체 형태의 코드 작성으로 코드의 의도 를 명확히 표현했던 셈플 코드의 반복문 을 함수를 이용하여 제거해 보자
- 43. 함수를 이용한 색다른 코드 작성 방법 for 반복문이 사라진 자리에 함수를 입 력값으로 받는 range 함수가 등장
- 44. range 함수의 정체 전달된 함수를 시작 값 0 부터 1씩 증가된 정수와 함 께 입력한 횟수(l) 만큼 반 복 호출하는 함수
- 45. range 함수의 정체 Javascript는 함수의 아규 먼트의 목록을 가지고 있는 특별한 배열형 arguments 변수를 제공하여 가변형 아 규먼트 처리가 가능하도록 지원한다.
- 46. range 함수의 정체 전달된 함수를 1씩 증 가한 데이타와 함께 반복 호출
- 47. range 함수 사용 0부터 9까지 addList 실행 1부터 10까지 addList 실행 10부터 19까지 addList 실행 실행할 함수의 위치가 다름. 이는 range 함수가 순서가 달라졌을 때의 처리를 했기 때문
- 48. 생각을 표현하는 다양한 방식이 있으며 프로그래밍 언어는 이를 지원합니다 생각하는 방법을 ! 훈련해야하는 이유 “ ”
- 49. 1
- 50. “다음시간에”;
- 51. 2
- 52. “만나요~~; Unclosed string. Kim min tae @ibare! NCSOFT http://ibare.kr https://medium.com/@ibare