[JS] JS변수, jQuery, 조건문 if

happyyeom·2024년 10월 16일

변수

java script에서 변수를 선언하는 코드는 let이다. 만약 x라는 변수를 만들고 싶다면 let x;라고 선언하면 된다.
하나의 변수에는 하나의 값만이 들어갈 수 있다.
본래에는 let x = undefined;의 의미를 가지고 있는데 아직 데이터가 정의되지 않았다는 뜻이다. 변수는 등호 기호(=)의 좌측에서만 변수로 취급되며 선언과 동시에 데이터를 넣을 수 있다.( ex. let x = 10; )

변수 명명 규칙

변수의 이름을 정하는데에는 규칙이 있다.

  • 변수명의 첫 글자는 영문자, 달러스코어$, 언더바_만 올 수 있다.
  • 두 번째 이후 글자에는 영문자, 달러스코어, 언더바, 숫자만 올 수 있다.
  • 변수명의 영문자는 대.소문자를 엄격하게 구분한다.
  • java script의 예약어가 아니어야 한다.
    예약어는 java script에서 사용하는 문법 단어(키워드)이다.( ex. if, continue, ... )

변수 출력

변수 x를 만들어 값으로 10을 집어넣은 뒤, "x는 (변수x의 값)이다."라는 문장을 출력해보자. 이번에는 값이 각각 10, 5인 변수 a, b를 선언하고 a가 5, b가 10을 가지도록 바꾸어보자.
이번에는 위 문제를 값을 사용하지 않고 변수를 이용해서 해결해보자.
만약 오렌지 주스를 가진 비커 a와 물이 담긴 비커 b가 있고 그 두 비커의 액체를 서로 바꾼다고 했을 때, 우리는 별도의 비커가 필요할 것이다. 위에서도 a, b의 값을 교체해주기 위해 또 다른 변수 c를 이용하였다.


jQuery

jQuery란 HTML의 요소들을 쉽게 조작하고 편리하게 사용할 수 있게 만든 라이브러리로 쉽게 말해 미리 작성된 java script코드를 간소화된 코드로 사용한다고 생각하면 쉽다.

codepen에서 jQuery를 사용하기 위해서 우리가 css에서 라이브러리를 불러왔던 것처럼 settings버튼을 누른 후, jQuery를 검색, 링크를 복사해 HTML코드에 <script>태그를 만들어 붙여넣으면
jQuery를 사용할 수 있게된다.

<script src=""></script>

jQuery를 이용해서 우리는 이러한 css속성을 css를 사용하지 않고 JS코드만을 사용해서 만들어낼 수 있다.

위에서 배웠던 변수를 사용해보자.


조건문 if

조건문은 조건문의 참, 거짓 유무에 따라 작업을 시행하는 구문인데 기본 형식은 이렇다.

if(조건식){
 ...;
 }

위 형식에서 만약 조건문이 참(true)이면 수행할 문장을 수행하고 거짓(false)이면 조건문을 벗어난다. 예를들어보자.
나이에 따라서 20살 미만이면 미성년, 20살 이상이면 성년이라는 메세지를 console창에 출력하려고 한다. age라는 변수를 만들어준 후 15라는 값을 넣고 if문을 만들었다.
첫 번째 if문에서 age >= 20 변수 age는 등호(=) 좌측에 있지 않기 때문에 값, 15로 취급하고 15는 20보다 작기에 age >= 20 조건식은 거짓(false)이다. 고로 조건문을 빠져나온다.
두 번째 조건문은 age가 20보다 작기에 참(true)이다. 때문에 중괄호({ })안의 console.log("미성년")이라는 코드를 실행한다.

profile
🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳🌳

0개의 댓글