자바스크립트 12

[Javascript] 자바스크립트로 Select 옵션 재설정/변경하기

셀렉트(Select) 박스의 옵션을 재설정하고 싶은 경우 자바스크립트나 jQuery를 사용하여 옵션값을 변경할 수 있습니다. 이 글에서는 자바스크립트와 jQuery를 사용하여 Select 옵션값을 변경하는 방법에 대해 살펴보고, 예시를 통해 이를 워드프레스에 응용하는 방법에 대해서도 간단히 살펴봅니다. 자바스크립트로 Select 옵션 재설정/변경하기 Javascript로 셀렉트 박스의 옵션을 비우고 다른 값으로 교체하려는 경우 다음과 같은 코드를 사용할 수 있습니다. var list = ["AB", "BC", "MB", "NB", "NL", "NT", "NS", "NU", "ON", "PE", "QC", "SK", "YT"]; populateCombo(emptyCombo(document.querySele..

자바스크립트: 클래스가 있는지 체크하기

자바스크립트(JavaScript)에서 특정 클래스가 있는 경우에 실행되도록 스크립트를 만들고 싶은 경우에 참고해보세요. 자바스크립트: 클래스가 있는지 체크하기 예를 들어, mobile 클래스가 존재하는 경우에 팝업을 표시하는 경우를 생각해볼 수 있습니다. 그러면 다음과 같은 스크립트를 사용할 수 있습니다. var isMobileVersion = document.getElementsByClassName('mobile'); if (isMobileVersion.length > 0) { // elements with class "mobile" exist } getElementsByClassName는 배열과 유사한 개체(array-like object)인 NodeList를 반환한다고 합니다. 그 길이를 체크하여 ..

자바스크립트를 사용하여 DIV 위치 순서 변경하기 [자체 정리용]

자바스크립트를 사용하여 DIV 위치 순서 변경하기 [자체 정리용] jQuery를 사용하면 쉽게 DIV의 위치를 변경할 수 있습니다. jQuery 대신 자바스크립트를 사용하고 싶은 경우 다음 Statckoverflow 글을 참고할 수 있습니다. Change div order in CSS or javascript (CSS 또는 자바스크립트로 Div 순서 변경) 예시: var content = document.getElementById('FeaturedContent'); var parent = content.parentNode; parent.insertBefore(content, parent.firstChild); DIV에 ID가 지정된 경우 위와 같이 document.getElementById를 사용하면 됩..

자바스크립트와 제이쿼리 (Javascript vs. jQuery)

가끔 방문하는 네이버 카페에서 어떤 분이 올린 댓글인데요. 자바스크립트와 제이쿼리를 비유로 비교적 잘 설명한 것 같아서 갈무리해보았습니다. 책 제목에 '제이쿼리'가 들어간 책은 '자바스크립트'를 공부하는데 별 도움이 되지 않습니다. 책 제목에 '여행 회화' 같은게 붙은 책으로 '영어'를 공부 하려고 하는거랑 비슷한거라고 생각하시면 됩니다. [출처] 자바스크립트 다들 어떻게 공부하셨나요? //책 추천 해주시면 감사하겠습니다 (하드코딩하는사람들) |작성자 박긍정11 jQuery는 사이트 속도에도 부정적인 영향을 미치기 때문에 가급적 javascript를 배워서 사용해보려고 3개월 전에 유데미(Udemy)에서 자바스크립트 강의를 하나 구입했지만 아직 제대로 시작도 못하고 있습니다. 급한 일이 끝나면 하루에 3..

Javascript로 문자열의 일부를 변경하는 방법 [자체 정리용]

자바스트립트를 사용하여 문자열의 일부를 변경하는 방법. 예시:Rating: **** Javascirpt:var elements = document.getElementsByClassName("data rating"); for (var i = 0, l = elements.length; i < l; i++) { elements[i].innerHTML = elements[i].innerHTML.replace(/\*/g, 'star'); } // 출처: https://stackoverflow.com/questions/18824371/replace-string-of-text-javascript JSFiddle 요소(element)가 하나만 있는 경우 확실한 경우var elementToAdjust = document..

IT & 기타 2018.09.22

자바스크립트를 사용하여 새 창에서 열도록 target 속성에 _blank 추가하기 [자체 정리용]

jQuery를 사용하면 target="_blank"를 추가하는 것이 매우 간단하다. 가령 다음 스크립트를 사용하면 내부 링크(내 사이트 링크)를 제외한 외부 링크에 target="_blank"를 추가할 수 있다.$('a[href^="http://"]').not('a[href*=gusdecool]').attr('target','_blank'); 또는$('a[href^=http]:not([href^=http://www.gusdecool.com],[href^=http://gusdecool.com])') .add('a[href^=www]:not([href^=www.gusdecool.com])') .attr('target','_blank'); // 출처: https://stackoverflow.com/questi..

Javascript를 사용하여 html의 lang 속성 감지하기 [자체 정리용]

Javascript에서 html의 언어(lang) 속성 정보를 가져오려는 경우document.documentElement.lang 다음과 같은 코드를 사용할 수도 있겠다. (테스트는 안 해 봄)document.getElementsByTagName('html')[0].getAttribute('lang'); 네임스페이스 추가...document.getElementsByTagName('html')[0].getAttribute('xml:lang'); 참고: https://stackoverflow.com/questions/949341/how-to-obtain-lang-attribute-in-html-using-javascript jQuery에서는 :lang() 셀렉터를 활용하면 될 것 같다. 참고: https:/..

IT & 기타 2018.09.18

자바스크립트로 텍스트 변경하기 II (자체 정리용)

자바스크립트를 사용하여 특정 클래스(class)를 가진 모든 텍스트를 일괄 변경하는 방법: var elements = document.querySelectorAll('.something'); for ( var i=elements.length; i--; ) { elements[i].textContent = "원하는 문구"; } 그러면 something을 클래스로 가진 모든 텍스트가 변경된다. 블라블라 살라살라 블라블라 살라살라 jQuery를 사용하면 더 간단하다. jQuery를 사용하여 텍스트 변경하기 참고: javascript로 텍스트 변경하기 I

javascript로 텍스트 변경하기 (자체 정리용)

자바스크립트로 텍스트를 변경하는 방법 예시입니다. 목차 자바스크립트로 텍스트 변경하기 html 소스 Test - 1 Test - 2 Test - 3 "Test - 3"을 "Test - 5"로 변경 var string = document.getElementsByTagName("h2")[2].innerHTML; var replacedString = string.replace("Test - 3", "Test - 5"); document.getElementsByTagName("h2")[2].innerHTML = replacedString; "Microsoft"를 "W3Schools"로 변경 var str = "Visit Microsoft!"; var res = str.replace("Microsoft", "W3..

IT & 기타 2018.02.04