[Day5] JS 5 - 주민번호, 달력, 슬라이드쇼, 수학객체, 부울, 제어문, scrollheight

[Day5] JS 5 [11/24]

--복습--

1. 로또 번호 발생기 버튼을 클릭하면 로또 번호가 p 태그에 출력되도록 js 코딩 하세요

( 조건 : 오름차순 정렬 해서 출력 )

<button>로또 번호  발생기</button>
<p id="demo"></p>

  $("button").click( function (){
	   // alert("1")
	  
	   // js  배열 선언
	   var lotto = [];
	   var n ;
	   while (  lotto.length < 6 ) {
		    n = getRndRange( 1, 45);
		     if(  isDuplicationLotto(lotto, n)  )     	lotto.push( n );
		    //lotto.push(n);
    	} // 
	   
    	lotto.sort( (a,b) => a-b );
    	
    	$("#demo").html( "<ul><li>" +  lotto.join("</li><li>")  +" </li></ul>");
    	
  });
  
  // 1.   min ~ max 발생시키는 함수
  function getRndRange( min, max){
	  return  Math.floor(  Math.random()*(max-min+1)  ) + min;
  }
  
  // 2. 중복 체크하는 함수
  function isDuplicationLotto( lotto, n ){
	  return lotto.every( (elt, i, array) =>  elt !=  n ) ;
	  /* 
	  return lotto.every(function(elt, i, array) {
	  	return elt != n ;
	  })
	   */
  }

ㄱ. select 태그에 1에서 20까지의 option 태그를 js로 추가하고

ㄴ. 로또 게임 횟수를 select 태그에서 선택 후 로또 번호 출력하는 js 코딩하세요.

<select id="cmbCnt"></select>
<br>
<button>로또 번호  발생기</button>
<p id="demo"></p>

 <script>

   // 1.  select 요소에 options 20개 추가
   for (var i = 1; i <= 20; i++) {
	 $("#cmbCnt").append(   $("<option></option>").text( i ).val( i )    );
  }  // for
  
  /* [1조]
  var op = "";
  for (var i = 1; i <= 20; i++) {
      op += "<option value=" + i + ">" + i + "</option>";
  }
  // document.getElementById("cmbCnt").innerHTML = op;
  $("#cmbCnt").html( op );
  */
  
  // 2.  [jquery ajax ] - on(이벤트 등록)
  $("button").on("click", function() {
	  // js 컬렉션 클래스( list, set, map )
  	 var lottos = [];  // 2차원 배열
  	  
  	 // selected option의 value 속성
  	 var gCnt = $("#cmbCnt").val();
  	 // alert( gCnt );
  	 
  	 for (var i = 1; i <= gCnt; i++) {
	  	   var lotto = [];
	 	   var n ;
	 	   while (  lotto.length < 6 ) {
	 		    n = getRndRange( 1, 45);
	 		     if(  isDuplicationLotto(lotto, n)  )     	lotto.push( n );
	 		    //lotto.push(n);
	  	    } //  while
	  	   lotto.sort( (a,b) => a-b );
	  	    
	  	   lottos.push( lotto ); 
	 } // for
  	   
  	 $("#demo").html(  lottos.join("<br>").toString()  );
  });
  
  
  // [ lotto.js 외부js ]
  // 1.   min ~ max 발생시키는 함수
  function getRndRange( min, max){
	  return  Math.floor(  Math.random()*(max-min+1)  ) + min;
  }
  
  // 2. 중복 체크하는 함수
  function isDuplicationLotto( lotto, n ){
	  return lotto.every( (elt, i, array) =>  elt !=  n ) ;
	  /* 
	  return lotto.every(function(elt, i, array) {
	  	return elt != n ;
	  })
	   */
  }
</script>

3. 구구단 출력 버튼을 클릭하면 p 태그에 테이블 형식으로 구구단 출력하는 js 코딩하세요 .

<button>구구단 출력 버튼</button>
<p id="demo"></p>

   // 구구단  가로, 세로 출력
   var content = "<table border='1' width='100%''>";
   // 2단 3단 ~ 9단  th
   content += "<tr>";
   for (var i = 2; i <=9; i++) {
	  content += "<th>"+i+"단</th>";
   }
   content += "</tr>";
   // 
   for (var i = 1; i <=9 ; i++) {
	   content += "<tr>";
	   for (var j = 2; j <= 9; j++) {
		   content += "<td>";
		   content +=  j + " * " + i + " = " + ( j*i );
		   content += "</td>";
	   } // for j
	   content += "</tr>";
   } // for i 
   content += "</table>";
   
   // js innerText == jquery text()
   // js innerHTML == jquery html()
   $("#demo").html(  content );

주민번호 만나이

     // 주민등록번호 -> 만나이 .
     function getAge(  rrn ){
    	 // "890123-1700001"
    	 /*
    	 rrn.substr(from, length);
    	 rrn.substring(from, to)
    	 rrn.slice(from, to);
    	 */
    	 // 89
    	 var bYear =  getCentry(rrn) + parseInt(  rrn.substr( 0, 2 )  );
    	 // 01
    	 var bMonth = parseInt(  rrn.substring(2 ,  4) );
    	 // 23
    	 var bDate = parseInt(  rrn.slice(4 ,  6) );
    	 // 1
    	 // var bGender = rrn.slice( -7, -6)
    	 var bGender = rrn.substr( 7, 1 );
    	 console.log( bYear +" / " + bMonth + " /  " + bDate + " / " + bGender);
    	 
    	 
    	 // 2022 - 1989  올해년도 - 생일년도
    	 var today = new Date();
    	 var todayYear = today.getFullYear();
    	 var age = todayYear - bYear;    	 
    	 // 오늘 생일 지났지 않았으면   -1 
    	 //  js 날짜  > 날짜
    	 //  js 날짜  < 날짜    비교연산자
    	 //  js 날짜  == 날짜    비교연산자
    	 var birthday = new Date( todayYear, bMonth-1, bDate);
    	 today.setHours(0);
    	 today.setMinutes(0);
    	 today.setSeconds(0);
    	 today.setMilliseconds(0);
    	 
    	 if(  today  < birthday )  age--;
    	 
    	 console.log( birthday.toLocaleString() ) ;
    	 console.log( today.toLocaleString() ) ;
    	 
    	 return age;
     }
     
     
    function getCentry(  rrn ){
    	 var gender = rrn.substr( 7, 1 );    	 
    	 // 1,2,5,6    1900
    	 // 3,4,7,8   2000
    	 // 9,0         1800    	 
    	 if(  [1,2,5,6].some((elt, i, array) =>  elt == gender )     )   return 1900;
    	 else if(  [3,4,7,8].some((elt, i, array) =>  elt == gender )     )   return 2000;
    	 else return 1800;
    	 
    }

    // 만나이 생일 지난   상태 : 33
    //                          X 상태 : 32
     console.log( "> 만 나이 :  " +   getAge("891125-1700001") );

달력( 일정관리 )

<style>
select {
	width: 100px;
	text-align: center;
}

* {
	box-sizing: border-box;
}

ul {
	list-style-type: none;
}

body {
	font-family: Verdana, sans-serif;
}

.month {
	padding: 70px 25px;
	width: 100%;
	background: #1abc9c;
	text-align: center;
}

.month ul {
	margin: 0;
	padding: 0;
}

.month ul li {
	color: white;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 3px;
}

.month .prev {
	float: left;
	padding-top: 10px;
}

.month .next {
	float: right;
	padding-top: 10px;
}

.weekdays {
	margin: 0;
	padding: 10px 0;
	background-color: #ddd;
}

.weekdays li {
	display: inline-block;
	width: 13.6%;
	color: #666;
	text-align: center;
}

.days {
	padding: 10px 0;
	background: #eee;
	margin: 0;
}

.days li {
	list-style-type: none;
	display: inline-block;
	width: 13.6%;
	text-align: center;
	margin-bottom: 5px;
	font-size: 12px;
	color: #777;
}

.days li .active {
	padding: 5px;
	background: #1abc9c;
	color: white !important
}
</style>

<h3>ex03.html - 달력( 일정관리 )</h3>
    
    <select id="cmbyear" onchange="changeDate()"></select>
    <select id="cmbmonth" onchange="changeDate()"></select>
    <select id="cmbdate"></select>
    
	<br>
	<br>
	<div class="month">
		<ul>
			<li class="prev" onclick="changeCalendar(-1)">&#10094;</li>
			<li class="next" onclick="changeCalendar(1)">&#10095;</li>
			<li>
			     <span id="month">August</span><br> 
			     <span id="year"	style="font-size: 18px">2017</span>
			</li>
		</ul>
	</div>
	<ul class="weekdays">
		<li>Su</li>
		<li>Mo</li>
		<li>Tu</li>
		<li>We</li>
		<li>Th</li>
		<li>Fr</li>
		<li>Sa</li>
	</ul>
	<ul class="days">
    </ul>

    var today = new Date();
    var tYear = today.getFullYear();
    var tMonth = today.getMonth();
    // select 1970~2050 년도 option 추가.
    // js
    // jquery
    for (var i = 1970; i <= 2050; i++) {
    	$("#cmbyear").append( $("<option></option").text( i ) );
	}
    // 현재 년도로 option 선택
    $("#cmbyear").val(  tYear );
     
    
    // select 1~12 월 option 추가.
    // js
    // jquery
    for (var i = 1; i <= 12; i++) {
    	$("#cmbmonth").append( $("<option></option").text( i ) );
	}
    // 현재 월로 option 선택
    $("#cmbmonth").val(  tMonth + 1 ); 
////////////////////////////////////////////////////////////////////////////////////
      // select year, month 옵션을 선택할 때 .. change 이벤트 호출되는 함수( 이벤트 핸들러 )
      function changeDate(){
    	  year =  $("#cmbyear").val(  );
    	  month = $("#cmbmonth").val(  );
    	  console.log( year + " /  " + month );
    	  
    	  var lastDay = getLastDay(year, month);
    	  
    	  $("#cmbdate").html(""); // 초기화  
    	  for (var i = 1; i <= lastDay; i++) {
    		  $("#cmbdate").append( $("<option></option").text( i ) );
		  } // for
		  
    	  // 
    	  printCalendar(year, month);
      }
      
      function printCalendar(year, month){
    	  //  <span id="month">August</span><br> 
		  //  <span id="year"	style="font-size: 18px">2017</span>
		  $("#month").text(  month  );
		  $("#year").text(  year  );
		  
		  //  <li>1</li> ~ <li>28,29,30,31</li>   append()
    	  // 1.    year, month, 1  무슨 요일 ? 
    	  var dayOfWeek = getDayOfWeek( year, month, 1 );		  
    	  // 2. 마지막 날짜
    	  var lastDay = getLastDay(year, month);
    	  
    	  
    	  // <ul class="days">
    	  $("ul.days").html("");  // 초기화
          //빈거 넣는 작업
    	  for (var i = 0; i < dayOfWeek ; i++) {
    		  $("ul.days").append($("<li></li>"));
		  } // for
		  // 1~마지막날짜.
		  
		  var outputDay ;  // 출력 날짜.
		  var toDay = new Date();  // 오늘 날짜
		  
		  for (var i = 1; i <= lastDay ; i++) {    		  
    		  // if( 출력날짜 == 오늘날짜)  active 클래스 속성 추가
    		  outputDay =new Date( year, month-1 , i );    		  
    		  //console.log( outputDay.toDateString() +" / " + toDay.toDateString()
    		  //	  + " / " + (toDay.toDateString() == outputDay.toDateString() ))
    		  
    		  if(  toDay.toDateString() == outputDay.toDateString() ){
    			  // <li><span class="active">10</span></li>
    			  $("ul.days").append(  "<li><span class='active'>"+i+"</span></li>"  );
    			  /* 
    			     $("ul.days").append(
    		              $("<li></li>").append(
    		                $("<span></span>").text(i).addClass("active")
    		              ) 
    		           )
    		       */
    		  }
    		  else{
    			  $("ul.days").append($("<li></li>").text( i ));
    		  }
		  } // for
      }
      
      function getDayOfWeek(year, month, date){
    	  var d = new Date( year, month-1, date );
    	  return  d.getDay();  //   일(0) ~ 토(6)
      }
      
      function getLastDay(year, month){
    	  var lastDay = 0;
    	  var d = new Date( year, month ); // 2022.12.01 - 하루 =  일
    	  d.setDate(0);
    	  // console.log( d.toDateString() );  Wed Nov 30 2022
    	  lastDay = d.getDate();
    	  return lastDay ;
      }
      
      changeDate(); // 2022 / 11
////////////////////////////////////////////////////////////////////////////////////
   function changeCalendar(  value ){
	   // alert(  (typeof month) + "/" + (typeof value) );
	   month =  Number(month) +  value;
	   if( month == 0 ){
		   month = 12;
		   year--;
	   }else if( month == 13){
		   month = 1;
		   year++;
	   }
	   
	   // select 변경.
	   $("#cmbyear").val(  year );
	   $("#cmbmonth").val(  month ); 
	   changeDate();  // 1~ 마지막날짜.
	   
	   // console.log(   month + " /  "  + ( typeof month)   ) ;
	   printCalendar(year, month);
   }

슬라이딩쇼

<style>
    *{ box-sizing: border-box;}
    body{
		    margin: 0;
		    font-family: Verdana, sans-serif;
	}
	
	 .slideshow-container{
	     max-width: 1000px;
	     position: relative;
	     margin: auto;
   }
   
   .text{
    color:#2f2f2f;
    font-size: 15px;
    text-align: center;
    padding: 8px 12px;
    position: absolute;
    bottom: 8px;
    width:100%;    
  }
  
   .numbertext{
    color:#2f2f2f;
    font-size: 12px;
    padding: 8px 12px;
    position: absolute;
    top:0;
  }
  
   img{
     vertical-align: middle;
  }
  
  .mySlides{
     display: none;
  }
</style>
<style>
    .prev, .next{
      position: absolute;
      cursor: pointer;
      top:50%;
      color:white;
      width:auto;
      padding: 16px;
      margin-top: -22px;
      font-weight: bold;
      font-size:18px;
      border-radius: 0 3px 3px  0;
     /*  text-decoration: none; */
     
     transition:0.6s ease;
   }
   .next{
      right:0;
      border-radius: 3px 0 0 3px;
   }
   
   .prev:hover, .next:hover{
     background-color: rgba(0,0,0, 0.8);
   }
</style>

<style>
   .dots{
     position: absolute;
     top:10px;
     width:100%;
     text-align: center;
   }
   
   .dot{
     cursor: pointer;
     height: 15px;
     width: 15px;
     margin:0 2px;
     background-color: #bbb;
     border-radius: 50%;
     display: inline-block;
     transition:background-color 0.6s ease;
   }
   
   .active, .dot:hover{
     background-color: #717171;
   }
   
   .fade{
      animation-name:fade;
      animation-duration:1.5s;
      
      -webkit-animation-name:fade;
      -webkit-animation-duration:1.5s;      
   }
</style>
<style>
   /* 애니메이션 효과 */
   @keyframes fade{
     from{ opacity: 0.4 }
     to{ opacity:1}
   }
   @-webkit-keyframes fade{
     from{ opacity: 0.4 }
     to{ opacity:1}
   }
</style>

<div class="slideshow-container">
	<div class="mySlides fade">
		<div class="numbertext">1 / 3</div>
		<img src="../images/img_mountains_wide.jpg" style="width:100%" alt="" />
		<div class="text">Caption One</div>
	</div>
	<div class="mySlides fade">
		<div class="numbertext">2 / 3</div>
		<img src="../images/img_nature_wide.jpg" style="width:100%" alt="" />
		<div class="text">Caption Two</div>
	</div>
	<div class="mySlides fade">
		<div class="numbertext">3 / 3</div>
		<img src="../images/img_snow_wide.jpg" style="width:100%" alt="" />
		<div class="text">Caption Three</div>
	</div>
     
	<a class="prev"  onclick="changeSlide(-1)">&#10094;</a>
	<a class="next"  onclick="changeSlide(1)">&#10095;</a>
	 
	<div class="dots" style="text-align:center">
		<span class="dot" onclick="dotSlide(0)"></span>
		<span class="dot"  onclick="dotSlide(1)"></span>
		<span class="dot" onclick="dotSlide(2)"></span>
	</div>
</div>

    var slideIndex = 0;
    
    function showSlides(  sIndex ){
    	// js , [jQuery]
    	// 초기화 작업
    	$(".slideshow-container .mySlides").css("display", "none");
    	$(".dots span.dot").removeClass("active");    	
    	// sIndex 
    	$(".slideshow-container .mySlides").eq(sIndex).css("display", "block");
    	$(".dots span.dot").eq(sIndex).addClass("active");    
    }
    
    showSlides( slideIndex  );
////////////////////////////////////////////////////////////////// 
   function changeSlide(value){  // -1,  1
	   slideIndex += value;
       // 0, 1, 2
       if( slideIndex == 3 )  slideIndex = 0;
       else if( slideIndex == -1 )  slideIndex = 2;
       
	   showSlides( slideIndex  );
   }
////////////////////////////////////////////////////////////////// 
   function dotSlide(sIndex){
	   slideIndex = sIndex;
	   showSlides( slideIndex  );
   }
   
   // 자동 슬라이딩 기능 추가

js 수학객체( Math )

Math 객체는 생성자가 없습니다.

Math.속성.

// new String() + 생성자

// new Number()

// new Array()

    console.log( Math.PI );
    console.log( Math.abs(-100) );
    console.log( Math.pow(2,3) );
    
    // ***
    console.log( Math.round( 3.1415 ) ); // 3 반올림 소수점 1 자리
    console.log( Math.ceil( 3.1415 ) ); // 3     올림 소수점 1 자리
    console.log( Math.floor( 3.1415 ) ); // 3  내림 소수점 1 자리
    
    // ES6 추가 : 정수 부분을 반환.
    // Math.trunc()    
    console.log( Math.trunc(-4.2)  +" / "  + Math.floor(-4.2) );  // -4 / -5
    
    console.log(  Math.sign( -3.14) );  // 1    -1    0
    
    // Math.max(), Math.min()

js 부울(boolean)

- true / false

- js Boolean 자료형

      //console.log(   10 > 9 );
      //console.log(   Boolean(  10 > 9  ) );  // true            Boolean() 함수 - 수식 참/거짓

      // [ js boolean 주의. ]  ***
      console.log(  Boolean(  100  )  );  // 상수 true
      console.log(  Boolean(  3.14  )  );  // 상수 true
      console.log(  Boolean(  "hello"  )  );  // 문자열 상수 true
      console.log(  Boolean(  "null"  )  );  // 문자열 상수 true

      // [ value 이 없는 모든 것들은 false 이다. ]
      console.log(   Boolean( 0 ) );  // false
      console.log(   Boolean( "" ) );  // false
      console.log(   Boolean( null ) );  // false
      var name;         // undefined
      console.log(   Boolean( name ) );  // false
      console.log(   Boolean( NaN ) );  // false
      
      // var age = 0;
      // var age = null;
      //var age = "";
      //if( age ){    	  
      //}

      if(  10/"hello" ){   NaN  false
    	  
      }else{
    	  
      }
      
      // var x = false;  // boolean
      // var x = new Boolean( false );  가능하지만 사용 X,  object

js 제어문

1. if, if~else, if ~else if~ else

2. switch ~case + break

3. for / foreach

4. while(){}

do{

}while();

정수 : <input type="text"  id="txtnum">
<br>
<p id="demo"></p>

   $("#txtnum").keydown(function() {
   	    if( event.keyCode == 13 ){
   	    	// 필수 입력 사항 + 정수 입력.  isNaN() , 정규표현식   /^\d+$/
   	    	 
   	    	if( !$("#txtnum").val().trim()){         
   	    		alert("필수 입력!!!");
   	    		return ;
   	    	}
   	    	 
   	    	var n = Number(  $("#txtnum").val() );
   	    	if ( n % 2 == 0) {
				// 짝수
			} else {
                 // 홀수
			}
   	    }
   });

switch

  $("#txtnum").keydown(function() {
	  var n = Number(  $("#txtnum").val() );
	  switch (   n % 2  ) {
		case 0:
			break;
		default:
			break;
		}

while

  $("#txtnum").keydown(function() {
	  if( event.keyCode == 13 ){
				  var n = Number(  $("#txtnum").val() );
				  var content = "";
				  
				  var sum = 0;
				  /*
				  for (var i = 1; i <= n; i++) {
					  content += i+"+";
					  sum += i;
				 } // for
				 */
				 var i = 1;
				 while( i <= n ){
					 content += i+"+";
					  sum += i;
					  i++;
				 } // while			 
				 
				  content += "=" + sum;
				  
				  $("#demo").html( content );
				  
				  //for ( var x in iterable) { }
				  //for ( var x of iterable) { }
	  } // if
	   
   });

for in

    // 1. for in 문은 객체(개체)의 속성을 반복하는 반복문
    // 2. 형식
    //           for( let  prop   in object){
    //}
    
    var m = [ 3,5,2,4,1];
    // console.log(  typeof m );  // 배열도 타입은 object 이다. 
    
    // x = 0,1,2,3,4           index
    for ( var idx in m) {
		// console.log( idx ) ;
		console.log(   m[idx] );
	}
    
    // 
    Array.forEach( function (elt, index, array){
    	
    } )

    // js object
     var person = {
    		// 속성명:속성값
    		name:"admin", 
    		age:20
    };
    
    // person.name
    // person["name"]
    
    for ( var p in person) {  // object
		console.log(  person[p]  );
    	
        // for in문안에서 person.idx는 왜 안되나요??
        // 		console.log( person.p);
        // console.log(  typeof p );  // string
	}

for of

[js 제어문( for of)]

- ES6(2015) 새로 추가된 문

- IE 지원되지 않아요.

- 반복 가능한 객체의 값을 반복하는 문

(Arrays, Strings, [ Maps, NodeLists ]X 반복가능한 데이터 구조. )

    var m = [3,5,2,4,1];
    for ( var n of m) {
		console.log( n );
	}
    
    var msg = "hello world!";

    for (var i = 0; i < msg.length; i++) {
		console.log(  msg.charAt(i) );
	} // for

    for (let ch of msg) {
		console.log("["+ch + "]")
	}

<style>
 .container{
    width: 500px;
  }
  
  .collapsible{
    background-color: #777;
    color:white;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline:none;
    font-size: 15px;
  }
  
   /* ::가상 요소 선택자*/
  .collapsible::after{
    content:'\002B';  /*   +  */
    color:white;
    float: right;
    font-weight: bold;
    margin-left: 5px;
  }
  
  .collapsible:hover ,  .active{
    background-color: #555;
  }
  
  .content{
    padding: 0 18px;
    background-color: #f1f1f1;
    max-height: 0;  /* 오버플로우가 발생.. */
    overflow: hidden;   /* 숨기기 */
    
    transition:max-height  0.2s ease-out;
  }
  
  .active::after{
      content:'\2212';   /*  -  */
   }
</style>

<div class="container">

<button class="collapsible">Section 1</button>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.</div>

<button class="collapsible">Section 2</button>
<div class="content">
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.
 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.
 </div>

<button class="collapsible">Section 3</button> 
<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla iure aliquam soluta minima impedit ratione laboriosam autem omnis. Doloribus eius incidunt totam iure deleniti a officia blanditiis rem recusandae officiis.</div>

</div>

    // js , [jquery]
    $(".collapsible").click(function() {
    	$(this).toggleClass("active");
    	// 클릭된 버튼 뒤의  <div class="content">
    	if(  $(this).next().css("max-height")  != "0px" ){
    		$(this).next().css("max-height",  "0px"  );
    	}else{
    		$(this).next().css("max-height",  $(this).next().prop("scrollHeight")+"px"  );	
    	} 
    	
    });

* toggleclass : 클래스속성 있으면 제거하고 없으면 준다는 뜻

* 클릭된 버튼 뒤 글 찾아와서 (next()) max-height속성을 줌

0px아니면 -> 0px

0px이면 -> max height 속성 주는데, 그 뒤 속성값(scrollheight) 읽어와서 px단위 붙여줌

(scrollheight 아마 길게 내리는 속성)

저작자표시

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

[Day7] JS 7 - 클로저, dragdrop, 컬렉션, BOM, 팝업창, 모달창 (0)	2022.11.29
[Day6] JS 6 - set, map, 자료형, 예외처리, this, 클래스, 모듈, 객체, 함수, 스크롤, 이벤트버블링 (0)	2022.11.25
[Day4] JS 4 - 문자열 검색, 숫자, 배열, 날짜 (0)	2022.11.24
[Day3] JS 3 - 테이블체크, 함수, undefined, null, 객체, 엄격모드, this, 이벤트 처리, 문자열 (0)	2022.11.22
[Day2] JS 2 - 변수, 연산자, 자료형, 키보드 (0)	2022.11.22

[Day5] JS 5 - 주민번호, 달력, 슬라이드쇼, 수학객체, 부울, 제어문, scrollheight

[Day5] JS 5 [11/24]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

블로그 인기글

티스토리툴바

[Day5] JS 5 [11/24]

'👨‍💻 Web Development > HTML | CSS | JS | jQuery' 카테고리의 다른 글

전체 카테고리

최근 글

최근댓글

블로그 인기글

티스토리툴바