본문 바로가기

JS7

JS 4일차 ToDo List지금까지 배운 HTML, CSS, JS를 이용하여 todo list를 만들어보는 시간을 가졌다. HMTL길지만 하나씩 설명을 하자면, Todo List 추가 전체 진행중 완료 1개 남음 완료된 항목 삭제 외부 라이브러리 인 구글 폰트와 내부 라이브러리 css를 import.헤더 영역에는 간단한 h1 제목.input을 받아 추가 버튼을 누르면, ul안에 js로 만들어 .. 2025. 9. 23.
JS 3일차(2) JQuery함수를 같이 넣어 버튼을 올리면 버튼의 value값이 변경됨 클릭시 h6요소 추가JQuery를 사용하면 더욱 간결해진다.on으로 이벤트명과 이벤트 핸들러를 append를 통해 자식에게도 물려줄 수 있다. 시각효과들show, hide, toggle : 선택된 요소가 점점 커지면서 보이고, 점점 작아지면서 사라지게 만드는 메서드show는 보여지고, hide는 사라지며, toggle은 둘 다 가능하다. fedeIn, fedeOut, fedeToggle : 선택된 요소가 점점 선명해지면서 보이고, 점점 흐려지면서 사라지게 만드는 메서드fedeIn은 점점 선명해지고, fedeOut은 점점 흐려진다. 마찬가지로 fedeToggle은 둘 다 가능하다. slideDown()과 sildeUp() .. 2025. 9. 22.
JS 3일차(1) HoistingJS 엔진이 코드를 실행하기 전에 모든 변수선언과 함수선언을 메모리에 미리 등록해 두는 동작.그래서 선언이 코드 아래에 있어도 마치 코드의 최상단으로 끌어올려진 것처럼 동작. TDZ(Temporal Dead Zone)let/const 변수가 선언되기 전까지 해당 변수를 기록해 두는 공간으로 해당영역에 표시된 변수는 아직 선언시점이 되지 않은 변수로 구분한다. 호이스팅 영역 : name1, name2, name3TDZ 영역 : name2, name3const, let은 var와 다르게 tdz를 이용해서 마치 호이스팅이 일어나지 않은 것처럼 동작하게 해 준다.console.log("선언 전 : ", name1);var name1 = "jiwon";console.log("선언 후 : ", nam.. 2025. 9. 22.
JS 2일차(2) windw자바스크립트의 최상위 객체 BOM, DOM으로 나뉨BOM(Brower Object Model) : location(주소관리), screen(창), nevigator(브라우저)DOM(Document Object Model) : document BOMopen창의특성 width(너비), height(높이)=> yes | no로 정할 수 있는 옵션들resizable(창의 크기조절 기능), location(주소창), menuber(메뉴바), scrollbar(스크롤바), status(상태표시줄), toolbar(도구모음) 등open은 window를 생략하지 않고 사용.(헷갈림 방지)네이버 setTimeOutwindow. setTimeOut(함수, 시간 ms)실행 setIntervalwindow.set.. 2025. 9. 19.
JS 2일차(1) 이벤트고전 이벤트 모델특정 요소 객체를 가지고 와서 해당 요소의 이벤트 속성에 접근한 수이벤트 핸들러를 연결하는 방식이벤트를 제거할 수 있다(element.onclick = handler;)동일한 이벤트 속성에 여러 개의 이벤트 핸들러를 연결할 수 없다. -> 한 개만 등록 가능(덮어씀)실행확인실행확인인라인 이벤트 모델요소 내부에 직접적으로 이벤트 속성을 제시해서 실행할 내용을 정의하는 방식따로 script코드에 작성딘 함수를 호출하는 방식 html, js가 섞임 -> 유지보수가 어려움실행확인'">실행확인 표준 이벤트 모델w3c(웹 표준을 만드는 국제 기구)공식적으로 지정한 이벤트 모델element.addEventListener('이벤트명', 이벤트 핸들러 함수);동일 이벤트에 여러개의 핸들러를 등록할 .. 2025. 9. 19.
JS 1일차(2) js 함수function 함수명([매개변수. 매개변수...]){ 함수 호출 시 실행할 코드 [return 결괏값;] }function test1(){ console.log("test1 함수 실행");} 자바스크립트는 함수를 변수에 할당할 수 있음. 입급객체, 1종객체/변수 -> 변수에 담을 수 있다, 함수의 인자로 전달이 가능, 함수 결과로 반환할 수 있다. js에서 함수는 1종객체이기 때문에 위에 모든 게 가능하다. js에서 함수의 이름이 필수는 아니다. 다만 호출을 위해서는 함수의 이름이 필요하기 때문에 필요시 작성한다.function test1(){ console.log("test1 함수 실행");}const test3 = function(){ conso.. 2025. 9. 17.

티스토리툴바