자바스크립트 (JavaScript) <script></script>
프로그래밍 언어, 어디서든 쓰일 수 있지만 주된 분야는 웹개발 이다, 인터넷을 통해 서비스되는 웹사이트 개발하는 일
HTML/CSS 언어를 통해 렌더링된 하면을 조작할 수 있다.
- HTML 웹콘텐츠 정의
- CSS 웹페이즈 스타일링
- JvaScript 동작이나 사용작용을 정의
<body></body>에 주로 사용
- HTML 내부에 작성가능
- 자바스크립트 파일을 만들고, 그안에 작성한 코드를 HTML 문서에 연결하기
<script src="해당 파일 경로">``</script>
동작 원리 & 출력해보기
프로그래밍 언어로써, 소프트웨어적 대상에게 명령을 내리는 역할 수행
입력 -> 처리 -> 출력 : 이것을 객체에 명령하는 것
- 입력 : 객체에게 어떤 작업을 수행하라는 명령을 전달
- 처리 : 객체가 주어진 작업을 수행한다
- 출력 : 객체가 작업을 수행한 결과를 사용자에게 반환한다.
-
객체 다르눈 방법
- 객체.데이터 : 객체가 가지고 있는 숫자,문자 등의 다양한 데이터(속성) 사용
- 객체.기능() : 객체가 가지고 있는 다양한 기능을 수행(괄호필수), 메소드
- ex) window.alert(x) 경고창에 x 라고 쓴 다음 화면에 띄워조 라는 명령
-
자바스크립트 주석
//주석: 한줄짜리 주석/* */: 여러줄에 걸친 주석
<body>
<script>
/*
자바스크립트 코드는 기본적으로 작성된 순서에 맞춰 차례대로 작업을 수행.
명령문은 한줄에 하나씩 작성하는게 좋음
2줄 이상 쓰려면 세미콜론을 작성
명령문의 끝에 세미클론; 을 쓰면 '명령문 하나끝남' 이란 의미
*/
// 객체 뒤에 붙는 명령문, 메소드!
window.alert('경고!') // 경고창
window.alert('경고!') // 스크립트 한줄에 하나의 코드만 작성
// 입력 - 처리 - 출력
</script>
</body>콘솔출력과 자료형
콘솔은 브라우저의 디버깅 콘솔을 의미. 콘솔은 브라우저 안에 내장된 브라저의 하위객체 이므로 브라우저 객체를 통해 접근 window.console
디버깅 콘솔이란? 개발자 도구 메뉴중 콘솔 이라는 항목이 존재하는데, 이것을 누르면 나타나는 화면이 디버깅 콘솔
디버깅 콘솔을 이용하면 자바스크립토 코드를 테스트 할 수 있다.
window.console, console 단일로도 사용 가능
- console.log(x) & 자료형 : 콘솔창에 x 라고 써줘! 명령을 전달
- 자바스크립트 문법으로 표현 될 수있는 데이터(자료형) 만이 x 자리에 들어 갈 수 있다.
- 숫자 : console.log(88) 정수와 실수 구분 가능, 연산자 사용 가능
- 문자열
- 불리언
- 다양한 목적과 형태의 객체
- 자바스크립트 문법으로 표현 될 수있는 데이터(자료형) 만이 x 자리에 들어 갈 수 있다.
<script>
// 정수 기록하기
window.console.log(10)
window.console.log(0)
window.console.log(-10)
//실수 기록하기
console.log(10.34)
console.log(-10.34)
// 산술 연산
// 반환 : 명령문이 결과값 처럼 사용되는 것
console.log(10+2)
console.log(10-2)
console.log(10+2)
console.log(10+2)
console.log(10%3)
// 자료형의 이름이 뭔지도 반환 가능
console.log(typeof 3)
</script>변수와 상수, 대입
let 변수명 = 데이터;
변수가 생성되면 변수이름을 지정된 데이터 대신 사용할 수 있다.
-
변수명에는 오직 문자와 숫자, 그리고 기호 $과 _만이 포함될 수 있다.
-
첫번째 글자로 숫자로 불가
-
다른 뜻을 가지고 있는 단어는 변수명으로 사용 불가
-
let 변수명 만으로 생성 가능
-
const 상수이름 = 데이터; : 상수 변하지 않는 값
-
상수는 선언할때 데이터를 초기화 해주어야 한다.
<script>
let num = 5
console.log(num)
let number;
number = 10;
console.log(number)
number = 18;
console.log(number)
number +=1;
console.log(number)
const age = 20
//age = 21 에러발생
alert(age)
</script>문자열 prompt
기호의 순차 수열, 기호의 집합
let string1 = '문자열에는 기호가 들어간다'
더하기 연산 가능
window.prompt(x)
사용자로부터 문자열을 입력 받을 수 있는 다이얼 로그 박스를 열어주는 메소드
ex) prmopt("다이얼로그 박스에 이렇게 쓸거야") -> 사용자의 키보드 입력 유도
실행 시에 사용자로부터 문자열을 입력받고, 입력받은 문자열을 자신이 사용된 곳에 그대로 반환
즉 메소드가 문자열로 바뀌게 된다.
<script>
let apple
apple = "사과"
console.log(apple)
console.log("사과")
console.log(apple + " & " + "바나나")
const order ="아메리카노 1잔 & 라떼 2잔 주시오!!"
//alert(order)
//let answer = window.prompt("당신이 좋아하는 과일은?")
//alert(answer)
//console.log(answer)
</script>- 템플릿 리터럴 (`) 이용
- 템플릿 리터럴은 반환값이 존재하는 자바스크립트 코드, 즉 표현식을 내장 할 수있는 문자열 표현 방법.
- 문자열의 내용에 데이터를 삽입한다는 것을 의미
- 템플릿 리터럴로 표현한 문자열 내부에 플레이스홀더(
${})를 기입하고, 그안에 데이터를 기입하면 데이터는 문자열의 멤버가 된다. - 이것도 가능 ex) const str =`그렇다면 이건 될까? ${prompt('그렇다면 이건 될까??')}`
- 위 예시는 prompt 로 쓰인 값의 반환값이 그렇다면 이건 될까 뒤에 삽입되어 반환됨
<script>
const dog ="강아지"
const cat = `고양이`
console.log(typeof cat)
const modifier = "귀여운"
const prettyDog = `${modifier} ${dog} 좋아요!`
console.log(prettyDog)
const prettyPet = ` ${modifier} ${prompt("좋아하는 동물은?")}`
console.log(prettyPet)
</script>부수적인 기능
-
undefined & null
- 아직 데이터가 정의되지 않았음 : undefined
- 데이터가 없음 : null
-
boolean(소문자)
- ture
- false
-
window.confirm(x) 메소드
- 취소, 확인 둘중 하나 선택하게 하는 메소드, x 가능한 type
let answer=comfirm("기분이 좋습니까?")
console.log(answer) // false 출력DOM 메소드 및 속성
렌더링이란 HTML 문서를 해석하고 화면을 통해 보여주는 과정이라 함
브라우저는 HTML 코드를 해석해서 요소들을 트리 형태로 구조화해 표현하는 문서를 생선한다.
이를 DOM이라 하며, 브라우저는 DOM을 통해 화면에 웹 콘텐츠들을 렌더링 한다.
-
DOM (Document Object Model)
- 웹 콘텐츠를 추가, 수정, 삭제하거나 마우스 클릭, 키보드 타이핑 등 이벤트에 대한 처리를 정의 할 수 있도록 제공되는 프로그래밍 인터페이스 이다.
-
window.document : 현재 브라우저에 렌더링 되고 있는 문서를 의미, 해당 문서에 접근 가능
- 페이지의 정보를 얻거나 웹요소를 생성 및 조작할 수 있다.
-
querySelector & textContent
- querySelector 선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫 번째 요소를 반환한다. 없으면 null, 인자로 전달되는 선택자는 문자열 타입의 '유효한 CSS 선택자'를 의미
- doucement.quertSelector("p") or #text .text
- textContent : 해당 객체 요소가 포함하고 있는 텍스트 콘텐츠를 표현하는 속성
- const p = document.querySelector("p");
- console.log(p.textContent) // 출력
- p.textContent = "텍스트를 이걸로 바꿔" p 텍스트를 바꿀 수도 있음
- querySelectorAll : 전부 선택
- querySelector 선택자를 인자로 전달받아, 전달받은 선택자와 일치하는 문서 내 첫 번째 요소를 반환한다. 없으면 null, 인자로 전달되는 선택자는 문자열 타입의 '유효한 CSS 선택자'를 의미
<body>
<p>대한민국의 역습입니다.</p>
<p class="comment">손흥민이 몰고 갑니다</p>
<p class="comment" id ="goal">조규성 환상적인 마무리~ 골</p>
<script>
//입력 - 처리 - 출력
const p1 = window.document.querySelector("p")
console.log(p1.textContent)
p1.textContent = "우르과이의 역습입니다." // 이걸로 바껴서 페이지에 출력
console.log(p1.textContent)
</script>
</body>🧑💻 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자 정보 입력받고 출력하기</title>
<style>
#hobby{
color: red;
}
</style>
</head>
<body>
<h1 id="name"></h1>
<p id="pet"></p>
<p id="fruit"></p>
<script>
const nameElement = document.querySelector("#name")
let name = prompt("당신의 이름은?")
nameElement.textContent=name
const hobblyElement = document.querySelector("#pet")
let pet = prompt("좋아하는 동물?")
hobblyElement.textContent=`취미는 ${pet} 입니다!`
document.querySelector("#fruit").textContent = `좋아하는 과일은 ${prompt("좋아하는 곡은?")} 입니다.` //엔터쳐도됨
</script>
</body>
</html>DOM 메소드 및 속성
- document.getElementsByClassName("") : 클래스 선택
- document.getElementById("song-title") : id 선택
- Element.textContent : 요소가 가진 텍스트 콘텐츠를 반환
- 공백까지 같이 존재- element.innerText : 오직 텍스트만 반환
- Element.innerHTML : 요소 내에 쓰여진 HTML 코드를 텍스트 형태로 반환
- Element.className : 요소의 class 속성값을 반환 , 클래스 명이 보여짐
- Element.style : 요소의 style 관련 속성값들을 반환, 현재 정의된 스타일 보여짐
- Element.title : title 속성값 반환, 타이틀 명 반환
<body>
<h1 id="song-title" class="heading" title="VOS의 2019년 발매곡">
<span>다시 만날까 봐</span>
</h1>
<p class="lyrics">
인스타로 몰래 보는 너의 하루들 누가 봐도 헤어틴 티를 내
</p>
<p class="lyrics">
팔로우 다 끊고소 좋아요는 왜 눌렀니 (ㅋㅋ)
</p>
<script>
document.querySelectorAll(".lyrics")
document.getElementsByClassName("lyrics")
console.log(
const title = document.getElementById("song-title")
)
console.log(title.textContent)
console.log(title.innerText)
console.log(title.className)
console.log(title.style)
console.log(title.title)
</script>
</body>비교 연산
크냐 작냐, 같냐 다르냐 이 두가지 비교 가능
언제나 boolean 데이터를 반환
==, ===, !=, !==, 같다 완전히 같다
자료형이 달라도 데이터가 같으면 ==로 비교가 가능하고 ===3개는 데이터랑,자료형이 같아야 같음을 인정
<script>
let age=parseInt(prompt("당신의나이는?")) //parseInt 타입을 정수로 전환
console.log('20' == age) //true
console.log('20' === age) //false
let name = prompt("당신의 이름은?")
document.write(`사용자의 이름은 ${name} 입니다<br>`) //DOM 단계에서 바뀌는것 페이지에 표시됨
document.write(`우리가 찾던 사람인가? ${"강윤호"===name}`) // false 가 안됨
</script>조건문 if
참/거짓 여부에 따라 프로그램의 흐름을 결정할 수 있는 구문
불리언 데이터로 반환하거나 불리언데이터로 해석할 수 있는 식
선택 제어문
- if(조건){ ture 시 실행할 코드 } else { false 일때 코드 }
- if(조건){} else if(조건){} else{}
<script>
const h1 = document.querySelector("h1")
const p = document.querySelector("p")
const isThere = confirm("제목 표시 할까요?")
if(isThere){
h1.textContent="당신이 내야할 버스 요금은?"
}
const age = parseInt(prompt("나이가 어떻게 되세요?"))
if(age >= 20){
p.textContent = "1250원이네요!"
}else if(age>=8){
p.textContent = "750원 이네요!"
}else{
무료입니다
}
</script>반복문 for, while
-
for(초기식; 조건식; 반복식){ 참일경우 반복 수행할 코드} ex) for(let i =1; i<= 5; i += 1){doucment.write(
"good<br>")} -
while(조건){ ture 일떄 수행할 코드 }, while(prompt("set number) != 0) { document.write("get number!
")}
<script>
//초기식,조건식,반복식
//초기식에서 선언한 변수는 for문 밖에서는 사용 불가
/*for(let i = 0; i < 5; i+=1){
document.write(`반복중이다..이다! ${i}번째! <br />`)
}*/
let i = 0;
while(i < 5){
document.write(`반복중이다 ${i+1} 번째 <br>`)
i += 1
}
while(confirm("반복 실행 할까요?")){}// 확인 취소만 존재
</script>createElement & appendChild
createElement 지정된 html 메소드를 생성, 생성만 하는거지 만드는것이 아님
그 만드는 것을 추가할 것을 append,appendChild() 를 쓴다
ex ) const div = documnet.createElemnet('div), document.body.appendChild(div)
바디태그에 div 하나가 추가됨
<-> append : appendchild는 노드 객체만 추가할수있고, append는 문자열 내용만 가지고도 추가 가능, appendchild 는 반환하지만 append 는 반환하지 않는다.
<body>
<div id="container">
</div>
<script>
for(let a =1; a<=5; a+=1){
const div = document.getElementById("container")
const box = document.createElement("div")
console.log(box)
box.style.color = "blue" // 자바 스크립트에서는 스타일 속성 저장할 떄 문자열로 표현해야함
box.style.width = "200px"
box.style.height = "200px"
box.textContent = "헷갈리지만 신기하고 재미있다!"
div.appendChild(box) // 추가되고 콘솔에 남는다
div.append("재밌다") //추가는 되지만 콘솔에는 안남는다
}
</script>
</body>🧑💻 실습
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>몬스터 잡기 게임</title>
</head>
<body>
<div id="container"></div>
<script>
let monsterHP = 100
const container = document.getElementById("container")
const h1 = document.createElement("h1")
h1.textContent= "몬스터 잡기 게임을 시작합니다!"
container.appendChild(h1)
let attackDamage = parseInt(prompt("1회 공격시 데미지는? (양의정수)"))
let attackCount = 0
if(attackDamage >0){
while(monsterHP > 0){
monsterHP -= attackDamage
attackCount += 1
const p = document.createElement("p")
p.textContent =`몬스터를 ${attackCount}회 공격했다!`
container.append(p)
const strong = document.createElement("strong")
strong.textContent = `몬스터의 남은 HP는 ${monsterHP}입니다 !`
container.append(strong)
if (monsterHP < 0) {
monsterHP = 0
}
}
const h2 = document.createElement(h2)
h2.textContent="몬스터 잡기 완료!"
h2.style.color ="orange"
h2.title = "게임을 다시 시작하고 싶으면 새로고침 하세요"
container.appendChild(h2)
}else{
alert("데미지를 잘못 입력하여 게임을 취소합니다.")
}
</script>
</body>
</html>함수 정의하고 호출하기
불러서 쓸수있는 코드 조각
- 함수 선언식 function 함수명(){ 함수의 기능 }
- 함수 표현식 const 함수명 = function(){ 함수의 기능 }
- 호풀 : 함수명()
<script>
createParagraph()
createParagraph()
createParagraph()
function createParagraph(){
const p = document.createElement("p")
p.textContent="새롭게 만들어진 문단 태그 !"
document.querySelector("#container").append(p)
}
// 호이스팅 가능 : 함수 만드는 부분이 호출하는 부분보다 아래에 있어도 된다.
sayYes()
// 호이스팅 불가
//sayNO() -> 안됨
// 함수 이름짓기 규칙은 변수와 같다.
// 기능을 정의하는 만큼, 동사를 사용하는 것이 좋다
function sayYes(){
alert("Yes")
}
const sayNO =function(){
alert("No")
}
sayNO()
</script>함수의 인수와 반환
함수 생성시 소괄호 안에 들어갈 것, 인수 func(x,y) return 도 있네
<body>
<div id="container"></div>
<script>
createParagraph("첫번째 문단, 와우!" , "red")
createParagraph("두번쨰 문단", "green")
createParagraph("세번째 문단", "blue")
function createParagraph(content, color){
const p = document.createElement("p")
p.textContent=content
p.style.color=color
document.querySelector("#container").append(p)
return `방금 만든 태그의 콘텐츠 : ${content}, 색상: ${color}`
}
function sample(){
console.log("반환 기능 테스트")
return "짜자잔"
}
console.log(sample()) // 짜자잔
</script>
</body>이벤트 핸들링
상호동작 ex ) 웹페이지 사용자가 버튼을 클릭했다. 클릭이벤트
각각의 이벤트에 대한 이벤트 핸들러를 정의할 수 있다.
이벤트 핸들러란 이벤트가 발생되면 실행될 코드블럭, 주로 함수가 담당, 수행할 함수를 정의하는것이 핸들러 등록이라 함
- 타겟.on이벤트명 = 이벤트핸들러함수 => button.onclick = handleClick // 핸들러 한것, 소괄호 없음
- onclik,onkeydown 로 등록가능하고
- addEventListener 메소드 활용하는 것이 더 좋음
- addEventLister(이벤트명, 이벤트핸들러)
- remove
- 같은 타겟에 대해 다수의 핸들러를 등록할 수 있다.
- 이벤트 객체 : 추가적인 기능과 정보를 제공하기 위해 이벤트 핸들러에 자동으로 전달되는 데이터. 매개변수를 추가하여 이벤트 발생시마다 전달할 수 있또록한다 활용하려면
<script>
const spanBtn = document.getElementById("span")
const strongBtn = document.getElementById("strong")
const markBtn = document.getElementById("mark")
// function handleClick(){
// alert("클릭했어요!")
// }
// spanBtn.onclick=handleClick
// spanBtn.onclick=function(){
// const span = document.createElement("span")
// span.textContent="새로생긴 span 태그입니다."
// document.body.append(span)
// }
const handleClick =function(event){
if(event.target.id=="span"){
const span = document.createElement("span")
span.textContent="새로생긴 span 태그입니다."
document.body.append(span)
}else if(evnet.target.id =="strong"){
const strongBtn = document.createElement("strongBtn")
strongBtn.textContent="새로생긴 strongBtn 태그입니다."
document.body.append(strongBtn)
}else if(event.target.id=="mark"){
const markBtn = document.createElement("markBtn")
markBtn.textContent="새로생긴 markBtn 태그입니다."
document.body.append(markBtn)
}
}
spanBtn.addEventListener("click",handleClick)
strongBtn.addEventListener("click",handleClick)
markBtn.addEventListener("click",handleClick)
</script>value 속성 이해하기
입력 요소로부터 값 읽어들이기
<input>``<select>사용자로부터 입력을 받아 사용되는 요소가 있따. 여기에서 사용자가 입력한 값을 읽어들일 때는 요소의 value 속성을 접속
- console.log(target.value)
- target.value ="변경값" 이것도 됨
- name 속성을 토대로 입력값에 접근할 수 있음
<body>
<input id ="talk">
<input id ="push" type="button" value="push">
<form>
<input name="name">
<input name="nick">
<input type="submit">
</form>
<script>
/*
const input = document.getElementById("talk")
const button = document.getElementById("push")
input.addEventListener("keyup", function(e){
console.log(e.target.value)
}
)
button.addEventListener("click", function(){
const p = document.createElement("p")
p.textContent = input.value
document.body.append(p)
// alert(input.value)
// input.value =" 버튼 눌러서 써짐 "
})
*/
const form = document.getElementById("form")
form.addEventListener("submit",function(){
event.preventDefault()
const p = document.createElement("p")
p.textContent= `${event.target.name.value}의
별명은 ${event.target.nick.value}`
document.body.append(p)
})
</script>
</body>🧑💻 실습
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>회원가입 양식</title>
<link href="join.css" rel="stylesheet">
</head>
<body>
<div id="container">
<form id="form" action="#">
<table class="table">
<tr>
<th>아이디</th>
<td>
<input name="id" placeholder="아이디" autocomplete="off" required>
</td>
</tr>
<tr>
<th>비밀번호</th>
<td>
<input type="password" name="pw1" placeholder="비밀번호">
</td>
</tr>
<tr>
<th>비밀번호 확인</th>
<td>
<input type="password" name="pw2" placeholder="비밀번호">
</td>
</tr>
<tr>
<th>이름</th>
<td>
<input name="이름" placeholder="사용자 이름" autocomplete="off" required><!-- required : 반드시 입력하라 -->
</td>
</tr>
<tr>
<th>전화번호</th>
<td>
<input name="전화번호" placeholder="휴대전화 번호" autocomplete="off">
</td>
</tr>
<tr>
<th>원하는 직무</th>
<td>
<select name="position">
<option value="developer">개발자</option>
<option value="designer">웹디자이너</option>
<option value="manager">기획자</option>
<option value="undetermined">미정</option>
</select>
</td>
</tr>
<tr>
<th>성별</th>
<td>
<label> <!-- 라벨을 이용하여 남자 여자 name 으로 묶음 -->
<input type="radio" name="gender" value="male" checked>남자
</label>
<label>
<input type="radio" name="gender" value="female" checked>여자
</label>
</td>
</tr>
<tr>
<th>이메일</th>
<td>
<input title="정확한 메일 주소를 작성해주세요" type="email" name="email">
</td>
</tr>
<tr>
<th>자기소개</th>
<td>
<textarea name="intro"></textarea>
</td>
</tr>
</table>
<div class="buttons">
<input type="submit" value="가입" class="btn" title="가입">
<input type="reset" value="리셋" class="btn" title="처음으로">
</div>
</form>
</div>
<script src="join.js"></script>
</body>
</html>css
*{ box-sizing: border-box;}
html, body{
margin: 0;
padding: 0;
background-color: #eaeaea;
}
#container{
width: 640px;
margin: 60px auto 0; /* 좌우 여백 동일하게*/
background-color: #ffffff;
border-radius: 15px;
}
form{
padding: 20px;
border: 1px solid #cccccc;
}
.table{
width: 80%;
margin: auto;
}
th{
width: 40%;
text-align: right;
padding: 5px;
}
td{
width: 60%;
text-align: left;
padding-left: 5px;
}
input, select, textarea{
width: 240px;
padding: 5px;
}
input[type="radio"]{
width: initial;
}
input[type="submit"], input[type="reset"]{
width: 80px;
}
textarea {
resize: none;
width: 240px;
min-height: 100px;
}
.buttons{
margin: 10px 0 0 0;
text-align: center;
}js
// 제출 이벤트를 받는다 (이벤트 핸들링)
// 제출된 입력 값들을 참조한다
// 입력값에 문제가 있는 경우 이를 감지한다
// 가입 환영 인사를 제공한다
const form = document.getElementById("form")
form.addEventListener("submit",function(event){
event.preventDefault() // 기존 기능 차단
// target = 이벤트가 발생한 객체 여기선 form
let userId = event.target.id.value
let userPw1 = event.target.pw1.value
let userPw2 = event.target.pw2.value
let userName = event.target.name.value
let userPhone = event.target.phone.value
let userPosition = event.target.position.value
let userGender = event.target.gender.value
let userEmail = event.target.email.value
let userIntro = event.target.intro.value
// console.log(userId, userPw1, userPw2, userName, userPhone,
// userPosition, userGender,userEmail, userIntro
// ) 실제로 나오는지 확인 콘솔에서
if(userId.length < 6){
alert("아이디가 너무 짧습니다. 6자 이상 입력해주세요.")
return
}
if(userPw1 !== userPw2){
alert("비밀번호가 일치하지 않습니다.")
}
// 새페이지 생성 (기존 페이지 덮어쓰기)
document.body.innerHTML = ""// 아무것도 없는 페이지로감 ""사이에 입력안했기에
document.write(`<p>${userId}님 환영합니다 </p>`)
document.write(`<p>회원 가입 시 입력하신 내용은 다음과 같습니다</p>`)
document.write(`<p>아이디 : ${userId} </p>`)
document.write(`<p>이름 : ${userName} </p>`)
document.write(`<p>전화번호 : ${userPhone} </p>`)
document.write(`<p>원하는 직무 : ${userPosition} </p>`)
})