JavaScript/바닐라 JS로 크롬 앱 만들기 (5) 썸네일형 리스트형 review5 preventDefault란? 이벤트와 관련된 기본 동작(새로고침)을 방지하는 기능 제출 버튼을 클릭하면 양식이 제출되지만 위 기능을 통해 방지할 수 있다 *무엇이 클릭되었는지 등 정보를 알고 싶을 땐 JS는 함수를 실행시키는 동시에 그 함수에 첫번째 인자로 object를 넣어줌 이벤트 객체를 매개변수로 받아 처리하면, 해당 이벤트와 관련된 정보를 쉽게 확인하고 원하는 작업을 수행할 수 있음 localstorage란? Local storage를 사용하면 웹 페이지에서 데이터를 유지하고 나중에 사용할 수 있음 JavaScript를 사용하여 웹 브라우저에서 데이터를 읽고 쓸 수 있으며, 사용자가 페이지를 닫고 다시 열어도 데이터가 유지됨 setItem()을 통해 정보를 저장할 수 있음 Interval란? 일.. review 4 querySelectorAll()메소드란? querySelectorAll() 메소드는 선택한 엘리먼트들을 포함하는 NodeList 객체를 반환함 이 경우, 지정된 기준에 부합하는 모든 h1 엘리먼트를 반환함 NodeList란 일련의 노드 집합으로 querySelectorAll()이나 childNodes와 같은 메소드로 반환됨 배열과 비슷한 형태를 가지고 있어 순서대로 정렬된 노드들의 목록 NodeList 객체는 읽기 전용(직접적으로 추가,삭제 불가) But 속성 수정가능 여기서 궁금한 점 왜 querySelectorAll()를 사용하면 안될까 ? 선택한 요소 중 첫 번째 요소만을 반환하지 않고, 선택한 모든 요소를 NodeList 형태로 반환 따라서 document.querySelectorAll()를 사.. review 3 getElementById html문서에서 특정 Id값을 가진 요소를 찾는 js메소드 getElementByClassName getElementByClassName()은 웹 페이지에서 특정 클래스 이름을 가진 모든 요소를 반환하는 JavaScript 메소드 HTML은 웹 페이지의 구조와 콘텐츠를 정의하고, JavaScript는 웹 페이지의 동적인 동작을 추가하는 스크립트 언어. HTML과 JavaScript를 함께 사용하여 웹 페이지를 동적으로 제어할 수 있음 Js에서는 DOM을 통해 html을 제어함. Document Object Model는 HTML문서를 계층구조로 표현하며 각 요소는 js에서 객체로 표현됨 즉 JS html의 내용을 사용할 수 있는 것임 document.querySelector() .. review 2 함수 함수선언방법 funciton 함수이름(){ 원하는 것 }. 함수이름()//함수가 출력됨 Ex) function sayHello(){ console.log("Hello!"); } sayHello(); - 함수에 인자를 넣어주는 법도 매우 간단함 ex) function sayHello(nameOfPerson, age){ console.log("Hello" + nameOfPerson + "age is "+ age); } sayHello("js", 23); sayHello("GW", 23); //Hellojsage is 23 HelloGWage is 23 출력됨 함수를 객체 안에서 선언하는 것도 가능함 Ex) const player ={ name:"js", //객체 안에서 함수선언 sayHello: fun.. First summary 바닐라 JS로 크롬 앱 만들기 html은 웹사이트를 여는 접착제 같은 역할을 한다 html을 열어야 파일이 열림 > html파일이 css와 자바스크립트를 가져옴 const 상수를 선언하는데 사용함. 상수는 값을 변경할 수 없음 선언과 동시에 초기화되어야 함 한번 값이 할당되면 다시 할당할 수 없음 해당 블록 내에서만 유효함 let let은 변수(variable)를 선언하는 데 사용됨 변수는 값을 변경할 수 있음 선언과 동시에 초기화하지 않아도 됨 *기본적으로 const를 사용하고 필요한 경우에만 let을 사용할 것. var은 사용X console.log console.log는 콘솔에 메시지를 출력하는 메소드 디버깅에 유용한 정보를 출력하거나, 프로그램의 흐름을 추적하는 데 도움을 줌 null 아무 것도 .. 이전 1 다음
