[21.09.03] JavaScript#2

자바스크립트는 변수에 함수를 저장하는 것이 가능하다
변수에 함수를 저장하면 함수로 변해서 사용할 수 있다.

자바스크립트는 자유도가 높음.

Nested function

중복함수. 함수안에 함수

    function test() {
        output.innerHTML+='test() 내부 : <br>';
        function nested() {
            output.innerHTML+='nested() 내부 <br>';
        }
        nested();
    }
    test();

Number

1) 지수표기법 사용이 가능하다.

var x=123e5;
var y=123e-5; 

12300000, 0.00123 이 출력된다

2) 정수는 15자릿수로 표현한다.

 x=99999999999999999; 

100000000000000000으로 나온다

3)소수점 연산은 100% 정확하지 않다.

 y=0.1+0.2;

0.30000000000000004

x=(0.1*10 + 0.2*10)/10; 

정수로 변환시켜 연산한 다음에 다시 소수로 만들기

String

• 문자열 객체와 문자열 상수가 존재함
• 문자열은 내장 메소드를 포함
• 특수기호(Escape Sequence) 사용 유의

" "으로 감싼 String 안에 또 " "를 쓰면 인식을 못함. "''", '""'로 교차해서 사용하거나 Escape Sequence를 사용하면 됩니다.

Escape Sequence

문자열 내에서 특수한 기능을 하는 문자(', ", )

• \" = "
• \\ = \

문자열 상수

var str3=new String('안녕하세요');
var str4=new String('안녕하세요');
if(str3==str4){ 
    output.innerHTML+='같은 객체<br>';
}else{
	output.innerHTML+='다른 객체<br>';
}

new를 쓰면 객체가 되기때문에 다르다.

String Method

• length : 문자열 길이 출력. 메소드가 아니라 property
• indexOf() : 문자열의 시작위치를 리턴함
• lastIndexOf() : 문자열의 끝 위치를 리턴함
• search() : 문자열을 검색함.
• match() : 일치하는 문자열을 리턴함. match(/문자열/g)로 정규표현식 g를 적용하면 일치하는 모든 문자열이 ,로 연결되어 나옵니다.
• slice(startIndex, endIndex) : startIndex는 포함한 위치, endIndex는 위치의 -1까지 문자열을 자른다. 음수 인덱스는 뒤에서부터 읽는다.
• substring(startIndex, endIndex) : slice()와 동작은 같지만 음수인덱스는 사용할 수 없음.
• substr(startIndex, length) : startIndex부터 length만큼의 문자열을 자른다.
• replace(originalString, changeString) : originalString을 changeString으로 변경해준다.
• toUpperCase() : 대문자로 변경
• toLowerCase() : 소문자로 변경
• split(String) : String을 기준으로 문자열을 나누어서 배열형태로 저장한다

정규표현식

패턴과 옵션

옵션

1) g(global) : 일치하는 모든패턴을 찾는다.

2) i(case-insensitive) : 대소문자 구분없이 패턴을 찾는다.

배열

선언 및 초기화 방법

var 배열이름 = [원소1, 원소2, ...];
var 배열이름 = new Array(원소1, 원소2, ...);

인덱스 크기를 지정하지 않아도 되며 타입과 상관없이 원소를 저장합니다.
var person=['홍길동', 10000000, true];

for-in문

자바에선 for-each문으로 배열의 값을 출력하는 for문이 있었는데요 for-in문은 배열의 인덱스를 출력하는 for문입니다.

var movies=['1','2','3'];
 for(x in movies){
     output.innerHTML+=movies[x]+'<br>';
 }

배열의 원소 추가, 수정, 삭제

java의 배열과 달리 자바스크립트의 배열은 자바의 arraylist처럼 원소의 추가와 삭제가 가능합니다.

var cities=['서울','대전','부산','광주'];
cities[10]='평양';

서울,대전,부산,광주,,,,,,,인천라고 출력되는데요
기존에 존재하는 배열의 인덱스에 새로운 원소를 넣으면 기존 원소들에 추가가 됩니다.

만약 인덱스에 기존에 원소가 존재한다면 원소가 수정돼요 이런 문제때문에 인덱스를 사용해서 배열에 접근하는건 조심해야합니다. 그래서 보통은 push()와 pop()을 사용합니다.

• push(원소)
  배열의 가장 마지막 위치에 새로운 원소를 추가함

• pop()
  배열의 가장 마지막에 위치한 원소를 삭제함

만약 특정 위치의 원소를 삭제하면 그 원소가 없어지고 뒤의 원소들로 인덱스를 채워지는게 아니라 해당 인덱스는 그대로 비어있어요

• shift()
  배열의 첫번째 원소를 삭제하고 원소들의 인덱스를 모두 한단계 앞으로 변경해줌

• unshift()
  배열의 첫번째 위치에 새로운 원소를 추가함.

배열 정렬 sort()

배열의 요소들을 문자형식으로 사전식 정렬합니다.

숫자 내림차순 정렬

function myFunction() {
    points.sort(function(a,b) {
         return a-b;
     });
    document.getElementById('demo').innerHTML=points;
}

return b-a는 내림차순으로 정렬할 수 있어요

---

실수로 document.getElementById를 안하고 바로 요소의 id.innerHTML만 썼는데 이래도 문자가 출력되네요 왜그런걸까요?

<p id="test"></p>
<script type="text/javascript">
	test.innerHTML+='테스트';
  	test.style.backgroundColor = 'cyan';
</script>

모든게 정상적으로 적용된다.. 두둥?

---

찾아보니 제가 </body> 바로 위에다 script를 만들어서 html코드가 순서대로 읽히고 요소 id가 먼저 생성된 다음에 script가 읽혀서 가능한거라하네용 그래도 웬만하면 생략하면 안된다는 점..!