코딩애플 JavaScript 입문과 웹 UI개발 Lv2(b)

 

 function  
- 긴 코드 짧게 축약해서 쓸 수 있다
- 파라미터로 기능업그레이드 가능하다
- return 을 서서 함수쓰고나서 그 값 자리에 둘 수 있다

return 만나면 함수는 그 자리에서 종료 , 뒷 코드는 실행되지 않는다.

* JS에서 소수점 연산시 주의점 
컴퓨터는 2진법 설계로 아주 작은 오차가 발생한다. .

해결 위해서는
1. 덧셈하기 전에 10곱해서 덧셈하고 10으로 나누기
2. 외부라이브러리
3. 반올림 ( 대부분 ) 숫자 . toFixed(몇자리)

toFixed 반올림 문제점 
: 문자로 변환된다.

후에 숫자로 변환 필요하다.
parseFloat(' ')
parseInt(' ')

function toSec(h,m){
  var sec=h*60*1000+1000*m;
  return sec;
}

function dc10(price,newbie){
var result=parseFloat((price*0.9).toFixed(2));
  if(newbie==true){
    result=result-1.5;
  } return result;
}

 

scroll event
문제1. 스크롤바 내리면 로고폰트 작게 만들기
문제2. 회원약관 끝까지 읽으면 alert 띄우기
스크롤바 다 내리면 상품 더 보여주는 기능도 이를 통해 구현 가능

.navbar { position:fixed; width:100%; z-index:5; }

밑에 아무데나 div style height: 1000px;

.navbar-brand{ font-size:30px; } 키워놓고 나중에 줄이는 것이 숙제 > 20px

<script>
  //scroll 이벤트 리스너 필요
window.addEventListener('scroll', function(){ //window가 스크롤 될 때마다 코드 실행해주는 함수
  //윈도우 html 페이지 의미, document 도 같음.  페이지 스크롤 감지는 window에다가 부착하면 된다. window안 document 안 div 
  window.scrollY 
  //window.scrollY : 유저가 얼마나 스크롤바 내렸는지 px단위로 알려준다. 맨 위: 0 , 가로 스크롤바는 scrollX , pageYOffset 과 같음
  //window.scrollTop(0,100); 강제 스크롤 해준다. 원래는 순간이동하는데, 부트스트랩라이브러리 영향으로 스무스하게 처리해준다.
  // 이게 맘에 안들면 css에서 :root { scroll-behavior : auto ; } 넣어주면 원상복구된다.
  //window.scrollBy(x,y) : 현재위치부터 강제로 스크롤하기. 기준이 현재라는 것에서 다르다.
  jquery :
    $(window).scrollTop() : 현재 스크롤바 위치 출력 = scrollY 
  but scrollTop(100)위에서부터 100으로 이동 가능!

숙제1 : 스크롤바 100px이상 내리면 로고 폰트사이즈 줄이기
숙제2 : 박스 스크롤바 끝까지 내리면 alert 띄우기

div style="width:200px; height:100px; overflow-y:scroll" class="lorem"
<script>
  //div 스크롤바 내린 양 == div 실제 높이 //scrollY는 window만 붙일 수 있다. 
  $('.lorem').on('scroll', function(){
 .scrollTop
 .scrollHeight 
 .clientHeight 화면에 보이는 높이 
  alert() 
</script>

  //div 스크롤바 내린 양 + 100 == div 실제 높이 일때 alert 띄우기
document.querySelector('.lorem').scrollTop+110 > $('.lorem').scrollHeight
100 = 지금 화면에 보이는 div 높이 clientHeight (js)
오차 고려해서 10픽셀정도 여유를 가지고!

var scrolled = $(window).scrollTop();

      if(scrolled>=100){
        $('.navbar-brand').css('font-size','20px');
      }

스크롤바 내린 높이 : window.scrollY or jquery scrollTop

>> 안됨 / 이유 : js 코드는 페이지 로드시 1회 실행됨 , 따라서 위의 if문을 스크롤바를 움직일 때마다 실행해야 한다. 
$(window).on('scroll', function(){ //스크롤 할 때마다 검사
 

 var scrolled = window.scrollY;
      $(window).on('scroll', function(){
      if(window.scrollY>100){
        $('.navbar-brand').css('font-size','20px');
      }else{$('.navbar-brand').css('font-size','30px');
}
    });

드디어 됐다 ㅠㅠ 아닐때는 else문을 넣어줘야함. 만약에 100이 넘으면 1번 실행해주는 게 원래 if문이니까. 코드의 의미를 제대로 파악할 것!

// 숙제 2 : 약관 스크롤 다 내리면, alert 창 뜨게
    var scrolled2 =document.querySelector('.lorem').scrollTop;
    var cliHeight =document.querySelector('.lorem').clientHeight;
    var divHeight =document.querySelector('.lorem').scrollHeight;
if(scrolled2+cliHeight > divHeight-10){
  alert('다읽음');
}

위는 내가 작성한 코드.. 왜 안될까 ?  머야 영상보니까 나 답 완전 perfect한데 뭘까?

// 숙제 2 : 약관 스크롤 다 내리면, alert 창 뜨게
$('.lorem').on('scroll', function(){
    var scrolled2 =document.querySelector('.lorem').scrollTop;
    var cliHeight =document.querySelector('.lorem').clientHeight;
    var divHeight =document.querySelector('.lorem').scrollHeight;
    if( scrolled2+cliHeight > divHeight-100){
  alert('다읽음');
}
})

>> 해결 : 문제 1번과 똑같은 걸로 틀렸다. scroll하는 걸 계속 감시해줘야함. 아니면 로드할 때 1번만 확인하기 때문이다.

 scroll 주의점 
1. 스크롤 이벤트리스너 안의 코드는 1초에 60번 이상 실행 : 컴퓨터 부담될 수 있어 너무 많이 쓰면 안됨
2. 바닥체크도 여러번 중복으로 해줄 수 있음
>> 방지하려면 뭘 해야할 지 생각해보세요.

현재페이지 끝까지 스크롤체크는 ?  html 태그의 높이 등등 체크하면 된다. ('hml')

document.querySelector('html').scrollTop 
= window.scrollY 
querySelector('html') = documentElement
// body태그 끝나기 전에 쓰는 게 굿 , 페이지 로드 완료시 실행해야 정확할 것이기 때문에!

**이해하는 것 중요
1. 스크롤바 조작할 때마다 코드실행 가능하구나
2. 박스의 실제높이/ 보이는높이/ 스크롤양 구할 수 있구나

**심심숙제 : 스크롤 진척도 위에 바를 통해서 구현 !

탭기능 만들며 배우는 for문
detail.html 새로 만들어 시작 ! index그대로~

bootstrap, jquery 빼고 다 삭제
body 안에 탭 만들기! 거기 걸맞는 div박스 만들기

버튼, 박스 3개씩 만들어녾고 버튼 누르면 맞는 박스 보여주기 : 모달창이랑 똑같다.

한 번에 모든걸 구현할 생각 x
쉬운 거 하나부터 구현 생각하기

버튼 누르면,
  버튼에 기존 orange 버튼 제거(모든버튼에 orange제거)하고,
  new 오랜지 부착,
  모든 div에 붙은 show 제거
  div에 show 부착

$('.tab-button').eq(0).on('click',function(){
 // eq(0)은 querySelector()[0] 과 같다. jquery 는 eq(0) 으로!

오류 : 모든 버튼에 제거하는 걸 어떻게 짜야할 지 모르겠음
  노가다 : 하나하나 찾아서 제거
  $('.tab-button').removeClass('orange'); //orange없는 버튼에 넣어도 상관없다. 
  $('.tab-button').eq(0).addClass('orange');

좋은 관습 : 자주 쓰는 셀렉터 변수에 넣어쓰기 !

var btn =$('.tab-button'); //이게 성능이 훨씬 좋다!
for (let a=0; a<3;a++){
    btn.eq(a).on('click',function(){
        btn.removeClass('orange'); //orange없는 버튼에 넣어도 상관없다. 
        btn.eq(a).addClass('orange');
        $('.tab-content').removeClass('show'); //orange없는 버튼에 넣어도 상관없다. 
        $('.tab-content').eq(a).addClass('show');

})}

>> for문안에서 변수는 let으로 해주어야 오류가 안난다. var로 했더니 안됐다. 
var과 let의 변수의 범위 차이 때문이다!

코딩애플 설명 짱이다

코딩애플 설명 짱이다 !

? 내 코드가 좋은 코드인가 ?
1. 원하는 기능이 잘 구현되었는가
2. 확장성이 좋은가
3. 나중에 관리가 쉬운가
4. 성능문제 없는가 

( 응용문제 ) 탭이 4개 5개로 늘어나도 잘 작동하는 코드 : 현재는 3으로 하드코딩 되어 있다.
3>> button의 갯수 . length 뭐 그런 걸로 두면 되지 않을까? 음 명확히.. 그냥 말그대로 jquery 가져와서 length붙이면 되는 거였당 거의 정답 생각굿 !

 

드뎌 50! 흑흑 ㅠ-ㅠ 감격적이다

 

이벤트 버블링과 이벤트 관련 함수들
이벤트 버블링 응용과 dataset
쓸만한 자바스크립트 라이브러리들

모달창이 뒤에 뜨면 css파일에서 z-index를 높이면 된다.

검은 배경누르면 모달창 닫는 기능 만들기
 black-bg 가 닫는 배경

querySelector('.black-bg').classList.remove('shsow-modal'); 
안닫히면 클래스명 탈부착했으면, 닫을 때도 탈부착해야한다 ~! display:none으로 했으면 지울때도 일관성있게 !
black-bg 안에 다른 거 눌러도 꺼진다. 왜? 

모든 브라우저는 이벤트 버블링이 일어난다.
버블링 : 이벤트가 상위 html로 퍼지는 현상
white-bg하면 위의 부모태그, 그 위에 부모태그까지 눌러지는 것

이벤트 객체 관련 함수들
- 콜백함수에 파라미터 e라고 작명하면 function(e) {
e. target; //유저가 실제로 누른거
e.currentTargete; // 이벤트 리스너 달린 곳 현재 black-bg ==
==this; //다른곳에선 다른 의미
e.preventdefault(); // 이벤트 기본동작막아준다. // 'click'이나 'submit'이면 안한 것처럼
e..stopPropagation(); //  상위요소로 이벤트 버블링 막아줌

 

if(e.target==document.querySelector('.black-bg'){close}

document.querySelector() 결과랑 $()결과는 다르게 생겼다
즉 자바스크립트 쿼리셀렉터 결과랑 제이쿼리 결과는 다르게 생겨서
e.target == 자바스크립트 ㅇ
e.target == 제이쿼리 x
$(e.target)==제이쿼리 o

배운 것
1. 이벤트 버블링은 항상 일어난다.
2. 이벤트 관련 기능들 사용 가능

축약할 코드에 변수가 있으면, 변수를 파라미터로 바꿔야 잘된다.

탭기능 다르게 만들기! -> 이벤트 리스터 1개만 쓰기 ( 전에는 for문으로 3번 붙인 거임 ) 
이벤트리스너 하나 쓸 때마다 램 용량 차지하기 때문에 이벤트 리스너 줄이면 줄일수록 성능이 좋아진다.

그래서

이벤트 버블링 때문에 아무나 눌러도 저거 되니까 그냥 저걸로 이벤트 리스너하면 된다.

jquery .on -('click) 말고 .click(function() 가능하다.
탭열기 0
탭열기 1 .. 함수 넣기

지금 누른게 e.target 인가
if (e.target == document.querySelectorAll('button.')[0)] {} // All이 더 정확

이벤트 버블링 알고 있으면, 이벤트 리스너 많이 필요없음 >> 줄이는 방식으로 가면 됨. 위에서 말한
이벤트 버블링 때문에 아무나 눌러도 저거 되니까 그냥 저걸로 이벤트 리스너하면 된다. 이 부분 말하는 거

html 태그에 몰래 정보숨기기 가능! 
유저는 볼 수 없다!
data - 자료이름 = '값'

숨겼던 자료 출력은 셀렉터.dataset.자료이름 하면 저 값이 출력된다!

>> 이것 이용해서 위의 것도 쉽게 개발할 수 있당
탭열기(지금누른버튼에 숨겨져있는 data id )
탭열기(0)
탭열기(1) ..

숫자로 변환하는 과정 거치면 더 정확 e.target.dataset.id !
하나의 테크닉일 뿐, 반복문으로 써도 된다.

오늘 배운 것 이벤트버블링응용과 dataset : !!복습필요하다!! 
1. 함수로 축약할 때 변수있으면 파라미터로 바꾸기
2. data-id 몰래 숨기기 가능하다. 
3. 이벤트리스너 1개만 써도 개발가능하다.

자바스크립트 라이브러리들
1. swiper 라이브러리 
2. chart.js 웹페이지 차트 만들고 싶을 때 ! 통계 보여줄 때!
3. Animate on Scroll : 스크롤 내리면 요소 서서히 등장하는 애니메이션 만들고 싶을 때!
4. EmailJS : 이메일 전송은 원래 서버가 해야하지만, gmail이런거 서버 잠깐 빌리면 자바스크립트만으로 이메일 전송 가능!
 유저가 내 이메일 계정으로 이메일 전송도 가능하고, 내 이메일 계정으로 남에게 이메일 전송도 가능하다. 
  https://www.emailjs.com/docs/introduction/how-does-emailjs-work/ 
이 사이트 가서 가입하고 계정만들고
튜토리얼 그대로 복붙하고 거기에 내가 방금 만든 EmailJS 계정아이디만 잘 채우면 됩니다. 

How does EmailJS work? | EmailJS

5. Lodash : array, object, 문자, 숫자 자료 다루기 편한 기본 함수 제공, 모던자바스크립트 유틸리티
 예를 들어 array 자료에 있는 마음에 안드는 'a'라는 문자 제거하고 싶으면, 직접 반복문 돌리거나 filter함수 쓰거나 그러는데,
lodash설치됐으면 그냥 _.pull(어레이자료,'a'); 쓰면 된다. 설치파일은 4kb밖에 안된다. 초보라면 의존하는 것보다 직접 어렵게 반복문 써서 알고리즘 짜는 것이 좋은 연습이 된다. 
6. 리액트, 뷰
 페이지 너무 많아서 ui 재활용 자주 필요한 사이트나 모바일앱처럼 페이지이동없이 single page application 만들때유용
요즘은 원래 용도와 상관없이 마구잡이로 쓴다.
7. Fullpage.js 
 웹페이지를 ppt처럼 만들어준다. 버튼 누르면 다음 슬라이드 보여주는데 이런 ui는 유행이 지났다. 상업적은 유료이다.