JS_javascript 기술의 양식 사용 요약-JS 튜토리얼-php.cn

집

웹 프론트엔드

JS 튜토리얼

JS_javascript 기술의 양식 사용 요약

May 16, 2016 pm 05:04 PM

js 형태

1. 자바스크립트를 이용한 페이지 새로고침 방법

window.location.reload();

window.open에서 뜨는 팝업창 활용 () 상위 창을 새로 고치려면
window.opener.location.reload()

window.showDialog를 사용하여 모달 창 팝업
window.dialogArguments.location.reload()

2. 자바스크립트 팝업창 구현 방법 2가지---다음은 팝업 화면 중심 창의 2가지 예시입니다.
window.open() 메소드

코드 복사 코드는 다음과 같습니다.

 function ShowDialog(url) { 
 var iWidth=300; //창 너비
 var iHeight=200;//창 높이
 var iTop=(window.screen.height-iHeight)/2;
 var iLeft=(window.screen.width-iWidth)/ 2;
 window.open(url,"Detail","Scrollbars=no,Toolbar=no,Location=no,Direction=no,Resizeable=no,
 Width=" iWidth " ,Height=" iHeight " ,top=" iTop ", left=" iLeft); 
        } 

window.showModalDialog 메서드

코드 복사 코드는 다음과 같습니다.

 function ShowDialog(url) { 
 var iWidth=300; //창 너비
 var iHeight=200;//창 높이
 var iTop=(window.screen.height-iHeight)/2;
 var iLeft=(window.screen.width-iWidth)/2;
 window.showModalDialog(url,window,"dialogHeight: " iHeight "px;DialogWidth: " iWidth "px;
DialogTop:"iTop";DialogLeft:"iLeft"; 크기 조정 가능: 아니요; 상태: no;scroll:no");
 매개변수, 창 

3. 데이터를 캐시하지 않도록 페이지를 설정하는 방법

jsp 페이지에 다음 문장을 추가하세요

코드 복사 코드는 다음과 같습니다. <%

response.setHeader("Pragma","No-Cache");

 response.setHeader("Cache-Control","No-Cache");
 response.setDateHeader ("만료", 0 ; >

 코드는 다음과 같습니다.

function CloseWin(){

var ua = navigator.userAgent; var ie = navigator.appName =="Microsoft Internet Explorer"?true: false;
if(ie){ var IEversion =parseFloat(ua.substring(ua.indexOf("MSIE ") 5,ua.indexOf(";", ua.indexOf("MSIE "))) );
if( IEversion< 5.5){ var str = '';

document.body.insertAdjacentHTML("beforeEnd", str); document.all.noTipClose.Click(); } else { window.opener =null; window.close(); } }else{ window.close()

}

} 
 
5. 팝업창을 정기적으로 닫습니다---타이머 설정/삭제
 
코드 복사

 코드는 다음과 같습니다: 

script언어="JavaScript"

!--
functioncloseit(){ setTimeout("self.close()",100000)// 단위는 밀리초, 여기서는 100초입니다setInterval("self.close()",100000)

window.clearTimeout(me.timer); window.clearInterval(me.timer) /script
6. 자바스크립트 팝업 하위 창에 값 전달---URL을 통해 값 전달

코드 복사 코드는 다음과 같습니다.

7.jshide /Show 양식
document.all("id").style.display=="none";//숨기기
document.all("id").style.display==""; // Display
document.getElementById("bt").style.display=="none"
document.getElementById("bt").style.display==""
id는 테이블, 입력 ID

8.js는 양식 요소의 유효성/무효성을 제어합니다
document.getElementById("bt").disabled=true;
document.all("Submit1").disabled= true; //유효하지 않음
document.all("Submit1").disabled=false; //유효함

요소 값 설정/가져오기
document.getElementById("labTitle").innerHTML="IP mode";//값 설정
document.getElementById("labTitle").innerHTML// 값 가져오기
labTitle은 div,span,table의 ID입니다

예 1:

코드 복사코드는 다음과 같습니다.

<input id="mytext" type="text" value="사용할 수 없습니다.">
<input type="button" value="disabled " onClick="javascript: document.all.mytext.disabled='false'">
<input type="button" value="enable" onClick="javascript: document.all.mytext.removeAttribute(' 비활성화됨')">

예시 2:

코드 복사 코드는 다음과 같습니다.

 <input id="mytext" type="text" value="사용할 수 있습니다">
<input type="button" value="disable" onClick="if (mytext.disabled==false ){ mytext.disabled=true;mytext.value='사용할 수 없습니다';this.value='enable'} else { mytext.disabled=false;mytext.value='사용할 수 있습니다';this. 값= '비활성화'}"> 

9. 페이지에서 함수를 통해 양식을 제출하는 방법

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

함수 종료(){
selcardForm.action="/NDHotel/queryTroom.do?method=exitSystem";
selcardForm.submit();
} 

10. 트래버스 무선 방식

코드 복사 코드는 다음과 같습니다. 다음은 다음과 같습니다.

var radios=document.getElementsByName("workMode");
var workMode="";
for(var i=0;i<radios.length;i ){
if(radios[ i].checked==true){
workMode=radios[i].value; 🎜>

코드 복사
코드는 다음과 같습니다:

<select id="ddlProvince" name= "ddlProvince" onchange="cityResult()"> var prov=document.getElementById("ddlProvince"); prov.options.add(new Option("---선택하세요---","")); var pArray=zoneIdProvince .split("&");

for(var i=0;i<pArray.length;i ){

var idpArray=pArray[i].split("#");
var sZoneID =idpArray[0];

var sProvince=idpArray[1];

prov.options.add(new Option(sProvince,sZoneID));
}

12. 프로토타입 Ajax를 사용하여 페이지에 데이터를 제출하는 방법(java)

1단계: <head></head>에 다음 js 파일 링크를 추가합니다.

코드를 복사합니다. 코드는 다음과 같습니다:

<head>
<script 언어="JavaScript" src="/NDHotel/js/prototype-1.6.js"></script> 
< /head>

2단계: /NDHotel/js/에 지정된 디렉터리에 프로토타입-1.6.js 파일을 배치합니다.

3단계: <script type="text/javascript"></script>

코드 복사에서 다음 호출 함수를 선언합니다. 코드는 다음과 같습니다.

function editResult(result){
var returnStr = result.responseText;
if(returnStr =='fail'){
Alert("");
return false; }
}
</script>

4단계: 백그라운드 호출 구현

코드 복사 코드는 다음과 같습니다.

 public ActionForward roomChangeNotice(ActionMapping 매핑,
 ActionForm 양식, HttpServletRequest 요청,
 HttpServletResponse 응답) throws Exception {
 문자열 결과 = ""; 
 PrintWriter pw = RainPrintWriter.getPrintWriter(response);
 try {
 NotifyServiceTwo.sendMessage(4, 0);
 result = "success";
 } catch(예외 e ) {
 logger.error("roomChangeNotice" e);
 }
 pw.write(result);
 pw.close();
 return null;
 }

13.js에서 양식 값을 가져오는 방법:

코드 복사 코드는 다음과 같습니다.

document.getElementById("linindex").value

document.all.lindex.value//lindex는 페이지에서 고유해야 합니다
//포커스를 가져오도록 설정

document.getElementById("linindex").focus()
document.all.startip.focus()

//포커스를 잃도록 설정

document.getElementById("linindex").blur()
document.all.startip.blur()

14. 동적 테이블의 행 추가/삭제

코드 복사 코드는 다음과 같습니다.

< 테이블 너비="100%" id="tdSearch" name="tdSearch" cellpadding="0" cellpacing="0" align="center">
</table>
//동적으로 테이블 행 생성

var autoId = 0; // 자동 증가 변수
function addRow(value1,value2){
var highQuery=document.getElementById("tdSearch"); 🎜> highQuery.insertRow();
var newRow = highQuery.rows[highQuery.rows.length - 1];
newRow.id = "row_" autoId;
newRow.insertCell(); > newRow.cells[0].innerHTML = "<input width='200' value='" value1 "' onchange='changeip(" autoId ")' type='text' id='bIPFrom_" autoId "'> ;-";

newRow.insertCell();
newRow.cells[1].innerHTML = "<input width='200' value='" value2 "' type='text' id ='bIPTo_" autoId "'> "; "

var cell2 = newRow.insertCell()
cell2.innerHTML = "<input class='btn_1word' type='button' class= ' HQ_BUTTON' value='-' onClick=removeRow('" newRow.id "')>";
cell2.setAttribute("class", "yellowCell2");
autoId=autoId 1;
}

제거함수Row(rowId){

var trRow = document.getElementById(rowId);

//alert(trRow);

//if(rowId!="row_0"){

trRow.removeNode(true);
//}
}

15. 컬렉션

코드 복사 코드는 다음과 같습니다.

//가져오기 진행률 표시줄 표시
document.all("btnImport").disabled=true;
document.all("DataGrid_WaitDiv").style.left=100;
document.all ("DataGrid_WaitDiv" ).style.top=295;
document.all("DataGrid_WaitDiv").style.display = "";

form1.action="/NDHotel/jsp/systemset/roomSet/uploadFile.jsp";
form1.submit();

16. 새 창 만들기
function layer1AddGroup() {
var url='/NDHotel/jsp/systemset/roomSet/addGroup.jsp';
var newwin= window .showModalDialog(url,window,"dialogWidth=470px;dialogHeight=400px;scroll=yes;status=no;help=no;");
}

//상위 페이지 새로 고침
function roomMainLeftRightFrame(){
var layer='<%=layer%>';
window.parent.parent.frames('view'). location .href="/NDHotel/troom.do?method=roomSetLeftMenu&layer=" layer;
}

17. 텍스트 상자의 읽기 전용 속성을 설정합니다. 텍스트 상자 색상/설정 라디오 선택

코드 복사 코드는 다음과 같습니다.

document.all("txt_AutoTime" ).readOnly=true;
document.all("txt_AutoTime").style.BackgroundColor="#d0d0d0";
runParamSetForm.radNotForcously.checked=true;

//IP 주소 확인
function ipCheck(ipValue){
var reg = /^/d{1,3}(/./d{1,3}){3}$ /;
if(ipValue != ""){
if (reg.test(ipValue)){
var ary = ipValue.split('.');
for(key in ary ){
if (parseInt(ary[key]) > 255 )
return false;
}
return true;
}else
return false
}else;
true를 반환합니다.
}