코딩/Javascript 예제 6

로또 뽑기 만들기 🍀

CSS Scritp 🍀Lotto🍀 Click! 이 JavaScript 코드는 "Click!" 버튼을 클릭하면, "lottoNumber" 함수가 호출되어 무작위 6개의 숫자를 생성하고, 생성된 숫자를 "result" 요소의 innerText로 할당하여 화면에 출력합니다. 첫째 줄에서는, HTML에서 button 요소를 선택하여 "button" 변수에 할당합니다. 이를 통해 이벤트 리스너를 추가하고, 클릭 이벤트가 발생했을 때 함수를 호출할 수 있습니다. 둘째 줄에서는, HTML에서 결과를 출력할 div 요소를 선택하여 "result" 변수에 할당합니다. 이를 통해 결과를 표시할 수 있습니다. 셋째 줄에서는, "lottoNumber" 함수를 정의합니다. 이 함수는 새로운 Set 객체를 만들고, 1부터 45 ..

자바스크립트 JSON 활용하여 코드짜보기

'모던자바스크립트'의 502페이지 예제입니다! 목표 dummyjson.com/quotes 사이트의 json 데이터를 가져온 후 콘솔 창에 결과를 표시해 봅니다. 가져온 데이터가 어떤 구조로 이루어져 있는지 확인하고 그 중에서 명언과 말한 사람 정보를 가져올 수 있는 방법을 생각해봅니다. 1. JSON 데이터를 가져온 후 콘솔창에 결과를 표시해 보세요. .then(이름) 까지가 json을 활용하는 기본적인 문법입니다. 2. JSON데이터에서 명언 1개를 가져와 내용과 말한 사람을 표시해 보세요. let currentIndex = 0; function quotes(){ fetch("json/quotes.json") .then(res => res.json()) .then(items => { const resu..

마우스가 올라오면 바뀌는 화면! + 카테고리 등장

main 부분 ☰ 안녕하세요 자바스크립트 어려워요 살려주세요 메인 박스 안에 이미지가 들어갈 박스를 만들어 주고 이미지를 삽입한 뒤 선택자 선택을 위해 클래스 속성을 부여했습니다. 마찬가지로 버튼에도 해주었습니다. Script 부분 이 예제의 주요 목적은 선택자 사용인 것 같아 선택자를 총 3가지 만들어 주었습니다. imageAll은 이미지를, btn1은 버튼을 nav는 카테고리 입니다. document.qrerySelector(".image__wrap .A").addEventListener('mouseenter', () => { imageAll.src = "img2.png"; }); 선택자를 이용해 이미지 변수를 묶어 준 뒤 마우스 관련 이벤트를 발생시키기 위해 addEventListener을 넣었습니..

자바스크립트 기초 문제풀기 2

1. 양수 음수 구하기 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는 0인지 판단해서 알림 창에 보여 주는 프로그램을 작성해 보세요. 힌트 숫자를 받아서 양수, 음수,0을 판단하고 알림 창에 표시하는 함수를 선언합니다. 반환값이 숫자일 경우에만 함수를 실행합니다. parseint() 함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다. const num = parseInt(prompt("숫자입력.")); //parseInt()는 문자열을 실수로 바꾸는 함수. 사용자가 입력할 때 문자열이기 때문에 변경이 필요하다. if(num>0) { alert("양수입니다."); } else if(num

자바스크립트 기초 문제풀기 1

자바스크립트 왕 초보 문제 풀어보기 문제 1 주어진 배열에서 10보다 큰 값을 찾아서 화면에 표시하시오. 주어진 배열 : [1, 3, 5, 7, 9, 11, 13, 15, 17, 19 ] 힌트! 배열 요소의 개수만큼 for문을 반복합니다. if 문을 사용해서 요소의 값과 10을 비교합니다. document.write문을 사용해서 화면에 표시합니다. const arr = [1, 3, 5, 7, 9, 11, 13, 15, 17, 19]; // 주어진 숫자를 먼저 배열 해준다. for(let i = 0; i 10) { document.write(arr[i]);//넣은 배열이 거짓일 때는 출력이 되지 않..