[JavaScript -생활코딩] 보충정리 -2

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(var name in grades) {
    document.write("key : "+name+" value : "+grades[name]+"<br />");
}

함수

함수 = function

하나의 로직을 재실행 할 수 있도록, 코드의 재사용성을 높여줌

​

function함수명([인자...[,인자]]) {코드 return 반환값 }

<script>
function numbering() {
  document.write(1);
}
numbering();
</script>

<script>
  function numbering() {
var i = 0;
     while(i < 20){
       document.write(i);
       i += 1;
     }
}
      numbering();
      numbering();
      numbering();
      numbering();
</script>

i = i + 1

i++

i += 1

모두 동일함.

---

함수의 효용

함수 : 재사용성 / 유지보수의 용이 / 가독성

반복문은 기계적으로 그자리에서 반복할때만 사용

함수는 여러가지 자리에서 불러서 반복할때 사용

i = i + 1

i++  

i += 1

모두 동일함.

함수의 효용

함수 : 재사용성 / 유지보수의 용이 / 가독성

반복문은 기계적으로 그자리에서 반복할때만 사용

함수는 여러가지 자리에서 불러서 반복할때 사용

---

함수의 입력

<script>
  function get_member1() {
return 'egoing';
   }
  function get_member2() {
return 'k8805';
   }
  
    alert(get_member1());
    alert(get_member2());
  
</script>

return키워드가 등장하면 : 1.이함수를 종료시킨다 2.그다음에 리턴 뒤에있는 값을 함수의 출력값으로 반환

<script>
  function get_member1() {
     return 'egoing';
     return 'leezche';
     return 'graphic';
   }
  alert(get_member1());  
</script>

return 등장 후 egoing을 바깥으로 배출하고, 이함수는 종료 * 리턴다음에나오는 코드는 버려짐.

---

함수의 출력

<script>
  function get_argument(arg) {
     return arg;
   }
  alert(get_argument(1));  
    alert(get_argument(2));  
</script>

function get_argument(arg) ☜입력

return arg; ☜출력

alert(get_argument(1)); ☜(arg) arg에 숫자 1을 입력

alert(get_argument(2)); ☜(arg) arg에 숫자 2을 입력

<script>
  function get_argument(arg) {
     return arg*1000;
   }
  alert(get_argument(1));  
    alert(get_argument(2));  
</script>

1000, 2000 출력

arg = 매개변수 parameter

1,2 = 인자 argument

<script>
  function get_argument(arg1, arg2) {
     return arg1+arg2;
   }
  alert(get_argument(10, 20));  
    alert(get_argument(20, 30));  
</script>

 

2개의 인자의 합 30, 50 출력

---

함수의 다양한 정의방법

<script>
  numbering = function(){
     i = 0;
     while(i < 10){
       document.write(i)
       i += 1;
     }
   }
numbering();
</script>

numbering이라는 변수가 함수를 가지게 된 것.

<script>
  function numbering (){
     i = 0;
     while(i < 10){
       document.write(i)
       i += 1;
     }
   }
numbering();
</script>

↑ 위 코드 동일.

<script>
  (function (){
     i = 0;
     while(i < 10){
       document.write(i)
       i += 1;
     }
   })();
</script>

↑익명함수 : 이름이없고 바로 실행이된다.(일회성)

---

배열과 반복문의 조우

함수를 정의, 정의한 함수 호출, 반복문을 사용, 반복문과 배열을 결합, 배열안에 담겨진 값들을 출력

 

  function get_members(){
    return ['egoing','k8805','sorialgi']
  }
  members = get_members();
for(var i = 0; i <members.length; i++) {
  document.write(members[i].toUpperCase()+"<br />");
  }

---

배열의 데이터의 추가

.push : 꼬리에 하나의 값을 추가하는 것

.concat : 여러개의 데이터를 추가

.unshift : 시작 지점으로 첫번째에 하나의 값을 추가하는것

.splice : 특정구간에 특정 배열을 추가함

.splice(index+howmany)

index: 배열에 추가할 특정 배열의 위치

howmany: index에서 제거될 원소의 수 의 값 / 값 0 이면 어떠한 원소도 삭제 되지않음

(예) a["a","c"] a.splice(1,0, 'b') → a = ["a","b","c"]

---

배열의 제거와 정렬

제거

.shift : 첫번째 원소 제거

.pop : 배열의 끝점의 원소 제거

정렬

.sort / li : 정렬 ​

li.reverse : 역순으로 정렬

---

객체

다른언어에서는 연관배열(associative array), 또는 맵(map), 딕셔너리(dictionary)라는 데이터 타입이 객체에 해당

​

배열- 아이템 식별자로 숫자사용 / 객체- 아이템식별자로 문자사용

배열은 저장된 데이터들이 순서를 가지고있음. / 객체에 저장된 값은 순서가없다.

​

egoing = key ,10 = value

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(key in grades) {
    document.write("key : "+key+" value : "+grades[key]+"<br />");
}

위 코드를 아래 코드와 같이 var를 써서 변경 할 수 있다.

var grades = {'egoing': 10, 'k8805': 6, 'sorialgi': 80};
for(var name in grades) {
    document.write("key : "+name+" value : "+grades[name]+"<br />");
}

결과는 아래와 같다.

key : egoing value : 10 key : k8805 value : 6 key : sorialgi value : 80

​

for 문은 in 뒤에 따라오는 배열의 key 값을 in 앞의 변수 name에 담아서 반복문을 실행한다.

반복문이 실행될 때 변수 key의 값으로 egoing, k8805, sorialgi가 순차적으로 할당되기 때문에 grades[key]를 통해서 객체의 값을 알아낼 수 있다.

객체에는 객체를 담을수도 있고, 함수도 담을 수 있다.

---

객체지향 프로그래밍

var grades = {
    'list': {'egoing': 10, 'k8805': 6, 'sorialgi': 80},
    'show' : function(){
        for(var name in this.list){
            document.write(name+':'+this.list[name]+"<br />");
        }
    }
};
grades.show();

* this - function이라는 함수가 속해있는 객체를 가르키는 변수

​

grades [(list,show)] ☜ 이런느낌. grades가 연관되어있는 list와 연관되어있는 처리show를 하나의 안에 모아서 그룹핑 해놓은 것

= 객체지향 프로그래밍

---

라이브러리

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <script type="text/javascript">
     $('#execute_btn').click(function(){
        $('#list li').text('coding everybody');
     })
    </script>
</body>
</html>

↑ jQuery를 이용한 예제이다.

<!DOCTYPE html>
<html>
<body>
    <ul id="list">
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
        <li>empty</li>
    </ul>
    <input id="execute_btn" type="button" value="execute" />
    <script type="text/javascript">
    function addEvent(target, eventType,eventHandler, useCapture) {
        if (target.addEventListener) { // W3C DOM
            target.addEventListener(eventType,eventHandler,useCapture?useCapture:false);
        } else if (target.attachEvent) {  // IE DOM
            var r = target.attachEvent("on"+eventType, eventHandler);
        }
    }
    function clickHandler(event) {
        var nav = document.getElementById('list');
        for(var i = 0; i < nav.childNodes.length; i++) {
            var child = nav.childNodes[i];
            if(child.nodeType==3)
                continue;
            child.innerText = 'Coding everybody';
        }
    }
    addEvent(document.getElementById('execute_btn'), 'click', clickHandler);
    </script>
</body>
</html>

↑ jQuery를 이용하지 않고 동일한 기능을 구현한 예제이다.

 

---

API

Application Programming Interface의 약자

프로그램이 동작하는 환경을 제어하기 위해서 환경에서 제공되는 조작 장치 (프로그래밍 언어를 통해서 조작 가능)

​

alert도 일종의 인터페이스라고 할 수 있다.

​

UI

USer Interface의 약자

사용자를 대면하는 접점이 되는 지점

​

일반사용자는UI를 사용 개발자는 API를 사용

[피라미드 구조] 사용자 ----------------UI 웹개발자 웹브라우저 개발자 운영체제 C,C++ 어셈블리어 기계어

[피라미드 구조]

사용자
----------------UI
웹개발자
웹브라우저 개발자
운영체제
C,C++
어셈블리어
기계어​

[전산공학]

사용자
----------------interface
소프트웨어 공학
----------------interface
전자공학
----------------interface
전기공학

interface :

전기 신호의 변환(變換)으로 중앙 처리 장치와 그 주변 장치를 서로 잇는 부분. 또는, 그 접속 장치.

키보드나 디스플레이 등처럼 사람과 컴퓨터를 연결하는 장치.

​