Dev/HTML CSS JS
HTML CSS JavaScript (산술연산자, 복합대입연산자, 증감연산자, 비교, 논리, 삼항, html, 연습문제, 조건문, 반복문, 배열, for of, for과 배열)
Walker_
2024. 3. 27. 17:08
1. 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나이 계산하기</title>
<style>
body {
text-align: center;
}
.btn {
padding: 10px;
border: none;
border-radius: 4px;
margin-top: 50px;
background-color: #00bbdd;
color: #fff;
font-size: 18px;
cursor: pointer;
}
.btn:hover {
background-color: #008eff;
}
.show{
margin-top: 50px;
padding: 20px 30px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<button class="btn" onclick="clac()">나이 계산하기</button>
<div id="result" class="show">(결과 값 표시하기)</div>
</body>
</html>
- 변수 선언
- 이름은 의미가 있게 만든다
- 단어의 연결일 때는 뒤의 단어의 첫글자를 대문자로 한다.(카멜법)
- 선언을 할 수 없는 이름도 있다
- 문자, 밑줄, 달러기호, 숫자만 사용 할 수 있고, 숫자는 앞에 오지 못한다.
<button class="btn" onclick="calc()">나이 계산하기</button>
<div id="result" class="show">(결과 값 표시하기)</div>
<script>
function calc() {
const thisYear = 2024;// 올해 연도를 저장할 수 있는 변수
const birthYear = 1998;
let age;
age = thisYear - birthYear + 1;
document.querySelector('#result').innerHTML = "당신의 나이는 " + age + "세입니다.";
}
</script>
- thisYear을 프로그램이 실행되는 시점의 연도를 가지고 오도록
- birthYear을 사용자에게 입력을 받도록
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나이 계산하기</title>
<style>
body {
text-align: center;
}
.btn {
padding: 10px;
border: none;
border-radius: 4px;
margin-top: 50px;
background-color: #00bbdd;
color: #fff;
font-size: 18px;
cursor: pointer;
}
.btn:hover {
background-color: #008eff;
}
.show{
margin-top: 50px;
padding: 20px 30px;
border-top: 1px solid #ccc;
border-bottom: 1px solid #ccc;
}
</style>
</head>
<body>
<button class="btn" onclick="calc()">나이 계산하기</button>
<div id="result" class="show">(결과 값 표시하기)</div>
<script>
function calc() {
const now = new Date();
const thisYear = Number(now.getFullYear());// 올해 연도를 저장할 수 있는 변수
console.log(thisYear)
const birthYear = Number(prompt("태어난 연도를 입력하세요.", "YYYY")); // 태어난 연도를 저장할 변수
let age;
age = thisYear - birthYear + 1;
document.querySelector('#result').innerHTML = `당신의 나이는 ${age}세 입니다.`;
}
</script>
</body>
</html>
2. 산술연산자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>산술연산자</title>
<script>
// + - * /
const num1 = 20;
const num2 = 10;
const score1 = num1 + num2;
const score2 = num1 - num2;
const score3 = num1 * num2;
const score4 = num1 / num2;
console.log(score1 + ',' + score2 + ',' + score3 + ',' + score4 + ',' );
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>산술연산자</title>
<script>
// %
const evenOdd = 2; // 변수값을 변경해서 테스트 해보기 바랍니다.
const result = evenOdd % 2;
let comment = 0;
if (result === 0) {
comment = evenOdd + '는(은) "짝수" 입니다.';
} else {
comment = evenOdd + '는(은) "홀수" 입니다.';
}
console.log(comment);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>산술연산자</title>
<script>
// %
const evenOdd = 2; // 변수값을 변경해서 테스트 해보기 바랍니다.
const result = evenOdd % 2;
// const는 선언과 동시에 초기화
let comment = 0;
if (result === 0) {
comment = evenOdd + '는(은) "짝수" 입니다.';
} else {
comment = evenOdd + '는(은) "홀수" 입니다.';
}
console.log(comment);
// 삼항연산자를 사용하면 선언과 동시에 초기화 가능
const comment2 = (result == 0) ? evenOdd + '는(은) "짝수" 입니다.' : evenOdd + '는(은) "홀수" 입니다.';
console.log()
</script>
</head>
<body>
</body>
</html>
3. 복합대입 연산자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let value = 10;
value += 10; // value = value + 10;
document.write(value); // 20
// 복합 대입 연산자를 이용해서 문자열을 조합
let list = '';
list += '<ul>';
list += ' <li>Hello</li>';
list += ' <li>javaScript..!</li>';
list += '</ul>'
document.write(list);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
// 복합대입연산자
var num1 = 5;
var num2 = 15;
var num3 = 5;
var num4 = 20;
var num5 = 10;
num1 += 10;
num2 -= 10;
num3 *= 10;
num4 /= 10;
num5 %= 10;
console.log(num1 + ',' + num2 + ',' + num3 + ',' + num4 + ',' + num5);
// += 연산자를 이용한 문자연결
var table = '<table>';
table += '<tr>';
table += '<td>자바스크립트</td><td>제이쿼리</td>';
table += '</tr>';
table += '</table>';
document.write(table);
</script>
</head>
<body>
</body>
</html>
4. 증감연산자 : 복합 대입 연산자를 약간 간략하게 사용한 형태
- a++ : 기존의 변수 값에 1을 더함. 후위
- ++a : 기존의 변수 값에 1을 더함. 전위
- a-- : 기존의 변수 값에 1을 뺌. 후위
- --a : 기존의 변수 값에 1을 뺌. 전위
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>증감연산자</title>
<script>
let num1 = 10;
num1++; // -> num1 += 1 -> num1 = num1 + 1;
document.write(num1); // 11
document.write('<br><br>');
//후위 : 해당 문장을 실행한 후 값을 더함
let num2 = 10;
document.write(num2++); // document.write(num2); num2++ // 10
document.write('<br>');
document.write(num2++); // 11
document.write('<br>');
document.write(num2++); // 12
document.write('<br>');
document.write(num2++); // 13
document.write('<br><br>');
// 전위 : 값을 더한 후에 해당 문장을 실행
let num3 = 10;
document.write(++num3) // 11
document.write('<br>')
document.write(++num3) // 12
document.write('<br>')
document.write(++num3) // 13
document.write('<br>')
document.write(++num3) // 14
document.write('<br>')
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>증감연산자</title>
<script>
/* 증감 연산자 사용 예 */
let num1 = 10;
console.log(num1++); // 10
console.log(++num1); // 12
console.log(num1--); // 12
console.log(--num1); // 10
let num2 = 10;
console.log(num2); // 10
num2++; // 11
num2++; // 12
console.log(num2); // 12
console.log(num2); // 12
num2--; // 11
num2--; // 10
console.log(num2); // 10
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>증감연산자</title>
<script>
// ++, --
var increase = 0;
var add = 0;
++increase; // 1
console.log(increase); // 1
increase++; // 2
console.log(increase); // 2
add = ++increase; // 3
console.log(add + ',' + increase); // 3, 3
add = increase++; // 4
console.log(add + ',' + increase); // 3, 4
</script>
</head>
<body>
</body>
</html>
5. 비교연산자
- a == b : a와 b가 같으면 true, 같지 않으면 false. 데이터 타입은 비교하지 않음
- a === b : a와 b가 같고, 데이터 타입이 같으면 true, 같지 않으면 false. 등등
6. 논리연산자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/* 코딩 하면서 결과값 예측할 것 */
let logic1, logic2, logic3, logic4, logic5, logic6;
logic1 = (3>2) && (5>3);
console.log(logic1); // True
logic2 = (3<2) && (5>3);
console.log(logic2); // False
logic3 = (3>2) || (5>3);
console.log(logic3); // True
logic4 = (3<2) || (5<3);
console.log(logic4); // False
logic5 = !(3<2);
console.log(logic5); // True
logic6 = !(3>2);
console.log(logic6); // False
</script>
</head>
<body>
</body>
</html>
7. 삼항연산자
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>삼항연산자</title>
<script>
/*
* 삼항 연산자 : 조건식의 결과 (true, false)에 따라 결과 값을 다르게 나오게 해주는 연산자
형식 : 조건식 ? 실행문1 : 실행문2;
조건식이 true일 때는 실행문 1, false 일때는 실행문2 가 실행됨
*/
let num1 = 10;
let num2 = -10;
console.log(num1 > 0 ? '양수' : '음수');
console.log(num2 > 0 ? '양수' : '음수');
let num3 = 31;
let type = num3 % 2 === 0 ? '짝수' : '홀수';
console.log(`${num3}는 ${type}입니다.`)
// 템플릿 문자열을 사용해서 직접 코드를 넣는 방법도 추천
let num4 = 32;
console.log(`${num4}는 ${num4 % 2 === 0 ? '짝수' : '홀수'}입니다.`);
// 숫자 0은 false, 나머지 숫자는 true
console.log(`${num4}는 ${num4 % 2 ? '홀수' : '짝수'}입니다.`);
</script>
</head>
<body>
</body>
</html>
8. 활용
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#contents {
width: 450px;
margin: 0 auto;
}
#contents > img {
float: left;
margin-right: 25px;
}
ul {
list-style: none;
padding-top: 40px;
}
li {
margin-bottom: 10px;
}
li > label {
width: 80px;
float: left;
text-align: right;
}
input[type="text"] {
width: 110px;
padding: 5px 10px;
margin: 0 5px 0 10px;
}
li:nth-child(3) {
margin-top: 20px;
text-align: center;
}
button {
padding: 5px 10px;
border: 1px solid #ccc;
font-size: 1em;
}
#showResult {
margin-top: 20px;
font-size: 1.5em;
}
</style>
</head>
<body>
<!-- 1단계 : 레이아웃 -->
<div id="contents">
<img src="images/sale.png" alt="">
<ul>
<li>
<label for="oPrice">원래 가격</label>
<input type="text" id="oPrice">원
</li>
<li>
<label for="rate">할인율</label>
<input type="text" id="rate">원
</li>
<li>
<button onclick="showPrice()">할인 가격 계산하기</button>
</li>
</ul>
<div id="showResult"></div>
</div>
</body>
</html>
<!-- 2단계 : 프로토타입 -->
<script>
function showPrice() {
let originPrice = 10000;
let rate = 25;
document.querySelector("#showResult").innerHTML =
`상품의 원래 가격은 ${originPrice}원이고, 할인율은 ${rate}%입니다.`
}
</script>
<!-- 3단계 : 완성 -->
<script>
/*
1. input 태그에서 값을 불러오기
2. 할인금액 계산하기
3. 출력 문구 수정
예) 상품의 원래 가격은 10000원이고, 할인율은 25%입니다. 2500원을 절약한 7500원에 살 수 있습니다.
*/
function showPrice() {
let originPrice = document.querySelector('#oPrice').value; // 원래 가격
let rate = document.querySelector('#rate').value; // 할인율
console.log(originPrice);
console.log(rate);
const savedPrice = Number(originPrice) * Number(rate) / 100; // 할인될 금액
console.log(savedPrice)
const resultPrice = originPrice - savedPrice; // 원래 가격에서 할인 금액을 뺀 최종가격
document.querySelector("#showResult").innerHTML =
`상품의 원래 가격은 ${originPrice}원이고,
할인율은 ${rate}%입니다.<br> ${savedPrice}원을 절약한 ${resultPrice}원에 살 수 있습니다.`
}
</script>
9. 연습문제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#contents {
width: 450px;
margin: 0 auto;
}
ul {
list-style: none;
padding-top: 40px;
}
li {
margin-bottom: 10px;
}
li > label {
width: 80px;
float: left;
text-align: right;
}
input[type="text"] {
width: 110px;
padding: 5px 10px;
margin: 0 5px 0 10px;
}
li:nth-child(3) {
margin-top: 20px;
text-align: center;
}
button {
padding: 5px 10px;
border: 1px solid #ccc;
font-size: 1em;
}
#showResult {
margin-top: 20px;
font-size: 1.5em;
}
</style>
</head>
<body>
<div id="contents">
<ul>
<li>
<p>달러 단위의 금액을 입력해주세요.</p>
<label for="moeny">입력 : </label>
<input type="text" id="moeny">
<button onclick="showPrice()">달러 계산하기</button>
</li>
</ul>
<div id="showResult"></div>
</div>
<script>
function showPrice() {
let dal = document.querySelector('#moeny').value; // 달러 입력값
let won = Number(dal) * 1346; // 환율 곱한 원화
document.querySelector("#showResult").innerHTML =
`달러 : ${dal} <br> -> 원화 : ${won}`
}
</script>
</body>
</html>
10. 조건문
- 코드는 위에서 아래로 차례로 실행되지만
- 조건문을 사용하면 조건에 따라 코드를 실행할 수도 있고, 실행하지 않을 수도 있음
- 이처럼 코드가 실행되는 흐름을 변경하는 것을 '조건분기' 하고 함
- if 조거문 : 조건에 따라 코드를 실행하거나 실행하지 않을 때 사용하는 구문
- 이때 조건은 불자료형을 의미
- 일반적으로 비교 연산자와 논리 연산자를 활용해 조건을 만들고, 이 조건을 사용해 조건 분기를 함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
if (273 < 100) { // 표현식 273 < 100이 참일 때 실행
alert('273 < 100 => true');
}
let str = '';
if(!str) { // 조건문 안에서 자동으로 형변환
alert('빈 문자열 입니다.');
}
str = ' '; // 공백 한 글자. 공백도 글자로 취급.
if (!str.trim()) { // 조건문 안에서 자동으로 형변환
alert('빈 문자열입니다.')
}
str = '값입력';
if(str) { // 조건문 안에서 자동으로 형변환
alert('빈 문자열이 아닙니다.');
}
</script>
</head>
<body>
</body>
</html>
- if else 조건문 : 서로 반대되는 상황을 표현하는 구문
- else 구문을 if 조건문 바로 뒤에 붙여서 사용하는 구문
- if 문을 중복 사용하는 것 보다 부하가 줄어듬
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
오전과 오후 구분하기
*/
// 변수를 선언
const date = new Date(); // 현재 날짜와 시간을 갖는 객체생성
const hour = date.getHours(); // 현재시간을 0 ~ 23 사이의 값으로 출력하는 메소드
if (hour < 12) { // 표현식 hour < 12가 참일 때 실행
alert('오전입니다.')
} else { // 표현식 hour < 12가 거짓 일 때 실행
alert('오후입니다.')
}
const threeHang = hour < 12 ? alert('오전입니다.') : alert('오후입니다.');
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
if else 조건문
*/
const number = prompt('숫자를 입력하세요!');
// 형변환을 하지 않아도 프로그램 실행에는 문제가 없음
// 조건식에서 0과 비교를 할 때 자동으로 형변환이 되어서 계산이 됨
// 이러한 부분이 자바 스크립트로 프로그램을 짤 때 문제가 되는 경우가 있어서 가급적 형변환을 하는 것을 추천
if (number <0) {
alert('0이상의 숫자를 입력하세요!')
} else {
document.write('입력한 숫자 : ' + number);
}
// 3항 연산자로 변경
const threeHang = number <0 ? alert('0이상의 숫자를 입력하세요!') : document.write('입력한 숫자 : ' + number);
</script>
</head>
<body>
</body>
</html>
- 중첩 조건문 : 조건문 안에 조건문을 중첩하여 사용하는 것
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const date = new Date() // 현재 날짜와 시간을 갖는 객체생성
const hour = date.getHours() // 현재시간을 0 ~ 23 사이의 값으로 출력하는 메소드
if (hour < 11) { // 표현식 hour < 11가 참일 때 실행
alert("아침 먹을 시간입니다.")
} else { // 표현식 hour < 11가 거짓일 때
if (hour < 15) {
alert('점심 먹을 시간입니다.')
} else { // 표현식 hour < 15가 거짓일 때
alert("저녁 먹을 시간입니다.")
}
}
</script>
</head>
<body>
</body>
</html>// if - else if 조건문
if (hour < 11) { // 표현식 hour < 11가 참일 때 실행
alert("아침 먹을 시간입니다.")
} else if(hour < 15) { // 표현식 hour < 11가 거짓일 때
alert('점심 먹을 시간입니다.')
} else { // 표현식 hour < 15가 거짓일 때
alert("저녁 먹을 시간입니다.")
}
const month = Number(prompt("월을 입력해주세요"));
switch (month/1) {
case 12:
case 1:
case 2:
alert("겨울입니다.")
break;
case 3:
case 4:
case 5:
alert("봄입니다.")
break;
case 6:
case 7:
case 8:
alert("여름입니다.")
break;
case 9:
case 10:
case 11:
alert("가을입니다.")
break;
default:
alert("숫자가 아닙니다.")
break;
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
const rawInput = prompt('태어난 해를 입력해주세요.', '');
const year = Number(rawInput);
const e = year % 12;
let result;
switch (e) {
case 0:
result = '원숭이';
break;
case 1:
result = '닭';
break;
case 2:
result = '개';
break;
case 3:
result = '돼지';
break;
case 4:
result = '쥐';
break;
case 5:
result = '소';
break;
case 6:
result = '호랑이';
break;
case 7:
result = '토끼';
break;
case 8:
result = '용';
break;
case 9:
result = '뱀';
break;
case 10:
result = '말';
break;
case 11:
result = '양';
break;
}
alert(`${year}년에 태어났다면 ${result} 띠입니다.`);
</script>
</head>
<body>
</body>
</html>
- 반복문
- while문은 자바와 거의 동일
- 삼항 for문 존재
- for in, for of
- 반복문 : 반복작업을 할 때 사용
- for 인덱스 in 반복문 : 인덱스 기반으로 출력
- 배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용
- for(cosnt 반복변수(인덱스) in 배열 또는 객체) {
문장
}
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/*
- 반복문 : 반복작업을 할 때 사용
- for 인덱스 in 반복문 : 인덱스 기반으로 출력
- 배열 요소를 하나하나 꺼내서 특정 문장을 실행할 때 사용
- for(cosnt 반복변수(인덱스) in 배열 또는 객체) {
문장
}
*/
const todos = ['우유구매', '업무 메일 확인하기', '필라테스 수업']
const times = ['8시', '3시', '12시'];
// 배열 출력을 위한 전통적인 방법
for (let i = 0; i<todos.length; i++) {
console.log(`${i}번째 할 일 : ${todos[i]}`);
console.log(typeof i); // number
}
for (const i in todos) {
console.log(`${i}번째 할 일: ${todos[i]}`); // 인덱스번호를 이용해 값에 접근
console.log(i); // 0 1 2
console.log(typeof i); // string -> 인덱스 값이 문자열
}
// 시간과 같이 출력
for (const i in todos) {
console.log(`${i}번째 할 일: ${items[i]} : ${todos[i]}`)
}
</script>
</head>
<body>
</body>
</html><script>
/*
for or 반복문
반복문 내부의 반복변수에 인덱스 대신 요소의 값이 들어감
자바의 foreach, 파이썬의 for in과 유사
for(const 반복변수 of 배열 또는 객체) {
문장
}
*/
const todos = ['우유구매', '업무 메일 확인하기', '필라테스 수업']
for (const todo of todos) { // todo에 요소의 값이 들어감
console.log(`오늘의 할 일 : ${todo}`)
}
</script><script>
/*
for 반복문
특정 횟수 만큼 반복하고 싶은 때 사용
for (초기값, 조건식, 증감식)
초기값에는 const 대신 let 사용
for (let i = 0; i < 반복 횟수; i++) {
문장
}
*/
// for 반복문 기본
for (let i = 0; i < 5; i++) { // 0 부터 5미만 까지 반복
console.log(`${i}번째 반복입니다.`)
}
// 1부터 N까지 더하기
let output = 0;
for (let i = 1; i <= 100; i++) {
output += i; // 1부터 100까지 더함
}
console.log(`1~100까지 숫자를 모두 더하면 ${output}입니다.`);
</script>
<script>
/*
for 반복문과 배열
배열을 출력할 경우 배열.length 사용
*/
const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
for (let i = 0; i < todos.length; i++) {
console.log(`${i}번쨰 할 일: ${todos[i]}`);
}
</script>
<script>
/*
for 반복문과 배열
배열을 출력할 경우 배열.length 사용
*/
const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업']
for (let i = 0; i < todos.length; i++) {
console.log(`${i}번쨰 할 일: ${todos[i]}`);
}
/*
for 반복문으로 배열을 반대로 출력하기
2번째 할 일: 필라테스 수업
1번째 할 일: 업무 메일 확인하기
0번째 할 일: 우유 구매
*/
for (let i = todos.length-1; 0<=i; i--) {
console.log(`${i}번쨰 할 일: ${todos[i]}`);
}
</script>
- 배열 array
- 자바의 배열보다는 파이썬의 리스트와 가까움
- 1) 자바 배열의 특징
- 동일한 데이터 타입을 미리 지정된 개수 만큼 저장. 중괄호 사용.
- 2) 파이썬 리스트의 특징
- 다른 데이터 타입을 동적으로 추가 삭제 가능. 대괄호 사용.
- 여러 자료를 하나로 묶어서 사용할 수 있는 특수한 자료형
- 여러 개의 변수를 한번에 선언해 다룰 수 있는 자료형
- 배열은 대괄호[...]를 사용해 생성하고 내부의 값을 쉼표(,)로 구분해 입력
- 배열 내부에 들어있는 값을 요소 element 라고 함
- 하나의 배열에 여러가지 타입의 자료형이 요소가 될 수 있음
- 컴파일 계층의 언어(C, C++, JAVA)등은 하나의 배열이 동일한 타입의 자료형만 요소가 될 수 있음
- 배열의 경우 개개의 요소에 접근하고 싶은 경우에는 인덱스를 이용
- 개개의 요소에 이름을 지정하기는 불편하기 때문에
- 순서대로 0부터 시작해서 1씩 증가하는 정수를 라벨링
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
/* 문자열도 문자의 배열 */
const str = '안녕하세요';
// 배열이름.length
// 자바 스크립트에서 기본으로 제공하는 기능으로, 배열의 개수를 자동으로 변환
console.log(str[2]); // 하
console.log(str.length); // 5
console.log(str[str.length-1]); // 요
// 숫자 자료형, 문자열, 불린, 함수, 객체, 배열
const array = [273, 'String', true, function () { },{},[273,103]];
</script>
</head>
<body>
</body>
</html>
공부 과정을 정리한 것이라 내용이 부족할 수 있습니다.
부족한 내용은 추가 자료들로 보충해주시면 좋을 것 같습니다.
읽어주셔서 감사합니다 :)