농부지기

Vue.js 3. 기본예제 (복잡한 if,for)-설문지

- 아래 scipt는 작동 되지 않는다. 서버에서 설문항목이 조회되어야 정상작동 된다.

- if문, for문장에 대해서 참고용으로만 보면 된다.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="lib" uri="https://lib.fnc.com" %> <div id="container"> <div id="contents"> <div class="tit_area02"> <h2>설문 조사를 실시하고 있습니다.</h2> <p>고객님 설문 참여 해주세요.</p> </div> <!-- form @submit.prevent="save"--> <div class="survey"> <dl> <dt>질문을 확인하시고 답변 부탁드립니다.</dt> <dd> <ul class="question"> <!-- 질문 for --> <li v-for="quest in questList"> <span class="tit-tx" v-text="quest.QUST_NO + '. ' + quest.ITEM_CN_S" v-show="quest.LOW_OUST_YN=='N' || (quest.UP_CTRL_TYPE=='10' && ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO] == quest.UP_ANS_NO) || (quest.UP_CTRL_TYPE=='20' && (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO] ? (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO].indexOf(quest.UP_ANS_NO) >= 0 ? true:false) : false))"> </span> <!-- 답안문항 for --> <div class="cons" v-for="item in itemList"> <!-- =============================================================================== --> <!-- radio (10:단수선택) --> <!-- =============================================================================== --> <label class="label" v-if="quest.SRVY_SHEET_DTL_NO == item.SRVY_SHEET_DTL_NO && quest.CTRL_TYPE == '10'" v-show="quest.LOW_OUST_YN=='N' || (quest.UP_CTRL_TYPE=='10' && ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO] == quest.UP_ANS_NO)"> <span class="radio"> <input type="radio" class="radio" v-model="ansList[quest.ANS_DTL_NO]" :value="item.SRVY_SHEET_ANS_NO"> <i></i> </span> {{circleNum[item.ANS_ORDR_SEQ]}} {{item.ANS_CN}} <!-- ({{item.ETC_ADD_YN}}) --> </label> <input type="text" class="input block add_txt" v-if="quest.SRVY_SHEET_DTL_NO == item.SRVY_SHEET_DTL_NO && quest.CTRL_TYPE == '10' && item.ETC_ADD_YN == 'Y'" v-model="ansList[item.ADD_ANS_NO]" v-show="(ansList[quest.ANS_DTL_NO] == item.SRVY_SHEET_ANS_NO) && (quest.LOW_OUST_YN=='N' || (quest.UP_CTRL_TYPE=='10' && ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO] == quest.UP_ANS_NO) || (quest.UP_CTRL_TYPE=='20' && (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO] ? (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO].indexOf(quest.UP_ANS_NO) >= 0 ? true:false) : false)))"> <!-- =============================================================================== --> <!-- checkbox (20:복수선택) --> <!-- =============================================================================== --> <label class="label" v-if="quest.SRVY_SHEET_DTL_NO == item.SRVY_SHEET_DTL_NO && quest.CTRL_TYPE == '20'" v-show="quest.LOW_OUST_YN=='N' || (quest.UP_CTRL_TYPE=='20' && (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO] ? (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO].indexOf(quest.UP_ANS_NO) >= 0 ? true:false) : false))"> <span class="checkbox"> <input type="checkbox" class="checkbox" v-model="ansList[quest.ANS_DTL_NO]" :value="item.SRVY_SHEET_ANS_NO"> <i></i> </span> {{circleNum[item.ANS_ORDR_SEQ]}} {{item.ANS_CN}} <!-- ({{item.ETC_ADD_YN}}) --> </label> <input type="text" class="input block add_txt" v-if="quest.SRVY_SHEET_DTL_NO == item.SRVY_SHEET_DTL_NO && quest.CTRL_TYPE == '20' && item.ETC_ADD_YN == 'Y'" v-model="ansList[item.ADD_ANS_NO]" v-show="(ansList[quest.ANS_DTL_NO] ? (ansList[quest.ANS_DTL_NO].indexOf(item.SRVY_SHEET_ANS_NO) >= 0 ? true:false) : false) && (quest.LOW_OUST_YN=='N' || (quest.UP_CTRL_TYPE=='20' && (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO] ? (ansList['ANS_DTL_NO_' + quest.UP_SRVY_SHEET_DTL_NO].indexOf(quest.UP_ANS_NO) >= 0 ? true:false) : false)))"> </div> <!-- =============================================================================== --> <!-- textarea --> <!-- =============================================================================== --> <input class="textarea block add_txt_row" v-if="quest.ANS_TYPE == '20'" v-model="ansList[quest.ANS_DTL_NO]"></input></p> <div class="text_end">설문에 끝까지 응답해 주셔서 대단히 감사합니다.</div> <div class="btn_box"><button class="btn" type="submit">설문 참여하기</button></div> <!-- /survey --> <p> </p> <!-- /contents --> <script> var vm = new Vue({ el: '#container', data: { search: {surveyId:null}, ansList : { }, questList: null, itemList : null, circleNum : ['', '①','②','③','④','⑤','⑥','⑦','⑧','⑨'] }, created: function() { this.search['surveyId'] = this.urlParam("surveyId"); }, mounted: function() { this.init(); }, methods: { init: function() { var param = this.search; this.http('<c:url value="/cs/sv/survey/surveyInit.json" />', param, function(data) { this.questList = data.questList; this.itemList = data.itemList; this.ansList["surveyId"] = this.search["surveyId"]; var itemJson = JSON.parse(JSON.stringify(data.itemList)); //1. main 값들 set this.ansList['SRVY_SHEET_NO'] = itemJson[0].SRVY_SHEET_NO; //2. 복수선택에 대한 배열변수 선언 var questLen = this.questList.length; for(var ii=0; ii<questLen; ii++){ if (this.questList[ii].CTRL_TYPE == '20') { Vue.set(this.ansList, this.questList[ii].ANS_DTL_NO, []); } } }); }, save: function() { console.log('전송 데이터 : ', this.ansList); var bValid = this.validation(); if (bValid == false) return; this.httpBody('<c:url value="/cs/sv/survey/save.json" />', this.ansList, function(data) { alert(data.result); //close(); }); }, urlParam: function(name){ var results = new RegExp('[\?&]' + name + '=([^&#]*)').exec(window.location.href); if (results==null){ return null; } else{ return decodeURI(results[1]) || 0; } }, validation: function() { var questJson = JSON.parse(JSON.stringify(this.questList)); var itemJson = JSON.parse(JSON.stringify(this.itemList)); var questLen = this.questList.length; //1. 문제별 FOR문 for(var ii=0; ii<questLen; ii++) { var lowOustYn = this.questList[ii].LOW_OUST_YN; //하위문항여부 var qustNo = this.questList[ii].QUST_NO; //문항번호 var questDtlNo = this.questList[ii].SRVY_SHEET_DTL_NO; //설문지상세번호 var questAnsNo = this.ansList[this.questList[ii].ANS_DTL_NO]; //문제번호별 답 var ansType = this.questList[ii].ANS_TYPE; //답안유형 var sizeLmit = this.questList[ii].SIZE_LMIT; //사이즈한도 //1. 답변 선택 여부 if (lowOustYn == 'N' && this.isNull(questAnsNo) == true) { alert("(" + qustNo + ") - 문항에 답변을 하지 않았습니다."); return false; } //2. 내가 하위문항 이면 if (lowOustYn == 'Y' && this.isNull(questAnsNo) == true) { //내 상위의 답안번호가 체크 되었으면 - 필수 검사 var upCtrlType = questJson[ii].UP_CTRL_TYPE; //상위컨트롤유형 var upDtlNo = questJson[ii].UP_SRVY_SHEET_DTL_NO; //상위설문지상세번호 var upAnsNo = questJson[ii].UP_ANS_NO; //상위답안번호 var varUpAnsNo = "ANS_DTL_NO_" + upDtlNo; //상위 설문지상세 변수 //내 상위가 체크 되었는지 여부 var bUpSelected = false; if (upCtrlType == "10") { bUpSelected = this.ansList[varUpAnsNo] == upAnsNo ? true : false; }else{ bUpSelected = this.ansList[varUpAnsNo] ? (this.ansList[varUpAnsNo].indexOf(upAnsNo) > 0 ? true : false) : false; } if (bUpSelected == true){ alert("(" + qustNo + ") - 문항에 답변을 하지 않았습니다."); return false; } } //3. radio버튼 이면 -> 추가 답변 검사 // // ANS_DTL_NO_15 : 1 // ADD_ANS_NO_15_1: 난 Radio답변 var varAddAnsNo = "ADD_ANS_NO_" + questDtlNo + "_" + questAnsNo; //radion 문항에 대한 추가답변 변수 var addAnsNotes = this.ansList[varAddAnsNo]; if (this.questList[ii].CTRL_TYPE == '10' && this.isNull(addAnsNotes)) { var itemLen = this.itemList.length; for(var jj=0; jj<itemLen; jj++) { var itemDtlNo = itemJson[jj].SRVY_SHEET_DTL_NO; var itemAnsNo = itemJson[jj].SRVY_SHEET_ANS_NO; if (questDtlNo == itemDtlNo && questAnsNo == itemAnsNo) { var ansOrdrSeq = this.circleNum[itemJson[jj].ANS_ORDR_SEQ]; var etcAddYn = itemJson[jj].ETC_ADD_YN; if (etcAddYn == 'Y') { alert("(" + qustNo + "- 문항, " + ansOrdrSeq + "번) 답변에 추가 설명 부탁 합니다."); return false; }else{ break; } } } } //3. checkbox버튼 이면서 추가 답변 검사 // // ANS_DTL_NO_1 : [1, 5] // ADD_ANS_NO_1_1 : 난 1번에 대한 Checkbox답변 // ADD_ANS_NO_1_5 : 난 5번에 대한 Checkbox답변 if (this.questList[ii].CTRL_TYPE == '20') { var itemLen = this.itemList.length; //checkbox답변 갯수 for var ansLen = questAnsNo.length; for(var kk=0; kk<ansLen; kk++) { var varAddAnsNo = "ADD_ANS_NO_" + questDtlNo + "_" + questAnsNo[kk]; var addAnsNotes = this.ansList[varAddAnsNo]; if (this.isNull(addAnsNotes)) { //항목에 대한 for for(var jj=0; jj<itemLen; jj++) { var itemDtlNo = itemJson[jj].SRVY_SHEET_DTL_NO; var itemAnsNo = itemJson[jj].SRVY_SHEET_ANS_NO; if (questDtlNo == itemDtlNo && questAnsNo[kk] == itemAnsNo) { var etcAddYn = itemJson[jj].ETC_ADD_YN; var ansOrdrSeq = this.circleNum[itemJson[jj].ANS_ORDR_SEQ]; if (etcAddYn == 'Y') { alert("(" + qustNo + "-문항, " + ansOrdrSeq + "-번) 답변에 추가 설명 부탁 합니다."); return false; }else{ break; } } } } } } //4. 주관식 인 경우 if (ansType == "20"){ var textSize = questAnsNo.length; if (textSize > sizeLmit) { alert("(" + qustNo + "-문항)에 " + sizeLmit + "자를 넘을 수 없습니다." + "\n(현재 : " + textSize + " 자 입력)"); return false; } } } return true; }, isNull : function(val){ if (val=="" || val==null || val==undefined) return true; else return false; }, // 문항 조회 여부 //fn_questVisible : function(idx) { // // var questJson = JSON.parse(JSON.stringify(this.questList)); // // //1. 내가 하위문항이 아니면 return true (바로 보여주면 됨) // if (questJson[idx].LOW_OUST_YN == "N") return true; // // //2. 내가 하위문항 이면서 && 내 상위의.하위포함여부 가 체크 되었으면 보여주기(return true) // var upDtlNo = questJson[idx].UP_SRVY_SHEET_DTL_NO; //상위설문지상세번호 // var upCtrlType = questJson[idx].UP_CTRL_TYPE; //상위컨트롤유형 // //var upQustNo = questJson[idx].UP_QUST_NO; // // if (upCtrlType == '10') { // var varUpAnsNo = "ANS_DTL_NO_" + upDtlNo; //상위 설문지상세 변수 // var upAnswer = this.ansList[varUpAnsNo]; // return this.isNull(upAnswer) ? false : true; // }else{ // // } // // return false; //} } }); //참고. location.href를 사용할 때는 아래처럼 하면 됨 //location.href='<c:url value="/cs/sv/survey/survey.fnc" />?surveyId=' + this.search["surveyId"]; //아래처럼도 할 수 있지만.. 위쪽으로 해야 보안등에서 더 좋음 //location.href="http://www.keiis.co.kr/cs/sv/survey/survey.fnc?surveyId=" + this.search["surveyId"]; </script>

Vue.js - 2. 기본 예제(radio, checkbox)

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="lib" uri="https://lib.fnc.com" %> <div id="app"> <!-- ----------------------------------------------------------------------- --> <!-- 1. Radio 버튼-첫번째 --> <!-- ----------------------------------------------------------------------- --> <input type="radio" value="male" v-model="ansList['gender']"> 남자 <input type="text" v-model="ansList['gender_male']"> <input type="radio" value="female" v-model="ansList['gender']"> 여자 <br> <spand>당신의 성별은 : <lable v-text="ansList['gender']"></lable> </spand> <br><br> <!-- ----------------------------------------------------------------------- --> <!-- 2. Radio 버튼-두번째 --> <!-- ----------------------------------------------------------------------- --> <input type="radio" value="seoul" v-model="ansList['area']"> 서울 <input type="radio" value="incheon" v-model="ansList['area']"> 인천 <input type="text" v-model="ansList['area_incheon']"> <br> <spand>당신이 사는곳은 : <lable v-text="ansList['area']"></lable> </spand><br> <!-- ----------------------------------------------------------------------- --> <!-- 3. checkbox - 첫번째 --> <!-- ----------------------------------------------------------------------- --> <input type="checkbox" value="mac" v-model="ansList['notebook']"> 맥북 노트북 <input type="checkbox" value="sm" v-model="ansList['notebook']"> 삼성 노트북 <input type="checkbox" value="lg" v-model="ansList['notebook']"> LG 노트북 <br> <spand>당신이 원하는 브랜드는 : <lable v-text="ansList['notebook']"></lable> </spand><br><br> <lable v-text="ansList"></lable> <br><br> </div> <script> var vm = new Vue({ el:"#app" , data: { ansList : {} } , mounted: function(){ this.init(); } , methods: { init:function() { Vue.set(this.ansList, 'notebook', []); // this.ansList['gender'] = []; //radio버튼은 정의 하면 안됨 //this.ansList['area'] = []; //console.log('init method수행'); //console.log('ansList gender->' + this.ansList['gender']); //console.log('ansList ssssss->' + this.ansList['sss']); } } }) </script>

Vue.js - 기본 예제

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <%@ taglib prefix="x" uri="http://java.sun.com/jsp/jstl/xml" %> <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %> <%@ taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %> <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %> <%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %> <%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %> <%@ taglib prefix="lib" uri="https://lib.fnc.com" %> <div id="app"> <!-- ********************************************************************************** --> <!-- A. Vue값을 화면에 출력 하기 --> <!-- ********************************************************************************** --> <!-- ------------------- --> <!-- 1. 단순 컬럼값 출력 --> <!-- ------------------- --> {{message}} <span v-bind:title="message"><br> 내위에 마우스 올려봐.11<br> </span> <span v-text="message"></span><br> ======================================================<br> <!-- ----------------------------------------------------------------------- --> <!-- 3. 화면에 값을 변경 시 Vue객체에 전송하기 --> <!-- 전송이라기 보다.. 연동하기 --> <!-- v-model : 폼과 데이터를 바인딩하는 디렉티브(양방향 바인딩 형태) --> <!-- v-model : 화면에 값출력 되면서 Vue객체에 값도 연동(bind)되어 있다. --> <!-- ----------------------------------------------------------------------- --> <input v-model="message"><br> ======================================================<br> <!-- ----------------------------------------------------------------------- --> <!-- 4. Vue.객체값이 변경 되어도 .. 변경하지 않게 하기(1회성 연동) --> <!-- v-once : 1회성 연동 --> <!-- ----------------------------------------------------------------------- --> <label v-once v-text="message"></label> <- 왼쪽 내용은 위 값이 변경 되어도 message가 변경 안됨</br> ======================================================<br> <!-- ********************************************************************************** --> <!-- J. if문, for문 --> <!-- ********************************************************************************** --> <!-- ------------------- --> <!-- 2. if 문장 --> <!-- ------------------- --> <span v-if="seen==true">ok</span><br> ======================================================<br> <!-- ------------------- --> <!-- 3. for 문장 --> <!-- ------------------- --> <ol> <li v-for="one in bookList"> <span v-text="one.name"></span> </li> </ol> ======================================================<br> <!-- ********************************************************************************** --> <!-- L. Event --> <!-- ********************************************************************************** --> <!-- ------------------------ --> <!-- 4. 버튼 클릭 event수행 --> <!-- ------------------------ --> <button v-on:click="reverseMessage">메시지 뒤집기</button><br> ======================================================<br> <!-- ----------------------------------------- --> <!-- 10. 값이 변경 되면 event 호출하기 --> <!-- ----------------------------------------- --> <input v-model="message"> <- 값이 변경 되면 event가 호출 됨<br><br> <input v-model="startDate"> <- 값이 변경 되면 event가 호출 됨<br> ======================================================<br> <!-- ********************************************************************************** --> <!-- M. Method, Function 생성 및 호출하기 --> <!-- ********************************************************************************** --> <!-- ------------------------ --> <!-- 1. 버튼 클릭 event수행 --> <!-- ------------------------ --> <button v-on:click="reverseMessage">메시지 뒤집기</button><br> ======================================================<br> <!-- ----------------------------------------------------------- --> <!-- 2. input box값을 입력함과 동시에 event를 호출 해서 분리하기 --> <!-- . yourName에 대한 변수와 watch.yourName event가 필요함 --> <!-- ----------------------------------------------------------- --> 이름 입력:<input v-model="yourName"> -> 첫번째이름:[<label v-text="firstName"></label>] -> 두번재이름:[<label v-text="lastName"></label>]<br> ======================================================<br> <!-- -------------------------------- --> <!-- 3. created, mounted시 호출된 내용 --> <!-- -------------------------------- --> created시 내용 -> <lable v-text="createdMessage"></lable> <br> mounted시 내용 -> <lable v-text="mountedMessage"></lable> <br> ======================================================<br> <!-- ********************************************************************************** --> <!-- P. 객체 다르기(html tag 다루기) --> <!-- ********************************************************************************** --> <!-- ----------------------------------------- --> <!-- 1. button disabled 속성 처리 --> <!-- ----------------------------------------- --> <button v-bind:disabled="disabledFalse"> [버튼 클림 됨]</button> <button v-bind:disabled="disabledTrue"> [버튼 쿨릭 안됨]</button> <br> ======================================================<br> </div> <script> </script> <script> //a. Vue 객체 생성 var vm = new Vue({ el : "#app" ,data : { message: "hellow Vue!" , seen: true , bookList : [ {name: "vve배우기" , id: 1} , {name: "oracle 7일 완성" , id: 2} , {name: "nexa 2일 정독하기", id: 3} ] , startDate : "2019.06.26" , disabledFalse : false , disabledTrue : true , two : 2 , five : 5 , yourName: "" , fullName : "" , firstName : "" , lastName : "" , createdMessage : "" , mountedMessage : "" } ,methods: { reverseMessage: function() { //this는 vm인스턴스를 지칭함 this.message = <a href="http://this.message.split">this.message.split</a>('').reverse().join(''); alert(this.message); } ,nameSplit: function(){ var names = <a href="http://this.fullName.split">this.fullName.split</a>(' '); this.firstName = names[0]; this.lastName = names[1]; <a href="http://console.log">console.log</a>(this.firstName); <a href="http://console.log">console.log</a>(this.lastName); } } ,computed: { addFunc : function(){ return <a href="http://this.two">this.two</a> + <a href="http://this.five">this.five</a>; } //computed 에서 getter, setter 함수 사용하기 //,fullName: } //반응형 event //yourName : 값이 변경 시 호출 됨 ,watch: { yourName : function (newName){ this.fullName = newName; this.nameSplit(); } } //b. 인스턴스 라이프 사이클 //b.1 created 훅은 vm인스턴스가 생성 된 후에 호출 //b.2 this.addFunc과 같이 내부 function 호출 하기 ,created : function(){ <a href="http://console.log">console.log</a>("공부 시작일-" + this.startDate); <a href="http://console.log">console.log</a>(this.addFunc + " <- 2 + 5 에 대한 결과(계산 function호출)"); this.createdMessage = "난 created-인스턴스 라이프 사이클-시 호출 됨"; } //b.3 mounted - life cycle 참조 url : <a href="https://kr.vuejs.org">https://kr.vuejs.org</a>/v2/guide/instance.html , mounted:function (){ this.mountedMessage = "난 mounted-인스턴스 라이프 사이클-시 호출 됨"; } }); //a. 반응형 Event //-. startDate : 값이 변경 시 아래 매소드 수행 //-. 인스턴스 매소드 생성 ($watch) // Vue 인스턴스는 데이터 속성 이외에도 유용한 인스턴스 속성 및 메소드를 제공합니다. // 다른 사용자 정의 속성과 구분하기 위해 $ 접두어를 붙였습니다 vm.$watch("startDate", function(newVal, oldVal){ //alert(newVal + " 일자로 변경 했군"); <a href="http://console.log">console.log</a>(newVal + " 일자로 변경 했군"); }); </script>

Vue.js - 기본개념

1. 특징

    - javacript문법이 적용가능하다.

    - 확장자 .html에서도 Vue.js 가 작동된다.

    - Vue객체에서 가지고 있는 값이 변경 되면 사용자에게 보여주는 값도 변경되어 보여준다.

      즉, Vue객체의 값과 사용자에게 보여주는 변수간에 연동(binding)되어 자동변경 되어 보여준다.

    - chrome, explorer 등 각 webrower 마다 문법이 조금씩 다르게 작동 될 수 있다.

      그래서, chrome에서 적상작동되는 문법이 explorer에서 오류가 발생할 수 있다.