jQuery
[jQuery] 누른 횟수에 따라 표기 변화 / JS 변수 정리
helen2ye!
2022. 10. 3. 11:37
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Form if-else</title>
<script src="https://code.jquery.com/jquery-3.6.1.min.js"
integity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous">
</script>
</head>
<body>
<nav class="navbar navbar-light bg-light">
<div class="container-fluid">
<span class="badge bg-dark">Dark</span>
<button class="navbar-toggler" type="button">
<span class="navbar-toggler-icon"></span>
</button>
</div>
</nav>
<script>
var count = 0; // badge 클릭 횟수
$('.badge').on('click', function(){
count++;
console.log(count);
if(count % 2 == 1){ // 홀수
$('.badge').html('Light');
}else{
$('.badge').html('Dark');
}
});
</script>
</body>
</html>변수의 선언, 할당, 범위
- 변수: 잠시 자료를 저장해두는 문법
- 선언 및 할당
- 선언: var 이름;
- 할당(변수에 자료 넣기): 이름 = 'helen'; // 재할당 가능
- 선언과 할당을 동시에!: var 이름 = 'helen';
cf) 선언을 하고, 할당하지 않은 후 불러왔을때 : undefined - 범위
- 기본적으로 함수안에서 선언 > 함수 안에서만 사용(밖에서 호출시 에러: ( ) is not defined.)
- 함수 밖에서 선언 > 함수 밖~안 모두 사용 - 변수 문법(2016년 이후) 아래 표 확인
| 변수 문법 종류 | 범위 | 재선언 가능 여부 | 재할당 가능 여부 |
| var | Function-scoped | 재선언 가능 | 재할당 가능 |
| let | {Block-scoped} | 재선언 불가 | 재할당 가능 |
| const | {Block-scoped} | 재선언 불가 | 재할당 불가 |
- 변수만들기 예제
- 나이: 재할당 가능
- 출신지역: 재할당 불가
<body>
<script>
var age = 32;
const born = 'Korea';
</script>
</body>
- 범위 Study
<body>
<script>
function abc(){
var a = 'b';
if(2 == 1){
var aa = 'bb';
let aaa = 'bbb';
const aaaa = 'bbbb';
console.log(aa);
console.log(aaa);
console.log(aaaa);
}else{
console.log('확인'+aa);
console.log(aaa);
console.log(aaaa);
}
}
// console.log(a); // not defined
abc();
</script>
</body>
** 참고강의