jQuery - contains() - 특정 문자열 요소 모두 선택하기

contains() 지정한 텍스트를 포함하는 모든 요소 선택 구문 jQuery(":contains( text )") text : 찾을 텍스트 문자열, 대소문자 구분 괄호 안의 문자열은 간단한 단어로 쓰거나 따옴표로 묶을 수 있음 사용 예시 특정 문자열 'eunbyeol' 이 포함된 모든 div를 찾아 글씨색을 빨간색으로 변경하고 밑 줄 긋기 tester admin eunbyeol soohyun 실행 화면 참고 jQuery - contains() Selector

• format_list_bulleted Web/Javascript
• · 2023. 4. 28.
• textsms

JS - JSDoc 사용하기 (자바스크립트 문서화 주석 만들기, 설명 툴팁 달기)

Overview 자바스크립트에서 사용자가 정의함 함수들에 대해 자세한 설명을 툴팁으로 표시할 수 있음 문서화 주석의 장점 함수의 아키텍처를 설명할 수 있음 함수의 사용 용도와 매개변수 정보를 쉽게 전달할 수 있음 JSDoc 이란? 자바스크립트용 API 문서 생성기 기본적으로 내장되어 있기 때문에 따로 설치할 필요가 없음 목적은 자바스크립트 응용 프로그램 또는 라이브러리의 API를 문서화하기 위함 일반적으로 문서화하는 코드 바로 앞에 배치 시작은 /** 로 시작하며 종료는 */ 로 끝냄 단, /* 혹은 /***, 그 이후의 별(3개 이상)은 무시되고 블록 주석으로 해석됨 작성한 코드 바로 옆에 툴팁으로 설명을 추가하여 보여주는 것 구문 /** * 설명 * @param {데이터타입} 파라미터명 파라미터설명 ..

• format_list_bulleted Web/Javascript
• · 2023. 4. 25.
• textsms

JS - Math.random() - 유형별 랜덤 숫자 생성하기 (난수, 임의의 수 만들기)

이번 포스팅에서는 여러가지 형태의 난수를 생성하는 방법을 다룹니다. Math.random() 0이상 1 미만의 구간에서 랜덤한 부동소숫점의 난수를 반환해주는 함수 let rnd = Math.random(); console.log(rnd); // 0.38711670788580577 (출력되는 숫자는 각자의 환경에 따라 다름) 랜덤한 정수 생성하기 Math.pow : 제곱을 해주는 함수, 첫번째 인자 : 제곱할 값, 두번째 인자 : 제곱 /* 정수 */ // 0 ~ 10의 n승-1 까지의 정수 // Math.floor( Math.random() * Math.pow(10, n) ) let n = 1; Math.floor( Math.random() * Math.pow(10, n) ) // 0 ~ 9 까지의 정수..

• format_list_bulleted Web/Javascript
• · 2023. 4. 21.
• textsms

JS - 올림(Ceil), 반올림(Round), 내림(Floor), 버림(Trunc) 사용 예시

Math.ceil() - 올림 주어진 숫자보다 크거나 같은 숫자 중 가장 작은 숫자를 정수로 반환 Math.ceil(n); // n : 숫자 Math.ceil(.95); // 1 Math.ceil(4); // 4 Math.ceil(7.004); // 8 Math.ceil(-0.95); // -0 Math.ceil(-4); // -4 Math.ceil(-7.004); // -7 Math.round() - 반올림 입력값을 반올림한 수와 가장 가까운 정수 값을 반환 Math.round(n); // n : 숫자 Math.round(0.9); // 1 Math.round(5.95); // 6 Math.round(5.5); // 6 Math.round(5.05); // 5 Math.round(-5.05); // -..

• format_list_bulleted Web/Javascript
• · 2023. 4. 21.
• textsms

JS - jQuery를 이용한 간단한 사이드바 구현하기 (Sidebar)

Overivew 이번 포스팅에서는 간단한 사이드바의 기능을 하는 HTML을 구현합니다. 기능 구현에만 중점을 두었기 때문에 디자인은 개인이 알아서! jQuery 호출 HTML 구성 설계 사이드바는 왼쪽 영역에 위치함 사이드바 보이기/감추기 버튼을 통해 사이드바를 보이게하고 감추게 하여야 함 본문은 사이드바의 오른쪽에 위치하여야 함 사이드바의 보이기/감추기에 따라 본문의 내용의 위치도 그에 맞게 변경되어야 함 Sidebar Content Hide Sidebar Show Sidebar A CSS 설정 /* 사이드바 영역에 따른 본문 여백 설정 */ .container { margin-left: 200px; } /* 본문에 보여질 예시를 위한 박스 설정 */ .box { position:absolute; di..

• format_list_bulleted Web/Javascript
• · 2023. 4. 21.
• textsms

JS - 이미지를 드래그하여 원하는 위치로 이동하기

이미지 준비 이미지를 테스트하기 위한 파일 및 위치 (http://localhost:3000/img/img.jpg) 위치는 개인에 맞게 설정 기본 구성 html 파일 생성 후 이미지 태그로 이미지 출력 img id : 자바스크립트로 해당 요소 선택을 위함 style : 절대적 X, Y값을 확인하기 위함 + 커서는 손가락 모양으로 변경 draggable : 드래그로 이미지가 파란색 영역으로 선택되지 않기 위함 (전체선택하면 나오는 영역) 마우스 드래그 이벤트 코드 인터넷 검색으로 많은 코드들을 찾았는데 너무 복잡하게 되어있거나, 너무 오래된 레거시 문법들이 많아서 가능한 지식선에서... 최대한 쉽게 정리해보았다. 실행 전체 소스 코드 참고 Mozilla.org - Event.preventDefault() ..

• format_list_bulleted Web/Javascript
• · 2023. 4. 20.
• textsms