Html, Css, JavaScript 기초공부

자바스크립트 기초편 변수, 자료형, 연산자

hongga 2022. 11. 10. 10:00

안녕하세요 홍가 입니다. 

오늘은 자바스크립트 기초편을 진행을 해보려고 합니다.

예전에 인프런 이벤트를 했을때 강의를 받아놓은 것이 있는데 기한이 얼마 남지 않아

빠르게 강의를 시청 해보려고 합니다.

 

자바스크립트랑 jQuery를 같이 배우더라고요

기초 1,2 중급 1,2 고급 1,2 이렇게 나뉘어져 있어요. 

 

이론은 노션으로 정리를 하고 있습니다.

블로그에서는 이론보다 실습을 위주로 올리려고 합니다.

기초 1은 강의 시간이 9시간 40분인데

이 중에 이론 시간이 거의 4시간 정도 더라고요

다른 강의들은 긴건 16시간? 짧은건 12시간? 이렇더라고요

 

강의가 단원식으로 나뉘는데 단원이 끝나면 한 개 씩 올리려고 합니다.

회사를 다니면서 공부를 하려고 하니 생각보다 힘들더라고요

오늘은 변수와 자료형 그리고 연산자에 대한 단원을 올려보려고 합니다.

 

나이 계산 프로그램 

onclick=calc() 을 사용하여 버튼을 누르면 function calc() {} 를 호출하게 만듭니다.

 

년도로 나이 계산을 하려고 변수를 하나 선언해 주고요

 

prompt를 사용하여 입력받은 값을 birthYear부분에 저장을 해줍니다.

 

그 다음 결과값을 받기위해 id부분을 Selector로 불러오고 innerHTML를 사용하여 대체를 시켰습니다.

 

글자색 바꾸기

자바스크립트서 css를 사용해봤습니다.

 

먼저 heading부분을 Selector로 불러오고 onclick을 사용하여 누르면 function부분이 호출되게 만들었습니다.

 

시간표시

날짜와 시간을 얻기 위해 Date 객체를 생성해주고

 

toLocaleTimeString은 시간 부분을 현재 지역 표기법으로 변환하는 것 입니다.

 

할인 가격 계산 프로그램

저는 Selector로 불러오고 value로 입력 값을 받아오도록 했습니다.

if 문을 선언하여 할인율을 알려 주었습니다.