교재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
402	span과 text-align : center; 에 관한 문제입니다.	승	2019.10.15	279642
401	11장 6번	으엉	2019.11.27	187650
400	placeholder속성 1	khl	2017.04.08	85730
399	11장 6번 1	mj	2018.11.29	67566
398	실습문제 8-2 (3)	13412	2018.11.08	15718
397	웹 프로그래밍 책 답안지 1	mumu	2017.03.06	14076
396	살다 살다 답을 반쪽만 주는 책은 처음입니다 1	음음	2019.01.24	8848
395	Open Challenge 와 실습문제 자료 2	김원상	2017.04.29	7446
394	14장 예제 사라진 건가요 1	...	2021.03.09	4078
393	localhost 관련 문의 3	소년정	2018.02.20	4039
392	페이지 247 에 있는 Open Challenge 05 의 CSS3로 태그 배치하기를 공부하고 있는데 질문드립니다. 1	워니고	2018.03.28	3878
391	ㅠㅠ..질문좀 드리겠습니다.. 1	은성	2017.04.18	3835
390	연습문제 답안지 2	vdncnck	2017.03.28	3265
389	짝수번 정답 3	idididid	2017.12.24	3135
388	8장 연습문제 실습문제 4장 2	student	2017.05.08	2872
387	10장 오픈챌린지 5	은성	2017.04.07	2247
386	open challenge 05 2	hardworking	2017.03.29	2224
385	5장 연습문제 홀수 번 질문 1	채XX	2019.06.17	1997
384	HTML을 열심히 공부중인 학생입니다 3	열심히 하자	2018.05.30	1962

쓰기

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

QnA

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

LOGIN