41일차 수업정리(js - 반복문, 제어문, 함수, 내장객체)

**eclipse에서 apache tomcat 설정

    => java, php를 이용하여 웹서버를 구성하는 경우 java나 php의 내용을 번역하여 html로 변환 or 만든 웹사이트를           배포하고자 할 때 설치

    => 처음 웹 프로젝트 실행시 tomcat 버전을 선택하고 tomcat 명령어가 있는 디렉토리를 선택하여 실행

    => 위처럼 했는데 실행되지 않는 경우 포트 문제(포트 변경 필요)

        - 포트를 변경하고자 할 경우 Server 디렉토리 내부의 server.xml에서 port 수정

        - <Server port="8001" shutdown="SHUTDOWN"> 부분의 port가 -1로 되어있으면 수정

          (0~1024, 1521, 8080, 3306, 27017번은 회피)

        - <Connector connectionTimeout="20000" port="9000" protocol="HTTP/1.1" redirectPort="8443"/>

          (port가 8080인 경우 오라클이 구동중이면 port 충돌 발생 - port번호 변경)

          (내 컴퓨터를 웹 서버로 사용시 80(http), 443(https)로 변경, 80, 443은 포트번호 생략해도 외부에서 접근가능

    => JavaWeb이나 Spring을 할 때 Servlet이나 JSP파일을 추가하면 에러가 나는 경우가 있음

        (tomcat/lib 디렉토리의 servlet-api.jar 파일을 WebContent/WEB-INF/lib 디렉토리에 복사)

 

**반복문

1. for 

    => 형식 : for(처음 1회 수행할 식; 판별식; 두번째 부터 수행할 식){  반복할 내용;  }

    => 3개의 식 모두 생략 가능( ';' 는 생략하면 안됨)

        - 처음 1회 수행할식 수행후, 판별식을 확인하여 false가 아니면 { }안의 내용을 수행(판별식이 false가 아닐때까지)

    => 주로 사용하는 형식

        - for(변수 초기화; 중단조건; 증감식)

//image1.png~ image9.png까지 본문에 출력
//document.write(출력할 내용) 호출시 body에 내용 출력 - 태그도 적용됨
//images/image + a + .png 부분은 ''로 묶어야 실행 됨
for(var a = 1; a<10; a+=1){
	document.write("<img src='images/image" + a +".png' width='33%'/>");
}

 

2. while

    => 중단 조건만 작성하는 반복문

    => 형식 : while(중단조건) { 반복할 내용 }

        - for는 반복할 횟수를 알때 for를 많이 사용하고, 중단 조건을 알 때는 while을 많이 사용

    => for처럼 사용 방법

        - 초기식;

          while(중단조건){ 반복할 내용;  증감식; }

var a = 1;
while(a<10){
	document.write("<img src='images/image" + a +".png' width='33%'/>");
	a+=1;
}

 

3. do~while

    => 반드시 1번은 수행한다는 의미 전달을 하기 위한 반복문

    => 형식 : do{ 반복할 내용 } while(중단조건);

    => for처럼 사용방법

        - 초기식;

          do{ 반복할 내용;  증감식; } while(중단조건);

 

**제어문의 중첩

    => 제어문은 중첩하여 사용 가능

    => 먼저 작성한 제어문이 나중에 닫혀야 함

    => 시작은 바깥쪽에서, 안쪽 제어문을 전부 수행한 후 바깥쪽으로 이동

 

**기타 제어문

1. break

    => switch나 반복문에 사용하여 가장 가까이에서 시작한 제어문을 빠져나가는 역할

    => switch에서는 조건업이 사용하지만 반복문에서는 분기문과 함께 사용하는 것이 일반적

2. continue

    => 반복문에서 가장 가까이에서 시작한 반복문의 다음으로 이동

3. return

    => 함수나 메소드를 종료하고 호출한 곳으로 제어권을 이동

      (retrun 뒤에 데이터가 있으면 데이터를가지고 return }

 

**function

    => 자주사용하는 코드를 독립적으로 수행할 수 있도록 하나의 이름으로 묶어둔것

    => function이 클래스나 인스턴스 안으로 들어가서 클래스나 인스턴스를 통해 호출하면 method라고 함

    => 함수는 독립적으로 실행

    => 별도의 메모리 영역(stack이라는 자료구조로 생성)을 가지고 생성

1. 종류

  1) 사용자 정의 함수 : 개발자가 직접 만든 함수

  2) maker 함수 : 프로그래밍 언어가 제공하는 함수

  3) 3rd party : 다른 개발자가 만들어서 제공하는 함수

2. 작성방법

  1) function 함수명(매개변수 나열){ 함수내용; (return 데이터;) }

  2) var 함수명 = function(매개변수 나열){ 함수내용; (return 데이터;) }

    => 예전에는 1)번 방법을 주고 이용, 최근에는 2)번 방법을 권장

    => 리턴은 생략이 가능

3. 함수 호출

    => 형식 : 함수이름(매개변수 대입);

    => return하는 데이터가 있으면 변수에 대입하거나 출력할 수 있고 다른 메소드를 연달아서 호출하는 것도 가능

4. argument(매개변수)

    => 함수를 호출할 때 넘겨주는 데이터

    => 자바스크립트에서는 매개변수 만들 때, 자료형 미기재

    => 함수호출시 매개변수의 값을 뒤에서부터 순서대로 생략하여 호출 가능

        - 생략된 매개변수는 undefined가 됨

    => 자바스크립트의 함수는 함수내에서 매개변수들을 별도의 배열로 만들어서 관리(배열명 : arguments)

        - 매개변수명 대신 arguments[인덱스]를 이용하여 매개변수 사용 가능(실제 이용하지는 않음)

5. return

    => return은 함수의 수행을 종료하는 제어문

    => return 다음에 데이터가 있으면 데이터를 가지고 호출한 곳으로 돌아감

        - 데이터 리턴시 해당 데이터를 다음 표현식에 사용할 수 있고, 데이터가 가진 메소드 재호출 가능

//2개의 매개변수를 받아서 더하는 함수
//1. 내부에서 출력
document.write("<hr/>");
function sum(num1, num2){
	document.write("결과 : " + num1 + num2);
}

//2. 결과값 받아서 출력(권장)
//내부에서 출력시 메소드 수행결과를 다른 곳에서 사용 불가
document.write("<hr/>");
function sum(num1, num2){
	return num1+num2;
}
//함수를 호출하고 결과를 result에 저장
var result = sum(1,6);

//출력
document.write("결과 : " + result);
	
//결과를 다른 곳에서 사용
result = sum(result, 7);

//출력
document.write("결과 : " + result);

6. 함수 확인

    => 직접만든 함수가 아닌 경우 함수의 매개변수를 확인하고 리턴타입을 확인

    => 함수는 도큐먼트를 확인하면서 사용

 

7. recursion(재귀)

    => 함수가 자기 자신을 내부에서 다시 호출하는 것

    => 장점 : 복잡한 로직을 간단하게 구현

    => 단점 : 함수가 내부에서 함수를 재호출하여 결과가 나오는데 시간이 걸리고 메모리 사용량이 많음

    => 합계, 펙토리얼, 피보나치, 하노이의 탑등이 재귀로 구현 할수 있는 대표적인 알고리즘

//n번째 피보나치 수열의 값을 리턴해주는 함수
//재귀로 구현
function fibo(n){
	//재귀는 중단 조건이 있어야 함
	if(n == 1 || n == 2){
		return 1;
	}
	return fibo(n-1) + fibo(n-2);
}
//출력
alert(fibo(9));

8. Call By Value & Call By Reference

    => Call By Value : 매개변수의 자료형이 scala type인 경우

        - 함수 내부에서 매개변수의 값을 변경해도 원본에는 영향 없음

    => Call By Reference : 매개변수의 자료형이 vector type인 경우

        - 함수 내부에서 매개변수 내부의 데이터 변경시 원본 데이터도 변경

//x1는 1개(scala type)짜리 데이터라 함수나 메소드에 대입해도 값이 절대 변경되지 않음
var x1 = 10;
function callbyvalue(n1){
	n1 = n1 + 1;
}
callbyvalue(x1);
alert(x1);
	

//배열은 함수나 메소드 대입시 배열의 내용이 변경될 수 있음
var x2 = [1,2,3,4];
function callbyreference(n2){
	n2[0] = n2[0] + 1;
}
callbyreference(x2);
alert(x2);

9. 자바스크립트의 함수는 일급 객체

    => 일급 객체 : 함수도 하나의 데이터로 취급한다는 의미

    => 함수도 변수에 대입이 가능하고, 타 함수의 매개변수가 될수 있고, return도 가능

  1) CallBack Function

    => CallBack은 이벤트가 발생하면 호출되는 함수

    => 자바스크립트에서는 이벤트 처리를 콜백함수를 이용해서만 처리

  2) 내부함수

    => 함수 안에 함수를 만드는 것이 가능

  3) closure

    => 언어마다 의미가 다름(언어로써, javascript에서, swift에서(람다))

    => 함수 내부에서 함수를 리턴하여 함수 외부에서 함수 내부의 데이터를 변경하기 위해 사용

    => 자바스크립트를 이용하는 곳의 면접에서 가장 중요

  4) 변수의 구분

    => local variable(지역변수) : 자신의 영역 내에서만 사용이 가능한 변수

    => global variable(전역변수) : 모든 영역에서 사용 가능한 변수

    => member variable(멤버 변수 - 속성, attribute, property, field) : 인스턴스가 소유하고 있는 변수

    => static variable(클래스 변수) : 클래스가 소유하고 있는 변수

  5) closure를 사용하는 이유

    => 프로그래밍에서는 특별한 경우를 제외하고 전역변수 사용을 금지

        - 전역변수는 프로그래밍 내부 어디에서나 값을 변경할 수 있기 때문에 가독성을 떨어뜨림

        - 객체지향의 개념에 맞지 않음

    => 객체지향 프로그래밍에서는 전역 변수를 사용하고자 하는 경우 Singleton 패턴의 클래스를 만들어 사용

 

10. Maker Function

    => Maker Function : 프로그래밍 언어가 제공하는 함수

    => JavaScript에서는 실제로는 window 객체가 소유한 함수이고, window 객체가 소유한 함수는 window.을 생략하고 호출 가능하므로 마치 Maker Function 처럼 사용

  1) alert : 대화상자에 메시지를 출력하는 함수

    => 매개변수 : 출력할 메시지

    => 모달 창을 만들어서 출력

    => 대화상자의 구분

        - modal : 제어권을 대화상자가 가지고 자신이 종료되기 전까지 제어권을 넘겨주지 않는 형태의 대화상자

          (ex - 파일메뉴의 열기 대화상자)

        - modeless : 제어권을 대화상자가 가지지만 종료되기 전에도 다른 곳으로 제어권을 넘길수 있는 대화상자

          (ex - 편집 메뉴의 찾기 대화상자) 

  2) confirm : 2개의 버튼을 만들어 확인과 취소를 선택하게 해주는 대화상자

    => 매개변수 : 출력할 메시지  /  리턴 : boolean

    => 확인을 누르면 true, 취소를 누르면 false 리턴

  3) prompt : 1줄 입력란과 확인, 취소 버튼을 만들어 한줄 문자열을 입력받고, 리턴하는 대화상자

    => 매개변수 : 출력할 메시지, 기본값  /  리턴 : (확인)입력한 문자열, (취소)null

  4) 현재 웹에서는 이런 대화상자를 거의 사용하지 않음

    => 브라우저에서 팝업창 차단 옵션 선택시 대화상자 미출력

    => 최근에는 팝업창 대신 layer popup을 이용

    => 위의 3개 함수는 학습시에 주로 사용

  5) eval()

    => body에 만들어진 태그의 name을 직접 입력해서 DOM객체를 가지고 오는 함수

    => 예전 웹페이지들에서 form안의 요소를 가져올 때 사용

    => 최근에는 document.getElementById()를 이용하여 가져오도록 권장

  6) 인코딩 / 디코딩 함수

    => encoding(암호화) : 문자열을 컴퓨터에 저장하는 형태로 변경하는 것

    => decoding(복호화) : 컴퓨터에 저장된 코드를 원래의 문자열로 되돌리는 것

    => URL에서 파라미터는 반드시 encoding을 해야 함

    => URL의 구조

        - 프로토콜://IP 또는 도메일:포트번호/요청경로?이름=값&이름=값...

        - 포트번호는 기본 포트번호 사용시 생략 가능

        - 요청 경로도 서버 설정에 따라 생략 가능

        - 물음표 뒤에 '이름=값' 부분을 parameter 또는 query string이라고 함

         (클라이언트가 서버에게 넘겨주는 데이터 - 반드시 인코딩되야 함, 다른부분은 하면 안됨)

    => 인코딩 관련 함수

        - escape : 일부 특수문자와 ASCll 코드를 제외하고 전부 인코딩

        - encodingURI : 웹 url을 구성하는 특수문자를 제외한 전부 인코딩

        - encodeURIComponent : 알파벳과 숫자를 제외한 모든 문자 인코딩

    => 디코딩 관련 함수 : unescape, decodeURI, decodeURIComponent

  7) isNaN(데이터)

    => 데이터가 숫자인지 판단하여 리턴

    => 앞에 is가 붙으면 자료형은 Boolean

  8) isFinite(데이터)

    => 데이터가 유한한 수인지 판단하여 리턴

  9) parseInt & parseFloat

    => 데이터를 정수와 실수로 변경해 주는 함수

    => 숫자와 문자가 혼재되있을 경우 앞에서부터 변경 가능한 부분 까지만 변경

 

11. JavaScript에서 함수 만드는 방법

    - function 이름(매개변수){  함수내용;  return 데이터; }

    - var 이름 = function(매개변수){  함수내용;  return 데이터; }

 

**비교

Class	Map
RDBMS	NoSQL
Java의 Instance	javaScript의 객체

 

**Object(객체)

    => 존재하는 모든 것은 객체

    => Instance : 클래스를 기반으로 만들어진 객체

    => JavaScript는 객체 기반 언어이고, Java는 객체 지향 언어

        - 객체 기반 언어 : 클래스 없이 객체를 생성 가능

        - 객체 지향 언어 : 반드시 클래스를 만들고 객체를 생성

    => JavaScript의 객체는 Java의 Map과 유사한 성질을 갖음

1. 객체 생성

    => {속성이름:값, 속성이름:값...}

    => 속성이름은 특별한 경우가 아니면 문자열로 작성

    => 값은 데이터와 함수 모두 가능

        - 함수를 대입하면 이 경우 함수라고 하지 않고 메소드라고 함

        - 속성이름 대신 메소드명이라고 함

    => 객체에 이름이 없어서 객체를 재사용 할 수 없어 보통은 변수에 객체를 대입

        - var 객체명 = {속성이름:값, 속성이름:값...}

 

2. 객체가 자신의 속성을 호출

  1) 객체.속성이름

  2) 객체["속성"]

  3) 객체.메소드명(매개변수)

 

3. 속성에 값을 대입

    => 형식 : 객체.속성명 = 내용;

    => 없는 속성명을 사용시 속성이 추가

    => 존재하는 속성명 사용시 속성이 수정

 

4. 객체의 속성을 제거

    => 객체.속성 = null;

    => delete(객체 속성);

 

5. 생성자 함수(Constructor)

    => 동일한 모양의 객체를 여러개 생성하기 위해서 작성

    => 형식 : function 생성자함수명(매개변수){  내용;  }

    => 내용을 만들때 변수명 앞에 this.을 붙이면 속성으로 만들어짐

        - this. 을 생략하고 변수를 만들면 지역변수가 됨

    => 함수를 호출할때, new와 함께 호출

        - new는 함수를 가지고 객체를 생성하고, 그 객체의 참조를 리턴

    => 함수 내에서 this가 보이면 생성자 함수, this가 보이지 않으면 일반 함수

function person(name, phone, address){
	//this가 생성되었으므로 생성자 함수
	this.name = name;
	this.phone = phone;
	this.address = address;
}
	
//생성자를 호출하여 객체 생성
var person1 = new person("choi", "01055556666", "경기도 시흥시");
var person2 = new person("Lee", "01012123434", "경기도 평택시");

document.write(person1.name +" "+ person1.phone +" "+ person1.address);

6. for - in

    => 반복문이나 객체에 사용하여 반복문의 인덱스, 객체의 속성을 하나씩 순회하는 제어문

//객체의 모든 속성을 순회
//객체가 소유한 내용을 확인하고자 할 때 이용
for(attr in person2){
	console.log(attr + " : " + person2[attr]);
}
	
//자바스크립트에서의 배열은 속성이름이 숫자로된 객체로 취급
var ar = ["소녀시대", "레드벨벳", "트와이스"];
//자바스크립트에서는 idx의 인덱스가 대입됨
for(idx in ar){
	console.log(idx + " : " + ar[idx]);
}

7. 객체 생성을 하는 경우

    => 대부분의 경우 ajax를 사용할 때 파라미터를 하나로 만들기 위해 주로 사용

 

**내장 객체

    => 자바스크립트가 제공하는 객체

    => 아래의 사이트에서 속성과 메소드 확인 가능

        - http://www.w3schools.com/jsref/default.asp

        - http://devdocs.io/javascript/

1. 내장 객체의 분류

  1) BOM(Browser Object Model) : 자바스크립트가 생성해서 제공하는 객체

  2) DOM(Document Object Model) : body안에 만든 태그들을 사용할 수 있도록 해주는 객체

2. BOM

  1) Object

    => 자바스크립트의 최상위 객체

    => 자바스크립트의 모든 객체는 이 객체를 상속받음

    => 최상위 객체 : 모든 객체가 가져야 하는 공통 속성을 가지고 있는 객체로 직접 객체 생성은 하지 않음

    => toString() : 객체를 문자열로 변환해주는 메소드

        - 이 메소드는 직접 호출해도 되지만 출력 메소드에 객체 이름 대입시 자동으로 호출

        - 객체 지향 언어들은 이러한 유형의 메소드를 소유하고 있음

  2) number

    => 숫자 데이터를 저장하기 위한 객체

    => 숫자 리터럴을 이용하여 생성할 수 있고, number("숫자로된 문자열")로 생성

  3) string

    => 문자열 데이터를 저장하기 위한 객체

    => 변경할 수 없는 형태로 문자열을 저장하므로 모든 메소드가 작업을 하고 리턴 함

    => 문자열의 길이는 length 속성이 제공, charAt(인덱스)호출시 인덱스 번째 문자 리턴

    => 그 이외의 메소드

        - trim() - 좌우 공백제거

        - toUpperCase() - 대문자로

        - toLowerCase() - 소문자로

        - indexOf(문자열) - 문자열 존재시 문자열의 위치, 존재하지 않으면 음수를 리턴

        - lastIndexOf(문자열)

        - split(정규식) - 정규식을 기준으로 문자열을 분할하여 배열로 리턴

        - subString() - 문자열의 위치를 가지고 분할하여 리턴

        - substr()

        - charCodeAt(정수) - 코드를 가지고 문자를 리턴

    => 알고리즘 공부시에는 되도록 length와 charAt만으로 모든것을 해결하는 게 좋음

    => 애플리케이션 구현시에는 메소드를 찾아서 사용

 

Tip!

1. 한글 정렬 할때 : 가보다 크고 나보다 작으면 ㄱ으로 시작하는 글짜

2. 한글 확인 : 가보다 크거나 같고 힣보다 작거나 같으면 한글

3. 풀어보기 - 입력받은 문자열을 모두 대문자로 변환