javascript33 [JavaScript] find 함수에 대해 알아보고 네이버지도 api 에서 사용해보기 안녕하세요. 오늘은 자바스크립트의 find 함수에 대해 알아보고 네이버지도 api 에서 사용해보겠습니다. find() 함수는 배열 내에서 조건을 만족하는 첫번째 요소의 값을 찾아서 반환하는 함수입니다. 조건을 만족하는 요소가 없다면 undefined 를 반환합니다. find 함수의 구문은 아래와 같습니다. arr.find(callbackFunction(element, index, array), thisArg) find 함수의 매개변수는 callbackFunction, 그리고 thisArg 입니다. callbackFunction 에는 3개의 매개변수를 사용할 수 있습니다. - element : 현재 요소 (필수) - index : 요소의 인덱스 (선택) - array : find 함수를 호출한 배열 (선택.. 2022. 7. 21. [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] 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. [HTML] Progress step 만들기 오늘은 회원가입 등 다양한 곳에서 사용 될 수 있는 Progress Step 을 구현해보도록 하겠습니다. 1 2 3 4 Prev Next const progress = document.getElementById("progress"); const prev = document.getElementById("prev"); const next = document.getElementById("next"); const circles = document.querySelectorAll(".circle"); let currentActive = 1; next.addEventListener("click", () => { currentActive++; if (currentActive > circles.length) { curr.. 2022. 6. 19. [HTML / CSS] 범위 슬라이더 (range slider) 사용해보기 오늘은 range slider 를 사용해보겠습니다. 먼저 가장 기본적인 형태를 만들어보겠습니다. 태그의 type 속성을 "range" 로 설정하면 아래와 같은 형태의 range slider 가 만들어집니다. 이제 css 를 입혀 보겠습니다. Value: type 이 "range" 이고, id 가 "myRange" 이며 class명이 "slider"인 엘리먼트를 만듭니다. 최댓값과 최솟값을 각각 1, 100으로 지정하고, 초기값은 100으로 설정합니다. 그리고 class명이 "slidecontainer"인 태그로 감싸줍니다. 그리고 다음과 같은 css 코드를 작성합니다. body { margin: 0 auto; width: 50%; } .slidecontainer { width: 100%; margin-t.. 2022. 5. 23. [Javascript] Kakao 지도 Javascript API 를 사용해서 지도 표시 및 마커 찍기 안녕하세요 오늘은 카카오 지도 api 를 사용해서 지도를 띄우고 마커를 찍어보겠습니다. https://apis.map.kakao.com/web/guide/ Kakao 지도 API 페이지에 들어가서 안드로이드, 웹, iOS 중 웹을 선택합니다. Kakao 지도 Javscript API 는 키 발급을 받아야 사용할 수 있습니다. 그리고 키를 발급받기 위해서는 카카오 계정이 필요합니다. 카카오 개발자사이트 (https://developers.kakao.com/) 에 접속해서 로그인 또는 회원가입을 합니다. '내 어플리케이션' 메뉴에 들어가서 '애플리케이션 추가하기'를 선택합니다. 앱 아이콘(선택), 앱 이름(필수), 사업자명(필수) 를 설정하고 저장을 누릅니다. 이렇게 어플리케이션이 추가된 것을 확인하실 수.. 2022. 4. 29. [JavaScript] 이미지 드래그해서 옮기기 이번시간에는 이미지를 드래그해서 옮기는 예제를 만들어 보겠습니다. 하단 스틱코드를 즐겨찾기해주세요! https://stickode.com/detail.html?no=2794 https://stickode.com/detail.html?no=2794 stickode.com 이미지 예시입니다. 이미지를 마우스로 클릭하면 드래그 해서 이동할 수 있습니다. https://www.w3schools.com/html/html5_draganddrop.asp 참고사이트 지원하는 브라우저 버전을 확인하고 사용하시길 바랍니다. 처음 이미지가 만들어질 곳을 정합니다. 왼쪽에서 50, 화면상단에서 50 px 만큼의 위치에 이미지를 놓아보겠습니다. // 넣고싶은 이미지를 넣어줍니다. 스티코드를 활용해서 이미지를 드.. 2022. 3. 5. [JavaScript]화면 스크롤시 이미지 회전시키기 스크롤시 화면중앙에 고정된 이미지가 회전되도록 해보겠습니다. 스틱코드에서 즐겨찾기해 사용해보세요. https://stickode.com/detail.html?no=2705 스틱코드 stickode.com 단계별로 진행해 보겠습니다. html -> css-> script 작성 순으로 진행 로 화면구조를 만듭니다. 을 사용해 배경이미지 노랑색배경 , 흰색배경을 만들고 div classs wrapper 안에 담긴 고양이 이미지를 만든다. // 화면전체를 감싸는 div입니다. // 고양이미지 id를 reload라고 설정합니다. 로 스타일을 입힙니다. 배경은 두개로 구성되어있고, 첫번째 화면은 노랑색 /두번째화면은 흰색입니다. 다음으로 가운데 넣을 고양이 이미지의 가로세로사이즈를 설.. 2022. 1. 3. 이전 1 2 3 4 다음
