목록개발/프론트엔드 (58)
JongDDA의 한걸음 한걸음씩
로또 추첨기 1~45의 숫자 중 6개의 숫자를 램덤으로 받아 숫자 출력 로또 추첨 추첨 h1{ font-size: 48px; } .main{ display: flex; align-items: center; } button{ font-size: 36px; width: 120px; height: 140px; margin-left: 20px; color: white; background-color: teal; border: none; border-radius: 10px; } button:active, button:focus{ outline: none; } /* 추첨된 번호 여섯개가 보이는 영역 */ .result{ display: flex; width: 770px; height: 140px; padding: ..
change() : 오직 변경 이벤트에 대해서만 이벤트 핸들링! val() : 입력 요소 값 조회 또는 변경 자바스크립트 배열의 메소드인 join(인자) : 배열 요소 사이사이에 인자를 추가한 형태의 문자열을 반환 입력 요소에서 값 읽어보기 미입력 상태 강아지 고양이 김밥 초밥 쌈밥 function displayValues(){ const singleValue = $("#single").val() const multiValue = $("#multiple").val() // 배열 반환 console.log(singleValue) console.log(multiValue) // 두 셀렉트의 결과를 하나의 문자열로 보여주자 const resultText = `싱글 셀렉터 값 : ${singleValue} 멀티..
ajax란? ajax(Asynchronous Javascript And XML)란 비동기 방식의 자바스크립트와 XML을 의미한다. ajax를 이용하는 주목적은 화면 전환 없이 클라이언트(사용자 컴퓨터)와 서버(서비스 제공 컴퓨터)간의 정보를 교환하기 위해서이다. ajax 관련 메소드 ajax는 클라이언트가 비동기 방식으로 자바스크립트를 이용하여 화면 전환 없이 서버 측에 자료를 요청할 때 사용한다. ajax 관련 메소드를 호출하면, 서버 측에 원하는 요청을 보내어 응답을 받아오는 것이 가능하다. load() load() 메소드는 사용자가 지정한 URL 주소에 데이터를 전송하고 외부 콘텐츠를 요청하여 가져올 때 사용한다. 요청한 콘텐츠를 이용해 선택한 요소에 내용을 바꿀 수 있다. $(선택요소).load(..
효과 메소드 효과 메소드를 사용하면 스타일(CSS)를 사용하는 것보다 좀 더 역동적인 동작을 적용하여 객체를 화려하게 숨기거나 보이게 할 수 있다. 효과 메소드에는 CSS 속성을 바꾸는 메소드와 애니메이션 기능을 다루는 메소드가 있다. hide() / show() 요소를 숨기거나 숨겨져 있는 요소를 노출시키는 메소드들이다. - 선택적 인자 : 속도(400ms 기본) 애니메이션 효과 써보자 자바 파이썬 C++ 자바스크립트 $("#py").click(function(){ $(this).prev().hide() // 앞선 형제 숨기기 $(this).next().show() // 다음 형제 보이기 }) toggle() 위에서 구현한 기능을 toggle() 메소드 하나로 처리할 수 있다. hide(), show(..