728x90
반응형
코딩 일기를 가끔씩 쓸 것으로 예상됩니다...
오늘 오전에는 함수를 배웠습니다. 기존에 배웠던 것을 복습하는 거부터 처음 배우는 것까지 이해가 되는지 안되는지도 모른채 배웠던거 같습니다.
함수의 기본인 4가지 선언적, 익명, 매개변수, 리턴값 함수 이 4가지를 외우지 못하면 모든 함수의 유형을 이해 못한다고 합니다. 열심히 외웁시다.
https://coding23213.tistory.com/39 배운 함수까지 정리한 곳입니다.
오늘 배우것을 알아봅시다.
객체 리터럴 함수
{
function fucn(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("101","함수","실행");
const info2 = new func("201","자바스크립트","실행");
const info3 = new func("301","리액트","실행");
//실행문
info1.result1();
info2.result2();
info3.result3();
}프로토타입 함수가 많아지면 가독성이 떨어지기 때문에 객체에 넣어 함수를 정리 해주었습니다.
this란
함수 내에서 현재 실행되고 있는 컨텍스트(context)를 나타내는 특수한 키워드입니다. 이 컨텍스트는 함수를 호출하는 방법에 따라 달라질 수 있습니다.
즉시 실행 함수
{
(function (){
document.write("500.함수가 실행되었습니다.")
})();
//화살표 함수
(() => {
document.write("501.함수가 실행되었습니다.")
})();
}선언적 함수를 이용하여 함수를 즉시 실행하는 방법 입니다.
사이트가 실행되자 마자 바로 실행되게 해주고 싶을때 사용합니다.
파라미터 함수
{
function func(str = "600.함수가 실행되었습니다."){
document.write(str);
}
func()
}파라미터 함수입니다. 하나 이상의 인자를 입력받아서 연산을 수행하고 결과를 반환하는 함수라고 합니다.
아규먼트 함수
{
function func(str1, str2){
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수실행1", "함수실행2");
}함수를 호출할 때, 함수에 전달하는 인자를 키워드 인자 형태로 전달하는 함수라고 합니다.
재귀함수
{
function func(num){
if(num<=1){
document.write("함수가 실행되었습니다.");
} else {
document.write("함수가 실행되었습니다.");
func(num-1);
}
}
func(10);
}자기 자신을 호출시키는 함수 입니다.
콜백 함수
{
// function func1(){
// document.write("1.함수 실행");
// }
// function func2(){
// document.write("2.함수 실행"); //1번째를 실행하고 2번째를 실행하고 싶은데 1번째2번째 둘다나오는단점을보완한게콜백
// }
// func1();
// func2();
function func(){ //5. func함수가 실행됨
document.write("2.함수 실행");
}
function callback(str){
document.write("1.함수 실행"); //2.callback함수를 먼저실행후
str(); //3. str매개변수를 함수로 바꾸어 str함수를 실행
}
callback(func); //1.callback함수를 실행 4.str=func이므로 func함수를 실행
}다른 함수에 인수로 넘겨지는 함수 입니다.
오후에는 웹디자인 기능사를 위한 레이아웃을 만들어 보았습니다.
<!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>레이아웃 타입03 (C-1)</title>
<style>
*{
margin: 0;
padding: 0;
}
#wrap {
width: 1000px;
display: flex;
}
#main {
width: 800px;
}
#header {
width: 20%;
height: 650px;
}
#header .logo {
width: 100%;
height: 100px;
background-color: #e3be82;
}
#header .nav {
width: 100%;
height: 550px;
background-color: #ebb47a;
}
#slider {
width: 80%;
height: 350px;
background-color: #e6b8a2;
}
#section {
width: 80%;
display: flex;
}
#section .cont1 {
width: 33.3333%;
height: 200px;
background-color: #deab90;
}
#section .cont2 {
width: 33.3333%;
height: 200px;
background-color: #d69f7e;
}
#section .cont3 {
width: 33.3333%;
height: 200px;
background-color: #cd9777;
}
#footer {
width: 80%;
height: 100px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#footer .foot1 {
width: 20%;
height: 100px;
background-color: #c38e70;
}
#footer .foot2 {
width: 80%;
height: 50px;
background-color: #b07d62;
}
#footer .foot3 {
width: 80%;
height: 50px;
background-color: #9d6b53;
}
</style>
</head>
<body>
<div id="wrap">
<header id="header">
<div class="logo">로고</div>
<nav class="nav">메뉴</nav>
</header>
<main id="main">
<article id="slider">슬라이드</article>
<section id="section">
<article class="cont1">공지사항</article>
<article class="cont2">배너</article>
<article class="cont3">바로가기</article>
</section>
<footer id="footer">
<div class="foot1">로고</div>
<div class="foot2">하단 메뉴</div>
<div class="foot3">카피라이터</div>
</footer>
</main>
</div>
</body>
</html>저렇게 만들면 다음과 같이 만들어 집니다.
오늘은 여기까지 배우고 일기를 쓰고 있습니다. 오늘 하루 고생하셨습니다!