본문 바로가기

JavaScript169

[JavaScript] Select 메뉴 만들기 안녕하세요 오늘은 셀렉트 메뉴를 만들어보겠습니다. 메뉴를 클릭하면 선택할 수 있는 메뉴들이 하단에 나열되고 해당 메뉴를 클릭하면 셀렉트 박스에 설정되는 것을 확인 할 수 있습니다. *결과 1. closest 함수 $(selector).closest(selector)에서 closest 함수는 셀렉터로 잡히는 상위 요소중 가장 근접한 하나를 반환합니다. var parent = $(this).closest('.select'); 2. hasClass 함수 .hasClass() 메서드는 선택한 요소에 클래스가 있는지 여부를 true,false로 반환합니다. if ( ! parent.hasClass('is-open')) 3. addClass 함수 .addClass() 메서드는 선택한 요소의 클래스를 추가합니다. p.. 2022. 3. 27.
[JavaScript] 모달창 띄우기 모달창이란? 모달창(Modal Window)은 사용자 인터페이스 디자인 개념에서 자식 윈도에서 부모 윈도로 돌아가기 전에 사용자의 상호동작을 요구하는 창을 말한다. 그래서 응용 프로그램의 주 창의 작업 흐름을 방해한다. 전체 코드입니다. 모달창 예제 모달창 예제 입니다. 모달 X 1. 첫번쨰 공지사항 2. 두번째 공지사항 3. 세번째 공지사항 4. 네번째 공지사항 x버튼을 누르면 modalOff()메서드를 실행시켜서 모달창의 display를 none으로 바꿔줍니다. 2022. 3. 24.
[JavaScript] 체크박스 전체 선택하기 예제 안녕하세요 오늘은 체크박스 전체선택 기능에 대해서 알아보겠습니다. *결과 1. type = "checkbox" 동의 1-1 기본적으로 위 코드로 체크박스를 화면에 나타낼 수 있고 클릭 명령을 받아서 체크 여부를 보여줍니다. 2. 3. function($){}(jQuery) function($){}(jQuery) 형태는 즉시 실행함수입니다. Immediately-invoked function expression (function ($) { $.fn.cbFamily = function (children) { return this.each(function () { var $this = $(this); var els; if ($.isFunction(children)) { els = children.call($t.. 2022. 3. 15.
[JavaScript] 현재 위치 받아오기 자바스크립트에서 user의 위치(geolocation)을 주는 함수를 사용해서 사용자의 위치를 받아오는 코드를 짜보겠습니다. navigator.geolocation.getCurrentPosition() 메서드를 사용하면 브라우저에서 위치 좌표를 리턴합니다. 위에서 보이는 것과 같이 getCurrentPosition메서드는 인자 2개를 필요로 합니다. 하나는 성공했을 때 실행할 함수이고, 나머지 하나는 에러가 발생했을 때 실행할 함수입니다. 이렇게 코드로 성공했을 때와 실패했을 때 실행할 콜백함수를 작성해 줍니다. function onGeoOk(position){ const lat = position.coords.latitude; const lng = position.coords.longitude; con.. 2022. 3. 12.
[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] 국가별 시간 띄우기 안녕하세요 오늘은 국가별 시간을 웹에서 볼 수 있는 기능을 포스팅해보겠습니다. *결과 1. $(document).ready(function () {}); 먼저 살펴봐야 할 개념은 $(document).ready(function () {}); 입니다. 이 코드는 document가 준비 완료 되면 파라미터에서 정의된 function을 실행하라는 의미입니다. jQuery에서 자주 만나게 되는 코드입니다. 다음으로 li 태그와 removeClass, addClass 메서드를 살펴보겠습니다. 2. li 태그 li태그의 정의를 보면 The tag defines a list item. 즉, 목록들을 정의하는 태그라는 것을 알 수 있습니다. 국가명들이 목록으로 나열될 수 있도록 도와주는 태그인 것이죠. 3. remov.. 2022. 3. 3.
[JavaScript]화면 스크롤시 이미지 회전시키기 스크롤시 화면중앙에 고정된 이미지가 회전되도록 해보겠습니다. 스틱코드에서 즐겨찾기해 사용해보세요. https://stickode.com/detail.html?no=2705 스틱코드 stickode.com 단계별로 진행해 보겠습니다. html -> css-> script 작성 순으로 진행 로 화면구조를 만듭니다. 을 사용해 배경이미지 노랑색배경 , 흰색배경을 만들고 div classs wrapper 안에 담긴 고양이 이미지를 만든다. // 화면전체를 감싸는 div입니다. // 고양이미지 id를 reload라고 설정합니다. 로 스타일을 입힙니다. 배경은 두개로 구성되어있고, 첫번째 화면은 노랑색 /두번째화면은 흰색입니다. 다음으로 가운데 넣을 고양이 이미지의 가로세로사이즈를 설.. 2022. 1. 3.
[JavaScript] 마우스를 따라다니는 원 만들기 이번시간에는 [JavaScript] 를 사용해 마우스를 따라다니는 원을 만들어보겠습니다. 스틱코드를 즐겨찾기해주세요. https://stickode.com/detail.html?no=2671 스틱코드 stickode.com Html안에 javascript와 css를 구현해주었습니다. 마우스가 원을 따라다니기 위해서는 마우스의 좌표를 알아야합니다. 마우스의 좌표값은 clientX 와 clientY 를 이용해 알 수 있습니다. clientX, clientY는 브라우저 window의 좌표값을 전달합니다.(좌측상단기준) 페이지에서 떨어져있는 좌표값 pageX, pageY와는 다릅니다. 1. 마우스가 움직일때마다의 좌표값은 mousemove event를 .. 2021. 12. 23.
[JavaScript] fetch api를 사용해서 ajax 통신하기 안녕하세요 :) 오늘은 브라우저에서 제공하는 fetch API 를 사용해서 서버와 통신하는 기능을 실습해 보겠습니다. fetch API 란? 웹개발을 할때, AJAX 라는 비동기적인 통신 방법을 통해 클라이언트 쪽에서 서버에 추가 정보를 요청하여 가져올수 있게 합니다. fetch API는그런 AJAX 통신 기술의 일종으로 별도의 라이브러리를 추가하지 않더라도 최신 브라우저에 내장되어 있기 때문에, 함수를 JavaScript에서 호출하는 것으로 손쉽게 사용 가능합니다. fetch() 사용법 fetch() 함수는 2개의 인자를 받습니다. fetch(url, [options]) url (필수) : 접근하고자 하는 url [options] : 선택 매개변수 첫번째 인자인 url 은 반드시 작성을 해줘야 합니다... 2021. 12. 22.

티스토리툴바