WEB 3일차 두번째) 자바스크립트를 이용한 구구단찍기

WEB/JavaScript 2012. 9. 13. 00:58

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>구구단</title>

<script type="text/javascript">

        function execute(){

               // 실행을 클릭시 div target에 구구단이 나오도록

               var target = document.getElementById("target");

               var html ="<table align='center' border ='1' width='800'>";

               html += "<tr align='center'>"

               html += "<th>구분</th>"

               for(var i=2; i<10; i++){

                       html += "<th>" + i + "단</th>";

               }

               html += "</tr>";

               for(var i=1; i<10; i++) {

                       html += "<tr align='center'>"

                              html += "<th> X" + i +"</th>";

                       for(var j=2; j<10; j++){

                              html += "<td>"+ j + "*" + i + "=" + i*j + "</td>";

                       } html += "</tr>";

               }

               html += "</table>";

               target.innerHTML = html;

        }

</script>

</head>

<body>

        <input type="button" value="실행" onclick="execute();" />

        <div id="target"></div>

</body>

</html>


② 실행 화면

구구단



저작자표시

'WEB > JavaScript' 카테고리의 다른 글

WEB 3일차 다섯번째) 정규식을 이용한 회원가입테이블 유효성검사  (0) 2012.09.13
WEB 3일차 네번째) 자바스크립트의 정규식  (0) 2012.09.13
WEB 3일차 세번째) 자바스크립트의 DATE 함수  (0) 2012.09.13
WEB 3일차 첫번째) 자바스크립트  (0) 2012.09.13
블로그 이미지

모데스티

,

WEB 3일차 첫번째) 자바스크립트

WEB/JavaScript 2012. 9. 13. 00:56

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>자바스크립트</title>

        <script type="text/javascript">

               // 한줄주석

               /* 여러줄 주석 */

               var no=1; // 오로지 var 타입의 변수만 존재, 일종의 멤버변수

               function hello(){

                       // alert창은  Modal dialog : 경고용으로 사용

                       alert("안녕~세상아~!!!"); // 내장 함수(메소드)

                       // DOM(Document Object Model) : HTML을 Tree형태의 객체로 구조화 한 것

                       // getElementById : Id로 element를 찾아 가지고 온다.

                       var target = document.getElementById("target");

                       alert(target);

                       // innerHTML 같은 id를 갖는 태그안에 '안녕!!!!'을 넣게 된다.

                       target.innerHTML='안녕!!!!';

                       }

                       // gugu div에 계속해서 클릭할 때마다 증가된 숫자가 증가하도록

               function add() {

                              var gugu = document.getElementById('gugu'); // 꼭 쓰도록 하자!!!

                              if(no%10==0){

                                      gugu.innerHTML += '<h5>ㅋㅋㅋ</h5>';

                              } else {

                                      gugu.innerHTML += '<input type="button" value="버튼'+no+'" />';

                              }

                              no++;

                       }      

        </script>

</head>

<body>

        <h1 id="target"></h1>

        <!--

               on으로 시작하는 것은 javascript에서만 사용

               javascript는 Event Driven Model : 이벤트가 발생할 경우 행동을 한다.

        -->

        <input type="button" value="눌러줘!" onclick="hello();"/>

        <div id="gugu" onclick="add();" style="border-style: solid;">

               0

        </div>

</body>

</html>


② 실행 화면

자바스크립트

0


저작자표시

'WEB > JavaScript' 카테고리의 다른 글

WEB 3일차 다섯번째) 정규식을 이용한 회원가입테이블 유효성검사  (0) 2012.09.13
WEB 3일차 네번째) 자바스크립트의 정규식  (0) 2012.09.13
WEB 3일차 세번째) 자바스크립트의 DATE 함수  (0) 2012.09.13
WEB 3일차 두번째) 자바스크립트를 이용한 구구단찍기  (0) 2012.09.13
블로그 이미지

모데스티

,

WEB 2일차 여섯번째) div로 레이아웃 잡기

WEB/CSS 2012. 9. 13. 00:54

① 소스 내용

<?xml version="1.0" encoding="EUC-KR" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR" />

<title>div로 레이아웃 잡기</title>

        <style>

               /* div {

                       border: thin red solid;

                      

               } */

               .content {

                       position: absolute;

                       margin-left: 155px;

                       width: 645px;

               }

               .menu {

                       width: 150px;

                       position: absolute;   

               }

               .out {

                       width: 800px;

                       /* 위 아래는 0px 좌우로는 auto */

                       margin: 0px auto;

               }

               div.menu ul {

                       list-style: none;

                       padding: 0px;

                       margin: 0px;

               }

               div.menu ul li:HOVER {

                       /* background-color: #E0E0E0; */

                       background-image:url("teayeon2.jpg");

                       background-position: 50%;

               }

        </style>

</head>

<body>

        <div class="out">

               <div class="menu">

                       <ul>

                              <li>꽃게탕</li>

                              <li>스테이크</li>

                              <li>깐풍기</li>

                              <li>탕수육</li>

                              <li>타르트</li>

                       </ul>

               </div>

               <div class="content">

                       <img src="teayeon2.jpg" alt="태연" width="150" />

                       태연

               </div>

        </div>

</body>

</html>

 

 


② 실행 화면

div로 레이아웃 잡기

  • 꽃게탕
  • 스테이크
  • 깐풍기
  • 탕수육
  • 타르트
태연 태연


저작자표시

'WEB > CSS' 카테고리의 다른 글

WEB 2일차 다섯번째) div  (0) 2012.09.13
WEB 2일차 네번째) CSS 두번째  (0) 2012.09.13
WEB 2일차 세번째) CSS 첫번째  (0) 2012.09.13
블로그 이미지

모데스티

,

공지사항

태그목록

글 보관함

달력

«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31

티스토리툴바