본문 바로가기
공부/javascript

31일차 복습-2

by 샤샤샤샤 2022. 12. 26.

타이머 관련 함수

매개변수로 익명함수를 받는다.

 

setTimeout () : 일정 시간후 한번 호출

    let timer = setTimeout( () => {
      console.log("3초후 호출됨!")
    }, 3000 );
    
   //타이머를 지울때
    clearTimeout( timer );

setInterval() : 일정 시간마다 주기적 호출. 

  //1초간격으로 수행되는 코드
    var interval = setInterval( () => {
      console.log( Date() )
      //HH:MM:SS
      console.log( new Date().toTimeString().split(' ')[0] );
      //YYYY-MM-DD
      console.log( new Date().toISOString().split('T')[0] );
    }, 1000 );

    //인터벌을 지울때
    clearInterval( interval );

여기서 new Date() 객체는 시간을 출력하는 객체다.

 

 

문자열 관련 함수

1. 문자열 선언

    //문자열 선언
    let string1 = "문자열";
    let string2 = new String("문자열");
    console.log( typeof(string1) );  출력값 : string
    console.log( typeof(string2) );           object

둘의 타입이 다르다는 차이점이 존재한다.

 

2. split() : 입력받은 문자열을 기준으로 잘라서 배열로 반환

3. length() : 길이를 반환한다.

4. toUpperCase() : 문자열 전부를 대문자로 변경시킨다.

5. toLowerCase() : 문자열 전부를 소문자로 변경시킨다.

6. charAt(인덱스 번호) : 인덱스 번호의 문자열 하나를 반환한다.

7. charCodeAt( 인덱스 번호 ) : 인덱스 번호의 문자열 하나를 아스키 코드로 변환해 반환한다.

8. indexOf( 문자열 ) : 입력받은 문자열이 시작되는 인덱스를 반환한다.

9. lastIndexOf( 문자열 ) : 중복 문자열이 있을 경우, 가장 뒤의 인덱스 값을 반환한다.

10. substring( num1, num2 ) : num1은 자르기 시작하는 인덱스, num2는 자르는 끝 인덱스의 +1값이 된다. 자른 값을                                                         반환하며 원본을 훼손시키지 않는다.

11. substr( num1, num2 ) : num1은 자르기 시작하는 인덱스, num2는 자르는 크기가 된다. 자른 값을 훼손시키지 않는다.

12. concat() : 입력받은 문자열과 자신을 합친다.

13. trim() : 처음과 끝의 공백을 제거한다. 공백이 몇개이든 모두 제거되나, 중간의 공백은 삭제되지 않는다.

14. replace( a, b ) : 특정 문자 a를 b로 변경시킨다. 원본은 훼손되지 않는다.

15. replace(/(\s*)/g, "") : 공백을 전부 제거하는 방법. 정규식을 이용한다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <!-- ex33 -->
  <title>문자열 관련 함수들</title>
  <script>
    //문자열 선언
    let string1 = "문자열";
    let string2 = new String("문자열");
    console.log( typeof(string1) );
    console.log( typeof(string2) );

    let string3 = "Abcedf";
    //문자열길이
    console.log( string3.length );
    //대문자로 변경
    console.log( string3.toUpperCase() );
    //소문자로 변경
    console.log( string3.toLowerCase() );
    //문자 한자만 가져오기
    let char = string3.charAt( 0 ); //첫번째 한자.
    console.log( char );

    //문자의 인덱스 찾기
    var string4 = "java_script_programming";
    //"script"의 시작위치는?
    console.log( string4.indexOf("script") );
    // "i"문자의 마지막 위치는?
    console.log( string4.lastIndexOf("i") );

    //문자열 치환
    var replaced = string4.replace("java", "ECMA");
    console.log( replaced );
    console.log( string4 ); //원본그대로

    //문자열 일부 가져오기         //시작인덱스,종료인덱스+1 
    let substr1 = string4.substring(5, 11);
    console.log( substr1 );      //시작인덱스, 갯수
    let substr2 = string4.substr(5, 6);
    console.log( substr2 ); 

    //문자열분리 split => 배열로 반환
    let string5 = "사과,배,딸기,바나나,포도";
    let array = string5.split(',');
    for( let fruit of array ){
      console.log( fruit );
    }

    //문자열 연결  +  concat()함수
    let string6 = "ECMA";
    let string7 = "Script";
    var concated = string6.concat( string7 );
    console.log( concated );

    //공백제거 : 처음과 끝 공배만 제거(가운데 공백은 제거안함)
    let string8 = "  This is java script  ";
    console.log( string8.trim() );

    //모든 공백을 제거하는 정규식
    let fullTrimStr = string8.replace(/(\s*)/g, "");
    console.log( fullTrimStr );

    //연습문제 15
    let string10 = "Hello java script world!";
    //1."java"문자열만 추출해서 출력하시오.
    let substring3 = string10.substring(6,10);
    console.log(substring3);
    //2."java"문자열을 "ECMA"로 바꿔서 출력하시오.
    let replace2 = string10.replace("java","ECMA");
    console.log(replace2);
    //3.string10을 공백으로 구분하여(Split)
    // 배열 ["Hello", "java", "script", "world!"]을
    // 만들어 출력하시오.
    let array2 = string10.split(" ");
    for(var str of array2) {
        console.log(str);
    }
    //4."sciprt"문자열의 위치를 출력하시오.
    console.log( string10.indexOf("script") )
    //5. 문자 한자 한자씩 아스키코드값(유니코드값)으로 출력하시오.
    // string10.charCodeAt( 인덱스 ) 사용
    for( let i=0; i<string10.length; i++){
        console.log( string10.charCodeAt(i) );
    }
  </script>
</head>
<body>
  
</body>
</html>

 

JS로 HTML웹 조작하기

내장객체 window 사용한다.

 

빈창열기

window.open(); // url은 about:blank이 된다.

사이트 열기

window.open("http://www.naver.com");

팝업창(단독창, 자식창) 열기

window.open("http://www.google.com", "자식창", 
            "width=600, height=300");

자식창

<!DOCTYPE html>
<html lang="ko">
<head>
  <!-- ex34 -->
  <!-- JS로 HTML문서 조작하기 : 동적인 웹을 만든다. -->
  <title>웹브라우저 새창열기</title>
  <script>
    //내장객체 : window 사용
    //1. 비어 있는 새창열기  url:about:blank 
    //  팝업허용 버튼 클릭해야 됨.
    //window.open();
    //2. 다른 사이트를 열기
    //window.open("http://www.naver.com");
    //3. 팝업창(단독창,자식창) 열기
    // window.open("http://www.google.com", "자식창", 
    //           "width=600, height=300");

    //open함수의 매개변수와 반환값
    //let 팝업윈도우객체 = window.open('팝업주소', '팝업창 이름', '팝업창설정');          
    //1. 팝업주소 : html사이트 주소, 빈칸이면, 빈창(about:blank)으로 된다.
    //2. 팝업창 이름 : 
    //       "창이름" : 설정하면, 창의 name으로 설정된다. 동일한 이름으로 열면,
    //                 기존의 열린 창의 내용이 바뀐다.
    //       _blank : 새창으로 연다(기본값)
    //       _parent : 부모 프레임에 열린다.
    //       _self : 현재 페이지를 대체한다.
    //       _top : 로드된 프레임셋을 대체한다.
    //3. 팝업창설정 
    //     fullscreen : 전체화면으로 열린다.
    //     toolbar : 상단 도구창 출력여부(IE,Firefox에서만 동작)
    //     location : 메뉴 아이콘 출력여부(Opera에서만 동작)
    //     resizable : 리사이즈(창을 늘리고 줄이고) 가능여부(크롬동작안함)
    //     scrollbars : 스크롤바 사용 여부
    //     menubar : 메뉴 출력 여부 
    //     width,height : 창의 너비 높이 지정
    //     top : 화면 위에서부터의 팝업 창의 위치 지정
    //     left : 화면 왼쪽에서부터의 팝업 창의 위치 지정
    var popup;
    function openPopup(){
      popup = window.open('http://www.naver.com', '네이버팝업', 
                             'width=700px,height=800px,scrollbars=yes');
    }
    function closePopup(){
      popup.close();
    }
  </script>
</head>
<body>
  <button onclick="openPopup();"> 팝업창열기 </button>
  <button onclick="closePopup();"> 팝업창닫기 </button>
</body>
</html>

 

 

페이지 이동의 두가지 방식 ( location )

1. 리다이렉트 : 사이트간의 이동. 내부 데이터를 가지고 이동하지 않음.

2. 포워드 : 내부 페이지간의 이동. 내부 데이터를 가지고 이동.

   setTimeout( ()=> {
      location.href = "http://www.daum.net";
      }, 3000);

 

onload 함수

형식

window.onload = () => { 수행문 };

 

웹 브라우저가 HTML을 자체 DOM에 적재를 끝냈을때, 딱 한번 호출해주는 이벤트 함수.

만약 JS코드를 HTML보다 위에서 적으면 HTML 요소가 DOM에 적재되지 않기 때문에 제어할수 없다. 존재하지 않는 것은 제어할수 없기 때문이다. 이런 문제를 해결하기 위해 사용되는 함수가 onloasd 함수다.

 

innerHTML 과 innerText

둘다 태그의 내용을 문자열로 반환하지만, innerHTML은 문자열이 HTML 태그로 인식되는 반면, innerText는 문자열로 인식된다.

 

문서객체 선택

1. 아이디로 선택 : getElementById( id ) - 객체 한개로 반환

2. 클래스로 선택 : getElementsByClassName( class ) - 배열로 반환 

3. 태그로 선택 : getElementsByTagName( tag ) - 배열로 반환 

4. css선택자로 선택 : querySelctor( css선택자 ) - 객체 한개로 반환

                                 : querySlectorAll( css선택자 ) - 배열로 반환

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>문서객체 선택하는 방법</title>
  <script>
    //문서 객체 모델(Document Object Model)
    //DOM이란? 웹브라우저가 HTML문서를 로딩후에, 메모리에 트리구조로
    // 관리하는 데이타 구조 및 객체

    //문서객체 선택하기
    //1. 아이디로 선택 : getElementById( id ) : 객체 한개로 반환
    //2. 클래스로 선택 : getElementsByClassName( class ) : 배열로 반환
    //3. 태그로 선택 : getElementsByTagName( tag ) : 배열로 반환
    //4. css선택자로 선택 : querySelctor( css선택자 ) : 객체 한개로 반환
    //                      querySlectorAll( css선택자 ) : 배열로 반환
    window.onload = () => {
       //id로 찾기 : header1의 innerHTML을 "제목태그 1 찾음"으로 변경
       let h1 = document.getElementById('header1');
       h1.innerHTML = "제목태그 1 찾음";
       //class로 찾기 : 제목태그 3,4,5의 
       //                innerHTML을 "제목태그 3,4,5 찾음"으로 변경
       let arrayH2 = document.getElementsByClassName('header-h2');
       for( let h2 of arrayH2 ){
        h2.innerHTML = '제목태그 3,4,5 찾음';
       }
       //tag로 찾기 : 문단태그의 innerHTML "tag로 p 찾음"으로 변경
       let arrayP = document.getElementsByTagName('p');
       for( let p of arrayP ){
        p.innerHTML = 'tag로 p 찾음';
       }
    };
  </script>
</head>
<body>
  <h1 id="header1">제목태그 1</h1>
  <h1 id="header2">제목태그 2</h1>
  <h2 class="header-h2">제목태그 3</h2>
  <h2 class="header-h2">제목태그 4</h2>
  <h2 class="header-h2">제목태그 5</h2> 
  <p>문단태그 p</p> 
  <p>문단태그 p</p> 
  <p>문단태그 p</p> 
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
  <title>CSS 선택자로 문서요소 선택하기</title>
  <script>
    window.onload = () => {
      let h1 = document.querySelector('#header-1');
      h1.innerHTML = "H1 선택됨.";
      h1.style.color = "green";

      let array_h1 = document.querySelectorAll('h1');
      array_h1[0].style.backgroundColor = "yellow";
      array_h1[1].style.backgroundColor = "yellow";

      let array_headers = document.querySelectorAll('.headers');
      array_headers[0].innerHTML = "H1 찾음 0";
      array_headers[1].innerHTML = "H1 찾음 0";
      array_headers[2].innerHTML = "H1 찾음 0";

      //연습문제17
      //1. id가 wrap인 div밑의 h1의 텍스트색상을 green로 바꾸시오.
      var wrapper = document.querySelector('#wrap > div > h1');
      wrapper.style.color = 'green';
      //2. 내용인 "제목태그3"인 객체의 color를 blue으로 변경하시오.
      var header3_array = document.querySelectorAll('.headers');
      header3_array[0].style.color = 'blue';
      //3. 내용인 "제목태그4"인 객체의 color를 orange으로 변경하시오.
      var header4 = document.querySelector('h1:nth-child(4)');
      header4.style.color = 'orange';
      //4. id가 'wrap'인 div의 border를 1px solid red로 바꾸시오.
      var div_wrap = document.querySelector('#wrap');
      div_wrap.style.border = "1px solid red";
    }
  </script>
</head>
<body>
  <h1 id="header-1">제목태그1</h1>
  <h1 id="header-2">제목태그2</h1>
  <h1 class="headers">제목태그3</h1>
  <h1 class="headers">제목태그4</h1>
  <h1 class="headers">제목태그5</h1>
  <div id="wrap">
    <div>
        <h1>Wrapper</h1>
    </div>
  </div>
</body>
</html>

 

간단하게 정리하면 id선택과 css선택 중 querySelctor() 만 객체 하나, 나머지는 모두 배열이다.

쿼리문은 css에서 html선택하는 방식 그대로 쓰면 된다.

'공부 > javascript' 카테고리의 다른 글

32일차 복습  (0) 2022.12.27
프로퍼티(property)  (0) 2022.12.27
31일차 복습 - 1  (0) 2022.12.26
30일차 복습  (0) 2022.12.25
29일차 복습  (0) 2022.12.22

관련글

티스토리툴바