336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요. 이번엔 javascript에서 onload와 jquery처음시작시에 불러오는 ready에 대해서 알아볼 예정입니다.
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 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<!-- jquery를 불러옵니다. jquery.com download 페이지를 참조해주세요 -->
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script language="javascript">
//window.onload는 javascript로써 똑같이 시작시에 합니다.
//다만 jquery보다 늦게합니다.
window.onload = function(){
alert("jdk's blog Window");
}
//winodw.onload 보다 일찍합니다.
$(document).ready(function(){
alert("jdk's blog Jquery");
});
</script>
</head>
<body>
</body>
</html>
|
cs |
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요 이번엔 응용으로 특수문자를 차단하는 함수를 알려드릴께요.
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
28
29
30
31
32
33
34
35
36
37
38
39 |
//특수문자 막음처리
function checkSpecial(inputBox){
var keyValue = event.keyCode;
//특수문자배제
if((keyValue >= 123 && keyValue <= 130) || (keyValue >= 33 && keyValue <= 47) || (keyValue >= 58 && keyValue <= 64) || (keyValue >= 91 && keyValue <= 96)) return false;
}
//특수문자 막음처리 이메일용
function checkSpecial_Email(inputBox){
var keyValue = event.keyCode;
//특수문자배제
if((keyValue >= 123 && keyValue <= 130) || (keyValue >= 33 && keyValue <= 47) || (keyValue >= 58 && keyValue <= 64) || (keyValue >= 91 && keyValue <= 96))
if(keyValue != 64 && keyValue != 46){
return false;
}
}
//특수문자 막음처리 주소용
function checkSpecial_Addr(inputBox){
var keyValue = event.keyCode;
//특수문자배제
if((keyValue >= 123 && keyValue <= 130) || (keyValue >= 58 && keyValue <= 126))
if(keyValue != 45){
return false;
}
}
//숫자가 아니면 처리하는 함수
function checkNumber(inputBox){
var keyValue = event.keyCode;
if((keyValue >= 33 && keyValue <= 47) || (keyValue >= 33 && keyValue <= 47) || (keyValue >= 58 && keyValue <= 64) || (keyValue >= 91 && keyValue <= 96) || keyValue >= 123)
return false;
}
|
cs |
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요 이번엔 setAttribute로 값을 유지하는 방법을 알려드릴께요
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
//setAttribute로 innerHTML시에 값유지
document.getElementById("test").setAttribute("value",document.getElementById("test").value);
document.getElementById("divId").innerHTML += "<input type='text' name='' id=''/>";
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div id='divId'>
<input type='text' name='test' id='test'/>
</div>
</body>
</html>
|
cs |
값을 입력하고, 버튼클릭시에 test값이 유지됩니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
이번엔 팝업창에서 자기자신창을 닫는 방법을 간단하게 보여드릴꼐요..
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
self.close(); //자기자신창을 닫습니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
</body>
</html>
|
cs |
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요. 이번엔 간단하게 팝업을 띄우는 방법을 알려드릴께요.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
//팝업창출력
//width : 300px크기
//height : 300px크기
//top : 100px 위의 화면과 100px 차이해서 위치
//left : 100px 왼쪽화면과 100px 차이해서 위치
//툴바 X, 메뉴바 X, 스크롤바 X , 크기조절 X
window.open('http://www.naver.com','popName',
'width=300,height=300,top=100,left=100,toolbar=no,menubar=no,scrollbars=no,resizable=no,status=no');
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
</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(){
//현재창에서 다른페이지로 이동합니다.
window.location.href="http://www.naver.com";
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
</body>
</html>
|
cs |
현재창에서 이동하는 방법입니다.
이번엔 팝업창에서 부모창을 이동시키는 방법입니다.
크게 다르지 않고, opener만 붙였습니다.
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(){
//팝업창에서 부모창을 다른페이지로 이동합니다.
window.opener.location.href="http://www.naver.com";
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
</body>
</html>
|
cs |
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요. 이번엔 getElementsByName이라는 것을 통해서 이름이 똑같아도 제어하는 방법을 알려드리겠습니다.
해당 블로그에서는 checkBox를 통해서 예제를 나타냈지만 다른 것에 대해서도 당연히 활용가능합니다.
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
28
29
30
31
32
33
34
35
36
37 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
//이름을 이용해서 check의 크기를 알아내기
console.log(document.getElementsByName("check").length);
//check를 가진 값의 이름을 가져오기
var size = document.getElementsByName("check").length;
for(var i = 0; i < size; i++){
console.log(document.getElementsByName("check")[i].value);
}
//check이름을 가진 check중에서 체크된 것만 값 가져오기
var size = document.getElementsByName("check").length;
for(var i = 0; i < size; i++){
if(document.getElementsByName("check")[i].checked == true){
console.log(document.getElementsByName("check")[i].value+"(체크)");
}
}
//check중에 특별한 객체를 체크해주기
document.getElementsByName("check")[2].checked = true;
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<input type='checkbox' name='check' value='값1'/> 값1<br/>
<input type='checkbox' name='check' value='값2'/> 값2<br/>
<input type='checkbox' name='check' value='값3'/> 값3<br/>
<input type='checkbox' name='check' value='값4'/> 값4<br/>
</body>
</html>
|
cs |
해당 예제는 체크박스의 길이. 체크박스 체크하기. 체크박스 의 값가져오기. 체크박스의 체크된 값 가져오기를 getElementsByName을 통해서 다루고 있습니다.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
안녕하세요. 이번엔 바로 각각 위,아래,오른쪽,왼쪽에 대해서 padding을 지정하는 방법을 알려드릴꺼예요
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv1").style.paddingLeft = "20px"; //왼쪽 순입니다.
document.getElementById("testDiv1").style.paddingRight = "5px"; //오른쪽
document.getElementById("testDiv1").style.paddingTop = "50px"; //위쪽
document.getElementById("testDiv1").style.paddingBottom = "100px"; //아래쪽
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv1' id='testDiv1' style='width:100px; border:1px solid #000'>text</div>
</body>
</html>
|
cs |
바로 실행화면과 결과하면을 보여드릴꼐요.
실행화면
버튼클릭 후에 결과하면
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.
이번엔 padding을 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("testDiv1").style.padding = "10px 5px 100px 100px"; //위쪽 오른쪽 아래쪽 왼쪽 순입니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv1' id='testDiv1' style='width:100px; border:1px solid #000'>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
18
19
20
21
22
23
24
25
26
27
28
29 |
<meta charset="utf-8"/>
<html>
<head>
<title>JDK의 블로그</title>
<script language="javascript">
//버튼클릭시 javascript 호출합니다.
function javascript(){
document.getElementById("testDiv1").style.borderBottom = "1px solid #000000"; //아래쪽메두리를 1픽셀로 검정색으로 추가합니다.
document.getElementById("testDiv2").style.borderBottom = "1px dotted #000000"; //아래쪽메두리를 1픽셀로 검정색으로 추가합니다.
document.getElementById("testDiv3").style.borderBottom = "1px dashed #000000"; //아래쪽메두리를 1픽셀로 검정색으로 추가합니다.
document.getElementById("testDiv4").style.borderBottom = "1px double #000000"; //아래쪽메두리를 1픽셀로 검정색으로 추가합니다.
}
</script>
</head>
<body>
<input type='button' onclick='javascript()' value='버튼'/>
<div name='testDiv1' id='testDiv1' style='width:100px'>text</div>
<div name='testDiv2' id='testDiv2' style='width:100px'>text</div>
<div name='testDiv3' id='testDiv3' style='width:100px'>text</div>
<div name='testDiv4' id='testDiv4' style='width:100px'>text</div>
</body>
</html>
|
cs |
1,2,3,4번쨰를 각각
버튼을 클릭시에 선, 점선, 굵은 점선, 선2개를 각각 표시해줍니다.
