교재425page 9장 오픈챌린지 질문입니다. [재수정해서 올립니다.]

조회 수 770 댓글 3

<!DOCTYPE html>
<html>
<head>
<title>마우스 클릭 연습</title>
<style>
table { border : 1px solid blue; border-collapse : collapse; }
tr, td { border : 1px solid blue; width : 50px; height : 50px; }
</style>
</head>
<body>
<h2>마우스 클릭 연습</h2>
<hr>
<script>
<table>
for(var i = 0; i<10; i++) {
<tr>
for(var j=0; j<10; j++) {
<td></td>
}
</tr>
}
</table>
</script>
</body>
</html>

일단 10x10셀을 만들기위하여 여기까지 코드를 작성했지만 실행을 시켜보니 화면상에 10x10 테이블이 보이질 않습니다.

왜 그러는건지 해결방법을 알려주시면 감사하겠습니다.

위로 아래로 댓글로 가기 수정 삭제

✔댓글 쓰기

댓글 쓰기

에디터 사용하기 닫기

Comments '3'

?
관리자 2019.08.22 10:00

이 문제는 복합적인 지식을 요하는 문제입니다. HTML 태그, 자바스크립트, 그리고 태그의 동적 추가, id 속성 사용하기, 이벤트 등 그래서 약간 어렵습니다.

1. 아래 코드를 보죠
script>
<table>
for(var i = 0; i<10; i++) {
<tr>
for(var j=0; j<10; j++) {
<td></td>
}
</tr>
}
</table>
</script>

<script> </script>태그 내에는 자바스크립트 코드만이 들어 갑니다. 그런데 <table> 태그로 들어 있습니다. 아마도 브라우저는 처음부터 이 HTML 문서를 오류처리할 겁니다.
그리고 for 문을 들여다 보면
for(var i = 0; i<10; i++) {
<tr>

for 문은 자바스크립트 언어의 요소입니다. <tr> 태그이고요. 앞의 문장은 많이 잘못된 문장입니다.
아마도 이렇게 고쳐야할 것 입니다.
for(var i = 0; i<10; i++)
document.write("<tr>");

2. 질문 속에 들어 있는 소스 코드를 보면, 자바 스크립트와 HTML 태그에 대한 공부 후에 문제를 풀면 하는 생각을 해봤습니다.
공부가 덜 되어 있는 상태로 문제를 풀면 불필요한 시간을 많이 낭비하게 됩니다.
6, 8장에 대한 공부(document.write(), DOM 트리)를 먼저 하는 것이 좋을 듯합니다.

수정 삭제 댓글
?
asdf 2019.08.22 16:54

<!DOCTYPE html>
<html>
<head>
<title>마우스 클릭 연습</title>
<style>
table { border : 1px solid blue; border-collapse : collapse; }
tr, td { border : 1px solid blue; width : 50px; height : 50px; }
</style>

<script>
var last;
function randomMove() {
var i = Math.floor(Math.random()*100);
document.images[i].src="apple.png";
last = i;
}

function clickMove(e){

document.images[last].src="";
randomMove();

}
</script>
</head>

<body onload="randomMove()">
<h2>마우스 클릭 연습</h2>
<hr>
<script>

document.write("<table>");
for(var i = 0; i<10; i++) {
document.write("<tr>");
for(var j=0; j<10; j++) {
document.write("<td>");
document.write("<img src="" onclick="clickMove(event)">");
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");

</script>
</body>
</html>

코드를 이렇게 수정해보아도 브라우저상에 테이블이 보이질않는대 혹시 무슨 문제라도 있는건가요???
<head>태그 안에도 <script>태그가 있고 <body>태그안에도 <script>태그가 있어서 그런건가요??

수정 삭제 댓글
?
관리자 2019.08.23 00:02

현재 문제의 원인은다음 라인에 있습니다.

document.write("<img src="" onclick="clickMove(event)">");
" " 안에 다시 " "를 넣고자 하는 경우 ' '로 해야 합니다.

다음과 같이 수정하면 됩니다.( 책 270페이지를 꼭 참고하세요.)
document.write("<img src=' ' onclick='clickMove(event)'>");

그런데 한 가지 조언을 한다면 공부가 덜 된 상태로 문제에 계속 도전하면
많은 시간이 소요됩니다. 마음이 급해서 빨리 나가고 싶겠지만, 결국 시간은 더 걸리게 될 겁니다
책의 앞 부분부터 차분히 하나씩 정확히 공부하고, 그 장의 연습문제들을 차분히 풀어가는 과정이
좋을 것 같은데, 한 번 생각해 보세요.

수정 삭제 댓글

QnA

공부하면서 궁금했던 것을 질문해보세요.

List of Articles
번호	제목	글쓴이	날짜	조회 수
공지	읽어주세요! 연습문제 및 실습문제 정답 공개에 관한 공지입니다.	관리자	2017.06.20	18282
283	실습문제 9-7번 답안지를 보고 질문있습니다. 2	muuum	2018.10.23	300
282	실습문제 9-6번 문제중에 5% 증가는 어떻게 해야하나요? 2	muuum	2018.10.24	150
281	실습문제 9-8번 질문 있습니다. 2	muuum	2018.10.24	326
280	8장 오픈첼린지 질문드립니다! 1	hola	2018.10.31	442
279	이 책을 다 본 뒤 어떤 공부를 더 하는게 좋을까요? 1	muuum	2018.10.31	526
278	답안이 없는 책이라니 ;;; 2	이준석	2018.11.01	408
277	바닐라js 란 것에 대해 질문이 있습니다. 2	muuum	2018.11.01	546
276	8장 실습문제 2번 (2),(3) 어떻게해야하나여? 5	187104343	2018.11.08	380
275	실습문제 8-2 (3)	13412	2018.11.08	15970
274	8장 실습문제 8번 질문드립니다. 3	메론	2018.11.11	525
273	8장 실습문제8번 질문있습니다. 1	빼빼로	2018.11.15	372
272	예제 9-12질문이요! 1	ㅇㅇ	2018.11.27	68
271	open 10장 1	sigwq	2018.11.27	448
270	11장 실습문제 6번 질문입니다. 1	메론	2018.11.29	884
269	11장 6번 1	mj	2018.11.29	67584
268	실습문제 11장 4번 1	ㅎㅇ	2018.12.02	471
267	실습문제 8장 3번 문제 질문입니다. 2	Joahgng	2018.12.06	261
266	9장 연습문제8번 1	한정수	2018.12.13	336
265	실습문제 4장의 8번 2	ㅁㄴㅇㄹ	2018.12.14	334
264	6장 실습문제 4번 질문 3	질문	2018.12.18	277

쓰기

교재425page 9장 오픈챌린지 질문입니다. [재수정해서 올립니다.]

QnA

공부하면서 궁금했던 것을 질문해보세요.

LOGIN