자바스크립트 19

[JavaScript] DOMCountentLoaded 사용하기

안녕하세요. 이번에는 JavaScript의 DOMCountentLoaded 기능에 대하여 알아보겠습니다. 1. DOMCountentLoaded 이 코드를 사용하면 JQuery의 document.ready와 크게 다를 바 없는 성능을 구현할 수 있다. 하지만 ie8이하에서는 지원하지 않기 때문에 본인이 대처해야 하는 환경이 어디까지인지 체크를 해 볼 필요가 있지만, 요즘은 ie8이하의 점유율이 대폭 낮아진 상태라 문제없이 사용할 수 있지 않을까라고 생각한다. window.addEventListener('DOMContentLoaded', function() { }); 제이쿼리를 사용하시는 분이라면 굳이 안 써도 되지만, JavaScript로 구현이 필요한 경우에 사용하시면 됩니다. 감사합니다.

JavaScript 2023.03.24

[JavaScript] Enter 이벤트

안녕하세요. 자바스크립트에서 Enter 이벤트 작성하는 방법입니다. login_pw 아이디를 가진 곳에서 Enter를 클릭하면 이벤트가 발생합니다. keyCode를 이제는 안 쓰는 것으로 알고는 있지만, 아직 사용하는 곳도 있기 때문에 2개다 작성하였습니다. document.getElementById('login_pw').addEventListener('keydown', (e) => { if (e.key == "Enter" || e.keyCode == "13") { // 실행할 코드 user_login(); } }); 감사합니다.

JavaScript 2023.03.22

[JavaScript] includes 함수

안녕하세요. 이번에는 includes 함수에 대해서 알아보겠습니다. includes 함수는 단어 또는 문장에서 본인이 찾고자 하는 단어가 포함되어 있는지를 확인할 수 있습니다. 사용 방식은 아래와 같습니다. text.includes('찾는 단어'); 찾는 단어가 있으면 True, 없으면 False를 반환합니다. 아래 코드는 다른 코드에서 사용하던 코드인데 예시용으로 가져왔습니다. if 문 앞이 엄청 길어 보이지만, 전부 확인할 필요는 없습니다. textContent로 가져온 글자에 '상승'이 포함되어 있으면, #ED3023 색으로 변경 '하강'이 포함되어 있으면, #0096FF 색으로 변경 'NEW"이 포함되어 있으면, #00CD3C 색으로 변경 아무것도 없으면 grey 색으로 변경 한다는 내용입니다. ..

JavaScript 2023.03.18

[JavaScript] Head 태그에 동적으로 추가하는 방법

안녕하세요. JavaScript로 Head 태그에 동적으로 추가하는 방법입니다. sciprt 파일과, css 파일을 추가하는 방법으로 사용하게 되면 head 태그의 맨 마지막에 추가되는 것을 볼 수 있습니다. 1. script head 동적 추가 const script = document.createElement('script'); script.src = '/static/js/test2.js'; script.type = 'text/javascript' document.head.appendChild(script); 2. css head 동적 추가 const css1 = document.createElement('link'); css1.src = '/static/css/youtbeRealChart.css';..

JavaScript 2023.03.17
반응형