본문 바로가기

JavaScript208

[Javascript] 눈 내리기 효과 만들기 안녕하세요 이번 시간에는 웹페이지에서 눈이 내리는 효과를 만들어 보겠습니다. *결과 1. createRadialGradient 이 함수를 이용하여 눈송이의 원형 그라데이션을 지정할 수 있습니다. createRadialGradient( x1, y1, 첫번째 원의 반지름 r1, x2, y2, 두번째 원의 반지름 r2 ) 그라데이션 색은 이후에 addColorStop 함수로 정해줍니다. 2. beginPath 이 함수는 새로운 것을 화면에 그리고 싶을 때 사용하는 함수인데 원형 눈송이를 그릴 것이기 때문에 이후에 arc 함수를 사용합니다. MDN 문서에는 아래와 같이 beginPath()를 설명하고 있습니다. 3. requestAnimationFrame function go(){ window.requestAn.. 2022. 4. 8.
[Javascript] 이메일 형식인지 확인하는 기능 만들기 문자열이 이메일 형식인지 아닌지 확인하는 기능을 만들어보겠습니다. 이때 사용할 정규식은 다음과 같습니다. ^([0-9a-zA-Z_\.-]+)@([0-9a-zA-Z_-]+)(\.[0-9a-zA-Z_-]+){1,2}$ 이제 정규식을 활용해 버튼을 누르면 textarea에 작성한 문자열이 이메일형식인지 확인하는 기능을 만들어봅시다 확인 2022. 4. 7.
[Javascript] 사용자 미디어 디바이스에 접근하여 영상 출력하기 안녕하세요, 이번 포스팅에서는 사용자 미디어 디바이스(카메라, 마이크 등)에 접근하여 웹페이지에 영상을 출력해보려고 합니다. 1. index.html 우선, index.html 파일을 만듭니다. 그리고, index.html 파일에 뒤에서 만들 getUserMedia.js 파일을 임포트 시킵니다. 태그를 배치하여 영상을 출력하려고 합니다. 해당 태그의 id는 'localVideo'로 지정하였습니다. 2. getUserMedia.js 실질적으로 유저의 미디어 디바이스에 접근하여 화면에 출력하는 코드가 작성되어있는 파일입니다. getUserMedia 메서드는 이름에서도 알 수 있듯이 사용자 단말에서 미디어의 스트림을 얻어내는 메서드입니다. 인자로 미디어 제약조건을 받는데요, 코드에서 제약조건으로 'video'.. 2022. 3. 29.
[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.

티스토리툴바