2023.04.06 JavaScript의 객체들(Math,String,date,Web API,Form)

목차

1. JavaScript의 객체

• Math객체
  • min()
  • max()
  • round()
  • floor()
  • ceil()
  • random()
• String객체
  • length: 문자열의 길이
  • indexOf(): 특정 문자 위치를 인덱스
  • charAt(): 특정 문자열 인덱스에 위치한 문자
  • includes(): 특정 문자열 포함되어 있는지 여부
  • substring(): 시작 인덱스부터 종료 인덱스 바로 직전까지의 문자열
  • substr():  시작 인덱스부터 전달 받은 갯수만큼 문자열
  • replace(): 일부를 전달 받은 문자열로 치환
  • split(): 구분자를 기준으로 나눈 후 나뉜 문자열을 하나의 배열에 저장
  • trim(): 문자열의 앞뒤 공백을 제거
  • toUpperCase(): 문자열을 모두 대문자로 변환
  • toLowerCase(): 문자열을 모두 소문자로 변환 
• Date 객체
  • new Date(): 현재 날짜 시간을 저장한 객체가 생성
  • new Date('날짜 문자열'): 해당 특정 날짜와 시간을 저장한 객체가 생성
  • new Date('밀리초'): 1970년1월1일 0시0분0초를 기준으로 해당 밀리초 만큼 지난 날짜와 시간을 저장한 객체가 생성
  • new Date(,년,월,일,시,분,초): 해당 날짜와 시간을 저장한 객체가 생성 
• Web API 객체 
  • window 객체 메소드
  • setTimeout() :  일정시간이 지난 후 함수 실행
  • clearTimeout() : 취소
  • setInterval() :   일정 시간 마다 함수 실행
  • clearInterval() :취소
• form 객체
  • form 접근법
  • 아이디 입력상자에 접근법

---

1. JavaScript의 객체

 

 

1-1. Math 객체

• AI를 위해 수학공부 해야 할것들 : 방정식, 함수, 행렬, 미적분, 선형대수
• 수학에서 자주 사용하는 상수와 함수들을 미리 구현한 자바스크립트 표준 내장 객체
• 비교할 수 없는 값이 포함되어 있으면 NaN을 반환한다. 

    min(): 가장 작은 수를 반환. 매개변수가 전달되지 않으면 Infinity(라는 무한대 값이 반환)를 반환한다. 
    max(): 가장 큰 수를 반환. 매개변수가 전달되지 않으면 -Infinity(라는 무한대 값이 반환)를 반환한다. 
    round(): 소수점 첫번째 자리에서 반올림하여 그 결과를 반환
    floor(): 소수점을 버림
    ceil(): 소수점을 올림
    random(): 0보다 크거나 같고 1보다 작은 무작위 소수를 반환

    <script>
        // min, max
        console.log(Math.min()); // Infinity (무한대를 가르킴)
        console.log(Math.max()); // -Infinity
        console.log(Math.min(1, 10, -10, 1000, 0, '-100')); // '-100'값이 자동형변환되어 결과값: -100 
        console.log(Math.min(1, 10, -10, 1000, 0, '마이너스백'));// 결과값 : NaN
        console.log(Math.max(1, 10, -10, 1000, 0));
        console.log('--------------');

        //round: 소숫점 첫째자리에서 반올림
        console.log(Math.round(10.49));
        console.log(Math.round(10.5));
        console.log(Math.round(-10.5));
        console.log(Math.round(-10.51));
        console.log('--------------');

        //floor: 소숫점 버림
        console.log(Math.floor(10.49)); // 10
        console.log(Math.floor(10.5));  // 10
        console.log(Math.floor(-10.5)); // -11
        console.log(Math.floor(-10.51));// -11
        console.log('--------------');

        //ceil: 소숫점 올림
        console.log(Math.ceil(10.49));
        console.log(Math.ceil(10.5));
        console.log(Math.ceil(-10.5));
        console.log(Math.ceil(-10.51));
        console.log('--------------');

        //random
        const rm = Math.random();
        console.log(rm); // 0~1전까지의 실수가 발행

        // 1~10까지의 자연수를 랜덤하게 뽑기 
        const num = Math.floor(Math.random() * 10)+1
        console.log(num);
        

    </script>

 

---

1-2. String 객체

 const str1 = 'JavaScript';
 const str2 = new String('JavaScript');

 str1 == str2       // true  안에 값만 비교하기 때문에 true
 str1 === str2      // false 둘이 똑같은 스트링이지만 데이터를 메모리에 올릴때 값도 다르고 해서 false가 나온다. 


    length: 문자열의 길이를 반환하는 프로퍼티이다.
    indexOf(): 특정 문자나 문자열이 처음으로 등장하는 위치를 인덱스로 반환
    charAt(): 특정 문자열에서 전달 받은 인덱스에 위치한 문자를 반환
    includes(): 특정 문자열에서 전달 받은 문자열이 포함되어 있는지 여부를 반환
    substring(): 전달 받은 시작 인덱스부터 종료 인덱스 바로 직전까지의 문자열을 추출해주는 메소드
    substr(): 전달 받은 시작 인덱스부터 전달 받은 갯수만큼 문자열을 추출 
    replace(): 원본 문자열의 일부를 전달 받은 문자열로 치환 해주는 메소드
    split(): 구분자를 기준으로 나눈 후 나뉜 문자열을 하나의 배열에 저장
    trim(): 문자열의 앞뒤 공백을 제거
    toUpperCase(): 문자열을 모두 대문자로 변환
    toLowerCase(): 문자열을 모두 소문자로 변환

    <script>
        const str1 = '안녕하세요. JavaScript!';
        //length
        console.log(str1);
        console.log(str1.length);
        console.log('----------------');

        // indexOf , lastIndexOf(맨 마지막 특정문자를 찾아라!)
        console.log(str1.indexOf('J')); // index[7]
        console.log(str1.indexOf('Java')); 
        console.log(str1.indexOf('java')); //찾기 못했을때 -1
        console.log(str1.indexOf('a')); // a가 2개라서 제일 처음만나는 a의 인덱스를 가르쳐준다. 
        console.log(str1.lastIndexOf('a')); // 맨뒤에 있는 a를 찾아준다. 
        console.log('----------------');

        // charAt
        console.log(str1.charAt(7)); // 인덱스[7]의 단어는 ? 'J'출력
        console.log('----------------');

        // includes
        console.log(str1.includes('Java'));
        console.log(str1.includes('java')); //대소문자 가려서 찾음
        console.log('----------------');

        //substring, substr
        console.log(str1.substring(7));     // 7~끝까지 
        console.log(str1.substring(7, 11)); // 7~11까지 Java

        console.log(str1.substr(7, 4));     //앞으로는 브라우저에서 지원 하지 않을려고 한다. 
        console.log('----------------');

        // replace
        console.log(str1.replace('안녕하세요.', 'Hello'));
        console.log('----------------');

        // trim, toUpperCase, toLowerCase + 메소드 체인닝
        const str2 = '김사과,오렌지,반하나,이메론,배에리,채리';
        const students = str2.split(',');
        console.log(students); // 배열로 내용을 가져온걸 확인할 수 있음
        for(let i in students){
            console.log(i, students[i]);
        }

        const str3 = '                JavaScript!          ';
        console.log(`🎁${str3}🎁`);
        console.log(`🎁${str3.trim()}🎁`); // 공백사라짐
        
        // 메소드 체인닝
        // 메소드에 나온 결과값을 다음으로 적용 다음으로 넘겨주는것
        console.log(`🎁${str3.trim().toUpperCase().toLowerCase()}🎁`); 
        // str3의 공백을 제거 하고! -> 대문자로 바꾸고 ! -> 소문자로 바꿔준다 (메소드 체인닝)

        
    </script>

---

1-3. Date 객체

 - 날씨, 시간 등을 쉽게 처리할 수 있는 내장 객체 
 
 *연도 (year)

    - 2자리로 연도를 표기: 1900년 ~ 1999년 
    - 4자리로 연도를 표기: 2000년 ~

 *월 (Month)

    - java 기반이기 때문에 0 ~ 11로 표현한다. 
    - 0(1월), 11(12월)

🔴Date 객체를 생성하는 방법

 new Date(): 현재 날짜 시간을 저장한 객체가 생성
 new Date('날짜 문자열'): 해당 특정 날짜와 시간을 저장한 객체가 생성
 new Date('밀리초'): 1970년1월1일 0시0분0초를 기준으로 해당 밀리초 만큼 지난 날짜와 시간을 저장한 객체가 생성
 new Date(,년,월,일,시,분,초): 해당 날짜와 시간을 저장한 객체가 생성 

    <script>

        console.log(new Date());

        //연도를 2자리만 사용하면 1900년도이고, 월은 0부터 시작해서 11로 끝난다. 
        console.log(new Date(23, 4, 6)); //Sun May 06 1923 
        const current_time = new Date(2023, 3, 6, 14, 44, 00);// 2023년 4월 6일 14시 44분 00초
        console.log(current_time);
        console.log(`현재 연도: ${current_time.getFullYear()}`);
        console.log(`현재 월: ${current_time.getMonth()+1}`); //월은 0부터 시작하기때문에 우리가 보기 위해서는 +1해야한다.
        console.log(`현재 일: ${current_time.getDate()}`);
        console.log(`현재 시: ${current_time.getHours()}`);
        console.log(`현재 분: ${current_time.getMinutes()}`);
        console.log(`현재 초: ${current_time.getSeconds()}`);

    </script>

---

1-4. Web API 객체 

 - BOM(Browser Object Model): 과거에 비표준화 

🔴window 객체 

• 웹브라우저의 창이나 탭을 표현하기 위한 객체들이며 웹 브라우저는 window 객체를 이용하여 브라우저 창을 표현할 수 있음
• alert(), confirm(), prompt()얘들이 원래 window객체 안에 있다. 
      (window.alert(), window.confirm(), window.prompt() window를 생략해서 사용중이다. )

🔴window 객체 추가메소드들

     - setTimeout()

        -일정시간이 지난 후 매개변수로 제공된 함수를 실행한다 !

     🔹사용법

        const 함수명 = function(){
            실행문;
            ....
        }
     
        const st = setTimeout(함수명, 밀리초);
        console.log(st);

     - clearTimeout()

        - 일정 시간후에 setTimeout()를 취소함
        - 꼭 변수가 있어야 취소 할수 있다 !!!

     - setInterval()

        일정 시간 마다 매개변수로 제공된 함수를 실행

     - clearInterval()

        일정 시간 마다 일어날 setInterval()을 취소합니다. 

👀 예제) setTimeout() = >일정시간이 지난 후 매개변수로 제공된 함수를 실행한다 !

    <script>
        const hello = function(){
            alert('안녕하세요 JavaScript.');
        }
        const st = setTimeout(hello, 5000); // hello함수를 5초후에 실행
        console.log(st);

        //setTimeout()를 취소시켜주는 함수
        //clearTimeout(st);
    </script>

설정해놓은 5초 후 .... 아래 사진처럼 메시지가 전달 됩니다. 

👀 예제) setInterval() => 일정 시간 마다 매개변수로 제공된 함수를 실행

<body>
    <h2>setInterval</h2>
    <script>
        setInterval
        const hello = function(){
            console.log('안녕하세요. JavaScript');
        }
        const si = setInterval(hello, 3000);
        //버튼을 만들어서 hello()을 중지시키자 ~
        const clearInter = function(){
            clearInterval(si);
            console.log('hello()가 중지되었음!!');
        }
    </script>
    
    <p><button onclick="clearInter()">중지</button></p>
</body>

---

1-5. form 객체

 - 일반적인 폼 요소에 접근할 때 사용
 - document.forms 컬렉션을 이용해서도 접근할 수 있음 

 예)

        <form name='myform' id='regform' method='post' action='#'>
            ID: <input type="text" name="userid" id="id"><br>
            PW: <input type="password" name="userpw" id="pw"><br>
        </form>

🔴form 접근방법 

    1. const frm = document.myforms;         //name으로 접근
    2. const frm = document.forms['myform']; //name으로 접근
    3. const frm = document.form[0];         //한 문서의 여러 form중에 첫번째 폼 
    4. const frm = document.getElementById('regform'); // id로 접근

🔴아이디 입력상자에 접근하기 

    1. const userid = frm.userid; // name으로 접근
    2. const userid = document.forms['myform'].elements[0]; //myform에 접근 해서 그중에 첫번째(인덱스[0]) 요소에 접근
    3. const userid = document.forms['myform'].elements['userid']; 
    4. const userid = document.forms[0][0]; 
    5. const userid = document.getElementById('id');

 

👀 예제)

form을 먼저 생성 해줍니다.

    <form action="#" name="frm1">
        <input type="text" name="userid" id="id" placeholder="아이디를 입력하세요."><br>
        <input type="password" name="userpw" placeholder="비밀번호를 입력하세요.">
    </form>
    <form action="#" name="frm2">
        <input type="search" name="search" placeholder="검색어를 입력하세요. ">
    </form>

form 객체를 만지는 법

    <script>
        const frm1 = document.frm1; // form에 접근 
        console.log(frm1.userid.placeholder); // frm1이 form을 가르키고 있기 때문에 name, id, .elements을 이용하여 값을 가져온다. 

        const frm2 = document.frm2;
        console.log(frm2.search.placeholder);

        // id폼에 'apple'값 집어 넣기 !!
        document.getElementById('id').value = 'apple';
        document.forms['frm1'].elements['userpw'].value=1004;
        document.forms[1].elements[0].value = '코리아IT아카데미';

    </script>

---