Devel/javascript(7)
-
querySelector는 CSS 선택자를 사용하여 하위 input, div, table, p 등 다양한 요소에 접근
1. 자식 요소 선택 div 요소의 모든 자식 input 요소 선택: table 요소의 첫 번째 자식 p 요소 선택: 2. 후손 요소 선택 div 요소의 모든 후손 input 요소 선택: table 요소의 모든 후손 p 요소 선택: 3. 형제 요소 선택 div 요소의 바로 다음 형제 p 요소 선택: input 요소의 바로 이전 형제 span 요소 선택: 4. CSS 선택자 조합 div 요소 안에 있는 class가 my-class인 input 요소 선택: table 요소 안에 있는 id가 my-id인 p 요소 선택 참고 자료: MDN Web Docs - CSS Selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors: https:/..
2024.02.07 -
getElementById, getElementByClassName, querySelector 예외 처리 방법
1. getElementById getElementById 메서드는 존재하지 않는 ID 값을 전달하면 null 값을 반환합니다. 따라서 다음과 같이 예외 처리를 수행할 수 있습니다. const element = document.getElementById("my-element"); if (element === null) { // 존재하지 않는 ID입니다. console.error("엘리먼트를 찾을 수 없습니다."); } else { // 엘리먼트가 존재합니다. // ... } 2. getElementsByClassName getElementsByClassName 메서드는 존재하지 않는 클래스 이름을 전달하면 빈 배열을 반환합니다. 따라서 다음과 같이 예외 처리를 수행할 수 있습니다. const elemen..
2024.02.04 -
[JavaScript] GET/POST 값 넘기기 예제
안녕하세요 이번 시간에는 자바스크립트 코드를 활용해서 get/post 방식으로 데이터를 보내는 방법을 알아보려 합니다. 보통은 아래와 같이 html 안에서 form 태그 안에 input 태그를 넣어서 전송하는 방법이 주로 쓰이는데요. 회원가입 아이디: 비밀번호: 같은 방식을 자바스크립트 코드를 통해서도 전송할 수 있습니다. 이렇게 구현할 경우 데이터를 보내는 기능을 함수화하여 재사용성을 높일 수도 있고, 클릭한 ui에 따라 데이터를 다르게 전송할 수도 있습니다. 특히 서버에서 받아온 데이터를 활용하여 자바스크립트로 동적인 ui를 표시하고, 이 각각의 ui를 클릭하거나 할 때 별개의 get/post 이벤트를 넣고 싶은 경우 유용하게 활용될 수 있습니다. 예를 들어 서버에서 아래와 같은 데이터를 받아서 자바..
2024.01.24 -
[JavaScript] 화면인쇄 2
ㅇ 단순히 화면에 보여지는 그대로 인쇄 화면의 어느 곳이든 아래의 링크를 넣어주세요 인쇄하기 저의 경우엔 테크노트로 홈페이지와 함께 웹발주시스템을 구성해 사용 중인데요 이 때 기간별 거래내역 등을 글목록을 활용해서 보여주고 있거든요. 그러다 보니 거래처에서 이 내용을 프린트하려면 반드시 필요한 기능이 글목록 인쇄 기능이어서.. 이런저런 궁리를 하다가 막히던 찰나.. DIV를 활용하면 되겠다 싶어 적용했는데 아주 잘되더라구요. 검색을 하다가 저처럼 글목록 인쇄를 원하시는 분들이 더러 있는 걸 알게 되서 이렇게 팁을 올려드립니다. DIV를 활용하여 인쇄하기의 좋은 점! 1. 여기 저기 설정을 손 볼 필요가 없고, div로 특정영역을 묶기만 하면 되니 적용 방법이 정말 간단하죠 2. 웹페이지를 인쇄할 때면 상..
2024.01.24 -
출력값 확인하는 방법
출처: https://statuscode.tistory.com/71 [Status Code:티스토리] JavaScript에서 데이터 출력하기 JavaScript를 사용하면 웹 페이지에 동적으로 내용을 추가하거나 변경할 수 있습니다. 이 글에서는 다양한 방법으로 사용자에게 정보를 제공하는 방법을 소개합니다. 1. document.write() 사용하기 document.write() 메서드는 HTML 페이지가 로드될 때 직접 문서에 문자열을 쓰는 데 사용됩니다. 예제: document.write("Hello, World!"); 2. innerHTML 사용하기 innerHTML 속성을 사용하면 특정 HTML 요소의 내부 HTML을 가져오거나 설정할 수 있습니다. 예제: document.getElementByI..
2024.01.24 -
[JavaScript] self.close() 경고창 안뜨게 닫는 방법
self.close() 를 하면 alarm 이 떠서 확인을 하게 되는데.. 이것도 싫을 때가 있다. 그 경우 아래의 트릭이 유용하다. window.open("about:blank", "_self").close(); 자식 창에서 부모창을 이렇게 닫을 때, opener.open("about:blank", "_self").close(); https://kwonyang.tistory.com/12
2024.01.24