'자바스크립트'에 해당되는 글 7건

  1. 2011.07.28 HTML a link에 javascript 연동
  2. 2011.07.13 JavaScript에서 폼 submit 처리하기 (1)
  3. 2010.09.28 ASP.NET Ok, Cancel 메시지 박스 처리
  4. 2010.09.28 Javascript Textbox, Label 값 설정
  5. 2010.09.14 ASP.NET 자바스크립트를 이용한 FileUpload 확장자 검사
  6. 2010.09.04 Javascript 인터넷 브라우저 창 크기 조정
  7. 2010.08.18 JavaScript windows.open 옵션
2011.07.28 18:37

HTML a link에 javascript 연동

JavaScript 부분
<head>
<script type="text/javascript">
function someFunction() {
....
}
</script>
</head>

A Link 부분
<a href="javascript:someFunction();">클릭</a>


[참고] Using Link Tags with JavaScript
Trackback 0 Comment 0
2011.07.13 17:48

JavaScript에서 폼 submit 처리하기

자바스크립트 부분
<script type="text/javascript">
function submitForm(action){
    document.record.innerHTML = "<input type=hidden name=submit value='" + action +"'>";
    document.change_record.submit();
}
</script>


호출하는 부분
<form name="change_record" action="record_update.php" method="post" autocomplete="off">

<a name="edit" href="javascript:void(1);" onClick="submitForm('Edit');">Edit</a>

<a name="delete" href="javascript:void(1);" onClick="submitForm('Delete');">Delete</a>

만약 클릭에 따라서 폼의 action이 달라져야 한다면 각 action 별로 폼을 작성하고 해당 폼의 submit을 호출

예)
자바스크립트
<script type="text/javascript">
function submitForm(action) {
 if(action == 'Edit') {
     document.form1.innerHTML = "<input type=hidden name=submit value='" + action +"'>";
     document.form1.submit();
 }
 else if(action == 'Delete') {
  document.form2.innerHTML = "<input type=hidden name=submit value='" + action +"'>";
     document.form2.submit();
 }
}
</script>

호출하는 부분
<body>
<input type="button" name="edit" onclick="submitForm('Edit')" value="수정">
<input type="button" name="delete" onclick="submitForm('Delete')" value="삭제">
<div>
 <form name="form1" method="post" action="edit.html">
 </form>
</div>
<div>
 <form name="form2" method="post" action="delete.html">
 </form>
</div>
</body>


[참고] using JavaScript for form submit
Trackback 0 Comment 1
2010.09.28 19:15

ASP.NET Ok, Cancel 메시지 박스 처리

1. 우선 이벤트를 등록할 버튼을 생성한다.
<asp:Button ID="btnDelete" runat="server" Text="삭제" />


2. 버튼에 OnClientClick 속성에 confirm 자바스크립트를 등록한다.
<asp:Button ID="btnDelete" runat="server" Text="삭제"
  OnClientClick="return confirm('정말 삭제하시겠습니까?');" />


3. 버튼에 onclick 이벤트를 등록한다. (VS 디자인 모드에서 더블클릭)
<asp:Button ID="btnDelete" runat="server" Text="삭제"
  OnClientClick="return confirm('정말 삭제하시겠습니까?');"
  onclick="btnDelete_Click" />


4. onclick 이벤트에 원하는 동작을 작성한다. (.aspx.cs 파일)
string script = "<script>alert('확인을 클릭하셨네요!!');</script>";
Page.ClientScript.RegisterClientScriptBlock(typeof(string), "confirm", script);


[참조] ASP.Net JavaScript 2-button (OK/Cancel) "msgbox"
Trackback 0 Comment 0
2010.09.28 14:29

Javascript Textbox, Label 값 설정

자바스크립트에서 본문 요소의 값을 설정하는 방법은 getElementById라는 메소드를 이용해서 가능하다.

텍스트박스

document.getElementById('span_id').value = 'new_value';



레이블

document.getElementById('span_id').innerText = 'new_value';
또는
document.getElementById('span_id').innerHTML = 'new_value';
Trackback 0 Comment 0
2010.09.14 11:31

ASP.NET 자바스크립트를 이용한 FileUpload 확장자 검사

자바스크립트
function checkFileExtension(elem) {
    var filePath = elem.value;

    if(filePath.indexOf('.') == -1)
        return false;
        
    var validExtensions = new Array();
    var ext = filePath.substring(filePath.lastIndexOf('.') + 1).toLowerCase();
    
    validExtensions[0] = 'jpg';
    validExtensions[1] = 'jpeg';
    validExtensions[2] = 'bmp';
    validExtensions[3] = 'png';
    validExtensions[4] = 'gif';  
    validExtensions[5] = 'tif';  
    validExtensions[6] = 'tiff';
    validExtensions[7] = 'txt';
    validExtensions[8] = 'doc';
    validExtensions[9] = 'xls';
    validExtensions[10] = 'pdf';
    
    for(var i = 0; i < validExtensions.length; i++) {
        if(ext == validExtensions[i])
            return true;
    }

    alert('The file extension ' + ext.toUpperCase() + ' is not allowed!');
    return false;
}

 

ASP.NET의 Page_Load에 다음 코드 추가

FileUpload1.Attributes.Add("onchange", "return checkFileExtension(this);");


[참조]
How to filter files in file upload HTML control
 
Trackback 0 Comment 0
2010.09.04 14:02

Javascript 인터넷 브라우저 창 크기 조정

인터넷 브라우저의 크기는 window.resizeTo(newWidth, newHeight)로 가능하다.



[참조]
Resizing a window

Trackback 0 Comment 0
2010.08.18 17:09

JavaScript windows.open 옵션

사용법
window.open("URL","창이름",'옵션');

옵션
left : 새창의 x좌표
top : 새창의 y좌표
width : 새창의 가로
height : 새창의 세로
menubar : 파일, 편집, 보기 등의 버튼이 있는 줄
toolbar : 뒤로, 앞으로, 검색, 즐겨찾기 등의 버튼이 나오는 줄
location : 주소창
scrollbars : 스크롤바
status : 창 아래부분 링크주소 나오는 부분
resizable : 창의 크기를 조절 가능 여부
fullscreen : 최대화 창으로 띄움( 이 옵션을 쓰게 되면 width,height,top,left 옵션이 적용안됨)

예제
window.open("test.htm","testWin","left=50, top=50, width=400, height=380, toolbar=no, scrollbars=no, status=no, resizable=no");


Trackback 0 Comment 0