JavaScript 입문과 웹 UI개발(11)-변수문법과 Dark mode 버튼만들기
2022. 10. 2. 22:02ㆍ애플코딩 javascript 강의
반응형
index.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>문제풀이</title>
<!--제이쿼리-->
<script
src="https://code.jquery.com/jquery-3.6.1.min.js"
integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
crossorigin="anonymous"></script>
<!--내가 만든 css 파일-->
<link href="main.css" rel="stylesheet">
</head>
<body class="dark">
<span class="badge bg-dark">Dark 🔄</span>
<script>
$('.badge').css("color", "red");
// 클릭 횟쉬가 홀수면 내부 글자를 Light로 변경
// 클릭 횟수가 짝수면 내부 글자를 Dark로 변경
// 변수
// var 변수명= 넣을자료;
// 잠깐 자료를 저장하는 통
// 오른쪽을 왼쪽에 넣어줌
// 변수의 선언, 할당, 범위
// 선언(변수를 만듬) => var 이름
// 할당(변수에 값 넣음) => 이름='kim';
// 선언과 할당 동시에 =>var 이름='kim';
// 할당된 변수 재할당 이름='jo';
// function 함수(){ var 변수=123; }
// console.log(변수); => 함수 밖에서 undefined 로 나온다.
// 왜냐하면 함수 안에서 선언한 변수는 함수 안에서만 사용 가능하다.
//함수밖에서 선언한 변수는 함수 안에서 사용가능
//var let const 차이
//let은 재할당은 되지만 재선언이 불가능하다.
//let 이름='kim1';
//let 이름='kim2'; => 재선언이 안되므로 에러
// 이름='kim3' => 재할당 가능
//const는재선언과 재할당 둘다 안된다.
//const 이름='kim1';
//const 이름='kim2'; => 재선언이 안되므로 에러
// 이름='kim3' => 재할당 불가능
var cnt=0;
$('.badge').on('click', function(){
// 변수에 1 더하는법
// 1) 변수++
// 2) 변수+=1
// 3) 변수=변수+1
$('.dark').toggleClass('white');
cnt+=1;
// %는 나눈후 나머주 구해주는 연산자
if(cnt%2==0){
$('.badge').html('Dark 🔄');
}else{
$('.badge').html('Light 🔄');
}
})
</script>
</body>
</html>main.css
.dark{
background: black;
}
.white{
background: white;
}강의 출처: JavaScript 입문과 웹 UI개발
코딩애플 온라인 강좌 - 개발자도 단기완성!
단연 NO1 강사님의 NO.1 강의 역시나 명강입니다. IT 업계의 대치동 NO1. 강사같은 엄청난 강의력. 코딩애플님의 강의는, 엄청나게 기초적인 것부터 가르치는 듯 보이지만, 실제로 다루는 깊이는 절
codingapple.com
반응형
'애플코딩 javascript 강의' 카테고리의 다른 글
| JavaScript 입문과 웹 UI개발(13)-setTimeout 타이머주는 법 (0) | 2022.10.03 |
|---|---|
| JavaScript 입문과 웹 UI개발(12)-변수, 사칙연산 실력향상 과제 (0) | 2022.10.03 |
| JavaScript 입문과 웹 UI개발(10)-if/else,function 관련 문제 (0) | 2022.10.02 |
| JavaScript 입문과 웹 UI개발(9)-폼만들며 배워보는 if else 그리고 input, change 이벤트와 and, or 연산자 (0) | 2022.10.02 |
| JavaScript 입문과 웹 UI개발(8)-모달창 만들기와 간단한 애니메이션 (0) | 2022.09.30 |