★ 자바스크립트 실습(1)
1. 새로운 HTML파일을 생성한다.(test1.html)
2. 다음의 코딩을 작성한다.
3. 컴파일 후 실행하면 뜨는 메시지들
(1) alert 메시지 ☞ <head>, <body> 둘 다 가능!
<script type="text/javascript"> //자바스크립트의 시작!
alert("경고메시지");
/*
여러줄 주석 //여러줄 주석도 가능하다
*/
</script>
경고 메시지가 출력된다.
(2) js파일을 만들어서 출력하기
<script language="javascript" src="script.js"></script> //js파일의 내용을 불러옴
(3) 하이퍼링크 만들기
<a href="javascript:alert('자바스크립트')">하이퍼링크</a>
<input type="button" value="버튼" onclick="alert('버튼클릭')">
</body>
하이퍼링크를 누르면,
자바스크립트 메시지가 뜬다.
(4) 버튼 만들기
<body>
<a href="javascript:alert('자바스크립트')">하이퍼링크</a>
<input type="button" value="버튼" onclick="alert('버튼클릭')">
</body>
버튼을 누르면, "버튼클릭" 경고창이 표시된다.
★ 자바스크립트 실습(2)
(1) 계산결과 경고창에 표시하기 ☞ 11번줄
<script type="text/javascript">
//창에 html문서(document)의 출력(write)를 가리킴
document.write("homepage"+100+"<br>");
document.write(10+20);
document.write("c:\window\a.bmp")
alert("10*20="+10*20+"\n계산결과");
</script>
(2) 계산결과 일반 창에 표시하기 ☞ 8~10번
<script type="text/javascript">
//창에 html문서(document)의 출력(write)를 가리킴
document.write("homepage"+100+"<br>");
document.write(10+20);
document.write("c:\window\a.bmp")
alert("10*20="+10*20+"\n계산결과");
</script>
★ 자바스크립트 실습(3)
(1) 이름과 나이 출력하기 ☞ 20번부터...
var age=25;
document.write("name="+name+"<br>");
document.write("age="+age+"<br>");
age="30세";
document.write("age="+age+"<br>");
여기서 특이한 점은, 자바스크립트는 형을 따지지 않는다는 점이다.
"var"는 써도 되고 안써도 된다. 위 소스에서 나이인 age=25를 지정했는데,
다시 age="30세"로 문자형으로 지정하였다. 원래 자바였으면 안됐을텐데, 자바스크립트는 가능하다.
★ 자바스크립트 실습(4)
(1) switch문으로 원하는 별표 출력하기 ☞ 12번부터..
cnt=3;
switch(cnt){
case 1: alert("★"); break;
case 2: alert("★★"); break;
default: alert("★★★"); break;
}
★ 자바스크립트 실습(5)
(1) 일반적인 <h>태그 출력하기 ☞ 8~13번
<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>
(2) 자바스크립트 안에 for문으로 <h>태그 구현하기 ☞ 14~17번
<script type="text/javascript">
for(i=1; i<=6; i++){
document.write("<h"+i+">제목"+i+"</h"+i+">");
}
</script>
(3) 자바스크립트 for문으로 구구단 5단 구현하기 - <table>태그 사용
document.write("<table border=1>");
document.write("<tr><td>5단</td></tr>");
for(i=1; i<=9; i++){
document.write("<tr><td>"+"5*"+i+"="+5*i+"</td></tr>");
}
document.write("</table>");
</script>
(4) 자바스크립트 for문으로 1~10, 1~20, ... , 1~100까지의 합 구현하기
sum=0;
i=1;
while(i<=100){
sum += i;
if(i%10==0){
//1~10까지의 합:..
//..
//1~100까지의 합:..
document.write("1~"+i+"까지의 합:"+sum+"<br>");
}
i++;
}
</script>
s(ㅡ_ㅡ)/..............i'm hungry......I like horor movie........
'N스크린하이브리드앱과정 > HTML&CSS' 카테고리의 다른 글
| [3주][1일][5~7th] 자바스크립트(JAVA SCRIPT) (0) | 2013.07.29 |
|---|---|
| [3주][1일][1~2th] HTML5 : 표 이쁘게 꾸미기(이클립스) (0) | 2013.07.29 |
| [2주][5일][1~2th] HTML5 맛보기! (0) | 2013.07.26 |
| [2주][4일][1~2교시] CSS: 레이아웃 만들기, 영역 나누기. (0) | 2013.07.25 |
| [2주][4일][1~2교시] CSS: 가상선택자. 롤오버효과, 하이퍼링크 등 (0) | 2013.07.25 |