본문 바로가기

JavaScript209

[ javascript ] history 객체를 사용하여 이전 페이지로 돌아가기 안녕하세요 이번 시간에는 자바스크립트 객체인 history 객체의 back()메소드를 사용하여 이전 페이지로 돌아가기 기능을 만들어보겠습니다. * 결과 * 소스코드 [ front.html ] 안녕하세요! 다음 페이지로 이동하기 [ back.html ] 반갑습니다! 뒤로가기 2022. 7. 9.
[Javascript] 네이버 지도 api를 사용해서 지도 표시 및 마커 찍기 오늘은 네이버 지도 api 를 사용해서 지도를 띄우고 마커를 찍어보겠습니다. 먼저 네이버 클라우드 플랫폼의 Maps 서비스 페이지에 들어가서 로그인을 한 뒤, '이용 신청하기' 버튼을 클릭합니다. https://www.ncloud.com/product/applicationService/maps NAVER CLOUD PLATFORM cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification www.ncloud.com Application 등록을 누르면 Application 이름을 설정하고, Service 선택 및 서비스 환경 등록하는 페이지로 이동합니다... 2022. 7. 6.
[JavaScript] Full-calendar 커스텀하기 full-calendar 이전 포스팅 https://stickode.tistory.com/484 [JavaScript] Full-calendar 사용하기 안녕하세요. 자바스크립트로 full-calendar를 불러오는 방법을 알아보겠습니다. https://fullcalendar.io/docs/initialize-globals Initialize with Script Tags - Docs | FullCalendar It’s possible to manuall.. stickode.tistory.com 안녕하세요. Full-calendar 사용하기에 이어 커스텀을 한 번 해보겠습니다. 1. 캘린더 상단 June 2022 => 2022년 6월 2. 일요일 시작 => 월요일 시작 3. 토요일, 일요일 색깔 각각 파.. 2022. 7. 1.
[javascript] 모달창의 외부를 클릭하면 모달창이 안 보이게 하기 안녕하세요 이번 시간에는 모달창을 만들고, 모달창 외부를 클릭하면 모달창이 안 보이게 하는 기능을 만들어보겠습니다. * 결과 HTML 삽입 미리보기할 수 없는 소스 * 전체 코드입니다. 모달창 키기 x 스틱코드에서 개발에 필요한 모든 코드를 쉽게 사용하세요. https://stickode.com/mainlogin.html 모달창을 보이게 하는 css 속성과 보이지 않게 하는 css 속성을 작성합니다. * 모달창을 보이게 하는 css 속성은 display : block; 입니다. * 모달창을 보이지 않게 하는 css 속성은 display : none; 입니다. .modal_wrap { display: none; //생략 } .modal_wrap.show-modal { display: block; } .mo.. 2022. 6. 24.
[Javascript] Video.js 사용해서 동영상 재생하기 Video.js 는 오픈소스 HTML5 비디오 플레이어입니다. https://videojs.com/ Video.js - Make your player yours Make your player yours with the internet's most popular open source video player framework videojs.com 오늘은 Video.js 를 사용해서 동영상을 재생하고 오디오/비디오 토글기능 및 재생속도 변경기능을 구현해보겠습니다. 다음은 전체 시연 영상입니다. 먼저 To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video 오디오만 재생 .. 2022. 6. 23.
[Javascript] filter 함수 사용하기 안녕하세요. 자바스크립트의 filter 함수를 사용해보겠습니다. filter() 함수는 배열의 요소들 중에서 조건에 부합하는 모든 요소를 모아서 새로운 배열로 반환하는 함수입니다. filter 함수의 구문은 아래와 같습니다. const newArray = arr.filter(callbackFunction(element, index, array), thisArg); filter 함수의 매개변수는 callbackFunction, 그리고 thisArg 입니다. callbackFunction 에는 3개의 매개변수를 사용할 수 있습니다. - element : 현재 요소 (필수) - index : 요소의 인덱스 (선택) - array : filter 함수를 호출한 배열 (선택) thisArg는 callback을 실.. 2022. 6. 21.
[JavaScript] Full-calendar 사용하기 안녕하세요. 자바스크립트로 full-calendar를 불러오는 방법을 알아보겠습니다. https://fullcalendar.io/docs/initialize-globals Initialize with Script Tags - Docs | FullCalendar It’s possible to manually include the necessary tags in the head of your HTML page and then initialize a calendar via browser globals. You will leverage one of FullCalendar’s prebuilt bundles to do this. Standard Bundle First, obtain the standard fullc.. 2022. 6. 16.
[Javascript] 토글버튼으로 웹 배경 바꾸기 안녕하세요 오늘은 토글버튼으로 웹 배경을 바꾸는 기능을 만들어 보겠습니다. *결과 1. label 태그 태그는 태그를 도와주는 역할입니다. label 태그에 연결된 요소에 바로 영향을 주기 때문에 버튼 편의성을 높여줍니다. input 태그의 id 값과 label 태그의 for 값을 일치시켜 연결해줍니다. 2. 클래서 제어 $('#toggle-box-checkbox').on('change', function(){ if(this.checked){ $('body').addClass('night'); }else{ $('body').removeClass('night'); } }); - 추가 : addClass $( 'h1' ).addClass( 'abc' ); - 제거 : removeClass $( 'h1' )... 2022. 6. 9.
[Javascript] 버튼클릭으로 팝업창 만들기 안녕하세요 이번시간에는 버튼클릭으로 팝업창을 만들어보겠습니다. *결과 1. getElementsByTagName var height=document.getElementsByTagName("body")[0].scrollHeight; getElementsByTagName()는 특정 태그를 가진 모든 요소를 선택합니다. 선택된 요소는 배열 객체로 반환됩니다. 2. jquery.css( propertyName, value ) $("#lay_pop").css("z-index","555"); .css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가합니다. 예제에서는 #lay_pop 요소에 스타일 속성을 추가하여 설정하였습니다. 3. 달러 기호 $ $("#all_body").css("displa.. 2022. 6. 8.

티스토리툴바