웹 개발/JavaScript (19) 썸네일형 리스트형 [Web_JavaScript] 19 실습(jQuery 체크박스(1)) - 전체 동의 체크박스 전체 동의 서비스 이용약관 동의 정보 수집 동의 마케팅 수신 동의 실습(jQuery 체크박스(2)) - 문제 // 하나의 약관이라도 해제가 된다면 전체 동의 체크 해제 // 각 항목이 모두 체크되면 전체 동의 체크 - 코드 전체 동의 서비스 이용약관 동의 정보 수집 동의 마케팅 수신 동의 실습(JavaScript를 jQuery로 변경) 1. [Web_JavaScript] 13의 task01.js 변경 let $tempTr; let tempText; function confirm(){ // const input = document.getElementById("input").value; const input = $("#input").val(); // .. [Web_JavaScript] 18 실습(jQuery 이벤트) - 기본 코드 커피 케이크 마카롱 휘낭시에 에그타르트 아이스크림 스무디 멘보샤 앙버터 레쓰비 눌러보세요! 1. show() $ul.show(); - 결과 : 결과1만 출력됨 2. hide() $ul.hide(); - 결과 : 결과1에서 {눌러보세요!} 클릭 시 결과2 출력 3. toggle() $ul.toggle(2000); - 결과 : 결과1에서 {눌러보세요!} 클릭 시 toggle 동작처럼 2초동안 진행되어 결과2 출력(반대도 적용) 4. fadeIn() $ul.fadeIn(2000); - 결과 : 2초 안에 출력 텍스트 fadeIn 5. fadeOut() $ul.fadeOut(2000); - 결과 : 2초 안에 출력 텍스트 fadeOut 6. slideDown() $ul... [Web_JavaScript] 17 ● jQuery - 요소들을 선택하는 강력한 방법 제공 및 선택된 요소들을 효율적으로 제어할 수 있는 자바스크립트 라이브러리이다. ● jQuery 기본 문법 $("선택자") - 아이디: # - 클래스: . - 속성: 태그명[속성명=속성값] - 태그: 태그명 ● 값 가져오기 $("선택자").val(); $("선택자").text(); ● 값 수정하기 $("선택자").val("값"); $("선택자").text("값"); ● 반복문 1. $.each(iterator, function(index, item){}); 2. iterator.each(function(index, item){}); - jQuery를 사용하면, 순수 Javascript에 비해 속도가 느려진다. - 하지만 간결한 문법으로 인해 개발 속도 증.. [Web_JavaScript] 16 ● location 객체 - 현재 브라우저에 표시된 HTML문서의 주소를 얻거나, 브라우저에 새 문서를 불러올 때 사용할 수 있다. - location 객체의 프로퍼티와 메소드를 이용하면, 현재 문서의 URL 주소를 다양하게 해석하여 처리할 수 있게 된다. 1. href - 페이지의 URL 전체 정보 반환. URL을 지정하여 페이지 이동 가능하다. 2. pathname - URL 경로부분의 정보를 반환한다. 3. port - 포트번호를 반환한다. 4. reload() - 새로 고침 5. assign() - 현재 URL을 지정한 URL로 바꿔서 페이지 이동 6. replace() - 현재 URL을 지정한 URL로 바꾸고 이전 페이지로 돌아갈 수 없게 한다. ● history 객체 - 브라우저의 히스토리 정.. [Web_JavaScript] 15 ● 브라우저 객체 모델(BOM) - 자바스크립트를 이용하면 브라우저의 정보에 접근하거나 브라우저의 여러 기능들을 제어할 수 있다. - 이 때 사용할 수 있는 객체 모델을 브라우저 객체 모델(BOM)이라고 한다. - 브라우저 객체 모델은 문서 객체 모델(DOM)과 달리 W3C의 표준 객체 모델은 아니지만 자바스크립트가 브라우저의 기능적인 요소들을 직접 제어하고 관리할 수 있는 방법을 제공해준다. ● window 객체 - 웹 브라우저의 창(window)을 나타내는 객체로, 대부분의 웹 브라우저에서 지원한다. - 자바스크립트의 모든 객체, 전역 함수, 전역 변수들은 자동으로 window 객체의 프로퍼티가 된다. ● window.onload = function(){} - 스크립트 언어는 위에서 아래로 해석되기 .. [Web_JavaScript] 14 실습(DOM 정리) - 아래 이미지처럼 출력되는 프로그램 1. css * { margin: 30px 0; font-family: 'Black Han Sans'; } fieldset { border-style: dashed none none none; text-align: center; border-top-color: #ab47bc; border-top-width: 10px; width: 50%; margin: 10px auto; font-size: 3em; } p { font-family: 'Noto Sans KR'; font-size: 2rem; margin-bottom: 100px; } input[type='text'] { width: 50%; border-style: none none solid n.. [Web_JavaScript] 13 실습(event) - 첨부파일 썸네일 실습(DOM 정리) - 아래 이미지처럼 출력되는 프로그램 1. css body { font-family: 'Jua', sans-serif; font-size: 1.5rem; } table{ width: 30%; text-align: center; margin: 30px auto; } fieldset{ text-align: center; width: 25.5%; margin: 0 auto; } thead{ background-color: #fff9c4; } 2. html 요금표 구분 요금 아동 무료 청소년 2000원 성인 5000원 구분 확인 3. js let tempTr; let tempText; function confirm() { const input = docu.. [Web_JavaScript] 12 ● 객체를 동적으로 생성, 삽입, 삭제 - DOM 트리에 동적으로 객체를 삽입할 수 있다. 1. createElement("태그명") : 생성 2. appendChild("태그객체") : 삽입 3. removeChild("태그객체") : 삭제 실습(DOM) 1. 객체의 동적 생성, 삽입, 삭제 DOM 트리에 동적으로 객체를 삽입할 수 있다. createElement("태그명"), appendChild("태그객체"), removeChild("태그객체") 위 3개의 메소드를 이용해서 새로운 객체를 생성, 삽입, 삭제한다. DIV 생성 실습(event(1)) - 클릭 이벤트 CSS 스타일 동적 변경 나비가 날고 있어요. 실습(event(2)) - 포커스 이벤트 포커스 이벤트 이전 1 2 3 다음
