JAVASCRIPT

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////// JavaScript /////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

// 기본형(primitive type)

undefined (정의되어 있지 않음, null은 직접 의도적으로 정의하지 않는 것)

boolean 

number 

string 

object 

function

// 연산자

a < b

a > b

a <= b

a >= b

a == b

a === b

a instanceof b

// for문

for (var i=0; i<a; i++) { 

}

// for in 문

for (variable in [object | array]) { 

statements 

}

// 내장객체

Array String, Date, Event, Math, Screen, Number, Boolean

// console.log()    //콘솔창에 로그를 찍는다.

// var list = [];

list.length

list.push()

list​.splice(index1,index2,ser,str)

list.concat()     두개 이상의 배열을 합칠때사용 

list.indexOf()     배열 맴버중에서 특정값을찾아 그순번위치를 리턴 

list.reverse()    배열의 순서를 반대로 정렬 

list.shift()     배열의 첫번째 멤버를 없에고 나머지멤버를 리턴

list.pop()    배열의 마지막 멤버를 삭재후 나머지멤버 리턴 

list.sort()    배열을 크기순대로 정렬​ ​

// var map = {};    //map이라기 보다는 JSON객체(Object)?

////////////////////////////// 데이터 다루기 //////////////////////////////

// eval('111')    //숫자값으로 변환

// parseInt('2323', 10)     //결과값: 2323 //10진수 숫자값으로 변환

// escape('$')     //결과값: %24

// unescape('%24')     //결과값: $

// typeof('fas')     //결과값: string

// typeof 1     //결과값: number

// isNaN('123')    //결과값: false // Number Type이거나 숫자형식의 String이면 false, 그외 true

// String.fromCharCode(keyCode)    // keyCode의 원래 문자를 반환/

// String.charCodeAt(idx)     //문자열에서 index에 해당되는 문자값의 유니코드값을 반환

// String.charAt(idx)     //idx위치에 존재하는 문자 반환

// String.toLowerCase()     //String의 값을 모두 소문자로 변환하여 반환

// String.indexOf(str)     // str과 일치하는 문자열의 index를 반환

// String.substring(idx1, idx2)    //idx1~ idx2까지의 문자열 반환

// String.replace('대상 문자', '바꿀 문자')    

// String.length     //문자열의 길이를 반환

// String.search(정규식or문자열)     //문자열 또는 정규식에 일치하는 첫번째 값의 index를 반환

// String.match(정규식)     //정규식에 일치하는 값들을 배열로 반환

// 정규식.test(str)     //정규식에 해당하면 true

// String.anchor()    //문자열이 있는 위치로 페이지 이동???

// 정규식 (JavaScript Regular Expression)

참조 : http://kio.zc.bz/Lecture/regexp.html 

////////////////////////////// 타이머 //////////////////////////////

// setTimeout(함수, 밀리세컨)

// clearTimeout()

// setInterval(함수, 밀리세컨)

////////////////////////////// 뒤로가기 //////////////////////////////

// history.go(-1)     //뒤로가기

////////////////////////////// 뒤로가기 //////////////////////////////

// location.href = "url"     //웹페이지 이동하기

////////////////////////////// 대화상자 //////////////////////////////

// prompt('설명', '미리입력값');     //값 입력 대화상자

// confirm('설명');     //확인(true) 취소(false) 대화상자

// alert('설명');      //경고 대화상자

////////////////////////////// input,textarea에서 선택한 커서위치(or 캐럿위치caretPosition) 관련  //////////////////////////////

// element.selectionStart    //input 등, 글입력 도구에서 선택한 영역의 시작 캐럿 위치(CaretPosition)

// element.selectionEnd    //input 등, 글입력 도구에서 선택한 영역의 끝 캐럿 위치(CaretPosition)

// element.focus(); //해당 요소로 포커스시킴

// element.setSelectionRange(posStart,posEnd); //해당요소에서 캐럿의 위치를 정함

////////////////////////////// function(함수)의 자체 기능 //////////////////////////////

// arguments     // function에 들어온 매개변수(인자)값들을 배열 형태로 갖고 있는 객체

// arguments.length     // 인자의 수와 동일

// arguments.callee()     // 현재 실행 중인 함수를 호출

// function();   //일반적인 함수 호출

// function.call();    //call() 함수로 호출

// function.apply();     //apply()함수로 호출

※ 다음과 같이 코딩해보았는데... 굳이 왜 call()과 apply()를 써야하는지 모르겠다.

function callMe(arg1, arg2){

    var s = '';

    s += "this value: " +this+ "<br/>";  

    for (i in arguments) {     

        s += arguments[i]; 

    }

    return s;

}

document.write("Original function: <br/>");

document.write(callMe({ff:1,fff:3}, 4, '54', 54, ['dddd',5,6,7,8,9],2,2,3,1,1,1,1,1));

document.write("<p/>");

document.write("Function called with call: <br/>");

document.write(callMe.call(3, 4, '54', 54, 5,2,2,3,1,1,1,1,1));

document.write("<p/>");

  

document.write("Function called with apply: <br/>");

document.write(callMe.apply([2,1,1,'a'], [45,78,'b'], [2,75], ['c',2]));

document.write("<p/>");

  

document.write("Function called with apply: <br/>");

document.write(callMe.apply({'ff':'f'}, {fff:'f'}, [2,75], ['c',2]));

// 함수 만들기 test = new Function("a","b","return (a+b)"); document.write(test(3,5)) 

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////// 이벤트 핸들러 Event Handler ////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

// document.onLoad = function(){};    

// addEventListener()

onAboart

onActivate

onAfterPrint

onAfterUpdate

onBeforeActivate

onBeforeEditfocus

onBeforeuUload

onBeforeUpdate

onBlur

onBounce

onCellcCange

onChange

onContextMenu

onControlSelect

onCopy

onCut

onDataAavailable

onDataSetChanged

onDataSetComplete

onDeactivate

onError

onErrorUpdate

onFilterChange

onFinish

onFocus

onFocusin

onFocuseOut

onHelp

onLayoutComplete

onLoad

onLoseCapture

onMove

onMoveEnd

onMoveStart

onPaste

onPropertyChange

onReadyStateChange

onReset

onResize

onResizeEnd

onResizeStart

onRowEnter

onRowExit

onRowsDelete

onRowsInserted

onScroll

onSelect

onSelectionChange

onSelectStart

onStart

onStop

onSubmit

onUnload

// 키보드 관련

onKeyDown

onKeyPress

onKeyUp

// 마우스 관련

onClick

onDblClick

onScroll

onMouseWheel

onMouseOver

onMouseOut

onMouseUp

onMouseDown

onMouseMove

onMouseLeave

onDrag 

onDragEnter

onDragStart 

onDragEnd 

onDragLeave 

onDragOver

// 모바일에서 터치 관련(Android, iPhone) 

touchstart  

touchmove  

touchend     // 아이폰의 경우 touchcancel 이벤트가발생

touchcancel  

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

/////////////////////////  Event 객체 /////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

// event.clientX     //윈도우상 마우스 좌표X

// event.clientY     //윈도우상 마우스 좌표Y

// event.srcElement    //이벤트가 발생한 객체 반환

// event.keyCode    //누른 키보드의 키의 ASCII코드 값 반환 

// event.shiftKey

// event.altKey

// event.ctrlKey

// event.returnValue     //반환할 값 설정 

// event.toElement     //마우스 포인터가 위치해 있는 객체 반환

//event.preventDefault();     // 기본 내장 이벤트를 방지(실행 취소)

//event.stopPropagation();     // 부모의 이벤트 방지라고 해야하나??

// event.touches     // 모바일 브라우저에서 터치 발생시, touches배열로 정보저장 => 안드로이드는 1개(touches[0]), 아이폰은 여러개

속성들

clientX: X coordinate of touch relative to the viewport (excludes scroll offset)

clientY: Y coordinate of touch relative to the viewport (excludes scroll offset)

screenX: Relative to the screen

screenY: Relative to the screen

pageX: Relative to the full page (includes scrolling)

pageY: Relative to the full page (includes scrolling)

target: Node the touch event originated from

identifier: An identifying number, unique to each touch event

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

/////////////////////////  Document 객체 /////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

document.write('')

document.getElementById('')

document.getElemnetsByName('')

document.getElementsByTagName('')

document.getElementsByClassName('')

document.querySelector('css선택자')

document.querySelectorAll('css선택자')

document.createElement('태그명')

documnet.createTextNode()

documnet.body.scrollTop

documnet.body.scrollLeft

document.폼의name.submit()

documnet.body.childNodes

element.childElementCount

element.children

element.children.length

element.insertBefore(newEl, referenceEl)

element.appendChild()

element.removeChild()

element.replaceChild(newEl, oldEl)

element.firstChild

element.lastChild

element.parentNode

element.nextSibling

element.previousSibling

element.innerHTML = ""

element.getAttribute('속성명')

element.setAttribute('속성명', '속성값')

element.classList.add('asdf'); 클래스 추가

element.classList.remove('asdf'); 삭제

element.classList.contains('asdf');   적용여부

element.classList.toggle('asdf'); 토글

element.offsetTop     // 객체의 Y위치

element.offsetLeft     // 객체의 X위치

element.offsetWidth     //가로 크기 

element.offsetHeight     //세로 크기

// 스타일

element.style.border

element.style.color

element.style.backgroundColor

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

/////////////////////////  screen 객체 /////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

screen.availHeight()

screen.availWidth()

screen.colorDepth()

screen.height()

screen.width()

screen.pixelDepth()

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

/////////////////////////  window 객체 /////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

////////////////////////////// WebSQL (openDatabase) ////////////////////////////// 

////////////////////////////// 대용량 저장이 가능, sqllite에 의존하는 독립언어를 사용하기 떄문에 표준X, 지양정책..

// db = window.openDatabase("DB이름", "버전", "DB표시이름", 데이터베이스 크기 [,성공콜백함수]);     // DB를 실행 브라우져가 가지고 있음

db.transaction( function(tr){} )

// tr.executeSql()     //

// window.openDatabase(name,version,displayName,estimatedSize,creationCallback);

// Database.transaction(callback,errorCallback,successCallback);

// Database.readTransaction(callback,errorCallback,successCallback);

// SQLTransaction.executeSql(sql,args,successCallback,errorCallback);

///////////////////////////////////////////////이상하게 안된다. 테스트 중 05/24

var db = null;

function openDB(){

if (!window.openDatabase) {

document.write('이 Browser 는 Web SQL Database 를 지원하지 않습니다.');

} else {

db = window.openDatabase('testDB', '1', '테스트DB', 2*1024*1024 ,function(database){ 

              alert('testDB 생성 완료');  

              db = database;

              createTable();

          }          

        );

alert(55555); // 여기까지 안와 ㅠ

    }

}

var createSQL = "create table if not exists testDB("

    + " _no integer primary key autoincrement,"

    + " type test,"

    + " name text,"

    + " url text"

    + ")";

function createTable(){ 

    db.transaction(

    function(tx){        

          tx.executeSql(createSQL, []

              , function(){

              }

              , function(){

              }

          );

    }

    , function(error){

    }

    , function(){

    }

);

}

var selectSQL = "select * from testDB";

function readTestDB(){

    db.transaction(function(tx){

        tx.executeSql(selectSQL, [], function(tx, rs){

            for(var i=0; i<rs.rows.length; i++){

                var row = rs.rows.item(i);

                alert(row._no + ", " + row.type + ", " + row.name + ", '" + row.url);

            }

        });

    });

}

window.onload = function(){

    openDB();

alert(0);

    readTestDB();

};

////////////////////////////// localStorage ////////////////////////////// 

//////////////////////////////데이터 : 5MB까지 저장 가능, 지우지 않는 한 계속 유지

// localStorage.setItem('작가', '홍흥힝힝힝');     

for (key in localStorage){

  document.writeln(key+ ' : ' +localStorage.getItem(key)+ "<BR/>");

}

// localStorage.key(idx);  // index에 해당하는 key를 반환.

// localStorage.length;     // 데이터의 총 갯수;

// localStorage.removeItem(key);     // 해당 key의 데이터를 지운다.

// localStorage.clear();     // 저장된 모든 데이터를 지운다.

////////////////////////////// sessionStorage //////////////////////////////

//////////////////////////////데이터 : 브라우저마다 다르고 종료하면 사라진다. (탭(Tab)도 별개)

// sessionStorage.setItem('방금 전 점수', 1500);

for (key in sessionStorage){

  document.writeln(key+ ' : ' +sessionStorage.getItem(key)+ "<BR/>");

}

// sessionStorage.key(idx);  // index에 해당하는 key를 반환.

// sessionStorage.length;     // 데이터의 총 갯수;

// sessionStorage.removeItem(key);     // 해당 key의 데이터를 지운다.

// sessionStorage.clear();     // 저장된 모든 데이터를 지운다.

////////////////////////////// cookie //////////////////////////////

//////////////////////////////데이터 : 총 4KB, 정해진 기간동안 유효

function setCookie(key, value, validity){

    var date = new Date();        

    date.setDate(date.getDate() + validity);

    document.cookie = key + '=' + escape(value) + ';expires=' + date.toGMTString();    

}

function delCookie(key){

setCookie('aff', '', -1);      

}

function getCookie(key){  

var cookies = document.cookie.split('; ');  //공백 중요!

for(idx in cookies){      

var keyAndValue = cookies[idx].split('=');       

if (keyAndValue[0]==key) return keyAndValue[1];

}

}

////////////////////////////// new Date(); //////////////////////////////

getFullYear() 

getMonth() 

getDate() 

getDay() 

gethours() 

getMinutes() 

getSeconds() 

setDate() 

setFullYear()

////////////////////////////// new Image(); //////////////////////////////

////////////////////////////// new Worker(); //////////////////////////////

////////////////////////////// 웹성능에 영향X, 백그라운드에서 실행, 멀티스레드 구현, Worker에서는 DOM객체에는 접근 불가(UI처리 불가) => UI와 로직을 분리하여 연산 가능

// worker = new Worker("demo_workers.js"); 

worker.onmessage = function (event) {

document.writeln(event.data);

};

// demo_workers.js (worker가 될 js파일)

var i = 0; 

function timedCount(){

    i += 1;

    postMessage(i);

    setTimeout("timedCount()",500);

} 

timedCount();

// worker.terminate();     // 워커 중지

////////////////////////////// new WebSocket(); //////////////////////////////

////////////////////////////// new SpeechSynthesisUtterance(); //////////////////////////////

// 재밌는 TTS예제 ㅋㅋㅋ

<script>

  var msg = new SpeechSynthesisUtterance();

  msg.lang = 'en-US'; //영어:en-US, 한국어:ko-KR, 일본어:ja-JP

 

  function ttsTest(text){

    msg.text = text;

    speechSynthesis.speak(msg);

  }

</script>

<input id="speakText" type="text" value='TTS 테스트 입니다.' >

<input type="button" onclick="ttsTest(speakText.value);" value="읽기" >

 // var voices = speechSynthesis.getVoices();

 // msg.voice = voices[9];

 // Note: some voices don't support altering params

 // msg.voiceURI = 'Google 한국의';

 // msg.voiceURI = 'native';

 // msg.volume = 0;  // 0 to 1

 // msg.rate = 0.1;  // 0.1 to 10

 // msg.pitch = 0.1;  //0 to 2