반응형 마무리7 자바스크립트 JSON 마무리 문제(UPGRADE) 자바스크립트 JSON 마무리 문제(UPGRADE) 참고 https://dongjin6539.tistory.com/78 길라잡이 명언뿐만 아니라 이미지도 10초에 한번씩 바꿔주세요. JAVACRIPT 자바스크립트 구성 https://dongjin6539.tistory.com/78에서 추가로 작업을 했습니다. unsplash 페이지에서 사진을 무료로 가져올 수 있습니다.(https://unsplash.com/ko) 함수 imgLoad를 만들어서 실행해줍니다. 코드의 이미지 부분을 선택자로 만들어줍니다. unsplash API에서 이미지를 random으로 가져올 수 있는 소스가 있습니다. img 요소의 src 속성 값을 변경합니다. 이 때, 새로운 이미지를 불러오기 위해 랜덤한 쿼리 파라미터를 추가해서 속성값.. 2023. 4. 17. 자바스크립트 배열과 객체 마무리 문제 자바스크립트 배열과 객체 마무리 문제 책 : 모던 자바스크립트 프로그래밍의 정석 428페이지 참고 마무리 문제 2 자바스크립트를 사용해서 자동으로 복권 번호를 생성해 주는 프로그램을 작성하려고 합니다. 번호는 중복되면 안 되므로 셋(Set( ))을 이용할 것이고, 숫자는 1부터 45까지의 범위 안에 있어야 하며, 6개의 무작위 수를 추출할 것입니다. 버튼을 클릭했을 때 모든 조건을 반영해서 6개의 숫자를 추출하는 소스를 작성해 보세요. 코드 보기 / 완성화면 코드 블럭 로또 번호 생성기 클릭 Lotto Number 구성 body 구역에 각각 태그를 사용해서 구역을 만들어줍니다. style 구역으로 가서 각각의 태그에 스타일, 속성을 입력해줍니다. JAVASCRIPT 자바스크립트 구성 버튼 부분과 결과 부.. 2023. 4. 16. 자바스크립트 JSON 마무리 문제 자바스크립트 JSON 마무리 문제 책 : 모던 자바스크립트 프로그래밍의 정석 519, 520페이지 참고 마무리 문제 1 dummyjson.com/quotes 사이트의 json 데이터를 가져온 후 콘솔 창에 결과를 표시해 봅니다. 가져온 데이터가 어떤 구조로 이루어져 있는지 살표보는 것이 목표입니다. 길라잡이 feth와 then, catch를 사용해서 URL에서 자료를 가져옵니다. 가져온 데이터에 어떤 값이 어떤 구조로 저장되어 있는지 확인하고 그중에서 명언과 말한 사람 정보를 가져오는 방법을 생각합니다. JAVASCRIPT function nextQutoe(){ fetch("http://dummyjson.com/quotes") .then(res => res.json()) .then(items => { c.. 2023. 4. 15. 자바스크립트 이벤트 마무리 문제(2) 자바스크립트 이벤트 마무리 문제(2) 책 : 모던 자바스크립트 프로그래밍의 정석 221페이지 참고 마무리 문제 2 이벤트를 활용해 필요에 따라 표시했다가 감추는 메뉴를 만들어 보겠습니다. 메뉴 아이콘을 클릭하면 메뉴가 표시되고, 다시 클릭하면 메뉴가 숨겨지는 예제를 만들 것입니다. 버튼을 클릭할 때마다 변수와 메뉴에 .active 스타일을 토글하는 소스를 작성해 보세요. 길라잡이 버튼과 메뉴를 가져와서 각각 변수로 저장합니다. 버튼에 click 이벤트가 발생했을 때 실행할 함수를 연결하는데, 이 함수에서는 버튼과 메뉴에 active 클래스 스타일을 토글합니다. 코드 보기 / 완성화면 코드 블럭 📋 Javascript Typerscript Node.js 구성 body 태그에 button 태그와 nav 태그.. 2023. 3. 30. 자바스크립트 이벤트 마무리 문제(1) 자바스크립트 이벤트 마무리 문제(1) 책 : 모던 자바스크립트 프로그래밍의 정석 220페이지 참고 마무리 문제 1 문서에는 하나의 이미지가 삽입되어 있습니다. 이 이미지의 위에 마우스 포인터를 올려놓았을 때 다른 이미지로 바뀌었다가 이미지에서 마우스 포인터를 다른 곳으로 이동하면 다시 원래의 이미지로 바뀌는 소스를 작석해 보세요. 길라잡이 문서에서 태그에는 id나 class가 없습니다. 태그 이름을 사용하거나 2개 이상의 선택자를 연결한 후 이미지를 가져와서 변수에 저장합니다. 마우스 포인터를 이미지의 위에 올려놓을 때는 mouseover 이벤트가, 마우스 포인터를 다른 곳으로 이동할 때는 mouseout 이벤트가 발생합니다. 이벤트가 발생했을 때 이미지의 src 속성값을 바꿉니다. 코드 보기 / 완성화.. 2023. 3. 30. 자바스크립트 함수 마무리 문제 자바스크립트 함수 마무리 문제1, 2 책 : 모던 자바스크립트 프로그래밍의 정석 155, 156페이지 참고 마무리 문제 1 사용자가 프롬프트 창에 숫자를 입력했을 때 그 숫자를 함수로 넘겨주고, 함수에서는 숫자가 양수인지, 음수인지, 또는0인지 판단해서 알림 창에 보여주는 프로그램을 작성해 보시오. 길라잡이 숫자를 받아서 양수, 음수, 0을 판단하고 알림 창에 표시하는 함수를 선언합니다. parseInt( ) 함수를 사용해 프롬프트 창에 입력한 내용을 숫자로 변환합니다. 프롬프트 창에 입력한 내용이 숫자가 아니면 parseInt( ) 함수는 NaN을 변환합니다. 반환값이 숫자일 경우에만 함수를 실행합니다. See the Pen Untitled by dongjin6539 (@dongjin6539) on C.. 2023. 2. 28. 이전 1 2 다음 반응형
