Java Script ( 형변환, 연산자, 배열 )

 

 

• 문자열 -> 숫자  ( 형변환 )

-- 요소의 내용 또는 값을 얻어오면 기본적으로 문자열 (string)로 인식됨.

   --> 덤셈 연산 시 '더하기' 가 아닌 '이어쓰기' 가 되는 문제 발생

 

- parseInt (문자열)   :  "정수" -> 정수( "123" -> 123 )

                                   "실수" -> 정수( "3.14" -> 3 ) 소수점 버림

- parseFloat (문자열 )  :  "정수" -> 정수( "123" -> 123 )

                                        "실수" -> 정수( "3.14" -> 3.14 )

- Number( 문자열 )  :  "정수"  -> 정수 ("123" -> 123 )

                                   "실수"  -> 실수 ( "3.14" -> 3.14 )

 

 <button class="btn1"> 형변환 확인 </button>

const btn1 = document.getElementsByClassName("btn1")[0];

btn1.addEventListener("click",function(){
    console.log("parseInt('123'): "+parseInt('123'));
    console.log("parseInt('3.14'): "+parseInt("3.14"));

    console.log("parseFloat('123'): "+parseFloat('123'));
    console.log("parseFloat('3.14'): "+parseFloat("3.14"));

    console.log("Number('123'): "+Number('123'));
    console.log("Number('3.14'): "+Number("3.14"));
})

 

 

 

• 동등 비교 / 동일 비교연산자

-- 동등 비교연산자 ( == , != )

  -> 값이 같으면 true  ( 자료형 관계 없음)

-- 동일 비교연산자 ( === , !== )

  -> 값과 자료형이 모두 같으면 true

 

 

 

 

 

• 문자열 ( string ) 내장함수

-- string.indexOf ( "찾고싶은문자열" )

     --> string 내에서 "찾고싶은문자열" 의 시작인덱스를 반환,   없으면  -1  

-- string.lastIndexOf ( "찾고싶은문자열" )

     --> string 내에서 "찾고싶은문자열" 의 시작인덱스를 반환,   없으면  -1     ( 뒤에서부터 검색 )

-- string.substring ( 시작인덱스 )  or ( 시작인덱스,마지막인덱스 )

     --> 문자열에서 시작인덱스 부터 마지막까지 잘라서 반환 .

-- string.split ( "구분자" )  or  ( "" ) 

     --> 문자열을 "구분자" 기준으로 나누어서 배열로 반환 .

     --> ( "" ) :  문자열을 한글자씩 모두 나누어서 배열로 반환 .

 

 

 

 

 

• 숫자 관련 내장 객체 / 내장 함수

-- 숫자 (number) 타입 리터럴 표기법

   - 123 (정수)  , 3.14 (실수)  ,  Infinity (무한)  ,  NaN ( Not a Number ) 

-- 숫자 관련 내장 객체 : Math

- Math.random()  :  0 이상 1 미만의 난수 발생

- Math.ceil (값)   :  올림             (소수점 첫째자리)

- Math.floor (값)  :  내림            (소수점 첫째자리)

- Math.trunc (값)  :  버림          (소수점 첫째자리)

- Math.round (값)  :  반올림      (소수점 첫째자리)

- 숫자.toFixed (자릿수)  :  숫자를 지정된 자릿수까지 반올림해서 표현

                    ex )   ( 3.14 ).toFixed(1)  -->  ' 3.5 '

- isNaN (값)   :  숫자가 아니면   true   ,   숫자가 맞으면   false

 

 

 

 

• Math.random() 활용하기

    <h3>Math.random() 활용하기</h3>
    <button id="btn4">랜덤 배경색</button>

document.getElementById("btn4").addEventListener("click",function(){

// rgb 색상 랜덤 대입 ( 0 ~ 255)
const r = Math.floor(Math.random()*256);
const g = Math.floor(Math.random()*256);
const b = Math.floor(Math.random()*256);

document.querySelector("body").style.backgroundColor
= "rgb("+r+","+g+","+b+")";

})

Math.random() 활용하기

 

 

 

 

 

 

 

• 배열 (Array)

-- 배열  :  변수를 묶음으로 다루는 것 ( 변수가 연속적으로 나열됨 )

-- JS 변수 특징  :  값이 저장되기 전까지 자료형이 저장되지 않는다.

  - JS 배열 특징     == Java Collection List 와 비슷

     - 자료형 제한 X

     - 길이 제한 X

-- JS 배열 선언방법

  - const arr1 = new Array ( ) ;      -- 0 칸짜리 배열 생성

  - const arr2 = new Array (3) ;     -- 3 칸짜리 배열 생성

  - const arr3 = [ ] ;                   -- 0 칸짜리 배열 생성

  - const arr4 = [ '값1' , '값2' , '값3' ]    -- 3 칸짜리 배열 선언과 초기화.

    

 

 

-- 배열 접근하기

   const arr4 = ['사과','딸기','바나나'];
   
          // 일반 for 문 = 배열 , 컬렉션
    for ( let i =0 ; i < arr4.length ; i++){
        console.log(arr4[i]);
    }
    
          // 배열 . forEach ( function (item , index ) { 반복수행코드})  = 배열
          // item = 현재접근중인요소
          // index = 현재인덱스
     arr4.forEach(function(a,i){
     console.log( i + " : " + a);
})

          //for (item of 배열(또는 컬렉션)) {} - 배열, 컬렉션
          // == JAVA 향상된 for문과 비슷
          // ( Symbol.iterator 존재하는 객체에 사용가능 )
    for ( let item of arr4){
        console.log(item);
    }

 

 

      EX  ))))  

    <ul id ="test">
        <li>10</li>
        <li>20</li>
        <li>30</li>
        <li>40</li>
        <li>50</li>
    </ul>

    const list = document.querySelectorAll("#test > li");

    let sum = 0;
    for ( let item of list ){
        sum += Number(item.innerText) ;
    }
    console.log(sum);

 

 

 

• 배열 관련 함수

-- stack  구조 관련 함수 

   - push ()  :  배열의 마지막 요소를 추가

   - pop ()  :   배열의 마지막 요소 꺼내옴

 

-- 배열.indexOf ("값")  :  일치하는 값을 가진 요소의 index 반환,

                                       없으면 -1 반환.

-- 배열.sort ()  :  배열 내 요소를 오름차순 정렬 ( 문자열 )

    배열.sort ( [ 정렬기준 함수] )   :  정렬기준함수에 따라 결과가 달라짐.

-- 배열.toString ()  :  배열요소를 하나의 문자열로 출력 

                               --> 요소 사이에 " , " 추가 

-- 배열.join ( "구분자" )   :  배열 요소를 하나의 문자열로 출력

                              --> 요소 사이에 "구분자" 추가 .

 

** sort () 함수는 원본배열의 훼손 발생.  ( 깊은복사 이용 해결가능 )

 

 

          //비어있는 배열생성
    const arr = [] ;

          //배열.push(값) : 배열 마지막 요소로 값이 추가
    arr.push("초밥");
    arr.push("냉면");
    arr.push("삼겹살");
    arr.push("치킨");

          // 배열.toString() : 배열요소사이 ", " 추가
    console.log(arr.toString());                    // 초밥, 냉면, 삼겹살, 치킨

          // 배열.pop() : 마지막요소 반환
    const temp = arr.pop();                         
    console.log("arr.toString(): "+arr.toString());   // 초밥, 냉면, 삼겹살
    console.log("temp: "+temp);                       // 치킨

          //배열.indexOf("값")
    console.log("초밥인덱스: "+arr.indexOf("초밥"));   // 0 
    
    console.log("갈비가 arr에있는가? : "+
                (arr.indexOf('갈비')!=-1));            // false


          //배열.sort()            
    console.log(arr.sort());                      // 냉면, 삼겹살, 초밥

          // 숫자정렬의 문제점과 해결방법
    const numArr=[5,3,2,10,1];                   // 5, 3, 2, 10 ,1

    console.log(numArr.sort());                  // 1, 10, 2, 3, 5

    console.log(numArr.sort( function(a,b) { return a-b } ));    // 1, 2, 3, 5, 10
    
        //배열.join ("구분자")
    console.log(numArr.join("//"));          //  1//2//3//5//10

 

 

 

 

 

 

 

    EX )))) 랜덤로또번호 만들어보기 .

    <button id="lotto"> 랜덤 로또번호 !</button><br>
    <span id = "lottoOut"></span>

 

const lotto = document.getElementById("lotto");
const lottoOut = document.getElementById("lottoOut");
//-------------------------for문----------------------------for문
lotto.addEventListener("click",function(){

    const ranArr=[];

    for(let i=0 ; i < 6 ; i++){
        let number = Math.floor((Math.random()*45)+1);
        
        if( ranArr.indexOf(number)== -1 ){       // ranArr[] 값이 number 와 같지않으면
            ranArr.push(number);               // push 한다.
        }else{
            i--                               // 그렇지않으면 for문 한번더 돌아라.
        }
    }
    lottoOut.innerText="로또번호 : "+ranArr.sort( function(a,b) { return a-b } );
})


//-------------------------while문----------------------------while문
 

lotto.addEventListener("click",function(){

    const ranArr1=[];

    while ( ranArr1.length < 6){
         let number = Math.floor((Math.random()*45)+1);


         if ( ranArr1.indexOf(number)== -1 ){
            ranArr1.push(number);
         }
    }
    lottoOut.innerText="로또번호 : "+ranArr1.sort( function(a,b) { return a-b } );
})