[javascript] javascript에 대해서 알아두기 (이론)

· javascript는 php에 값을 보내주지 못한다.

· javascript가 서버와 통신하려면 ajax를 이용한 비동기 방식밖에 없다.

· javascript는 페이지를 열 때 딱 1번 작동하는 php와는 다르게 서버와 끊긴 상태에서도 살아있다.

예를들어, 회원가입 페이지에서 사용자가 완료 버튼을 클릭했을 시 javascript속 함수를 이용할 수 있음.

 

· php는 javascript에 딱 1번 첫 페이지가 열릴 때에만 값을 보내주고, 그 외에는 보내주지 못한다.

· 자바스크립트는 사용자에게 보여주는 edit.php (insert, update 화면페이지)에서 사용하는것이고, 뒷단인 update.php  (insert, update 처리페이지) 에서는 alert이외에는 하는 일이 없기 때문에 그것 말고는 기능구현을 위한 코드들은 적지 않는다. 헷갈리지 말아야한다.

· javascript가 페이지가 열리는 순간 (맨 처음)부터 적용시키려면 

 

<script>
function start (){
        alert("start");
    }
    
    start();
    
</script>

 

자바스크립트안의 함수를 호출하면 됨.

 

 

·  javascript 안에 $가 붙어있으면 이건  자바스크립트가 아니라 Jquery이다!!!

  php에서는 그누보드쪽에서 Jquery library를 제공해주기 때문에 따로 추가 안해도 쓸 수 있지만 보통은 라이브러리 없으면 자바스크립트에서 사용불가능

 

<script>
    function frm_submit(){ 
        var errMsg = "";
        
        // 사업자번호 정규표현식
        //let cnumber = $("input[id='cnumber']").val();        
        let cnumber = document.getElementById('cnumber').value.trim();
        //console.log("입구: "+cnumber);

 

 

 

·  javascript에는 html 문서로 보이는 결과가 아닌 이상 <br>태그가 먹히지 않는다. 대신 \n을 써줘야한다.

 

<script>
    function frm_submit(){ 
        var errMsg = "";
errMsg += "올바른 사업자번호를 입력하십시오\n";

alert(errMsg);
}
</script>

 

 

 

 

 

 

●  디버깅하는 습관을 들이자.

console.log(): 여러 군데 찍어놓아야 값을 확인하기 쉽다.

 

if (cnumber!=""){
            // replace버전
            cnumber = cnumber.replace(/\-/g,'');
            
            //console.log("입구: "+cnumber);
            
            let cnumberregex = new RegExp('^[0-9]{10}$');
            if(!cnumberregex.test(cnumber)) {                        
                
                //console.log("2-1");                   
                
                errMsg += "올바른 사업자번호를 입력하십시오\n"; 
            } else {
               
               //console.log("2-2");                   
               
               cnumber = cnumber.replace(/^(\d{3})(\d{2})(\d{5})$/, `$1-$2-$3`);
               
               //console.log("하이픈 붙임 : "+ cnumber);
                
                document.getElementById('cnumber').value = cnumber;
               
               //console.log(cnumber);
            }       
}

 

 

●  javascript에서 폼에 접근하는 방법.

 

폼 name으로 접근 = > document.( 폼name명)

var f = document.myForm; // 폼이름으로 접근

var f = document.forms[0]; // 첫번째 폼

 

var birth = document.getElementsByName("birth")[0].value;

// 객체의 이름(name) 속성을 이용하여 접근

var age = document.getElementById("age").value;

// id 속성 접근