티스토리

신기하네요

검색하기

블로그 홈

신기하네요

punch-um.tistory.com/m

펀치의 코딩공부 블로그 (다소 야망을 품음)

구독자: 0

방명록 방문하기

주요 글 목록

자주 사용하는 JS 라이브러리들 더보기 각 라이브러리 소개 홈페이지에 들어가 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... 공감수 0 댓글수 0 2023. 5. 1.
Ajax 동기(Synchronous) 통신 : request가 있으면 해당 response가 전달될 때까지 다른 request를 요청할 수 없는 통신 방법 동기 통신 : 네이버 홈 → 블로그 홈 으로 움직일 때 다른 동작은 할 수 없는 것 비동기 통신 : 시간이 조금 지나면 자동으로 변경하는 거 동기 vs 비동기 통신 차이 : 사용자 입장에서는 화면갱신이 없고 요청과 응답 사이 시간에도 다른 일을 할 수 있어 편리하고 빠른듯한 환경을 느낄 수 있다. 데이터 형식 : 데이터를 주고 받을 때는 특정한 형식으로 맞춰주어야 한다. 더보기 : 쉼표를 기준으로 항목을 구분하여 저장한 데이터 장점 : 용량이 작다. (많은 양의 데이터 전송 시 활용) 단점 : 가독성이 떨어진다 → 컬럼이 있는 테이블이 있는 경우 사용 활용 :.. 공감수 0 댓글수 0 2023. 5. 1.
jQuery “Write Less, Do More!” Cross Broswer JavaScript 작성이 어려웠기 때문에 사용되기 시작했다. jQuery는 모든 브라우저에서 동작하는 자바스크립트를 간편하게 사용할 수 있도록 단순화 시킨 오픈소스 라이브러리이다. 현재는 → 익스플로어가 사라지고 구글 크롬을 주로 사용하는 추세라, jQuery를 사용하는 일은 줄어들었다고! 직접 선택자 종류 사용법 설명 전체 선택자 $("*") 모든 요소를 선택 아이디 선택자 $("#아이디 명") id 속성에 지정한 값을 가진 요소를 선택 클래스 선택자 $(".클래스 명") 클래스 속성에 지정한 값을 가진 요소를 선택 요소명 선택자 $("요소명") 지정한 요소명과 일치하는 요소들만 선택 그룹 선택자 $("선택1, 선택2, 선택3 ... .. 공감수 0 댓글수 0 2023. 5. 1.
JS_DOM DOM : Document Object Model → 문서html 를 → 객체로 → 모델링 Web의 구성 서로 다른 언어가 소통할 수 있도록 쪼개서 ‘객체화’ 시켜주는 것! HTML 요소지만 JavaScript를 이용할 수 있도록 해준다. → 이걸 가능하게 해주는 게 DOM! HTML 문서 읽는 순서 document → 모든 HTML 문서의 대모같은 존재 HTMLElement HTMLElement : 모든 종류의 HTML 요소를 나타내는 인터페이스. - getElement 메소드를 통해서 원하는 객체를 조회, 조회된 객체들을 대상으로 구체적인 작업처리 getElementById() getElementById() : 접근하고자 하는 HTML태그의 id값을 이용해 HTMLElement객체 조회 -> 접근하고.. 공감수 0 댓글수 0 2023. 4. 28.
JS_조건문 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 공감수 0 댓글수 0 2023. 4. 27.
JS_ 객체 객체(Object) : 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입. 데이터(속성)과 데이터에 관련되는 동작(절차, 방법, 기능)을 모두 포함한 개념 **key & value로 접근! 객체의 선언 let Object = {} 데이터의 접근 방식 객체 이름.key 객체 이름[’key’] 객체 데이터 변경 객체 이름.key = “가나다” 객체 이름[’key’] = “가나다” ```html // 배열과 객체의 차이점 // 객체는 key, value 값을 구성 // ** 배열 let weather = [5,10,15,30] // 객체 // 오늘 날씨 : 5도 // 오늘 날씨 : 10도 // 오늘 날씨 : 15도 ``` 공감수 0 댓글수 0 2023. 4. 27.
JS_함수 함수(Function) : 특정기능을 수행하는 소스코드를 하나로 묶어, 필요할 때마다 호출하여 사용하기 위한 구조 ** 재사용성! 함수의 사용 목적 어떠한 실행코드를 묶어서 실행하기 위함 중복되는 코드 최소화 실행코드 블록화 >> 코드 조각화 함수의 선언 1. 함수선언식 function 함수이름 () {} 2. 화살표 함수 const 함수이름 = ()=>{} 함수의 호출 함수이름() 공감수 0 댓글수 0 2023. 4. 27.
JS_배열(Array) : 같은 타입의 여러 변수를 하나의 묶음으로 다루는 것 ** 인덱스 JAVA와 JS 배열의 차이점 JAVA 배열 동일한 데이터 자료형만 저장 가능 배열의 크기가 고정적 정해진 배열의 크기만큼만 데이터 추가 가능 JS 배열 다양한 데이터 자료형 저장 가능 배열의 크기가 가변적 정해진 크기를 넘어서 데이터 추가 시 자동으로 저장 공간 할당 배열의 선언 let nameList = []; let nameList = new Array(); 반드시 배열은 선언한 이후 사용해야 함! 배열 함수 마지막 인덱스 - : pop() 마지막 인덱스 + : push() 배열 내에 포함 : includes() 배열 내에 이 데이터의 인덱스 : indexOf() 추출 slice() → 데이터 손상 X 제거 splice() → 데이.. 공감수 0 댓글수 0 2023. 4. 27.
JS_연산자 연산자 종류 산술연산자 + - * / %(나머지 연산자) 증감연산자 ++ -- 대입연산자 = += -= *= /= %= 연결연산자 +(문자열 결합) 비교연산자 ==(값만 비교, 자료형 무시) != ===(타입과 값을 같이 비교-> 권장사항) !== > >= < ㅡ= 논리연산자 && || ! 조건연산자 조건 ? 실행문1 : 실행문2; * / → 실제 나누기 연산 결과(몫X) / 나누기 연산자 (실제 나눈 값) ≠ === → 타입과 값이 모두 일치 시 true (1) 산술 연산자 중 나누기 연산자 // / = 나누기 연산자로, 나눈 실제 값이 나오게 됨 // % = 나머지 연산자 (2) 비교 연산자 & 일치 연산자 // == vs === console.log(3=='3') // true console.log.. 공감수 0 댓글수 0 2023. 4. 27.
JS_형변환 문자를 숫자로 정수로 parseInt("바꿀내용”) 실수로 parseFloat("바꿀내용”) 숫자로 Number("바꿀내용”) 숫자를 문자로 n진수 .toString 문자열만 .String 공감수 0 댓글수 0 2023. 4. 27.
JS_자료형 자료형 설명 number 정수, 실수 등 산술 연산이 가능한 자료형 string 문자열로 이루어진 자료형 boolean 참/거짓으로 표현되는 논리 형태의 자료형 undefined 값이 할당된 적 없거나 존재하지 않는 속성일 때의 유형 null 아무런 값을 나타내지 않을 때의 자료형 number 숫자 타입 정수 실수 포함 // a. typeof() // b. console창 색상 string 문자 형태, 큰따옴표(""), 작은따옴표('') 둘 다 사용가능 let str = "선영표" console.log('string',str) boolean let dinner = true let lunch = false console.log('boolean', dinner, lunch) undefined vs null .. 공감수 0 댓글수 0 2023. 4. 27.
JS_변수 JavaScript에서는 저장하는 데이터에 따라서 자료형을 결정한다. 재선언 재할당 호이스팅 재선언 재할당 호이스팅 var O O O let X O O, 오류(TDZ) const X X O, 오류 Java, Python에서의 변수 차이점 int num = 3; var num = 3; “str 라는 변수에 hello world라는 데이터를 넣겠다” Strint str = “hello world”; var str = ‘hello world’; “res라는 변수에 true라는 데이터를 넣겠다” boolean res = true; var res = true; 공감수 0 댓글수 0 2023. 4. 27.
JS_입출력 1. 출력문 콘솔창에 출력하기 (F12 개발자 도그 → console) console.log('콘솔창에 출력하기') 팝업창에 출력하기 alert('팝업창을 통해 출력하기') 2. 입력문 확인 질문 : confirm 확인 or 취소로 대답할 수 있음, 리턴 타입은 boolean 위 질문에 대한 대답을 console창에 출력 console.log(confirm('저녁 드셨나요?')) 입력 확인문 : prompt 리턴 타입이 무조건 String 질문에 대한 대답을 console창에 출력 console.log(prompt('저녁 메뉴는 무엇이었나요?')) 공감수 0 댓글수 0 2023. 4. 27.
JS_목차 우선, Javascript란 무엇일까? 웹 페이지를 동적으로, 프로그래밍적으로 제어하기 위해서 고안된 객체 기반의 스크립트 언어. Javascript 는 → Java와의 문법이 다르다. 특징이 있다면... 자바스크립트는 모든 웹 브라우저에서 동작한다. 는 점. Javascript 사용법 스크리트 문법은 태그 가장 하단 ⇒ 괄호 접근방법(호출방법) 배열 [] 인덱스번호 객체 {} .key 함수 () 함수이름() JS를 쓰는 방법은 3가지가 있는데, 결국엔 외부로 많이 쓰게 되었던 것 같다. 내부방식 ⇒ body태그 내 코드 작성 인라인방식 ⇒ 태그 안에다가 작성 외부방식⇒ 연결 ⇒ 외부 js 작성 공감수 0 댓글수 0 2023. 4. 27.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.