<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// document.write로 출력
document.write("내 이름은 웹쓰이고, 직업은 웹 퍼블리셔입니다.<br>")
document.write("내 이름은 도하은이고,자기소개할겁니다.<br>")
document.write("<br> <br>")
// 매개변수로 출력
function func1(name, job){
document.write("내 이름은 " +name + "이고, 직업은 "+ job + "입니다.<br>")
};
func1("웹쓰", "웹퍼블리셔");
func1("도하은", "자기소개")
document.write("<br> <br>")
// 변수를 선언하고 함수로 출력
function func2(name, job){
document.write("내 이름은 " +name + "이고, 직업은 "+ job + "입니다.<br>")
};
let youName = "웹쓰";
let youJob = "웹 퍼블리셔";
let youName2 = "도하은";
let youJob2 = "자기소개";
func2(youName, youJob);
func2(youName2, youJob2)
document.write("<br> <br>")
// 객체를 선언하고 함수로 출력.
function func3(name, job){
document.write("내 이름은 " +name + "이고, 직업은 "+ job + "입니다.<br>")
};
const you = [
{
name: "웹쓰",
job: "웹 퍼블리셔"
},
{
name: "웹스토리보이",
job: "프로트엔드 개발자"
}
]
func3(you[0].name, you[0].job);
func3(you[1].name, you[1].job);
document.write("<br> <br>")
// 객체 + 메서드
const you2 = {
name1: "웹쓰",
job1: "웹 퍼블리셔",
name2: "웹 스토리보이",
job2: "프로트엔드 개발자",
study1: function(){
document.write("내 이름은 " +this.name1 + "이고, 직업은 "+ this.job1 + "입니다.<br>")
},
study2: function(){
document.write("내 이름은 " +this.name2 + "이고, 직업은 "+ this.job2 + "입니다.<br>")
}
};
you2.study1();
you2.study2();
document.write("<br> <br>")
// 객체 생성자 함수(함수 + 인스턴트 객체(매개변수))
function You3(name, job){
this.name = name;
this.job = job;
this.study= function(){
document.write("내 이름은 " +this.name + "이고, 직업은 "+ this.job + "입니다.<br>")
}
};
let char1 = new You3("웹쓰", "웹 퍼블리셔")
let char2 = new You3("웹 스토리보이", "웹 프로트엔드 개발자")
char1.study();
char2.study();
document.write("<br> <br>")
// 프로토타입 메서드
function You4(name, job){
this.name = name;
this.job = job;
};
You4.prototype.study = function(){
document.write("내 이름은 " +this.name + "이고, 직업은 "+ this.job + "입니다.<br>")
};
let char3 = new You4("웹쓰", "웹 퍼블리셔");
let char4 = new You4("웹 스토리보이", "웹 프로트엔드 개발자");
char3.study();
char4.study();
document.write("<br> <br>")
// 객체 리터럴
function You5(name, job){
this.name = name;
this.job = job;
};
You5.prototype = {
study1: function(){
document.write("내 이름은 " +this.name + "이고, 직업은 "+ this.job + "입니다.<br>")
},
study2: function(){
document.write("내 이름은 " +this.name + "이고, 직업은 "+ this.job + "입니다.<br>")
}
};
let char5 = new You5("웹쓰", "웹 퍼블리셔");
let char6 = new You5("웹 스토리보이", "웹 프로트엔드 개발자");
char5.study1();
char6.study2();
</script>
</body>
</html>