[js] fetch로 Ajax 통신 사용법(ft. json placeholder데이터 출력) jsonplacehoder의 fetch를 사용하여 ajax 통신으로 데이터를 요청하여 화면에 출력해 보겠습니다. 구현내용 · fetch API 이용하여 ajax 통신으로 user 정보 가져오기 · 자바스크립트를 이용하여 버튼 클릭시 name, email 화면에 출력 평소에 데이터 서버 기능 구현을 위해서 테스트용으로 많이 사용하는 JSONPlaceholder 사용법을 알아보겠니다. 사이트 이동 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Fake online REST API for testing and prototyping When to use JSONPlaceholder is a free online REST API that you can use .. [js] 클릭 이벤트 후 이미지 변경, 컬러 변경, 팝업창 오픈 간단한 자바스크립트, 클릭 이벤트를 이용하여 3가지 동작을 구현하겠습니다. 구현내용 · 클릭시마다 이미지 변경 · 클릭시마다 컬러 변경 · 클릭 후 팝업창 오픈 화면 결과 코드 이미지 바꾸기 컬러 바꾸기 팝업창 코드 .box { text-align: center; margin-bottom: 10px; } .bgColor { width: 200px; height: 200px; margin: 0 auto; background-color: #f9b514; } 한번에 보기 [js] 자바스크립트 onclick · addEventListener 비교 사용법 자바스크립트에서 클릭 이벤트 핸들러 3가지 방법과 addEventListener 와 onclick의 차이점을 알아보겠습니다. 이벤트 리스너는 이벤트가 발생했을 때 그 처리를 담당하는 함수를 가리키며, 이벤트 핸들러(event handler)라고도 합니다. 이벤트가 특정 element에서 발생하면, 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행시킵니다. 가장 보편적으로 자주 사용되는 이벤트 리스너는 click 이벤트입니다. click event는 사용자가 element에 클릭하였을 때의 동작하는 이벤트입니다. click 이벤트 사용 방법 1. onclick 이벤트 - HTML 코드에서 inline 방식 (in HTML) 자바스크립트를 지원하는 모든 브라우저에서 HTML 코드에서 바로 이벤트 리스너를.. [js] input option 값 출력하기(ft. onchange onfocus) 홈페이지 자주 사용하는 input 태그입니다. 자바스크립트 이용하여 조건에 맞게 input 태그의 select의 option 값을 출력하겠습니다. 자바스크립트를 이용한 input 태그 출력 구현내용 · 구현 1 option 선택 값(탐구과목)이 그대로 아래 label 값에 적용 -> 탐구과목의 과목명을 선택하면 아래 탐구 1, 탐구 2 과목명이 선택한 과목명으로 바뀜 onchange, innerHTML 이용 · 구현 2: 리셋(option값 선택 후 다시 option값을 선택으로 바꾸었을 때) -> 탐구과목 과목명 선택하였다가 다시 과목명을 선택으로 리셋하였을 때 1. 아래 label값이 탐구 1/탐구 2로 자동 리셋 2. 아래 수능 등급, 백분위 점수가 선택으로 자동 리셋 if( value == "" .. [js] 자바스크립트 버튼 클릭시(onclick) 마다 배경 색상 변경하기 자바스크립트를 이용하여 버튼을 클릭할 때마다 화면 배경 색상 변경을 구현하겠습니다. 화면 출력내용 · 배경색상(backgroundcolor) 총 6개 배열 · 버튼 1개 사용 · 버튼 클릭시마다 색상값 중 1개가 랜덤으로 선택되어 body에 적용 버튼 클릭시마다 화면 배경 색상 바꾸기 예제 색상 변경 function colorChange() { var color = ["#FC5C7D", "#6A82FB", "#38ef7d", "#fffbd5", "#b20a2c", "#CAC531"]; var num = Math.floor(Math.random() * color.length); //Math.random()이용하여 배열의 데이터 개수(length) 이용하여 배열의 인덱스, 변수 num이 랜덤으로 나옴 var.. [js] 버튼 클릭시 마다 이미지 변경 구현 (ft . onclick addEventListener) 자바스크립트를 이용하여 이미지들을 사용하여 클릭할 때마다 이미지를 변경을 구현하겠습니다. 화면 출력내용 · 총 8개의 이미지· 총 8개의 이미지 사용 · 첫 화면에는 이미지 1번 나옴 · 버튼 2개 사용(다음, 이전) · 다음버튼 클릭 시 다음 이미지 순서대로 나타남 · 이전버튼 클릭 시 이전 이미지 순서대로 나타남 · 마지막 8번째 이미지 다음 버튼 클릭 시 return문을 사용하여 강제 종료 · 처음 1번째 이미지 이전버튼 클릭 시 return문을 사용하여 강제 종료 클릭시마다 이미지 변경 예제1 · click 이벤트를 onclick를 이용하여 구현 · 각자 저장되어있는 이미지 8장 사용 -> 이미지 사용이 번거로우신 분들은 예제2번으로 이동해주세요 html 이전 다음 css *{margin: 0;p.. 이전 1 다음 반응형
