728x90
반응형
오늘의 블로그 과제는 코딩일기입니다^^
오전엔 함수 유형 복습과 추가로 함수 유형과 종류에 대해 배웠습니다.
오후에는 mysql과 레이아웃을 했는데 오랜만에 레이아웃을 하니 기억이 잘안나더라고요...;;
특히 함수는 내용이 추가될수록 너무너무 어렵네요.. 아직은 이해가 잘 안가는것도 있지만 계속해서 쓰다보면 언젠가 이해하고 쓰는날이 오겠지요?
복습 열심히 해야겠습니다!
오늘 배운 함수 유형과 함수 종류
함수 유형 : 객체 생성자 함수
{
function func(num, name, com){
this.num = num;
this.name = name;
this.com = com;
this.result = function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.<br>`);
}
}
// 인스턴스
const info1 = new func("100", "함수", "실행");
const info2 = new func("200", "자바스크립트", "실행");
const info3 = new func("300", "리엑트", "실행");
// 실행문
info1.result();
info2.result();
info3.result();
}함수 유형 : 프로토타입 함수
{
function func(num, name, com){
this.num = num;
this.name = name;
this.com = com;
};
func.prototype.result = function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.<br>`);
}
// 인스턴스
const info1 = new func("101", "함수", "실행");
const info2 = new func("201", "자바스크립트", "실행");
const info3 = new func("301", "리엑트", "실행");
// 실행문
info1.result();
info2.result();
info3.result();
}함수 유형 : 객체 리터럴 함수
{
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}되었습니다.<br>`);
},result2: function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.<br>`);
},result3: function(){
document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.<br>`);
}
}
// 인스턴스
const info1 = new func("102", "함수", "실행");
const info2 = new func("202", "자바스크립트", "실행");
const info3 = new func("302", "리엑트", "실행");
// 실행문
info1.result1();
info2.result2();
info3.result3();
}함수 종류 : 즉시 실행 함수
{
(function (){
document.write("500. 함수가 실행되었습니다.<br>");
})();
(() => {
document.write("501. 함수가 실행되었습니다.<br>")
})();
}함수 종류 : 파라미터 함수
{
function func(str = "600. 함수가 실행되었습니다.<br>"){
document.write(str);
}
func();
}함수 종류 : 아규먼트 함수
{
function func(str1, str2){
document.write(arguments[0]);
document.write(arguments[1]);
}
func("함수실행1", "함수실행2<br>");
}함수 종류 : 재귀함수
{
function func(num){
if(num<=1){
document.write("함수가 실행되었습니다.");
} else {
document.write("함수가 실행되었습니다.");
func(num-1);
}
}
func(10);
function animation(){
document.write("애니메이션이 실행되었습니다.");
requestAnimationFrame(animation);
}
// animation();
}함수 종류 : 콜백 함수
{
function func(){
document.write("2.함수 실행");
}
function callback(str){
document.write("1.함수 실행");
str();
}
callback(func);
}
C-1 레이아웃
웹디자인 기능사 시험문제인 C-1 예제를 직접 만들어 보았습니다.
<!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>레이아웃(C-1)</title>
<style>
* {
margin: 0 auto;
padding: 0;
}
#wrap {
display: flex;
width: 1000px;
}
#header {
width: 200px;
height: 650px;
}
#header .logo {
width: 100%;
height: 20%;
background-color: #f5dbdb;
}
#header .nav {
width: 100%;
height: 80%;
background-color: #f6bcbc;
}
#section {
width: 800px;
height: 650px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#section .slider {
width: 100%;
height: 350px;
background-color: #c78989;
}
#section .article {
width: 100%;
height: 200px;
display: flex;
}
#section .article .cont1{
width: 33.3333%;
height: 200px;
background-color: #bc5a5a;
}
#section .article .cont2{
width: 33.3333%;
height: 200px;
background-color: #d05555;
}
#section .article .cont3{
width: 33.3333%;
height: 200px;
background-color: #9d3f3f;
}
#footer {
width: 800px;
height: 100px;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
#footer .foot1 {
width: 20%;
height: 100px;
background-color: #cc2222;
}
#footer .foot2 {
width: 80%;
height: 50px;
background-color: #e71b1b;
}
#footer .foot3 {
width: 80%;
height: 50px;
background-color: #ad1111;
}
</style>
</head>
<body>
<div id="wrap">
<div id="header">
<div class="logo">로고</div>
<div class="nav">메뉴</div>
</div>
<div id="section">
<div class="slider">이미지 슬라이드</div>
<div class="article">
<div class="cont1">공지사항</div>
<div class="cont2">배너</div>
<div class="cont3">바로가기</div>
</div>
<div id="footer">
<div class="foot1">로고</div>
<div class="foot2">하단메뉴</div>
<div class="foot3">Copyright</div>
</div>
</div>
</div>
</body>
</html>