Programo90 코딩 기록저장소

Oracle DB는 *RDBMS 하나이다.

 DB에 대한 접근, 관리, 변경, 삭제는 계정에 따라 제한이 있고,

관리자 계정인 system, sys 에 의해 실행되거나, 관리자계정으로 생성하고, 권한이 부여된 계정으로 가능하다.

모두 모든 테이블로 이루어져 있다. 테이블은 열(세로 = 항목)과 행(가로 = 값) 으로 이루어져 있는데

가로행은 ROW 또는 DUPLE 이라 부르고,

세로열은 COLUMN 또는 ATTRIBUTE(속성) 이라 부른다.

*RDBMS

Jquery란?

javascript를 더욱 편하게 사용하기 위한 라이브러리이다.

Jquery의 장점

1. 호환성 개선

javascript의 DOM(Document Object Medel)과 Event Object의 브라우저에 따른 호환성 문제점을 개선한다.

( ex javascript의 인근선택자 (a+b)는 Explore와 다른 브라우저에서 다르게 동작)

2. 애니메이션 단순화

javascript의 복잡함 애니메이션 효과 구현을 단순화 하며 코드 개발을 쉽게 해준다.

Jquery의 사용

1. Jquery 라이브러리를 다운로드 하여 불러오는 방식

2. 온라인에서 제공되는(jquery에서 배포)를 라이브러리를 불러오는 방식

$( ).first( script )        %()로 선택되는 요소중 첫번째 요소 선택

$( ).last( script )        %()로 선택되는 요소중 마지막 요소 선택

$( ).eq(index n).( script ) %()로 선택되는 요소중 index가 n번인 요소 선택

$(  : gt(index)).( script )  %()로 선택되는 요소중 index가 n번보다 큰 요소 선택

$(  : lt(index)).( script )   %()로 선택되는 요소중 index가 n번보다 작은 요소 선택

$(  ).slice(begin_index n1, end_index n2).( script ) 

  %()로 선택되는 요소중 index가 n1초과, n2포함되는 요소 선택

jquery Method

배열 Method

javascript Array에 있는 메서드들과 유사한 기능을 제공한다.

$( 선택자 ).each( callback )      arr의 각 요소로 callback 함수를 수행한다. (array의 .forEach() 와 같다 )

    =  $.each( arr선택자 , callbakc)

$.map( arr선택자, callback )     arr의 모든 요소로 callback 함수를 수행하고, callback 함수의 리턴값들을 모아 하나의 배열로 리턴한다.

$.grep( arr선택자, callback )     arr의 모든 요소로 callback 함수를 수행하고, 함수의 리턴이 true인 요소만 모아 배열로 만들어 리턴한다.                                         ( array.filter()와 같다. )

$.inArray( data, arr, begin_index n )  배열에서 n1자리부터 data를 찾아 첫번째 data의 자리를 number로 리턴 (array.indexOf() 와 같다.)

$.isArray( object )                  object가 배열이면 true, 아니면 false( Array.isArray(obj)와 같다)

$.merge( arr1, arr2)                두개의 배열을 이어붙여 하나의 배열로 리턴

$(선택자).index( 요소선택 )       배열에서

객체 조작

객체를 생성, 복제, 삭제, 변환 하는 문법

속성조작 Method

객체의 속성을 조작하는데, 이때 속성은 html의 구조나, html안에 내용, css 등 이 포함된다.

$( ).html( )             대상 안에 html 타입의 내용을 넣는다.    (입력내용이 태그로 인식)

$( ).text( )              대상안에 text 내용을 넣는다.

$( ).attr( )              HTML 대상에 속성을 넣거나 가져온다. ( ) 안에 "attr", "val" 을 넣으면 속성 저장 "val"을 생략하면 리턴

$( ).prop( )             Script 객체에 속성을 넣거나 속성의 값을 가져온다.

$( ).val( )               대상에 밸류값을 가져온다.(<tag value="val"> val을 가져옴)

$( ).css( )

$( ).addClass( )

$( ).removeClass( )

$( ).hasClass( )

attr() 은 html에 태그를 지정해 속성값을 가져오거나 설정하는데 사용해야 하고,

prop()는 script 상에서 DOM 객체의 속성값을 가져오거나 설정하는데 사용하도록 해야한다.

* prop()로 html상에 선언되어 있는(문서로 적혀있는 값)을 삭제하려고 하거나 변경하려고 하면 오류가 발생한다.

  attr()로 조작해야 한다.

수치조작 Method

객체 편집 Method

*체이닝 기법

jquery에서는 하나의 객체를 선택하고 해당 객체에 method를 연속해소 적용할 수 있다.

 ex)   $( 선택자 ).parent().css( style A).css( style B).  ...    

Jquery 비동기 방식 연동

 Ajax(Asynchronouse Javascript and Xml) 비동기 방식으로 데이터를 전송, 요청 하는 방식

 기본형

     $.ajax({

url: "data위치"             

,type : "get or post"                             데이터 전송에 사용할 html 데이터 전송 방식

,data : " data "                                    서버로 전송할 데이터를 지정

,dataType : "datatype"                          서버에서 받아올 데이터를 지정 ("html", "json", "xml", "text", "jsonp")

,success : function() { 실행문 }                 Ajax 통신이 성공하면 함수 실행

,error : function() { 실행문 }                    Ajax 통신이 실패하면 함수 실행

)}

Method

$(선택자).load( url, data, callback )

Javascript 보안 정책

동일 출처만 정보는 요청, 전송할 수 있다.

Json (Javascript Object Notation)

javascript로 작성된 text파일, 데이터를 전달하기 위한 구조로 기본형이 { "속성1" : "값1", "속성2" : "값2", ...} 으로 이루어져 있다.

Xml (Extensible Markup Langudage)

특수한 목적을 갖는 마크업 언어를 만드는데 사용하도록 권장하는 다목적 마크업 언어

기본적인 구조에서 태그명조차 사용자가 임의로 작성할 수 있기때문에 여러 환경으로 데이터를 배포할 목적으로 사용된다.

javascript에도 객체(object)가 존재한다.

변수만을 가지고 있는 literal type, 변수와 메서드를 가지고 있는 class type의 객체가 있다.

Literal Object

선언

단일 생성

let(or var)  참조명 = { 변수명1 : 변수값1 , 변수명2 : 변수값2, ... }

생성자 선언

function 생성자명(매개변수1, 매개변수2, ...) {

this.변수명1 = 매개변수1;

this.변수명2 = 매개변수2;

...   }

생성자를 이용한 객체 생성

let(or var) 참조명 = new 생성자명(변수값1, 변수값2, ..)

Class Object

선언

단일생성

let 객체명 = { 변수명1 : 변수값1 , 변수명2 : 변수값2, ... , 함수명1 : function( 매개변수 ) {  실행문  } }

생성자 선언

function 생성자명(매개변수1, 매개변수2, ...) {

this.변수명1 = 매개변수1;

this.변수명2 = 매개변수2;

...   

this.함수명 =  function( 매개변수 ) {   실행문  };

}

생성자를 이용한 객체 생성

let 객체명 = new 생성자명( 매개변수 );

객체의 멤버 변수,메서드 접근

객체명.변수명;

객체명.함수명();

Prototype

객체에는 원형이 존재한다. 이는 생성자에서 선언되 객체의 원형으로 이를 복사해서 새로운 객체를 만들게 된다.

공통적으로 사용되는 상수나, 함수를 모든 각각의 객체가 갖도록 하지 않고, prototype에만 선언함으로  시스템의 자원을 아낄 수 있다.

static과 다른점은, static은 인스턴의 멤버변수에는 접근할수가 없지만, prototype은 멤버변수에도 접근할 수 있다.

prototype 함수 정의

생성자명.prototype.함수명 = function( 매개변수 ) {  실행문  };

생성자 선언시뿐만 아니라 , 생성자 밖에서도 추가해줄수 있다.

prototype 함수 호출

prototype 함수를 호출하기 위해선 일단 prototype을 원형으로 한 객체(인스턴스)가 생성되어 있어야 한다. (static과 다른점)

객체명.함수명(매개값);

Static

static변수나 함수(method)는 객체(인스턴스)가 없이도 class가 일단 로드된 후에는 호출이 가능하다.

static 함수 정의

생성자명.함수명 = function( 매개변수 ) {  실행문  }

static 멤버 호출

객체와 무관하게 호출이 가능하다.

생성자명.함수명();

기본적인 연산자는 Java와 유사하다.

/연산자의 결과값이 몫과 나머지가 함께 나온다는점,

===, !== 과 같이 값뿐 아니라 타입까지 비교하는 연산자 정도의 차이만 있다.

사친연산자

+, -, *, /, %

**                제곱을 수행(n2는 지수)

++, --

+=

-=

*=

비교연산자

==

===

!=

!==

<, >, <=, >=

논리연산자

&&,  ||,  !

typeof(data)

instanceof(data)

&,  |,  !,  ^

1.상수(const)

속성

한번 지정하면 변경할수 없는 상수.

생성

     const 상수명 = 상수값;

 2.변수(let, var)

  let

속성 지역변수로 선언 위치에 따라 접근할수 있는 범위에 제약이 있다.

            참조할수 있는 데이터 타입은 어떤 타입이든 가능하고, 기본타입뿐 아니라 함수나 클래스도 지정이 가능하다.

생성   let 변수명 = 변수값;

var

속성 전역변수로 선언 위치에 상관없이 모든 지역에서 접근이 가능하다. 이외 속성은 let과 동일

        선언   var 변수명 = 변수값

3.데이터 타입(data type)

string

number

data

boolean

null

object

undefined

symbol

4.함수(function)

선언

function 함수명( 매개변수 ) {    실행문    }

익명함수

let(or var) 객체명 = function( 매개변수 ) {    실행문    }

호출

함수명(매개값)

익명함수의 객체명(매개값)

Array

생성

let 배열명 = [ ];

let 배열명 = [ 요소1, 요소2, ...];

호출

배열명[index]

Static Method

Array.isArray(객체)        객체가 배열이면 true, 아니면 false 리턴

Method

.length()

.push(element)            배열 끝에 요소를 추가

.pop()                        배열 끝에 요소를 삭제하고 리턴

.unshift(element)          배열 젤 앞에 요소를 추가

.shift()                        배열 젤 앞에 요소를 삭제하고 리턴

.concat(elemetn, arr)      배열에 요소나, 다른 배열을 추가해서 리턴

.slice(begin n1, end n2)  배열을 n1자리부터 n2-1자리까지 복사한 새로운 배열을 리턴

.splice(begin n1, conut n2, ele1, ele2, ...)

   배열의 n1자리부터 n2갯수만큼 삭제, 삭제한 자리에 ele1, ele2, .. 요소를 추가

.join(exp)                    배열의 요소들을 exp로 이어붙이면서 하나의 str으로 리턴 <=> string.split(exp)

.sort( callback )            요소를 순차적으로 두개식 가져가 비교연산 후 true인 경우 우선되게 정렬.

function(d1, d2) { return d1,d2 비교후 true or false }

.reverse()                    배열의 요소들을 역순으로 나열한 새로운 배열을 리턴

.indexOf(ele, begin n)    배열의 n자리부터 ele를 찾아서 찾은 자리를 number로 리턴. 못찾으면 -1 리턴

   - 아래의 메서드 들은 배열의 모든 요소들을 매개변수로 순차적으로 callback 함수를 실행하는 메서드들.

callback 함수들을 function( 매개변수 ) { 실행문 } 뿐만 아니라,

람다식으로 ( 매개변수 ) => {   실행문  } 간략히 표현할수도 있다.

결과적으로 배열의 요소들을 '참조'만 하게 되고, callback함수로 작업을 수행한 결과를 취합하게 된다.

.forEach( callback )        각 요소들을 가지고 callback 함수를 실행. 리턴이 없다.

.map( callback )            배열의 각 요소들을 가지고 callback함수를 실행한 후 그 리턴값으로 새로운 '배열'을 만들어 리턴

.filter( callback )            배열의 각 요소들로 callback함수를 실행해 리턴이 true인 요소들만 모아 새로운 '배열'을 만들어 리턴

.sume( callback )           배열의 각 요소들로 callback 함수를 실행하여 리턴이 하나라도 true이면 true를, 아니라면 false를 리턴

.every( callback)            배열의 각 요소들로 callback 함수를 실행하여 모든 리턴이 true면 true를, 아니면 false를 리턴

.reduce( reducer )          누적기의 일종으로 reducer를 callback 함수로 구현, 모든 요소들을 누적해가며 '하나의 결과 값'을 만들어 리턴

reducer function(data1, data2) { return data1 + data2 }   결국 1번요소, 2번요소를 더한 리턴값을

reducer다음 호출시 첫 호출에서 리턴된 값을 data1으로, 3번요소를 data2로 참조하며 실행, 이를 반복한다.

.find( callback )            배열의 각 요소들을 가지고 callback 함수를 수행하여 리턴이 true인 가장 첫번째 '요소'를 리턴