반응형
코딩 일기
[ 안녕하개? ]
오늘 배운 코딩 복습시간을 가져 보겠습니다~~
함수 유형 : 프로토타입 함수
프로토타입(Prototype)은 자바스크립트에서 객체 지향 프로그래밍을 구현하는데 사용되는 중요한 개념입니다.
프로토타입은 객체의 원형을 나타내며, 해당 객체를 생성한 생성자 함수의 프로토타입 객체에 저장됩니다.
{
function Func(num, name, word){
this.num = num;
this.name = name;
this.word = word;
}
Func.prototype.result = function(){
document.write(this.num +". "+ this.name + "가 " + this.word + "되었습니다.
");
}
const info1 = new Func(1, "함수", "실행");
const info2 = new Func(2, "자바스크립트", "실행");
const info3 = new Func(3, "리액트", "실행");
info1.result();
info2.result();
info3.result();
}
결과 확인하기
1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 리액트가 실행되었습니다.
함수 유형 : 객체리터럴 함수
객체 리터럴 함수를 사용하면 새로운 객체를 생성하고 그 객체에 속성을 추가하는 것이 가능합니다.
{
function func(num, name, com){
this.num = num;
this.name = name;
this.com = com;
};
func.prototype = {
result1: function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
},
result2: function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
},
result3: function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`);
},
}
//인스턴스
const info1 = new func("1", "함수", "실행");
const info2 = new func("2", "자바스크립트", "실행");
const info3 = new func("3", "리액트", "실행");
//실행문
info1.result1( );
info2.result2( );
info3.result3( );
}
결과 확인하기
1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 리액트가 실행되었습니다.
함수 종류 : 즉시 실행 함수
즉시 실행 함수(IIFE, Immediately Invoked Function Expression)는 자바스크립트에서 함수를 선언하고 즉시 실행하는 방법입니다.
{
//즉시 실행 함수
(function (){
document.write("함수가 실행되었습니다.1
");
})();
//즉시 실행 화살표 함수
(( ) => {
document.write("함수가 실행되었습니다.2");
})( );
}
결과 확인하기
함수가 실행되었습니다.1 함수가 실행되었습니다.2
함수 종류 : 파라미터 함수
파라미터 함수(Parameter Function)는 자바스크립트에서 함수를 정의할 때 매개변수(parameter)를 사용하는 함수입니다.
파라미터 함수를 사용하면 함수 내에서 외부에서 전달된 값을 사용할 수 있습니다.
{
function func(str = "함수가 실행되었습니다."){ //함수내에서 외부에서 전달된 값을 사용할 수 있다.
document.write(str);
}
func();
}
결과 확인하기
함수가 실행되었습니다.
함수 종류 : 아규먼트 함수
아규먼트 함수를 사용하면 함수 호출 시 동적으로 전달되는 인자를 활용하여 함수를 실행할 수 있습니다.
{
function func(str1, str2){ //인자값 str1을 [0], str2을 [1] 자리로 보면된다.
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수실행1", "함수실행2
");
}
결과 확인하기
함수실행1함수실행2
함수 종류 : 재귀 함수(자기자신을 호출시키는 함수)
재귀 함수는 반복적인 작업을 수행해야 할 때나 복잡한 알고리즘을 구현할 때 유용하게 사용됩니다.
{
function func(num){
if(num<=1){ //false
document.write("함수실행1");
} else {
document.write("함수실행2");
func(num-1); //재귀 함수기 때문에 계속반복
}
}
func(10);
}
결과 확인하기
함수실행2함수실행2함수실행2함수실행2함수실행2함수실행2함수실행2함수실행2함수실행2함수실행2
함수 종류 : 콜백 함수 : 함수를 두번 실행(다른 함수에 인수로 넘겨지는 함수)
콜백 함수(Callback Function)는 다른 함수에게 인자로 전달되어 실행되는 함수입니다.
즉, 콜백 함수는 함수의 인자로 전달되어 언제든지 호출될 수 있는 함수를 말합니다.
{
function func(){
document.write("2.함수 실행");
}
function callback(str){ //callback함수기 때문에 먼저 실행
document.write("1.함수 실행");
str();
}
callback(func); //실행문 확인하기
}
결과 확인하기
함수실행1함수실행2
우리 머리를 깨부수는 이 함수들!!!
함수공부를 하면 아주 그냥 조용히 넘어가는 날이없다.. 내 머릿속에서 난리가 난다그냥.
그리고 우리가 연습했던 수많은 레이아웃들..
이 웹디자인 기능사 시험을 대비하기 위해 많은 레이아웃들을 만들었었다!
<!DOCTYPE html>
<html lang="ko">
<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>
<style>
* {
padding: 0;
margin: 0;
}
#wrap {
width: 1000px;
display: flex;
flex-wrap: wrap;
}
#left .container {
width: 200px;
height: 650px;
background-color: #aaa;
}
#slider .container {
width: 800px;
height: 350px;
background-color: #bbb;
}
#contents .container {
display: flex;
}
#contents .container .cont1 {
width: 33.3333%;
height: 200px;
background-color: #ffc0c0;
}
#contents .container .cont2 {
width: 33.3333%;
height: 200px;
background-color: #ff8080;
}
#contents .container .cont3 {
width: 33.3333%;
height: 200px;
background-color: #ff3a3a;
}
#footer .container {
height: 100px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#footer .container .foo1{
width: 20%;
height: 100px;
background-color: #a8c3ff;
}
#footer .container .foo2{
width: 80%;
height: 50px;
background-color: #5154ff;
}
#footer .container .foo3{
width: 80%;
height: 50px;
background-color: #1c20ff;
}
</style>
</head>
<body>
<div id="wrap">
<aside id="left">
<div class="container">로고</div>
</aside>
<div id="right">
<slider id="slider">
<div class="container">이미지 슬라이더</div>
</slider>
<section id="contents">
<div class="container">
<div class="cont1">공지사항, 갤러리</div>
<div class="cont2">배너</div>
<div class="cont3">바로가기</div>
</div>
</section>
<footer id="footer">
<div class="container">
<div class="foo1">로고</div>
<div class="foo2">하단 메뉴</div>
<div class="foo3">Copyright</div>
</div>
</footer>
</div>
</div>
</body>
</html>
뭐.. 디자인은 멋 없지만 flex 님과 함께면 나는 무적이다. (그리드도 재밌다!)
20. 함수 유형 : 프로토타입 함수
프로토타입(Prototype)은 자바스크립트에서 객체 지향 프로그래밍을 구현하는데 사용되는 중요한 개념입니다.
프로토타입은 객체의 원형을 나타내며, 해당 객체를 생성한 생성자 함수의 프로토타입 객체에 저장됩니다.
{
function Func(num, name, word){
this.num = num;
this.name = name;
this.word = word;
}
Func.prototype.result = function(){
document.write(this.num +". "+ this.name + "가 " + this.word + "되었습니다.
");
}
const info1 = new Func(1, "함수", "실행");
const info2 = new Func(2, "자바스크립트", "실행");
const info3 = new Func(3, "리액트", "실행");
info1.result();
info2.result();
info3.result();
}
결과 확인하기
1. 함수가 실행되었습니다. 2. 자바스크립트가 실행되었습니다. 3. 리액트가 실행되었습니다.
내일 이 프로토타입까지 문제가 나온다니까 잘봐둬야겠다..
내일 시험 화이팅!!