감사합니다.

이미지 로딩은 오래걸린다.

이미지 로딩이 완료될때까지 기다릴 수 도 없다. (블럭된다. 멈춘다)

Sleep, Delay 같은 기능이 없거나, 안된다.

그래서, 이미지 로딩할때, onload, onerror 기능이 있다.

onload는 이미지가 로딩되면 호출되는 함수이다.

이미지 로딩되기전에는 이미지 사이즈를 알 수 없다.

이미지의 크기 정보가 필요한 경우, 이미지가 미리 로딩되도록

html body내에 사용할 이미지를 미리 넣어놓고, 자바스크립트는 body 마지막에 넣는 방법도 있으나,

이미지가 로딩될때, 보여질 수 도 있고, 자바 스크립트 위치가 맨아래여야하며,

html내에 이미지 정보가 들어가므로, 트래픽이 조금 증가할 수 있다.

그래서, 이미지를 사용하기전에 미리 로딩하는 방법을 자바스크립트만으로 구현해 보았다.

원리는 간단하다.

사용할 이미지를 자바스크립트로 미리 로딩하고,

모든 이미지가 로딩되면, main함수를 호출하는 방법이다.

//사용할 이미지 미리 로딩하기

pre_load_img_str_arry(["img/1.PNG","img/2.PNG","img/3.PNG"]);

//메인함수

function main()

{

pre_load_img_delete();

...

}

Uncaught SyntaxError: Invalid shorthand property initializer

var a={value_min=0,value_max:127};

구조체형 변수 생성시, 초기값 설정에 ':'를 사용해야하나, '='를 넣어서 오류 발생함.

웹브라우져마다 약간씩 다르다.

생각보다 복잡하네...

str.substr(0, pos);

str.slice(pos);

Syntax: string.slice(start, stop);
Syntax: string.substring(start, stop);

charAt : 해당위치의 문자 얻기(C언어의 문자열 배열)

indexOf : strstr함수와 비슷. 리턴값은 숫자 인덱스

lastIndexOf : strrstr 함수와 비슷. 리턴값은 숫자 인덱스

자바스크립트에는 strcpy함수가 없다.

1) 대입연산자로 해결이 될까?

   =>된다.

var s1="1234",s2;

s2=s1;

s1="56";

console.log("s1=",s1,"s2=",s2);//s1= 56 s2= 1234

function strstr(dest,src)

{

dest=src;

}

s1="1234"

s2="";

strstr(s2,s1);

s1="56";

console.log("s1=",s1,"s2=",s2);//s1= 56 s2= 

3) 다른방법(실패)

function strcpy(dest,src)

{

var len,i,a;

len=strlen(src);

dest=[];

for(i=0;i<len;i++)

{

a=src.charAt(i);

dest[i]=a;

}

}

function strlen(s)

{

return s.length;

}

C언어를 사용하다가, 자바스크립트로 프로그램(?)을 작성하니,

- C언어에서 자주 사용하는 구조체, enum, #define 등의 기능을 사용할 수 없어, 힘듦

- 변수명이 중복되거나, 다른 용도로 사용할 경우, 원인찾기가 어려움.

- static 변수 선언이 안됨. 모두 전역변수. (트릭을 사용하면 되나, 불편함)

- 웹브라우져마다 안되는 코드가 있어, 불편함.

html방식은 기존의 이미지, <div>등을 사용하여, 화면을 그리는 방식이고,

canvas방식은 canvas안에 그래픽함수로 화면을 그리는 방식이다.

자바스크립트에서는 구조체가 없다.

함수로 비슷하게 사용하는 방법이다.

또한, 이 방법은 static 변수를 지원하지않는 자바에서, static과 유사한 기능을 제공해준다.

예1)

function struct_Object()

{ 

var value,data;//값을 대입해봐야, 효과가 없다. new 이후에 넣어주어야 한다.

}

function new_Object()

{ 

var a=new struct_Object();

a.value=0;

a.data="";

return a;

}

var my_struct=new struct_Object();

my_struct.value=1;

my_struct.data="문자열 데이터";

예2)

function struct_Object()

{ 

var value,data,control,rect;

}

function new_Object()

{

var a=new struct_Object();

a.value=0;

a.data="temp111";

a.control=new_Control();

a.rect=new_RECT();

return a;

}

function은 Object개념이된다. c언어에서는 코드에 불과한 함수가, 자바에서는 모든 객체를 보관하는 Object개념인것이다.

function 내부에 있는 경우에는 지역변수이나, new로 생성하면, 창이 닫힐때까지 존재한다.

function 내부의 지역변수는 function 클래스의 멤버변수라 볼 수 있고, 휘발성이나, new로 만들면, 휘발성이 아니게 된다.

문제점들

===================

struct안에 struct가 포함된 구조로 코드를 작성하였으나,

- 개발툴이 자바언어를 지원하지 않는 C언어 개발툴이라, 멤버작성에 어려움이 있었다.

  C언어 개발툴에서는 '.'을 찍으면, 멤버변수를 선택할 수 있어,

  오타없이 코드작성이 가능하였으나, 이런 기능이 없어, 오타가 많이 발생한다.

- new를 사용하여, struct안에 struct를 class처럼 사용했으나, 코드 오타때문인지, undefined으로 나타난다.

  =>new로 생성후, 초기값을 넣어주어야 한다. 

      "function struct_Object()"함수에서는 초기값을 넣어주어도 효과가 없다. new_Object()함수가 필요.

- new를 사용하는 방식은 변수의 존재를 보장하지 못한다는 글이 있었다.

  아래 방식이 좋다고 한다.

var array = []; // empty array

// object literal notation to create your structures
array.push({ name: 'abc', value: 'def' });
array.push({ name: 'ghi', value: 'jkl' });

아래 방법으로 성공

function new_my_struct()

{

var i,a={i:[],o:[]};

for(i=0;i<4;i++)

{

a.i[i]={level:i,vol:0};

a.o[i]={level:0,vol:0};

}

return a;

}

자바스크립트에서는 아래와 같이 배열 선언가능

var a=new Array();

function new_Array2(a,b)

{

var i,r=new Array(a);

for(i=0;i<b;i++)

{

r[i]=new Array(b);//각 요소마다 배열을 선언해주어야 한다.

}

return r;

}

※주의 : 배열 차원을 잘못 사용하면, 배열전체가 초기화됨(자바언어의 특징)

예) 2차원 배열 -> 1차원 배열로 사용할 경우

var a2=new_Array2(3,4);

a2[0][0]=2;

a2[0]=10;//a2를 다른형태로 사용하면, 배열전체가 바뀌어버림,

console.log("a2[0]=",a2[0]);//a2[0]= 10

console.log("a2[0][0]=",a2[0][0]);//undefined

※배열차원을 넘어서면, 에러.

예) 2차배열을 3차배열로 사용할 경우.

//a3[0][0][1][2]=3;//j.c:306 Uncaught TypeError: Cannot set property '2' of undefined

function test_new_Array2()

{

console.log("test_new_Array2()");

var a2=new_Array2(3,4);

//a2[0]=10;//a2를 다른형태로 사용(선언)하면, 바뀌어버림,

//console.log("a2[0]=",a2[0]);//a2[0]= 10

console.log("a2[0][0]=",a2[0][0]);//undefined

console.log("a2[0][1]=",a2[0][1]);//undefined

a2[0][0]=2;

console.log("-a2[0][0]=",a2[0][0]);//undefined ???? a2를 다른형태로 사용(선언)하면, 바뀌어버림,

a2[0][1]=3;

//a2[0][1][2]=3;//undefined

console.log("a2[0][1]=",a2[0][1]);//ok

//console.log("a2[0][1][2]=",a2[0][1][2]);//undefined

}

test_new_Array2();

left, top은 style에 있고, 문자열 형식이라서, parseInt(()함수를 사용해야 숫자가 된다.

x=parseInt(mg.style.left);

width, height는 이미지의 속성이며, 숫자이다. (parseInt()함수가 필요없다.)

w=img.width,

h=img.height,

function get_left(o){

return parseInt(o.style.left.replace('px',''));

}

function get_top(o){

return parseInt(o.style.top.replace('px',''));

}

이미지 너비, 높이 구하기 실패하는 이유 : body(이미지)가 로딩이 끝나야, 값을 얻을 수 있다.

사용할 이미지를 body에 넣고, 밑에서 자바스크립트로 처리한다.

<body style="margin:0;padding:0">

<img id=img1 src="img/1.JPG" style="visibility:hidden;position:absolute;left:0;top:16;">

...

<script type='text/javascript'>

...

img1_w=img1.width,

img1_h=img1.height;

...

//실제로 사용할 내용을 생성한다.

document.write("<img id='img1"+i+"' src='img/1.JPG'>");//처음 로딩된 내용은 모두 지워진다.

...

</script>

</body>

문제의 시작

위 이미지는 구글 동영상 품질보고서에 나오는 내용이다.

https://www.google.com/get/videoqualityreport/?v=-rMMTv7XLYw#how_video_gets_to_you

CSS 애니메이션으로 작성된듯 하다.

그놈에 호기심....ㅠㅠ

CSS3와 자바스크립트와 어떻게 다를까?

CSS는 간단한 애니메이션은 아주 쉽게 구현이 가능해 보인다.

예전부터 사용해오던 자바스크립트와 어떻게 다를까?

이와 관련하여 구글 디벨로퍼 사이트에 이런 내용이 잘 정리되어 있다.(아래 참고)

CSS : 변경이 없는 단순 애니메이션

자바스크립트 : 외부 이벤트가 있는 복잡한 애니메이션등

자바스크립트로 컨트롤하고, CSS로 표시하는방법이 효과적이다.

참고 : https://developers.google.com/web/fundamentals/design-and-ui/animations/css-vs-javascript?hl=ko

CSS가 핸드폰에서도 동작하는가?

안드로이드, 갤럭시, 크롬 브라우져에서 동작하는것 확인함.

CSS와 자바스크림트 성능 비교

https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance#css-vs-javascript-performance

https://developers.google.com/web/fundamentals/design-and-ui/animations/animations-and-performance?hl=en

만족스럽지는 못한 자료다.

CSS : http://www.w3schools.com/css/default.asp

http://www.clearboth.org/48_dynamic_style_-_manipulating_css_with_javascript/