32일차 복습

JS로 문서 객체 속성 변경

getAttribute() : 입력된 객체의 속성값을 가져오는 함수

setAttiribute( a, b ) : 호출된 객체의 a 속성값을 b로 변경하는 함수.

ex) 이미지 변경하기

   function changeImg() {
      let img = document.getElementById("img"); // img태그 선택
      let imageName = img.getAttribute('src'); // img태그의 src속성 선택
      img.setAttribute('src', 'bananas.png');  // src태그 변경( 이미지 변경 )
      };

JS로 클래스 이름 설정하기

방법

1. 설정하고자 하는 태그를 선택한다.

2. .classList로 해당 태그의 클래스 이름을 받아온다.

3. array함수 remove나 add로 클래스 이름을 추가하거나 삭제한다.

  function classChange1() {
      let h1 = document.getElementById("header"); // id로 태그 선택
      if( h1.classList.contains('active') ){ // 클래스명이 있는지 확인
        h1.classList.remove('active');  // 있으면 삭제
      }else{
        h1.classList.add('active');  // 없으면 추가
      };

for 문을 통해 많은 수의 태그 수정하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>테이블 입력값 조작하기</title>
  <script>
    //연습문제22
    //값 지우기 버튼을 클릭하면, 왼쪽의 입력창의 값을 지우시오.
    window.onload = () => {
      makeTable(); 

      var btnArray = document.getElementsByTagName('button');
      for(var i=0; i<btnArray.length; i++ ){
        //화살표 함수에는 this가 없음. 주의!
        btnArray[i].onclick = function () {
          console.log(this.value + '번째 클릭됨.');
          var input = document.getElementById('input' + this.value);
          input.value = "";
        };
      }

    };
    function makeTable() {  // column 100칸짜리 테이블 생성
      document.writeln("<table border=1>");
      for(var i=1; i<=100; i++){
        document.writeln('<tr>');
        document.writeln('<td>목록'+i+'</td>');
        document.writeln('<td><input id="input' + i + '" type="text"></td>');
        document.writeln('<td><button id="btn' + i + '" value="'+i+'">값지우기</button></td>');
        document.writeln("</tr>");
      }
      document.writeln("</table");
    }
  </script>
</head>
<body>
  
</body>
</html>

** 화살표 함수에서는 this를 사용할수 없으니 주의하자**

checkbox, radio, select, select multiple 모두 선택된 값은 true, 선택 안되면 false로 값을 반환한다.

전자는 .checked, 후자는 .selected로 접근할 수 있다.

간단한 방식이여서 따로 이에 대해서는 설명하지 않고, 주의깊게 볼만한 함수 설계법을 몇가지 소개하겠다.

1. flag(깃발) 사용 함수.

특정값을 먼저 지정해두고, 조건에 따라 그 값에 변화를 준다음, 그 값이 어떻게 변했는지 판별하는 방식이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <title>약관동의 체크박스 확인하기</title>
  <script>
    function agree() {
      console.log("agree()");
      //alert창
      var checkboxArray = document.getElementsByName('agree');
      //반복문 전에 boolean변수(flag 깃발)에 초기값.
      var isAllCheck = true;
      for(var cbx of checkboxArray) { 
        if(cbx.checked == false){  // 조건에 따라 flag값 변화
          isAllCheck = false;
          break; //반복문을 탈출하는 키워드
          //continue; //반복문의 해당루프를 탈출하는 키워드
        }
      }
      if(isAllCheck == true){  // flag변수 값 검사
        alert('모두 체크되어 있습니다.');
      }else{
        alert('모두 체크되어 있지 않습니다.');
      }
    }
  </script>
</head>
<body>

  <form action=""> 
    <textarea cols="30" rows="3">약관1에 대해서...</textarea> <br>
    <input type="checkbox" name="agree" id="chk1"> 약관동의1 <br>
    <textarea cols="30" rows="3">약관2에 대해서...</textarea> <br>
    <input type="checkbox" name="agree" id="chk2"> 약관동의2 <br>
    <textarea cols="30" rows="3">약관3에 대해서...</textarea> <br>
    <input type="checkbox" name="agree" id="chk3"> 약관동의3 <br>
  </form> 
  <br>
  <!-- 앵커태그에서 JS함수 호출하기 -->
  <a href="javascript:checkAll();">모두 동의 체크하기</a> <br>
  <a href="javascript:agree();">모두 동의 확인</a> <br>
  <a href="javascript:back();">동의 취소</a> <br>
  
</body>
</html>

  function value_check() {
      var radioArray = document.getElementsByName('fruit');
      for( var radio of radioArray ) {
          if(radio.checked == true) {
              var value = radio.value;
              var text = document.getElementById(value).innerText;
              var headerArray = document.getElementsByTagName('h3');
              headerArray[0].innerHTML = "선택된 과일 이름 : " + text;
              headerArray[1].innerHTML = "선택된 과일 value : " + value;
          }
      }
    }

이런식으로 선택하는 것이 일반적이기는 하나, 애초에 객체 자신을 함수의 입력값으로 받아서 객체에 접근하는 방식도 존재한다.

<html lang="ko">
<head>
  <title>라디오버튼 체크 확인</title>
  <script>
    //연습문제24
    //버튼을 클릭하면, 
    //선택된 라디오버튼의 텍스트와 value를 출력하시오.
</head>
<body>
  <h4>onchange함수:</h4>
  첫번째 라디오<input type="radio" name="myRadios" 
      onchange="handleChange(this);" value="1" />
  두번째 라디오<input type="radio" name="myRadios" 
      onchange="handleChange(this);" value="2" />
  <script>
    function handleChange(inputRadio) {
      var arrayH4 = document.getElementsByTagName('h4');
      arrayH4[0].innerHTML = "onchange함수:"+inputRadio.value; // 파리미터를 통해 접근
    }
  </script>    

</body>
</html>

*주의할점*

select의 option프로퍼티에 접근하고자 하면 options, 즉, "s" 를 붙여야만 한다.

유효성 체크 ( 로그인 창, 회원가입 창 만들기)

1. 먼저 html태그에서 <form> 태그로 서버로 보내고자 하는 부분들 전부를 감싸야만 한다. action태그에는 보내고자 하는 서버 주소를 적어야 하며, name역시 설정해주면 좋다.

  <!-- 입력폼 : form태그 -->
  <form id="myForm" name="myForm" action="http://www.mysite.com">
    <label for="name">이름</label> <br>
    <input type="text" name="name" id="name"> <br>
    <label for="pass">비밀번호</label> <br>
    <input type="password" name="pass" id="pass"> <br>
    <label for="pass-check">비밀번호 확인</label> <br>
    <input type="password" id="pass-check"> <br>
    <br>
    <!-- input submit에는 기본 클릭이벤트가 있음 -->
    <input type="submit" value="제출">
  </form>

2. form태그를 선택한다. form태그는 document.(name값) 만 적어도 선택할수 있다.

 let myForm = document.myForm;

3. 선택한 태그에 onsubmit프로퍼티에 접근해서, function으로 입력된 문자열의 길이 또는 null/empty 여부에 따라 true/false로 값을 리턴한다.

  myForm.onsubmit = function () {
        //name 유효성 확인
        let name = document.getElementById('name').value;
        
        //널체크 Empty체크 길이체크
        if( !name || name.length < 2 ){ //null과 empty체크
          alert('이름이 비어 있습니다. 확인후 다시 시도해주세요.');
          return false; 
        };
        
        //비번 유효성 확인
        let password =  document.getElementById('pass').value;
        //널체크 Empty체크 길이체크
        if( !password || password.length < 4 ){ //null과 empty체크
          alert('암호가 비어있습니다. 확인후 다시 시도해주세요.');
          return false; 
        };

        //비번과 비번확인 동일 체크
        let pass_check = document.getElementById('pass-check').value;
        //널체크 Empty체크 길이체크
        if( !pass_check || pass_check.length < 4 ){ //null과 empty체크
          alert('암호확인이 비어있습니다. 확인후 다시 시도해주세요.');
          return false; 
        };

        if( password != pass_check )  {
          alert("비번과 비번확인 동일하지 않습니다.");
          return false; 
        }
                
        return true;
      }; // 함수 끝

리턴값이 true면 전송, false면 submit을 무시한다. 따라서 onsubmit이벤트를 발생시켜도 false가 되면 전송되지 않는다.

따로 버튼을 누르거나 함수를 이벤트를 발생시키지 않아도 알아서 데이터를 전송시키는 함수도 존재한다.

myForm.submit();

css우선순위와 js로 스타일 넣기

css 속성에도 우선순위가 존재한다.

속성 값 뒤에 !important 를 붙인 속성
HTML에서 style을 직접 지정한 속성
#id 로 지정한 속성
.클래스, :추상클래스 로 지정한 속성
태그이름 으로 지정한 속성
상위 객체에 의해 상속된 속성

현업에서 1과 2는 잘 안쓰인다.

만약 style 태그에서 hover나 다른 속성들이 부여되있는데, JS로 style속성을 추가하니까 전부 삭제된 경험이 있을것이다. 이는 JS로 넣는 태그는 inline속성, 즉, 태그에 직접 style을 지정해 속성을 부여하는 2순위이기 때문이다.

style태그에서 속성을 부여하면 무슨 수를 쓰더라도 JS에서 접근하는 태그보다 우선순위가 높을수가 없다.

또한 hover와 같은 행동 속성은 inline형식( 태그에 직접 쓰는 형식 )으로 부여할수 없다.

JS로 css에 접근하는 두가지 방법

1. .style.속성

inline으로 속성을 추가하며, 기존에 있던 속성에 추가되는 방식이다.

2. window.getComputedStyle(객체).속성

inline으로 속성을 추가하며, 적용이 안된 값도 확인할 수 있다.

'공부 > javascript' 카테고리의 다른 글

스프링부트: Junit을 이용해 테스트 하기 (0)	2023.01.27
32일차 복습 (0)	2022.12.27
프로퍼티(property) (0)	2022.12.27
31일차 복습-2 (0)	2022.12.26
31일차 복습 - 1 (0)	2022.12.26

프로그래밍 공부 이야기

32일차 복습

'공부 > javascript' 카테고리의 다른 글

티스토리툴바

32일차 복습

'공부 > javascript' 카테고리의 다른 글

관련글

티스토리툴바