42. JavaScript(4)

String 내장 객체

    // 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.substring(4))     //'Script' : 인덱스 4 이상 ~ 끝까지
    console.log(str.substring(-10, -6))     //'Java' :인덱스 -10 이상 ~ 인덱스 -6 불포함 (마지막 글다의 인덱스 = -1)
    console.log(str.substring(-6))     //'Script' : :인덱스 -6 포함 ~ 끝까지

    // 4. 문자열 연결 
    console.log(str.concat(', ','hello world'));  // 'JavaScript, helloworld'

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

    // 6. 특정 문자역 위치(인덱스) 찾기
    console.log(str.indexOf('a'));   // 1, 'JavaScript'에서 발견된 1번째 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'
    console.log(str.replaceAll('.','-'))  //'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()
    console.log('['+str.trimLeft()+']');  //trimStart와 trimEnd 는 같은 것이다. 
    console.log('['+str.trimRight()+']');

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

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

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);
    });

    // 2. 필터(지정한 조건을 만족하는 요소만 남긴 배열 만들기 )
    // array.filter((요소) => 요소 검사);
    var result = array.filter((element)=>element.length > 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(arrya.join()); //,(comma) 로 연결 (디폴트)
    console.log(array.join(' ')); // 공백으로 연결

Math 내장 함수

	console.log(Math.abs(-5));      // 5, -5의 절대값
    console.log(Math.cell(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

연습

<!-- 올림 함수를 자리수 지정이 가능하도록 커스터마이징 하기 -->
  <script>
    /*
      ceil(555.555, 2)  === 555.56
      ceil(555.555, 1)  === 555.6
      ceil(555.555, 0)  === 556
      ceil(555.555)     === 556
      ceil(555.555, -1) === 560
      ceil(555.555, -2) === 600

    */

    function ceil(number, digit = 0){
      return Math.ceil(number * (10 ** digit)) /  (10 ** digit);

    }

    console.log(ceil(555.555, -1));


  </script>

Event

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

고전 이벤트 모델

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

          }
          문서객체.onclick = 함수명;
        2) 익명 함수 (추천!)
          문서객체.onclick = function(){

          }
      <div id="box1">
    box1
  </div>
  <script>
    /*
      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';
    }
  </script>

표준 이벤트 모델

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

          }
          문서객체.addEventListener('click', 함수명);
        2) 익명 함수 (추천!)
          문서객체.addEventListener('click', function(event){

          });
          
      <div id="box2">
    box2
  </div>
  <script>
    document.getElementById('box2').addEventListener('click', function(event){
      this.style.fontSize = '32px';
    });
    document.getElementById('box2').addEventListener('click', function(event){
      this.style.color = 'crimson';
    });
  </script>  

인라인 이벤트 모델

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

          }
          <div onclick="함수명()"></div>
        2) JavaScript 코드
          <div onclick="alert('메시지')"><div>
          
      <div id="box3" onclick="myFunc(this)">
    box3
  </div>
  <script>
    function myFunc(dom){
      dom.style.fontSize = '32px';
    }

이벤트 방지하기

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

연습. 전체선택/개별선택 체크하기

  <div id="wrap3">
    <div>
      <input type="checkbox" id="chk_all">
      <label for="chk_all">전체선택</label>
    </div>
    <div>
      <input type="checkbox" id="chk_one" class="chk_each">
      <label for="chk_one">개별선택1</label>
    </div>
    <div>
      <input type="checkbox" id="chk_two" class="chk_each">
      <label for="chk_two">개별선택2</label>
    </div>
    <div>
      <input type="checkbox" id="chk_three" class="chk_each">
      <label for="chk_three">개별선택3</label>
    </div>
  </div>
  <script>

    // 전체선택 문서객체
    var chkAll = document.getElementById('chk_all');

    // 모든 개별선택 문서객체
    var chkEach = document.getElementsByClassName('chk_each');

    // 1. 전체선택을 클릭하면 전체선택의 체크상태를 개별선택들도 동일하게 가진다.
    chkAll.addEventListener('click', function(){
      for(let i = 0; i < chkEach.length; i++){
        chkEach[i].checked = chkAll.checked;
      }
    })

    // 2. 개별선택을 클릭하면 모든 개별선택의 체크상태를 확인해서 모두 체크되어 있으면 전체선택을 체크하고 아니면 전체선택을 해제한다.
    for(let i = 0; i < chkEach.length; i++){
      chkEach[i].addEventListener('click', function(){
        let total = 0;
        for(let j = 0; j < chkEach.length; j++){
          total += chkEach[j].checked;  // 체크된 경우 total += 1, 해제된 경우 total += 0으로 동작한다.
        }
        chkAll.checked = (total === chkEach.length);
      });
    }

  </script>