JavaScript 실습 필기 함수Function

WEB Console 창을 이용하여 모든 a태그 가져오기

consonle창에 

> document.queryselectorAll('a') 검색

> document.queryselectorAll('a') 검색
>(4) [a,a,a,a]

>(4) [a,a,a,a]

검색결과:노드리스트를 받을수잇음, 배열이라고 생각하면됨

var alist = document.queryselectorAll('a'); 

console.log

console.log(alist[0]);

위결과를 alist라는 변수에 담는다 줄바꿈(Shift+Enter)
console.log 를 사용하면 괄호안에 잇는 내용이 콘솔창에 출력된다
첫번째 태그 출력

>> <a href="html.html">HTML</a>

 

-length를 사용 하면 몇개의  a태그를 찾앗는지 출력된다

var alist = document.querySelectorAll('a');

console.log(alist.length);

 

반복문을 사용하여 모든 태그가 출력되는것을 확인할수잇다

var alist = document.querySelectorAll('a');

var i = 0;

while(i &lt alist.length){

    console.log(alist[i]);

    i = i +1;

}

 

 

반복문을 사용하여 모든 a태그 컬러를 'powderblue'로 변경

var alist = document.querySelectorAll('a');

var i = 0;

while(i &lt alist.length){

    console.log(alist[i]);

    alist[i].style.color = 'powderblue';

    i = i +1;

}

위그림과 같이 콘솔창을 활용하여 데이터 조회 및 변경을 해보앗다.

아래는 위에서 찾은 데이터 기반으로 Function 함수를 만들어 보려고 한다.

함수 function 만들기

<ul>
  <script>
    function two() {
        document.write('<li>2-1</li>');
        document.write('<li>2-2</li>');  
      }
      document.write('<li>1</li>');
      two();
      document.write('<li>2-3</li>');
      document.write('<li>3</li>');
      document.write('<li>4</li>');
      document.write('<li>5</li>');
      two();
  </script>
</ul>

--함수 이름을 two로 정한다 
--중복 하고자 하는 데이터를 중괄호{}안에 넣는다
아래 데이터를 얻는다.

• 1
• 2-1
• 2-2
• 2-3
• 3
• 4
• 5
• 2-1
• 2-2

Parameter[매개변수] & Argument[인자]

<script>
  function onePlusOne() {
  	document.write(1+1+'<br>');
  }
  onePlusOne();
</script>

입력 값에 따라 다른결과 출력하기:

<script>
  function sum(left,right) {
  	document.write(left+right+'<br>');
  }
  function sumcolorRed(left,right) {
  	document.write('<div style="color:red">'+left+right+'</div><br>');
  }
  sum(2,3); // 5
  sum(4,3); // 7
  sumcolorRed(3,4); // 34
</script>

()안에 변수를 매개변수 또는 파라미터 라고한다.
함수로 전달하는 값을 인자 혹은 아규먼트라 부른다.

Return[출력]
결과 값을 돌려준다,즉 계산식의 값을 저장할수잇다

<script>
  function sum2(left,right) {
 	 return left+right;
  }
  document.write(sum2(2,3)+'<br>'); // 5
  document.write('<div style="color:red">'+sum2(2,3)+'</div>');
  document.write('<div style="font-size:3rem;">'+sum2(3,4)+'</div>');
</script>

Return은 원자화된 기능을 다양한 맥락에서 활용할수 잇는 자유도가 생긴다

Return을 활용하여 left,right에 들어간 매개변수 값을 리턴을 통해 출력함으로서

다양한 용도로 함수를 활용할수잇다

5

5

7