'프로그래밍/Javascript'에 해당되는 글 27건

제목 날짜
  • Javascript 배경 색깔 자동 변경 소스 2022.01.12
  • JavaScript 오류 지점 찾아내기(4) 2016.04.04
  • JavaScript mouse event 컨트롤 2012.04.25
  • Input, Naver 예제 2012.04.25
  • Form, DOM 2012.04.24
  • Screen, Location, History, link, image 2012.04.24
  • JavaScript BOM, Event 2012.04.23
  • JavaScript 조건문 사용방법 2012.04.23
  • JavaScript 배열, 날짜, 함수 호출(C#메서드와 동일) 2012.04.23
  • JavaScript 인라인, 내장, 외부, 자료형, 문자열 2012.04.23

Javascript 배경 색깔 자동 변경 소스

 

Javascript 배경 색깔 자동 변경 소스

html body 태그 백그라운드 색깔이 자동으로 변경되는 코드를 Javascript 소스를 간단히 작성해 보았습니다. jQuery를 활용하지 않고 순수 Javascript만으로 구현해 해당 소스를 복사해 .html 파일 확장자로 저장 하시고 브라우저에서 확인해 보시면 됩니다.

 

처음엔 색상 코드를 배열로 저장해 랜덤하게 뽑아내려고 했지만, 인터넷에 있는 자료 중 색깔 코드가 자동으로 생성되는 소스를 활용해 코드를 작성했습니다. 소스의 흐름은 간단합니다. change 함수가 무한 반복되며 실시간으로 랜덤하게 색상이 변경되는 모습을 보기 위해 1초에 한 번씩 코드가 실행 되도록 코드를 작성했습니다.


코드의 상세 내용은 주석에 있는 내용을 참고하시면 이해하실 수 있으며 무한반복 되지만 멈추기 위한 방법이 필요한 분들이 있을 수 있다는 판단에 clearTimeout을 활용하는 구문도 작성해 보았습니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>자동으로 백그라운드 색깔이 변경 되도록 하는게 목표 현재는 10000번돔.</title>
</head>
<body>
</body>
</html>
<script type="text/javascript">	
	var number = 0;//특정 갯수만큼 반복하고 멈추게 하기 위해서
	function change() {
		const roop = setTimeout(change, 1000);//1초에 한번씩 실행

		//자동색상코드 생성 코드 이건 인터넷에서 가져온거
		const randomColor = Math.floor(Math.random()*16777215).toString(16);
		document.body.style.backgroundColor = "#" + randomColor;

		if(number >= 10000){//만번만 돌아
			clearTimeout(roop);
		}
		number++;
	};

	change();//clearTimeout 조건이 될떄까지 반복
</script>

 

결과화면

결과화면은 아래 이미지와 같이 표시 됩니다. 현재 소스 기준으로는 10000번 반복 됩니다.


 

해당 소스를 파일로도 필요하신 분들은 파일을 다운로드받아서 확인해 보셔도 됩니다. 간단한 소스지만 개인적으로 재밌을 것 같다는 생각에 코드를 작성해 보았으니 혹시라도 필요하신 분들은 참고하시면 좋을 것 같습니다.

auto_color.html
0.00MB

저작자표시비영리변경금지

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

JavaScript 오류 지점 찾아내기

JavaScript 오류 지점 찾아내기

예전부터 소스코드를 칠때 JavaScript언어의 디버깅 때문에 많이 힘들었을 겁니다.

물론 저도 마찬가지였고요.


JavaScript 구문이 오류가 나면 예전엔 어는 부분에서 에러가 낫는지 찾기 힘들었습니다. 웹브라우져는 정상적으로 구동하는데 JavaScript 오류 구문 때문에 제대로 웹프로그램을 짤수 없었습니다.

그래서 예전에는 의심이 가는 JavaScript 구문에 다음처럼 alert("어디까지왔니?"); 구문을 뛰워서 정상적으로 팝업창에 alert가 뜨면 거기까진 문제가 없다고 보고 점차 코드를 찍어서 일일이 확인 했습니다.


하지만 이제 웹 브라우져들의 기능이 강력해져 JavaScript언어에 흐름이 어디까지 갔는지도 체크 해볼수도 있고 디버깅 하기도 쉬워졌습니다.



간단한 구문으로 크롬 환경에서 JavaScript 디버깅을 해보겠습니다.


Source.html

<!DOCTYPE html>

<html>

<head>

    <script type="text/javascript">

        function clickcheck() {

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

                alert(i);

            }

        }

    </script>

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

    <title></title>

        <meta charset="utf-8" />

</head>

<body>

    <button onclick="clickcheck()">클릭</button>

</body>

</html>




위 구문은 단순히 button에 JavaScript 함수내에 숫자를 화면에 출력하는 구문입니다.


그다음 크롬 브라우져를 해당 html 파일을 연뒤에 F12를 누르게 되면 다음과 같은 화면이 나오는데 아래 표시된 빨간색 네모칸에 Sources 부분을 누릅니다. 




Source 메뉴를 누르게 되면 다음과 같은 메뉴들이 나오는데 아래 이미지에 나온대로 

1번 네모칸에 표시된대로 디버깅할 위치를 지정한다음 

2번 클릭을 눌러 JavaScript 구문을 실행 시킨뒤에 

3번을 눌러 해당 JavaScript 구문을 한단계씩 실행 시킬수 있습니다.


이렇게 되면 해당 구문을 찍어보면서 정확한 값을 확인할수 있습니다. 3번을 눌르면 한단계씩 소스가 실행되기 때문에 소스의 흐름을 정확히 파악할수 있습니다.




다음은 JavaScript 오류를 일부러 내보겠습니다.

F12번을 눌러 실제로 오류를 내보면 다음과 같이 오류 구문이 정확히 표시가 됩니다. 어느구문에서 오류가 났는지요. 그러면 JavaScript 오류도 이제 일일히 alert를 찍어보면서 소스를 하나씩 확인해 볼 필요가 없습니다! 해당 오류 구문을 누르게 되면 아래 이미지 처럼 오류가 난곳을 보여줍니다.




게다가 직접 소스코드도 나오니 이보다 편할수가없네요



JavaScript 언어를 작성하고 테스트를 하려면 먼저 소스코드를 치고 그다음 웹에서 매번 확인을 하다보면 작업 속도도 느려지고 소스 코딩을 정확히 했는지도 궁금 합니다.


그럴땐 F12를 누르고 Console메뉴에서 직접 JavaScript 구문을 넣어서 테스트도 해볼수 있습니다. 이곳에서 테스트를 미리 하고 소스에 적용하면 매우 편할 것입니다.




이번엔 익스플로러 환경에서 JavaScript 디버깅을 해보겠습니다.

크롬과 별로 다를게 없습니다. 하지만 크롬이 더강력합니다. 직접 써보시면 알겁니다. 더편하고 빠르고 오류도 많이 없으니깐요


스크립트 메뉴를 누르고 break 지점을 빨간색 동그라미 표기된곳을 누른뒤에 디버깅 시작을 누릅니다.

그이후 JavaScript를 실행하기 위해서 버튼을 눌러줍니다. 이런식으로 해도 진행은 되나 계속 작업종료가 되버리는 현상이 나더군요 




아래 이미지 처럼 JavaScript 소스 코드를 아래 구문에 넣고 화살표 방향을 실행을 누르면 익스플로러도 바로 JavaScript 구문을 실행할수 있습니다.





아무래도 익스플로러 보단 JavaScript를 디버깅 하기위해서는 크롬 환경의 브라우져를 쓰실것을 추천합니다.

저작자표시비영리변경금지
  • 이윤재
    2016.07.22 11:15

    안녕하세요

    • Favicon of https://zzarungna.com BlogIcon zzarungna
      2016.08.03 02:11 신고

      네 안녕하세요~

  • Favicon of http://sgjlove.egloos.com/ BlogIcon 류중근
    2017.12.22 01:17



    우와~

    자바스크립트에 에러가 나서 방금 저 황천길 떠올렸답니다.

    아주 옛날엔 그것 스크립트에 '에러 위치' 잡아주는 코드 넣어주면 문장이 실행되지 않을 때 코드 어느 라인에서 에러가 났다고 알려줬는데 오늘 에러가 난 건 그런 거가 듣지도 않습니다.

    그래서 정말이지 난감했었거든요.

    그랬는데 그대께서 알려주신 대로 크롬 열고서 거기서 웹 문서 불러들인 뒤 F12 누르고 디버그가 아닌 콘솔 찍으니까 순식간에 곧바로 에러 위치를 알려줍니다.

    흐흐… 얼마나 좋았는지 몰라요.

    무슨 특별한 에러도 아니고 마지막으로 저장하면서 자판에서 손가락 실수로 소스에 아라비아 숫자가 하나 찍혀버렸더라고요.

    아무리 들여다봐도 찾을 수 없었던 게 크롬에서는 눈 깜짝할 사이에 찾아주니 저 순식간에 천당 지옥 오갔답니다.

    하마터면 저 오늘 밤에 7백 삼십여 줄이나 되는 코드 밤새 들여다보다가 대가리 터질 뻔했습니다.

    그런 점에서 그대 고맙고도 또 고맙습니다.

    그럼 날로 즐거우시고 뿌듯한 일상이시길…

    • Favicon of https://zzarungna.com BlogIcon zzarungna
      2017.12.22 23:23 신고

      그런 경우 많이 있죠.. 하필 아라이바아 숫자가 찍혀서 오류를 찾는데 더 쉽지 않으셨겠습니다.

      좋은 댓글 달아 주셔서 감사 하고 도움이 되는 정보가 된것 같아 저도 뿌듯하네요.

      즐거운 연말 보내시기 바랍니다~~ :)

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

JavaScript mouse event 컨트롤



JavaScript mouse event 컨트롤


<html>

<head>

    <title>메뉴</title>

 

       <style type="text/css">

             #menu div

             {

                    font-size:20px;

                    font-family:돋움;

                    font-weight:bold;

                    border:5px solid green;

                    margin-bottom:1px;

                    padding:5px;

                    background-color:White;

                    width:190px;

             }

            

             #sub1, #sub2, #sub3

             {

                    font-size:17px;

                    font-family:돋움;

                    font-weight:bold;

                    border:3px solid pink;

                    padding:5px;

                    width:190px;

                    background-color:White;

                    position:absolute;

                    display:none;

             }

            

             #sub1

             {

                    left:217px;

                    top:8px;

             }

            

             #sub2

             {

                    left:217px;

                    top:52px;

             }

            

             #sub3

             {

                    left:217px;

                    top:96px;

             }

       </style>

 

       <script type="text/javascript">

             function Init()

             {

                    for(i=1; i<=3; i++)

                    {

                           var menu = document.getElementById("menu" + i);

 

                           menu.setAttribute("no", i);

 

                           //i값을 그냥 받을수 없다. 다시 이벤트가 호출되는 순간엔 i값이 죽어버렸기 때문이다.

                           //BOM에서 안되는 것중 하나 그래서 DOM 으로 접근하여 i값을 가져온다.

 

                           menu.onmouseover = function ()

                           {

                                 document.getElementById("sub" + event.srcElement.getAttribute("no")).style.display = "block";

                           };

                          

                           menu.onmouseout = function ()

                           {

                                 document.getElementById("sub" + event.srcElement.getAttribute("no")).style.display = "none";

                           };

 

                           //서브메뉴에 진입했을때

                           document.getElementById("sub" + i).onmouseover = function ()

                           {

                                 event.srcElement.style.display = "block";

                           };

 

                           document.getElementById("sub" + i).onmouseout = function ()

                           {

                                 event.srcElement.style.display = "none";

                           };

 

                    }

                   

 

//                  var menu = document.getElementById("menu2");

//                  menu.onmouseover = function ()

//                  {

//                         document.getElementById("sub2").style.display = "block";

//                  };

 

//                  menu.onmouseout = function ()

//                  {

//                         document.getElementById("sub2").style.display = "none";

//                  };

 

//                  var menu = document.getElementById("menu3");

//                  menu.onmouseover = function ()

//                  {

//                         document.getElementById("sub3").style.display = "block";

//                  };

 

//                  menu.onmouseout = function ()

//                  {

//                         document.getElementById("sub3").style.display = "none";

//                  };

 

             }

       </script>

 

</head>

<body onload="Init();">

 

       <div id="menu">

             <div id="menu1">가전제품/생활용품</div>

             <div id="menu2">운동용품/건강제품</div>

             <div id="menu3">유아용품/아동용품</div>

       </div>

 

       <div id="sub1">

             TV / 냉장고<br />

             세탁기 / 청소기<br />

             전자렌지 /오븐<br />

             오디오 / 비디오

       </div>

 

       <div id="sub2">

             조깅 / 마라톤<br />

             야구 / 배구 / 축구<br />

             비타민 / 건강보조식품<br />

       </div>

 

       <div id="sub3">

             유아용품 1단계<br />

             유아용품 2단계<br />

             유아용품 3단계<br />

             유아용품 4단계

       </div>

 

</body>

</html>

 

 

저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

Input, Naver 예제



<!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>

    <title>Input</title>

 

       <script type="text/javascript">

             function Test()

             {

                    //C# 이벤트 핸들러 인자

                    //1. object sender : 이벤트 발생 객체

                    //2. EventArgs args : 이벤트 부가 정보

 

                    //Javascript

                    //1. event.srcElement

                    //2. event

 

                    //마우스 -> 좌표

                    //A. 문서의 좌측 상단이 기준(body)

                    //alert(event.x + " : " + event.y);

 

                    //B. 화면 기준.

                    //alert(event.screenX + " : " + event.screenY);

 

                    //C. 클릭이벤트가 발생하는 객체 기준(이미지)

                    alert(event.offsetX + " : " + event.offsetY);

 

                    //마우스 버튼의 종류

                    //alert(event.button);

             }

 

             function Test2()

             {

                    //event.keyCode - 문자코드 반환

                    if (event.keyCode >= 48 && event.keyCode <= 57)

                    {

                           //현재 입력된 숫자의 문자코드를 반환

                          document.getElementById("label1").innerText += event.keyCode + "->";

                    }

                    else

                    {

                           //alert("NaN!!");

                           //행동 자체를 캔슬할떄 자주사용 주민번호 입력때 유용

                           event.returnValue = false;

                    }

             }

       </script>

 

</head>

 

<body oncontextmenu="event.returnValue=false;">

       <h3>이미지</h3>

       <img src="images/adore.png" width="250" border="1" onmousedown="Test();" />

 

       <hr />

 

       <input type="text" id="txt1" size="30" onkeydown="Test2();" />

       <br />

       <div id="label1"></div>

 

</body>

</html>

 

 





<!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>

    <title>네이버~</title>

 

       <style type="text/css">

             #txtSearch

             {

                    /*

                    이미지를 파일하나에서 보관해서 좌표로 접근하는 이유는

                    관리하는측면에서 파일일 많아지면 관리하기 힘들기 때문에 하나의 파일에서 좌표로 접근하며

                    속도도 훨씬 더빠르다.

                    서버에서 이미지를 캐쉬에저장

                    미투데이를 보여줘야할때 예전에 이미 캐쉬에 저장 되있기 때문에

                    다시 다운받아오지 않기 때문에 속도가 훨씬 빠르다.

 

                    서버나 클라이언트 입장에서 한개의 파일을 주고받는 것이 비용이 훨씬 저렴해 진다.

                    */

                    border:7px solid lightgreen;

                    width:300px;

                    background-image:url(images/sp_fms.gif);

                    background-repeat:no-repeat;

                    background-position:center -20px;

                   

                    /*

                    background-position:center -40px;

                    background-position:center -60px;

                    */

             }

       </style>

 

       <script type="text/javascript">

             function Change()

             {

                    var txt = document.getElementById("txtSearch");

 

                    if (event.type == "focus")

                           txt.style.backgroundImage = "url()";

                    else if (event.type == "blur")

                    {

                           if(txt.value.length < 10)

                           txt.style.backgroundImage = "url(images/sp_fms.gif)";

                    }

             }     

       </script>

 

</head>

<body>

       <!--

       C# : Enter 의 반대 Leave

       Javascript : onfocus, onblur

       -->

       <input type="text" id="txtSearch" onfocus="Change();" onblur="Change();" />

 

</body>

</html>

 

 

저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

Form, DOM



<!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>

    <title>Form</title>

 

       <style type="text/css">

             #list1

             {

                    width:600px;

                    border:1px solid gray;

                    border-collapse:collapse;

             }

             #list1 td

             {

                    border:1px solid gray;

                    font-size:12px;

                    padding:2px;

             }

             #list1 #header

             {

                    font-weight:bold;

                    text-align:center;

                    background-color:Yellow;

             }

       </style>

 

 

       <script type="text/javascript">

 

             function Test(f)

             {

                    //var txt1 = document.forms[0]

                    //var txt1 = document.forms["form1"]

                    //var txt1 = f.txt1;

                    var txt0 = document.form1.txt0;

                    txt0.value = "텍스트값";

 

                    var cb1 = f.cb1;

                    cb1.checked = true;

             }

 

 

             function Test2()

             {

                    //BOM에서 form의 자식을 배열로 제공..

                    var list = document.form2.elements;

                    //alert(list.length);

 

                    for (i = 0; i < list.length; i++)

                    {

                           //list[i].value = "테스트" + i;

                           //alert(list[i].type); //type 지정한것 확인

                           //alert(list[i].className); //class네임 지정하여 준것

                           if (list[i].type == "text" && list[i].className == "t1")

                           {

                                 list[i].value = "하하하";

                           }

 

                          

                    }

             }

 

             function Test3()

             {

                    alert(document.form3.txt.length);

             }

 

             function Check(cb)

             {

                    //alert(cb.checked)

 

                    //모든 메일앞에 있는 체크박스들..

                    var cbList = document.form4.cbMail;

 

                    //if (cb.checked)

                    //{

                    //for -> true

                    //}

                    //else

                    //{

                    //for -> false

                    //}

 

                    var b = cb.checked;

 

                    for (i = 0; i < cbList.length; i++)

                    {

                           cbList[i].checked = b;

                    }

             }

 

       </script>

</head>

<body>

       <!--Ex17_form.htm-->

       <form name="form1">

             <input type="text" name="txt0" /><br />

             <input type="checkbox" name="cb1" /><br />

             <input type="button" value=" 테스트 " onclick="Test(this.form);" />

       </form>

 

       <hr />

 

       <form name="form2">

             <!--Bom 태그엔 br 태그는 BOM태그에 없기 때문에 자식으로 취급하지 않는다.-->

             <input type="text" name="txt1" /><br />

             <input type="text" name="txt2" class="t1" /><br />

             <input type="text" name="txt3" class="t1" /><br />

             <input type="text" name="txt4" /><br />

             <input type="text" name="txt5" class="t1" /><br />

             <input type="button" value="테스트" onclick="Test2();" />

       </form>

 

       <hr />

 

       <form name="form3">

             <input type="text" name="txt" /><br />

             <input type="text" name="txt" /><br />

             <input type="button" value="테스트" onclick="Test3();" /><br />

       </form>

       <br /> <br />

 

       <h3>받은 편지함</h3>

      

       <form name="form4">

             <table id="list1">

                    <tr id="header">

                           <td><input type="checkbox" onclick="Check(this);" /></td>

                           <td>제목</td>

                           <td>보낸사람</td>

                           <td>받는사람</td>

                           <td>날짜</td>

                    </tr>

 

                    <tr>

                           <td><input type="checkbox" name="cbMail" /></td>

                           <td>이메일 테스트 입니다.</td>

                           <td>test@test.com</td>

                           <td>administrator@naver.com</td>

                           <td>2012.05.20 15:20:30</td>

                    </tr>

 

                    <tr>

                           <td><input type="checkbox" name="cbMail" /></td>

                           <td>이메일 테스트 입니다.</td>

                           <td>test@test.com</td>

                           <td>administrator@naver.com</td>

                           <td>2012.05.20 15:20:30</td>

                    </tr>

 

                    <tr>

                           <td><input type="checkbox" name="cbMail" /></td>

                           <td>이메일 테스트 입니다.</td>

                           <td>test@test.com</td>

                           <td>administrator@naver.com</td>

                           <td>2012.05.20 15:20:30</td>

                    </tr>

 

                    <tr>

                           <td><input type="checkbox" name="cbMail" /></td>

                           <td>이메일 테스트 입니다.</td>

                           <td>test@test.com</td>

                           <td>administrator@naver.com</td>

                           <td>2012.05.20 15:20:30</td>

                    </tr>

             </table>

       </form>

       <hr />

 

</body>

</html>

 




DOM 



<!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>

    <title>DOM</title>

 

       <style type="text/css">

             #list1 li

             {

                    font-size:12px;

                    margin-bottom:5px;

             }

       </style>

 

       <script type="text/javascript">

             //name -> BOM

             //ID -> DOM

             function Test()

             {

                    //1. BOM

                    //var txt1 = document.form1.txt1;

 

                    //2. DOM

                    //document : DOM이 BOM객체의 일부를 차용함

                    //계층 구조가 어디에 있든지 상관없이 ID는 문서내에서 유일하니까..

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

 

                    var img = document.getElementById("a1");

 

                    var div = document.getElementById("div1");

 

 

 

                    div.innerText = "히히히";

 

                    //alert(div.innerHTML);

                    //alert(txt1.value);

                    //alert(img);

 

                    //배열 반환 몇번째 객체인지 체크해야한다.

                    //document.getElementsByName("txt1")[0].value = "호호호";

 

                    //문서상에 있는 input 붙은애는 다가져와라.

                    var list = document.getElementsByTagName("input");

 

                    //for (var i = 0; i < list.length; i++)

                    //{

                    //     alert(list[i].value="aaaaa");

                    //}

 

                    //DOM - 접근

                    // 트리구조 -> 아이템 -> 노드(Node), TreeView

                    //alert(document.body.childNodes.length);

                    //alert(document.body.childNodes[0].tagName);

 

                    //document.getElementById("box").childNodes[1].innerText = "21";

 

                    //처음 코딩한것

                    document.getElementById("box").firstChild;

                    //그다음으로 코딩한것

                    document.getElementById("box").lastChild;

                    //형동생들 그리고 코딩순서(객체가 만들어지는 순서

                    //동등한 형제겪중에 다음 코딩한것

                    document.getElementById("box").nextSibling;

                    //그다음 객체

                    document.getElementById("box").previousSibling;

                    //친부모

                    document.getElementById("box").parentNode;

 

                    //최상위 객체에서 여러갈래로 파생

 

                    //** 모든 태그에 식별자를 붙일수 없다. 누군가를 기준으로 삼고 상대적으로 찾을수 있는 방법 을가지고 있는것이 DOM이다.

 

                    //문서상에 존재하는 모든 태그를 찾을수 있다.

             }

 

 

             function Test2()

             {

                    var item = document.getElementById("list1").childNodes[3]; //<li>아무게</li>

                    //alert(item.innerText);

                    item.innerText = "아무게";

 

                    //동적으로 타입 변경 속성값 반환

                    //alert(item.getAttribute("type"));

                    item.setAttribute("type", "circle");//속성값 쓰기

             }

 

             function Init()

             {

                    var items = document.getElementById("list2").childNodes;

 

                    for (var i = 0; i < items.length; i++)

                    {

                           //alert(items[i].tagName);

                           //alert(items[i].nodeType);//1-태그, 3-텍스트

 

                           if (items[i].nodeType == 1 && items[i].tagName == "LI")

                           {

                                 //<li>태그

                                 //alert(items[i].innerText);

 

                                 //클릭할떄마다 익명함수 호출

                                 items[i].onclick = function ()

                                 {

                                        if (event.srcElement.type != "circle")

                                              event.srcElement.type = "circle";

                                        else

                                              event.srcElement.type = "disc";

                                 };

                           }

                    }

             }

            

       </script>

 

</head>

<body onload="Init();">

       <form name="form1">

             <a href="Ex010_link.htm" id="a1">링크</a>

             <div id="div1">영역입니다.</div>

             <input type="text" name="txt1" id="txt1" /><br />

 

             <div id="box">

                    <div>하하하</div>

                    <div>20</div>

                    <div>서울시</div>

             </div>

            

             <input type="button" value="테스트" onclick="Test();" />

       </form>

 

       <hr />

      

       <h3>회원 명단</h3>

       <ul id="list1">

             <li>홍길동</li>

             <li>아무게</li>

             <li>하하하</li>

             <li type="disk">테스트</li>

       </ul>

 

       <input type="button" value="테스트" onclick="Test2();" />

 

       <hr />

 

       <h3>회원 명단</h3>

       <ul id="list2">

             <li>홍길동</li>

             <li>아무게</li>

             <li>하하하</li>

             <li type="disk">테스트</li>

       </ul>

 

       <input type="button" value="테스트" onclick="Test2();" />

 

 

</body>

</html>

 





<!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>

    <title>DOM</title>

 

       <style type="text/css">

             body, div, p, span, th, td, li, a, input, textarea

             {

                    font-family:굴림;

                    font-size:12px;

             }

            

             #list

             {

                    width:400px;

                    border:1px solid gray;

                    border-collapse:collapse;

                    text-align:center;

             }

            

             #list td, #list th

             {

                    border:1px solid gray;

                    text-align:center;

                    padding:3px;

             }

            

       </style>

 

       <script type="text/javascript">

             function Test()

             {

                    //요소얻기

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

 

                    //1. 요소의 텍스트를 접근(get/set)

                    div1.innerText = "홍길동";

 

                    //2. 요소의 속성 접근(get/set)

                    div1.title = "영역입니다.";

 

                    //3. 요소를 동적으로 추가

                    //<h3>제목</h3>

                    // - 모든 요소의 생성은 document가 담당

                   

                    //태그 생성후 누군가의 자식으로 넣어줘야한다.

                    var h3 = document.createElement("h3");

                    h3.innerText = "제목입니다";

                    h3.setAttribute("title", "풍선도움말"); //DOM

                    div1.appendChild(h3); //자식중 막내로 추가

                    //div1.insertBefore

 

             }

 

             var n = 0;

 

             function Test2()

             {

 

                    //<img />

                    var img = document.createElement("img");

 

                    //<img src="num/0.png" />

                    img.setAttribute("src", "num/" + n + ".png");

 

                    //<img onclick="" />

                    img.onclick = function ()

                    {

                           //document.body.removeChild(event.srcElement);

                           event.srcElement.parentNode.removeChild(event.srcElement);

                    };

 

                    //누구 자식인지 지정~ 막내로

                    //document.body.appendChild(img);

 

                    //끼워 넣는다. (맨마지막이 아닌(막내) 지정된 곳 위에 끼워 넣는다.

                    document.body.insertBefore(img, document.getElementById("div1"));

 

                    n++;

 

                    if (n == 10) n = 0;

             }

 

             function Test3()

             {

                    //요소 삭제

                    //document.body.removeChild(document.getElementById("btn1"));

 

                    //차례대로 지워진다. 굿!

                    document.body.removeChild(document.body.firstChild);

 

                    var list = document.body.childNodes;

 

                    for (var i = list.length - 1; i >= 0; i--)

                    {

                           //끝에서부터 지워야 인덱스 에러가 안나지~~

                           document.body.removeChild(list[i]);

                    }

 

                    //<img src="num/0.png" />

 

             }

 

             var num = 1;

 

             //메모 추가

             function AddMemo()

             {

                    //1. 번호 -> num

                    //2. 메모

                    var memo = document.getElementById("txtMemo").value;

 

                    //3. 그룹

                    var group = document.getElementById("selGroup").value;

 

                    //동적으로 <tr>, <td>생성 -> 추가

                    //A. <tr>

                    var tr = document.createElement("tr");

 

                    //B. <td> x 3

                    var td1 = document.createElement("td");

                    var td2 = document.createElement("td");

                    var td3 = document.createElement("td");

 

                    //C. <tr> + <td>

                    tr.appendChild(td1);

                    tr.appendChild(td2);

                    tr.appendChild(td3);

 

                    //D 내용물 채우기.

                    td1.innerText = num; //메모번호

                    num++;

 

                    td2.innerText = memo; //메모 내용

 

                    var img = document.createElement("img");

                    img.setAttribute("src", "images/" + group + ".png");

                    img.setAttribute("width", "20px");

 

                    td3.appendChild(img);

 

                    //E. <tr>을 테이블 추가

                    //alert(document.getElementById("list").firstChild.tagName);

                    document.getElementById("list").childNodes[1].appendChild(tr);

             }

 

       </script>

 

</head>

<body>

 

       <div id="div1"></div>

       <input type="button" value="테스트1" id="btn1" onclick="Test();" />

 

       <input type="button" value="테스트2" onclick="Test2();" />

 

       <input type="button" value="테스트3" onclick="Test3();" />

      

       <hr />

 

             <h3>메모 리스트</h3>

             <!--

             테이블 태그는 보이지 않지만 <tbody></tbody> 태그등이 있다.

             브라우저는 테이블태그를 읽어 들일떄 원형 전체로 알고 있다.

             -->

       <table id="list">

             <tr>

                    <th>번호</th>

                    <th>메모</th>

                    <th>그룹</th>

             </tr>

       </table>

 

       <hr />

 

       메모 : <input type="text" id="txtMemo" /><br />

       그룹 : <select id="selGroup">

                    <option value="1">개인</option>

                    <option value="2">회사</option>

                    <option value="3">학교</option>

       </select>

       <br />

       <input type="button" value=" 추가하기 " onclick="AddMemo();" />

</body>

</html>

 

 


document의 주요 기능

document.getElementById("id")

- param : 검색할 id

- return : 검색된 엘리먼트 하나


document.getElementsByTagName("tagname")

- param : 검색할 태그명

- return : 검색된 엘리먼트가 포함된 배열


document.getElementsByClassName("classname")

- param : 검색할 클래스명

- return : 검색된 엘리먼트가 포함된 배열


document.createElement("tagname")

- param : 생성할 태그명

- return : 새로 만들어진 엘리먼트


document.createTextNode("textcontent")

- param : 문자열

- return : 문자열을 포함하고 있는 textnode


element의 주요 속성과 기능

속성

element.firstChild

- 해당 엘리먼트의 첫번째 자식 엘리먼트

element.lastChild

- 해당 엘리먼트의 마지막 자식 엘리먼트

element.childNodes

- 해당 엘리먼트의 모든 자식 엘리먼트가 포함된 배열

element.parentNode

- 해당 엘리먼트의 부모 엘리먼트

element.previousSibling

- 해당 엘리먼트의 형 엘리먼트

element.nextSibling

- 해당 엘리먼트의 동생 엘리먼트


element.tagName

- 해당 엘리먼트의 태그명

element.id

- 해당 엘리먼트이 id

element.className

- 해당 엘리먼트의 클래스명

element.textContent

- 해당 엘리먼트에 포함된 텍스트컨텐츠

element.innerHTML

- 해당 엘리먼트에 포함된 html내용


기능

element.getElementsByTagName('tagname')

element.getElementsByClassName('classname')

element.hasChildNodes()

- return : 해당 엘리먼트가 자식노드를 가지고 있으면 true


element.appendChild(node)

- param : 해당 엘리먼트의 자식으로 추가할 자식노드


element.insertBefore(newNode, existNode)

- param : 새로 추가할 자식노드

 기존노드

element.removeChild(node)

- param : 삭제할 자식노드


element.getAttribute('attributeName')

- param : 값을 조회할 속성명

- return : 속성값(문자열)


element.setAttribute('attributeName', 'attributeValue')

- param : 추가할 속성명, 추가할 속성값


element.removeAttribute('attributeName')

- param : 삭제할 속성명


element.hasAttribute('attributeName')

- param : 조회할 속성명

- return : 속성이 존재하면 true


 

 

저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

Screen, Location, History, link, image



Screen

<!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>

    <title>Screen</title>

 

       <script type="text/javascript">

             var w = window.screen.width; //해상도 너비

             var h = window.screen.height;//해상도 높이

 

             var aw = window.screen.availWidth; //실제사용가능한 너비

             var ah = window.screen.availHeight; //실제 사용가능한 높이(작업표시줄 때문에 위 height보다 낮음)

 

             var c = window.screen.colorDepth;//디스플레이 색품질 32비트 색상

 

             //alert(w + " : " + h + "\r\n" + aw + " : " + ah + "\r\n" + c);

 

             //자식창 -> 화면 중앙

             window.open("Ex08_window.open.child.htm", "child", "width=200, height=200, left=" + (screen.width / 2 - 100) + ", top=" + (screen.height / 2 - 100));

       </script>

 

</head>

<body>

 

</body>

</html>




Location

<!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>

    <title>Location</title>

 

       <script type="text/javascript">

             //alert(location.href); //현재 URL

            

             //자바스크립트 페이지 이동할떄 사용됨 ***** 페이지 이동은 이걸로 다한다.

             //location.href = "Ex007_Screen.htm";

 

             //새로고침

             setInterval("location.reload()", 3000); //F5

       </script>

 

</head>

<body>

 

</body>

</html>

 

 

 

 





History

<!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>

    <title>history</title>

 

       <script type="text/javascript">

             function Prev()

             {

                    //history.go(-1);//이전페이지

                    history.back();

             }

 

             function Next()

             {

                    //history.go(+1); //다음 페이지

                    history.forward();

             }

       </script>

 

</head>

<body>

 

       <input type="button" value="이전" onclick="Prev();" />

       <input type="button" value="다음" onclick="Next();" />

 

       <form action="Ex009_Ok.aspx">

             <input type="text" />

             <input type="submit" value="가입하기" />

       </form>

 

</body>

</html>

 

 


 History.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Ex009_Ok.aspx.vb" Inherits="Ex009_Ok" %>

 

<!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 runat="server">

    <title>Server</title>

</head>

<body>

    <form id="form1" runat="server">

    <div>

   

             <script type="text/javascript">

                    //데이터 입력 에러가 있다면

                    alert("데이터가 올바르지 않습니다.!!");

 

                    //이전페이지로 다시 돌아가기

                    //1. location.href

                    //2. history.back();

                    //location.href = "Ex009_history.htm";

                    history.back(); //회원가입 폼에서

             </script>

 

    </div>

    </form>

</body>

</html>

 

 

 




 Link

<!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>

    <title>link</title>

 

       <script type="text/javascript">

             function Test()

             {

                    //1. BOM

                    //링크는 배열로 관리된다.

                    var link = document.links[0];

                    //var link = document.all.link1;//all - 익스플로러 전용

 

                    //alert(link.href);

                    link.href = "http://www.google.com";

                    link.title = "구글";

 

                    //BOM은 데이터 접근이 불가능하다(시작태그와 끝태그 사이의 내용은 불가능)

                    //DOM은 데이터 접근이 가능하다.

                    link.innerText = "구글로 이동";

 

             }

       </script>

 

</head>

<body>

 

       <a href="http://www.naver.com" title="네이버">네이버로 이동</a><br />

       <input type="button" value="테스트" name="link1" onclick="Test();" />

</body>

</html>

 

 




 Image

<!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>

    <title>image</title>

 

       <script type="text/javascript">

             function Test()

             {

                    var img1 = document.images["img1"];

                    //alert(img1.src);

                    //img1.width = 500;

                    //img1.border = 10;

 

                    //src 값을 가장 많이 건들인다.(다른이벤트와 함께 응용 한다.)

                    img1.src = "images/angry.png";

             }

 

             function Change1()

             {

                    //이미지에 마우스가 오버되면 다른 이미지 변경

                    document.images["img2"].src = "images/cry.png";

             }

 

             function Change2()

             {

                    //특성 자체가 변해서 원래 대로 돌아갈려면 이미지를 재정의 할수 밖에 없다.

                    document.images["img2"].src = "images/hehe.png";

             }

 

             function Change3(n)

             {

                   

                    if (n == 1)

                    {

                           document.images["img3"].src = "images/cry.png";

                    }

 

                    else

                    {

                           document.images["img3"].src = "images/hehe.png";

                    }

 

             }

 

             function Change4(img, n)

             {

                    //document.images["img3"] this 자기 자신을 인자로 넘겨 버렸기 때문에 재검색할 필요가 없다.

                    //img

                    if (n == 1)

                           img.src = "images/cry.png";

                    else

                           img.src = "images/hehe.png";

             }

 

             function Change5(img, file)

             {

                    img.src = "images/" + file;

             }

 

             function Change6(file)

             {

                    //C# : object sender

                    //자연적으로 이벤트를 호출 하면

                    //함수하나로 몇개의 이미지를 전부 제어 할수 있게 된다.

                    event.srcElement.src = "images/" + file;

             }

 

       </script>

 

</head>

<body>

 

       <img src="images/haha.png" alt="표정" name="img1" /><br />

       <input type="button" value="테스트" onclick="Test();" />

       <hr />

 

       <img src="images/hehe.png" alt="표정" name="img2"  onmouseover="Change1();" onmouseout="Change2();" />

 

       <img src="images/love.png" alt="표정" name="img3" onmouseover="Change3(1);" onmouseout="Change3(0);" />

 

       <img src="images/love.png" alt="표정" name="img4" onmouseover="Change4(this, 1);" onmouseout="Change4(this, 0);" />

 

       <img src="images/love.png" alt="표정" name="img5" onmouseover="Change5(this, 'cry.png');" onmouseout="Change5(this, 'adore.png');" />

 

       <img src="images/love.png" alt="표정" name="img6" onmouseover="Change6('cry.png');" onmouseout="Change6('adore.png');" />

 

             <img src="images/cool.png" alt="표정" name="img7" onmouseover="Change6('cry.png');" onmouseout="Change6('adore.png');" />

</body>

</html>

 

 

저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

JavaScript BOM, Event

JavaScript BOM, Event




BOM



<html>

<head>

    <title>BOM</title>

 

       <script type="text/javascript">

 

             function Test()

             {

                    //1. 텍스트박스 찾기(BOM)

                    // - BOM은 무조건 최상위객체인 window부터 시작해서 족보를 타고 원하는 객체까지 내려가는 방식

                    //var txt1 = window.document.form1.txt1; window 제외 가능하다.

                    var txt1 = document.form1.txt1;

 

                    //2. 제어(속성)

                    // -

                    txt1.value = new Date().toLocaleString();

                    //alert(txt1.value);

                    //txt1.readOnly = true; //클릭시 읽기전용으로

                    //alert(txt1.type); //어떤 타입인지 확인

                    //txt1.type = "button";//타입 변환은 불가능

                    //txt1.disabled = true;//컨트롤 자체를 비활성화

 

                    document.form1.btn1.disabled = true;

 

             }

       </script>

</head>

<body>

       <!--Ex08_BOM.htm-->

       <form name="form1">

             <input type="text" name="txt1" />

             <input type="button" name="btn1" value=" 클릭 " onclick="Test();" />

       </form>

</body>

</html>

 




Event

<html>

<head>

    <title>BOM</title>

 

       <script type="text/javascript">

 

             function Test()

             {

                    //1. 텍스트박스 찾기(BOM)

                    // - BOM은 무조건 최상위객체인 window부터 시작해서 족보를 타고 원하는 객체까지 내려가는 방식

                    //var txt1 = window.document.form1.txt1; window 제외 가능하다.

                    var txt1 = document.form1.txt1;

 

                    //2. 제어(속성)

                    // -

                    txt1.value = new Date().toLocaleString();

                    //alert(txt1.value);

                    //txt1.readOnly = true; //클릭시 읽기전용으로

                    //alert(txt1.type); //어떤 타입인지 확인

                    //txt1.type = "button";//타입 변환은 불가능

                    //txt1.disabled = true;//컨트롤 자체를 비활성화

 

                    document.form1.btn1.disabled = true;

 

             }

       </script>

</head>

<body>

       <!--Ex08_BOM.htm-->

       <form name="form1">

             <input type="text" name="txt1" />

             <input type="button" name="btn1" value=" 클릭 " onclick="Test();" />

       </form>

</body>

</html>

 

 

 

저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

JavaScript 조건문 사용방법

JavaScript 조건문 사용방법

<html>

<head>

    <title>조건문</title>

 

             <script type="text/javascript">

                    //조건문

                    //           var n = 10;

 

                    //           if (n > 0)

                    //           {

                    //                  alert("양수");

                    //           }

                    //           else if (n < 0)

                    //           {

                    //                  alert("음수");

                    //           }

                    //           else

                    //                  alert("영");

 

                    //숫자(0이면 false, 0이 아니면 true)

                    //문자열(""이면 false, ""이 아니면 true

                    //           if (num != 0)

                    //           {

                    //                  alert("참");

                    //           }

                    //           else

                    //           {

                    //                  alert("거짓");

                    //           }

 

 

 

//                  var name = "홍길동";

 

//                  switch (name)

//                  {

//                         case "홍길동":

//                               alert("과장");

//                               break;

//                         case "아무게":

//                               alert("부장");

//                               break;

                    //                  }

 

                    //반복문

                    //- 루프변수 선언시 var 사용 x 예전 브라우저에선 오류가 나는 경우가 있다.

                    for (var i = 0; i < 10; i++)

                    {

                           //alert(i);

                    }

 

                    var n = 0;

                    while (n < 10)

                    {

                           //alert(n);

                           n++;

                    }

 

                    //foreach 와 같은 구문

//                  for (var i in o)

//                  {

//                  }

             </script>

 

</head>

<body>

 

</body>

</html>

저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

JavaScript 배열, 날짜, 함수 호출(C#메서드와 동일)

JavaScript 배열, 날짜, 함수 호출(C#메서드와 동일)

<html>

<head>

    <title>문자열 객체, 배열 객체</title>

 

       <script type="text/javascript">

             //문자열 객체

             //배열 객체 - ArrayList와 유사

             var nums = new Array(); //방갯수? -> 유동적

             nums[0] = 100;

             nums[1] = 200;

             nums[2] = 300;

 

             //undefined(상태) : null과 유사 = 이공간은 아직 초기화가 안되었습니다.

             for (var i = 0; i < nums.length; i++)

             {

                    //alert(nums[i]);

             }

 

             //Date객체

             //1. 현재 시간(DateTime.Now)

             //2. 특정 시간(new DateTime(년,월,일,시,분,초))

 

             //Date객체를 그냥 만들게 되면 now라는 곳에 현재 시간이 들어간다.

             var now = new Date();

 

             //한국 형식으로 나온다.

             //           alert(now.toLocaleString());

             //           alert(now.toLocaleTimeString());

 

             //월(0~11)  **

             var christmas = new Date(2012, 11, 25, 18, 0, 0);

             //alert(christmas.toLocaleString());

 

             alert(now.getYear());//밀레니엄 버그이전에 쓰던 함수 2자리 년도

             alert(now.getFullYear());//밀레니엄 버그 해결된 이후에 나온 함수 4자리 년도

             alert(now.getMonth());//월(0~11)

             alert(now.getDate());//일

             alert(now.getDay());//요일 일요일이 0 토요일이 6

             alert(now.getHours());

             alert(now.getMinutes());

             alert(now.getSeconds());

             alert(now.getMilliseconds());

 

       </script>

 

</head>

<body>

 

</body>

</html>


 

 

JavaScript 함수 호출

<html>

<head>

    <title>함수 호출</title>

       <script type="text/javascript">

            

             //1. 함수 선언

             function Sum()

             {

                    alert(10 + 20);

             }

 

             //2. 함수 호출

             Sum();

 

             function Sum2(a, b)

             {

                    alert(a + b);

             }

 

             Sum(10, 20);

 

             //반환값 - ** 되도록 함수의 반환값은 1가지 형식으로....

             function Sum3()

             {

                    //if()

                           //return 100;

                    //else

 

                    return "하하하";

             }

 

             alert(Sum3());

 

             //현재위치!!! <script> 내부

             var num1 = 100;//전역변수

             num4 = 400;//전역변수(사용을 되도록 안했으면 한다. 가독성이 엄청 떨어진다.)

 

             function Test()

             {

                    //alert(num1);//전역 변수 접근

 

                    var num2 = 200; //지역 변수

                    //alert(num2);

                    num3 = 300; //?var 가 빠졌어도 전역변수로 선언 됨

                    alert(num3);

             }

             //alert(num2);//에러 지역변수를 밖에서 선언했기 때문에

             Test();

             alert(num3);//에러 없음.

       </script>

</head>

<body>

 

</body>

</html>

 

 

저작자표시

트랙백

※ 스팸 트랙백 차단중 ...{ ? }

JavaScript 인라인, 내장, 외부, 자료형, 문자열

JavaScript 인라인, 내장, 외부, 자료형, 문자열



<html>

<head>

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

       <script type="text/javascript" src="Ex01.js">

             //3. 외장 자바스크립트를 참조

             //어쩔수 없이 따로 따로 사용해야한다. 참조 스크립트와 써야할 스크립트를 분리

       </script>

 

       <script type="text/javascript">

             //Javascript만의 영역

            

             function Test() {

                    alert("하나");

                    alert("둘");

                    alert("셋");

             }

 

             //BOM모델 기준으로 찾았을떄

             //HTML의 속성은 대부분 Javascript에서도 동일한 이름으로 제공

             //순차적으로 읽기 때문에 없는값에 어떻게 안녕하세요를 찍냐!!라는것..

             //window.document.form1.txtData.value = "안녕하세요.";

 

             function Init() {

                    window.document.form1.txtData.value = "바디읽고 난후에 onload 이벤트 발생";

             }

       </script> 

</head>

 

<!--바디를 끝까지 다 읽고 난후에 onload 이벤트가 발생한다.-->

<body onload="Init();">

 

       <!--

       1. 인라인

       시작 태그에 이벤트를 등록

       이벤트가 종류별로 html 속성으로 제공

       on + 이벤트명 -> 이벤트 핸들러

       이벤트 -> 자바스크립구문을 바로 호출(메서드, 실제 구문)

       onclick = "자바스크립트 영역 *************

      

       1. 편집기 상 한줄로 기입되기때문에... 많은 구문을 쓰기엔 적당하지 않음 -> 가독성 저하

       2. 짧은 구문 정도 기입

       3. 긴 구문 -> 메서드를 생성 -> 호출

       -->

       <input type="button" value="인라인 자바스크립트 호출 " onclick="alert('인라인');" />

 

       <input type="button" value=" 내장 자바스크립트 호출 " onclick="Test();" />

 

       <input type="button" value=" 외부 자바스크립트 호출 " onclick="Hello();" />

 

       <hr />

 

       <!--페이지가 시작되면 자동으로 초기값을 넣고 싶다.-->

       <form name="form1">

 

       <input type="text" name="txtData" />

 

            

 

             <script type="text/javascript">

             //<script>는 문서내의 어느위치, 몇번.. 상관없이 중복되어서 선언이 가능~

             //일반적으로 <head>내에서 사용..

             //head에 자식이거나 body에 자식이어야 한다.

             //window.document.form1.txtData.value = "안녕하세요..";

             </script>

            

       </form>

       </body>

</html>

 



Javascript 자료형