제어할때
1. 점(.) 연산자 사용
2. 대괄호[] 사용
key 확인
in 연산자 사용
객체 복사
Object.assign(새로운대상, 원본)
import / export
export 시 default를 사용하면
import 에 중괄호 {}를 사용할 수 없음
export 시 default를 사용하지 않으면
import 에 중괄호 {}를 사용해야만 됨
import / export 를 사용하면 onclick 등
일반적인 HTML 속성을 사용하는 방법으로는
이벤트를 연결할 수 없음
반드시 자바스크립트를 통해 이벤트 제어해야 됨
상속
● 부모가 가진 것을 자식에서 물려주는 행위
- 부모 클래스 : super class
- 자식 클래스 : sub class
● 부모 클래스의 생성자, 변수, 메소드를 그대로 사용 가능 - 필요한 경우 Override 를 통해 변경 가능
상속
다형성
추상화
location = '' 창 이동
window.open('https://naver.com', 'name','width=300px height=400px'); 팝업형식으로
배열 초기화
const arr1 = new Array(); const arr2 = [1, 2];
const animals = ['🐶', '🐱', '🐷'];
for (let i = 0; i < animals.length; i++) { // 인덱스
console.log(i);
}
for( let i in animals){ // 인덱스
console.log(i);
}
for(let i of animals){ //
console.log(i);
}
// 모든 요소의 수만큼 반복하면서 접근가능
animals.forEach(function() {
});
animals.forEach(()=>{
console.log("a");
})
//forEach 에 콜백함수가 들어간다.
//()안에 임의의 변수를 대입하여 그 요소값을 사용할 수 있다.
//animals.forEach((v)=>{
//});
forEach(('값','인덱스','전체')=>{
})
자료구조
스택 push/pop
큐 queue add
const max = (x)=>{
// let output = 0;
// x.forEach((v)=>{
// if(output<v){
// output=v;
// }
// });
let output = Math.max(...x);
return output;
};
console.log(max([1,2,3,4]));
const array = [1,2,3,4,5];
let first = array.shift();
let last = array.pop();
array.unshift(last);
array.push(first);
console.log(array);
writn 챗gpt 무료
let base = 0;
while (true){
let idx = str.indexOf('소나기',base);
console.log(idx);
if (idx==-1) break;
base = ++idx;
}
class Student {
constructor(name, age, enrolled, score) {
this.name = name;
this.age = age;
this.enrolled = enrolled;
this.score = score;
}
}
const students = [
new Student('A', 29, true, 45),
new Student('B', 28, false, 80),
new Student('C', 30, true, 90),
new Student('D', 40, false, 66),
new Student('E', 18, true, 90),
];
let result1 = students.find((v) => {
return v.score <= 90;
})
let result = students.filter((v) => {
return v.enrolled == true;
})
console.log(result1);
console.log(result);
홀수 오름차순, 짝수 내림차순 정렬
const array = [6, 7, 8, 9, 10, 1, 2, 3, 4, 5];
const newArray = array.sort((next, prev) => {
if(next%2==1){
if(prev%2==1){
return next-prev;
}else{
return -1;
}
}
if (next%2==0){
if(prev%2==0){
return prev-next;
}else{
return 1;
}
}
});
console.log(`${newArray}`);
filter
원본 요소에서 조건에 따라 걸러짐
return true, false
map
모든 요소에 연산을 적용/수행
return value *2
class Student {
constructor(name, age, enrolled, score) {
this.name = name;
this.age = age;
this.enrolled = enrolled;
this.score = score;
}
}
const students = [
new Student('A', 29, true, 45),
new Student('B', 28, false, 80),
new Student('C', 30, true, 90),
new Student('D', 40, false, 66),
new Student('E', 18, true, 90)
];
const result = students.filter((v)=>{
return v.score >=50}).map((v) => {
return v.name
}).join(',')
console.log(result);
콜백함수형
계속해서 붙여 사용
document.addEventListener('DOMContentLoaded', () => {
const div = document.querySelector('div');
const h1 = document.createElement('h1');
h1.textContent = 'hello'
div.appendChild(h1);
let code = '<h1>hello</h1>';
div.innerHTML += code;
});
생성하는 법 2가지
DOM (Document Object Model) ● 웹 브라우저가 문서 객체를 모두 읽고 난 후 동작
remove, removechild,
const lis = document.querySelectorAll('li');
console.log('lis');
lis.forEach((v)=>{
v.addEventListener('click',(e)=>{
console.log('click', e.target.remove());
});
})
e 는 이벤트가 들어갈때 넣는 변수로 쓴다.
/* 마우스 드래그 방지 이벤트*/ document.body.onselectstart = () => false;