본문 바로가기

Study/Programming

자바스크립트 Java Script

반응형

<html>
<head>
<title>문서의 제목</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
</head>
<body>
<script language="javascript">
        document.write("<table border=2 width=150>")
    for(var j=2; j<10; j++){
        document.write("<tr>");
        document.write("<td>" +1 +"*" +j +"=" +(1*j) +"</td>");
        document.write("</tr>");
    }
        document.write("</table>");
</script>

</body>
</html>


<html>
<head>
<title>문서의 제목</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">

    document.write("<table border='1'>");
    for(var i=0; i<=9 ; i++) {
        var strBgcolor = (i%2 == 0) ? "blue" : "yellow";
        document.write("<tr>");
        for(var j=0; j<=9 ; j++) {
            if(i==0 && j==0) {
                document.write("    <td width='100' align='center'>&nbsp;</td>");
            } else if(i==0) {
                document.write("    <td width='100' align='center'>X " + j + "</td>");
            } else if(j==0) {
                document.write("    <td width='100' align='center'>" + i + " 단</td>");
            } else {
                document.write("    <td width='100' align='center' bgcolor=" + strBgcolor + ">" + i + " X " + j + " = " + (i*j) + "</td>");
            }
        }       
        document.write("</tr>");
    }
    document.write("</table>");
</script>
</head>
<body>
</body>
</html>


<html>
<head>
<title>문서의 제목</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    var value1 = parseInt("123");
    document.write(value1 +"<br>");

    var value2 = parseInt("123.23");
    document.write(value1 +"<br>");

    var value3 = parseInt("123abc");
    document.write(value1 +"<br>");
</script>
</head>
<body>

</body>
</html>


<html>
<head>
<title>문서의 제목</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    var str1 = "문자열";
    document.write(str1 +"<br>");
    var str2 = new String("문자의 위치는 0부터 시작하며, 찾는 문자가 없을 경우에는 -1을 반환");
    document.write(str2 + "<br>");

    document.write("문자열의 길이 : " +str2.length + "<br>");
    document.write("첫번째 문자 : " + str2.charAt(0) + "<br>");
    document.write("두번째 문자 : " + str2.charAt(1) + "<br>");

    document.write("'찾는' 이란 문자열의 위치 : " + str2.indexOf("찾는") + "<br>");
    document.write("문자열에서 추출 : " + str2.substring(18) + "<br>");
    document.write("문자열에서 추출 : " + str2.substring(18, 20) + "<br>");
    document.write("문자열에서 추출 : " + str2.substr(18, 5).bold() + "<br>");

</script>
</head>
<body>

</body>
</html>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    //오늘에 대한 날짜 클래스 생성
    var date = new Date();
    //unix date 반환
    document.write(date.getTime() + "<br>");
   
    document.write(date.getYear()+1900 + "<br>"); //현재년도 -1900
    document.write(date.getFullYear() + "<br>");
    document.write(date.getMonth() + "<br>"); //현재월 -1
    document.write(date.getDate() + "<br>");
    document.write(date.getDay() + "<br>");// 0:일요일
   
    //2010년 5월 14일로 date 클래스 생성
    var date2 = new Date(2010, 4, 14);
    document.write(
            date2.getFullYear() +"년 "
            +(date2.getMonth()+1) +"월 "
            +(date2.getDate()) +"일 "
            +(date2.getDay()) +"요일 "
    );
<br>

</script>
</head>
<body>

</body>
</html>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    //스칼라 배열(인덱스 배열 : 첨자가 숫자 형태인 것)
    var array = new Array(5);
    array[0] = 0;
    array[1] = 1;
    array[2] = 2;
    array[3] = 3;
    array[4] = 4;
   
    for(var i=0; i<array.length; i++){
        document.write(array[i] + "<br>");
    }
    var array2 = new Array("사과","배","감","귤");
    for(var i=0; i<array2.length; i++){
        document.write(array2[i] + "<br>");
    }

    var array3 = "강감찬,홍길동,성춘향,월매".split(",");
    for(var i=0; i<array3.length; i++){
        document.write(array3[i] + "<br>");
    }

    for(var key in array3){
        document.write(key +" ; " +array3[key] +"<br>");
    }

    var array4 = new Array();
    array4['사과'] = 1;
    array4['배'] = 2;
    array4['감'] = 3;
   
    for(var key in array4){
        document.write(key + " ; " +array4[key] +"<br>");
    }   
</script>
</head>
<body>

</body>
</html>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    var myArray1 = new Array('사과', '포도', '딸기', '수박');
    var myArray2 = new Array('a', 'b', 'c', 'd');

    var str1 = myArray1.join("|");
    document.write(str1+"<br>");

    document.write(myArray1.pop() +" ; 길이 " +myArray1.length +"<br>");
    document.write(myArray1.pop() +" ; 길이 " +myArray1.length +"<br>");

    document.write(myArray1.push("감") +" ; 길이 " +myArray1.length +"<br>");
    for(var i=0; i<myArray1.length; i++){
        document.write(myArray1[i] +"<br>");
    }

    document.write(myArray1.push("귤", "레몬") +" ; 길이 " +myArray1.length +"<br>");
    for(var i=0; i<myArray1.length; i++){
        document.write(myArray1[i] +"<br>");
    }
</script>
</head>
<body>

</body>
</html>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    document.write("난수 : " +Math.random() +"<br>");
    //올림
    document.write(Math.floor(2.4) +"<br>");
    document.write(Math.floor(2.5) +"<br>");
    document.write(Math.floor(2.6) +"<br>");
    //내림
    document.write(Math.ceil(2.4) +"<br>");
    document.write(Math.ceil(2.5) +"<br>");
    document.write(Math.ceil(2.6) +"<br>");
    //반올림
    document.write(Math.round(2.4) +"<br>");
    document.write(Math.round(2.5) +"<br>");
    document.write(Math.round(2.6) +"<br>");
</script>
</head>
<body>

</body>
</html>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    function clicktest(){
        window.alert('나 눌렀음')
    }

    function loadtest(){
        window.alert('페이지가 시작됨')
    }

    function focustest(){
        window.alert('입력 하시겠습니까?')
    }
   
    function blurtest(){
        window.alert('입력을 다 하셨습니까?')
    }

    function mouseovertest(){
        window.alert('마우스가 오버되었습니다.')
    }
</script>
</head>
<body onload="loadtest()">
<form>
    이름 : <input type="text" name="writer" size="50" onfocus="focustest()"></br>
    비밀번호1 : <input type="text" name"pwd1" size="50" onblur="blurtest();"></br>
    비밀번호2 : <input type="text" name="writer" size="50"></br>
    <input type="button" value="Click!" onclick="clicktest()">
    <input type="button" value="Click!" onmouseover="mouseovertest()"
</form>
</body>
</html>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    function clicktest(){
//    var jumin1 = document.forms[0].jumin1.value;
    var jumin1 = document.frm.jumin1.value;
    var jumin2 = document.frm.jumin2.value;
    var lenjumin1 = document.frm.jumin1.value.length;
    var age = jumin1.substring(0, 2);
    var jumin= jumin1+jumin2;

    var output="주민번호 : " +jumin1 +"-" +jumin2 +"\n";
    output += "길이 : " +(lenjumin1 +jumin2.length);

    document.frm.output.value=output +"\n" +age +"년생";

    if(lenjumin1 !=6 || jumin2.length != 7)
    document.frm.output.value="주민등록번호 틀림!!";


    for(var i=0; i<jumin.length; i++) {
    if(isNaN(parseInt(jumin.charAt(i))))
        document.frm.output.value=("문자열로 입력할 수 없습니다.");
    }
}
</script>
</head>
<body>
<form name="frm">
    주민등록번호를 입력하세요<br>
    <input type="text" name="jumin1" size="6" maxlength="6">
    -
    <input type="text" name="jumin2" size="7" maxlength="7">
    <input type="button" value="검사하기" onclick="clicktest()">
    <br>
    <textarea name="output" cols="20" rows="5"></textarea>
</form>
</body>
</html>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
//    window.alert("경고창입니다.");
//    alert("경고창입니다.");

//    var returnVal = window.confirm("다음 내용을 확인/취소를 클릭해 주세요.");
//    document.write(returnVal+"<br>");

    var returnVal = window.prompt("값을 입력해 주세요");   
    document.write(returnVal+"<br>");
</script>
</head>
<body>
</body>
</html>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    function winopen(){
        window.open("strtest.html","openwin","top=20, left=20, width=400, height=400");
    }
</script>
</head>
<body>
<form>
    <input type="button" value="Click!!" onclick="winopen()">
</form>
</body>
</html>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    function winopen(){
        window.open("strtest.html","openwin","top=20, left=20, width=330, height=200 resizable=no, menubar=no, location=no, toolbar=no, status=no");
    }
</script>
</head>
<body>
<form>
    <input type="button" value="새창열기" onclick="winopen()">
</form>
</body>
</html>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    function winopen(){
        window.open("strtest.html","openwin","top=20, left=20, width=330, height=210 resizable=no, menubar=no, location=no, toolbar=no, status=no");
    }

    function goUrl(param){
        switch(param){
            case 1:
                location.href="http://www.naver.com";
                break;
            case 2:
                location.href="http://www.daum.net";
                break;
        }
    }
   
</script>
</head>
<body>
<a href="./strtest.html">String Test</a><br><br>
<form>
    <input type="button" value="New Window" onclick="winopen()">
    <br><br>
    <input type="button" value="Naver" onclick="goUrl(1)">
    <input type="button" value="Daum" onclick="goUrl(2)">
</form>
<script language="javascript">
    document.write("이름 : " +navigator.appName +"<br>");
    document.write("이름 : " +navigator.appVersion +"<br>");
    document.write("이름 : " +navigator.userAgent +"<br>");
</script>
</body>
</html>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    function checkdata(){
        //checkbox에 체크되어있는지 확인 checked : true, false 반환
        //radio 버튼은 배열화 되어있음       
        //radio 체크확인 : document.frm.fruit[0].checkedf
        //radio 길이확인 : document.frm.fruit.length
        alert(document.frm.fruit1.value +"\n" +document.frm.fruit1.checked);
    }
</script>
</head>
<body>
<form name="frm">
    <input type="text" name="writer" size="30"><br><br>
    <input type="checkbox" name="fruit1" value="사과">사과
    <input type="checkbox" name="fruit2" value="배">배<br>
    <input type="radio" name="fruit" value="포도">포도
    <input type="radio" name="fruit" value="딸기">딸기
    <input type="radio" name="fruit" value="감">감
    <br><br>
    <input type="button" value="눌러주세요" onclick="checkdata()">
</form>
</body>
</html>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    function checkdata(){
        for(var i=0; i<document.frm.fruit.length; i++){
            if(document.frm.fruit[i].checked == true){
                alert(document.frm.fruit[i].value);
            }
        }
    }
</script>
</head>
<body>
<form name="frm">
    <input type="text" name="writer" size="30"><br><br>
    <input type="checkbox" name="fruit1" value="사과">사과
    <input type="checkbox" name="fruit2" value="배">배<br>
    <input type="radio" name="fruit" value="포도">포도
    <input type="radio" name="fruit" value="딸기">딸기
    <input type="radio" name="fruit" value="감">감
    <br><br>
    <input type="button" value="선택된 Radio butoon" onclick="checkdata()">
</form>
</body>
</html>


<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<script language="javascript">
    function checkdata(){
//        window.alert("length : " +document.frm.hobby.options.length +"\n" +"value : " +document.frm.hobby.options[0].value +"\n" +"[0] text : " +document.frm.hobby.options[0].text +"\n" +" selectedIndex : "+document.frm.hobby.selectedIndex);
    //선택된 항목 출력
    window.alert(document.frm.hobby.options[document.frm.hobby.selectedIndex].text);
    }
</script>
</head>
<body>
<form name="frm">
    <select name="hobby">
        <option value="1">사진</option>
        <option value="2">독서</option>       
        <option value="3">여행</option>
    </select>
    <br><br>
    <input type="button" value="눌러주세요" onclick="checkdata()">
</form>
</body>
</html>


반응형

'Study > Programming' 카테고리의 다른 글

자바스크립트 문자열 비교  (0) 2009.05.14
자바스크립트 주민등록번호 체크  (1) 2009.05.14
CSS  (0) 2009.05.12
HTML2  (0) 2009.05.11
자바 주민등록번호 체크  (0) 2009.05.09