* 슬라이드 *
설정 가능한 옵션
1. 슬라이드 너비
2. 한 화면에 뜨는 박스 갯수
3. 총 박스 갯수
<HTML>
<CSS>
<JS>
1. 변수, 시작화면 선언
2. 함수 부분
3. 본체. 실제로 실행되는 부분
| <jQuery> each 반복문 (0) | 2017.08.25 |
|---|---|
| <jQuery> 애니메이션 만들기 (animate) (0) | 2017.08.18 |
| <jQuery> 선택자와 스타일(css) (0) | 2017.08.18 |
| <jQuery> js와 jQuery 같이 쓰기 (0) | 2017.08.18 |
| <jQuery> js 파일연결이 헤드 혹은 태그보다 위에 있을 때 해결방안 (0) | 2017.08.18 |
jQuery는 js의 비교대상이 아닌 라이브러리 이므로 ( 본체 - 라이브러리 관계 ) jquery안에 js를 적절히 섞어서 쓸 수 있다
* jquery는 jquery 파일을 읽고 진행하기 때문에 js 가 더 빠르다 (사람이 체감할 정도는 아니다)
*jquery는 명령어가 직관적이다
<HTML>
<CSS>
<화면>
* 클릭하면 active class가 추가되고, 배경색이 변하는 기능. *
1. jQuery 이용하지 않고 구현하기
2. jquery로 구현하기
* 좀 더 쉽게 변수 대신에 this 사용하기
* js, jQuery 섞어 사용해 더욱 직관적고 편하게 구현하기
| <jQuery> 애니메이션 만들기 (animate) (0) | 2017.08.18 |
|---|---|
| <jQuery> 선택자와 스타일(css) (0) | 2017.08.18 |
| <jQuery> js 파일연결이 헤드 혹은 태그보다 위에 있을 때 해결방안 (0) | 2017.08.18 |
| <jQuery> 이벤트 (event) (0) | 2017.08.18 |
| <jQuery> 변수와 선택자 (0) | 2017.08.18 |
제이쿼리
(자바스크립트 vs 제이쿼리 : 제이쿼리는 (한국)실무에서 많이 쓴다.)
제이쿼리는 자바스크립트로 할 수 있는 것을 좀 더 쉽고 직관적인 문법형식으로 사용하는 '라이브러리'
<제이쿼리 설치>
1. 제이쿼리닷컴 접속 (http://jquery.com/)
* 제이쿼리의 여러 종류*
1)그냥 보통 jquery
2) jquery ul : 효과를 더 많이 줌. 사람들이 좋아하는 기능을 많이 넣은 것. 확장팩이라고 이해하면 쉽다.
3) jquery mobile : 앱 어플리케이션을 만들기 위한 것. 잘 안쓴다 ( react / angular나 다른 native한 것 쓰는게 좋다)
2. 다운로드 버튼 누르기.
3. 원하는 버전 다운로드
* jquery의 버전 *
원래는 1.11.0( ie8 지원 ) , 2.1.0 ( ie지원 x ) 으로 나눠져 있었따.
두개를 통합해서 jquery 3버전이 나옴.. ie는 지원하지 않도록 통합되었다 (js 발전으로 이렇게 됬다. )
* 버전이 바뀌면 동작을 안하는 경우도 있다.
1.7 이하면 기존에 있던 파일을 쓰는게 낫다.
*slim version : 통신버전빠짐. ui만 신경쓰는 것 ( 화면만 조작 )
*npm으로도 다운로드 가능하다 (node package manager)
*cdn도 가능 (cdn : 가장 가까운 서버에 있는 것 가져다 쓰는 것)
4. 다운로드한 파일 중 .min과 일반 파일 중 원하는 것을 골라 사용하기 좋은 폴더에 넣고 html 파일과 연결한다.
(연결예시)
| <jQuery> 선택자와 스타일(css) (0) | 2017.08.18 |
|---|---|
| <jQuery> js와 jQuery 같이 쓰기 (0) | 2017.08.18 |
| <jQuery> js 파일연결이 헤드 혹은 태그보다 위에 있을 때 해결방안 (0) | 2017.08.18 |
| <jQuery> 이벤트 (event) (0) | 2017.08.18 |
| <jQuery> 변수와 선택자 (0) | 2017.08.18 |
Javascipt : 순수 웹언어 x.
Javascript의 웹에서의 역할 :
대상을 찾는다(유저) -> 행위를 한다(클릭, 입력, 스크롤...) (유저) -> 감지 (js) -> 기능수행(js)
HTML
<div class="box" onClick="alert('Hello')"></div>
C
대상을 찾는다 ( .box ) -> 행위를 한다 (onClick) -> 감지 -> 기능수행(alert('Hello')
* 원래 js를 HTML과 함께 쓰면 안된다. 파일을 분리하는 것이 웹표준.
1. jQuery설치
* ( 없어도 js 가 실행되긴 한다. jquery는 js의 라이브러리)
https://jquery.com/
2. 원하는 것 골라서 설치. 나는 compressed product 설치
3. 적당히 js폴더를 만들고, 그 안에 jquery 다운로드 받은 파일을 옮긴다.
4. HTML 파일과 연결하기
* jQuery 맛보기 *
document.getElementById('box').addEventListener('click',function(){
alert('js');
})
이 코드를 jQuery로 작성하면
jQuery('#box').on('click',function(){
alert('jquery')
});
로 줄여쓸 수 있고 더 줄인다면
$('#box').on('click',function(){
alert('jquery')
});
로 줄일 수 있다
| <Javascript> 연산자 (0) | 2017.07.28 |
|---|---|
| <Javascript> 변수(Variable) (0) | 2017.07.25 |
| <Javascript> js에서의 주석처리 (0) | 2017.07.25 |
| <Javascript> 함수 공부 전 헷갈리는 js 동작 실행방법 정리 (0) | 2017.07.25 |
| <Javascript> js의 세가지 사용방법 ( 파일 분리하기 ) (2) | 2017.07.25 |
