감사합니다.

자바스크립트에서는 Sleep()함수가 없다.
강제로 Sleep함수를 만들어 사용할 경우, 웹페이지는 다른 작업을 하지 못하고, Sleep함수내의 무한루프를 돌게되며,
화면에서는 웹페이지 응답없음 상태가 된다. 마우스 클릭하면, 동그라미만 계속 돌아간다.
물론, 짧은 시간동안 정지시키기위한 Sleep함수는 만들어 사용해도 된다.
그러나, 이미지 로딩중에 Sleep호출하면, 이미지 로딩도 같이 멈춘다.

자바스크립트 자체적으로 Sleep, wait 기능을 지원해주면, 순차프로그램이 가능한데, 참 어렵다...

자바스크립트는 1개의 쓰레드(프로세스)만을 사용하며, 이벤트 방식이다.
이미 로딩등의 함수 호출시, 콜백함수라고 부르는 함수이름을 넣어주어야한다.

Sleep함수, wait등의 기능이 있다면, 순차적으로 프로그램을 작성할 수 있으나,
자바스크립트에는 이런 기능이 없어, 프로그램작성할때 문제가 된다.

Sleep, Wait기능이 없어서 문제가 되는것은, 다음줄의 자바스크립트 코드가 실행된다는 점이다.
이미지를 로딩하고, 이미지 사이즈를 구해서, ....하려고 했는데, 이미지가 로드되기전에, 다름 자바스크립트가 실행된다.

보기에는 간단한 문제인데, 이 문제를 해결하기위한 방법들은 실로 눈물겹다.
왜 순차실행을 지원하지 않는지....(물론 웹페이지라는 특성도 있지만)
단순하게 Sleep(),Wait()함수 2가지만 지원해주면, 쉽게 프로그램작성이 가능한데 말이다...

해결 방법은 2가지이다.
안1) 콜백함수를 적극 활용하여 "잘" 작성한다.
  물론 쉽지 않다. 프로그램작성도 어렵다.
안2) 상태머신으로 구현
  더 어렵다. 모든 작업의 상태를 모두 구현해야한다.

콜백함수를 사용하는 방식은 CPU를 놀리지 않고, 최적의 성능을 발휘한다.
이벤트가 발생할때까지 무한대기.
물론, 함수 호출시 넣어주었던 값들은 콜백함수가 호출되기전까지 보존된다.

상태머신으로 구현할 경우, 각 상태를 switch문으로 비교하기때문에, 상태의 개수가 많아지면, 약간 비효율적이 된다.
또한, 디버깅이 어렵다.

기타
안3) 순차호출을 지원하는 스크립트언어 사용
     자바스크립트로, C언어 소스코드를 순차적으로 실행할 수 있는 언어를 작성하여,
     그 언어로 프로그래밍한다.
     C언어를 실행할 수 있는 자바스크립트 코드를 만들면 된다.(물론 어렵다. 그리고 너무 느리다.)

결론 : 자바스크립트에서는 Sleep, wait사용불가
       콜백을 잘 이용하던가, 상태머신 방식으로 자바스크립트 작성.

function test_gloval_function_x()
{
	console.log("test_gloval_function_x()");
}
var data1="global data1";
function test_meber_function_this()
{
	var o={};
	o.data1="meber data1";
	console.log("멤버함수내에서 this를 항상 사용해야하는가?(생략가능한가?)");

	o.test_gloval_function_x=function()
	{
		console.log("meber_function_x()");
	}
	o.test=function()
	{
		test_gloval_function_x();//test_gloval_function_x()
		console.log(data1);//global data1

		this.test_gloval_function_x();//meber_function_x
		console.log(this.data1);//meber data1
	}
	return o;
}
var a=test_meber_function_this();
a.test();

결론 : 사용해야함

//document.body.onload등을 대체할 수는 없다.
function html_body_add_java_script(text)
{
	var script=document.createElement('script');
	script.innerHTML=text;
	document.body.appendChild(script);
	return script;
}

var test_script=
"var my_cnt=0;"+
"function test3()"+
"{"+
"	console.log('function test3()',my_cnt);"+
"	my_cnt++;"+
"}"+
"function my_script_onload()"+
"{"+
"	console.log('my_script_onload()');"+
"	setInterval(test3,1000);"+
"}"+
"my_script_onload();"+
"";
html_body_add_java_script(test_script);

자바스크립트에서, onload()같은 콜백함수에 인자(파라메터)를 넘기는 방법에 대해 테스트해보았다.

C언어와 동작방식이 달라서, 어렵다.

결론 : 아래와 같이 작성한 경우, onload()함수를 호출한 곳의 파라메터 및 지역변수까지 모두 보존된다.(호출이 끝날때까지)

테스트환경 : 크롬브라우져

var test_parm,test_url,test_i=0;
function test_print_parm1(i)
{
	console.log("test_print_parm1()--------",i);
	console.log("test_parm=",test_parm);
	console.log("test_url=",test_url);
	console.log("test_i=",test_i);
	console.log("--------");
}
function test_call_back(url,parm)
{
	var i=10,a=new Image();
	i++;
	//a.onload=onload;
	a.onload=function()
	{
		console.log("test_call_back::onload()");
		test_parm=parm;//지역변수, 파라메터, 모두 보존된다. 헐~
		test_url=url;
		test_i=i;
		test_print_parm1(i);
	};
	a.src=url;
	return a;
}
var test_img,parm1,parm2;
parm1="img/k81.JPG";
parm2="test_parm";
test_img=test_call_back(parm1,parm2);
console.log("test_call_back() end1");
test_print_parm1(1);
parm1="xxx1";
parm2="xxx2";
test_print_parm1(2);

parm1="img/j2.JPG";
parm2="test_parm2";
test_img=test_call_back(parm1,parm2);
console.log("test_call_back() end2");
test_print_parm1(3);
parm1="xxx11";
parm2="xxx22";
test_print_parm1(4);

자바스크립트에서, this를 사용하여 클래스를 만들었다고 하는 글들이 있다.
물론,
- 배열을 사용하지 않고, 1개만 생성했을때,
- 다수의 클래스에서 동일한 이름의 멤버를 사용하지 않았을때
  (클래스마다 멤버 이름이 모두 다른경우)
인 경우에는 문제가 없다.
전역변수 this(window)에 멤버변수로 추가했으니...

this는 호출자를 나타낸다.
- f();  인경우, f()함수 내부에서 this는 window이다.
- a.f(); 인경우, f()함수 내부에서 this는 a이다.

C++같은 오브젝트 오리엔티드 언어에서는 this가 명확하다.
자바스크립트에서도 명확하다, 그러나 주의할 점이 있다.
멤버함수 내부에서도, "this."을 명시하지 않으면, "전역"으로 취급된다
예)
{
   ...
   function f()
   {
      ...
   }
   return f(); <<--- f()는 전역함수로 취급된다.
}

//클래스(Class) 만들기. 함수에서 var를 사용하여 변수를 만들고, 리턴하면 된다.
//자바에서는 멤버를 추가하기만 하면된다.
function new_MyClass(value)
{
	var a={value:0};//아무거나 하나만 우선 넣는다.
	a.min=0;//멤버변수 추가
	a.max=100;
	a.inc=function(delta)
	{
		this.vaue+=delta;//a가 아니라 this인 것에 주목!!
		if(this.vaue<this.min)
		{
			this.vaue=this.min;
		}
		else if(this.vaue>this.max)
		{
			this.vaue=this.max;
		}
	};
}
var a=new_MyClass(10);
console.log(a.vaue);
a.inc(10);
console.log(a.vaue);

자바스크립트 - 스크립트 인클루드(include) 후, 갑자기 안되요

<script src="aa.j"></script>

</script>가 있는지 확인해보세요.