students.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>
// name, age, score1, score2 - 값을 가진 객체 여러개 만들기
// ■ 생성자 함수 만들기, 첫글자 대문자
function Student (name, age, score1, score2) {
// this = {}
this.name = name;
this.age = age;
this.score1 = score1;
this.score2 = score2;
// return this;
}
// new Student() // 각각의 값을 입력하면 각각의 변수가 만들어짐
const students = [ // 배열 안에 5개의 객체,
// 정보들은 다양한 값을 가지고 여러명이다, 배열로 관리하는게 편함
new Student('A', 29, 45, 50),
new Student('B', 30, 60, 70),
new Student('C', 28, 90, 80),
new Student('D', 27, 85, 65),
new Student('E', 32, 80, 90),
];
console.log(students);
// ■ 01. score1이 80점 이상인 학생의 이름(name)을 출력
// ●● find는 하나만 찾음
// ●● filter는 해당하는 조건 다 찾음,
// fliter(함수), 함수의 첫매개변수자리는 값이 순차적으로 들어옴(배열을 순차적으로 돈다.)
// student라는 이름으로 값 받음(값의 그릇)
// let result = students.filter(student=> {
// return student.score1 >= 80;
// })
// ▼▼ 생략가능 ↓ 체이닝 ★
let result = students.filter(student=> student.score1 >= 80).map(student=> student.name);
// result = result.map(student=>{ // result = → result에 결과담기
// return student.name; // 이름만 출력, map 사용
// })
console.log(result);
// ▼▼ 결과
//['C', 'D', 'E']
// ■ 02. score2만 배열로 출력
let result2 = students.map(student => student.score2); // {}, return 생략
console.log(result2);
// ▼▼ 결과
// [50, 70, 80, 65, 90]
// ■ 03. score1의 점수가 90점인 학생 객체 출력
let result3 = students.find(student=> student.score1 === 90);
console.log(result3);
// ▼▼ 결과
// Student {name: 'C', age: 28, score1: 90, score2: 80}
// ■ 04. 학생들의 score2를 문자열로 만들어서 출력
// ↓ 배열로 만들어줌 / ↓ 체이닝 ★
let result4 = students.map(student => student.score2).join(',');
// result4 = result4.join(','); // 문자열로 출력 ★
console.log(result4);
// ■ 05. some() true, false 반환
// 학생배열에서 score1의 점수가 60점이하가 있는지 확인
let result5 = students.some(student => student.score1 <= 60 );
console.log(result5);
</script>
</body>
</html>
method_this.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>
<ul>
<li onclick="liView(this)">menu1</li>
<li onclick="liView(this)">menu2</li>
<li onclick="liView(this)">menu3</li>
<li onclick="liView(this)">menu4</li>
</ul>
<!-- this는 클릭대상 -->
<div> <img src="../img/img_lights1.jpg" alt="안녕하세요" onclick="imgSrc(this)"> </div>
<script>
// this는 기본적으로 window 바라보지만
// (3) 객체 안 메서드, (5) 이벤트리스너가 바꿀 수 있음
// (5) 이벤트 사용시 this, 클릭 대상이 누군지 this가 찾아줌
function liView(a) { // 내부적으로 이벤트가 발생한 곳으로 시선 돌림
console.log(a);
// console.log(a.innerHTML);
}
function imgSrc(img) {
console.log(img.src);
console.log(img.alt);
}
// (1)
let user = {
name : 'green',
age : 30,
say () { // 메서드
console.log(user.name); // 그냥 name만 해선 안나옴
}
}
console.log(user.name);
user.say();
// (2) 메서드 안 this.name
let user2 = {
name : 'red',
age : 30,
say : function () {
console.log(this.name); // this로 변경가능, this는 객체를 가르킴 ★
}
}
console.log(this.name); // 안나옴 ☆
console.log(user2.name);
user2.say(); // red ☆
console.log(this); // window 나옴,
// 웹브라우저에서 this가 바라보는 처음 대상은 window ★
// ▼▼ 결과
// Window {window: Window, self: Window, …}
// (3) 객체 안 함수=메서드
let obj = {
print : function() { // 객체obj 안 메서드, 객체가 호출시 객체를 바라봄 ★★
console.log(this);
}
}
obj.print(); // obj 객체가 this가 됨, 객체 메서드 안의 this는 객체를 바라봄 ★
// ▼▼ 결과
// {print: ƒ}
// (4) 함수
function printThis () { // 그냥 함수에서 호출하는 this ★★
console.log(this);
}
printThis(); // window 바라봄
</script>
</body>
</html>
