<html>
<head>
<title>변수를 따옴표 속에 넣으면 어떻게 될까.</title>
<script type=”text/javascript”>
<!–
var str01 = “처음으로 작성한 script”
document.write(“str01″)
// –>
</script>
</head>
<body>
</body>
</html>
<body>
<script type=”text/javascript”>
<!–
txt1 = “Web designer”
txt2 = ” must be creative.”
txt3 = txt1 + txt2
document.write(txt3)
// –>
</script>
</body>
<body>
<script type=”text/javascript”>
<!–
txt1 = “Web designer”
txt2 = ” must be creative.”
txt3 = “<b>” + txt1 + txt2 + “</b>”
document.write(txt3)
// –>
</script>
</body>
<body><p onclick=”javascript:alert(‘경고창을 띄웁니다.’)”>클릭해 주세요.</p></body>
<script type=”text/javascript”>
<!–
function functionName(){
실행되어야 할 내용
}
// –>
</script>
<html>
<head>
<title>Function 뒷 부분에 이름을 써서 호출하는 방법</title>
<script type=”text/javascript”>
<!–
function makeFunction(){
alert(“Function 만들기”)
} //여기까지가 function 이고
makeFunction() //뒷 부분에 function 이름을 적어 줍니다.
// –>
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<title>Window Event Handler 로 호출하는 방법</title>
<script type=”text/javascript”>
<!–
function makeFunction(){
alert(“Function 만들기”)
}
// –>
</script>
</head>
<body onload=”makeFunction();”>
</body>
</html>
<html>
<head>
<title>불러내고 싶을 때 불러내는 방법</title>
<script type=”text/javascript”>
<!–
function makeFunction(){
alert(“Function 만들기”)
}
// –>
</script>
</head>
<body>
<input type=”button” value=”이 넘! 나오너라.” onclick=”makeFunction()” />
</body>
</html>
function functionName(변수){
Property 또는 Method(변수)
}
<html>
<head>
<title>대입 변수가 있는 Function</title>
<script type=”text/javascript”>
<!–
function makeFunction(txt){
alert(txt)
}
// –>
</script>
</head>
<body>
<input type=”button” value=”좋은 아침입니다.” onclick=”makeFunction(‘좋은 아침입니다.’)” />
<input type=”button” value=”좋은 점심입니다.” onclick=”makeFunction(‘좋은 점심입니다.’)” />
<input type=”button” value=”좋은 저녁입니다.” onclick=”makeFunction(‘좋은 저녁입니다.’)” />
</body>
</html>
<html>
<head>
<title>CSS Scripting 을 Function으로 묶기</title>
<style type=”text/css”>
<!–
.normal{
font-weight:bold;
border:1px solid #ffffff;
}
–>
</style>
<script type=”text/javascript”>
<!–
//mouseOver 때의 Function
function mouseOver(obj){
obj.style.color = “red”
obj.style.backgroundColor = “gold”
obj.style.border = “1px solid royalblue”
obj.style.fontWeight = “bold”
obj.style.cursor = “hand”
}
//mouseOut 때의 Function
function mouseOut(obj){
obj.style.color = “”
obj.style.backgroundColor = “”
obj.style.border = “1px solid #ffffff”
obj.style.fontWeight = “”
obj.style.cursor = “”
}
// –>
</script>
</head>
<body>
<p onmouseover=”mouseOver(this);” onmouseout=”mouseOut(this);”>
CSS Scripting 을 Function으로 묶기</p>
</body>
</html>
html>
<head>
<title>if 문 예제</title>
<script type=”text/javascript”>
<!–
var a = 9 //코드 연습장 실행 후 9가 아닌 값으로 바꾸고 실행해 보세요. 아무 일도 안 일어납니다.
if (a == 9){
document.write(“참 입니다.”)
}
// –>
</script>
</head>
<body>
</body>
</html>
html>
<head>
<title>if 문 예제</title>
<script type=”text/javascript”>
<!–
var a = 9 //코드 연습장 실행 후 9가 아닌 값으로 바꾸고 실행해 보세요.
if (a == 9)
{document.write(“참 입니다.”)}
else
{document.write(“거짓 입니다.”)}
// –>
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<title>조건문과 style을 이용한 보이기 감추기</title>
<script type=”text/javascript”>
<!–
//show_hide라는 이름으로 Function을 만들고 obj라는 대입변수를 하나 잡습니다.
function show_hide(obj){ //전체 괄호 시작
if (obj.style.display == “none”) //대상 Tag의 현재 display값이 none 이라면
{obj.style.display = “block”} //display값을 block으로 바꾸고(보이게 됨)
else //그렇지 않다면 즉, display 값이 block이면
{obj.style.display =”none”} //display값을 none 으로 바꾸라.(감추게 됨)
} //전체 괄호를 닫아 줍니다.
// –>
</script>
</head>
<body>
<input type=”button” value=”보이기 감추기”
onclick=”show_hide(div_01);” style=”width:200px;” />
<div style=”width:200px;height:200px;display:none;background-color:gold;” id=”div_01″>
</div>
</body>
</html>
for (초기값; 조건; 증감식){ //초기값, 조건 증감식 사이를 semi-colon으로 구분해 줍니다.
실행 내용
}
사용예)
for (i = 1; i <= 6; i++){ // i 를 1 에서 시작해서 6보다 작거나 같을 때 까지 1씩 증가시켜라.
실행 내용 // 모두 6번에 걸쳐 내용이 실행 됨.
}
for 반복문을 이용하여 H1 에서 H6 까지 출력 하기
<html>
<head>
<title></title>
<script type=”text/javascript”>
<!–
for (i = 1; i <= 6; i++)
{
document.write(“<h” + i + “>제목 ” + i + ” 입니다.”)
document.write(“</h” + i + “>”)
}
// –>
</script>
</head>
<body>
</body>
</html>
while (조건) {
실행 내용
}
while 반복문을 이용하여 H1 에서 H6 까지 출력 하기
<html>
<head>
<title></title>
<script type=”text/javascript”>
<!–
var i = 1 //변수 i 와 초기값 1을 지정합니다.
while ( i <= 6) //조건식을 지정합니다.
{
document.write(“<h” + i + “>제목 ” + i + ” 입니다.”)
document.write(“</h” + i + “>”)
i++ //증감식을 설정합니다.
}
// –>
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<title></title>
<script type=”text/javascript”>
<!–
var i = 1 //변수 i 와 초기값 1을 지정합니다.
do {
document.write(“<h” + i + “>제목 ” + i + ” 입니다.”)
document.write(“</h” + i + “>”)
i++ //증감식을 설정합니다.
}
while ( i <= 6) //조건식을 지정합니다.
// –>
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<title>for 반복문을 이용한 Table 생성기</title>
<script type=”text/javascript”>
<!–
//makeTable(col, row, border) 이라는 이름으로 대입 변수가 3개인 Function 만들기
function makeTable(row, col, border){
document.write(“<table border=” + border + ” align=center style=font-size:11px;>n”)
for (var i=1; i <= row; i++){ //tr 만드는 for 반복문 시작
document.write(“<tr align=”center”>n”)//tr 시작
for (var j=1; j <= col; j++){ //td 만드는 for 반복문 시작
document.write(“<td width=”120”>”+ i +”행 “+ j +”열</td>n”)// td 만들기 시작
} //td 만드는 for 반복문 끝
document.write(“</tr>nn”)
} //tr 만드는 for 반복문 끝
document.write(“</table>n”) //Table 끝
} //Function 끝
// –>
</script>
</head>
<body>
<!– 아래의 makeTable(50, 5, 1)로 row에는 50이, col에는 5가 각각 대입된다. –>
<button type=”button” style=”width:100; height:25; background-color:navy;
color:white;” onclick=”makeTable(50, 5, 1)”>누르시져!</button>
</body>
</html>