생활코딩 | javascript2

yoongiiii·2023년 8월 21일

생활코딩

목록 보기

4/11

함수(function)

많아진 코드를 잘 정리정돈하기 위한 도구. 유지보수에 좋음

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

입력 => 매개변수(parameter)와 인자(argument)

매개변수(parameter)
: 값을 받아서 함수 안으로 매개해주는 변수들 (예제에선 left, right)
인자(argument)
: 함수로 전달하는 값 (예제에선 2와3)

예제
<script>
      function onePlusOne(){
      document.write(1+1+'<br>');
      }
      onePlusOne();
      function sum(left, right){
        document.write(left+right+'<br>');
      }

      sum(2,3);
      sum(3,4);
    </script>

함수를 실행할 때 어떤 입력값(인자)을 주면, 함수가 그 입력값에 따라서 다른 결과를 출력!

출력(return)

:무언가를 실행하지 않고, 계산이라는 기능만 구현 함으로써, 결과값만 먼저 출력해준다!!
ㅡ
left, right라는 것의 매개변수를 통해 들어간 값을
return을 통해서 출력함으로써
다양한 용도로 함수를 활용할 수있게 된다!!!!

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

객체(object)

정보의 양이 많아졌을 때의 정리 정돈 수단
1 배열 [ ]
정보가 순서대로 저장된다
2객체 { }
(이름이 있는 정리정돈 상자)
정보가 순서없이 저장된다
서로 연관된 함수와 변수를 같은 이름으로 그루핑해서 잘 정리정돈 하기 위한 도구 (객체에 속한 함수 = 메서드)

  <script>
  
      var coworkers = {
        "programmer":"A",
        "designer":"B"
      };
      
      만들어진 객체에서 데이터를 가져오는 방법
      document.write("programmer : "+coworkers.programmer+"<br>");
      document.write("designer : "+coworkers.designer+"<br>");
      
      만들어진 객체에 추가로 데이터 넣는 방법
      coworkers.bookeeper = "C";
      document. write("bookeeper : "+coworkers.bookeeper+"<br>");
      
      만들어진 객체에 추가로 데이터 넣는 방법2
      coworkers["data scientist"] = "D";
      document. write("data scientist : "+coworkers["data scientist"]+"<br>");
      
    </script>

객체와 반복분 for…in

생성된 객체에 있는 key값을 모조리 가져오는 반복문

검색”javascript object iterate”

객체의 데이터를 순회하는 코드

<script>
for(var Key in coworkers){
	document.write(coworkers[key]+'<br>');
}
</script>

for: key값들을 하나하나 가져와서 (반복문) 중괄호에 있는 코드를 실행해주는 명령
key: 우리가 가져오고 싶은 정보에 도달할 수 있는 열쇠

객체와 메서드

객체에는 함수를 포함한 데이터들을 담을 수 있다
showAll 메서드 추가해보기

<script>
  coworkers.showAll = function(){
    for(var key in this) {
      document.write(key+' : '+this[key]+"<br>")
    }
  }
  coworkers.showAll();
</script>

this : 함수 안에서 그 함수가 소속 되어있는 객체를 가리키는 약속된 기호

메서드: 객체에 소속된 함수
프로퍼티: 객체에 소속된 변수

파일 분리

함수는 코드가 많아지면 정리 정돈하는 도구!
객체는 함수와 변수가 많아지면 연관된 것들을 정리 정돈하는 도구!
객체가 많아지면????
파일로 쪼개서 정리 정돈하기 (서로 연관된 코드들을 파일로 묶어 그루핑)

라이브러리와 프레임워크

다른 사람의 도움을 받아 소프트웨어를 만들 수 있게 해주는 부품
[다른 사람과 협력하는 모델]

1라이브러리 (library)
: 내가 만들고자 하는 프로그램에 필요한 부품들이 되는 소프트웨어들을 잘 정리해 놓은, 재사용하기 쉽게 돼 있는 소프트웨어!
: 소프트웨어를 만드는 내가 라이브러리를 가져와서 쓰는 것
: 제이쿼리 (jQuery)
2프레임워크 (framework)
: 내가 만들고자 하는 프로그램에 언제나 필요한 공통적인 부분은 프레임워크라는 것으로 만들어 놓고,
만들고자 하는 프로그램의 특성에 따라 달라 지는 부분만 수정하게 돼 있는 소프트웨어!
: 프레임워크 안에 우리가 들어가서 작업하는 것

제이쿼리 (jQuery)
-jQuery 라이브러리 다운로드 후 내려 받은 파일을 프로젝트 디렉터리로 이동
-"CDN(Content Delivery Network)" 검색
라이브러리들이 CDN을 통해 자신들의 서버에 파일을 보관해 놓고, 사용자는 < script > 태그의 scr 속성을 통해 가져가는 방식
-활용을 원하는 js 파일에 코드 복붙 (3x snippet)
-$(''): 웹 페이지에 있는 모든 괄호 안의 태그를 jQuery로 제어!
-css() 사용 _ "jQuery css" 검색
-CDN을 삽입한 코드를 필요한 웹 페이지에 붙여 넣기

UI와 API

UI는 사용자가 시스템을 조작하기 위해 사용할 수 있는 (화면에 보이는) 장치이고,
API는 그 UI가 그 UI로서 동작하기 위해서, 어떤 프로그램이 그 프로그램으로서 동작하기 위해서 만들어진데 이용된 부품,기능,프로그램 이다. 애플리케이션을 만들기 위해 프로그래밍할 떄 사용하는 조작장치