JS ( 각종형식, 형변환 , 연산자 , 배열 , window내장객체 )

DeadWhale·2022년 5월 13일
0

JS

목록 보기
7/12
post-thumbnail

JS의 문자열 , 숫자 , 형변환 , 연산자

문자열 (String 내장 객체)

javascript에는 문자열을 나타내는 객체 String이 존재하며
문자열과 관련된 기본적인 함수를 제공해준다.

숫자 (Math 내장 객체)

숫자(number) 타입 리터럴 표기법
:12(정수) , 3.14(실수) , Infinity(무한) , NaN(Not a Number)


Math : 숫자 관련 함수를 제공하는 JS 내장 객체.
ex) Math.random() ,

  • 그냥 Java에서 쓰는것 처럼 쓰면 될 듯 import시키지 않아도 괜찮다.

형 변환

parseInt(문자열): 정수형태로만 변환 (3.14 -> 3)


parseFloot(문자열): 실수형태로 변환 ("정수"->정수 , "실수"->실수)


Number(문자열): floot랑 같은데 더 편하게 쓸수 있다.

그냥 Number만 쓰면 될 것 같다.

동등 / 동일 비교 연산자.

동등 비교 연산자( == , != )
-> 같이 같으면 true
-> 자료형이 관계없다
ex1) "1"==1==true 3개 모두 같다.


동일 비교 연산자(=== , !===)
-> 값과 자료형 모두 같이야지 True반환


JS에서 중요하게 사용될것 같다
자료형을 내가 직접 제어하는게 아니라 정확한 비교를 위해
잘 기억해야 할것 같다



배열

JS는 배열을 반환 받는 경우가 많아 배열을 자주 사용해야 한다.

JS배열의 특정

  • 자료형의 제한이 없다 (각 배열칸마다 다른 자료형이 들어간다.)
  • 길이 제한이 없다
    == 자바의 Collection List와 비슷하다.

JS 하다 가끔씩 드는 생각인대 적당히 자유로워야지 너무 자유로운 느낌이다...
이러다가 AI한태 지배받지 하나하나 컨트롤해야지 주권이 인간한태 있다.


document.getElementById("btn1").addEventListener("click",function(){
    //배열 선언 방법.
    const arr1=new Array(3); //3칸짜리 배열 생성
    const arr2=new Array(); //0칸 짜리 배열(비어있는 배열) 생성
  
    /* console.log(arr1);
    console.log(arr2); */

    arr1[0] = "깁밥";
    arr1[1] = 123;
    arr1[2] = true;
    arr1[3] = true;
    console.log(arr1);

    //0칸 배열에 대입 -> 자동으로 길이가 증가함
    arr2[0] = "깁밥";
    arr2[1] = 123;
    arr2[2] = true;
    console.log(arr2);

    // 배열 선언 방법
    const arr3 = []; //비어있는 배열 [0칸]
    const arr4 = ["사과","딸기","망고","용과"] //선언 +초기화
     
    //for문 배열 요소 접근.
    // 1. 일반 for문
    // 2. 향상된 for문 (for .... of) : 배열용 향상된 for문
     
    for(let item of arr4){
    //arr4 배열에서 요소를 하나씩 얻어와 item에 대입
        console.log(item);
    }
})

Stack 구조 관련 함수

push(): 배열 마지막 요소로 추가하기
pop() : 배열 마지막 요소를 꺼내옴

배열.indexOf("값") : 일치하는 값을 가진 요소의 index를 반환
: 없으면 -1 반환

정렬
배열.sort([정렬기준 함수]) : 배열 내 요소를 오름차순 정렬(문자열)
단,[배열기준 함수]에 따라서 결과가 달라진다.

배열.toString() : 배열 요소를 하나의 문자열로 출력
-> 요소 사이에 , 기호 포함 출력
배열.join("구분자") : 배열 요소를 하나의 문자열로 출력
-> 요소 사이에 "구분자"로 구별해 출력



window 내장 객체

브라우저 창 자체를 나타내는 객체

window 객체는 JS의 최상위 객체면서
DOM (Document Object Model) ,
BOM (Browser Object Model) 으로 구분된다


DOM(Document Object Model) : document
BOM(Browser Object Model) : location, history, screen, navigator


* window 객체는 창 자체를 나타내고 있으므로
어디서든 접근이 가능하다.
그래서 window라는 객체 호출부를 생략할 수 있다.
ex) window.alert() == alert()

window.setTimeout ( 함수, 지연시간(ms) )

지연 시간 후 함수가 '1회'실행하는 것

document.getElementById("btn1").addEventListener("click",function(){
  setTimeout(function(){alert("3초과 경과된 것")},2000)
})

window.setInterval(함수,지연시간)

지연 시간 마다 함수가 실행하는 것

//1초마다 갱신하는 함수
function clockFn(){
    const clock = document.getElementById("clock");
    clock.innerText = currentTime();
    
    //지연시간 마다 반복(첫 반복도 지연시간 후에 시작)
    // -> 페이지 로딩후 1초후 부터 반복된다. (지연->함수->지연->함수)
    interval =  setInterval(function(){
        clock.innerText = currentTime();
    },1000)

}
//현재 시간을 확인하는 함수.
function currentTime(){
    const now = new Date();
    return now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();

}
//페이지가 로딩될 때 자동으로 호출
clockFn(); //로딩시 자동으로 함수 호출


//계속 읽어오고 있는 interval을 삭제 해 중지시킨다.
document.getElementById("stop").addEventListener("click",function(){
    clearInterval(interval);
})

0개의 댓글