티스토리 뷰
# 자바스크립트
[ex]
<html>
<head>
<style type="text/css">
td { border:1px solid navy; }
</style>
</head>
<body>
<table>
<tr>
<script>
for(a=1; a<11; a++){
document.write("<td>"+a+"</td>");
}
</script>
</tr>
</table>
</body>
</html>
[ex]
<html>
<head>
<style type="text/css">
td { border:1px solid navy; }
</style>
</head>
<body>
<table>
<script>
for(a=1; a<11;a++){
document.write("<tr><td>"+a+"</td></tr>");
}
</script>
</table>
</body>
</html>
# 함수선언과 호출하기
[ex]
<html>
<head>
<script>
function printGugudan(dan){
document.write("<<< +dan+"단 >>>");
for(n=1; n<11; n++){
document.write(dan);
document.write("*");
document.write(n);
document.write("=");
document.write(dan*n);
document.write("<br/>");
}
}
</script>
</head>
<body>
<table>
<script>
printGugudan(5);
printGugudan(2);
</script>
</table>
</body>
</html>
[ex]
<html>
<head>
<script>
function print(cnt){
for(a=1; a<=cnt; a++){
document.write(a);
}
}
</script>
</head>
<body>
<script>
print(5);
</script>
</body>
</html>
[ex]
<html>
<head>
<script>
function max(a,b){
document.write(a>b ? a : b);
document.write("<br/>");
}
function min(a,b){
document.write(a<b ? a : b);
document.write("<br/>");
}
</script>
</head>
<body>
<script>
min(5,8);
max(4,1);
min(18,20);
</script>
</body>
</html>
# 이벤트처리하기
[ex]
<html>
<head>
<style type="text/css">
input {
background-color:pink;
}
</style>
<script>
function a(){
abc.style.backgroundColor="green";
}
</script>
</head>
<body>
<input type="button" id="abc" onClick="a()">
<input type="text">
</body>
</html>
[ex]
<html>
<head>
<style type="text/css">
input {
background-color:pink;
}
</style>
<script>
function a(){
abc.style.backgroundColor="green";
}
</script>
</head>
<body>
<input type="button" onclick="a()">
<input type="text" id="abc">
</body>
</html>
[ex]
<html>
<head>
<style type="text/css">
input {
background-color:pink;
border-width:2px;
border-style:solid;
border-color:red;
}
</style>
<script>
function a(){
abc.style.backgroundColor="green";
//here
}
</script>
</head>
<body>
<INPUT type="button" id="abc" onClick="a()">
<input type="text">
</body>
</html>
[ex]
<html>
<head>
<style type="text/css">
input {
background-color:pink;
}
</style>
<script>
function a(){
abc.value="홍길동";
def.value="김길동";
}
</script>
</head>
<body>
<input type="button" id="def" value="aa" onclick="a()">
<input type="text" id="abc" value="bb">
</body>
</html>
'VIEW > JAVASCRIPT' 카테고리의 다른 글
| [javascript]객체생성방법,for in,date객체,Array객체 (0) | 2017.12.01 |
|---|---|
| [javascript] 함수의 종류,객체,String내장객체 (0) | 2017.12.01 |
| [javascript] input type,자료형,주석문,배열,내장함수 (0) | 2017.12.01 |
| [javascript] html,css 기본문법 (0) | 2017.12.01 |
| [javascript] 자바스트립트란? (0) | 2017.12.01 |
댓글