JavaScript4 [Javascript] innerHTML, innerText, textContent 차이점 예제 포함 innerHTML vs innerText vs textContent Javascript에서 Node 또는 Element의 텍스트값을 읽어오거나 설정할 때 innerHTML, innerText, textContent 속성을 사용하게 됩니다. 그런데 여기서 문제는, 어떤 상황에서 어떤 것을 사용하느냐입니다. 왜냐하면 각각이 가져오거나 수정하는 내용에는 차이가 있기 때문입니다. 헷갈리지만 가장 기본적인 내용 중 하나이니 예제로 알아보겠습니다! html body 부분이 아래와 같이 적혀 있다고 했을 때 세 가지를 통해 각각 어떤 값이 가져와지는지 보겠습니다. Hello World innerHTML innerHTML 속성은 'Element'의 속성으로, Element 내부에 있는 HTML 또는 XML 마크업 내용.. 2023. 6. 26. Javascript AJAX 예제, 비동기 데이터 불러오기 (전기자동차 데이터 분석 예제) 이번 예제에서는 자바스크립트 AJAX 예제를 통해 비동기 통신을 활용하기 위한 코드를 알아보겠습니다. 미국 워싱턴 주의 전기차 등록 현황에 대한 데이터 셋 'eleclist.xml'을 다운로드해서 예제에 사용하였습니다! 필요하시면 댓글로 말씀 주세요. (xml 파일 출처 : data.gov) 간단하게 비동기 통신에 대한 개념은 이전 포스트를 참고해 주세요 : Javascript: 비전공자도 쉽게 이해하는 AJAX 개념 정리 AJAX ajax : Asynchronous Javascript and Xml ajax를 사용하면 서버에 요청한 후, 페이지를 다시 로딩하지 않고 일부를 업데이트할 수 있습니다. 비동기 요청으로 새로고침(페이지 로딩)이 다시 되지 않았다 joy-home.tistory.com 그럼 오늘.. 2023. 6. 21. Javascript: 비전공자도 쉽게 이해하는 AJAX 개념 정리 AJAX ajax : Asynchronous Javascript and Xml ajax를 사용하면 서버에 요청한 후, 페이지를 다시 로딩하지 않고 일부를 업데이트할 수 있습니다. 비동기 요청으로 새로고침(페이지 로딩)이 다시 되지 않았다는 말은 주소창도 그대로 있고, 화면의 특정 부분만 바뀐다는 것입니다! 응답을 기다리지 않고 다음 명령 수행 (스크립트 안에서 무언가 요청을 하면 응답이 올 때까지 기다려야 했는데 ajax는 요청 후 자기 할 일 함!) 실생활 ajax 예시도 몇 가지 정리해 봤습니다: 페이스북 게시물에 좋아요를 누르거나 댓글을 다는 것! (페이지 전체를 로딩하는 것이 아님) 구글/네이버 검색할 때 검색창에 입력하면서 추천 검색어가 뜨는 것 클라이언트가 요청하고 서버가 응답할 때 문서가 아.. 2023. 6. 15. Javascript 체크박스 전체 선택 / 하나라도 해제되면 자동으로 전체선택 해제 방법 JS 체크박스 여러개가 있고 '전체선택' 체크박스도 있는 예제로 아래의 기능들을 구현하는 방법을 알아보겠습니다. 체크박스 중 하나라도 선택 해제가 되면 자동으로 전체선택 박스도 해제하는 방법 '전체선택' 체크박스 외의 박스들이 모두 선택되면 자동으로 전체선택 박스도 체크되게 하는 방법 단, 제가 구현한 코드에서는 onclick='' 기능을 사용해서 체크박스를 선택한 후에 아래에 있는 '선택' 버튼을 누르면 실행되도록 구현되어 있습니다! 아래 사진처럼 해당되는 칸에 색상이 뜨도록 되어 있습니다. 원래 기능은 거기까지였는데, 4개 모두 선택되었을 때 전체선택까지 자동으로 선택되도록 하는 기능과 자동으로 해제되도록 하는 기능도 궁금해서 이것저것 시도해보다가 드디어 찾았습니다! 예제의 HTML 본문 코드 우선,.. 2023. 6. 14. 이전 1 다음
