TIL_220117

win·2022년 1월 17일
0

TIL

목록 보기
13/26

인프런 강의 중 주요한 부분들만 코드 복붙
<출처: 자바스크립트+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설명

  1. 자료형 특징 :
    • 미리 변수의 자료형을 지정하지 않음(JAVA의 경우 int a = 10; 이렇게 int 지정)
    • 변수를 지정하고 원하는 값을 할당하면 됨
  2. 연산자 : +, -, %, -- 등 <->
    피연산자: 연산의 대상이 되는 것 (ex: currentTear,1 등)
    - 형변환: 숫자형 + 문자형 => 숫자를 문자열로 인식
profile
winwin

0개의 댓글