JavaScript24 3월 23일 (1) 웹 사이트 따라서 만들기 따라서 만드는 웹사이트 책 예제 변형해서 만든 버전 웹 사이트 사진화면 부분 자바스크립트로 슬라이드 자동으로 넘어가게 만들기let current = 0; showSlides(); function showSlides() { let slides = document.querySelectorAll("#slides > img"); for(let i = 0; i slides.length) current = 1; slides[current - 1].style.display = "block"; setTimeout(showS.. 2023. 3. 23. 3월 21일 (2) JavaScript - jQurey 요소 추가, 속성값 가져오기/ 변경하기 + 메서드 체이닝(Method Chaining) 기능들이 연결된 것처럼 연속적으로 처리된다. 동일한 요소에 여러 명령을 차례로 실행할 수 있는 연결 기술 기존명령 + .새메서드() + .새메서드() + ....... $("선택자").css("color", "red").slideUp().slideDown(); 3. 형제 요소 선택 $("선택자").siblings() : 모든 동일 계층 요소 $("선택자").prev() : 선택자 이전요소(하나) 선택요소 위쪽 $("선택자").prevAll() :이전의 모든 요소 $("선택자").prevUntil("지정요소") : 선택자와 지정요소 사이의 모든 요소 (선택자와 지정요소 제외) $("선택자").next() : 선택자 요소의 다음 요소(하나) 선택요소 아래쪽 $.. 2023. 3. 21. 3월 21일 (1) JavaScript - jQurey 선택자(기본, 조합, 관계) 어제 이어서 slidetoggle 예제 수정 부분 $("#flip2").click(function () { $("#p2").slideToggle("show", function(){ let view = $("#p2").css("display"); if(view == "none"){ $("#flip2").text("토글 - 다운"); } else { $("#flip2").text("토글 - 업"); } }); }); 기본선택자 1) 태그명 - $("div") 2) class - $(".box") 3) id - $("#d1") 선택자 전체 요소 선택자 - $("*") 현재 요소 선택자 - $(this) 속성 선택자 - $("[]") 조합 선택자 태그명과 class 혼합 - $("p.c1") 같은 형제 태그들 .. 2023. 3. 21. 3월 20일 (2) JavaScript - jQuery event, effect ready() html 요소가 모두 로드된 뒤에 처리될 수 있도록 js 코드는 ready() 함수 내에 작성한다. $(document).ready(function() { 여기에 모든 자바스크립트 코드를 작성 }); -> 단축형태 $(function(){ 여기에 모든 자바스크립트 코드를 작성 }); $(document).ready(function() { $("#btn").click(function(){ alert("버튼을 눌렀습니다."); }); }); 단축 $(function() { $("#btn").click(function(){ alert("버튼을 눌렀습니다."); }); }); 버튼 jQuery 이벤트 키워드 이벤트는 ~ 할 때, ~될 때 시점을 말한다. 1. 마우스 이벤트 click : 클릭이벤트.. 2023. 3. 20. 3월 17일 (2) JavaScript - locatoin, history location [window.]location : 현재 보이는 페이지의 정보 locaion.href : 페이지의 url(a 태그의 href와 같음) 태그가 아닌 다른 곳에 주소 입력 시 사용 location.hostname : 서버의 주소(Domain mane) location.pathname : 페이지의 경로와 파일명 location.protocol : 사용 중인 웹 프로토콜(http) history window.history : 방문한 페이지 이동 관련 정보 방문한 페이지가 있어야 활성화 history.back() : 이전 페이지로 이동 history.forward() : 다음 페이지로 이동 history.go(n) : back과 forward를 합친 메서드 back -> history.go(-1).. 2023. 3. 17. 3월 16일 (2) JavaScript - 브라우저 객체 모델 p576 BOM(Browse Object Model) 브라우저 객체 모델 window를 기반으로 함 브라우저 프로그램에서 제공하는 기능을 자바스크립트로 제어할 때 사용하는 객체 묶음 동일하게 제공하는 기능들이 있다, 이런 객체를 모아서 만든 모델, 브라우저 window command 입력 방식 CUI - 직접 명령어를 입력해서 사용사용자 인터페이스 GUI - 그림을 띄워서 명령어를 사용하게 하는 스크린 - 화면 효과로케이션 - a link와 같음히스토리 - 경로 이동, 방문기록내비게이터 - 브라우저의 정보, 브라우저에 따라서 제어하는 기능이 다르다.다큐멘트 body 1. window alert 등의 대화창, 화면의 크기, 스크롤 등을 처리 화면의 크기는 3가지로 모니터 크기, 유효영역(실제 프로그램 크기.. 2023. 3. 16. 이전 1 2 3 4 다음
