[JavaScript] 정규식 모든 숫자 추출하는 방법 알아보기

2021-04-28 정규식에서 모든 숫자를 추출하는 방법을 알아보도록 하자. - 기호 \d 기호를 사용하는 것이다. 해당 기호는 digit의 줄임 표현이며, 콘솔 창에 해당 정규식에 맞는 것만 출력해보면 아래와 같이 배열의 형태로 숫자 1, 2, 3 이 저장되어 있는 것을 확인할 수 있다. - 반대기호 반대로 대문자 D로 변경해서 정규식에 옵션을 주면 아래와 같이 숫자를 제외한 모든 문자들이 선택되게 된다. 메인 이미지 출처: Photo by Radek Skrzypczak on Unsplash

• format_list_bulleted WEB/JavaScript
• · 2021. 4. 28.
• textsms

[JavaScript] parseInt를 통한 형변환 문자열에서 넘버형으로

2021-04-27 기본 프로그래밍 언어와 같이 자바스크립트에서도 형 변환을 지원하며, 메서드는 parseInt를 사용한다. 해당 메서드의 사용법을 알아보도록 하자. - 기본 형변환 문자열을 parseInt 메서드 안에 넣어준 후 콘솔에 출력해 주면 아래와 같은 결과를 얻을 수 있다. 모두 number형으로 형 변환되어 출력되며, 앞자리에 붙은 0들은 자동으로 제거되어 정수만 남아 출력된다. - 문자 넘버형 변환 위의 코드의 결과는 아래와 같이 출력된다. 문자열 자체를 가지고 parseInt를 사용하면 이는 숫자로 변경할 수 없는 타입이기 때문에 NaN으로 출력되고 '123 hello'처럼 숫자가 포함된 문자열에 paseInt를 사용하면 문자열은 제거되고 숫자만 남아 출력된다. - boolean 넘버형 ..

• format_list_bulleted WEB/JavaScript
• · 2021. 4. 27.
• textsms

[JavaScript] JS getElementById() 이용한 아이디 요소 객체 선택

2021-04-15 자바스크립트 코드에서 getElementById("id")를 사용하면 html 태그 내에 해당 id를 가지고 있는 태그를 불러와 요소 객체로 반환할 수 있게 된다. 즉 이를 통해 css 속성을 부여하거나 이벤트를 부여하는 등 다양한 기능을 추가할 수 있다. - getElementById("id") 우선 getElementById() 로 가지고 온 id 객체를 콘솔 창에 출력해 보도록 하자. Hello World1 Hello World2 ​ div1의 아이디를 getElementById() 메소드를 이용해 하나의 변수에 담은뒤에 출력해보면 아래와 같이 태그 정보가 저장된 것을 확인할 수 있다. - getElementById() 스타일 부여 이제 추출되어 div 태그가 담긴 변수에 스타일..

• format_list_bulleted WEB/JavaScript
• · 2021. 4. 15.
• textsms

[JavaScript] JS this(자기자신) 키워드 알아보기

2021-04-13 자바스크립트에는 this라는 키워드가 존재한다. 해당 키워드는 자신이 속한 객체를 참조한다. 글로는 이해가 어려울 수 있으니 코드를 보면서 알아보도록 하자. - 예제 1. Hello World ​ 위의 코드는 학생의 정보를 오브젝트 형식으로 나열한 것이다. 오브젝트 정보는 총 4개로 구성되어 있다. 그중에서도 info는 함수형 오브젝트로서 함수의 내용으로는 retrun this라고 되어 있다. 여기서의 this의 의미는 student 자체를 나타내며, 현재 student 전체가 담고 있는 모든 요소 정보를 오브젝트 타입으로 리턴한다. 즉 this는 처음에도 말했듯이 자신이 속한 객체를 참조한다. - 예제 2. Hello World ​ 이벤트에서도 this를 활용할 수 있다. 해당 코드..

• format_list_bulleted WEB/JavaScript
• · 2021. 4. 13.
• textsms

[JavaScript] JS for 구문의 다양한 형식(in/of) 알아보기

2021-04-11 자바스크립트 내부에서는 for을 이용한 몇 가지 형식의 반복문 구문이 존재한다. 이를 통해 코드의 양을 줄이고 반복적인 업무를 수행할 수 있게 된다. 이 for의 사용법을 알아보도록 하자. - for 아래는 기본 for문 코드이다 정수가 들어가 변수에 루프를 돌면서 더해주는 구조이다. Hello World ​ for() 안에는 3가지 매개값이 들어간다. 1. for구문안에서 사용할 변수(반복 변수) 2. 조건식(해당 조건식의 범위를 벗어나면 루프는 종료된다.) 3. 루프를 한번 끝낼때마다 실행될 코드 위의 for구문에서 num변수는 루프마다 [ 1, 2, 3, 4]의 값이 더해지게 된다. - for(in) for in 구문은 반복 가능한 자료구조를 인덱스 변수에 따라 값을 반환하는 구..

• format_list_bulleted WEB/JavaScript
• · 2021. 4. 11.
• textsms

[JavaScript] JS Switch 구문을 통한 상황 처리 알아보기

2021-04-09 자바스크립트 내부에는 각 상황에 맞는 처리결과 값을 리턴할 수 있는 Switch라는 구문이 존재한다. 이 Switch 구문의 사용법을 알아보도록 하자. - 예제 예제는 학생의 점수에 따른 학점을 부여해주는 간단한 학점 부여 Switch 구문을 작성해 보도록 하겠다. 학점은 A, B, C, D, 로 나누어지면 해당 학점을 받지 못한 학생은 F로 낙제점을 받게 된다. 또한 학생의 점수는 0 ~ 100 점으로 한정한다. - 코드 Hello World ​ 코드의 구조를 파악해보면 switch("조건식") 으로 시작된다. 해당 조건식으로 나온 결과물이 각 case(케이스)에할당되는지 파악한다. case는 중복된 값이 없어야 하며, case는 위에서 아래 순으로 진행된다. case에 조건식의 값..

• format_list_bulleted WEB/JavaScript
• · 2021. 4. 9.
• textsms