교재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	18281
403	혹시 예전 서적인 "DHTML + 자바스크립트 프로그래밍"의 예제를 받을 수 있는 방법은 없는지요? 2	비만타쿠미	2018.09.26	116
402	한글html 1	키보드 향기	2020.03.29	922
401	한글 타이틀이 깨져 보입니다. 1	안스가리오	2020.01.06	116
400	표와 div span 4	키보드 향기	2020.04.05	109
399	페이지에 첨부하고 싶은 이미지의 위치에대해 궁금합니다 1	정택희	2017.02.13	277
398	페이지 247 에 있는 Open Challenge 05 의 CSS3로 태그 배치하기를 공부하고 있는데 질문드립니다. 1	워니고	2018.03.28	3878
397	테스트	관리자	2019.08.30	171
396	태그와 속성 2	tc0712	2021.09.08	72
395	크롬 오디오 자동재생 관련 질문입니다! 1	^_^	2018.09.30	449
394	코드 잘못된 부분을 봐주시면 정말 감사하겠습니다 1	입문한 사람	2020.04.01	607
393	캔버스 관련 질문 1	원그리기	2021.08.22	101
392	챕터2 연습문제 8번	김석현	2018.04.22	156
391	챕터 3의 10번 문제 1	컴공과 입문	2018.03.20	125
390	책을 종이책으로 구매했는데 1	ddd	2024.03.21	101
389	책을 마치며 7	은성	2017.04.13	492
388	책 151p 3장 오픈챌린지 문제질문입니다. 3	이상민	2019.07.19	239
387	짝수번 정답 3	idididid	2017.12.24	3135
386	질문입니다 1	1213	2018.03.06	420
385	질문드립니다. 1	ㅇㅇ	2020.06.03	306
384	질문 있습니다. 2	흠	2021.08.19	134

쓰기

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

QnA

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

LOGIN