JavaScript20 JS 8일차 # Side Bar - nav를 화면 왼쪽에 안보이게 translate 해두었다가 메뉴버튼을 클릭했을 때 왼쪽에서 나오게 한다 - nav가 나왔을 때 나머지 여백은 overlay로 덮이고, 닫기버튼이 없는 대신 overlay를 클릭하면 nav가 닫히도록 한다. ☰ Logo Link Link Link Side Bar Lorem ipsum dolor sit amet consectetur adipisicing elit. # Modal - 다른 컨텐츠들 위에 창을 띄우는 것 - modal 창 상단의 닫기버튼이나 창을 제외한 부분을 클릭하면 닫히도록 한다 Open Modal × Modal Content Lorem ipsum, dolor sit amet consectetur adipisicing elit. # fo.. 2022. 12. 29. JS 7일차 # Accordion Tab Lorem ipsum dolor sit amet consectetur adipisicing elit. - 버튼을 클릭했을 때(onclick) 함수 f의 argument를 this로 둠으로서 js에서의 el은 button이 된다. - 그리고 다시 item을 el의 바로 다음 element인 div로 선언한다 - toggle을 통해 div의 크기를조절할 수 있도록 한다. # Accordion 2 Guinness Heineken Budwiser Guinness Lorem ipsum dolor sit amet consectetur, adipisicing elit. Maiores molestiae, quia cum modi sit suscipit qui harum rerum odit... 2022. 12. 27. JS 6일차 # 자바스크립트와 HTML 1. window 객체 - 웹개발을 위한 도구모음 - 메시지 창 띄우기 window.alert("Hello"); - 접속 기기의 위치를 리턴(ex. 위치기반앱) window.navigator.geolocation - 유저의 페이지 탐색기록 window.history - 브라우저의 저장공간 (ex. 로그인토큰, 테마, 쇼핑카트) document.cookie // 쿠키 window.localStorage // 쿠키의 대체제 - 서버에 데이터를 요청하는 메서드 (ex. AJAX: 페이지 새로고침없이 서버에 요청을 전송할 수 있는 기술) window.XMLHttpRequest window.fetch // 비교적 최신메서드 - 뷰 개발(화면 출력과 관련) window.document /.. 2022. 12. 27. JS 5일차 1. 비동기작업(Asynchronous) - 동기작업: 한가지 작업을 수행할 때 그 작업이 끝날때까지 다른 작업들은 수행하지 못하는 것 - 비동기작업: 작업을 동시에 수행하고자 할 때 한 작업이 다른 작업을 블로킹하는 것을 방지하기 위해 사용된다 ex) 서버에 데이터를 요청 동기작업 function f() { console.log('foo'); } f() // 동기함수: 호출되었을 때 실행된다 console.log('bar') /* *** 결과 *** foo bar */ 비동기작업- setTimeout(null, ms): 첫번째 파라미터에 넣는 함수를 두번째 파라미터에 있는 ms만큼 기다렸다가 수행하는 함수. 이렇게 setTimeout 을 사용하면 우리가 정한 작업이 백그라운드에서 수행되기 때문에 기존의.. 2022. 12. 23. JS 4일차 1. Object(객체) - 데이터와 함수의 집합 - 객체 내부에서 선언되는 값을 속성이라고 하며 속성의 값이 함수인 경우는 메서드(method)라 부른다 const cat = { // 속성(property) name: "키티", home: null, // 메서드(method); sound: function() { return "야옹"; } } - 객체에 접근하기 cat.name - name 속성에 접근 cat['name'] - name속성에 접근 cat.color - 존재하지 않는 속성에 접근 - undefined 출력 cat.sound() - sound메서드에 접근 - 객체에 새로운 속성 추가 추가할 속성이름과 값을 적어준다. ex) cat,age = 2; - 객체의 속성 업데이트 존재하고 있는 객체.. 2022. 12. 19. JS 3일차 1. Error - name, message, stack으로 구성되어있다 - 에러가 발생하면 프로그램이 중단되므로 이를 방지하기 위하여 에러는 처리되어야 한다 - 에러처리: try / catch ...finally try { // 코드를 작성한다 let x = 'foo'; console.log(x); } catch(err) { // 에러를 처리한다 console.error(err); } finally {// 에러 발생여부와 관계없이 항상 실행된다 console.log('hello') } - 에러의 종류 ReferenceError - 선언되지 않은 변수를 참조했을 때 발생하는 에러 SyntaxError - 문법오류 / 컴파일 에러. 컴파일러가 코드를 이해하지 못해서 발생하는 오류로, try / catch블.. 2022. 12. 19. 이전 1 2 3 4 다음
