[생활코딩] 입문자를 위한 자바스크립트 기초 강의 #자바스크립트 소개 # 자바스크립트 기초

728x90

초반 기초 내용은 사실 아는 내용들이지만, 천천히 정리해가면서 개념을 다져가고자 정리를 시작하려고 한다! 꾸준히 매일매일 공부하기👌

✅ 자바스크립트란

- 자바스크립트는 프로그래밍 언어이다.

- 자바스크립트는 주로 웹(웹사이트) 개발을 위해 사용한다.

- 브라우저가 가진 기능을 실행 시키거나, 웹 페이지의 내용을 조작할 수 있다.

✅ 객체란 무엇일까

- 객체는 자바스크립트의 핵심 개념으로, 값 또는 기능을 가지고 있는 데이터이다.

- 사용자는 자바스크립트 코드를 이용해 웹브라우저 객체에 접근할 수 있다.

- 객체 뒤에 점을 찍으면, 객체가 가진 데이터가 기능을 사용할 수 있다.

- 객체가 가진 기능을 '메소드'라고 한다.

- 자바스크립트 문법에도 주석이 있다. 두 가지 방법으로 주석을 만들 수 있다 (//, /* */)

✅ 콘솔 & 코드 작성 규칙

- console 객체는 브라우저의 디버깅 콘솔에 접근할 수 있게 해 준다.

- console 객체는 window의 하위 객체이다.

- 자바스크립트 코드에서, window. 은 생략이 가능하다.

- console.log(x)는 'x'를 콘솔에 기록해두자'라는 기능의 메소드 호출이다.

- 코드에서 세미콜론(;)은 '구문의 끝'을 의미하는 기호이다. 세미콜론의 사용은 선택사항이다.

🔹 console.clear() : 콘솔에 있는 내용 지우기

✅ 변수와 숫자, 그리고 문자열

- 변수는 데이터를 기억하기 위해 사용하는 수단이다.

- 변수는 한 번에 하나의 데이터를 기억하며, 변수에 데이터를 대입(=)하면, 그 때부터 해당 데이터 대신 사용할 수 있게 된다.

- 키워드 let을 사용해 변수를 선언하며, 데이터는 얼마든지 변경할 수 있다.

- 변수의 이름은 기본적으로 자유롭게 지어줄 수 있으나, 제약사항이 있다

(맨 앞은 숫자가 올 수 없고 기호는 $, _ 만 사용 가능)

- 자바스크립트 코드로 표현할 수 있는 모든 데이터는 변수에 대입될 수 있다.

✅ 상수 그리고 prompt

- 상수는 '변하지 않는 값' 이라는 뜻이다.

- 자바스크립트 상수는 const 키워드를 이용해 선언할 수 있으며, 선언과 동시에 데이터를 초기화 해주어야 한다.

let aa; => let은 변수 키워드 이용, 초기화를 동시해 하지 않아도 된다.
aa= b
console.log(aa) => b

const cc = d
console.log(cc) => const는 상수 키워드 이용, 초기화를 동시에 해야 한다.

- 상수는 데이터를 바꿀 수 없다.

- window 객체의 prompt 메소드는 사용자로부터 문자열 입력을 받는 다이얼 로그를 생성해 준다.

- prompt는 입력받은 문자열을 반환해주어 코드에서 활용할 수 있게 해 준다.

1. window.prompt()
prompt() => window. 은생략 가능

2. prompt("이 내용을 프롬포트에 써 주세요") => prompt 내용은 바뀌지만 확인 눌렀을 때 변화는 없다.

3. const propmtMessage = "프롬포트에 표시할 문자열"
const result = prompt(promtMessage)
console.log(result) => prompt 내용도 바뀌고 console에 반환도 된다.

✅ 템플릿 리터럴

- 템플릿 리터럴은 표현식을 내장할 수 있는 문자열 표현법이다.

- 백틱을 이용해 표현하며, 문자열에 데이터를 삽입할 수 있다.

- 데이터 삽입 시에는 플레이스홀더(${})를 사용하며, 삽입된 데이터는 문자열의 멤버가 된다.

- 데이터를 대신해 사용될 수 있는 것이라면 무엇이든 템플릿 리터럴에 삽입될 수 있다. 변수, 메소드 모두 가능.

const data1 = "데이터"
const str1 = `문자열 중간에 #{data1} 삽입하기`
console.log(str1)

const data2 = 100
const str2 = `숫자도 문자로 녹아든다 : ${data2}`
console.log(str2)

const str = `그렇다면 이건 될까? ${prompt("그렇다면 이건 될까?")}`
console.log(str)

✅ 연산 그리고 연산자

1️⃣ 대입 연산

대입 연산은 오른쪽 피연산자의 데이터를 왼쪽 피연산자에 대입한다. 왼쪽 피연산자로는 주로 변수나 상수가 자리하며, 오른쪽 피연산자로는 데이터 또는 테이러르 반환하는 식이 자리한다.

🔹 대입 연산자는 무조건 오른쪽이 먼저다.

예시)

let result = 3

result = result + 3
console.log(result) => 6

기존 result 3에 3을 더해서 6이 반환된다. 무조건 오른쪽이 먼저라는 대입 연산자의 규칙 때문이다.

🔹 복합 대입 연산자로 표시하는 것이 좋다.

예시)

let result = 3

result += 3 // result+3
console.log(result) => 6

위에 내용처럼 result를 반복해서 쓰지 않아도 += 를 통해 6을 반환할 수 있다.

- 연산이란 '식이 나타낸 일정한 규칙에 따라 계산함'을 뜻한다.

- 산술 연산은 두 항을 계산한 결과를 반환한다.

- 대입 연산은 연산자 오른쪽 항을 왼쪽 항에 대입한다. 주로 변수 초기화에 사용하며, 복합 대입 연산자를 이용해 연산 처리를 추가하기도 한다.

- 연산자가 여러 개 사용된 구문을 만들 수 있다. 이 경우 우선순위가 적용된다.(괄호가 있다거나 나누기, 곱셈이 먼저라거나)

✅ null, undefined 그리고 boolean

1️⃣ null

없다를 의미하는 데이터. 의도적으로 데이터가 없음을 나타내기 위해 사용하는 일종의 표현 수단.

let number;

// 이 변수는 숫자 0이다!
number = 0;

// 이 변수에는 아무 것도 없다!
number = null;

2️⃣ undefined

아직 데이터가 정의되지 않았음을 나타낸다. 선언만 되어 있고 초기화 과정은 하지 않을 때 볼 수 있다.

let number;

// 여기에는 아직 값이 정의되지 않았다. undefined이다
console.log(number) => undefined

// number는 3이라고 정의한 다음 확인한 것
number = 3;
console.log(number); => 3

3️⃣ boolean

숫자, 문자열과 같은 데이터 타입. true와 false, 단 두 가지 값만 존재한다. 참과 거짓 여부를 나타내기 위해 사용하는 데이터이다.

let value;

value = true; // 소문자로 써야한다!
value = false; // 참, 거짓 모두 소문자
value = False; // 이거 안된다
value = True; // 이것도 안된다!!

👌 타입오브 연산자 확인하기

let data = true;
console.log(data); => true

let data = true;
console.log(typeof data) => boolean

- null은 데이터가 없음을 나타내기 위해 사용하는 데이터이다.

- undefined는 정의되지 않은 상태임을 나타내기 위해 사용하는 데이터이다.

- boolean은 자료형으로, 참 또는 거짓 둘 중 한 가지 상태를 나타내기 위해 사용하는 논리적인 데이터 타입이다.

✅ Document Object Model, 줄여서 DOM

웹브라우저는 HTML 문서를 해석하고 화면을 통해 해석된 결과를 보여준다.

해석한 HTML 코드를 화면을 통해 보여주는 과정을 "렌더링"이라고 한다.

👌 렌더링의 세부 과정

브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서(객체)를 생성한다. 이를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠를 렌더링한다.

👌 DOM의 존재 목적

DOM은 자바스크립트를 사용해서 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의할 수 있도록 제공되는 프로그래밍 인터페이스(interface)이다.

✅ document & methods

1️⃣ window.document

브라우저 객제 window의 document 속성은 창이 포함된 문서를 참조한다. 즉, window.document은 현재 브라우저에 렌더링 되고 있는 문서를 의미하며, 이 속성을 이용하면 해당 문서에 접근할 수 있다.

window.document는 페이지 콘텐츠, 즉 DOM에 대한 진입점 역할을 하는 프로그래밍 인터페이스이다. 이를 이용하면 페이지의 정보를 얻거나 웹 요소를 생성 및 조작할 수 있다.

2️⃣ 속성과 메소드를 제공한다.

document는 문서(HTML, XML, SVG 등)에 대한 공통의 속성과 메소드를 제공한다. 즉, 다양한 API를 제공한다.

관련문서 링크 : https://developer.mozilla.org/ko/docs/Web/API/Document

👌 document.querySelector

document의 querySelector 메소드는 선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫 번째 요소(Element)를 반환한다. 일치하는 요소가 없으면 "없다"라는 의미의 null데이터를 반환한다.

인자로 전달되는 선택자는 문자열 타입의 "유효한 CSS 선택자"를 의미한다.

document.querySelector("p"); // p태그를 선택하자

document.querySelector("#text"); // id가 text인 요소를 선택하자

document.querySelector(".text"); // class가 text인 요소를 선택하자

👌 document.getElementById

document의 getElementById 메소드는 id를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 요소(Element)를 반환한다. 일치하는 요소가 없으면 "없다"라는 의미의 null 데이터를 반환한다.

인자로 전달되는 선택자는 문자열 타입의 "id"를 의미한다.

document.getElementById("text"); // id가 text인 요소를 선택하자

document.getElementById("image"); // id가 image인 요소를 선택하자

두 메소드는 모두 요소(Element) 객체를 반환한다.

👌 textContent

textContent 속성은 해당 노드가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성이다. textContent를 통해 요소가 포함된 텍스트를 읽을 수도, 변경할 수도 있다.

const p = document.querySelector("p"); // p 요소를 반환받아 상수로 이름을 붙인다.

console.log(p.textContent) // p 요소의 textContent 속성을 콘솔에 출력해보기

p.textContent = "텍스트를 이걸로 바꿔!"

✅ 비교 연산과 또 다시 boolean

1️⃣ 등가 비교

등가 비교는 네 가지 연산자를 사용해 처리할 수 있다.

등호(이퀄 사인, =) 하나는 대입연산자이므로, 기호 개수를 잘 봐가며 사용해야 한다.

이 내용에서 내가 한번 더 리마인드 한 것은,

🔹 같지 않다 : != // 이퀄 사인 등호 한개

🔹 완전히 같지 않다 : !== // 이퀄 사인 등호 두개

완전히 같다가 ===이지만, 완전히 같지 않다 일땐 !==인 점!

✅ 반복문을 만들어보자 1편

- while문은 주어진 조건이 true 인 "동안에" 구문을 반복하는 반복문이다. 다르게 말하면 조건이 false가 될 때까지 구문을 반복한다.

- 반복 구문은 "루프 loop"라고 한다.

🔹 동작 모양

let number = 1

while(number < 3){
	console.log(number)
    number += 1
}

1️⃣ window.confirm 메소드

window.confirm 메소드는 window.alert 메소드를 먼저 살펴볼 필요가 있다.

👌 window.alert("경고창에 쓸 메시지")

👌 window.confirm("경고창에 쓸 메시지")

보면, alert일때 확인 버튼만 있지만, confirm 은 확인과 취소라는 선택지가 주어진다.

즉, confirm이 true를 반환할지, false를 반환할지가 중요하다.

console.log(confirm("메시지")를 하고 확인을 누르면 true가 반환되고 취소를 누르면 false가 반환이 된다.

이러한 이유로, confirm도 조건으로 쓸 수 있다는 의미

while(confirm("메시지")){
    console.log("확인 버튼을 누르고 있군요!")
}

console.log("취소 버튼을 눌렀군요")

while문은 true를 반환하므로, 확인 버튼을 누르면 "확인 버튼을 누르고 있군요"가 콘솔에 입력되고, 취소 버튼을 누르면 "취소 버튼을 눌렀군요"가 반환된다.

// while문은 true를 반환한다고 했다. 즉, false를 반환하는 취소 버튼을 누르게 되면 while 구문은 종료된다.

✅ 반복문을 만들어보자 2편

- for문은 (초기식, 조건식, 반복식)으로 반복 횟수를 명식적으로 표현할 수 있다.

- for문의 초기식에서 let 키워드를 사용해 선언한 변수는 for 문의 실행이 끝나면 사용할 수 없다.

✅ 함수 1편

함수 선언식, 함수 표현식이 있다.

1️⃣ 함수 표현식

const 함수형 = function(){
	// 함수의 기능을 표현한 구문
}

const sayHello = function(){
	let number = 3+3
    console.log(number)
}

sayHello()  // 함수 호출!

함수 표현식으로 작성했다 할지라도, 함수를 호출해줄 땐 반드시 소괄호를 붙여줘야 한다.

2️⃣ 함수의 이름을 지을 때는

🔹 함수의 기능을 적절하게 표현할 수 있는 이름을 사용한다.

🔹 명사보다는 동사로 된 이름을 사용한다(기능이므로).

🔹 소문자로 시작하되, 여러 단어가 섞인 경우 카멜 표기법을 사용한다.

3️⃣ 지역 변수

함수 안에서 선언한 변수는 함수 안에서만 쓸 수 있다.

function sayHello(){
	let hello = "문자열 헬로우"
    console.log(hello)    // hello가 함수 안에서 정의되고 반환되야 한다.
}

console.log(hello) // 이렇게 함수 밖에서는 hello is not defined로 에러가 난다.

✅ 함수 2편

1️⃣ 데이터 반환

함수를 만들 때, 함수가 데이터를 반환하도록 할 수 있다.

함수가 데이터를 반환한다는 것은, 함수 호출문이 데이터로 대체됨을 뜻한다.

// 그냥 3을 출력

console.log(3)

// 3을 반환하는 함수 호출문을 출력

console.log(getThree())

저절로 되는 것은 아니다!

function getThree(){
	return 3;
}

이렇게 이 데이터를 반환한다라는 구문을 함수 내부에 추가해주어야 한다. 이때 키워드 return이 사용된다.

2️⃣ 데이터 반환 때 하나씩만 반환할 수 있다.

function getDate(){
	let result1 = 3+2+2
    let result2 = 4+3+2+1
    return result1
    return result2   // 소용 없다.
}

console.log(getData())

3️⃣ return은 함수를 끝낸다.

function sayHello(){
	console.log("Hi!")
    console.log("Hello!")
    return;
    console.log("안녕")  // return 뒤이기 때문에 실행되지 않는다.
}

✅ 함수 3편

1️⃣ 함수에 재료를 전달하기

🔹 함수 호출문 : 함수명 + 소괄호

소괄호의 역할은, 함수가 실행될 때 사용할 재료를 전달받는 것이다. 재료란 데이터를 뜻한다.

function sayVegetable(vegetable){
	console.log("함수에 전달된 채소는?")
    console.log(vegetable)
}

setVegetable("당근") // vegetable은 "당근"
setVegetable("오이") // vegetable은 "오이"

2️⃣ 재료는 몇 개 사용할 것인지?

매개변수는 원하는 만큼 추가할 수 있다. 구분자 쉼표(,)를 이용해 추가하고 호출 시에도 그에 맞게 재료를 전달한다.

function sayFood(food1, food2){
	console.log(food1)
    console.log(food2)
    console.log("먹고싶다!")
}

sayFood("치킨", "돈까스")
sayFood("피자", "햄버거")

🔹 매개변수(parameter) : 재료를 전달받기 위해 만들어둔 변수

🔹 인자(argument) : 실제 함수 호출 시에 전달하는 데이터

👌 매개변수 사용해서 반환해보기

function sayAnything(ant, number){
	
    for(let i=0; i<number; i++){
    	console.log(ant)
    }
}

sayAnything("바쁘다", 6)
sayAnything("배고프다", 2)

// 바쁘다가 6번 반환되고 배고프다가 2번 반환된다.

✅ 이벤트를 소개합니다

1️⃣ 이벤트(event)란?

"사용 중이거나 프로그래밍 중인 시스템 내에서 일어나는 사건" 당연히 웹에서도 이벤트가 발생한다.

ex) 웹에서 발생하는 이벤트 예시

- 웹페이지 사용자가 버튼을 클릭했다, 클릭 이벤트!

- 웹페이지 사용자가 키보드를 눌렀다, 키다운 이벤트!

- 웹페이지 사용자가 입력 폼의 내용을 제출했다, 제출 이벤트! 등

👌 이벤트 핸들러

각각의 이벤트들은 이벤트 핸들러(handler)를 가질 수 있다. 이벤트 핸들러란 이벤트가 발생되면 실행될 코드 블록을 뜻하며, 주로 함수가 이 역할을 담당한다. 이벤트 핸들러 역할을 수행할 함수를 정의하는 것을 이벤트 핸들러 등록이라 한다.

* event handler register : 이벤트가 발생하면, 이 함수를 호출해라!

👌 헷갈리면 안 돼는 것

이벤트 핸들러를 등록하기 위해 이벤트 속성에 함수를 대입하는 것과 함수 호출문을 대입하는 것은 엄연히 다르다.

// handleClick 함수를 대입한다(이벤트 핸들러 등록)
button.onClick = handleClick

// handleClick 호출 후 반환값을 대입한다(굳이?), 오류가 발생될 수 있다.
button.onClick = handleClick()

🔹 onkeydown : 키보드가 눌렸을 때

const inputType = document.querySelector("#typing")
const inputClick = document.querySelector("#push")

const handleTyping = function(){
    console.log("타이핑 되고 싶어요")
}

const handleClick = function(){
    console.log("클릭되고 있어요")
}

inputType.onkeydown = handleTyping
inputClick.onclick = handleClick

이런식으로 함수 이름을 짓지 않고 바로 입력할 수도 있다.

inputType.onkeydown = function(){
	console.log("타이핑 되고 있어요")
}

✅ addEventListener & 이벤트 객체

1️⃣ addEventListener

onclick, onkeydown과 같은 이벤트 속성을 통해 이벤트 핸들러를 등록하는 것보다 현대적인 방법은, addEventListener 메소드를 활용하는 것이다.

// 위에서 학습한 방식
target.onclick = function(){}

// addEventListener의 방식
target.addEventListener("click", function(){})

🔹 이전에 추가한 이벤트 핸들러를 제거할 수 있는 대응 메소드가 존재한다.

🔹 같은 리스터(타겟)에 대해 다수의 핸들러를 등록할 수 있다.

🔹 추가적인 옵션 사항들이 제공된다.

2️⃣ 이벤트 객체

이벤트 객체는 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터이다. 이를 활용하기 위해서는 이벤트 핸들러 함수에 매개변수를 추가하여 이벤트 발생 시마다 전달받을 수 있도록 해야 한다.

// click 이벤트가 발생하면 함수를 호출하겠다!
target.addEventListener("click", function(){})

// click 이벤트가 발생하면 함수를 호출하겠다!
// + 이때 자동으로 전달되는 이벤트 객체를 매개변수 event에 대입하겠다!
target.addEventListener("click", function(event){})

const btn1 = document.getElementById("one")
const btn2 = document.getElementById("two")
const btn3 = document.getElementById("three")

const handleClick = function(){
    console.log("저를 클릭하셨나요?")
}

// 여러개의 핸들러를 다발적으로 등록할 수 있다.
btn2.addEventListener("click", handleClick)
btn2.addEventListener("click", function(){
    console.log("또 다른 핸들러가 추가 등록되었다")    
})

// 이벤트 핸들러를 제거할 수 있다.
btn2.removeEventListener("click", handleClick)

const btn1 = document.getElementById("one")
const btn2 = document.getElementById("two")
const btn3 = document.getElementById("three")

const handleClick = function(event){
    
    //이벤트가 발생한 순간에 타겟을 알려준다.
    console.log(event.target)
}

btn1.addEventListener("click", handleClick)
btn2.addEventListener("click", handleClick)
btn3.addEventListener("click", handleClick)

✅ createElement & appendChild

1️⃣ document.createElement

document의 createElement 메소드는 지정된 이름의 HTML 요소를 만들어 반환해준다.

document.createElement('div')

document.createElement('p')

document.createElement('a')

이렇게 만들었다고 해서 바로 추가되는 것은 아니어서 appendChild를 사용해준다.

2️⃣ appendChild

appendChild 메소드는 DOM 내 개별 요소('노드'라고 한다)에 자식 요소를 추가할 때 사용하는 메소드이다.

👌 기본 사용법

target.appendChild(자식으로_추가할 _요소)

👌 예제

const p = document.createElement("p")
document.body.appendChild(p)

3️⃣ appendChild vs append

appendChild 메소드와 비슷한 역할을 하는 append 메소드도 있다.

타겟 요소에 자식 요소를 추가한다는 점에서 같으나, 차이점도 존재한다.

👌 주요한 차이

- appendChild의 경우 추가한 자식 노드를 반환하지만, append는 반환 데이터가 없다.

- append를 이용하면 요소에 노드 객체 또는 문자열을 자식 요소로 추가할 수 있지만, appendChild는 노드 객체만을 추가할 수 있다.

const button = document.getElementById("push")
const div = document.getElementById("area")


button.addEventListener('click', function(){
    console.log("div 생성 중!")
    const newDiv = document.createElement("div")

    newDiv.style.backgroundColor = "red"
    newDiv.style.width = "200px"
    newDiv.style.height = "200px"
	
    
    
    div.append("하하") // append는 문자 반환이 가능하다.
    div.appendChild(newDiv) // appendChild는 문자 반환이 불가하다.
    
    
    console.log(div.append(newDiv)) // 빨간 네모가 반환은 되지만 콘솔에 출력되진 않는다.
    console.log(div.appendChild(newDiv) // 빨간 네모 반환도 되고 콘솔에 출력도 된다.
})

✅ value 속성 외

1️⃣ 입력 요소 값 읽기

<input>, <select> 처럼 사용자로부터 입력을 받는데 사용 되는 요소들이 있다. 여기에서 사용자가 입력한 값을 읽어들일 때는 요소의 value 속성에 접근하자.

👌 차이를 기억해야 한다

- 요소의 텍스트에 접근하고 싶다 : textContent 또는 innerText

- 사용자가 요소에 입력한 값에 접근하고 싶다 : value

2️⃣ 접근이라는 것은

입력 요소의 value에 접근하여 할 수 있는 일은 크게 두 가지, 읽기와 쓰기이다.

// 대상 요소의 사용자 입력값을 읽어 콘솔에 출력하자!
console.log(target.value)

// 대상 요소의 사용자 입력값을 "변경값"으로 바꾸자!
target.value = "변경값"

3️⃣ 입력 폼을 다루어보기

여러 입력 요소를 포함할 수 있는 폼 요소로부터 여러 입력 값을 읽을 수 있다.

<form>
	<input name="nickname" placeholder="닉네임"/>
    <input name"character" placeholder="특징"/>
    <input type="submit" value="입력 완료"/>
</form>

=> form에서 submit 이벤트가 발생하면 입력 값들을 읽자! 그런데 문제가 있다.

4️⃣ form은 원래 action이 있다

form은 action에 지정한 url로 입력값을 제출한다.

<form action ="없는데요">
	<input name="nickname" placeholder="닉네임"/>
    <input name"character" placeholder="특징"/>
    <input type="submit" value="입력 완료"/>
</form>

=> action이 없을 땐? 이벤트 객체를 사용해 본다.

const textInput = document.getElementById("text")
const button = document.getElementById("button")


button.addEventListener("click", function(){
    textInput.value = "클릭하면 이렇게 바뀝니다"
})

// index.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>

    <form>
        <input type="text" placeholder="이름" name="name" />
        <input type="text" placeholder="동네" name="town"/>
        <input type="submit" value="PUSH" />
    </form>

    <script src="script.js"></script>
</body>

</html>

// script.js

const form = document.querySelector("form")

form.addEventListener("submit", function(e){
    e.preventDefault()   // 리다이렉션되서 새로고침되는 것을 막기 위해. 리다이렉션 이벤트 발생되
    도록 놔두면 아래 console.log(form.town.value)만 출력된다.

    console.log(form.name.value)
    console.log(form.town.value)
})

✅ 삼항 연산

삼항 연산은 이름 그대로 세 개의 항을 이용해 결과를 반환하는 연산이다. 보통 if 문의 단축 형태로 사용되기 때문에 삼항 조건 연산식이라고도 부른다

👌 select option

<select>
	<option value="foot" selected>축구</option>
    <option value="base">야구</option>
    <option value="basket">농구</option>
</select>

select option을 주면 선택할 수 있다.