[JavaScript] 자바스크립트 alert() 줄바꿈 br / Enter 키 적용법

2021-06-28 일부 기능 구현중 인터셉터 및 아니면 단순 alert를 사용해야 하는 경우가 있다. 단순 텍스트가 짧을 경우에는 상관없지만, 텍스트가 20자 이상 될 경우 상당히 alert 창이 지저분 해보일 수 가 있는데, 이럴 경우 줄 바꿈을 해주면, 사용자 입장에서 조금 더 깔끔하다고 느낄 수 있다. 방법은 아래와 같다. alert("텍스트\\n줄바꿈후텍스트") 역슬래시 두번에 영문자 n을 사용하면 깔끔하게 줄바꿈 처리가 된다. jsp 에서 구현할 때는 단순 스크립트 태그 안에 아래와 같이 구현하면 되며, alert('로그인이 필요한 페이지 입니다. \\n로그인 화면으로 이동합니다!'); 자바 class 내부에서 사용할 때는 아래와 같이 구현하면 된다. PrintWriter out =respon..

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

[JavaScript] 자바스크립트 option selected 값 가져오기

2021-06-20 웹 애플리케이션 내부에서 카테고리를 부여하는 경우 select 태그를 사용하는 경우가 있는데, 이러한 경우 어떻게 자바스크립트에서 해당 select 태그 중 선택된 option의 값을 체크하고 가져오는지를 알아보자. - 예제 아래는 게시판의 카테고리를 설정하는 html select태그이다. 해당 카테고리를 사용자가 변경할 때마다 changeSelect() 함수를 호출하게 되는데, 이 함수에 따라 각 게시판의 링크로 이동하게 된다. 카테고리 자유게시판 치료게시판 리뷰게시판 아래는 자바스크립트 changeSelect() 함수 코드이다. 함수를 보면 우선적으로 document.getElementById 를 통해 전체 select id를 추출해 변수로 선언해 준다. 이후 if 조건 문을 통해..

• format_list_bulleted WEB/JavaScript
• · 2021. 6. 20.
• textsms

[JavaScript] js 타이머 함수 setTimeout() 알아보기

2021-05-06 자바스크립트 내에서는 타이머를 지정할 수 있는 setTimeout() 함수가 존재하는데, 해당 함수의 사용법을 알아보자. - 매개값 setTimeout 은 매개 값을 두 가지를 받는다. 첫 번째 매개 값은 주어진 시간이 지났을때 수행될 코드이며, 두번째 매개값은 주어질 시간이다. 여기서의 주어질 시간은 밀리 초로 계산되기 때문에 1000 당 1초로 계산된다. - 예제 코드 아래의 예제 코드는 5000(5초) 밀리 초가 지나면 브라우저 콘솔 창에 Hello World를 출력하게 하는 코드이다. var timeSet = setTimeout(function() { console.log("Hello World")} , 5000) - 타이머 초기화 함수 불가피한 경우에 타이머를 초기화해야 하는..

• format_list_bulleted WEB/JavaScript
• · 2021. 5. 6.
• textsms

[JavaScript] 자바스크립트 년/ 월/ 일/ 시간/ 분/ 초/ 구하는 법

2021-05-05 자바스크립트 내부에서 년/ 월/ 일/ 시간/ 분/ . . . 등을 알아보는 방법을 알아보자. - 예제 코드 예제코드는 현재의 시간을 기준으로 년/ 월/ 일/ 시간/ 분/ . . . 을 출력하는 코드 이다. Hello ​ 결과를 확인해보면 아래와 같이 나타나게 된다. 다소 특이한 점은 년도를 추출할 때 getYear()이 아니라 getFullYear()을 사용한다는 점이다. 메인 이미지 출처: Photo by Adrian RA on Unsplash

• format_list_bulleted WEB/JavaScript
• · 2021. 5. 5.
• textsms

[JavaScript] Date() 자바스크립트로 날짜 포맷 알아보기

2021-05-04 자바스크립 내에서 Date라는 오브젝트가 존재하면 해당 오브젝트를 사용하면 오늘의 날짜뿐 아니라 날짜 비교/ 계산 등 다양한 기능을 구현할 수 있게 된다. - 생성자 Date 오브젝트는 아래의 4가지 방식으로 생성할 수 있다. new Date() new Date(밀리초) new Date(년, 월, 일, 시간, 분, 초, 밀리초) new Date(날짜 형식 문자열) - 오늘의 날짜 오늘의 날짜를 알아보기 위해서는 단순히 Date() 오브젝트 사용하면 알 수 있으며, 사용법은 아래와 같다. 아래와 같이 현재의 시간이 콘솔 창에 출력되는 것을 확인할 수 있다. - 문자열 포맷 문자열 자체를 매개 값으로 주어 특정 날짜를 저장할 수 있는데, 코드로 작성하면 아래와 같다. 두 형식 모두 년 /..

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

[JavaScript] DOM id와 DOM class 추출하는 법 getElement(s)By

2021-04-30 자바스크립트를 사용하면서 dom 객체를 가져오는 경우가 정말 많은데, 그중에서 id와 class를 가져오는 방법을 알아보도록 하자. - getElementById() Hello ​ 코드를 보면 div1아이디를 가진 태그를 추출하여 콘솔창에 출력하는 코드이다. 결과를 보면 아래와 같이 해당 div1의 정보가 출력된다. - getElementsByClassName() Hello Hello Hello ​ 이번에는 getElementsByClassName()를 활용해 div2라는 클래스를 가진 태그들을 콘솔창에 출력해 보도록 하자. 그럼 아래와 같이 배열 형식을 해당 div2 클래스의 정보가 나타나게 된다. - 응용 Hello Hello Hello ​ 바로 추출된 id 로 직접적인 스타일 줄..

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