자바스프링웹공부(2024)/자바스크립트 (17) 썸네일형 리스트형 2024.08.29.JS - jQuery 사용하기 https://jquery.com/ jQueryWhat is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.jquery.com1. 다운로드 후 저장해서 사용 (다운로드 후 원하는 페이지에 다운로드 주소를 넣으면 됨.)2.CDN 활용하기 (코드 복사하여 원하는 페이지에 붙여서 사용함.* ready() 메서드 활용하기.. 2024.08.28.JS - 날짜 * Date 객체- 날짜 및 시각 정보를 관리하는 객체 - 제공되는 다양한 메서드를 통해 날짜 및 시각 정보 확인 및 처리 가능- new Date() 형식으로 Date 객체 생성 후 메서드 호출을 통해 처리 1.new Date() : 현재 시스템(클라이언트 = PC)의 현재 날짜 및 시각정보를 기준으로 Date 객체 생성 let date1 = new Date(); document.write(date1 + ""); // 화면 : Wed Aug 28 2024 15:56:49 GMT+0900 (한국 표준시) // 세계 날짜 및 시각 표준 표기법으로 출력됨. 2. new date.. 2024.08.27.JS - 카카오우편번호 API 사용하기 카카오우편번호 API 사용하기https://postcode.map.daum.net/guide Daum 우편번호 서비스우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다.postcode.map.daum.net 위의 주소에 가서 스크립트 코드를 복사하여 가지고 온 후에 주소검색 버튼 onclick 함수(openAddr)에 연결 시켜준다. 주소검색창 주소 주소검색 홈페이지에서 조금 아래로 내려가면 속성값을 가지고 올수있게 항목 이름들을 표로 만들어 놨다. 나는 우편코드(zonecode)와 기본주소(address), 건물명(buildingName)만 사용해 보겠다. 2024.08.27.JS - 셀렉트박스 * 셀렉트박스 값 가져오기. 사과 포도 바나나 과일을 선택하세요 사과 딸기 바나나 window.onload = function() { // 전송버튼(submit)이벤트 핸들링 => 해당폼의 onsubmit 속성 활용하여 submit 이벤트로 핸들링 document.fr.onsubmit = function() { // 현재 셀렉트박스 선택항목이 "과일을 선택하세요"일 겨우 // "과일 선택 필수!" 경고창 출력하고 셀렉트 박스에 포커스 요청 // 1. 셀렉트박스 value 속성값이 널스트링("")인지 판별하기 if(document.. 2024.08.26. JS - 익명함수사용, onload 이벤트, 라디오-체크박스 값출력 * 스크립트 코드 실행 시점문제- html 파일내에 있는 img 태그의 1.jpg 사진을 스크립트를 실행하여 2.jpg로 바꾸려고 하는데 실행이 안됨. test3.jsp /* test3_study.js */function myFunction(){ document.getElementById("img1").src = "../images/2.jpg";}문제점 : => 현재 test3.js 파일을 로딩하는 위치가 태그 내이므로 현재 스트립트가 실행되는 시점에는 태그 내의 요소들이 로딩되기 전이다. => 따라서, 해당 요소들에 접근하는 코드사용시 요소에 대한 객체가 없으므로 null 값이 리턴되고 이 객체에 접근하기 위한 코드가 실행 될때 null 값을 통한 접근이 불가능하여 오류 발생함. => img1 객.. 2024.08.14. JS - event [ 대표적인 이벤트 종류 ]1) click : 마우스 클릭, dblclick : 마우스 더블클릭 2) mouseover : 마우스가 대상 위에 위치(= mouseenter 유사) mouseout : 마우스가 대상에서 빠져나감(= mouseleave 유사) 3) focus : 대상이 선택됨(= 포커스가 위치함), blur : 대상 선택이 해제됨(= 포커스 잃음) 4) change : 대상 선택이 해제될 때(포커스 잃음) 대상 요소의 값(value 속성값)이 변경됨 5) load : 대상 요소가 로딩 완료됨, onload : 대상 요소 로딩 해제됨 6) keydown : 키보드의 키 누름, keyup : 키보드의 키 뗌, keypress : 키보드의 키 누름 7) submit : 폼 데이터 전송(su.. 2024.08.14. JS - document 객체 : querySelector(), innerText, innerHTML * querySelector() - 요소가 1개인 대상에 접근(주로 id 선택자) , 단, 요소가 복수개인 대상(class 또는 태그 선택자)도 접근 가능하나 1개의 요소(첫번째 요소)만 리턴됨* querySelectorAll()- 요소가 복수개인 대상에 접근(주로 class 또는 태그 선택자), 복수개의 요소가 NodeList 타입으로 리턴됨(배열처럼 사용)- 두 메서드에 전달하는 파라미터(선택자)에 따라 전달하는 전달인자 형태가 달라짐 1) id 선택자 : 선택자명 앞에 # 기호 붙임(ex. querySelector("#name")) 2) class 선택자 : 선택자명 앞에 . 기호 붙임(ex. querySelectorAll(".names")) 3) 태그 선택자 : 선택자명을 태그명으로 그.. 2024.08.13. JS - history, location, document 객체 - getElementByXX * history 객체- 프로퍼티 : length - 현재 ㅡ라우저창의 history 목록에 있는 항목의 개수, 즉 방문한 사이트 개수저장. ex. console.log(history.length);- 메서드 : back() - 이전페이지 forward() - 다음페이지 go() - 현재 페이지를 기준으로 상대적인 위치에 있는 페이지를 현재 화면으로 불러옴. ex. history.go(1) - 다음페이지 history.go(-1) - 이전페이지 * location 객체- 현재 문서의 URL 주소 정보가 들어있음.- 프로퍼티 : href() - 전체 U.. 이전 1 2 3 다음
