<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>메인페이지</title><linkrel="stylesheet"href="mainTest.css"></head><body><divid="container"><nav><ul><li><ahref="mainTest.html">Home</a></li><li><ahref="aboutme.html">About me</a></li><li><ahref="#contact">Contact</a></li><li><ahref="#lyrics1">Lyrics</a></li></ul></nav><header></header><section><ahref="https://c11.kr/h0uk"><imgsrc="images/mrok.jpg"width="100px"height="100px" ></a><ahref="https://amongthestar.tistory.com"><imgsrc="images/mrok.jpg"width="100px"height="100px" ></a><articleid="contact"><p><i>email</i></p><p><i>phone</i> +82 10 1234 5678</p><p><i>homepage</i> amongthestar.tistory.com</p></article><articleid="bgc"><articleid="lyrics1"><p><i>Coffee & TV</i></p><p>Do you feel like a chain store?<br> Practically floored<br> One of many zeros<br> Kicked around, bored<br> Your ears are full but you're empty<br> Holding out your heart<br> To people who never really<br> Care how you are<br> So give me coffee and TV, peacefully<br> I've seen so much, I'm going blind<br> And I'm brain-dead virtually<br> Sociability<br> Is hard enough for me<br> Take me away from this big, bad world<br> And agree to marry me<br> So we can start over again<br> Do you go to the country?<br>
It isn't very far<br> There's people there who will hurt you<br> 'Cause of who you are</p></article><articleid="lyrics2"><p>Your ears are full of their language<br> There's wisdom there you're sure<br> 'Til the words start slurring<br> And you can't find the door<br> So give me coffee and TV, peacefully<br> I've seen so much, I'm going blind<br> And I'm brain-dead virtually<br> Sociability<br> Is hard enough for me<br> Take me away from this big bad world<br> And agree to marry me<br> So we can start over again<br> So give me coffee and TV, peacefully<br> I've seen so much, I'm going blind<br> And I'm brain-dead virtually<br> Sociability<br> Is hard enough for me<br> Take me away from this big bad world<br> And agree to marry me<br> So we can start over again<br> Oh, we can start over again<br> Oh, we can start over again<br> Oh, we can start over again<br> Oh, we can start over again</p></article></article></section><footer><p>ⓒ</p><p>amongthestar.tistory.com</p></footer></div></body></html>
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><linkrel="stylesheet"href="css/dom.css"></head><body><divid="container"><h1id="heading">에디오피아 게뎁</h1><divid="prod-pic"><imgsrc="images/coffee-pink.jpg"alt="에디오피아 게뎁"id="cup"width="200"height="200"><divid="small-pic"><imgsrc="images/coffee-pink.jpg"class="small"><imgsrc="images/coffee-blue.jpg"class="small"><imgsrc="images/coffee-gray.jpg"class="small"></div></div><divid="desc"><ul><li>상품명: 에디오피아 게뎁</li><liclass="bluetext">판매가: 9,000원</li><li>배송비: 3,000원<br>(50,000원 이상 구매 시 무료)</li><li>적립금: 180원(2%)</li><li>로스팅: 2019.06.17</li><button>장바구니 담기</button></ul><ahref="#"id="view">상세 설명 보기</a></div><divid="detail"><hr><h2>상품 상세 정보</h2><ul><li>원산지: 에디오피아</li><li>지 역: 이르가체프 코체레</li><li>농 장: 게뎁</li><li>고 도: 1,950~2,000</li><li>품 종: 지역 토착종</li><li>가공법: 워시드</li></ul><h3>Information</h3><p>2차 세계대전 이후 설립된 게뎁 농장은 유기농 인증 농장으로 여성의 고용 창출과 지역사회 발전에 기여하며 3대째 이어져 내려오는 오랜 역사를 가진 농장입니다. 게뎁 농장은 SCAA 인증을 받은 커피 품질관리 실험실을 갖추고 있어 철저한 관리를 통해 스페셜티 커피를 생산 합니다.</p><h3>Flavor Note</h3><p>은은하고 다채로운 꽃향, 망고, 다크 첼리, 달달함이 입안 가득.</p></div></div><scriptsrc="js/dom.js"></script></body></html>
var bigPic=document.querySelector("#cup"); //큰 이미지 가져오기var smallPic=document.querySelectorAll(".small"); //작은 이미지 가져오기for(var i=0;i<smallPic.length;i++){
// var newPic=this.src; //클릭 이벤트가 발생한 대상의 src 속성 저장// bigPic.setAttribute("src", newPic); //newPic 값을 큰 이미지의 src 속성에 할당// smallPic[i].onclick=changePic;
smallPic[i].addEventListener("click", changePic);
}
functionchangePic(){
var newPic=this.src;
bigPic.setAttribute("src",newPic);
}
var isOpen=false;
var view=document.querySelector("#view");
view.addEventListener("click",function(){
if(isOpen==false){
document.querySelector("#detail").style.display="block";
view.innerText="상세 설명 닫기"
isOpen=true;
}else{
document.querySelector("#detail").style.display="none";
view.innerText="상세 설명 보기"
isOpen=false;
}
});
브라우저 객체 모델 (Browser Object Model, BOM)
Window, Navigator, history, location, screen
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>var info=navigator.userAgent.toLowerCase();
var osImg=null;
if(info.indexOf('windows')>=0){
osImg="windows.png";
}elseif(info.indexOf('macintosh')>=0){
osImg="macintosh.png";
}elseif(info.indexOf('iphone'>=0)){
osImg="iphone.png";
}elseif(info.indexOf('android')>=0){
osImg="android.png";
}
document.write("<img src=\"../0803/images/"+osImg+"\">","<br>");
var scr=screen;
var sc_w=scr.width;
var sc_h=scr.height;
document.write("모니터 해상도 너비:"+sc_w+"px","<br>");
document.write("모니터 해상도 높이:"+sc_h+"px","<br>");
</script></head><body></body></html>
팝업창 뜨도록 함
bom2.html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><p>이 문서가 열리면 자동으로 팝업 창이 표시 됩니다.</p></body><scriptsrc="js/pop.js"></script></html>
pop.js
functionopenPop(){
var newWin=window.open("popup.html","","width=400, height=400");
if(newWin==null){
alert("팝업이 차단되어 있습니다. 차단을 해제하고 새로고침을 하세요.");
}
}
window.onload=openPop;
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title><script>functionaddNum(a,b){
var sum=a+b;
return sum;
}
var num1=parseInt(prompt("첫번째 숫자?"));
var num2=parseInt(prompt("두번째 숫자?"));
var result=addNum(num1,num2);
alert("두 수를 더한 값은 "+result+" 입니다.");
</script></head><body></body></html>
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>민들레</title><linkrel="stylesheet"href="css/event.css"><scriptsrc="js/event.js"></script></head><body><divid="item"><imgsrc="images/flower1.jpg"alt="민들레 꽃"><buttonclass="over"id="open"onclick="showDetail()">상세 설명 보기</button><divid="desc"class="detail"><h4>민들레</h4><p>어디서나 매우 흔하게 보이는 잡초로써 바닥에 딱 붙어서 꽃봉오리 하나가 쏙 올라온다.톱니 모양의 입새와 눈에 확 띄는 노란 꽃이 인상적이다. 특히 꽃이 지고나면 솜털모양의 깃을 가진 씨앗들이 나오는데 바람을 타고 날아가서 널리 퍼진다.</p><buttonid="close"onclick="hideDetail()">상세 설명 닫기</button></div></div></body></html>
var now=newDate(); //오늘 날짜 정보를 date객체의 인스턴스 now객체로 만듦var firstDay=newDate("2020-05-22"); //처음 만난 날var toNow=now.getTime(); //오늘 날짜를 밀리초로 변경var toFirst=firstDay.getTime(); //처음 만난 날을 밀리초로 변경var passedTime=toNow-toFirst; //처음 만난 날과 오늘 날짜의 차이 (밀리초)var passedDay=Math.round(passedTime/(1000*60*60*24)); //밀리초를 일로 변환 후 반올림document.querySelector('#accent').innerText=passedDay+"일";
calcDate(100);
calcDate(200);
calcDate(365);
calcDate(500);
functioncalcDate(days){
var future=toFirst+days*(1000*60*60*24); //처음 만난 날에 밀리초를 날로 바꾸어서 더함var someday=newDate(future); //future값을 사용한 Date 객체의 인스턴스var year=someday.getFullYear(); //연도var month=someday.getMonth()+1; //월var date=someday.getDate(); //일document.querySelector("#date"+days).innerText=year+"년 "+month+"월 "+date+"일";
}
<!DOCTYPE html><htmllang="ko"><head><metacharset = "UTF-8"><title> 배열객체 </title><script>var arr_1 = ["사당", "교대", "방배", "강남"];
var arr_2 = ["신사", "압구정", "옥수"];
var greenArr=["교대", "방배", "강남"];
var yellowArr=["미금", "정자", "수서"];
var result=arr_1.join("-"); //지정값으로 문자열 연결document.write(result,"<br>");
result=arr_1.concat(arr_2); //배열 연결document.write(result,"<br>");
result=arr_1.slice(1,3);
document.write(result,"<br>");
arr_1.sort(); //오름차순 정렬document.write(arr_1,"<br>");
arr_2.reverse(); //거꾸로 정렬document.write(arr_2,"<br>");
greenArr.splice(2,1,"서초","역삼"); //2번부터 하나만 삭제하고 서초와 역삼을 추가document.write(greenArr,"<br>");
var data1=yellowArr.pop();
document.write(data1,"<br>");
var data2=yellowArr.shift(); //맨 앞의 값 삭제document.write(yellowArr);
</script></head><body></body></html>
문자객체
<!DOCTYPE html><htmllang="ko"><head><metacharset = "UTF-8"><title> 문자 객체 </title><script>var name=prompt("이름을 영어로 입력");
var tel=prompt("전화번호 입력");
var upperName=name.toUpperCase();
document.write(upperName,"<br>");
var result_tel=tel.substring(0, tel.length-4)+"****";
document.write(result_tel);
</script></head><body></body></html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><title> 선택문 </title><script>
var site = prompt("네이버, 다음, 네이트, 구글 중 \
즐겨 사용하는 포털 검색 사이트는?", "");
var url;
switch(site){
case "구글": url="www.google.com"; break;
case "다음": url="www.daum.net"; break;
case "네이버": url="www.naver.com"; break;
case "네이트": url="www.nate.com"; break;
default : alert("해당 사이트 url 누락");
}
if(url){
location.href="http://"+url;
}
</script></head><body></body></html>
반복문 while
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><title> while문 </title><script>var i = 1;
while(i<=10){
document.write("안녕"+i,"<br>");
i++;
}
document.write("==== The End ====");
</script></head><body></body></html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><title> while문 </title><script>var i = 1;
do{
document.write("안녕"+i,"<br>");
i++;
}while(i<=10)
document.write("==== The End ====");
</script></head><body></body></html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><title> while문 </title><script>var i = 1;
for(i=1;i<=10;i++){
document.write("안녕"+i, "<br>");
}
document.write("==== The End ====");
</script></head><body></body></html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><title> 외부 자바스크립트 연동 </title><script>var box;
box=100;
box=30;
document.write(box, "<br>");
var a="javascript";
document.write(a, "<br>");
var str="자바스크립트";
var num=100;
document.write(typeof num, "<br>");
document.write(typeof str);
</script></head><body></body></html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><title> 산술 연산자 </title><script>var num1 = 15;
var num2 = 2;
var result;
result=num1+num2;
document.write(result, "<br>");
result=num1*num2;
document.write(result, "<br>");
result=num1/num2;
document.write(result, "<br>");
result=num1%num2;
document.write(result, "<br>");
var t1="학교종이";
var t2="땡땡땡";
result=t1+t2;
document.write(result, "<br>");
var num1=10;
var num2=3;
num1+=num2;
document.write(num1);
</script></head><body></body></html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><title> 복합대입 연산자-테이블 만들기 </title><script>
var str="<tableborder='1'>";
str+="<tr>"
str+="<td>1</td><td>2</td><td>3</td>";
str+="</tr>"
str+="</table>"
document.write(str);
</script></head><body></body></html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><title> 비교 연산자 </title><script>var a = 10;
var b = 20;
var c = 10;
var f = "20";
var result;
result=a>b;
document.write(result,"<br>");
result=a<=b;
document.write(result,"<br>");
result=a!=b;
document.write(result,"<br>");
result=b===f;
document.write(result,"<br>");
</script></head><body></body></html>
스크립트에서 '같다'표시는 === 이다.
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><title> 삼항 조건 연산자 </title><script>var a = 10;
var b = 3;
//var result;var result=a>b? "자바스크립트":"hello";
document.write(result,"<br>");
</script></head><body></body></html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><title> 적정 몸무게 구하기 </title><script>var name=prompt("이름:","");
var weight=prompt("몸무게:","0");
var height=prompt("키:","0");
var normal_w=(height-100)*0.9;
var result=weight>=normal_w-5 && weight<=normal_w+5;
result=result? "적정체중":"적정체중이 아닙니다.";
document.write(name+"님은 "+result);
</script></head><body></body></html>
<!DOCTYPE html><htmllang="ko"><head><metacharset="UTF-8"><title> 종합실습1-1 </title><script>var price1 = 3000;
var price2 = 6000;
var price3 = 3000;
var total=price1+price2+price3;
total=total>10000? total-10000+"원 초과":"관리잘함";
document.write(total);
</script></head><body></body></html>
