[문제 1]
- prompt에 '분', '초'를 입력받아서 원하는 시간까지 돌릴 수 있도록 설정한다.
- 만약 값을 나가지 않는다면 59분 59초를 Max로 한다.
- script를 완성하세요
<script>
let minutes = 59;
let seconds = 59;
let myMinutes = prompt("분을 입력하세요") * 1;
let mySeconds = prompt("초를 입력하세요") * 1;
</script>
[코드 완성 예시]
더보기
<body>
<script>
let minutes = 59;
let seconds = 59;
let myMinutes = prompt("분을 입력하세요") * 1;
let mySeconds = prompt("초를 입력하세요") * 1;
for (let i=0; i<= minutes; i++) {
if (i == myMinutes) {
for (let j=0; j <= mySeconds ; j++) {
console.log(i + "분" + j + "초");
}
break;
}
for (let j=0; j <= seconds ; j++) {
console.log(i + "분" + j + "초");
}
}
</script>
</body>
① 이중 포문을 통해 i와 j값을 모두 출력할 수 있도록 설정
② if 구문을 걸었음에도 불구하고, 초가 59초까지 모두 나올 수 있도록 설정
③ 유지해야 할 부분과 어느 부분에서 빠져나오면 좋을지에 대한 고민 필요
[문제 2]
- next를 누르면 이미지가 바뀌게 설정한다.
- 마지막 페이지일 경우 알림창을 띄우고 첫번째 사진으로 돌아오게 한다.
- script를 완성하세요
<body>
<div>
<img src="./img/1.jpg" alt="" id ="meco">
</div>
<div>
<button onclick="move()">Next</button>
</div>
<script>
</script>
[코드 완성 예시]
더보기
<body>
<div>
<img src="./img/1.jpg" alt="" id ="meco">
</div>
<div>
<button onclick="move()">Next</button>
</div>
<script>
let meco = document.getElementById("meco");
let num = 1;
function move() {
num++;
meco.src = "./img/" + num + ".jpg";
if(num >= 5) {
alert("마지막 이미지입니다. 해당 사진 확인 후 처음으로 돌아갑니다.")
num = 1;
}
}
</script>
</body>
① 코드를 봤을 때 num 변수 선언 → move() 함수 실행으로 전반적으로 구문이 끝나는 것 처럼 보이지만,
move()를 계속해서 실행하기 때문에 해당 부분이 순환한다고 이해하면 됨
② meco라는 객체에 접근하여 'src' 속성 자체를 변경하는 것
즉 주소 자체에 접근해서 값을 지속해서 변경하는 것이기 때문에 num이 변하는 것
③ 자료구조에서 동일한 내역이 무엇인지 확인하고, 해당 부분 응용
④ 문자 + 숫자는 문자임을 인지
[문제 3]
- input text에는 0이 담겨있다.
- up & down을 누르면 숫자가 증가/감소하며 0미만으로 내려갈 경우 -값이 아닌, 0의 값만 출력되어야 한다.
- script를 완성하세요
<img src="./img/1.jpg" alt=""> <br>
<button onclick="up()">Up</button>
<input type="text" value ="0" id="box">
<button onclick="down()">Down</button>
<script>
</script>
[코드 완성 예시]
더보기
<script>
let box = document.getElementById("box");
function up() {
box.value = (box.value*1)+1;
}
function down() {
box.value = (box.value*1)-1;
if(box.value < 0) {
box.value = 0;
}
}
</script>
① input은 String, 즉 문자 타입으로 반환된다는 점을 유의
② 숫자형일 경우 단순히 value++가 가능하나, 문자는 불가하다는 점 유의
③ 숫자형으로 변환하기 위해 parseInt 및 *1을 사용
[문제 4]
- span content 에는 0이 담겨있다.
- up & down을 누르면 숫자가 증가/감소하며 0미만으로 내려갈 경우 -값이 아닌, 0의 값만 출력되어야 한다.
- script를 완성하세요
<body>
<img src="./img/1.jpg" alt=""> <br>
<button>Up</button>
<span id="num">0</span>
<button>Down</button>
<script>
</script>
</body>
[코드 완성 예시]
더보기
<body>
<img src="./img/1.jpg" alt=""> <br>
<button>Up</button>
<span id="num">0</span>
<button>Down</button>
<script>
const txt1 = document.getElementById("num");
let num = 0;
function up() {
txt1.innerHTML = ++num;
}
function down() {
txt1.innerHTML = --num;
if (txt1.innerHTML < 0) {
txt1.innerHTML = 0;
}
}
</script>
</body>
ⓛ html의 요소 내용을 가져오려면 innerhtml, innertext를 사용
- html의 경우 html tag 속성을 만들 수 있지만, text를 사용할 경우 그대로 출력이 됨
② 전위 증감을 사용
| 후위 증감(n++) |
전위 증감(++n) |
| 연산을 수행하기 전에 값을 증가 또는 감소 |
연산을 수행한 후에 값을 증가 또는 감소 |
예시)
let n = 5;
console.log(n++); // 출력: 5
console.log(n); // 출력: 6
[문제 5] !
- text 박스안에 출력할 list 개수 입력
- 클릭시 list 개수 출력
- 스크립트를 완성하세요
<body>
<input type="text" >
<button>CLICK</button>
<div>
<ul>
</ul>
</div>
<script>
</script>
</body>
[코드 완성 예시]
더보기
<script>
const input = document.getElementById("input");
const ul = document.getElementById("ul");
function addTxt() {
let sth = input.value;
let result = "";
for(let i=0; i<sth; i++) {
result += "<li></li>"
}
ul.innerHTML = result;
}
</script>
ⓛ input에서 받아오는 숫자나 값을 어떻게 응용할 것인지에 대한 생각이 필요
⇒ 해당 문제에서는 받아오는 값만큼 개수를 만드는 것, 즉 list의 지정 개수를 의미
② for루프에 list의 지정 개수만큼 돌리는 것 유의하고, 무엇을 담고 싶은지 판단
③ 중간중간 console.log 입력을 통해 원하는 값이 명확하게 담기는지 진행되는지 확인
④ sum += 1; (sum = sum + 1)의 숫자 구조를 문자로 활용하는 것 유의
※ 취약 포인트(문자열 누적)
⑤ innerHtml에는 최종의 결론 값만 들어간다는 것을 유의, 즉 list 개수의 값을 최종으로 담는 것
[문제 6] !
- 맨 첫번째 체크 박스를 클릭하면 나머지 박스들이 모두 선택되고,
맨 첫번째 체크 박스를 해제하면 나머지 박스들이 모두 해제되게 구현
- 모두 체크된 상태에서 한 가지 체크 박스를 해제하면 맨 첫번째 체크 박스 클릭이 해제되고,
체크가 없는 상태에서 모든 체크 박스를 선택하면 맨 첫번쨰 체크 박스 클릭이 되도록 구현
- 스크립트를 완성하세요
<body>
<input type="checkbox" value ="1" name = "ch">
<input type="checkbox" value ="2" name = "ch">
<input type="checkbox" value ="3" name = "ch">
<input type="checkbox" value = "4" name = "ch">
<input type="checkbox" value = "5" name = "ch">
<button>CLICK</button>
<script>
</script>
[코드 완성 예시]
더보기
<script>
const checkAll = document.getElementById("checkAll");
const box = document.getElementsByClassName("box");
//첫번째 외 체크박스 선택시 첫번째 체크박스 선택 && 외 선택 해제시 첫번쨰 체크박스 해제
for(let i=0; i < box.length ; i++) {
box[i].addEventListener("click", function(){
let count = 0;
for(let j=0; j<box.length; j++) {
if(box[j].checked) {
count += 1;
}
}
if(count >= 4) {
checkAll.checked = true;
} else {
checkAll.checked = false;
}
})
}
//첫번째 박스체크하고 클릭 누르면 나머지도 체크 & 첫번쨰 누르면 모두 해제
function push() {
if (checkAll.checked) {
for(let i=0; i<4 ; i++) {
box[i].checked = checkAll.checked;//true == checkAll.checked
}
} else {
for(let i=0; i<4 ; i++) {
box[i].checked = checkAll.checked;//true == checkAll.checked
}
}
}
</script>
① 이해가 안될 경우 모든 내용을 한국말로 실행, 콘솔창에 입력
② 공통 특징인 class element 활용(배열화)과 동시에 click event 사용
③ for구문의 특징 이해 및 활용
⇒ 클릭시 for 구문 내부에 모든 내용이 한 바퀴만 돌게 됨
※ 루프와 조건문의 조합
※ 상태 동기화
④ function() 기능이 언제 이루어지는지 확인 및 인지
⇒ 클릭시 발동됨
※ 이벤트 핸들링과 함수 범위
⑤ 언제 체크를 이루게 할 것인지
⑥ 이벤트 리스너 클릭부분과 체크박스 부분을 별도로 나누어 생각
⇒ 체크했을때 어디를 한바퀴 돌면서 점검할 것인지
※ 루프와 조건문의 조합
※ 상태 동기화