펀치의 코딩공부 블로그 (다소 야망을 품음)
더보기 각 라이브러리 소개 홈페이지에 들어가 Get started 메뉴 정독 (github 일 경우 readme 파일) 설명서에 필요한 js 파일, css 파일을 설치 Get started 예제 코드 or 오픈 코드 복사붙여넣기 끝! Swiper 캐러셀(이미지 슬라이드)를 예쁘게 만들 수 있다. → js 파일, css 파일 다운 받아서 첨부한 후에 예제 코드를 복사 붙여넣으면 실행됨! 더보기 Slide 1 Slide 2 Slide 3 Chart.js 웹페이지에 차트를 만들 때 사용할 수 있습니다. Animate On Scroll 스크롤 내리면 요소가 천천히 등장하는 애니메이션 관련 라이브러리 깃허브에서 css파일, js 파일 cdn 버전 찾아서 html 에 삽입하고 더보기 입력하면 됨! Fullpage...
동기(Synchronous) 통신 : request가 있으면 해당 response가 전달될 때까지 다른 request를 요청할 수 없는 통신 방법 동기 통신 : 네이버 홈 → 블로그 홈 으로 움직일 때 다른 동작은 할 수 없는 것 비동기 통신 : 시간이 조금 지나면 자동으로 변경하는 거 동기 vs 비동기 통신 차이 : 사용자 입장에서는 화면갱신이 없고 요청과 응답 사이 시간에도 다른 일을 할 수 있어 편리하고 빠른듯한 환경을 느낄 수 있다. 데이터 형식 : 데이터를 주고 받을 때는 특정한 형식으로 맞춰주어야 한다. 더보기 : 쉼표를 기준으로 항목을 구분하여 저장한 데이터 장점 : 용량이 작다. (많은 양의 데이터 전송 시 활용) 단점 : 가독성이 떨어진다 → 컬럼이 있는 테이블이 있는 경우 사용 활용 :..
“Write Less, Do More!” Cross Broswer JavaScript 작성이 어려웠기 때문에 사용되기 시작했다. jQuery는 모든 브라우저에서 동작하는 자바스크립트를 간편하게 사용할 수 있도록 단순화 시킨 오픈소스 라이브러리이다. 현재는 → 익스플로어가 사라지고 구글 크롬을 주로 사용하는 추세라, jQuery를 사용하는 일은 줄어들었다고! 직접 선택자 종류 사용법 설명 전체 선택자 $("*") 모든 요소를 선택 아이디 선택자 $("#아이디 명") id 속성에 지정한 값을 가진 요소를 선택 클래스 선택자 $(".클래스 명") 클래스 속성에 지정한 값을 가진 요소를 선택 요소명 선택자 $("요소명") 지정한 요소명과 일치하는 요소들만 선택 그룹 선택자 $("선택1, 선택2, 선택3 ... ..
DOM : Document Object Model → 문서html 를 → 객체로 → 모델링 Web의 구성 서로 다른 언어가 소통할 수 있도록 쪼개서 ‘객체화’ 시켜주는 것! HTML 요소지만 JavaScript를 이용할 수 있도록 해준다. → 이걸 가능하게 해주는 게 DOM! HTML 문서 읽는 순서 document → 모든 HTML 문서의 대모같은 존재 HTMLElement HTMLElement : 모든 종류의 HTML 요소를 나타내는 인터페이스. - getElement 메소드를 통해서 원하는 객체를 조회, 조회된 객체들을 대상으로 구체적인 작업처리 getElementById() getElementById() : 접근하고자 하는 HTML태그의 id값을 이용해 HTMLElement객체 조회 -> 접근하고..
java에서 써보자 if num==3 { syso('hello') } else { syso('bye') } js에서 써보자 if num==3 { console.log('hello') } else { console.log('bye') } 만약 펀칰이라면 안녕하세요?라고 출력 name이 지지라면 펀칰씨 아세요? if (name.equals('펀칰')){ syso('안녕하세요!') }else if (name.equals('지지')){ syso('펀칰씨 아세요?') }else
객체(Object) : 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입. 데이터(속성)과 데이터에 관련되는 동작(절차, 방법, 기능)을 모두 포함한 개념 **key & value로 접근! 객체의 선언 let Object = {} 데이터의 접근 방식 객체 이름.key 객체 이름[’key’] 객체 데이터 변경 객체 이름.key = “가나다” 객체 이름[’key’] = “가나다” ```html // 배열과 객체의 차이점 // 객체는 key, value 값을 구성 // ** 배열 let weather = [5,10,15,30] // 객체 // 오늘 날씨 : 5도 // 오늘 날씨 : 10도 // 오늘 날씨 : 15도 ```