인프런 강의 중 주요한 부분들만 코드 복붙
<출처: 자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1>
나이 계산 프로그램
html내용
<body>
<button class="btn" onclick="calc()">나이 계산</button>
<div id="result" class="show">(결과값 표시)</div>
js 내용
function calc() {
var currentYear = 2020; //올해 년도를 저장을 변수 currentYear에 저장함.
//사용자로부터 입력을 받은 값으로 변수 birthYear에 저장함.
var birthYear = prompt("태어난 년도를 입력하세요.","YYYY");
//변수 age를 0으로 초기화
var age = 0;
//실제 나이를 구하기 위한 코드
age = currentYear - birthYear + 1;
document.querySelector("#result").innerHTML = "당신의 나이는" + age + "세입니다.";
}- document.querySelector("#result").innerHTML의 해석
-> document는 현재 웹브라우저의 페이지를 의미하고, querySelector()는 id가 result인
웹 요소(div)를 의미한다.innerHTML은 대입한 값으로 html문서에 대체하시오.
글자색 바꾸기
html
<h1 id="heading">안녕 자바스크립트야!</h1>
<p id="text">위의 텍스트를 클릭해보세요.</p>js
var heading = document.querySelector("#heading");
heading.onclick = function(){
heading.style.color = "red";
} headig 변수선언, h1태그를 추출해서 담아준다.
headign.onclick해서 함수로 색깔을 바꿔준다.
현재 시간 불러오기
js
var now = new Date();
var disp = now.toLocaleTimeString();
document.write("현재 시각 : " + disp); Date라는 시간을 불러오는 함수,object
now 또한 object, + "." 을 찍으면 함수가 뜸
toLocaleTimeString() 현재 있는 곳의 시각
JS설명
- 자료형 특징 :
- 미리 변수의 자료형을 지정하지 않음(JAVA의 경우 int a = 10; 이렇게 int 지정)
- 변수를 지정하고 원하는 값을 할당하면 됨
- 연산자 : +, -, %, -- 등 <->
피연산자: 연산의 대상이 되는 것 (ex: currentTear,1 등)
- 형변환: 숫자형 + 문자형 => 숫자를 문자열로 인식
winwin