본문 바로가기
IT To do and To was

22년 3월 25일_js파트 수업 + 웹디 공부

금호동짜세 2022. 3. 25.
728x90
반응형

금요일[시간 너무 빨라..]

1. 금일 수업 내용 공유

2. 웹디 코드 공유

 

1.

함수는 함수의 인수로 함수를 전달할 수 있다.
함수에 있어서 입력과 출력에다가 함수를 쓸 수 있다.

함수를 출력으로 리턴할 수 있음
function sandBox(val1, val2, func){
if (typeof func == "function")
func(va1, val2);
}

sandBox(3,4, function(v1, v2){
console.log(v1+ v2);
});

다른 코드의 인수로 넘겨주는 실행 가능한 코드를 콜백함수이라고 함  //

if(typeof func == "function"){//함수인지 체크

    }

[63line까지 참고]

객체는 속성을 가지고 있고 
property : 객체가 관리하는 정보
Method : 객체가 수행할 수 있는 기능(객체가 가지고 있는 함수)
로 나눌 수 있다.

기본적으로 자바 스크립트는 동적 타이틀 언어이다.

동적으로 속성 추가가 가능하다
//
json을 이용한 객체의 생성
[30line 까지 참고]

Binding -나중에 함

내장객체 Array
Array :  하나의 변수에 여러 개의 값을 저정하기 위한 javascript의 내장 객체
    java Script의 Array인덱스의 범위를 엄격하게 체크하지 않으며 C계역을 배열에 비해 다양한 방식으로 작동
 배열의 생성 : 배열 객체를 이용한 생성

concat- 여러배열을 하나로 연결
join(str) 배열 내의 객체들을 str구분자를 가지는 하나의문자열로 변환
pop() 배열의 맨 마지막 객체 추출하며 추출된 객체는 삭제
puch(iiem) 배열의 맨 마지막 객체들을 추가

splice - 원하는 위치의 요소를 삭제하거나 추가하는 메서드
인수의 갯수에 따라서 유동적으로 동작

delete 해당인덱스로부터 끝까지 요소를 반환 후 제거
splic(star[, count] 원하는 index위치의 요소를 삭제하거나 추가

reverse - 반전
split - 특정 구분자를 기준으로 문자열을 분리
130line 까지 참고


js는 객체 기반언어 prototype으로 클래스를 다룸

Array : 배열은 JavaScript 에서 가장 활용도가 높은 범용 객체
ES6이전부터 많은 메서드드이 추가되고 확장됨

forEach : 배열의 개별 요소들을 추출하여 콜백함수로 넘겨준다

map : 배열의 요소들을 콜백함수에 전달하여 새로운 배열을 만듦
배열의 각 요소를 변형하는 역할을 수행
var source = [1,2,3,4,5,6,7,8,9,10];
var multiply = source.map(item => item *2);
2,4,6 ...

reduce : 배열 자체를 변형함
일반적으로 배열의 값 하나로 줄인다.

전개 연산자
나열형  자료를 추출하거나 연결할 때 사용
사용법 : 배열이나 객체, 변수명 앞에...를 입력
제약: 배열, 객체, 함수 인자표현식([],{},())안에서만 활용 가능

 

2.

세로형 메뉴 전체풀다운 드롭다운 각각(js만 다름) 페이드
$(document).ready(function(){
    $('.main li').eq(0).fadeIn(0);
    var num = 0
    setInterval(function(){
        if(num <2){
            num++
        }else{
            num =0
        }
        $('.main li').fadeOut('slow');
        $('.main li').eq(num).fadeIn('slow');
    },3000);    
});
 상하 슬라이드

$(document).ready(function() {
    var num = 1;
    setInterval(function() {
        if (num < 3) {
            num++
            $('.main ul').animate({
                top: '-=300'
            }, 'slow');
        } else {
            num = 1
            $('.main ul').animate({
                top: 0
            }, 'slow');
        }
    }, 3000);
});
*{
    margin: 0; padding: 0;
    font-family: "맑은 고딕" sans-serif;
    font-size: 14px;
    color: #333;
}
img{border: none;}
a{text-decoration: none;}
li{list-style: none;}

body{
    width: 1200px;
    height: 600px;
}
.header{
    width: 200px;
    height: 600px;
    box-sizing: border-box;
    background-color: thistle;
}
.gnb{
    width: 100%;
    margin-top: 50px;
    height: 100%;
    box-sizing: border-box;
}
.gnb > ul{
    width: 100%;
    border-top: 2px solid #333;
}
.gnb > ul >li {
    padding: 3px;
    border-bottom: 2px solid #333;
}
.mainnav{
    display: block;
    width: 100%;
    height: 30px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
.subnav{
    display: none;
}
.subnav ul{
    width: 100%;
    height: 40px;
}
.subnav li{
    width: 100%;
    height: 40px;
}

.subnav a{
    display: block;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: #fff;
}
.gnb > ul >li:hover .mainnav{
    color: #fff; background-color: aqua;
}
.subnav a:hover{
    color: #fff; background-color: aqua;
}
*{
    margin: 0; padding: 0;
    font-family: "맑은 고딕" sans-serif;
    font-size: 14px;
    color: #333;
}
img{border: none;}
a{text-decoration: none;}
li{list-style: none;}

.header{
    width: 1200px;
    height: 60px;
    box-sizing: border-box;
    background-color: thistle;
    position: relative;
}
h1{
    float: left;
    width: 200px;
}
.gnb {
    margin-left: -100px;
    float: right;
    width: 500px;
    padding-left: 20px;
    height: 60px;
}
.gnb > ul > li {
    float: left;
}
.mainnav{
    display: block;
    width: 100px;
    height: 50px;
    padding-left: 10px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.subnav{
    display: block;
    width: 100%;
    height: 30px;
    text-align: center;
}
.subnav li{
    display: block;
    width: 100%;
   
}
.subnav a{
    display: block;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 15px;
}
.gnb > ul> li:hover .mainnav{
    color: #fff; background-color: tomato;
}
.subnav a:hover{
    color: #fff; background-color: tomato;
}
.gnbbg{
    display: none;
    background-color: thistle;
    width: 100%;
    height: 300%;
    position: absolute; top: 60px; left: 0;
    z-index: -1;
}
.subnav{
    display: none;
}
*{
    margin: 0; padding: 0;
    font-family: "맑은 고딕" sans-serif;
    font-size: 14px;
    color: #333;
}
img{border: none;}
a{text-decoration: none;}
li{list-style: none;}

.header{
    width: 1200px;
    height: 60px;
    box-sizing: border-box;
    background-color: thistle;
    position: relative;
}
h1{
    float: left;
    width: 200px;
}
.gnb {
    margin-left: -100px;
    float: right;
    width: 500px;
    padding-left: 20px;
    height: 60px;
}
.gnb > ul > li {
    float: left;
}
.mainnav{
    display: block;
    width: 100px;
    height: 50px;
    padding-left: 10px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.subnav{
    display: block;
    width: 100%;
    height: 30px;
    text-align: center;
}
.subnav li{
    display: block;
    width: 100%;
    background-color: thistle;
   
}
.subnav a{
    display: block;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 15px;
}
.gnb > ul> li:hover .mainnav{
    color: #fff; background-color: tomato;
}
.subnav a:hover{
    color: #fff; background-color: tomato;
}
.subnav{
    display: none;
}
*{
    margin: 0; padding: 0;
    font-family: "맑은 고딕" sans-serif;
    font-size: 14px;
    color: #333;
}
img{border: none;}
a{text-decoration: none;}
li{list-style: none;}

.header{
    width: 1200px;
    height: 60px;
    box-sizing: border-box;
    background-color: thistle;
    position: relative;
}
h1{
    float: left;
    width: 200px;
}
.gnb {
    margin-left: -100px;
    float: right;
    width: 500px;
    padding-left: 20px;
    height: 60px;
}
.gnb > ul > li {
    float: left;
}
.mainnav{
    display: block;
    width: 100px;
    height: 50px;
    padding-left: 10px;
    line-height: 50px;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

.subnav{
    display: block;
    width: 100%;
    height: 30px;
    text-align: center;
}
.subnav li{
    display: block;
    width: 100%;
    background-color: thistle;
   
}
.subnav a{
    display: block;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 15px;
}
.gnb > ul> li:hover .mainnav{
    color: #fff; background-color: tomato;
}
.subnav a:hover{
    color: #fff; background-color: tomato;
}
.subnav{
    display: none;
}
 옆 슬라이드
$(document).ready(function(){
    var num = 1;
    setInterval(function(){      
        if(num < 3){
            num++;
            $('.main ul').animate({
                left: '-=1200'
            },'slow');
        }else{
            num = 1;
            $('.main ul').animate({
                left: 0
            },'slow');
        }
    },3000);
});
  
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>세로형 메뉴 + tab연습</title>
    <link rel="stylesheet" href="css/common.css">
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
    <div class="header">
        <h1><a href="#"><img src="imges/footerrogo.png" alt="로고"></a></h1>
        <div class="gnb">
            <ul>
                <li><a href="#" class="mainnav">메인메뉴1</a>
                    <ul class="subnav">
                        <li><a href="#">서브메뉴1</a></li>
                        <li><a href="#">서브메뉴2</a></li>
                        <li><a href="#">서브메뉴3</a></li>
                        <li><a href="#">서브메뉴4</a></li>
                    </ul>
                </li>
                <li><a href="#" class="mainnav">메인메뉴2</a>
                    <ul class="subnav">
                        <li><a href="#">서브메뉴1</a></li>
                        <li><a href="#">서브메뉴2</a></li>
                        <li><a href="#">서브메뉴3</a></li>
                        <li><a href="#">서브메뉴4</a></li>
                    </ul>
                </li>
                <li><a href="#" class="mainnav">메인메뉴3</a>
                    <ul class="subnav">
                        <li><a href="#">서브메뉴1</a></li>
                        <li><a href="#">서브메뉴2</a></li>
                        <li><a href="#">서브메뉴3</a></li>
                        <li><a href="#">서브메뉴4</a></li>
                    </ul>
                </li>
                <li><a href="#" class="mainnav">메인메뉴4</a>
                    <ul class="subnav">
                    <li><a href="#">서브메뉴1</a></li>
                    <li><a href="#">서브메뉴2</a></li>
                    <li><a href="#">서브메뉴3</a></li>
                    <li><a href="#">서브메뉴4</a></li>
                </ul>
            </li>
            </ul>
        </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>세로형 메뉴 + tab연습</title>
    <link rel="stylesheet" href="css/common.css">
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
    <div class="header">
        <h1><a href="#"><img src="imges/footerrogo.png" alt="로고"></a></h1>
        <div class="gnb">
            <ul>
                <li><a href="#" class="mainnav">메인메뉴1</a>
                    <ul class="subnav">
                        <li><a href="#">서브메뉴1</a></li>
                        <li><a href="#">서브메뉴2</a></li>
                        <li><a href="#">서브메뉴3</a></li>
                        <li><a href="#">서브메뉴4</a></li>
                    </ul>
                </li>
                <li><a href="#" class="mainnav">메인메뉴2</a>
                    <ul class="subnav">
                        <li><a href="#">서브메뉴1</a></li>
                        <li><a href="#">서브메뉴2</a></li>
                        <li><a href="#">서브메뉴3</a></li>
                        <li><a href="#">서브메뉴4</a></li>
                    </ul>
                </li>
                <li><a href="#" class="mainnav">메인메뉴3</a>
                    <ul class="subnav">
                        <li><a href="#">서브메뉴1</a></li>
                        <li><a href="#">서브메뉴2</a></li>
                        <li><a href="#">서브메뉴3</a></li>
                        <li><a href="#">서브메뉴4</a></li>
                    </ul>
                </li>
                <li><a href="#" class="mainnav">메인메뉴4</a>
                    <ul class="subnav">
                    <li><a href="#">서브메뉴1</a></li>
                    <li><a href="#">서브메뉴2</a></li>
                    <li><a href="#">서브메뉴3</a></li>
                    <li><a href="#">서브메뉴4</a></li>
                </ul>
            </li>
            </ul>
        </div>
        <div class="gnbbg"></div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>세로형 메뉴 + tab연습</title>
    <link rel="stylesheet" href="css/common.css">
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
    <div class="header">
        <h1><a href="#"><img src="imges/footerrogo.png" alt="로고"></a></h1>
        <div class="gnb">
            <ul>
                <li><a href="#" class="mainnav">메인메뉴1</a>
                    <ul class="subnav">
                        <li><a href="#">서브메뉴1</a></li>
                        <li><a href="#">서브메뉴2</a></li>
                        <li><a href="#">서브메뉴3</a></li>
                        <li><a href="#">서브메뉴4</a></li>
                    </ul>
                </li>
                <li><a href="#" class="mainnav">메인메뉴2</a>
                    <ul class="subnav">
                        <li><a href="#">서브메뉴1</a></li>
                        <li><a href="#">서브메뉴2</a></li>
                        <li><a href="#">서브메뉴3</a></li>
                        <li><a href="#">서브메뉴4</a></li>
                    </ul>
                </li>
                <li><a href="#" class="mainnav">메인메뉴3</a>
                    <ul class="subnav">
                        <li><a href="#">서브메뉴1</a></li>
                        <li><a href="#">서브메뉴2</a></li>
                        <li><a href="#">서브메뉴3</a></li>
                        <li><a href="#">서브메뉴4</a></li>
                    </ul>
                </li>
                <li><a href="#" class="mainnav">메인메뉴4</a>
                    <ul class="subnav">
                    <li><a href="#">서브메뉴1</a></li>
                    <li><a href="#">서브메뉴2</a></li>
                    <li><a href="#">서브메뉴3</a></li>
                    <li><a href="#">서브메뉴4</a></li>
                </ul>
            </li>
            </ul>
        </div>
    </div>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>세로형 메뉴 + tab연습</title>
    <link rel="stylesheet" href="css/common.css">
    <script src="js/jquery-1.12.3.js"></script>
    <script src="js/common.js"></script>
</head>
<body>
    <div class="header">
        <h1><a href="#"><img src="imges/footerrogo.png" alt="로고"></a></h1>
        <div class="gnb">
            <ul>
                <li><a href="#" class="mainnav">메인메뉴1</a>
                    <ul class="subnav">
                        <li><a href="#">서브메뉴1</a></li>
                        <li><a href="#">서브메뉴2</a></li>
                        <li><a href="#">서브메뉴3</a></li>
                        <li><a href="#">서브메뉴4</a></li>
                    </ul>
                </li>
                <li><a href="#" class="mainnav">메인메뉴2</a>
                    <ul class="subnav">
                        <li><a href="#">서브메뉴1</a></li>
                        <li><a href="#">서브메뉴2</a></li>
                        <li><a href="#">서브메뉴3</a></li>
                        <li><a href="#">서브메뉴4</a></li>
                    </ul>
                </li>
                <li><a href="#" class="mainnav">메인메뉴3</a>
                    <ul class="subnav">
                        <li><a href="#">서브메뉴1</a></li>
                        <li><a href="#">서브메뉴2</a></li>
                        <li><a href="#">서브메뉴3</a></li>
                        <li><a href="#">서브메뉴4</a></li>
                    </ul>
                </li>
                <li><a href="#" class="mainnav">메인메뉴4</a>
                    <ul class="subnav">
                    <li><a href="#">서브메뉴1</a></li>
                    <li><a href="#">서브메뉴2</a></li>
                    <li><a href="#">서브메뉴3</a></li>
                    <li><a href="#">서브메뉴4</a></li>
                </ul>
            </li>
            </ul>
        </div>
    </div>
</body>
</html>
    
$(document).ready(function(){

    $('.gnb > ul > li').hover(function(){
        $(this).find('.subnav').fadeIn(0);
    },function(){
        $('.subnav').fadeOut(0);
    });
});
$(document).ready(function(){
    $('.gnb').hover(function(){
        $('.subnav, .gnbbg').stop().fadeIn(0);
    },function(){
        $('.subnav, .gnbbg').stop().fadeOut(0);
    });
});
$(document).ready(function(){
    $('.gnb').hover(function(){
        $(this).find('.subnav').fadeIn(0);
    },function(){
        $(this).find('.subnav').fadeOut(0);
    });
});
$(document).ready(function(){
    $('.gnb>ul>li').hover(function(){
        $(this).find('.subnav').fadeIn(0);
    },function(){
        $(this).find('.subnav').fadeOut(0);
    });
});
    

 

 

. 행복하기✔

. 안좋고 거슬렸던 일 3가지 기재(머리가 좀 아프다, 떨어질까 두렵다, 수업이 어려웠다)

728x90
반응형
저작자표시

'IT To do and To was' 카테고리의 다른 글

22년 3월 27일_휴일을 즐겼습니다...ㅎㅎ  (1) 2022.03.28
2022년 3월 26일_웹디자인기능사 실기 후기 2022 1회편  (1) 2022.03.27
22년 3월 24일_ D-2.. 불안하다  (0) 2022.03.24
22년 3월 23일_웹 2번째 시간 및 웹디..공부..  (0) 2022.03.23
22년 3월 22일_웹 class 시작  (0) 2022.03.22

'IT To do and To was' 관련글

티스토리툴바