Programo90 코딩 기록저장소

DOM (document object model)을 다루는 기능들

Class Attribute

.hasClass('class_name')            현재 요소가 지정한 Class를 가지고 있으면 true 리턴, 아니면 false 리턴

.addClass('class_name')            현재 요소에 지정한 Class를 추가

.removeClass('class_name')       현재 요소에서 지정한 Class를 삭제

.toggleClass('class_name')         현재 요소에 지정한 Class가 없으면 추가, 있으면 삭제

Copy

.clone()        현재 요소를 깊은 복사해서 리턴

DOM Around    

DOM 들을 감싸주는 기능

.wrap('wrapping')      현재 요소를 ( )에서 지정하는 selector나 html문자열을 직접입력, 요소 등으로 감싸준다.

(현재 요소를 지정한 요소의 자손으로 넣는다. <p>와 같이 직접 html문자열로 넣어줘도 가능하다.)

.unwrap()                현재 요소를 감싸고 있는 요소를 제거한다. 다시말해 부모요소를 제거함.

.wrapAll('wrapping')   wrap()과 같지만, 현재 선택되어 있는 요소를 모두 하나로 묶어서 감싸주는 것 wrap은 각 요소마다 랩을 씌움

DOM Inside

DOM 내부에 값이나 요소를 넣는 메서드

.append('element')        현재 선택중인 요소 안에, element를 넣음. html구문을 str로 직접 넣어줄수도 있다.

.appendTo('target')        현재 선택중인 요소를, target 안에 넣음 (append와 방향이 반대이다.)

.prepend('element')        현재 선택중인 요소 안, 젤 앞자리에 element를 넣음.

.prependTo('target')       현재 선택중인 요소를, target안 젤 앞자리에 넣음.

.text('text')                    현재 선택중인 요소에, text를 내부에 넣음.

.html('html str')              현재 선택중인 요소에 html구문을 넣음. 보안성이 떨어진다.

DOM Outside

DOM 외부(부모)에 요소를 추가하는 메서드

.after('element')        현재 요소보다 뒤에 element를 부모요소로 넣음. (wrap은 안에 들어가는거고 after는 그냥 뒤자리에 넣는것)

.insertAfter('target')    현재요소를 target 뒤에 부모요소로 넣음

.before('element')      현재 요소보다 앞에 element를 부모요소로 넣음. 

.insertBofore('target')  현재요소를 target 앞에 부모요소로 넣음

DOM Removal, Replace

DOM의 내부값이나, 객체 자체를 삭제하거나 변경하는 메서드

.empty()                    현재 객체의 내부(자손이나 값)를 삭제함

.remove()                   현재 객체 자체를 삭제함.

.replaceWith('element')  현재요소를 뒤에 지정한 element로 교채함. (html구문을 str으로 넣어줘도 된다.)

.replaceAll('target')       뒤에 지정한 target에 현재 선택중인 요소들로 변경함

(replaceWith는 chaining기법으로 뒤에 추가하는 메서드를 적용받을 수 없다. replaceAll 은 앞에 모든 효과를 받을 수 있다.)

DOM Attribute

DOM의 속성을 확인Get하거나 변경Set하는 메서드

.attr('att_name')

.attr('att_name','new_value')

.removeAttr('att_name')

.prop('att_name')

.prop('att_name','new_value')

.removeProp('att_name')

.val()        value에 있는 값을 가져옴

.val('new_value')

DOM CSS

.css()                        ( )안이 비어있으면 css 속성 모두 리턴

 ( ) 안에 css속성명과 값을 적어주면 설정.

.width()                     content 넓이 리턴

.innerWidth()              content+padding 넓이 리턴

.outerWidth()              content+padding+border 넓이 리턴 

.outerWidth(true)         margin까지 총 넓이 리턴

.height()                      content 높이 리턴

.innerHeight()               content+padding 높이

.outerHeight()               content+padding+border 높이

.outerHeight(true)          margin 까지 총 넓이 리턴

.offset().left(or top)        

.position().left(or top)

Effect

요소에 대한 시각적인 효과들

Basics

.hide()      현재 요소 가림

.show()     현재 요소 보임

.toggle()    현재 요소 가리기/보이기 토글

Custom (Animation effect)

.animate()

.delay()

.finish()

.queue()

.dequeue()

.stop()

Fade

.fadeIn()          요소가 서서히 드러나도록 함

.fadeOut()       요소가 서서히 사라지도록함

.fadeTo()         요소가 서서히 사라지도록 하는데, 최종 투명도를 조절할 수 있음.

.fadeToggle()    fadeIn, fadeOut 효과 토글

Sliding

.slideDown()        슬라이드가 내려오며 요소들이 보이게함

.slideUp()            슬라이드가 올라가며 요소들을 숨김

.slideToggle()       슬라이드효과 토글

Event

요소에 발생하는 어떤 액션에 대한 반응

Document Loading

.load()         html 문서가 모두 읽어졌을때 callback을 실행한다.

.ready()        html문서가 모두 읽혔을때 callback 실행

Event Handler attachment

.on('event' , callback)        현재 요소에 'event'가 발생시 callback을 수행한다.

$(parent).on('event', 'target_selector', callback)    parent 요소 아래에 target에 event효과를 부여한다.

이와같은 정의 방식은 동적으로 생성, 제거되는 요소에도 event 효과를 부여가 가능한 live event 방식

.one('event', callback)        현재 요소에 일회성 event 효과를 부여한다.

아래는 deplecated method

.bind()

.unbind()

.delegate()

.undelegate()

Event type

아래 이벤트들은 .event( callback )으로 사용하거나, .on('event', callback) 을 이용해서 요소에 부여할수 있다.

Form Events

html에서 form에 의해 발생하는 event

.blur( callback )        요소에서 focus가 떠났을때 발생

.change( callback )    form요소에 변화가 생겼을때 발생 (checked나 selected 등)

.focusin( callback )     요소에 포커스가 왔을때 발생

.focusout( callback )   요소에서 포커스가 떠날때 발생

.select( callback )       현재 요소가 선택 되었을때 발생(select에서 option선택이 아니라 form요소 안에 내용을 더블클릭, 블럭으로 잡았을때)

.submit( callback )      submit 시 발생

Keyboard Events

.keydown()    key를 누르는 순간 발생

.keypress()    key가 눌리고 있을때 발생

.keyup()        key에서 손을 때는 순간 발생

key는 눌리는 key에 따라 keycode가 있다. 이를 읽어서 어느 키가 눌렀는지 알 수 있다.

Mouse Events

.click( callback )

.dblclick( callback )

.hover()

.mouseover()        마우스가 요소 위로 올라올때 이벤트 발생(다른 요소와 겹쳐있어도 무관)

mouseout()          마우스가 요소 밖으로 날때 이벤트 발생

.mouseenter()       마우스가 요소 위로 올랄때 이벤트 발생 (다른 요소가 겹쳐있다면 발생하지 않음)

.mouseleave()       마우스가 요소 밖으로 나갈때 이벤트 발생

.mousemove()      마우스 커서가 움직일때 발생

.

점보트론이란?

하나의 컴포넌트로 홈페이지를 소개하는 첫 화면이라 할 수 있다. 본래 의미로는 대형 전광판을 말한다.

점보트론 만들기

점보트론으로 표현하려는 블럭(div태그)에 class="jumbotron"  를 적용해준다.

점보트론 블럭 가운데 표시하려는 text를 <hn> ,<p> 등의 태그 안에 적어주고 class="text-center" 를 적용해준다.

점보트론 스타일 추가

jumbotron 클래스에는 기본적으로 점보트론의 형태가 적용되어 있는데,

<style>태그 안에  .jumbotron { text-style이나 background-img 등 } 과 같이 추가적인 스타일을 부여할 수도 있다.

점보트론 링크 태그

<a href="#" class="btn btn-primary btn-lg" role="button">

HTML과 CSS로 만드는 스타일을 더욱 간편하게 해주는 라이브러리

부트스트랩 사용하기

1. http://bootstrapk.com/getting-started/#download 에서 다운로드 받은 파일을 압축 해제 후

작성하려는 프로젝트 파일안에 css, fonts, js 폴더를 넣어준다.

2. html 편지기(블라켓, 비쥬얼스튜디오 코드 등)에서 html의 <head> 안에 bootstrap.css 를 링크해준다.

플러그인이란?

Jquery로 특정 기능을 구현해 놓은 프로그래밍을 제공하는 라이브러리

사용을 위해선 먼저 jquery 라이브러리를 연동시키고, 플러그인을 연동시키면 기능을 사용할 수 있다.

1. 제이쿼리 라이브러리 연동

2. 플러그인 연동

보통 오픈 소스로 작성되어 있는 라이브러리를 가져와 사용하는데(github 등에서), 저작권 종류를 주의해야

bxSlider Method 예제

1. 사용하려는 플러그인 파일을 받는다.

2. src 폴더에 css, js, image 등을 작성하는 html 프로젝트 폴더 안에 넣는다.

3. html문서 안에서 script에 jquery와 플러그인을 연동시킨다.

오라클DB를 조작하기 위한 명령어 들은 크게 3가지로 나눌수 있다.

1. DDL(database definition language) : 테이블을 생성하거나 변경, 삭제 하기 위한 구조적인 명령어 

2. DML(database management language) : 테이블의 값(row)를 추가하거나 변경, 삭제하기 위한 명령어

3. DCL(database control language) : DB를 관리, 사용하기 위한 권한을 제어하는 명령어

오라클에선 기본적으로 명령어들의 대소문자를 구분하지 않는다.

DDL

Create

테이블을 생성하는 명령어.

초기에 Column의 갯수, 타입, 크기, 제약자 등을 지정해준다.

기본형

create table 테이블명 {

 컬렴명1 데이터타입(크기) constraint 제약조건

,컬럼명2 데이터타입(크기) constraint 제약조건

,  ...

}

Alter

테이블의 Column을 추가, 변경, 삭제 하는 명령어

modify(컬럼 변경), add(컬럼 추가), rename(컬럼명 변경),  drop(컬럼 삭제) 등 의 명령이 있다.

기본형

alter table 테이블명

명령어(아래 기술) column 컬럼명

add 

기본형 

alter table 테이블명

add 컬럼명 데이터타입(크기)

modify 

기본형 

alter table 테이블명

modify 컬럼명 데이터타입(크기)

 * 변경하려는 컬럼에 변경하려는 데이터타입이나 크기가 적용될수 없는 값(row)가 잇는경우 변경이 불가능하다

rename

기본형

alter table 테이블명 

rename column 컬럼명 to 변경할컬럼명

drop 

기본형

alter table 테이블명 

drop column 컬럼명

Drop

테이블을 삭제함.

기본형

drop table 테이블명

drop으로 삭제시 테이블은 완전삭제 되는 것은 아니고 recyclebin(쓰래기통) 으로 가게 된다.

완전삭제를 위해선 쓰래기통을 비워주거나, drop시 뒤에 purge를 붙여 완전삭제가 가능하다.

쓰래기통에서 복원은 flashback으로 해줄수 있다.

purge

purge recyclebin;        쓰래기통을 비운다.

purge 테이블명          쓰래기통에 해당 테이블을 삭제한다.

drop table 테이블명 purge    테이블을 삭제하면서 완전삭제시킨다.

truncate

truncate    

flashback

DML

Insert

테이블 하나의 row를 추가한다.

기본형

insert into 테이블명( 컬럼명1, 컬럼명2, ... )

values(컬럼1값, 컬럼2값, ...)

insert all

테이블에 

Update

Delete from

Select

DCL

Grant

Revoke

DQL

select문을 별도로 Query문으로 구분하기도 한다.