336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
이번엔 위쪽 테두리를 넣을려고 합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv").style.borderTop = "1px solid #000000"; //위쪽메두리를 1픽셀로 검정색으로 추가합니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv' id='testDiv' style='width:100px'>text</div>
</body>
</html>
|
cs |
이화면은 실행화면입니다. 버튼을 클릭하면 밑에 그림처럼 출력을 해줍니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요. 이번엔 오른쪽 테두리를 추가할려고합니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv").style.borderRight = "1px solid #000000"; //오른쪽메두리를 1픽셀로 검정색으로 추가합니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv' id='testDiv'>text</div>
</body>
</html>
|
cs |
버튼을 클릭하기 전 그림입니다.
버튼을 클릭하면 오른쪽에 테두리를 생성해줍니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요. 이번엔 왼쪽 테두리예요. 각각의 면마다 테두리를 할꺼예요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv").style.borderLeft = "1px solid #000000"; //왼쪽메두리를 1픽셀로 검정색으로 추가합니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv' id='testDiv'>text</div>
</body>
</html>
|
cs |
첫번째 그림은 나오는 화면입니다.
두번째 그림은 결과화면으로 왼쪽테두리에 나옵니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요 이번엔 JAVASCRIPT에서 테두리 넣는것을 알려드릴꼐요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv").style.border = "1px solid #000000"; //1픽셀로 점선방식으로 검정색으로 넣습니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv' id='testDiv'>text</div>
</body>
</html>
|
cs |
이 화면에서 클릭하면
이렇게 대상에서 테두리가 나옵니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요. 이번엔 배경색을 넣을께요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv").style.backgroundColor = "#000000"; //RGB코드
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv' id='testDiv'>text</div>
</body>
</html>
|
cs |
이렇게 화면에서 버튼을 클릭하면
text가 있던 곳의 배경색이 검은색으로 바뀌어요
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요 이번엔 JAVASCRIPT CSS처리하는 방법을 시작할꼐요.
처음엔 내용이 보여지고 안보여지고 하는 것을 처리할께요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
if(document.getElementById("testDiv").style.display == "none") //안보여지는지 확인
document.getElementById("testDiv").style.display = ""; //안보여지면 보이게
else
document.getElementById("testDiv").style.display = "none"; //보여지면 안보이게
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv' id='testDiv'>text</div>
</body>
</html>
|
cs |
결과는 이렇게 나오는데요. 버튼을 눌르면 사라지고 다시 눌르면 나타납니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
이번엔 정수형태, 소수점형태, 문자열형태로 바꾸는 방법을 간단하게 알려드릴꼐요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
alert(parseInt('34.399')); //정수로 바꿔줍니다.
alert(parseFloat('34.778')); //소수점이 있는 숫자로 바꿔줍니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
</body>
</html>
|
cs |
parse???을 넣어주면됩니다. int는 소수점이 없는 형태라 .399가 잘려요.
float의 경우엔 소수점까지 나오는 경우가 잘리지 안습니다.
문자열은 딱히 형변환 없이 사용이 가능합니다.
이 그림은 34.399는 int형으로 바꿨어요.
이 그림은 float형으로 바꿔서 그대로 출력이 됩니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
이번엔 for문에 이어서 while문사용하는 방법을 알려드릴꼐요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 if_javascript 호출합니다.
function if_javascript(){
//txt_Value값을 가져옵니다.
var value = document.getElementById("txt_Value").value;
var result; //결과
var i = 1; //? * i
while(i < 10){
result = value * i;
console.log(value+"*"+i+"="+result);
i++;
}
}
</script>
</head>
<body>
<input type='text' id='txt_Value'/>
<input type='button' onclick='if_javascript()' value='버튼'/>
</body>
</html>
|
cs |
for문과 같이 구할 단수를 입력하고, 버튼을 클릭하면 결과를 뿌려줍니다.
while문 같은 경우엔 그 안에 있는 조건. 즉, i가 10보다 작을 경우 계속 반복해요.
구하고자 하는 단수를 입력하고, 버튼을 클릭하면..
이렇게 결과가 나와요.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
이번엔 if문에 이어서 for문을 사용할꼐요.
바로 예제로 넘어갈꼐요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 if_javascript 호출합니다.
function if_javascript(){
//txt_Value값을 가져옵니다.
var value = document.getElementById("txt_Value").value;
var result;
for(var i = 1; i < 10; i++){
result = value * i;
console.log(value+"*"+i+"="+result);
}
}
</script>
</head>
<body>
<input type='text' id='txt_Value'/>
<input type='button' onclick='if_javascript()' value='버튼'/>
</body>
</html>
|
cs |
갑을 입력하고, 버튼을 눌르면 그 입력한 숫자 * 1~9까지의 결과를 출력할꼐요.
결과를 참조하세요.
지금 예제 그림은 2단을 구할려고 합니다. 그리고나서 버튼을 클릭하면..
이렇게 2단의 결과가 전부 나옵니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요.
이번엔 if문의 약간 응용버전은 if.. else if 문을 사용할께요.
바로 예제를 쓸꼐요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 if_javascript 호출합니다.
function if_javascript(){
//txt_Value값을 가져옵니다.
var value = document.getElementById("txt_Value").value;
if(value == "1"){
alert("입력값은 1입니다.");
}else if(value == "2"){
alert("입력값은 2입니다.");
}else if(value == "3"){
alert("입력값은 3입니다.");
}else if(value == "4"){
alert("입력값은 4입니다.");
}
}
</script>
</head>
<body>
<input type='text' id='txt_Value'/>
<input type='button' onclick='if_javascript()' value='버튼'/>
</body>
</html>
|
cs |
간단하게 txt_Value에 1,2,3,4중 1개를 입력하고, 버튼을 클릭하면 위에 alert중에 하나가 나옵니다.
1,2,3,4중에 입력하면 이중에 하나의 결과가 나와요.
도움이 되었으면 좋겠어요.
