노력이 좋아서
<step31>'js_메소드, 객체'
zoaseo
2022. 5. 2. 11:59
1) 02arrayfor.html
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<script>
let arr = [1,2,3,4,5];
console.log(arr);
//배열의 반복문
for(let i=0; i<arr.length; i++){
console.log(arr[i]);
}
arr.forEach(a=>{
console.log(a);
})
for(let list of arr){
console.log(list);
}
let fruits = ['🍇','🍊','🍉','🍓'];
for(let a of fruits){
console.log(a);
}
fruits.push('🍌');
console.log(fruits);
fruits.pop();
console.log(fruits);
fruits.shift();
console.log(fruits);
fruits.unshift('🍌');
console.log(fruits);
</script>
</body>
</html>2) 03array_method.html
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<script>
//배열메소드
//01 splice 배열에서 선택한 요소를 제거, 추가
//arr.splice(start,num,ele..)
let arr = ['green','blue','red','yellow','pink'];
arr.splice(1,1,'tomato'); //1번 인덱스에서부터 1개만 제거 후 그 자리에 추가
console.log(arr);
//02 slice 배열에서 시작 인덱스부터 마지막 인덱스
//(마지막 인덱스는 제외)까지 반환
//구문 arr.slice(start,end)
let arr2 = [1,2,3,4,5,6,7,4];
let result = arr2.slice(1,4);
console.log(result);
console.log(arr2);
//03 indexOf 배열에서 해당 요소가 있는지 탐색 후 해당요소의
//첫번째 인덱스를 반환 (배열에 값이 없는 경우 -1을 반환)
//구문 arr.indexOf(item)
let result2 = arr2.indexOf(11);
console.log(result2);
//04 includes 배열에서 해당 값이 있는지 탐색 후 있으면 true
//없으면 false 반환
//구문 arr.includes(item)
let result3 = arr2.includes(5);
console.log(result3);
//05 join 배열 요소를 모두 합친 후 하나의 문자열을 만들어줌
let result4 = arr2.join(':');
console.log(result4);
//06 concat 배열을 합쳐서 새로운 배열을 반환
let arr3 = ['🍌','🍓'];
let arr4 = arr3.concat(['🍉','🍇']);
console.log(arr4);
</script>
</body>
</html>3) 01object.html
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<script>
//객체 리터럴방식
//객체의 종류
//배열
//함수
//날짜
//수학
//Boolean은 객체일 수 있음(new 키워드로 정의된 경우)
//숫자도 객체일 수 있음(new 키워드로 정의된 경우)
//문자열도 객체일 수 있음(new 키워드로 정의된 경우)
let num = new String('abc');
console.log(typeof num); //new 키워드로 정의했기 때문에 object 타입
let str = 'abc';
console.log(typeof str); //string 타입
let user = {
name: 'green',
age: 32,
}
user['hobby'] = '독서';
//접근 방식 2가지
console.log(user.name);
console.log(user['age']);
console.log(user);
delete user.age;
console.log(user);
for(let key in user){
console.log(user[key]);
}
//객체의 프로퍼티와 메소드
let cat = {
name: 'nabi',
age: 3,
weight: 4,
sleep: function(){
console.log('잠을 잔다');
},
eat: function(){
console.log('음식을 먹는다');
},
};
console.log(cat.name);
cat.sleep();
//객체 복사
let student1 = {
name: 'green',
};
let student2 = student1;
student1.name = 'blue';
console.log(student2);
let num1 = 10;
let num2 = num1;
num1 = 20;
console.log(num2);
console.log(student1 == student2);
console.log(student1 === student2);
let a = {};
let b = {};
console.log(a == b);
let clone = {};
for(let key in student1){
clone[key] = student1[key];
console.log(clone[key]);
}
console.log(clone === student1);
</script>
</body>
</html>4) 02objectcopy.html
<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
<script>
let user = {
name: 'green',
age: 30,
}
let clone = {};
//객체 복사
for(let key in user){
clone[key] = user[key];
}
console.log(clone);
user.name = 'blue';
console.log(clone.name);
let user2 = user;
</script>
</body>
</html>5) 03Math.html
<!DOCTYPE html>
<html lang="en">
<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;}
li { list-style: none;}
li {
width: 100px;
height: 100px;
background: pink;
border-radius: 50%;
text-align: center;
padding-top: 35px;
margin: 10px;
}
ul {
display: flex;
align-items: center;
}
h2 {
margin: 20px;
}
</style>
</head>
<body>
<h2>랜덤 번호 출력하기</h2>
<ul id="lotto">
</ul>
<script>
//1~10까지 랜덤한 숫자 출력하기
let result = Math.floor(Math.random()*10)+1;
console.log(result);
//1~45까지의 번호중
//6가지를 랜덤하게 출력
let lotto1 = Math.floor(Math.random()*45)+1;
let lotto2 = Math.floor(Math.random()*45)+1;
let lotto3 = Math.floor(Math.random()*45)+1;
let lotto4 = Math.floor(Math.random()*45)+1;
let lotto5 = Math.floor(Math.random()*45)+1;
let lotto6 = Math.floor(Math.random()*45)+1;
let lottoarr = [lotto1,lotto2,lotto3,lotto4,lotto5,lotto6];
console.log(lottoarr);
let li = ""
for (i=0; i<lottoarr.length; i++){
console.log(lottoarr[i]);
li = li + `<li>${lottoarr[i]}</li>`;
}
document.querySelector('#lotto').innerHTML = li;
let num = Math.floor(Math.random()*45)+1;
let lottoarr2 = [];
while(i<lottoarr2.length){
}
</script>
</body>
</html>6) 04lotto.html
<!DOCTYPE html>
<html lang="en">
<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 {
display: flex;
width: 100%;
height: 100%;
justify-content: center;
align-items: center;
}
h1 {
position: absolute;
top: 0;
left: 0;
}
ul {
width: 70%;
display: flex;
}
li {
width: 180px;
height: 180px;
border-radius: 50%;
background: lightblue;
list-style: none;
line-height: 180px;
text-align: center;
}
</style>
</head>
<body>
<h1>로또 번호 출력하기</h1>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<script>
let arrLotto = [];
for (let i=1; i<46; i++){
arrLotto.push(i); //45자리 배열 만들기
}
//1. arrLotto배열에서 랜덤한 값을 반환
for (let i=0; i<6; i++){
let ranNum = Math.floor(Math.random() * arrLotto.length); //ranNum에 변수 담기
document.querySelector(`li:nth-child(${i+1})`).innerHTML = arrLotto[ranNum];
arrLotto.splice(ranNum,1); //ranNum값을 1개 제거 (로또 중복 번호 제거하기)
}
console.log(arrLotto[ranNum])
</script>
</body>
</html>