프로그래밍/JavaScript50 JavaScript 색상값 변경 (hex -> rgb, rgba) 색상값을 표현하는 다양한 방법 중 hex(16진수)로 된 값을 rgb(x, x, x) 혹은 rgba(x, x, x, a)형태로 변경해주는 함수입니다. function hexToRgb(hex, alpha) { let r = parseInt(hex.slice(1, 3), 16), g = parseInt(hex.slice(3, 5), 16), b = parseInt(hex.slice(5, 7), 16); if (0 2022. 7. 10. HTML 이벤트 처리하는 3가지 방식 HTML 태그에 달리는 이벤트를 처리하는 3가지 방법에 대해서 설명드립니다. HTML DOM element addEventListener함수 이용 HTML DOM element 속성 이용 HTML 속성 이용 아래의 예제는 HTML button의 onclick 이벤트를 예제로 설명드립니다. HTML DOM element addEventListener함수 이용 가장 권장되는 방식입니다. 기존 이벤트를 유지하고, 이벤트를 추가하는 방식으로 진행됩니다. 실행이 될 때 기존에 추가된 이벤트들이 실행되고, 여기서 추가된 이벤트가 실행 됩니다. 이벤트 선언하는 방식은 이벤트를 연결해줄 DOM객체를 얻어온 후 addEventListener함수를 이용해서 해당 이벤트명과 함수를 연결해 줍니다. ※ 이벤트명은 보통 "on.. 2022. 7. 10. JavaScript 태그안의 내용 가져오기, 변경하기 JavaScript로 html 태그로 둘러싸인 내용을 가져오거나, 변경하는 방법입니다. 아래는 태그안의 내용을 가져오거나, 변경하기 위해 사용되는 속성들입니다. 각 각의 요소에 대한 간략한 설명은 아래와 같습니다. innerText: 순수 텍스트 처리를 합니다. textContent: 순수 텍스트 처리를 하지만 줄 바꿈은 유지 됩니다. innerHTML: html 태그를 유지하며 처리 됩니다. 위 요소들에 대한 내용 가져오기, 변경하기에 대해서 아래에 예제를 나열하니, 사용 목적에 맞게 적절하게 사용하시기 바랍니다. 2022. 6. 29. jQuery $(document).ready 대체 jQuery의 $(document).ready(function() {...})을 대체할 수 있는 vanilla JavaScript구문은 아래와 같습니다. jQuery $(document).ready() 원문 $(document).ready(function() { // ... }) Vanilla js 대체 구문 document.addEventListener("DOMContentLoaded", () => { // ... }) 2022. 6. 27. Javascript 요소 가져오기 HTML DOM Document의 요소를 가져오는 함수들의 정의와 사용법에 대해서 소개합니다. 관련 함수는 아래와 같습니다. getElementById getElementsByClassName getElementsByName getElementsByTagName querySelector querySelectorAll getElementById('아이디') 함수의 인자와 아이디가 일치하는 요소를 가져옵니다. querySelector('#아이디')로 대체 가능합니다. ('#'을 꼭 붙여줍니다.) 꾸션 document.getElementById('blogName') document.querySelect('#blogName') getElementsByClassName('클래스명') 함수의 인자와 클래스가 일치하.. 2022. 6. 27. jQuery 접근자 기본 접근자 // html 태그 $('태그명') // $('h2') // id $('#아이디명') // class $('.클래스명') // name 어트리뷰트 $('input[name=이름]') 고급 예제 // 모든 요소 $("*") // 현재 요소 $(this) // class="intro"가 설정된 모든 p태그 요소 $("p.intro") // 첫 번째 p태그 요소 $("p:first") // 첫 번째 ul태그의 첫 번째 li태그 요소 $("ul li:first") // 모든 ul태그의 첫 번째 li태그 요소 $("ul li:first-child") // href어트리뷰트를 갖는 모든 요소 $("[href]") // a태그의 target이 '_blank'로 설정된 모든 요소 $("a[target='_.. 2022. 6. 22. 이전 1 ··· 4 5 6 7 8 9 다음 반응형
