[230831] String 내장 객체, Array 내장객체, Math 내장 함수, 이벤트, 이벤트 방지, 서브밋 방지 (DAY 42)

MJ·2023년 9월 11일

수업 TIL🐣💚

목록 보기

42/68

String 내장 객체

    var str = 'JavaScript';


    // 1. 문자열의 길이
    console.log(str.length);

    // 2. 특정 문자(지정된 인덱스에 위치하는 문자)
    console.log(str.charAt(0));
    console.log(str.charAt(str.length - 1));

    // 3. 특정 문자열
    console.log(str.substring(0, 4));  // 'Java'   : 인덱스 0 포함 ~ 인덱스 4 불포함
    console.log(str.substring(4));     // 'Script' : 인덱스 4 포함 ~ 끝까지
    console.log(str.slice(0, 4));      // 'Java'   : 인덱스 0 포함 ~ 인덱스 4 불포함
    console.log(str.slice(4));         // 'Script' : 인덱스 4 포함 ~ 끝까지
    console.log(str.slice(-10, -6));   // 'Java'   : 인덱스 -10 포함 ~ 인덱스 -6 불포함 (마지막 글자의 인덱스 = -1)
    console.log(str.slice(-6));        // 'Script' : 인덱스 -6 포함 ~ 끝까지

    // 4. 문자열 연결
    console.log(str.concat(', ', 'Hello World'));  // 'JavaScript, Hello World'

    // 5. 특정 패턴으로 시작/특정 패턴으로 끝나는지 검사
    console.log(str.startsWith('Java'));  // 'Java'로 시작하면 true
    console.log(str.endsWith('Script'));  // 'Script'로 끝나면 true

    // 6. 특정 문자열의 위치(인덱스) 찾기
    console.log(str.indexOf('a'));      // 1, 'JavaScript'에서 발견된 첫번째 a의 인덱스를 반환
    console.log(str.lastIndexOf('a'));  // 3, 'JavaScript'에서 발견된 마지막 a의 인덱스를 반환

    // 7. 특정 문자열을 주어진 길이가 될 때까지 채우기
    console.log(str.substring(0, 4).padEnd(10, '*'));  // 'Java******'
    console.log(str.substring(4).padStart(10, '*'));   // '****Script'

    // 8. 주어진 횟수만큼 반복하기
    console.log(str.repeat(3));

    // 9. 찾아 바꾸기
    var str = '192.168.0.101';
    console.log(str.replace('.', '_'));     // '192.168.0.101' -> '192_168.0.101'
    console.log(str.replaceAll('.', '_'));  // '192.168.0.101' -> '192_168_0_101'

    // 10. 대소문자 변환하기
    var str = 'JavaScript';
    console.log(str.toLowerCase());  // 'JavaScript' -> 'javascript'
    console.log(str.toUpperCase());  // 'JavaScript' -> 'JAVASCRIPT'

    // 11. 문자열 앞뒤로 포함된 불필요한 공백 제거하기
    var str = '     Java     Script     ';
    console.log('[' + str.trim() + ']');
    console.log('[' + str.trimStart() + ']');  // alias 가능 : trimLeft()
    console.log('[' + str.trimEnd() + ']');    // alias 가능 : trimRight()

    // 12. 문자열 객체의 문자열 값 반환
    var str = new String('JavaScript');
    console.log(str);            // 객체 {'JavaScript'}
    console.log(str.valueOf());  // 문자열 'JavaScript'

    // 13. 문자열을 분리해서 배열로 만들기
    var str = 'Hello tom Nice to meet you!';
    var words = str.split(' ');  // words = ['Hello', 'tom', 'Nice', 'to', 'meet', 'you!']
    console.log(words[1]);       // 'tom'

Array 내장객체

    var array = ['travel', 'fitness', 'movie', 'tracking', 'fishing'];

    // 1. 반복 메소드
    array.forEach(function(element){
      console.log(element);
    });
    array.forEach(function(element, i){
      console.log(i + ':' + element);
    })
// forEach 메소드에 의해 자동으로 배열 요소가 하나씩 꺼내진 다음 element에 전달
// 인덱스 전달해서 쓰고 싶으면 두번째 매개변수(여기서는 i)로 선언하기
// 첫번째는 배열 요소, 두번째는 인덱스. 순서 지키기

    // 2. 필터 (지정한 조건을 만족하는 요소만 남긴 배열 만들기)
    // array.filter((요소) => 요소 검사);
    var result = array.filter((element) => element.length > 6);  // 길이가 6보다 큰 요소만 남긴 배열 반환
    console.log(result);

    // 3. 배열 요소를 변경하기
    // array.map((요소) => 변경할 값)
    var array = [1, 2, 3, 4, 5];
    var map = array.map((element) => element ** 2);  // 모든 요소를 2제곱 값으로 바꾼 배열 반환
    console.log(map);

    // 4. 배열 요소를 합쳐서 문자열로 반환하기
    var array = ['travel', 'fitness', 'movie', 'tracking', 'fishing'];
    console.log(array.join());     // 콤마(,)로 연결 (디폴트)
    console.log(array.join(' '));  // 공백으로 연결

Math 내장 함수

	console.log(Math.abs(-5));     //  5 ,  -5의 절대값

    console.log(Math.ceil(7.1));   //  8 ,  7.1의 정수 올림값
    console.log(Math.ceil(-7.1));  // -7 , -7.1의 정수 올림값

    console.log(Math.floor(7.1));  //  7 ,  7.1의 정수 내림값
    console.log(Math.floor(-7.1)); // -8 , -7.1의 정수 내림값

    console.log(Math.round(7.1));  //  7 ,  7.1의 정수 반올림
    console.log(Math.round(-7.1)); // -7 , -7.1의 정수 반올림

    console.log(Math.trunc(7.1));  //  7 ,  7.1의 소수점 절사
    console.log(Math.trunc(-7.1)); // -7 , -7.1의 소수점 절사

    console.log(Math.max(1, 2, 3, 4, 5));  // 5, 주어진 값 중 가장 큰 값
    console.log(Math.min(1, 2, 3, 4, 5));  // 1, 주어진 값 중 가장 작은 값
    
    var array = [1, 2, 3, 4, 5];
    console.log(Math.max(...array));  // 5, 배열의 요소 중 가장 큰 값
    console.log(Math.min(...array));  // 1, 배열의 요소 중 가장 작은 값

    console.log(Math.pow(2, 3));  // 8, 2의 3제곱

    console.log(Math.random());   // 0 <= 난수 < 1

    console.log(Math.sqrt(25));   // 5, 루트 25

이벤트

이벤트 대상
1) 이벤트가 동작하는 HTML 구성 요소이다.
2) 이벤트 객체의 target 속성(프로퍼티)으로 확인할 수 있다.
3) 현재 문서 객체를 의미하는 this 키워드로 확인할 수 있다.
이벤트 타입
1) 이벤트 종류를 의미한다.
2) 이벤트 객체의 type 속성(프로퍼티)으로 확인할 수 있다.
3) 주요 이벤트 타입
(1) click : 클릭
(2) dblclick : 더블클릭
(3) mouseover : 마우스 가져다대면 동작
(4) mouseout : 마우스 떠나면 동작
(5) keydown : 키 내려갈 때
(6) keypress : 키 누를 때
(7) keyup : 키 올라올 때
(8) focus : 포커스를 가지면
(9) blur : 포커스를 잃으면
(10) submit : 서브밋할 때
이벤트 리스너
1) 이벤트가 발생하면 동작하는 함수(function)이다.
2) 일반적으로 익명 함수를 많이 사용한다.
3) 이벤트 리스너의 매개변수를 선언하면 자동으로 이벤트 객체가 전달된다.
이벤트 객체
1) 발생한 이벤트의 상세 정보를 저장하고 있는 객체이다.
2) 이벤트가 발생하면 자동으로 생성된다.
3) 이벤트 객체를 사용하려면 이벤트 리스너(함수)에 매개변수를 선언한다.
이벤트 모델
1) 이벤트를 작성하는 방법이다.
2) 종류
(1) 고전 이벤트 모델
(2) 표준 이벤트 모델
(3) 인라인 이벤트 모델

고전 이벤트 모델

하나의 이벤트 타입은 하나의 이벤트 리스너만 가질 수 있다.
형식
1) 선언 함수
2) 익명 함수 (추천!)

//선언
          function 함수명(){

          }
          문서객체.onclick = 함수명;
//익명
          문서객체.onclick = function(){

          }

// 익명함수 사용
    /*
      1. 이벤트 대상   : document.getElementById('box')
                         event.target
                         this
      2. 이벤트 타입   : click
      3. 이벤트 리스너 : function(event){}
      4. 이벤트 객체   : event
    */
    document.getElementById('box1').onclick = function(event){
      // event.target.style.fontSize = '32px';
      this.style.fontSize = '32px';
    }

표준 이벤트 모델

하나의 이벤트 타입에 여러 개의 이벤트 리스너를 등록할 수 있다.
형식
1) 선언 함수

          function 함수명(){

          }
          문서객체.addEventListener('click', 함수명);

2) 익명 함수 (추천!)

문서객체.addEventListener('click', function(event){

          });

      this.style.fontSize = '32px';
    });
    document.getElementById('box2').addEventListener('click', function(event){
      this.style.color = 'crimson';
    });

인라인 이벤트 모델

HTML 구성 요소에 이벤트 속성을 추가하고 실행할 이벤트 리스너를 등록한다.
형식
1) 선언 함수

          function 함수명(){

          }
          <div onclick="함수명()"></div>

2) JavaScript 코드

          <div onclick="alert('메시지')"><div>

이벤트 방지하기

HTML 구성 요소에 따라서 가지고 있는 기본 이벤트가 있다.
1) <a> 태그를 클릭하면 href 속성으로 이동한다.
2) <form> 태그를 서브밋하면 <form> 태그의 모든 입력 요소들을 action 속성으로 가지고 간다.
이러한 기본 이벤트를 방지할 수 있다.
이벤트 객체의 preventDefault() 메소드를 호출한다.

html

  <ul id="site">
    <li><a href="https://www.google.com/">구글</a></li>
    <li><a href="https://www.naver.com/">네이버</a></li>
    <li><a href="https://www.daum.net/">다음</a></li>
  </ul>

    var sites = document.querySelectorAll('#site a');      
// sites는 <a> 태그 3개가 저장된 배열이다.
    sites.forEach(function(element){                       
      // element에는 sites 배열에 저장된 <a> 태그가 1개씩 전달된다.
      element.addEventListener('click', function(event){   
        // 이벤트 방지를 위해서 event 객체를 매개변수로 선언한다.
        if(this.href.endsWith('.net/')){                   
          // this는 element(<a> 태그)를 의미한다. href는 속성(프로퍼티)이다.
          event.preventDefault();                          
          // 기본 이벤트가 방지된다.(<a> 태그는 링크 이동이 되지 않는다.)
        }
      })
    })

다음은 .net으로 끝나니까 이벤트 방지 처리돼서 클릭 후 이동이 안됨.

서브밋 방지하기

  <!-- 문제1. 서브밋 방지하기 -->
  <div id="wrap1">
    <form action="https://search.naver.com/search.naver" id="frm">
      <div>
        <input type="text" id="query" name="query">
        <button type="submit">네이버 검색</button>
      </div>
    </form>
  </div>
  <script>
    // 주의! 서브밋은 <form> 태그가 이벤트 대상 (<button> 태그가 아님)
    document.getElementById('frm').addEventListener('submit', function(event){
      // 검색어가 비어 있으면 서브밋 방지
      if(document.getElementById('query').value === ''){
        alert('검색어는 필수입니다.');
        event.preventDefault();
      }
    })
  </script>

이전 포스트

[230830] 객체, 생성자, 내장객체(문자열 변환,date) (DAY 41)

다음 포스트

[230831] String 내장 객체, Array 내장객체, Math 내장 함수, 이벤트, 이벤트 방지, 서브밋 방지 (DAY 42)

수업 TIL🐣💚

String 내장 객체

Array 내장객체

Math 내장 함수

이벤트

고전 이벤트 모델

표준 이벤트 모델

인라인 이벤트 모델

이벤트 방지하기

서브밋 방지하기

[230830] 객체, 생성자, 내장객체(문자열 변환,date) (DAY 41)

[230901] 정규식, BOM(DAY 43)

0개의 댓글