lotto.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: 100vh;
justify-content: center;
align-items: center;
}
h1{
position: absolute;
top: 0;
left: 0;
}
ul {
width: 70%;
display: flex;
}
li {
list-style: none;
width: 180px;
height: 180px;
background: lightblue;
border-radius: 50%;
/* 숫자 중앙 배치 ↓ */
line-height: 180px;
text-align: center;
}
</style>
</head>
<body>
<h1>로또번호 출력하기</h1>
<ul>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
<li>0</li>
</ul>
<script>
let arrLotto = []; // [1, 2, 3, ~ 45] 적어줘도됨
for (let i=1; i<46; i++) {
arrLotto.push(i);
}
// 1) arrLotto 배열에서 랜덤한 값을 반환
// arrLotto[0]~arrLotto[44] //마지막 인덱스
for (let i=0; i<6; i++) {
let ranNum = Math.floor(Math.random() * arrLotto.length); // 0~44번, 마지막인덱스까지 랜덤값 반영
document.querySelector(`li:nth-child(${i+1})`) // nth-child는 1번부터여서 +1해주기
.innerHTML = arrLotto[ranNum];
arrLotto.splice(ranNum, 1); // 해당 인덱스의 한개만 지워
}
// console.log(ranNum);
// console.log(arrLotto[ranNum]); //1~45까지, 인덱스 위치의 값을 받아옴, 인덱스3 → 숫자4
</script>
</body>
</html>
property.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, 02) 계산된 속성 ( . / [ ' ' ] ) , 리터럴 방식
// key에 한글도 작성가능, 동작은 함
let key = "likes birds"
let minyung = {
name : '민영',
age : 32,
hasJob : true,
// likes birds : true, → 두가지 작성시 오류발생, 변수 이용하기
// [] , 계산된 프로터티
[key] : true,
}
console.log(minyung[key]); // true
console.log(minyung.key); // undefined
function printValue(obj, key) {
console.log(obj.key);
console.log(obj[key]);
}
// key 값은 string 타입으로 적어주기 → 'name' / value 자리는 다 올 수 있음
printValue(minyung, 'name');
// ■ 04) 생성자 함수
function Person (name, age) {
this.name = name ;
this.age = age ;
}
let person1 = new Person ('aaaa', 30);
console.log(person1);
// ■ 05) in 연산자
console.log('name' in person1); // true or false
console.log('age' in person1);
// ■ 06) 객체의 순환
for (let key in person1) {
console.log(key); // key 값만 출력 : name 과 age
console.log(person1[key]); // value 값을 출력 : aaaa, 30
}
// ■ 07) 객체 복사
let dog1 = {
name : '구름' ,
age : 3,
color : 'white',
}
let dog2 = {};
for (let key in dog1) {
dog2[key] = dog1[key];
}
console.log(dog2);
dog1.name = '흰둥이'; // 이름 변경
console.log(dog2); // dog1 이름 변경되어도 같이 변경되지 않음
let dog3 = Object.assign({name: 'abc', weight : 500}, dog1);
// key값이 있어도 뒤에 온 객체의 값으로 덮어씌워짐
console.log(dog3);
let fruit1 = {color : 'red'};
let fruit2 = {color : 'blue', size : 'big'};
let fruit3 = Object.assign({}, fruit1, fruit2);
console.log(fruit3); // 더 뒤에 나온 값으로 덮어씌워짐
// ▼ 결과
// color: "blue"
// size: "big"
// ■ 08)
let objkewarr = Object.keys(dog3); // key 해당 항목만 배열로 반환
console.log(objkewarr);
// ▼ 결과
// 0: "name"
// 1: "weight"
// 2: "age"
// 3: "color"
// length: 4
let objkewarr1 = Object.entries(dog3); // key, value 반환
console.log(objkewarr1);
// ▼ 결과 , 2중배열, 2차원배열(배열 안에 배열)
// 0: (2) ['name', '흰둥이']
// 1: (2) ['weight', 500]
// 2: (2) ['age', 3]
// 3: (2) ['color', 'white']
// length: 4
let arr2 = [1, 'name', true, undefined, [0, 1], {name:'min', age:30}]
console.log(arr2);
</script>
</body>
</html>
