2023. 4. 17. 22:34ㆍ카테고리 없음
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>나이 계산하기</title>
<link rel="stylesheet" href="css/age.css">
</head>
<body>
<button class="btn" onclick="calc()">나이 계산하기</button>
<div id="result" calss="show">(결과 값 표시하기)</div>
<script>
function calc() {
var currentYear = 2023;
var birthdYear = prompt("태어난 연도를 입락하세요", "YYYY");
var age;
age = currentYear - birthdYear + 1;
document.querySelector("#reault").innerHTML = "당신의 나이는 " + age + "세입니다.";
}
</script>
</body>이 코드는 HTML과 JavaScript를 사용하여 사용자의 나이를 계산하고 출력하는 예제입니다.
HTML 파일은 button과 div 요소를 포함하고 있습니다. button 요소에는 calc() 함수가 실행되도록 onclick 이벤트 핸들러가 설정되어 있습니다. div 요소는 결과를 표시하는 역할을 합니다.
JavaScript 파일은 calc() 함수를 정의합니다. 이 함수는 현재 연도를 나타내는 currentYear 변수와, 사용자가 입력한 태어난 연도를 나타내는 birthYear 변수를 선언합니다. prompt() 함수를 사용하여 사용자로부터 태어난 연도를 입력받습니다.
이후, age 변수에 사용자의 나이를 계산하여 할당하고, 결과를 document.querySelector("#result")로 div 요소에 출력합니다.
따라서, 사용자가 "나이 계산하기" 버튼을 클릭하면, prompt() 함수를 사용하여 사용자로부터 태어난 연도를 입력받고, 이를 이용하여 사용자의 나이를 계산한 후, div 요소에 결과를 출력합니다.
이 코드가 갑작스러울 수 있는데 설명을 하자면,
위 코드는 JavaScript를 사용하여 HTML 문서의 id가 result인 요소를 찾아, 해당 요소의 내부 HTML 콘텐츠를 사용자의 나이 정보로 변경하는 코드입니다.
document.querySelector() 함수는 문서 내에서 첫 번째로 일치하는 요소를 선택하며, 이 경우 #result 선택자를 사용하여 id가 result인 요소를 선택합니다.
innerHTML 속성은 요소의 내부 HTML 콘텐츠를 나타내며, 이 값을 변경함으로써 해당 요소의 콘텐츠를 업데이트할 수 있습니다.
따라서, "당신의 나이는 " + age + "세입니다."는 사용자의 나이 정보를 나타내는 문자열로, 이 값을 innerHTML 속성에 할당함으로써, id가 result인 요소의 내부 HTML 콘텐츠가 사용자의 나이 정보로 변경됩니다.
Typeof
typeof는 JavaScript에서 데이터 타입을 식별하기 위해 사용되는 연산자입니다.
typeof 연산자는 피연산자의 데이터 타입에 따라 다른 결과를 반환합니다.
typeof 연산자는 다음과 같은 데이터 타입을 식별할 수 있습니다.
undefined: 정의되지 않은 변수 또는 값
boolean: 논리적인 참/거짓 값을 나타내는 불리언 타입
number: 숫자 값을 나타내는 숫자 타입
string: 문자열 값을 나타내는 문자열 타입
bigint: 큰 정수 값을 나타내는 BigInt 타입
symbol: 고유한 식별자 값을 나타내는 심볼 타입
object: 객체, 배열, 함수 등의 참조 타입
function: 함수 객체를 나타내는 타입
예를 들어, 다음은 typeof 연산자를 사용하여 데이터 타입을 식별하는 예제입니다.
템플릿 문자열
JavaScript의 템플릿 문자열(Template literals)은 문자열을 동적으로 생성하기 위한 문법입니다.
템플릿 문자열은 백틱(`)["~"에 있는기호]으로 감싸며, 문자열 내에 ${expression}` 형태로 변수나 표현식을 삽입할 수 있습니다.
document.querySelector("#reault").innerHTML = "당신의 나이는 " + age + "세입니다.";
템플릿 문자열을 이용하면 위의 코드를 아래의 코드로 변경ㅇ니 가능합니다.
JS 배열
<!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>Document</title>
</head>
<body>
<script>
var ary1 = ["test1", "test2", "test3"]
var ary2 = [10, 20, 30, 40];
var ary3 = ["name", 10];
console.log(ary1);
console.log(ary2);
console.log(ary3);
</script>
</body>
</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>Document</title>
</head>
<body>
<script>
var ary1 = ["test1", "test2", "test3"]
var ary2 = [10, 20, 30, 40];
var ary3 = ["name", 10];
var ary4 = new Array();
ary4[0] = "hello";
ary4[4] = "bye";
ary1[5] = "bye";
// console.log(ary1);
// console.log(ary2);
// console.log(ary3);
// console.log(ary4);
var kim = {
firstName: "john",
lastName: "kim",
age: 15,
address: "seoul"
}
kim.nickName = "freshman";
console.log(kim);
</script>
</body>
</html>연산자
JavaScript에서는 다양한 종류의 연산자가 제공됩니다. 여기에는 산술 연산자, 논리 연산자, 비교 연산자, 삼항 연산자 등이 있습니다.
1. 산술 연산자
+: 덧셈
-: 뺄셈
*: 곱셈
/: 나눗셈
%: 나머지 연산자
2. 논리 연산자
&&: 논리곱(AND)
||: 논리합(OR)
!: 논리 부정(NOT)
3. 비교 연산자
===: 값과 타입이 같은지 비교
!==: 값과 타입이 다른지 비교
==: 값이 같은지 비교(타입 변환 후)
!=: 값이 다른지 비교(타입 변환 후)
<: 작은지 비교
>: 큰지 비교
<=: 작거나 같은지 비교
>=: 크거나 같은지 비교
4. 삼항 연산자
condition ? expr1 : expr2: condition이 참인 경우 expr1을 반환하고, 거짓인 경우 expr2를 반환합니다.
5.할당 연산자
=: 변수에 값을 할당합니다.
+=: 더한 후, 변수에 값을 할당합니다.
-=: 뺀 후, 변수에 값을 할당합니다.
*=: 곱한 후, 변수에 값을 할당합니다.
/=: 나눈 후, 변수에 값을 할당합니다.
6. 기타 연산자
typeof: 변수나 값의 타입을 반환합니다.
instanceof: 객체가 특정 클래스의 인스턴스인지 여부를 반환합니다.
<script>
var n1 = "10";
var n2 = 10;
console.log(n1 == n2);
console.log(n1 + n2);
console.log(n1 - n2);
console.log(n1 === n2);
</script>
