<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>메인페이지</title>
<link rel="stylesheet" href="mainTest.css">
</head>
<body>
<div id="container">
<nav>
<ul>
<li><a href="mainTest.html">Home</a></li>
<li><a href="aboutme.html">About me</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#lyrics1">Lyrics</a></li>
</ul>
</nav>
<header></header>
<section>
<a href="https://c11.kr/h0uk"><img src="images/mrok.jpg" width="100px" height="100px" ></a>
<a href="https://amongthestar.tistory.com"><img src="images/mrok.jpg" width="100px" height="100px" ></a>
<article id="contact">
<p><i>email</i> </p>
<p><i>phone</i> +82 10 1234 5678</p>
<p><i>homepage</i> amongthestar.tistory.com</p>
</article>
<article id="bgc">
<article id="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>
<article id="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>
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);
}
function changePic(){
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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="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";
}else if(info.indexOf('macintosh')>=0){
osImg="macintosh.png";
}else if(info.indexOf('iphone'>=0)){
osImg="iphone.png";
}else if(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>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>이 문서가 열리면 자동으로 팝업 창이 표시 됩니다.</p>
</body>
<script src="js/pop.js"></script>
</html>
pop.js
function openPop(){
var newWin=window.open("popup.html","","width=400, height=400");
if(newWin==null){
alert("팝업이 차단되어 있습니다. 차단을 해제하고 새로고침을 하세요.");
}
}
window.onload=openPop;
function showDetail(){
document.querySelector('#desc').style.display="block";
document.querySelector('#open').style.display="none";
}
function hideDetail(){
document.querySelector('#desc').style.display="none";
document.querySelector('#open').style.display="block";
}
var now=new Date(); //오늘 날짜 정보를 date객체의 인스턴스 now객체로 만듦
var firstDay=new Date("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);
function calcDate(days){
var future=toFirst+days*(1000*60*60*24); //처음 만난 날에 밀리초를 날로 바꾸어서 더함
var someday=new Date(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>
<html lang="ko">
<head>
<meta charset="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>
<html lang="ko">
<head>
<meta charset="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>
<html lang="ko">
<head>
<meta charset="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>
<html lang="ko">
<head>
<meta charset="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>
<html lang="ko">
<head>
<meta charset="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>
<html lang="ko">
<head>
<meta charset="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>
<html lang="ko">
<head>
<meta charset="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>
<html lang="ko">
<head>
<meta charset="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>
