[javascript] 강의정리

31473 단어 JavaScriptJavaScript

✍ 기본 속성

  • Selector : getElementById() 같은 HTML요소를 찾기 위해 사용.
  • Method : innerHTML.style.color 같은 HTML 요소의 어떤 속성을 변경할지 결정하기 위해 사용.

✍ onclick 속성으로 버튼 기능 개발

  • 기본적인 UI 만드는 법칙
    1. UI 디자인 먼저
    2. UI 평소에 안보이게 숨김
    display : block or visibility : hidden 등의 스타일로 숨기기
    3. 버튼을 누르거나, 이벤트가 일어날 때 UI 보여줌
  • onclick 속성
    모든 HTML 태그 내에 onclick 속성을 넣을 수 있음.
    해당 HTML을 눌렀을 때, onclick 내부의 자바스크립트 실행.

✍ javascript 이벤트 리스너 (addEventListener) 

document.getElementById('id이름').addEventListener('click',function(){
});
//id가 'id이름'인 요소를 클릭하면, 안의 코드를 실행해주세요!
  • 정확한 이벤트 리스너의 개념
    • 유저는 HTML 문서를 이리저리 탐색하면서 특정 요소에 클릭 같은 행위를 할 수 있다. 이걸 감지하고 싶을 때 쓰는 것이 이벤트 리스너.
    • 이벤트(Event) : 유저가 HTML 문서에서 클릭, 스크롤, 키보드입력, 드래그 등을 하는 일

✍ jQuery

JS 코드를 짧고 쉽게 쓸 수 있게 하는 '라이브러리'
  • jQuery 쓰는 이유?
    1. 코드가 매우 짧아진다.
document.getElmentById('title').innerHTML = 'title';
//다음을 jquery로 변경
$('#title').html = 'title';
  • jquery 셀렉터 : HTML찾는 셀렉터를 $() 를 이용해 사용
  • jquery 함수/메소드 : 자바스크립트와 메소드 이름이 다름. ex) text(),html(),css()...
  • 참고) 자바스크립트로 찾은 HTML요소는 자바스크립트 함수/메소드를 뒤에 붙여야하며, jQuery 셀렉터로 찾은 HTML요소는 jQuery 함수/메소드를 붙여야 한다.
2. 여러 개의 요소를 한번에 바꿀 수 있다.
참고) jQuery로 찾은 요소 중 맨 위의 것만 바꾸고 싶은 경우?
$('.class명').eq(0)
3. 애니메이션을 쉽게 부착 가능하다.
$('.class명').hide()
$('.class명').fadeOut()
$('.class명').slideUp()

✍ 모달창 개발

참고) 모달창처럼 모든 요소를 투과하여 맨 앞에 존재하는 요소는 HTML 작성 시, body 태그 바로 다음에 오는게 좋다.
  • 요소를 띄우기 위한 코드
.box{
	width:100%;
    height:100%;
    position:fixed;
    background : rgba(0,0,0,0.5);
    z-index : 5;
}
  • postion:fixed;
    브라우저 화면에 딱 달라붙는 요소.
  • z-index : 5;
    z-index 조정으로 맨 앞에 띄워지게 함. z-index는 position 속성이 들어간 요소들에 쓸 수 있는 속성이고, 값이 클 수록 요소를 맨 앞으로 가져옴.

✍ jQuery의 이벤트 리스너 

$('.class명').click(function(){
   //클래스 클릭시 실행할 함수
});
$('.class명').on('click',function(){
  //클래스 클릭시 실행할 함수
});

✍ form 개발

  • form 태그의 submit 이벤트
$('form태그').on('submit',function(e){
  //form태그 submit 시 실행할 코드
  e.preventDefault();
  //폼의 전송을 막는 코드
});

✍ input 태그와 함께 많이 사용되는 change,input 이벤트 

$('#id').on('input',function(e){
// #id 요소 내부에 입력된 값이 바뀔 때마다 내부 코드를 실행함.
});
$('#id').on('change',function(e){
  //요소 내부에 입력된 값이 바뀔 때마다 내부 코드를 실행한다.
  // change 이벤트는, 해당 요소에 포커스를 잃었을 때(커서가 다른 곳에 찍힐 때) 실행된다.

✍ var, let, const 변수

  • 변수의 범위


  • 참고) 신문법에서는 일반적으로 let 변수를 많이 만들게 되며, 변하지 않는 값을 저장하고 싶을 때는 const로 변수를 만든다.범위가 넓은 변수가 필요할 때는 var를 쓴다.
  • 변수의 hoisting
    js는 변수 선언부분을 항상 위로 강제로 끌어올려서 해석하는 습성이 있다.함수 선언도 마찬가지. 이것을 Hoisting 이라고 함.

✍ jQuery animate 함수

  • animate는 특성 CSS 속성을 서서히 변경하기 위해 사용하는 함수.
$('.class명').animate({ marginLeft : '100px' });
//클래스에 margin-left를 100px 만큼 주는 코드임
animate 함수 첫번째 파라미터 : {애니메이션을 줄 css속성1 : 값, 속성2 : 값, ...}
animate 함수 두번째 파라미터 : ms 단위의 시간. 애니메이션 동작 속도

✍ animation 만들기

  • 만드는 순서
    1. HTML/CSS로 시작화면, 최종화면 만들기
    2. 자바스크립트를 이용하여 최종화면으로 변하도록 트리거 구현
  • jquery 함수를 순서대로 동작시키고 싶다면?
    코드를 두줄 나란히 쓴다고 해서 상단의 코드부터 실행된다는 보장은 할 수 없음.
// 같은 클래스에 대해 두개의 함수 순서대로 실행시키기.
$('.class명').show().animate({marginTop:'0px'});
// 각각 다른 클래스에 대해 함수 실행시키기
$('.class1').animate({width:'250px'},1000,function(){
  $('.class2').animate({height:'500px'});
});

✍ 애니메이션 개발 시 주의점

중요1) 애니메이션을 개발 시, animate() 보다 CSS transition이 더 좋다.
  • transition?
.box{
	margin-top:100px;
    transition : all 1s;
}
이렇게 class 안에 transition 속성을 추가하면, 모든 CSS 속성이 변할 때 1s에 걸쳐 스무스하게 변경해준다.
  • transition 이 더 좋은 이유?
    1. transition은 자바스크립트와 독립적으로 동작한다.
    jquery로 애니메이션을 주게 되면 매우 느리고 천천히 동작한다.특히 js로 많은 일을 해야하는 SPA 같은 사이트를 만든다면 애니메이션을 자바스크립트로 넣으면 안된다.따라서 js 대신 css의 transition을 사용한다. 혹은 애니메이션 전용 라이브러리 velocity.js 등을 따로 설치해서 쓰면 실행 속도 걱정은 해결됨.
    2. transition 쓰는 게 훨씬 쉽다.
    코드 작성도 쉽고 커스터마이징도 쉽다.예를 들어, 애니메이션 동작 속도 같은 것을 선형이 아니라 커브를 주고 싶으면 관련된 CSS 속성만 추가하면 됨.

  • 중요2) 애니메이션 개발 시,margin 말고 transform 속성을 쓰자.

    • margin, width, height, top, left, bottom, right 등의 CSS 속성은 페이지 레이아웃을 변경하는 속성이다. 브라우저는 레이아웃을 변경하면 렌더링 시간이 매우 오래 걸린다.
    • transform, opacity 등의 CSS 속성은 페이지 레이아웃과 관련없는 속성임.
      이러한 속성을 변경하는 것이 훨씬 빠름.

  • 중요3) 최종화면으로 변하는 건 class를 붙이는 방식으로 개발하자 (addClass)

$('.class').css('margin-top','50px')
이렇게 쓸 수도 있지만, 여러개의 CSS 속성을 바꾸고 싶을 때는 코드가 길어진다.
따라서 css() 보다는, 미리 만들어 놓은 CSS 클래스명을 탈부착하는 addClass()와 removeClass() 를 활용하여 최종화면을 변하게 만드는 것이 좋다.

✍ Carousel(이미지 슬라이드) 개발

다음과 같은 슬라이더를 Caruosel 이라고 함
.slide-container{
	width:300vw;
}
.slide-box{
	width:100vw;
    float : left;
}
.slide-box img{
	width:100%;
}
/*
slide-container : div slide-box 세개를 담은 전체 container.
slide-box : img 를 담을 div 박스. 박스 세개를 float 속성을 사용하여 가로로 배치함. vw라는 단위는 현재 브라우저 화면폭의 몇%를 차지할것인지의 단위.
*/
<div style="overflow:hidden">
  <div class="slide-container">
    <div class="slide-box">
      <img src="이미지경로">
전체를 감싸는 div에 overflow : hidden 스타일을 추가하면 요소가 div를 넘어갈 때 보이지 않게 설정됨.
  • Carousel 위에 Next button 개발
어떤 요소를 붕 띄워서 다른 요소와 겹치게 만들고 싶다면, position:absolute 속성을 이용.
.next-button{
	position:absolute;
    top:45%;
    right:0;
}
참고) 요소에 position:absolute를 주고 싶다면, 부모 요소에 position:relative를 주어야 함.

✍ 참고 - 웹 UI 개발에 필요한 자바스크립트 라이브러리

✍ jQuery scroll 이벤트리스너

$(window).on('scroll',function(){
  $('.class명').addClass('nav-black');
});
  • $(window) : viewport. 지금 보이는 브라우저 화면
$(window).scrollTop();
//현재 요소가 위에서부터 몇 px 스크롤 되었는지 반환
  • 스크롤 이벤트 리스너 주의 사항
1초에 최대 60번 실행시키기 때문에, scroll 이벤트 리스너와 내부 코드는 최대한 줄여서 사용하는 것이 좋다.

✍ 이벤트 버블링과 이벤트 함수

  • 이벤트 버블링? 어떤 HTML 태그에 이벤트가 발생하면, 그의 모든 상위요소까지 이벤트가 실행되는 현상.
  • 이벤트 리스너 안에서 사용하는 이벤트 함수들
    • 이벤트리스너 콜백함수 안에 파라미터를 하나 추가하면 이벤트 관련 함수들을 쓸 수 있음.
$('.class명').click(function(e){
  e.target;	//지금 실제 클릭한 요소
  e.currentTarget;	//지금 이벤트 리스너가 달린 곳. $(this)와 같음.
  e.preventDefault(); //기본 동작을 막음.
  e.stopPropagation(); //상위요소로의 이벤트 버블링을 중단할 때 씀.
});
//이벤트 버블링이 일어나지 않도록 코드 짜기
$('.class명').click(function(){
  if(e.target==e.currentTarget){
    //현재 누른 요소가 eventListener가 달린 요소일때만 작동.
  }
  //또는
  if(e.target==this){
  }
});
주의) e.target은 javascript로 찾은 HTML 요소가 나오고, $('.class명') 은, jQuery object가 return 되므로 둘을 비교할 수는 없다.

✍ dataset 문법

HTML 요소에 몰래 정보를 숨겨두는 dataset 문법.
<ul class="list">
  <li class="tab-button" data-id="0">PP</li>
  ...
</ul>
  • 첫번째 li 태그에 id:0이라는 정보를 숨겨둔 것.일반 유저는 모르고 개발자만 알 수 있는 값.
  • data-작명 = "값" 으로 설정.
  • 다음의 숨겨둔 정보를 가져올 때는,js로 요소를 찾은 뒤 datset.id를 붙이면 됨.
$('.list').click(function(e){
  함수1(e.target.dataset.id)
});
참고) jQuery 스타일로 데이터 몰래 저장하기
// name이라는 이름으로 kim이라는 자료 저장
$(HTML요소).data('name','kim')
// 위 저장한 자료 꺼내 쓸 때 - .data('자료이름')
$(HTML요소).data('name')
반복 구문 문자열 길이
디자인 모델 학습 노트 2: 대상 지향 기초 1

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage