JavaScript 복습02

#function 정의

   람다 방식 함수정의

 

장점: 람다를 쓰고 코드가 짧아진다.

단점: 읽기가 어렵다.(적응필요)

 

Property(프로퍼티) vs Filed(필드)

 

Property = public field(+method)

 

JavaScript Objects (name: value 의 쌍으로 생성 )

 

1. 변수에 단순 값 저장

var car = "Fiat";

 

2. 변수에 여러개의 Object 를 지정 (<-> json 아니다.)

var car = {type:"Fiat", model:"500", color:"white"};

 

ex1)

<p id="demo"></p>

 

<script>

// Create an object:

var car = {type:"Fiat", model:"500", color:"white"};

 

// Display some data from the object:

document.getElementById("demo").innerHTML = "The car type is " + car.type;

</script>

 

ex2)

<p id="demo"></p>

 

<script>

// Create an object:

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

 

// Display some data from the object:

document.getElementById("demo").innerHTML =

person.firstName + " is " + person.age + " years old.";

</script>

 

※ 여러개의 오브젝트를 담을때 function()함수도 담을 수 있다.

ex.

 

var person = {

  firstName: "John",

  lastName : "Doe",

  id       : 5566,

  fullName : function() {

    return this.firstName + " " + this.lastName;

  }

};

 

//함수를 정의할때 사용한 this.firstName 과 this.lastName 은

var person 내부에서 정의한 object를 지칭

 

※ 이벤트 onload() 예.

onload() 이벤트란, page 전체가 로드됬을때 실행

ex.

var xhr = new XMLHttpRequest();

 

//2. 응답 로드

xhr.onload = function(){

    //3. 서버 응답이 정상이면,

    if(xhr.status == 200){

         //4. 코드 실행(내용 수정하는 코드)

         document.getElementById('content').innerHTML = xhr.responseText;

    }

}

 

 

이스케이프(escape) 처리

 

GET/POST

doGet() / doPost()

 

http://localhost:8080/a.jsp?id=1024

 

GET방식은 URL을 통해서 인자를 넘기는 방식

   통상 2000-4000 바이트(ASCII)

 

- 길이가 4k 가 넘는 경우

- 인자가 노출되면 안되는 경우 cf. 암호화는 아님

 

# URL

 - 통상 2000 - 4000 바이트 (ASCII)만 허용

 - 빈칸 허용안됨

ex. i am a boy 을 썻을때 URL query는 i+am+a+boy 로 보낸다.

프로세스 : ' ' -> + -> ' '

 

POST방식은 request body에 인자를 넘기는 방식

 

indexOf / lastIndexOf - > 편집메뉴의 찾기/바꾸기 기능과 비슷

search -> sql의 select 기능과 같다. ==> 패턴지정해주어야한다.(패턴검색가능(regex))

 

* replace("바꿀 문자열값", "대체 문자열값");

ex.

str = "Please visit Microsoft and Microsoft!";

var n = str.replace("Microsoft", "W3Schools");

 

바꿀 문자열은 대소문자를 구분한다. 아래의 예제처럼 대문자로 하면 Microsoft 를 못찾는다.

ex.

str = "Please visit Microsoft!";

var n = str.replace("MICROSOFT", "W3Schools");

 

==> 못찾아서 변경 X

 

따라서 대소 문자를 구분하지 않으려면 다음 과 같이 플래그를 구분하지 않는 /i 를 쓴다.

ex.

str = "Please visit Microsoft!";

var n = str.replace(/MICROSOFT/i, "W3Schools");

 

※ replace 할때 중복된 단어가 존재하면 앞에 있는 문자열 값만 replace가 된다.

단어에 해당하는 모든 문자열을 replace 하려면 /g 를 쓴다. (global의 약자)

ex.

str = "Please visit Microsoft and Microsoft!";

var n = str.replace(/Microsoft/g, "W3Schools");

 

CHAR(고정길이 문자열 타입) vs. VARCHAR

 

CHAR(10)

ex.CHAR 데이터 저장

"하석재            " - 패딩추가

=> 3byte 는 "하석재" 가 들어가고 나머지는 공백이 들어간다.

 

나중에 char 에 들어있는 데이터를 쓰려면 공백을 제거해야하는데

이럴때 사용하는 문자열 함수는 trim() 함수 이다.

trim()함수는 문자열 양쪽에서 공백을 제거한다.

 

* concat() 함수 : 두 개 이상의 문자열을 결합할때 사용한다.

ex.

<p id="demo"></p>

<script>

var text1 = "Hi";

var text2 = "Kabsung";

var text2 = "Welcome";

var text4 = text1.concat(" ", text2, text3);

document.getElementById("demo").innerHTML = text4;

</script>

 

# contcat() 메서드는 더하기 연산자 대신 사용할 수 있다.

ex.

var text1 = "Hello" + " " + "World!";

var text2 = "Hello".concat(" ", "World!");

 

=> 위의 text1 과 text2 는 동일한 값이 된다.

 

* 문자열 패딩: padStart(), padEnd()

 

let str = "5";

str = str.padStart(4,0); //맨 앞에 0으로 4개 채우고 값을 넣어라

// result is 0005

 

let str = "5";

str = str.padEnd(4,0); //맨 뒤에 0으로 4개 채우고 값을 넣어라

// result is 5000

 

//================== 과제 ==================//

html 페이지(문자열) --> ' ' 로 묶은 문자열

 

1. 외부로 나가는 링크는 몇 개?

naver로</a>

 

2. 다시 이미지를 다운로드

 

sjha72@gmail.com 로 제출

 

a태그와 img(href 와 src)의 내용을 출력, 태그의 개수 출력

=> 문자열 함수만 이용해서

 

자바스크립트 배열

형식 : var array_name = [item1, item2, ... ];

 

배열의 요소에 엑세스

인덱스 번호를 참조하여 배열 요소에 엑세스

ex.

var cars = ["AUDI", "BMW", "KIA"];

document.getElementById("demo").innerHTML = cars[2];

 

 

 

# foreach 구문

 

인자로 함수를 넘긴 예제

 

fruits.forEach(myFunction);  => map()연산자

 

ex. Array.forEach()

<p id="demo"></p>

 

<script>

var fruits, text;

fruits = ["Banana", "Orange", "Apple", "Mango"];

 

text = "<ul>";

fruits.forEach(myFunction);

text += "</ul>";

document.getElementById("demo").innerHTML = text;

 

function myFunction(value) {

  text += "<li>" + value + "</li>";

}

</script>

 

fruits.forEach(myFunction);

 

또는

 

 

<p id="demo"></p>

 

<script>

var fruits, text;

fruits = ["Banana", "Orange", "Apple", "Mango"];

 

text = "<ul>";

 

fruits.forEach(function(item, index, arr2){

    text += "<li>" + item + "</li>";

})

 

//첫번쨰 인수는 배열의 각각의 item

//두번쨰 인수는 배열의 index

//세번째 인수는 배열 그자체

 

 

text += "</ul>";

 

document.getElementById("demo").innerHTML = text;

 

 

</script>

 

# 배열 요소 추가: push()  함수 사용

 

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits.push("Lemon");    // adds a new element (Lemon) to fruits

 

# delete() : 배열의 데이터 요소를 삭제할 수 있다.

ex.

var fruits = ["Banana", "Orange", "Apple", "Mango"];

delete fruits[0];

 

단점: delete를 사용하면 삭제된 인덱스에 구멍이 생긴다.

따라서 pop() //오른쪽 요소부터 삭제

또는 shift() //왼쪽 요소부터 삭제

를 이용

 

#배열의 병합: concat() 메서드

형식: arr1.concat(arr2, arr3, ...);

 

<p id="demo"></p>

 

<script>

   var myGirls = ["Ceillie", "Lone"];

   var myBoys = ["Emil", "Tobias", "Linus"];

   var myChildern = myGirls.concat(myBoys);

  

   document.getElementById("demo").innerHTML = myChildren;

</script>

 

# 배열 슬라이스: slice(start인덱스, end인덱스) 메서드

=> slice()메서드는 새 배열을 만든다. (원본 데이터 유지)

=> start 인덱스 부터 end 인덱스 "전" 까지 slice 해서 배열을 새로 생성

 

# 기본적인 sort()함수는 값을 문자열로 정렬하는 것이다.

따라서 숫자를 문자열로 정렬하면 잘못된 결과를 생성한다.

ex. "2"가 "1"보다 크기 때문에 "25"가 "100"보다 크다.

 

따라서 오름차순으로 정렬을 하려면

var points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return a - b});

 

내림차순으로 정렬하려면

var points = [40, 100, 1, 5, 25, 10];

points.sort(function(a, b){return b - a});

 

# 최솟값 최댓값을 찾으려면 오름차순 또는 내림차순 정렬을 한 뒤에 index로

최솟값 또는 최댓값을 찾을 수 있다.

 

# Array.map()

map() 메서드는 각 배열 요소에 대한 함수를 수행하여 새 배열을 만든다.

map() 메서드는 원래 배열의 값을 변경하지 않는다.

 

ex.

<p id="demo"></p>

 

<script>

var numbers1 = [45, 4, 9, 16, 25];

var numbers2 = numbers1.map(myFunction);

 

document.getElementById("demo").innerHTML = numbers2;

 

function myFunction(value, index, array) {

  return value * 2;

}

 

 

//콜백 함수가 value 매개 변수 만 사용하는 경우 index 및 array 매개 변수를 생략 할 수 있습니다.

function myFunction(value) {

  return value * 2;

}

 

# Array.filter()

filter() 메서드는 테스트를 통과 한 배열 요소로 새 배열을 만든다.

ex.

<p id="demo"></p>

 

<script>

var numbers = [45, 4, 9, 16, 25];

var over18 = numbers.filter(myFunction);

 

document.getElementById("demo").innerHTML = over18;

 

function myFunction(value, index, array) {

  return value > 18;

}

</script>

 

//위의 예에서 콜백 함수는 인덱스 및 배열 매개 변수를 사용하지 않으므로 생략 할 수 있습니다.

function myFunction(value) {

  return value > 18;

}

 

# Array.reduce()

reduce() 메서드는 각 배열 요소에서 함수를 실행하여 단일 값을 생성합니다.

reduce() 메서드 프로세스는 배열의 왼쪽에서 오른쪽으로 작동

ex.

 

<p id="demo"></p>

 

<script>

var numbers = [45, 4, 9, 16, 25];

var sum = numbers.reduce(myFunction);

 

document.getElementById("demo").innerHTML = "The sum is " + sum;

 

function myFunction(total, value, index, array) {

  return total + value;

}

</script>

 

//위의 예에서는 인덱스 및 배열 매개 변수를 사용하지 않습니다. 다음과 같이 다시 작성할 수 있습니다.

function myFunction(total, value) {

  return total + value;

}

 

# reduce() 와 reduceRight() 함수의 차이:

reduce() 함수는 왼쪽에서 부터 시작

reduceRight() 함수는 오른쪽에서 부터 시작

 

 

※ map() 과 reduce() 차이

map -> 요소별로 함수를 적용시켜서 결과를 출력

reduce -> 요소별로 함수를 적용시켜 하나의 대표값을 출력

 

# Array.find()

: find() 메서드는 테스트 함수를 통과하는 첫 번째 배열의 요소의 값을 반환

 

ex.

<p id="demo"></p>

 

<script>

var numbers = [4, 9, 16, 25, 29];

var first = numbers.find(myFunction);

 

document.getElementById("demo").innerHTML = "First number over 18 is " + first;

 

function myFunction(value, index, array) {

  return value > 18;

}

</script>

 

[결과]

 

First number over 18 is 25

 

# Array.find()

: find() 메서드는 테스트 함수를 통과하는 첫 번째 배열의 요소의 인덱스를 반환

ex.

<p id="demo"></p>

 

<script>

var numbers = [4, 9, 16, 25, 29];

var first = numbers.findIndex(myFunction);

 

document.getElementById("demo").innerHTML = "First number over 18 has index " + first;

 

function myFunction(value, index, array) {

  return value > 18;

}

</script>

 

[결과]

 

First number over 18 has index 3