[ex06~08] scope, casting, string

ex06

 

변수 영역 
            1. 전역 변수 > HTML 페이지 전역 > 선언문 실행(생성) ~ 페이지 종료(소멸)
            2. 지역 변수 > 블럭 영역 변수(X), 함수 영역 변수(O), 함수만 지역으로 인식하고, 제어문을 인식하지 못한다.

 

    <script>

        var num1 = 100; //전역 변수. <script> 태그내에서 직접 선언
        
        function m1() {
            var num2 = 200; //지역 변수. m1
            console.log('m1', num2); //지역내 + 지역변수 접근O
            console.log('m1', num1); //지역내 + 전역변수 접근O

            if (true) {
                var num3 = 300; //지역 변수. if문의 변수X, m1변수(O)
                console.log('if', num3);
            }

            //자바에서는 안되지만 자스는 됨
            console.log('m1', num3);
        }

        m1();

        // console.log('전역', num2); //m2 is not defined
        // console.log('전역', num3); //m3 is not defined
        
        var a = 10;
        var a = 20; //재정의(O) > 가능하지만 하지말것!!
        console.log('a', a);
        
        var b = 30;
        c = 40; //변수 선언문(var)을 사용하지 않고, 변수 생성이 가능하다. 사용 금지!!
        console.log('c', c);
        
        
        function m2() {
            e = 60; //var 선언문을 사용하지 않은 변수는, 선언 위치 무관 > 전역 변수!! (사용 금지)
        }
        m2();
        console.log(e); //실행됨...

    </script>

---

ex07

 

형변환

1. number parseInt(value) 

2. number parseFloat(value)

*** 숫자로 시작하는 문자열도 숫자로 추출(맨 앞 숫자만)

        var n1 = 3.14;
        console.log(parseInt(n1)); //3

        n1 = 3.99;
        console.log(parseInt(n1)); //3

        var n2 = '300';
        console.log(parseInt(n2), typeof parseInt(n2)); //number
        console.log(n2, typeof n2); //string
        
		var n3 = 100;
        console.log(parseFloat(n3)); //100 

        var n4 = '3.14';
        console.log(parseFloat(n4)); //3.14
        
        
        //*** 숫자로 시작하는 문자열 > 첫 숫자 추출
        var n5 = '100점';
        console.log(parseInt(n5)); //100

        var n6 = '점수100';
        console.log(parseInt(n6)); //NaN (Not a Number)

        var n7 = '100점이 아니라 50점입니다.';
        console.log(parseInt(n7)); //100
        
        //JavaScript > CSS 조작
        var width = '200px';
        console.log(width + 100); //200px100 (연산 안 됨)
        console.log(parseInt(width) + 100); //300

 

boolean isNaN(value)
 - is not a number?
 - value가 숫자가 아닙니까?
 - 자료형 검사(X), 데이터 형식만 검사(O)

 

        //사용자 입력 > <input type="text"> : 나이 입력
        var age = '20';

        if (isNaN(age)) {
            // console.log(1);
            console.log('나이가 올바르지 않습니다.')
        } else {
            // console.log(2);
            console.log('올바른 나이를 입력했습니다.')
        }
        
    //결과: 올바른 나이를 입력했습니다.

---

ex08

 

1. 문자열 길이

txt.length

2. 검색

indexOf()

lastIndexOf()

3. 대소문자 변환

toUpperCase()

toLowerCase()

4. 추출

substring()

substr() : 두번쨰 숫자 > index 아닌 개수

charAt() 

charCodeAt : 문자 코드값 추출

//문자열 함수
var txt = 'Hello~ Hong~';

//1. 문자열 길이
console.log(txt.length); //자바(field), 자스(property)

//2. 검색
//- indexOf()
//- lastIndexOf()
console.log(txt.indexOf('~')); //5
console.log(txt.indexOf('~', 6)); //11
console.log(txt.lastIndexOf('~'));//11

//3. 대소문자 변환
console.log(txt.toUpperCase()); //HELLO~ HONG~
console.log(txt.toLowerCase()); //hello~ hong~

//4. 추출
console.log(txt.substring(2, 8)); //llo~ H
console.log(txt.substring(2)); //llo~ Hong~

//substr: 뒤 숫자가 index 아닌 개수
console.log(txt.substr(2, 4)); //llo~ Hon

console.log(txt.charAt(2)); //문자 추출
console.log(txt.charCodeAt(2)); //문자 코드값 추출

 

5. 치환(***)

- 처음 만나는 요소만 치환한다.(반복X)
- 정규 표현식 사용 > 반복

txt = 'Hello~ Hong~ Bye~ Hong~';
console.log(txt.replace('Hello', 'Hi')); //Hi~ Hong~ Bye~ Hong~
console.log(txt.replace('Hong', 'Lee')); //Hello~ Lee~ Bye~ Hong~

console.log(txt.replace(/Hong/g, 'Lee')); //Hello~ Lee~ Bye~ Lee~

 

6. 공백 제거

txt = '       하나      둘     셋      ';
console.log(txt.trim());

 

7. 분할

txt = '홍길동,아무개,하하하,호호호,후후후';
console.log(txt.split(',')) //(5) ['홍길동', '아무개', '하하하', '호호호', '후후후']

 

8. 검색

txt = '홍길동';
console.log(txt.startsWith('홍')); //true
console.log(txt.endsWith('동')); //true