-
자바스크립트 3일차_내 소스교육/자바스크립트 2014. 9. 4. 09:57
<html>
<head>
<meta charset='utf-8'>
<title>SDS 커피</title>
</head>
<body>
<h2> 3일차</h2>
<table>
<th>메뉴</th>
<th>가격</th>
<th>수량</th>
<tr>
<td>아메리카노</td>
<td>4.0</td>
<td><input type='text' name='latte_qty'></td>
</tr>
<tr>
<td>카페라떼</td>
<td>4.5</td>
<td><input type='text'></td>
</tr>
<tr>
<td>카푸치노</td>
<td>5.0</td>
<td><input type='text'></td>
</tr>
</table>
<br><script type="text/javascript" src="day3.js"></script>
<script type="text/javascript">
//고계함수 - 인수나 반환값이 함수인 함수
function arrayWalk (data,f) {
for(var key in data){
f(key, data[key]);
}
}
function showElement(key, value){
document.write(key+': '+value+'<br>');
}
var ary = [1,2,4,8,16];
arrayWalk(ary,showElement);
document.writeln('<br>');var ary1= [5,25,10];
document.writeln(ary1.sort());
document.writeln(ary1.sort(function(x,y){return x -y;}));//스코프체인
document.writeln('<br><br>');
var x='global';
function outerFunc(){
var y = 'local';
function innerFunc(){
var z = 'local inner';
document.writeln(z);
document.writeln(y);
document.writeln(x);
}
innerFunc();
}
outerFunc();
document.writeln('<br><br>');//클로저 - 동일한 행동을 하는 객체(하나의 처리)
function closure(init){
var counter = init;
return function(){
return ++counter;
}
}
var myClosure = closure(1);
var myClosure1 = closure(100);
document.writeln(myClosure());
document.writeln(myClosure1());
document.writeln(myClosure());
document.writeln(myClosure1());
document.writeln('<br><br>');var faces = ['smile', 'sad', 'happy'];
function popFaces(faces){
var num = 0;
return function(){
return faces[num++];
}
}
var pop = popFaces(faces);
document.writeln(pop());
document.writeln(pop());
document.writeln(pop());
document.writeln(pop());
document.writeln('<br><br>');//클로저로 테이블 로우 생성
var coffee_list= [['americano',4,'americano.jpg'],['latte',4.5,'latte.jpg'],['espresso',3,'espresso.jpg']];
function genTableRow(data){
var rawnum = 0;
return function(){
return '<tr><td>'+data[rawnum][0]+'</td><td>'+data[rawnum][1]+'</td><td>'+data[rawnum++][2]+'</td></tr>';
}
}
var gen = genTableRow(coffee_list);
document.writeln('<table name="html_table" border=1 rules=all>');
document.writeln(gen());
document.writeln(gen());
document.writeln(gen());
document.writeln('</table>');//강사님 스타일
document.writeln('<br>');
function arrayToHtmlTable(data){
var html_table = '<table border=1 rules=all>';
var genTr = genTableRow(data);
var i;
for(i in data){
html_table += wrapWithTag(genTr(),'tr');
}
html_table +='</table>';
return html_table;
}
document.writeln(arrayToHtmlTable(coffee_list));
function wrapWithTag(src, tag){
var result = '<'+tag+'>';
result += src;
result += '</'+tag+'>';
return result;
}//프로토타입 클래스
var Member = function(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
this.getName = function(){
return this.lastName + ' ' + this.firstName;
}
};
var mem = new Member('야','왜');
document.writeln(mem.getName());//클래스에 동적 메소드 추가
document.writeln('<br><br>');
var Member1 = function(first,last){
this.first = first;
this.last = last;
}
var mem1 = new Member1('어이','너희');
mem1.getName1 = function(){
return this.last + ' '+ this.first;
}
document.writeln(mem1.getName1());
//아래 내용은 안됨 메서드 추가시 해당 객체에만 적용
//var mem2 = new Member1('야임마','너임마');
//document.writeln(mem2.getName1());
//이렇게 하면 된다.
Member1.prototype.getName2 = function(){
return this.first+' '+this.last;
}
var mem3 = new Member1('야임마1','너임마1');
document.writeln(mem3.getName2());
document.writeln(mem1.getName2());
document.writeln('<br><br>');//프로토타입 객체의 프로퍼티 삭제
var Member2 = function(){};
Member2.prototype.sex = '남자';
var me = new Member2();
var me1 = new Member2();
document.writeln(me.sex+'|'+me1.sex);
me1.sex = '여자';
document.writeln(me.sex+'|'+me1.sex);
delete me.sex
delete me1.sex
document.writeln(me.sex+'|'+me1.sex);</script>
<script type="text/javascript" src="coffee.js"></script>
<script type="text/javascript">
//받아온 데이터
var coffee_list= [['americano',4,'americano.jpg'],['latte',4.5,'latte.jpg'],['espresso',3,'espresso.jpg']];
//사용자가 선택한 항목
var selectedCoffee = '에스프레소';var i;
var coffee_list1 = [];
for(i in coffee_list){
coffee_list1.push(new Coffee(coffee_list[i]));
}
document.writeln(coffee_list1[0].getArray());</script>
<script type="text/javascript">
document.writeln('<br><br>');
var Animal = function(){}
Animal.prototype ={
walk : function(){
document.writeln('종종..');
}
};
var SuperAnimal = function(){}
SuperAnimal.prototype ={
walk : function(){
document.writeln('다다닷!');
}
};
var Dog = function(){};
Dog.prototype = new Animal();
var d1 = new Dog();
d1.walk();
Dog.prototype = new SuperAnimal();
var d2 = new Dog();
d2.walk();
d1.walk();</script>
</body></html>
'교육 > 자바스크립트' 카테고리의 다른 글
자바스크립트 4일차_내 소스 (0) 2014.09.05 자바스크립트 3일차_강사소스 (0) 2014.09.04 자바스크립트 2일차 (0) 2014.09.03 자바스크립트 1일차 (0) 2014.09.03
coffee.js
day3.html