///라이브러리 ()
///프레임워크 ()
-현재시점 - 웹 -동적인 기능 -js
library, Framwork -> 미리 작성된 코드 모음
라이브러리
=> 특정 작업을 수행하거나, 특정기능을 제공하는 함수, 클래스
메써드의 모음
ex> jQuery, Moment.js three.js gsap
프레임워크 ====================> 프론트엔드 개발자
=> SPA 방식의 사이트 생성
웹사이트, 어플리케이션의 전체 아키텍쳐를 체계적으로 만들기 위한 기능의 집합.
=>문법구조구조가 엄격함
=>자바스크립트에 대한 이해도가 높아야함.
React, Angular Vue.js
웹사이트구현
MPA -> Mult Page Application => 서버가 일을 처리
index.html
회사소개.html
찾아오시는 길.html
갤러리.html
SPA -> Single Page Application
=> 서버도 일을 하지만
=> 프론트엔드에서 처리하는 일이 많아짐
=> 프론트엔드 개발자가 필요해짐
=> 2010 이후
index.html
한 페이지 내에서 자바스크립트로 내용만 교체
-> 하나의 페이지안에서 컨텐츠를 교체
웹 -------> 퍼블, 개발 -----------> javascript 중요
라이브러리
프레임워크를 사용하지 않는 자바스크립트 코드 => 바닐라 스크립트
jQuery -- library
jQuery.com => 공식사이트
write less, do more (적게 쓰고 많이 하자)
1.DOM을 선택하고 제어하고, 이벤트처리, 애니메이션 쉬움
단점
제이쿼리코드 ===> 자바스크립트코드로 변환 ===> 해석
프로그램 덩치가 커지는 경우 속도저하
제이쿼리코드 작성 ===> 자바스크립트로 변환
제이쿼리라이브러리가 변환
(웹사이트의 용량증가)
모바일같은 경우 로딩시간이 길어질 수 있음.
현재 Trend
=> 사용추세는 줄어들고 있음.
=> 초보자관점에서는 아주 매력적인 라이브러리
=> 아직도 대부분의 사이트에서 이용되고 있음
=> 제이쿼리는 새로운 언어가 아니라 자바스크립트
<style>
.box {
width: 100px;
height: 100px;
border: 5px solid #000;
margin-bottom: 30px;
}
</style>
</head>
<body>
<h1 class="tit">123</h1>
<h2 class="tit1">123</h2>
<ul class="list">
<li>내용</li>
<li>내용</li>
<li>내용</li>
<li>내용</li>
</ul>
<ul class="list1">
<li>내용</li>
<li>내용</li>
<li>내용</li>
<li>내용</li>
</ul>
<button class="btn1">버튼1</button>
<button class="btn2">버튼2</button>
<button class="btn3">버튼3</button>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
<!-- 1번 제이쿼리 코드를 해석해줄 라이브러리 가져오기 -->
<!-- 제이쿼리 공식사이트 jQurey.com 또는 cnd 사이트 -->
<script src="jQuery/jquery-3.6.4.min.js"></script>
<script>
//바닐라 스크립트
const tit = document.querySelector('.tit');
tit.style.display = 'none';
const list = document.querySelectorAll('.list li');
for (let i=0; i< list.length; i += 1) {
list[i].style.backgroundColor = 'red';
}
const btn1 = document.querySelector('.btn1');
const box1 = document.querySelector('.box1');
btn1.addEventListener('click',function(){
// window.alert('hi'); //window 생략가능...
box1.classList.add('on');
});
//제이쿼리 형식
const tit1 = $('.tit1');
tit1.hide();
const list1 = $('.list1 li');
list1.css('background-color', 'blue')
//제이쿼리로 DOM 가져오기
//$('CSS선택자') --> CSS 에 대한 지식있으면됨
//$('제이쿼리선택자') -> 공부필요
//제이쿼리 방식으로 변수선언시
//바닐라스크립트로 지정된 변수와 구별하기 위해
//변수명 앞에 $ 사용권장
// const $변수명 = $('선택자')
const $btn2 = $('.btn2');
$btn2.on('click',function(){
// alert("hello world");
//addClass('클래스명') 클래스추가
//removeClass('클래스명') 클래스삭제
$('.box2').addClass('on');
});
//제이쿼리 이벤트 만들기
// Ctrl + / 한줄주석
// Shift + Alt + A 여러줄 주석
/*
element.on ('이벤트명', function(){
실행코드;
});
*/
</script><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>
* {
margin:0;
padding:0;
box-sizing: border-box;
}
body {
padding: 50px;
}
.list {
border: 1px solid #f00;
}
.menubox {
width: 80%;
height: 200px;
background-color: #f00;
}
</style>
</head>
<body>
<button class="btn1">KR</button>
<ul class="list">
<li><a href="">언어</a></li>
<li><a href="">언어</a></li>
<li><a href="">언어</a></li>
</ul>
<button class="btn2">메뉴보기닫기</button>
<div class="menubox"></div>
<!-- jQeury lib load -->
<script src="jquery/jquery-3.6.4.min.js"></script>
<script>
// 변수선언 최소한 2번이상 반복사용할경우
// 리스트 숨기기
// hide()
// show()
$('.list').hide();
// 제이쿼리 전용
// 버튼을 클릭했을때 리스트 보이기
// slideDown() : Height값을 이용해서 애니메이션->show
// slideUp() : Height값을 0으로 만들면서 hide(애니메이션)
// slideDown + slideUp = slideToggle()
// slideToggle -> 안보이면 -> 보이게, 보이면 -> 사라지게
// 이펙트지속시간입력 ms로입력하기
// 1000 = 1초
// 500 = 0.7초
$('.btn1').on('click', function() {
$('.list').slideToggle(2000);
});
// 메뉴박스 숨기기
$('.menubox').hide();
// 버튼2클릭시 메뉴박스 제어하기
// fadeIn() : 서서히 나타남 Opacity이용한 애니
// fadeOut() : 서서히 사라짐 Opacity이용한 애니
// fadeToggle() -> in + out
$('.btn2').on('click', function() {
$('.menubox').fadeToggle(1500);
});
// show , hide
// slideUp , slideDown, SlideToggle
// fadeIn, fadeOut, fadeToggle
</script>
'프론트엔드 개발자 > JS' 카테고리의 다른 글
| 자바스크립트 javascript 11. OOP 객체지향프로그래밍 (0) | 2023.04.10 |
|---|---|
| 자바스크립트 javascript 10. 자바스크립트 슬라이드 만들기 총정리!!!!!!! (0) | 2023.04.07 |
| 자바스크립트 javascript 8. 동적으로 움직이는 서브메뉴 만들기 (0) | 2023.04.07 |
| 자바스크립트 javascript 7. 서브메뉴만들기 5 (심화편) (1) (0) | 2023.04.04 |
| 자바스크립트 javascript 7. 서브메뉴만들기 4 (업그레이드편) (0) | 2023.04.04 |
댓글