WEB/JavaScript
-
2021-07-18 자바스크립트에서는 객체를 바인딩하는 몇 가지 메서드가 존재하는데, 그중에서 오늘은 apply를 알아보도록 하자. - 예제1 //사람의 정보 함수 function person(name, age){ this.hisName = name; this.hisAge = age; } const person1 =new person('king', 25); // 학년이 추가된 학생 함수 function student(name, age, grade){ person.apply(this, [name,age]) this.hisGrade = grade; } const student1 = new student('kking', 30, 5); console.log(person1.hisName); //king conso..
[JavaScript] 자바스크립트 apply() 통한 바인딩 알아보기.2021-07-18 자바스크립트에서는 객체를 바인딩하는 몇 가지 메서드가 존재하는데, 그중에서 오늘은 apply를 알아보도록 하자. - 예제1 //사람의 정보 함수 function person(name, age){ this.hisName = name; this.hisAge = age; } const person1 =new person('king', 25); // 학년이 추가된 학생 함수 function student(name, age, grade){ person.apply(this, [name,age]) this.hisGrade = grade; } const student1 = new student('kking', 30, 5); console.log(person1.hisName); //king conso..
2021.07.18 -
2021-07-11 자바스크립트 내에서 중복된 값을 가지는 여러 인덱스들이 존재하며, 이를 제거하고 싶어질 수가 있는데, 이럴 경우 일일이 for문과 같은 루프를 돌리는 것보다 간단히 제거하는 방법이 있다. 이 방법을 알아보자. - 예제 아래의 예제는 간단한 문자들을 가지고 있는 배열이며, 불필요하게 중복되는 문자열이 다수 존재하는 것을 확인할 수 있다. const arr = ['W', 'W', 'o', 'o', 'r', 'l', 'd'] console.log(arr) // [ 'W', 'W', 'o', 'o', 'r', 'l', 'd' ] - Set set이라는 자료구조는 중복된 값을 포함할 수 없다. 오로지 유니크한 값들만 가지게 되는데, 이를 활용해보자. const arr = ['W', 'W', '..
[JavaScript] 자바스크립트 배열 중복 제거하는 방법.2021-07-11 자바스크립트 내에서 중복된 값을 가지는 여러 인덱스들이 존재하며, 이를 제거하고 싶어질 수가 있는데, 이럴 경우 일일이 for문과 같은 루프를 돌리는 것보다 간단히 제거하는 방법이 있다. 이 방법을 알아보자. - 예제 아래의 예제는 간단한 문자들을 가지고 있는 배열이며, 불필요하게 중복되는 문자열이 다수 존재하는 것을 확인할 수 있다. const arr = ['W', 'W', 'o', 'o', 'r', 'l', 'd'] console.log(arr) // [ 'W', 'W', 'o', 'o', 'r', 'l', 'd' ] - Set set이라는 자료구조는 중복된 값을 포함할 수 없다. 오로지 유니크한 값들만 가지게 되는데, 이를 활용해보자. const arr = ['W', 'W', '..
2021.07.11 -
2021-07-11 자바스크립트 내에서는 개발자가 직접 바인딩할 대상을 지정할 수 있는 몇 가지 메서드가 있는데, 그중에서 오늘은 bind에 대해서 알아보도록 하자. - 예제 아래는 간단한 사람이라는 객체이며, 객체 필드로 자신의 이름과 나이 이를 출력하는 간단한 함수가 정의 되어 있다. const person = { name : "king" ,age : 25 ,myInfo : function(){ console.log("나의 이름은 " + this.name + "이며, 나이는 " + this.age + "입니다." ) } } - bind와 unbind 된 객체 const person = { name : "king" ,age : 25 ,myInfo : function(){ console.log("나의 이..
[JavaScript] 자바스크립트 bind() 메소드 알아보기.2021-07-11 자바스크립트 내에서는 개발자가 직접 바인딩할 대상을 지정할 수 있는 몇 가지 메서드가 있는데, 그중에서 오늘은 bind에 대해서 알아보도록 하자. - 예제 아래는 간단한 사람이라는 객체이며, 객체 필드로 자신의 이름과 나이 이를 출력하는 간단한 함수가 정의 되어 있다. const person = { name : "king" ,age : 25 ,myInfo : function(){ console.log("나의 이름은 " + this.name + "이며, 나이는 " + this.age + "입니다." ) } } - bind와 unbind 된 객체 const person = { name : "king" ,age : 25 ,myInfo : function(){ console.log("나의 이..
2021.07.10 -
2021-07-08 자바스크립트를 공부하던 도중 흥미로운 기능을 발견했다. 바로 디스트럭처링(Destructuring) 풀어서 구조 분해라고도 하는 자바스크립트 만의 고유 문법이다. 아래의 예제를 보자. - 예제 1 const arr = ['king', 'world'] const name1 = arr[0] const name2 = arr[1] console.log(name1) // king console.log(name2) // world 위와 같은 배열 형식의 값을 변수에 다시 담을 경우 보통은 해당 배열의 인덱스 번호를 기준으로 하여 값을 지정할 것이다. 하지만 디스트럭처링을 사용하면 조금 더 간단하게 이를 해결할 수 있다. 바로 다음 예제를 살펴보자. const arr = ['king', 'worl..
[JavaScript] 자바스크립트 Destructuring 디스트럭처링 알아보기.2021-07-08 자바스크립트를 공부하던 도중 흥미로운 기능을 발견했다. 바로 디스트럭처링(Destructuring) 풀어서 구조 분해라고도 하는 자바스크립트 만의 고유 문법이다. 아래의 예제를 보자. - 예제 1 const arr = ['king', 'world'] const name1 = arr[0] const name2 = arr[1] console.log(name1) // king console.log(name2) // world 위와 같은 배열 형식의 값을 변수에 다시 담을 경우 보통은 해당 배열의 인덱스 번호를 기준으로 하여 값을 지정할 것이다. 하지만 디스트럭처링을 사용하면 조금 더 간단하게 이를 해결할 수 있다. 바로 다음 예제를 살펴보자. const arr = ['king', 'worl..
2021.07.08 -
2021-06-28 일부 기능 구현중 인터셉터 및 아니면 단순 alert를 사용해야 하는 경우가 있다. 단순 텍스트가 짧을 경우에는 상관없지만, 텍스트가 20자 이상 될 경우 상당히 alert 창이 지저분 해보일 수 가 있는데, 이럴 경우 줄 바꿈을 해주면, 사용자 입장에서 조금 더 깔끔하다고 느낄 수 있다. 방법은 아래와 같다. alert("텍스트\\n줄바꿈후텍스트") 역슬래시 두번에 영문자 n을 사용하면 깔끔하게 줄바꿈 처리가 된다. jsp 에서 구현할 때는 단순 스크립트 태그 안에 아래와 같이 구현하면 되며, alert('로그인이 필요한 페이지 입니다. \\n로그인 화면으로 이동합니다!'); 자바 class 내부에서 사용할 때는 아래와 같이 구현하면 된다. PrintWriter out =respon..
[JavaScript] 자바스크립트 alert() 줄바꿈 br / Enter 키 적용법2021-06-28 일부 기능 구현중 인터셉터 및 아니면 단순 alert를 사용해야 하는 경우가 있다. 단순 텍스트가 짧을 경우에는 상관없지만, 텍스트가 20자 이상 될 경우 상당히 alert 창이 지저분 해보일 수 가 있는데, 이럴 경우 줄 바꿈을 해주면, 사용자 입장에서 조금 더 깔끔하다고 느낄 수 있다. 방법은 아래와 같다. alert("텍스트\\n줄바꿈후텍스트") 역슬래시 두번에 영문자 n을 사용하면 깔끔하게 줄바꿈 처리가 된다. jsp 에서 구현할 때는 단순 스크립트 태그 안에 아래와 같이 구현하면 되며, alert('로그인이 필요한 페이지 입니다. \\n로그인 화면으로 이동합니다!'); 자바 class 내부에서 사용할 때는 아래와 같이 구현하면 된다. PrintWriter out =respon..
2021.06.28 -
2021-06-20 웹 애플리케이션 내부에서 카테고리를 부여하는 경우 select 태그를 사용하는 경우가 있는데, 이러한 경우 어떻게 자바스크립트에서 해당 select 태그 중 선택된 option의 값을 체크하고 가져오는지를 알아보자. - 예제 아래는 게시판의 카테고리를 설정하는 html select태그이다. 해당 카테고리를 사용자가 변경할 때마다 changeSelect() 함수를 호출하게 되는데, 이 함수에 따라 각 게시판의 링크로 이동하게 된다. 카테고리 자유게시판 치료게시판 리뷰게시판 아래는 자바스크립트 changeSelect() 함수 코드이다. 함수를 보면 우선적으로 document.getElementById 를 통해 전체 select id를 추출해 변수로 선언해 준다. 이후 if 조건 문을 통해..
[JavaScript] 자바스크립트 option selected 값 가져오기2021-06-20 웹 애플리케이션 내부에서 카테고리를 부여하는 경우 select 태그를 사용하는 경우가 있는데, 이러한 경우 어떻게 자바스크립트에서 해당 select 태그 중 선택된 option의 값을 체크하고 가져오는지를 알아보자. - 예제 아래는 게시판의 카테고리를 설정하는 html select태그이다. 해당 카테고리를 사용자가 변경할 때마다 changeSelect() 함수를 호출하게 되는데, 이 함수에 따라 각 게시판의 링크로 이동하게 된다. 카테고리 자유게시판 치료게시판 리뷰게시판 아래는 자바스크립트 changeSelect() 함수 코드이다. 함수를 보면 우선적으로 document.getElementById 를 통해 전체 select id를 추출해 변수로 선언해 준다. 이후 if 조건 문을 통해..
2021.06.20 -
2021-05-06 자바스크립트 내에서는 타이머를 지정할 수 있는 setTimeout() 함수가 존재하는데, 해당 함수의 사용법을 알아보자. - 매개값 setTimeout 은 매개 값을 두 가지를 받는다. 첫 번째 매개 값은 주어진 시간이 지났을때 수행될 코드이며, 두번째 매개값은 주어질 시간이다. 여기서의 주어질 시간은 밀리 초로 계산되기 때문에 1000 당 1초로 계산된다. - 예제 코드 아래의 예제 코드는 5000(5초) 밀리 초가 지나면 브라우저 콘솔 창에 Hello World를 출력하게 하는 코드이다. var timeSet = setTimeout(function() { console.log("Hello World")} , 5000) - 타이머 초기화 함수 불가피한 경우에 타이머를 초기화해야 하는..
[JavaScript] js 타이머 함수 setTimeout() 알아보기2021-05-06 자바스크립트 내에서는 타이머를 지정할 수 있는 setTimeout() 함수가 존재하는데, 해당 함수의 사용법을 알아보자. - 매개값 setTimeout 은 매개 값을 두 가지를 받는다. 첫 번째 매개 값은 주어진 시간이 지났을때 수행될 코드이며, 두번째 매개값은 주어질 시간이다. 여기서의 주어질 시간은 밀리 초로 계산되기 때문에 1000 당 1초로 계산된다. - 예제 코드 아래의 예제 코드는 5000(5초) 밀리 초가 지나면 브라우저 콘솔 창에 Hello World를 출력하게 하는 코드이다. var timeSet = setTimeout(function() { console.log("Hello World")} , 5000) - 타이머 초기화 함수 불가피한 경우에 타이머를 초기화해야 하는..
2021.05.06 -
2021-05-05 자바스크립트 내부에서 년/ 월/ 일/ 시간/ 분/ . . . 등을 알아보는 방법을 알아보자. - 예제 코드 예제코드는 현재의 시간을 기준으로 년/ 월/ 일/ 시간/ 분/ . . . 을 출력하는 코드 이다. Hello 결과를 확인해보면 아래와 같이 나타나게 된다. 다소 특이한 점은 년도를 추출할 때 getYear()이 아니라 getFullYear()을 사용한다는 점이다. 메인 이미지 출처: Photo by Adrian RA on Unsplash
[JavaScript] 자바스크립트 년/ 월/ 일/ 시간/ 분/ 초/ 구하는 법2021-05-05 자바스크립트 내부에서 년/ 월/ 일/ 시간/ 분/ . . . 등을 알아보는 방법을 알아보자. - 예제 코드 예제코드는 현재의 시간을 기준으로 년/ 월/ 일/ 시간/ 분/ . . . 을 출력하는 코드 이다. Hello 결과를 확인해보면 아래와 같이 나타나게 된다. 다소 특이한 점은 년도를 추출할 때 getYear()이 아니라 getFullYear()을 사용한다는 점이다. 메인 이미지 출처: Photo by Adrian RA on Unsplash
2021.05.05 -
2021-05-04 자바스크립 내에서 Date라는 오브젝트가 존재하면 해당 오브젝트를 사용하면 오늘의 날짜뿐 아니라 날짜 비교/ 계산 등 다양한 기능을 구현할 수 있게 된다. - 생성자 Date 오브젝트는 아래의 4가지 방식으로 생성할 수 있다. new Date() new Date(밀리초) new Date(년, 월, 일, 시간, 분, 초, 밀리초) new Date(날짜 형식 문자열) - 오늘의 날짜 오늘의 날짜를 알아보기 위해서는 단순히 Date() 오브젝트 사용하면 알 수 있으며, 사용법은 아래와 같다. 아래와 같이 현재의 시간이 콘솔 창에 출력되는 것을 확인할 수 있다. - 문자열 포맷 문자열 자체를 매개 값으로 주어 특정 날짜를 저장할 수 있는데, 코드로 작성하면 아래와 같다. 두 형식 모두 년 /..
[JavaScript] Date() 자바스크립트로 날짜 포맷 알아보기2021-05-04 자바스크립 내에서 Date라는 오브젝트가 존재하면 해당 오브젝트를 사용하면 오늘의 날짜뿐 아니라 날짜 비교/ 계산 등 다양한 기능을 구현할 수 있게 된다. - 생성자 Date 오브젝트는 아래의 4가지 방식으로 생성할 수 있다. new Date() new Date(밀리초) new Date(년, 월, 일, 시간, 분, 초, 밀리초) new Date(날짜 형식 문자열) - 오늘의 날짜 오늘의 날짜를 알아보기 위해서는 단순히 Date() 오브젝트 사용하면 알 수 있으며, 사용법은 아래와 같다. 아래와 같이 현재의 시간이 콘솔 창에 출력되는 것을 확인할 수 있다. - 문자열 포맷 문자열 자체를 매개 값으로 주어 특정 날짜를 저장할 수 있는데, 코드로 작성하면 아래와 같다. 두 형식 모두 년 /..
2021.05.04 -
2021-04-30 자바스크립트를 사용하면서 dom 객체를 가져오는 경우가 정말 많은데, 그중에서 id와 class를 가져오는 방법을 알아보도록 하자. - getElementById() Hello 코드를 보면 div1아이디를 가진 태그를 추출하여 콘솔창에 출력하는 코드이다. 결과를 보면 아래와 같이 해당 div1의 정보가 출력된다. - getElementsByClassName() Hello Hello Hello 이번에는 getElementsByClassName()를 활용해 div2라는 클래스를 가진 태그들을 콘솔창에 출력해 보도록 하자. 그럼 아래와 같이 배열 형식을 해당 div2 클래스의 정보가 나타나게 된다. - 응용 Hello Hello Hello 바로 추출된 id 로 직접적인 스타일 줄..
[JavaScript] DOM id와 DOM class 추출하는 법 getElement(s)By2021-04-30 자바스크립트를 사용하면서 dom 객체를 가져오는 경우가 정말 많은데, 그중에서 id와 class를 가져오는 방법을 알아보도록 하자. - getElementById() Hello 코드를 보면 div1아이디를 가진 태그를 추출하여 콘솔창에 출력하는 코드이다. 결과를 보면 아래와 같이 해당 div1의 정보가 출력된다. - getElementsByClassName() Hello Hello Hello 이번에는 getElementsByClassName()를 활용해 div2라는 클래스를 가진 태그들을 콘솔창에 출력해 보도록 하자. 그럼 아래와 같이 배열 형식을 해당 div2 클래스의 정보가 나타나게 된다. - 응용 Hello Hello Hello 바로 추출된 id 로 직접적인 스타일 줄..
2021.04.30 -
2021-04-28 정규식에서 모든 숫자를 추출하는 방법을 알아보도록 하자. - 기호 \d 기호를 사용하는 것이다. 해당 기호는 digit의 줄임 표현이며, 콘솔 창에 해당 정규식에 맞는 것만 출력해보면 아래와 같이 배열의 형태로 숫자 1, 2, 3 이 저장되어 있는 것을 확인할 수 있다. - 반대기호 반대로 대문자 D로 변경해서 정규식에 옵션을 주면 아래와 같이 숫자를 제외한 모든 문자들이 선택되게 된다. 메인 이미지 출처: Photo by Radek Skrzypczak on Unsplash
[JavaScript] 정규식 모든 숫자 추출하는 방법 알아보기2021-04-28 정규식에서 모든 숫자를 추출하는 방법을 알아보도록 하자. - 기호 \d 기호를 사용하는 것이다. 해당 기호는 digit의 줄임 표현이며, 콘솔 창에 해당 정규식에 맞는 것만 출력해보면 아래와 같이 배열의 형태로 숫자 1, 2, 3 이 저장되어 있는 것을 확인할 수 있다. - 반대기호 반대로 대문자 D로 변경해서 정규식에 옵션을 주면 아래와 같이 숫자를 제외한 모든 문자들이 선택되게 된다. 메인 이미지 출처: Photo by Radek Skrzypczak on Unsplash
2021.04.28 -
2021-04-27 기본 프로그래밍 언어와 같이 자바스크립트에서도 형 변환을 지원하며, 메서드는 parseInt를 사용한다. 해당 메서드의 사용법을 알아보도록 하자. - 기본 형변환 문자열을 parseInt 메서드 안에 넣어준 후 콘솔에 출력해 주면 아래와 같은 결과를 얻을 수 있다. 모두 number형으로 형 변환되어 출력되며, 앞자리에 붙은 0들은 자동으로 제거되어 정수만 남아 출력된다. - 문자 넘버형 변환 위의 코드의 결과는 아래와 같이 출력된다. 문자열 자체를 가지고 parseInt를 사용하면 이는 숫자로 변경할 수 없는 타입이기 때문에 NaN으로 출력되고 '123 hello'처럼 숫자가 포함된 문자열에 paseInt를 사용하면 문자열은 제거되고 숫자만 남아 출력된다. - boolean 넘버형 ..
[JavaScript] parseInt를 통한 형변환 문자열에서 넘버형으로2021-04-27 기본 프로그래밍 언어와 같이 자바스크립트에서도 형 변환을 지원하며, 메서드는 parseInt를 사용한다. 해당 메서드의 사용법을 알아보도록 하자. - 기본 형변환 문자열을 parseInt 메서드 안에 넣어준 후 콘솔에 출력해 주면 아래와 같은 결과를 얻을 수 있다. 모두 number형으로 형 변환되어 출력되며, 앞자리에 붙은 0들은 자동으로 제거되어 정수만 남아 출력된다. - 문자 넘버형 변환 위의 코드의 결과는 아래와 같이 출력된다. 문자열 자체를 가지고 parseInt를 사용하면 이는 숫자로 변경할 수 없는 타입이기 때문에 NaN으로 출력되고 '123 hello'처럼 숫자가 포함된 문자열에 paseInt를 사용하면 문자열은 제거되고 숫자만 남아 출력된다. - boolean 넘버형 ..
2021.04.27 -
2021-04-15 자바스크립트 코드에서 getElementById("id")를 사용하면 html 태그 내에 해당 id를 가지고 있는 태그를 불러와 요소 객체로 반환할 수 있게 된다. 즉 이를 통해 css 속성을 부여하거나 이벤트를 부여하는 등 다양한 기능을 추가할 수 있다. - getElementById("id") 우선 getElementById() 로 가지고 온 id 객체를 콘솔 창에 출력해 보도록 하자. Hello World1 Hello World2 div1의 아이디를 getElementById() 메소드를 이용해 하나의 변수에 담은뒤에 출력해보면 아래와 같이 태그 정보가 저장된 것을 확인할 수 있다. - getElementById() 스타일 부여 이제 추출되어 div 태그가 담긴 변수에 스타일..
[JavaScript] JS getElementById() 이용한 아이디 요소 객체 선택2021-04-15 자바스크립트 코드에서 getElementById("id")를 사용하면 html 태그 내에 해당 id를 가지고 있는 태그를 불러와 요소 객체로 반환할 수 있게 된다. 즉 이를 통해 css 속성을 부여하거나 이벤트를 부여하는 등 다양한 기능을 추가할 수 있다. - getElementById("id") 우선 getElementById() 로 가지고 온 id 객체를 콘솔 창에 출력해 보도록 하자. Hello World1 Hello World2 div1의 아이디를 getElementById() 메소드를 이용해 하나의 변수에 담은뒤에 출력해보면 아래와 같이 태그 정보가 저장된 것을 확인할 수 있다. - getElementById() 스타일 부여 이제 추출되어 div 태그가 담긴 변수에 스타일..
2021.04.15 -
2021-04-13 자바스크립트에는 this라는 키워드가 존재한다. 해당 키워드는 자신이 속한 객체를 참조한다. 글로는 이해가 어려울 수 있으니 코드를 보면서 알아보도록 하자. - 예제 1. Hello World 위의 코드는 학생의 정보를 오브젝트 형식으로 나열한 것이다. 오브젝트 정보는 총 4개로 구성되어 있다. 그중에서도 info는 함수형 오브젝트로서 함수의 내용으로는 retrun this라고 되어 있다. 여기서의 this의 의미는 student 자체를 나타내며, 현재 student 전체가 담고 있는 모든 요소 정보를 오브젝트 타입으로 리턴한다. 즉 this는 처음에도 말했듯이 자신이 속한 객체를 참조한다. - 예제 2. Hello World 이벤트에서도 this를 활용할 수 있다. 해당 코드..
[JavaScript] JS this(자기자신) 키워드 알아보기2021-04-13 자바스크립트에는 this라는 키워드가 존재한다. 해당 키워드는 자신이 속한 객체를 참조한다. 글로는 이해가 어려울 수 있으니 코드를 보면서 알아보도록 하자. - 예제 1. Hello World 위의 코드는 학생의 정보를 오브젝트 형식으로 나열한 것이다. 오브젝트 정보는 총 4개로 구성되어 있다. 그중에서도 info는 함수형 오브젝트로서 함수의 내용으로는 retrun this라고 되어 있다. 여기서의 this의 의미는 student 자체를 나타내며, 현재 student 전체가 담고 있는 모든 요소 정보를 오브젝트 타입으로 리턴한다. 즉 this는 처음에도 말했듯이 자신이 속한 객체를 참조한다. - 예제 2. Hello World 이벤트에서도 this를 활용할 수 있다. 해당 코드..
2021.04.13 -
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 구문은 반복 가능한 자료구조를 인덱스 변수에 따라 값을 반환하는 구..
[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 구문은 반복 가능한 자료구조를 인덱스 변수에 따라 값을 반환하는 구..
2021.04.11 -
2021-04-09 자바스크립트 내부에는 각 상황에 맞는 처리결과 값을 리턴할 수 있는 Switch라는 구문이 존재한다. 이 Switch 구문의 사용법을 알아보도록 하자. - 예제 예제는 학생의 점수에 따른 학점을 부여해주는 간단한 학점 부여 Switch 구문을 작성해 보도록 하겠다. 학점은 A, B, C, D, 로 나누어지면 해당 학점을 받지 못한 학생은 F로 낙제점을 받게 된다. 또한 학생의 점수는 0 ~ 100 점으로 한정한다. - 코드 Hello World 코드의 구조를 파악해보면 switch("조건식") 으로 시작된다. 해당 조건식으로 나온 결과물이 각 case(케이스)에할당되는지 파악한다. case는 중복된 값이 없어야 하며, case는 위에서 아래 순으로 진행된다. case에 조건식의 값..
[JavaScript] JS Switch 구문을 통한 상황 처리 알아보기2021-04-09 자바스크립트 내부에는 각 상황에 맞는 처리결과 값을 리턴할 수 있는 Switch라는 구문이 존재한다. 이 Switch 구문의 사용법을 알아보도록 하자. - 예제 예제는 학생의 점수에 따른 학점을 부여해주는 간단한 학점 부여 Switch 구문을 작성해 보도록 하겠다. 학점은 A, B, C, D, 로 나누어지면 해당 학점을 받지 못한 학생은 F로 낙제점을 받게 된다. 또한 학생의 점수는 0 ~ 100 점으로 한정한다. - 코드 Hello World 코드의 구조를 파악해보면 switch("조건식") 으로 시작된다. 해당 조건식으로 나온 결과물이 각 case(케이스)에할당되는지 파악한다. case는 중복된 값이 없어야 하며, case는 위에서 아래 순으로 진행된다. case에 조건식의 값..
2021.04.09 -
2021-04-08 흔히 [참 거짓] / [true false]를 나누어야 하는 경우가 다수 존재한다. 이럴 경우를 대비하여 js 내부에 만들어진 Value가 Boolean이다. 이 Boolean을 이용하는 방법을 알아보자. - Boolean(x ? y) 두 가지의 값(데이터)을 비교하여 같은지 다른지를 비교하기 위해서 부등호를 사용하게 된다. Boolean에서 사용할 수 있는 부등호는 [ == , > , = ,
[JavaScript] JS Boolean Value에 대하여 알아보기.2021-04-08 흔히 [참 거짓] / [true false]를 나누어야 하는 경우가 다수 존재한다. 이럴 경우를 대비하여 js 내부에 만들어진 Value가 Boolean이다. 이 Boolean을 이용하는 방법을 알아보자. - Boolean(x ? y) 두 가지의 값(데이터)을 비교하여 같은지 다른지를 비교하기 위해서 부등호를 사용하게 된다. Boolean에서 사용할 수 있는 부등호는 [ == , > , = ,
2021.04.08 -
2021-04-07 자바스크립트의 Math Object 에는 Random이라는 내부 함수가 존재하는데, 이 Radom을 사용하는 방법을 알아보도록 하자. - random() 해당 메소드를 사용하게 되면 0 이상 1 이하의 랜덤 한 수가 출력되게 된다. 아래의 코드와 결과를 확인해 보자. Hello World 결과를 확인해보면 항상 0보다는 크지만 1보다작은 값들이 출력되는 것을 확인할 수 있다. - 다른 함수와의 조합 random 함수는 Math 내부의 다른 함수들과 조합되어서도 종종 사용되는데, 아래의 예제를 확인해 보자. Hello World 예제에서는 특정 범위에 정수 값을 나타내기 위해 floor(내림) ceil(올림) 함수와 조합해서 사용하였다. 해당 코드의 결과는 우측에 주석으로 남겨 ..
[JavaScript] JS 통한 랜덤값 생성하는 방법 알아보기2021-04-07 자바스크립트의 Math Object 에는 Random이라는 내부 함수가 존재하는데, 이 Radom을 사용하는 방법을 알아보도록 하자. - random() 해당 메소드를 사용하게 되면 0 이상 1 이하의 랜덤 한 수가 출력되게 된다. 아래의 코드와 결과를 확인해 보자. Hello World 결과를 확인해보면 항상 0보다는 크지만 1보다작은 값들이 출력되는 것을 확인할 수 있다. - 다른 함수와의 조합 random 함수는 Math 내부의 다른 함수들과 조합되어서도 종종 사용되는데, 아래의 예제를 확인해 보자. Hello World 예제에서는 특정 범위에 정수 값을 나타내기 위해 floor(내림) ceil(올림) 함수와 조합해서 사용하였다. 해당 코드의 결과는 우측에 주석으로 남겨 ..
2021.04.07 -
2021-04-06 자바스크립트 내에서도 간단한 소수점 처리가 가능한데, 이는 Math Object를 활용해서 처리할 수 있다. 오늘은 이와 같은 방법을 알아보도록 하자. - ceil Math.ceil("숫자") 메소드는 매개 값으로 들어오는 숫자의 소수점의 수 또는 자릿수에 상관없이 무조건 올림을 진행한다. Hello World - floor 반면에 floor의 경우 ceil과는 정반대의 기능을 수행하게 된다. 매개값으로 오는 숫자의 소수점의 수와 자릿수에 상관없이 무조건 내림 동작을 수행한다. Hello World - round round의 경우 소숫점의 숫자의 크기에 따라 반올림을 수행하며, 리턴 값은 정수의 값을 리턴하기 때문에 첫째 자리 기준으로 값을 확인하여 반올림된 정수 값을 리턴한다..
[JavaScript] JS 올림/내림 반올림 메소드 알아보기 Math2021-04-06 자바스크립트 내에서도 간단한 소수점 처리가 가능한데, 이는 Math Object를 활용해서 처리할 수 있다. 오늘은 이와 같은 방법을 알아보도록 하자. - ceil Math.ceil("숫자") 메소드는 매개 값으로 들어오는 숫자의 소수점의 수 또는 자릿수에 상관없이 무조건 올림을 진행한다. Hello World - floor 반면에 floor의 경우 ceil과는 정반대의 기능을 수행하게 된다. 매개값으로 오는 숫자의 소수점의 수와 자릿수에 상관없이 무조건 내림 동작을 수행한다. Hello World - round round의 경우 소숫점의 숫자의 크기에 따라 반올림을 수행하며, 리턴 값은 정수의 값을 리턴하기 때문에 첫째 자리 기준으로 값을 확인하여 반올림된 정수 값을 리턴한다..
2021.04.06 -
2021-04-05 간혹 문자열을 대소문자로 치환해야 하는 경우가 있다. 이러한 경우 손쉽게 해당 문제를 해결하는 방법을 알아보자. - 대문자 변환 [ toUpperCase() ] 기본적인 문자열을 전부 대문자로 바꿔야 하는 경우가 있는데 이경우 toUpperCase() 메서드를 사용하면 손쉽게 변경할 수 있다. 아래의 예제를 보자 Hello World 브라우저 콘솔창의 출력을 확인해보면, HELLO WORLD HELLO EVERYONE! 로 나타난다. - 소문자 변환 [ toLowerCase() ] 반면에 기존의 문자열을 전부 소문자로 바꿔야 하는 경우에는 toLowerCase() 메소드를 사용하면 손쉽게 변경할 수 있다. 다음의 예제를 살펴보자. Hello World 브라우저 콘솔창의 출력을 ..
[JavaScript] JS String(문자열) 대 / 소 문자 변환 방법2021-04-05 간혹 문자열을 대소문자로 치환해야 하는 경우가 있다. 이러한 경우 손쉽게 해당 문제를 해결하는 방법을 알아보자. - 대문자 변환 [ toUpperCase() ] 기본적인 문자열을 전부 대문자로 바꿔야 하는 경우가 있는데 이경우 toUpperCase() 메서드를 사용하면 손쉽게 변경할 수 있다. 아래의 예제를 보자 Hello World 브라우저 콘솔창의 출력을 확인해보면, HELLO WORLD HELLO EVERYONE! 로 나타난다. - 소문자 변환 [ toLowerCase() ] 반면에 기존의 문자열을 전부 소문자로 바꿔야 하는 경우에는 toLowerCase() 메소드를 사용하면 손쉽게 변경할 수 있다. 다음의 예제를 살펴보자. Hello World 브라우저 콘솔창의 출력을 ..
2021.04.05