본문 바로가기
728x90

자바스크립트11

틀린그림 찾기능력이 향상되는 Destructuring 문법 보호되어 있는 글 입니다. 2025. 1. 9.
객체지향4. ES6방식으로 안쉽게 구현하는 상속기능 (class) 보호되어 있는 글 입니다. 2025. 1. 8.
[JS] querySelector 하고 제이쿼리 사용 차이 querySelector- css - = CSS= display:none; document.querySelectorAll('.hello').innerHTML = '바보'; 제이쿼리 - css - () 제이쿼리 = hide(); $('.hello').html('바보'); 제이쿼리와 자바스크립트 혼용 가능. $("#close").on("click", function () { document.querySelector(".black-bg").classList.remove("show-modal"); //$(".black-bg").toggleClass("show-modal"); }); "쿼리" 라는 말이 들어가면 css 처럼 쓰인다고 보자. 2024. 3. 21.
훈훈한 Javascript (6) 1. vscode 세팅 3. JS로 기능 만들기 (함수 선언과 호출) 함수가 실행될 때 10+10이 실행됨 이름이 consoleTool인 함수 생성 도구를 만들어줬을 뿐이기에 아무것도 출력되지 않는다. = 함수명() - 도구(함수)를 만들어도 출력이 안되는 이유 - => 사용하지 않고 있기 때문 (호출, 실행 안됨) 함수의 정의와 실행 4. JS로 기능 만들기 (onclick 이벤트 추가) 버튼과 함수를 연결해주기 생성한 함수를 버튼에 명시 onclick 속성 사용 버튼이 클릭되었을 때, 안쪽에 있는 코드가 실행이 된다. onclick 속성에 우리가 만들었던 함수 이름 적어주면 된다. 근데 함수이름에 호출해야하니까 함수이름() 이렇게 적어줘야 함 5. quer.. 2023. 8. 30.
훈훈한 Javascript (5) 3. 객체 순서가 아닌 각 카테고리 별로 데이터를 관리 해주는 객체 데이터 타입 property: 속성 각 프로퍼티가 갖는 것 = 1개의 key, 1개의 value 객체는 userData 라는 변수에 담아져 활용 객체는 여러개의 property 가짐 각 property 는 키:값을 쌍으로 이루고 있음. (2) 1) Dot notation 2) Bracket notation 1) Dot notation 접근하고싶은 property의 키를 dot (.)과 함께 적어줌 아직 존재하지 않는 키를 추가해줄 수도 있음 해당 키에 할당해주고 싶은 값을 할당연산자(=)를 통해 할당해준다. 2) Bracket notation dot 노테이션과 달리 대괄호를 사용해준다. 대괄호.. 2023. 8. 30.
훈훈한 Javascript (4) 1. 배열 순서가 존재하는 여러개의 데이터를 담아두는 창고 순서대로 데이터 할당 ranking 이라는 변수에 데이터 담기 = rangking 이라는 배열 요소 = 배열에 속해있는 하나하나의 데이터 각 배열의 요소는 index 라는 값을 가짐 인덱스 - 해당 요소의 위치값을 의미하는 요소 배열 = 순서가 존재하는 데이터의 창고 jason 접근 방법 각자의 인덱스 값으로 요소에 접근 배열 출력 예시 length 를 사용하면 배열의 길이 확인가능 length 와 index 의 차이 2. 배열 메소드 자바스크립트에 기본적으로 내장돼있는 메소드 들이다 4등을 ranking 이라는 배열에 추가하고싶을 경우 이런식으로 재할당할 수 없음 푸시 메소드 사용 데이터를 추가하는 메소드 = .push() 데이.. 2023. 8. 29.
728x90