오늘의 노래 추천 🎸
- 아티스트
- GAYLE
- 앨범
- indieedgycool
- 발매일
- 1970.01.01
주말에 노래만들어서 곡 선정이 어려웠는데 오늘 느낌으로는 이거
DAY 3
ㅡ 숫자 맞추기 실습 ㅡ
랜덤 수를 뽑아 기회가 5번인 updown 숫자 맞추기 예제 실습play, reset 메서드 작성 필요
* 풀이 *
getElementbyId 를 활용해 객체를 변수에 지정해주고 랜덤수, 중복 판별을 위한 배열, 찬스 변수 생성
input 으로 입력한 값을 user 변수에 불러오기
if 문을 이용해 범위나 타입을 잘못 작성했거나 중복값을 입력했을 경우 안내문 출력 후 break
if 문을 이용해 입력값과 답을 비교 ㅡ> 안내문 출력, 배열 값 추가, chance--, 남은 기회 출력 후 break
* play 함수의 마지막 부분에 value 를 이용해 인풋값을 공백으로 비워주고 focus 로 포커스
배열, chance, 랜덤 정답 값 초기화
초기화면 출력 및 버튼 활성화
* 혹은 location.reload 를 이용해 새로고침
이벤트 리스너를 이용해 버튼 이벤트 추가
<script>
let resultArea = document.getElementById('result-area')
let chanceArea = document.getElementById('chance-area')
let userInput = document.getElementById('user-input')
let btnArea = document.getElementById('btn-area')
let playBtn = document.getElementById('play-button')
let resetBtn = document.getElementById('reset-button')
let ans = Math.floor(Math.random()*100)+1
let arr = []
let chance = 5
let play = function(){
while(chance!=0){
let user = parseInt(userInput.value);
if(isNaN(user)){
resultArea.innerText = '1~100까지의 숫자를 입력해주세요!'
break
}else if(user>100 || user<1){
resultArea.innerText = '1~100까지의 숫자를 입력해주세요!'
break
}else if(arr.includes(user)){
resultArea.innerText = '이전에 입력한 값입니다'
break
}
if(user<ans){
resultArea.innerText = '~입력한 값보다 큽니다~'
arr.push(user)
chance--
chanceArea.innerText = '남은 기회 : '+chance+'번'
break
}else if(user>ans){
resultArea.innerText = '~입력한 값보다 작습니다~'
arr.push(user)
chance--
chanceArea.innerText = '남은 기회 : '+chance+'번'
break
}else if(user==ans){
resultArea.innerText = '정답입니다!'
break
}
}
if(chance==0){
resultArea.innerText = '기회를 모두 소진하셨습니다'
playBtn.disabled = true
}
userInput.value=''
userInput.focus()
}
let reset = function(){
chance = 5
arr = []
resultArea.innerText = '결과값이 여기 나옵니다!'
chanceArea.innerText = '남은 기회 : 5번'
ans = Math.floor(Math.random()*100)+1
playBtn.disabled = false
userInput.focus()
}
playBtn.addEventListener('click', play)
resetBtn.addEventListener('click', reset)
</script>
<script>
let ranNum = Math.floor(Math.random()*100+1)
const resultArea = document.getElementById("result-area")
const chanceArea = document.getElementById("chance-area")
const userInput = document.getElementById("user-input")
const playBtn = document.getElementById("play-button")
const resetBtn = document.getElementById("reset-button")
let chance = 5
let preInput = []
const play = function(){
let input = Number(userInput.value)
console.log(input)
if(isNaN(input)){
resultArea.innerText = "1~100 사이의 숫자로 입력하세요"
return;
}else if(input<1 || input>100){
resultArea.innerText = "1~100 사이의 숫자를 입력하세요"
return;
}else if(preInput.includes(input)){
resultArea.innerText = "이전에 입력했던 숫자입니다"
return;
}
console.log(ranNum)
if(input > ranNum){
resultArea.innerText = "입력한 값보다 작습니다"
chance -=1
preInput.push(input)
}else if(input < ranNum){
resultArea.innerText = "입력한 값보다 큽니다"
chance -=1
preInput.push(input)
}else{
resultArea.innerText = "정답입니다"
}
chanceArea.innerText = "남은 기회 : "+chance+"번"
if(chance == 0){
resultArea.innerText = "기회를 모두 소진하였습니다"
playBtn.disabled = true
}
userInput.value = ""
userInput.focus()
}
const reset = function(){
location.reload()
chance = 5
preInput = []
playBtn.disabled = false
resultArea.innerText = "결과값이 여기 나옵니다!"
ranNum = Math.floor(Math.random()*100+1)
chanceArea.innerText = "남은 기회 : "+chance+"번"
userInput.value = ""
userInput.focus()
}
playBtn.addEventListener("click", play)
resetBtn.addEventListener("click", reset)
</script>선생님 풀이
main.js 생성 후 스크립트 내 내용을 main 영역에 작성해주고 html의 스트립트 태그에는
src 속성으로 경로를 추가해주면 똑같이 작성
ㅡ 비동기 통신 ㅡ
동기 방식 (Synchronous) ㅡ> 한 프로세스가 종료되기 전까지는 다른 프로세스를 진행할 수 없는 방식
* 비동기 방식 (Asynchronous) ㅡ> 한 프로세스와 다른 프로세스를 (동시에)진행할 수 있는 방식
ㅡ Ajax ㅡ
Asychronouse javascript and XML
서버와 브라우저 간 비동기 방식으로 데이터를 교환할 수 있는 통신방식
* 전체 페이지 새로고침 없이 일부분만을 위한 데이터 로드
ㅡ 영화 진흥 위원회 Open API 를 이용해 영화 정보 불러오기 실습 (Ajax 활용) ㅡ
Asychronouse javascript and XML
table 형식으로 순위, 영화제목, 개봉일을 가져오고 '영화 데이터 요청' 버튼 생성
jquery 라이브러리 이용을 위해 script src 에 링크 지정
let 변수명 = $ ( ' # id명 ' ) (jquery 활용 구조)
table 영역과 버튼 객체를 불러오고 getMovieList 함수 생성
open api 사이트에서 응답 예시 url 을 url에 작성, success 에 콜백 함수 작성
data ㅡ> boxOfficeResult ㅡ> dailyBoxOfficeList 구조로 데이터 가져오기
Json Parser Online
json.parser.online.fr
불러온 데이터 easy read 사이트
우리가 필요한 key 는 rank, movieNm, openDt 임을 확인
for 반복문에 movieList [ i ].rank/movieNm/openDt 형태의 데이터를 테이블 구조에 작성
* for 소괄호에 인덱스 번호 i in movieList 작성
** table 을 열고 닫는 것 주의
반복문 이후에 movieArea 에 newHtml 넣어주기
<script>
let movieArea = document.getElementById('movie-area')
let reqBtn = document.getElementById('req-btn')
//let movieArea = $('#movie-area')
//let reqBtn = $('#req-btn')
const getMovieList = function () {
// 요청 url(주소) 정의
let reqUrl = 'https://kobis.or.kr/kobisopenapi/webservice/rest/boxoffice/searchDailyBoxOfficeList.json?key=f5eef3421c602c6cb7ea224104795888&targetDt=20240721'
// ajax 요청 구조
$.ajax({
url: reqUrl, // 요청 url
success: function (data) { // 데이터를 성공적으로 받았을 때 실행할 함수
// 콜백함수 : 특정 프로세스를 수행 후 그 결과값을 가지고 실행하는 함수
let movieList = data.boxOfficeResult.dailyBoxOfficeList
console.log(movieList)
let newHtml = `
<table border="1">
<tr>
<th>순위</th>
<th>영화제목</th>
<th>개봉일</th>
</tr>
`
for(i in movieList){ // i : 인덱스 번호
// 복합대입연산자를 이용해 newHtml에 구조 추가
newHtml += `
<tr>
<td>${movieList[i].rank}</td>
<td>${movieList[i].movieNm}</td>
<td>${movieList[i].openDt}</td>
</tr>
`
}
newHtml+= `</table>` // table 태그 닫기
movieArea.innerHTML = newHtml
}
})
}
reqBtn.addEventListener('click', getMovieList)
</script>
ㅡ OpenWeather의 Open API 를 이용해 날씨 정보 실습 (Ajax 활용) ㅡ
Asychronouse javascript and XML
https://openweathermap.org/current
Current weather data - OpenWeatherMap
openweathermap.org
jquery 불러오기22
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
(수정중)
BYE