22.02.09 변수와 기본 자료형 / 나이계산 프로그램, 글자색 바꾸기, 시간표시 예제

인프런/Java Script

22.02.09 변수와 기본 자료형 / 나이계산 프로그램, 글자색 바꾸기, 시간표시 예제

h.단디 2022. 2. 10. 03:25

[자바스크립트+jQuery 기초부터 실무까지 : 기초 Part.1]

변수

변수의 이름은 의미있게, 누가봐도 이게 뭘 지칭하는 건지 알 수 있게 지을 것.

여러 단어를 연결할 경우에는 낙타모양으로! ex)lastName

형식 : var 변수 = 저장할값or식

매개변수=parameter=인자값=arguments 전부 같은 말!

; 명령 실행의 구분선

() 선언부

{} 정의부, 구현부

자료형 - 컴퓨터가 처리하는 자료의 형태

웹브라우저 개발자 도구(콘솔창)에서 typeof 로 확인해볼 수 있음!

기본형	number(숫자)	따옴표 없이 표기한 숫자	정수 : 소수점x, 표현 방법에 따라 10진수, 8진수, 16진수
	number(숫자)	따옴표 없이 표기한 숫자	실수 : 소수점o, 컴퓨터 언어로 정밀한 실수 계산은 힘듬
	string(문자열)	'나 "로 묶어서 나타냄	숫자도 따옴표로 묶으면 문자형이 됨 따옴표 안에 따옴표 넣어야 할 때는 ' " " ' or " ' ' " 처럼 사용
	boolean(논리형)	True와 False 두 가지 값만 가지고 있는 유형	조건을 확인할 때 많이 사용
	undefined	자료형을 지정하지 않을 때 나타나는 유형.	'처음부터 변수에 값이 할당되지 않았다'는 의미
	null	값이 유효하지 않을 때의 유형	'처음에 할당된 값이 더이상 유효하지 않다'는 의미
복합형	array(배열)	하나의 변수에 여러 값을 저장하는 유형	배열의 index는 0부터 시작 값을 가져오려면 '배열이름[index]'
복합형	object(객체)	함수와 속성이 함께 포함된 유형	여러 자료를 {}로 묶은 것 key 와 value를 한 쌍으로 여러 자료 저장

자바스크립트는 미리 변수의 자료형을 지정하지 않음.

변수를 지정하고 원하는 값을 할당만 하면 됨!

나이계산 프로그램

코드가 너무 길면 보기 좋지 않음.

처음부터 js를 분리해서 코딩하는 건 힘듬. (참조할 부분 많으니까) 우선 html에서 코딩한 후에 정상 작동하는 거 확인하고 script 부분 잘라내기 해서 js 파일로 저장해주고 head에서 src로 불러서 쓰기!

HTML

<!DOCTYPE html>
<html lang="ko">
<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>age</title>
    <link rel="stylesheet" href="css/age.css">
    <script src="js/age.js"></script>
</head>
<body>
    <button class="btn" onclick="calc()">나이 계산</button>
    <div id="result" class="show">(결과값 표시)</div>
</body>
</html>

JAVAScript

function calc() {
    var currentYear = 2022;    //올해 년도를 변수 currentYear에 저장함
    var birthYear = prompt("태어난 년도를 입력하세요.", "YYYY"); 
    //사용자로부터 입력 받은 값으로 변수 birthYear에 저장함.
    var age = 0;
    //변수 age를 0으로 초기화
    age = currentYear - birthYear + 1
    //실제 나이를 구하기 위한 코드
    document.querySelector("#result").innerHTML = "당신의 나이는" + age + "세 입니다."
    //document : 현재 웹브라우저의 페이지를 의미하고,
    //querySelector()는 'id가 result인 웹 요소(div)를 의미함.
    //innerHTML은 대입한 값으로 html문서에 대체하라는 뜻.
}

CSS

body{
    text-align: center;
}
.btn {
    margin-top: 50px;
    font-weight: 400;
    color: #fff;
    background-color: #007bff;
    text-align: center;
    vertical-align: center;
    border: 1px solid blue;
    padding: 5px;
}
.btn:hover {                              /*마우스 갖다대면 바뀜!*/
    color : #fff;
    background-color : aquamarine;
    border-color: aquamarine;
}

.show{
    margin-top: 50px;
    padding: 20px 30px;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
}

클릭하면 글자색 바꾸기

HTML

<!DOCTYPE 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>
    <link rel="stylesheet" href="css/text-color.css">
</head>
<body>
    <h1 id="heading">안녕 자바스크립트</h1>
    <p id="text">위의 텍스트를 클릭해 보세요.</p>
    <script src="js/text-color.js"></script>           <!-- 위의 요소(h1,p)들이 불려진 후 위치해야함!! 그래서 여기 갖다 붙인거-->!
</body>
</html>

JAVA Script

//heading이라는 변수를 선언하고 h1태그(제목태그)를 저장한 꼴이 됨
var heading = document.querySelector("#heading");
//만약 h1태그를 클릭하면 글자 색깔을 빨간색으로 바꾸라는 함수
heading.onclick = function() {
    heading.style.color = "red";
}

CSS

body{
    text-align: center;
}
#heading {
    color: blue;
}
#text {
    color: gray;
    font-size: 15px;
}

시간 표시

HTML

<!DOCTYPE html>
<html lang="ko">
<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>
    <style>
        body {
            font-size: 2em;           <!--M기준으로 2배-->  
            text-align: center;
        }
    </style>
</head>
<body>
    <script>
        var now = new Date();  
        var disp = now.toLocaleTimeString();
        document.write("현재 시각 : " + disp);
    </script>
    
</body>
</html>