// 파일명: dotGallery.html
<!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>
/* 1. mask 영역 가로값, 세로값, 넘치는 영역 자르기
2. box_wrap는 실제 버튼을 클릭시 움직이는 영역
3. 이미지 박스 영역
4. 버튼영역 */
*{
margin: 0;
padding: 0;
}
ul, li {
list-style: none;
}
.mask{
width: 70vw;
height: 60vh;
margin: 0 auto;
overflow: hidden;
position: relative;
}
.boxWrap{
width: 350vw;
height: 60vh;
position: absolute;
}
.box{
width: 70vw;
height: 60vh;
float: left;
text-align: center;
line-height: 60vh;
}
// 여기서 박스 색 지정하는 대신 script에서 배열로 색 나열후, index로 지정
/* .box:nth-child(1){
background-color: aliceblue;
}
.box:nth-child(2){
background-color: rgb(218, 238, 255);
}
.box:nth-child(3){
background-color: rgb(160, 210, 255);
}
.box:nth-child(4){
background-color: rgb(106, 186, 255);
}
.box:nth-child(5){
background-color: rgb(42, 155, 255);
} */
.buttonWrap{
width: 320px;
height: 40px;
/* background-color: brown; */
position: absolute;
left: 50%;
margin-left: -160px;
bottom: 20px;
text-align: center;
}
.button{
width: 40px;
height: 40px;
background-color: white;
float: left;
margin-left: 20px;
/* 정사각형일떄 가로세로 크기값에 1/2값 정원 만들기 */
border-radius: 20px;
text-align: center;
line-height: 40px;
}
.on{
background-color: beige;
color: brown;
}
</style>
<script src="jquery-3.6.3.js" ></script>
<script src="jquery-ui.js" ></script>
<script>
// 1. 각 버튼의 인덱스값을 사용
// 버튼을 클릭시 자신의 인덱스값으로 움직임
// 인덱스가 3이면 3*이미지의 가로값 애니메이션이 지정됨
// 2. 클릭이 되는 영역의 활성화
// 해당 인덱스일때 활성화 스타일 추가
$(document).ready(function(){
let bg = ['aliceblue', 'rgb(218, 238, 255)','rgb(160, 210, 255)','rgb(106, 186, 255)','rgb(42, 155, 255)']
// 바로 vw쓰면 안먹힘.. vw는 css에서 기본값
let vw=$(window).width();
let allClick = 0;
$(".box").css({
background:function(index){
return bg[index]
}
})
$(".button").click(function(){
allClick=$(this).index();
// console.log(allClick);
$(".boxWrap").animate({
left : -vw*0.7*allClick
},500)
// $(this).addClass("on");
$(".button").removeClass("on");
$(".button").eq(allClick).addClass("on");
});
});
</script>
</head>
<body>
// 1. 마스크영역
// 2. 움직이는 영역(boxWrap)
// 3. boxWrap > 5개의 박스(이미지)
// 4. 5개의 버튼 위치
<div class="mask">
<div class="boxWrap">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>
<div class="box">
5
</div>
</div>
<ul class="buttonWrap">
<li class="button">1</li>
<li class="button">2</li>
<li class="button">3</li>
<li class="button">4</li>
<li class="button">5</li>
</ul>
</div>
</body>
</html>함수
- 선언적 함수
선언 위치 상관없이 호출 사용 - 익명 함수
선언후에 사용 호출 가능 - 함수 안에 있는 결과 값을 넘겨 받을때 사용
return - 함수의 결과값에 영향을 주는 것들
매개변수(인수)
매개 갯수에 상관없음
- 매개 변수가 없는 형태
function nameOUT(){
console.log('이름');
}
nameOUT();- 매개 변수가 있는 형태
function nameOUT(name){
console.log(name);
}
nameOUT();
nameOUT('Jane');
nameOUT('Jane','Tom')-
var 선언
function 함수의 영역을 넘지 못함 -
let, const 선언
블럭형식{}
{}밖에서 선언시 전역 사용 가능 -
화살표 함수
let add=function(num1){
return num1
}
let add=(매개변수)=>{
return num1
}
// 리턴문이 하나일때 {} => ()
let add=(매개변수)=>(return num1)
// return 생략
let add=()=>num1
// 다른 함수 구동 내용이 여러줄이라면 {} 삽입후 작성하기객체{}
객체는 키와 값으로 구성 => 키:값
const person = {
firstName:'Cindy',
lastName:'Shin',
age:31,
};
console.log(person);- 접근
객체.키명
객체["키명"]
console.log(person.firstName);
console.log(person['lastName']);- 추가
키, 값을 추가
객체명.추가키명='값'
person.gender='female';
person['gender']='female';
console.log(person);- 제거
delete.객체명.키명
delete person.age;
console.log(person);- 단축 프로퍼티 작성법
const name='CindyShin'
const persona = {
name: name,
firstName: 'Cindy',
lastName: 'Shin',
age: 31,
};
console.log(persona);
function makeObject(age){
return {
name: 'Tom',
age: age,
hobby: 'football',
}
}
// 위와 동일
// function makeObject(age){
// return {
// name: 'Tom',
// age,
// hobby: 'football',
// }
// }
let age_30 = makeObject(30);
console.log(age_30);- 오브젝트의 프로퍼티 존재 여부 확인
키명 in 객체명
=> 선택한 객체에 키가 있는지를 확인
const personb = {
name: name,
firstName: 'Cindy',
lastName: 'Shin',
age: 31,
};
// console.log(personb.hobby); 없는것 확인하면 undefined
// age가 있는지 확인
console.log('age' in personb);
// => 어떤 값이 넘어올지 확신하지않을때- 문제: 나이가 들어있지 않거나 나이가 20세 이하이면 false, 나이값이 있고 20세 이상이면 true가 출력되게 만들기
객체 정의 후 사용, 판단할 수 있는 함수로 객체를 매개변수 받아 확인하기
const personC = [
{name: 'a', age: 5},
{name: 'b' },
{name: 'c', age: 20},
{name: 'd', age: 24},
]
// 배열내 객체는 매개변수로 읽어올수 없나?
// 함수안에 넣는 매개변수로는 객체를 읽어올 필요가 없음! 매개변수로 넣는 이름은 내가 마음대로 정하는것.
// 마지막에 콘솔로 읽어올때 매개변수에 배열내 객체를 불러오면 되니까
const checkAge = (person) => {
if(person.age>=20 && person.age) {
return true;
}
return false;
};
console.log(`이거->`, checkAge(personC[3]));
// a&&b 둘다 참일때 참, a||b 둘다 거짓일때 거짓
// 1. 성인인지 아닌지를 판단하는 함수
function isA(user){
//성인 판단
if(("age" in user) && user.age>=20 ){
return true;
}
return false;
}
// user = a1객체, a2객체 할당
// 함수호출시 (객체명);
const Aom = {
name:'Aom',
age:30
}
const Bom = {
name:'Bom',
age:2
}
const Com = {
name:'Com',
// age:21
}
console.log(isA(Com));- 매서드: 객체 프로퍼티에 할당된 함수
객체에 함수 형식 삽입후 호출
const superman={
name:'superman',
age:33,
fly:function(){
console.log('날아갑니다.');
}
}
// function 생략가능 => fly:(){}의 형태
superman.fly();- 객체와 메서드의 관계
const userA={
name:'Tom',
sayHello:function(){
console.log(`Hello, I'm ${이름}`);
}
}
// => 객체안 함수(메서드) 객체 안에 있는 키를 활용할때
// => 객체 접근 객체명.키명
const userB={
name:'Tom',
// sayHello:function(){
// console.log(`Hello, I'm ${userB.name}`);
// }
// => 내 객체 안에를 해당 객체명 대신 영역한정을 위해
// => this
sayHello:function(){
console.log(`Hello, I'm ${this.name}`);
}
}
console.log(userB.sayHello());
// 화살표 함수 안에서는 this 개념 사용 안함
// => 화살표 함수 안에서 this를 사용한다면 외부에서 값을 가져옴
let boy = {
name: 'Tom',
sayHello:() => {
console.log(this);
// => 화살표 함수 안에서 this는 전역 객체를 찾음
// => 브라우저 환경일때 window
// => node.js 에서는 global
}
}
boy.sayHello();
// this를 사용하지 않을때 문제 발생확인
let userC={
name:'Tom',
sayHello:function(){
console.log(`Hello, I'm ${userC.name}`);
}
}
let man = userC;
// => man.name, userC.name
console.log(man.name);
console.log(userC.name);
userC=null;
// =>userC로 객체 접근 차단
// sayHello함수에서 userC를 this로 바꾸면 정상동작됨!!
// =>접근명이 달라져도 오류없이 객체에 접근
man.sayHello();변수 호이스팅
var name;
console.log(name);
name = 'Tom';
console.log(name);
var name = 'Tom';
console.log(name);
// => var name; 선언 단계를 먼저 로드
// => 실행코드를 진행하는 것을 호이스팅
var name;
console.log(name);
name='name';
let letName;
console.log(letName);
letName = 'Jane';
// 오류 발생, const는 처음부터 선언과 초기화단계가 동시에 이루어져야함
const constName;
console.log(constName);
constName = 'Mike'- 변수 실행 순서
- 선언
- 초기화
- 할당
// TDZ
let age=30;
// 함수가 생성되면 새로운 TDZ가 생성됨
function ageF(){
// 함수 안쪽에서 age찾다가 없으면 밖으로 나가는것
console.log(age);
// 아래를 입력하면 age가 있어도 못찾아서 밖으로 나가지도 못하는것
// let age = 20;
}
ageF();생성자 함수
- 회원가입, 상품의 목록
=> 작업을 하다보면 객체를 반복적으로 작업해야 할 경우 생성자 함수를 사용해서 동일 형태의 객체를 만들 수 있음
=> 일반함수와 사용시 구분하기 위해서 생성자 함수의 함수명은 첫글자를 대문자로 작성
=> new연산자를 사용해서 호출
let user = {
name: 'Tom',
age: 30,
}
// 위 형태의 객체를 여러개 작성하는 생성자 함수
function User(name, age) {
// this{} 구동되는 형식일뿐 작성내용 아님
this.name=name;
this.age=age;
// return this 구동되는 형식일뿐 작성내용 아님
}
let user1 = new User('Mike', 20);
let user2 = new User('Jane', 30);
let user3 = new User('Sam', 40);
console.log(user1);
console.log(user2);
console.log(user3);
// console.log(User('Mike',20));
// => 생성자 함수는 new연산자로 호출해야 함
// => 일반함수로 호출 안됨- 상품과 상품의 가격 디비를 작성
- 상품 인형 가격 1000
- 상품 가방 가격 3000
- 상품 지갑 가격 4000
- 상품 신발 가격 5000
// 객체를 만들기
function Product(name, price) {
this.name = name;
this.price = price;
// + 추가
// product3.showPrice();
// 호출하면 가격은 4000원 입니다. 라고 출력
this.showPrice = function() {
document.write(`가격은 ${this.price}원 입니다,`);
}
}
let product1 = new Product('인형', 1000);
let product2 = new Product('가방', 3000);
let product3 = new Product('지갑', 4000);
let product4 = new Product('신발', 5000);
console.log(product3);
product2.showPrice();객체 매서드
- computed property(계산된 프로퍼티)
let a = 'name';
let b = 'age';
let user = {
[a]: 'Tom',
[b]: 30,
[1+3]:4
}
console.log(user);- 생성자 함수를 사용
첫번째 매개변수가 Key,
두번째 매개변수가 value가 되도록 객체를 만들기
function Exercise (key, value) {
// this.key = value; 키명이 반영 안됨
// [this.key] = value; 키명이 반영 안됨
return {
[key]:value
}
}
let exercise1 = new Exercise('키', '값');
console.log(exercise1);- 객체 복제
Object.assign({},복제할 객체명);
let person = {
name: 'Jane',
age: 20,
}
// let clonePerson = person;
// => 복사가 아닌 객체 내용이 저장된 주소의 참조값만 복사됨
// person.naeme="Tom";
// console.log(person);
// console.log(clonePerson);
let clonePerson = Object.assign({},person);
// => {} 객체에 초기값
// => person 객체가 {}로 인해 하나 복제됨
person.name = "Mike";
console.log(person);
console.log(clonePerson);
// => person과 clonePerson은 서로 다른 객체임- 객체 합치기
Object.assign(합치는 객체1, 합치는 객체2, ...);
let info1 = {
name: 'Jane',
}
let info2 = {
age: 30,
}
let info3 = {
gender: 'female',
}
let newObject = Object.assign(info1, info2, info3);
console.log(newObject);- key, value를 배열로 반환하는 방법
- key만 배열로 반환
Object.keys(); - value만 배열로 반환
Object.values(); - key, value를 둘다 배열로 반환
Object.entries(); - key, value 쌍으로 묶은 배열을 객체로 반환
Object.fromEntries();
let human = {
name:'Jane',
age:20,
gender:'female'
}
// key만 배열로 반환
let keyArr = Object.keys(human);
console.log(keyArr);
// value만 배열로 반환
let valueArr = Object.values(human);
console.log(valueArr);
// key, value를 둘다 배열로 반환
let entArr = Object.entries(human);
console.log(entArr);
// key, value 쌍으로 묶은 배열을 객체로 반환
let arr = [
['name','Tom'],
['age',40],
['gender','male']
]
let newArrObject = Object.fromEntries(arr);
console.log(newArrObject);- 문제 각 키와 값 매개변수로 하는 생성자 함수를 만들어 3개의 객체를 만들고
만든 객체 3개를 하나로 합치기
각 개체 출력
합친 객체 출력
function Ex (key, value) {
return {
[key]:value
}
}
let ex1 = new Ex('name', 'a');
let ex2 = new Ex('age', '20');
let ex3 = new Ex('gender', 'male');
let newEx = Object.assign({}, ex1, ex2, ex3);
// => Object.assign() 작업시 동일한 키는 합치기 작업시 덮어쓰기됨
console.log(ex1);
console.log(ex2);
console.log(ex3);
console.log(newEx);- ex3에 새로운 키와 내용을 추가 한 후 합치기 작업하기
ex3.hobby = 'football';
console.log(ex3);
let newEx1 = Object.assign({}, ex1, ex2, ex3);
console.log(newEx1);
// => 다른 키가 있으면 다른 키는 추가되면서 합쳐짐
keep going