[개발일지] JavaScript & JQuery 기초 수업 Level 1-2

<코딩애플 온라인강의 수강일지>

Level 1-2 Jquery & JavaScript: If/else, 변수

 

1. Jquery 기본 함수들

$('.hello').html('idiot')
$('.hello').css('color', 'red')


$('.hello').addClass('show')
$('.hello').removeClass('show')
$('.hello').toggleClass('show')

$('.hello').show()
$('.hello').hide()
$('.hello').fadeIn()
$('.hello').slideUp()

 

2. 모달창 만들기

-모달창은 HTML 가장 위에 붙인다.

-show&hide CSS class는 가장 아래에 둔다.

 

 

3. CSS 애니메이션 (one-way UI)

 1) 시작스타일, 최종스타일 지정

 2) JS 코드 삽잊

 3) transition 추가

.start {
    visibility: hidden;
    opacity: 0;

    transition: all 1s;
  }
  
  .end{
    visibility: visible;
    opacity: 1;
}

        $('#login').on('click', function () {
            $('.black-bg').addClass('show-modal')
        })

 

4. 연산자

// and
if (1 == 1 && 2 == 3){
  console.log('안녕')
}

// or
if (1 == 1 || 2 == 3){
  console.log('안녕')
}

 

5. 변수

 

 1)let: 재선언 X, 재할당 O, 범위 {}

let name = 'kim'
let name = 'park'

//error --> 변수를 또 까먹고 만드는 경우를 방지

 2)const: 재선언 X, 재할당 X, 범위{}

const name = 'kim'
const name = 'park'

//error

const name = 'kim'
name = 'park'

//error --> 변하면 안되는 값

3)var: 재선언 O, 재할당 O, 범위 function: 유연해서 재선언 재할당이 자유롭다.

function 함수(){
  var 나이 = 20;
  console.log(나이); //가능
}

console.log(나이); //불가능

if (true) {
  let 이름 = 'kim';
}

console.log(이름); //없다고 나옴