여태까지 배운 것들 중 부족한 것들 올리기

1.객체 : 데이터 불러오기 : hasOwnProperty()

객체에 상속되지 않은 속성 이름인 경우 true를 반환합니다. 이 메서드는 객체가 특정 프로퍼티를 갖고 있는지 확인할 때 사용됩니다.

 const obj = {
    a: 100,
    b: 200,
    c: "javascript"
};

// 데이터가 있으면 true / 없으면 false
console.log(obj.hasOwnProperty("a")); 
console.log(obj.hasOwnProperty("b")); 
console.log(obj.hasOwnProperty("c")); 
console.log(obj.hasOwnProperty("d")); 

console.log("a" in obj); 
console.log("b" in obj);
console.log("c" in obj);
console.log("d" in obj);

2.객체 : 데이터 불러오기 : 객체 구조분해할당

ES6에서 도입된 문법으로, 객체의 속성 값을 변수에 할당하는 방법입니다. 이를 통해 코드를 간결하게 작성할 수 있으며, 특히 함수의 매개변수로 객체를 전달할 때 유용합니다.

 const obj = {
    a: 100,
    b: 200,
    c: "javascript"
};

const {a:name1, b:name2, c:name3} = obj
console.log(name1, name2, name3);

const {x, y, z} = obj;
console.log(x, y, z);

3.객체 : 데이터 불러오기 : for in

for in문으로 객체안에 저장된 데이터의 키값을 데이터 형태로 출력하는 방법입니다.

 const obj = {
    a: 100,
    b: 200,
    c: "javascript"
};

// 데이터 형식으로 "키"값을 구해옴
for(let key in obj){
    console.log(key);
    console.log(obj[key]);
}

4.객체 : 데이터 불러오기 : Object

옛날에 사용하던 코드로 Object.key, Object.values, Object.entries를 통해서 "객체" 안의 키값을 "배열 형식"으로 가져오는 코드 입니다.

const obj = {
    // a는 "키" / 100은 "값"
    a: 100,
    b: 200,
    c: "javascript"
};

console.log(obj.a); 
console.log(obj.b); 
console.log(obj.c); 

// 배열 형식으로 "키"값을 구해옴
console.log(Object.keys(obj));  
console.log(Object.values(obj)); 
console.log(Object.entries(obj));

5. document.querySelector()로 클래스, 아이디, 태그를 찾습니다.

6. 자바스크립트로 CSS속성을 지정하는 innerText를 사용합니다.

    찾은값.innerText = 문자열; 이런식으로해서 해당 부분에 css를 넣어줍니다.

 

 7.addEventListener은 click으로 찾은값을 클릭시에 스타일을 바꿔줍니다.

• click : 클릭할 때 이벤트 발생
• mouseover : 마우스를 요소 위에 올리면 발생
• mouseout : 마우스가 요소 밖으로 벗어날 때 발생
• mousedown : 마우스 클릭 버튼을 누르고 떼기 전인 순간 발생(드래그할 때 사용)
• mouseup : 마우스 클릭을 떼는 순간 발생
• mousemove : 마우스가 움직일 때 발생
• focus : 요소에 포커스가 갔을 때 발생
• blur : 요소에 포커스가 벗어났을 때 발생
• keypress : 키를 누른 순간 발생(누르고 있는 동안 계속해서 발생)
• keydown : 키를 누를 때 발생
• keyup : 키를 눌렀다가 떼는 순간 발생
• scroll : 스크롤 시 발생
• resize : 브라우저 창 크기를 조절할 때 발생

 

8.textContent :  HTML요소의 텍스트 내용을 설정하거나 반환하는 자바스크립트 명령어입니다.

   대상.textContent = "넣을 문자열"; 이라고 적으면 대상에 text가 추가 및 변경이 됩니다.

 

9. 대상.style.display= "none" or "block"; 적어주면 대상의 display를 설정 할 수 있습니다.

 

10. value : form 요소의 값을 설정하거나 반환하는 자바스크립트 명령어입니다.

 

11. trim() : 여백 제거입니다.(text로 확인할때 여백이 있으면 에러가 납니다. 그떄 trim을 쓰면 여백이 있어도 여백을 없애줍니다.)

 

 

 

키값 구하기, 객체구조분해 할당이 많이 생소하네요

웹퍼블리싱에서 제일 많이 쓰이는 명령어는 많이 안써봤습니다.

그래서 많이 봐두는게 좋을 것 같아서 적어봤어요