JavaScript (ch8-10)

함수

• 연속적으로 반복되지 않는 경우. 반복문 대신 사용

<script>
	function 함수명(){
	 
	}
</script>

• 강의예제

<h1>Function</h1>
    <h2>Basic</h2>
    <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>3</li>');
        two();
      </script>
    </ul>
    <h2>Parameter & Argument</h2>
    <script>
      function onePlusOne(){
        document.write(1+1+'<br>');
      }
      onePlusOne();
      function sum(left, right){
        document.write(left+right+'<br>');
      }
      sum(2,3); // 5
      sum(3,4); // 7
    </script>
    <h2>Return</h2>

함수선언

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/function

---

객체

객체생성

var 객체명 = {
	"A":"a",
    "B":"b"
}

실행

"+객체명.B+" 

결과(가져온 데이터)

b

추가

객체명["C"] = "c"

결과

객체 = {
	"A" : "a",
    "B" : "b",
    "C" : "c"
}

• 객체의 키값을 가져오는 반복문

for(var key in 객체) {
	document.write(객체[key]='<br>')
}

• 함수 정의

객체.함수명 = function(){}

• 메소드(객체에 소속된 함수) 추가

객체.함수 = function(){
	for(var key in this) {
    	document.write(key+' : '+this[key]+'<br>')
    }
}

---

정리

파일로 쪼개서 정리하기

colors.js 파일로 구현코드 이동,
<script src="colors.js">

장점

• 1. 가독성이 좋아짐
• 2. 캐시절약

라이브러리와 프래임워크

라이브러리

• 재사용하기 쉽게 되어있는 소프트웨어

프레임워크

• 프레임워크를 가져오고, 살짝씩 수정하는 용도 (밀키트)

라이브러리

ex. jQuery(googleCND)

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js">
</script>

UI/API

user interface

• 사용자 인터페이스

application programming interface

• alert ...

그 외

document : 웹페이지의 태그를 삭제하거나 자식태그를 추가하고 싶을 때
DOM : "
window : 웹브라우저 자체를 제어
ajax : 웹페이지를 리로드하지 않고 정보를 변경
cookie : 웹페이지가 리로드되어도 현재 상태를 유지하고 싶은 경우
offline web application : 인터넷이 끊겨도 동작하는 웹페이지 제작
webRTC : 화상통신 웹 앱
speech : 사용자의 음성 인식, 음성으로 정보 전달
webGL : 3차원 그래픽
webVR : 가상현실