자바스크립트 중에서 setInterval, setTimeout 함수 사용해보기
setTimeout()👉
일정 시간 후에 특정 코드, 함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용하는 함수.
setTimeout(function(){}, delat time);setInterval()👉
지정된 시간 간격마다 지정된 기능을 반복하고자 할 때 사용한다.
setInterval(function(){}, delat time);<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step09_example.html</title>
</head>
<body>
<h1>setInterval, setTimeout 함수 사용해 보기</h1>
<p>
<strong id = "min">0</strong>분
<strong id = "sec">0</strong>초
</p>
<script>
//Interval 함수 안에서 사용할 변수를 만들고 0 으로 초기화 하기
let sec = 0;
let min = 0;
setInterval(()=>{
//초를 1씩 증가 시킨다
sec++; // sec = sec + 1 or sec +=1
//만일 증가 시킨 초가 60이면 분을 1씩 증가 시킨다.
if(sec == 60){
min++;
sec = 0;
}
//초와 분을 위의 strong 요소의 innerText 로 각각 출력한다.
document.querySelector("#min").innerText = min;
document.querySelector("#sec").innerText = sec;
}, 1000);
setInterval(()=>{
document.querySelector("#sec").innerText = +1;
}, 10);
//setTimeout, setInterval 함수는 javascript builtin 함수 이다.
setTimeout(()=>{
console.log("setTimeout 에 전달한 함수가 호출되네?");
}, 1000);
setInterval(()=>{
console.log("setInterval 에 전달한 함수가 호출되네?")
}, 1000);
</script>
</body>
</html>이를 이용한 분 초 계산
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Step09_example2.html</title>
</head>
<body>
<h1>스탑워치 만들어보기</h1>
<p>
<strong id = "min">0</strong> :
<strong id = "sec">0</strong> :
<strong id = "mSec">0</strong>
</p>
<button id = "startBtn">시작</button>
<button id = "resetBtn">재설정</button>
<script>
//변수 선언을 한번에 여러개 하기
let min = 0, sec = 0, mSec = 0;
//상태값을 관리할 변수를 만들고 초기 상태값 대입하기
let isStarted = false;
document.querySelector("#startBtn").addEventListener("click",(e)=>{
//이벤트가 일어난 요소의 innerText 를 바꾸기
//만일 시작된 state 라면 "중단"으로 바꾸고
//중단된 state(시작된 state가 아니라면) 라면 "시작" 으로 바꾼다.
if(isStarted){
isStarted = false;
e.target.innerText = "시작";
}else{
isStarted = true;
e.target.innerText = "중단";
}
});
setInterval(()=>{
//만일 시작된 상태가 아니라면 함수를 여기서 종료하기
if(isStarted == false){ //if(!isStarted)
return;
}
//1/100초 마다 한번씩 호출되는 함수
mSec++;
if(mSec == 100){
sec++;
mSec = 0;
}
if(sec == 60){
min++;
sec = 0;
}
document.querySelector("#mSec").innerText = mSec;
document.querySelector("#sec").innerText = sec;
document.querySelector("#min").innerText = min;
}, 10);
document.querySelector("#resetBtn").addEventListener("click",()=>{
//변수를 모두 초기화
mSec = 0, sec = 0, min = 0;
isStarted = false;
//초기화된 값을 화면에 반영
document.querySelector("#mSec").innerText = mSec;
document.querySelector("#sec").innerText = sec;
document.querySelector("#min").innerText = min;
//버튼의 innerText 도 초기화
document.querySelector("#startBtn").innerText = "시작";
});
</script>
</body>
</html>확장for문
package test.main;
import test.mypac.Bike;
public class MainClass04 {
public static void main(String[] args) {
/*
* 1. Bike 객체를 담을 수 있는 방 3개짜리 배열객체를 생성해서 참조값을
* bike 라는 지역 변수에 담아보세요.
* 2. 배열의 각각의 방 (0,1,2번)에 Bike 객체를 생성해서 담아보세요.
* 3. 반복문 for를 이용해서 순서대로 배열의 각각의 방에 있는 Bike객체의 ride() 메소드를 호출해 보세요.
*
*/
Bike[] bike = new Bike[3];
bike[0] = new Bike();
bike[1] = new Bike();
bike[2] = new Bike();
for(int i = 0; i < bike.length; i++) {
//i번째 방에 있는 Bike 객체의 참조값을 얻어와서 임시변수 tmp에 담기
Bike tmp = bike[i];
//객체의 참조값이 들어있는 tmp에 . 을 입력하고 메소드 호출
bike[i].ride();
}
System.out.println("--- 확장 for 문을 사용하면 ---");
for(Bike tmp:bike) {
tmp.ride();
}
}
}자바의 Scanner에 대해서 배우고있다.
package test.main;
import java.util.Scanner;
public class MainClass06 {
String[] msgs;
public static void main(String[] args) {
System.err.println("요기다 입력을 하세요.");
// 1. 문자열을 저장할수 있는 방 5개짜리 배열 객체를 생성해서 참조값을 msgs 라는 지역변수에 담는다.
String[] msgs = new String[5];
// 2. 키보드로 부터 입력 받을 수 있는 Scanner 객체를 생성해서 참조값을 scan 이라는 지역변수에 담는다.
Scanner scan = new Scanner(System.in);
// 3. 반복문을 위에서 생성한 배열의 방의 갯수 만큼 돌면서 키보드로 부터 문자열을 입력받아서
// 배열에 순서대로 저장한다.
for(int i = 0; i < msgs.length; i++) {
System.err.print( i + " 번째 " + " 입력을 하세요 : ");
String str = scan.nextLine();
msgs[i] = str;
}
// 4. 반복문 돌면서 배열에 저장되었던 모든 문자열을 순서대로 콘솔창에 출력한다.
for(String tmp:msgs) {
System.out.print(tmp);
}
}
}random 연산자를 이용한 다양한 예제
package test.main;
import java.util.Random;
public class QuizMain3 {
public static void main(String[] args) {
/*
* 3. 우연히 3개가 모두 같게 나왔을때는 "당첨됬습니다!"를 출력하고
* 하나라도 다르면 " 꽝 " 을 출력하도록 프로그래밍해 보세요.
*
* apple | apple | cherry
* 꽝
*
* apple | apple | apple
* 당첨됬습니다!
*
*/
String[] items={"cherry", "apple", "banana", "melon", "7"};
//랜덤한 숫자를 얻어내기 위한 객체
Random ran=new Random();
//정수 3개를 저장할 배열 미리 준비 하기
int[] nums = new int[3];
// 3회 반복하면서
for(int i=0; i<3; i++) {
// 0~4 사이의 랜덤한 숫자를 하나 얻어내서
int ranNum=ran.nextInt(5);
//얻어낸 숫자를 배열의 i번째 방에 저장하기
nums[i] = ranNum;
// 배열의 인덱스로 활용해서 문자열 출력하기
System.out.print(items[ranNum]);
if(i<2) {
System.out.print(" | ");
}
}
//만일 랜덤한 숫자가 모두 같으면
if(nums[0] == nums[1] && nums[1] == nums[2]) {
System.out.println(" 당첨됬습니다! ");
}else {
System.out.println(" 꽝 ");
}
}
}
'수업내용' 카테고리의 다른 글
| 20230503 수업내용🤣🤣 (0) | 2023.05.03 |
|---|---|
| 20230502 국비학원😁 (0) | 2023.05.02 |
| 20230428 수업내용😂😂 (0) | 2023.05.01 |
| 20230427 수업내용🤦♂️ (0) | 2023.04.27 |
| 20230426 수업내용🤦♂️ (0) | 2023.04.26 |
댓글