교재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	18274
403	오픈챌린지 5장	ces	2024.04.19	15
402	책을 종이책으로 구매했는데 1	ddd	2024.03.21	94
401	저기 황기태 저자님 1	방문자	2024.02.10	145
400	428p 예제 9-21 키이벤트 응용 질문이 있습니다. 3	아인슈페너	2023.11.24	76
399	연습문제 3장 5번 문제 1	seungjun	2023.10.26	127
398	2장 오픈챌린	cmc	2023.09.17	148
397	웹서버소프트웨어 1	park	2023.04.15	197
396	Sublime Text, VS code IDE설명 update바랍니다 1	삼오칠	2023.04.15	86
395	Atom은 IDE 리스트에서 삭제해주세요. 1	삼오칠	2023.04.15	84
394	예제 2-25 <video>태그로 비디오 삽입 2	코딩어렵다	2023.04.13	87
393	예제 2-22 2개의 인라인 프레임을 가진 웹 페이지(91p) 2	코딩어렵다	2023.04.12	54
392	비정형 표 만들기 다운로드 1	애치	2023.04.04	103
391	오픈챌린지 5	ab	2023.02.17	168
390	오픈챌린지 1	ab	2023.02.16	136
389	form 태그 1	열공이	2023.01.31	88
388	예제 2-21 질문입니다. 1	열공이	2022.12.23	117
387	계산기 문제 변형 문의	Mikael	2022.12.13	56
386	6장 이론문제 9번 지역,전역,블록변수 질문이요.	문신	2022.12.10	59
385	2장 이론 문제 답 문의	MIKAEL	2022.12.09	240
384	2장 이론문제 4번 답 문의	MIKAEL	2022.12.09	82

쓰기

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

QnA

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

LOGIN