<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Timer</title>

<script type = "text/javascript">

console.log('Begin js');

function viewContent()

{

document.write('<br/>Actually nothing to show...<br/>');

}

var timeCount = 0;

function calTime()

{

timeCount ++;

if(timeCount < 5)

{

document.write(timeCount + 'secends...<br/>');

}

else 

{

document.write('Time out !<br/>');

window.clearInterval(countTimer);

}

}

var timer = window.setTimeout('viewContent()', 5000);

var countTimer = window.setInterval('calTime()', 1000);

console.log('End js');

</script>

</head>

<body>

<h3>Timer</h3>

<p>다음내용은 5초후 공개됩니다.</p>

</body>

</html>


6-3_Timer.html


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 6-5_history.js  (0) 2016.12.07
[JavaScript] 6-4_location.html  (0) 2016.12.07
[JavaScript] 6-2_Navitator.js  (0) 2016.12.07
[JavaScript] 6-1_BrowserControl.js  (0) 2016.12.07
[JavaScript] 6-0_BrowserControl.html  (0) 2016.12.07

var borwserInfo = null;


browserInfo = navigator.userAgent;


document.write('Information of current browser : ' + browserInfo);



반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 6-4_location.html  (0) 2016.12.07
[JavaScript] 6-3_Timer.html  (0) 2016.12.07
[JavaScript] 6-1_BrowserControl.js  (0) 2016.12.07
[JavaScript] 6-0_BrowserControl.html  (0) 2016.12.07
JavaScript 소스코드  (0) 2016.12.07

var popupWin = null;


//명령을 모아놓은 객체

var commendList = 

{

//윈도우를 생성해 객체를 연다.

open: function(url)

{

console.log(url);

if(!url)

{

url = 'about/blank';

}

popupWin = window.open(url, 'popup', 'width = 100, height = 100');

document.write(url + ' 웹사이트 팝업<br/>') ;

},

//생성된 객체를 닫는다.

close: function()

{

if(popupWin)

{

popupWin.close();

popupWin = null;

document.write('팝업 윈도우 닫기<br/>');

}

else

{

document.write('팝업 윈도우가 없음<br/>');

}

}

}


//Set true to testing

while(false)

{

var commend = prompt('명령어 + URL\n종료 : exit');

if(commend === 'exit' || commend ==='')

{

break;

}

else if (commend)

{

var commends = commend.split(' ');

if(commends.length ===1)

{

commendList[commend]();

}

else

{

var commend = commends[0];

var args = commends[1];

commendList[commend](args);

}

}

else

{

document.write('Commend was wrong!<br/>');

}

}




반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 6-3_Timer.html  (0) 2016.12.07
[JavaScript] 6-2_Navitator.js  (0) 2016.12.07
[JavaScript] 6-0_BrowserControl.html  (0) 2016.12.07
JavaScript 소스코드  (0) 2016.12.07
[JavaScript] 5-3_simulation.js  (0) 2016.12.07

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Browser Control</title>

</head>

<body>

<div id ="6-1">

<h3>6-1_BrowserControl</h3>

<script type="text/javascript" src = "6-1_BrowserControl.js"></script>

<p>while = false<br/>

6-1_BrowserControl.js를 열어 false를 true로 변경하면 작동</p>

</div>

<div id = "6-2_Navigator.js">

<h3>6-2_Navigator</h3>

<p>Navigator object<br/>

브라우저와 관련된 정보를 얻을수 있는 객체.</p>

<script type = "text/javascript" src = "6-2_Navigator.js"></script>

</div>

<div id = "6-5_History.js">

<h3>6-5_History</h3>

<p>History object<br/>

지난 페이지로 돌아가기 위해 사용되는 객체.</p>

<script type = "text/javascript" src = "6-5_History.js"></script>

<button type = "button" onclick = "goBack();">제자리로</button><br/>

<a href = "6-5_iframe.html?page = 1" target = "iframe">페이지 이동</a><br/>

<iframe name = "iframe" src = "about:blank" width = "200" height = "200"></iframe>

</div>

<div id = "6-8_Cookie.js">

<h3>6-8 Cookie Object</h3>

<p>쿠키는 브라우저를 닫아도 어떠한 정보를 저장하도록 하고 그 정보를 이용해 역할을 할 수 있도록 해주는것<br/>

쿠키는 사용자의 브라우저가 설치된 PC의 특정위치에 텍스트 파일로 남게된다<br/>

쿠키는 보안에 취약하므로 중요한 정보는 쿠키로 저장해서는 안된다.<br/>

쿠키는 window객체가 아닌 document객체에 소속되어있다.<br/>

</p>

<script type = "text/javascript" src = "6-8_Cookie.js"></script>

</div>

</body>

</html>


6-0_BrowserControl.html


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 6-2_Navitator.js  (0) 2016.12.07
[JavaScript] 6-1_BrowserControl.js  (0) 2016.12.07
JavaScript 소스코드  (0) 2016.12.07
[JavaScript] 5-3_simulation.js  (0) 2016.12.07
[JavaScript] 5-3_SimpleOOPinJavaScript.html  (0) 2016.12.07

제가 올리는 분류 "[JavaScript] 열혈강의"의 자바스크립트 예시코드는 

다음 책을 통해 학습 한 내용을 포스트 하였음을 알려드립니다.


"열혈강의 No More Copy & Paste 자바스크립트 - 2012년 8월 25일 초판"


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 6-1_BrowserControl.js  (0) 2016.12.07
[JavaScript] 6-0_BrowserControl.html  (0) 2016.12.07
[JavaScript] 5-3_simulation.js  (0) 2016.12.07
[JavaScript] 5-3_SimpleOOPinJavaScript.html  (0) 2016.12.07
[JavaScript] 5-2_Function.js  (0) 2016.12.07

var Unit = function(hp, name)

{

this.fullHealth = hp;

this.health = hp;

this.name = name;

this.power = 1;

this.speed = 1000;

this.level = 1;

this.target = null;

this.attackID = null;

var self = this;

this.isDead = function()

{

return (self.health <= 0);

};

this.attack = function()

{

if(self.target)

{

self.target.damage(self.power);

self.board.innerHTML =  [

self.name, '의 공격대상 : ', self.target.name,

'<br>데미지 : ', self.power, ' 대상의 남은 체력 : ', self.target.hp, '<br>'

].join(' ') + self.board.innerHTML; 

if(self.target.isDead())

{

self.board.innerHTML = self.target.name + ' is dead ! ' + 

'<br> Winner is ' + self.name  + ' !' + self.board.innerHTML;

self.stopAttack();

self.target = null;

self.target.target = null;

}

}

console.log(self.name + " attack " + self.target);

};

this.damage = function(power)

{

self.health -= power;

if(self.isDead())

{

self.stopAttack();

self.board.innerHtml =  'You are dead !<br>' + self.board.innerHTML;

}

};

this.levelUp = function(hp, power, speed)

{

self.level++;

self.fullHealth += hp;

self.hp = self.fullHealth;

self.power +=power;

self.speed -=speed;

self.board.innerHTML = "Level up ! " + (self.level -1) + " => " + self.level + "<br>" + self.board.innerHTML;

};

};


var Human = function(name)

{

Unit.apply(this, [50, name]);

this.board = document.getElementById('fightlog1');

var self = this;

this.expFull = function() 

{

self.levelUp(40,2,50);

};

this.startAttack = function(target)

{

self.target = target;

self.attackID = setInterval(self.attack, self.speed);

};

this.stopAttack = function()

{

self.target = null;

clearInterval(self.attackID);

};

console.log("Human is created\n" + self.hp);

};


var Magician = function(name)

{

Unit.apply(this, [40, name]);

this.skillSpeed = 3000;

this.skillID = null;

this.skillPower = 2;

this.board = document.getElementById('fightlog2');

var self = this;

this.skill = function()

{

if(!self.target || self.target.isDead())

{

self.stopAttack();

}

else

{

self.target.damage(self.skillPower);

self.board.innerHTML = [

self.name, '의 공격대상 : ', self.target.name,

'<br>스킬사용 ! 데미지 : ', self.skillPower, ' 대상의 남은 체력 : ', self.target.hp, '<br>'

].join(' ') + self.board.innerHTML; 

}

};

this.expFull = function() 

{

self.levelUp(30,1,50);

self.skillPower += 2;

self.skillSpeed -= 30;

};

this.startAttack = function(target)

{

self.target = target;

self.attackID = setInterval(self.attack, self.speed);

self.skillID = setInterval(self.skill, self.skillSpeed);

};

this.stopAttack = function()

{

self.target = null;

clearInterval(self.attackID);

clearInterval(self.skillID);

};

console.log("Magician is created\n" + this.name + this.hp );

};


window.onload = function()

{

man = new Human('Man');

woman = new Magician('Woman');                            

}


function startWar()

{

man.stopAttack();

woman.stopAttack();

man.board.innerHTML = '';

woman.board.innerHTML = '';

man.name = document.getElementById('humanName').value;

woman.name = document.getElementById('magicianName').value;

man.startAttack(woman);

woman.startAttack(man);

}


function stopWar()

{

man.stopAttack();

woman.stopAttack();

man.board.innerHTML = '';

woman.board.innerHTML = '';

man.name = document.getElementById('humanName').value;

woman.name = document.getElementById('magicianName').value;

}


5-3_simulation.js


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 6-0_BrowserControl.html  (0) 2016.12.07
JavaScript 소스코드  (0) 2016.12.07
[JavaScript] 5-3_SimpleOOPinJavaScript.html  (0) 2016.12.07
[JavaScript] 5-2_Function.js  (0) 2016.12.07
[JavaScript] 5-1_OOPBasic.js  (0) 2016.12.07

<!DOCTYPE html>

<html>

<head>

<meta charset = "UTF-8">

<title>Simple OOP in Javasript</title>

<script type ="text/javascript" src = "5-3_simulation.js"></script>

  </head>

<body>

<h1>Attack simulation game</h1>

<div id = "ctrlSection">

<input type = "text" id = "humanName"/>  Human Name

<button type = "button" onClick = "man.expFull();">Level Up</button>

<br/>

<input type = "text" id = "magicianName"/>  Magician Name

<button type = "button" onClick = "woman.expFull();">Level up</button>

<br/>

<button type = "button" onClick = "startWar();" > Start battle </button>

<button type = "button" onClick = "stopWar();" > Stop battle </button>

<button type = "button" onClick = "man.expFull(); woman.expFull();" > Both level up  </button>

<br/>

</div>

<div id = "logSection">

<h3>Human battle log</h3>

<div id = "fightlog1" style = "height : 150px; overlow : scroll;"></div>

<h3>Magician battle log</h3>

<div id = "fightlog2" style = "height : 150px; overlow : scroll;"></div>

</div>

</body>

</html>


5-3_SimpleOOPinJavascript.html


반응형

'Programming > JavaScript' 카테고리의 다른 글

JavaScript 소스코드  (0) 2016.12.07
[JavaScript] 5-3_simulation.js  (0) 2016.12.07
[JavaScript] 5-2_Function.js  (0) 2016.12.07
[JavaScript] 5-1_OOPBasic.js  (0) 2016.12.07
[JavaScript] 5-0_OOPinJavaScript.html  (0) 2016.12.07

function call(a, b)

{

var intA = parseInt(a);

var intB = parseInt(b);

if(isNaN(intA) || isNaN(intB))

{

document.write("Not integer number : " + intA + ", " + intB + "<br>" );

}

else

{

document.write("Sum : " + (intA + intB));

}

}


document.write("call(a, b) => " );

call('a', 'b');

document.write("call(5, 7) => " );

call(5, 7);

 

 document.write("<br><br>");

 

 var StrBuffer = function()

 {

var buffer = [];

 

this.append = function(str)

{

buffer.push(str);

}

this.toString = function()

{

return buffer.join(' ');

}

 }

 

 var strBuff = new StrBuffer();

 strBuff.append('Hello');

 strBuff.append('Javascript');

 document.write(strBuff);


5-2_Function.js


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 5-3_simulation.js  (0) 2016.12.07
[JavaScript] 5-3_SimpleOOPinJavaScript.html  (0) 2016.12.07
[JavaScript] 5-1_OOPBasic.js  (0) 2016.12.07
[JavaScript] 5-0_OOPinJavaScript.html  (0) 2016.12.07
[JavaScript] 3-5_evalFunc.js  (0) 2016.12.07


human = function(x)

{

//Attribute : 객체 내부의 데이터

this.gender = x;

//Method : 기능이나 행위를 정의한 속성

this.tellGender = function()

{

};

};


//Prototype : 객체의 기본적인 속성을 정의함.

human.prototype.whatGender = function()

{

alert(this.gender);

};


man = new human("M");

woman = new human("F");

//man.whatGender();

//woman.whatGender();


5-1_OOPBasic.js


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 5-3_SimpleOOPinJavaScript.html  (0) 2016.12.07
[JavaScript] 5-2_Function.js  (0) 2016.12.07
[JavaScript] 5-0_OOPinJavaScript.html  (0) 2016.12.07
[JavaScript] 3-5_evalFunc.js  (0) 2016.12.07
[JavaScript] 3-4_TypeCastFunc.js  (0) 2016.12.07

<!DOCTYPE html>

<html>

<head>

<meta charset = "UTF-8">

<title>OOP in Javascript</title>

</head>

<body>

<div id = "object">

<h3>Object</h3>

<p>

객체란 어떤 목적의 단위로 묶어놓은 묶음<br>

객체들을 더 큰 단위로 묶어놓은것 또한 객체.<br>

자바스크립트에선 {}를 사용해 '이름 : 값' 형식으로 객체를 만듦.<br>

이러한 방식을 JSOM이라 함.<br>

</p>

</div>

<div id = "5-1_OOPBasic.js">

<h3>5-1_OOPBasic.js</h3>

<script type="text/javascript" src = "5-1_OOPBasic.js"></script>

</div>

<div id="OOP">

<p>

클래스 : 문제 해결을 위해 같은 잡단에 속하는 속성과 행위를 정의한것<br>

객체 : 클래스의 인스턴스(실제 메모리상에 할당된 것)<br>

메세지 : 객체를 사용하는 방법, 객체에 내리는 명령<br>

추상화 : 불필요한 정보는 숨기고 필요한 정보만 보여주도록 함<br>

상속 : 상속을 받은 새로운 클래스가 상속을 시켜준 기존 클래스의 자료와 연산을 이용할 수 있도록 함<br>

다중상속 : 두개 이상의 클래스로부터 상속을 받을 수 있음.<br>

다형성 : 한 요소에 여러기능을 넣는것으로 오버라이딩과 오버로딩이 있다.<br>

동적바인딩 : 실행중에 일어나거나 변경될 수 있는 바인딩.<br>

</p>

</div>

<div id = "5-2_Function.js">

<h3>5-2_Function.js</h3>

<script type="text/javascript" src = "5-2_Function.js"></script>

</div>

</body>

</html>


5-0_OOPinJavascript.html


반응형

'Programming > JavaScript' 카테고리의 다른 글

[JavaScript] 5-2_Function.js  (0) 2016.12.07
[JavaScript] 5-1_OOPBasic.js  (0) 2016.12.07
[JavaScript] 3-5_evalFunc.js  (0) 2016.12.07
[JavaScript] 3-4_TypeCastFunc.js  (0) 2016.12.07
[JavaScript] 3-3_escapeFunc.js  (0) 2016.12.07

+ Recent posts