//콤마찍기
function comma(str) {
str = String(str);
return str.replace(/(\d)(?=(?:\d{3})+(?!\d))/g, '$1,');
}
Search
'Web/JavaScript'에 해당되는 글 7건
- 2021.02.22 콤마 찍기 (정규표현식)
- 2012.06.27 getAttribute 란? 1
- 2012.06.27 getElementsByTagName
- 2012.06.27 getElementById 란?
- 2012.06.27 노드란 무엇인가?
- 2011.09.07 [javascript] confirm & alert 생성 하기.
- 2009.03.18 이미지 새창 띄워서 보기 및 닫기
getAttribute 는 특정 요소노드 내에서 특정 한 속성값을 가져오는 메소드이다.
var para = document.getElementById("홍길동");
var title = para.getAttribute("title");
위의 소스를 보면
첫 번째 줄에는 "홍길동"이라는 id를 가진 요소노드를 불러와 para라는 객체를 만들어 저장하고,
두 번째 줄에는 para내 객체에서 "title"이라는 속성노드의 값을 title이라는 변수에 저장하는 것이다.
function ex2(){
var paras = document.getElementsByTagName("ul");
for (var i=0;i<paras.length;i++){
alert(paras[i].getAttribute("id"));
}
}
window.onload=ex2;
소스 설명을 하자면 문서내에서 <ul> 태그들을 불러와 paras라는 변수에 저장하고 (만약 <ul>태그가 여러개면 paras는 1차원 배열 변수가 될것이다.
그렇게 생성된 paras[0,1,2...]라는 객체 변수들이 가진 속성노드 중 id가 가진 속성값을 for문을 이용해
대화상자를 띄워 출력시키라는 소스이다.
(<ul>태그가 여러개라면 대화상자가 갯수만큼 차례로 뜨게 도리 것이다.)
getElementsByTagName은
getElementById 와 마찬가지로 요소노드에 접근하는 메소드이다.
다만 id명을 통해 접근하는 것이 아닌 요소노드의 태그명으로 접근하는 것이다.
var items = document.getElementsByTagName("li");
라고 하면 문서내의 <li>태그들을 모두 불러와 items이라는 변수에 저장하게 된다.
items 라는 변수는 물론 객체변수이고 만약에 문서내 <li>태그들이 여러개면 items라는 변수는 1차원배열이 된다.
(items[0], items[1], items[2]... 이런 식으로 )
그렇기 때문에 위에 메소드명을 보면 eleements라고 복수형으로 쓰여 있는 것 알수 있다.
<script>
function ex(){
var items = document.getElementsByTagName("li");
alert(items.length);
window.onload = ex ;
}
</script>
문서내 <li>태그들을 모두 불러와 items라는 1차원 배열 객체형 변수를 생성해 저장하고 alert(items.length)에서 변수의 길이가 몇인지 대화상자를 띄워서 출력하라는 것이다.
배열변수의 길이는 곧 문서내 <li>태그의 갯수이다.
출처 : http://blog.naver.com/rusdudtn2?Redirect=Log&logNo=140047888495
DOM의 메소드는 보통 이름을 보면 메소드의 특징을 잘 알수 있다.
var ultra = document.getElementById(utram);
라고 한다면 문서 내에서 ultram라는 id를 가진 element를 불러와서
ultra라는 객체에 저장시킨다는 뜻이다.
이처럼 getElementById는 특정 아이디의 요소 노드에 직접 접근 할수 있는 메소드이다.
자바스크립트는 대소문자를 구분하기 때문에 사용할 때 대소문자 구분에 주의하여야 한다.
아래 예시를 보자.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<script>
var pur = document.getElementById("purchases");
alert(typeof pur);
</script>
</head>
<body>
<p title="i don't Know">can you listen to me?</p>
<ul id="purchases">
<li>chew</li>
<li>milk</li>
<li>water</li>
</ul>
</body>
</html>
purchases라는 id명을 가진 요소노드를 불러와 pur 객체를 만든다.
그리고 alert(typeof pur); 에서 typeof 는 pur 라는 객체의 type을 가르키는 것이다.
pur 는 객체이므로 object라는 대화상자가 뜨게 될 것이다.
출처 : http://blog.naver.com/rusdudtn2?Redirect=Log&logNo=140047888495
노드란 네트워크에서 특정 지점을 가리키는 말입니다.
그림을 보면 좀 이해가 가실 것입니다.
DOM에서도 비슷합니다.
문서는 곧 노드의 집합이고 문서라는 나무 위에 가지는 링크고 잎사귀는 곧 노드가 되는 것입니다.
노드에는 다양한 형식이 있는데, 요소노드와 텍스트 노드와 속성 노드가 있습니다.
1)요소 노드
-태그나 element라고 하는 것들입니다.
<body><head><p><ul><h1>이런것들이 바로 요소 노드가 된다.</head></body>
요소노드들 끼리는 서로 포함 관계를 많이 갖게 되는데
다른 요소에 포함되지 않는 유일한 요소노드는 <HTML>이 된다.
2)텍스트 노드
웹문서에는 내용이 들어 있고 대부분의 내용은 텍스트로 제공 할수 있다.
이것이 바로 텍스트 노드이다.
<p>U've got a minute?</p>
라는 부분에서 U've got a minute?이라는 부분이 텍스트 노드가 됩니다.
XHTML에서 이 텍스트 노드는 보통 요소 노드 안에 포함되게 됩니다.
3)속성 노드
-요소노드의 태그안에 있다.
<p title="nodeName">U Can do it</p>
위의 소스에서 보면 p라는 요소 노드가 있고 <p></p>사이에 U Can do it이라는 텍스트 노드가 있는 것이 보인다.
p라는 요소 노드내에 보면 title이라고 되어 있는데 이것이 바로 속성 노드이다.
속성 노드는 항상 요소노드 태그 내에 포함되어 있다.
출처 : http://blog.naver.com/rusdudtn2?Redirect=Log&logNo=140047888495
1. alert
alert("문구 쓰기");
onClick="alert('보여줄 문구 쓰기');"
onClick="javascript:alert('문구 쓰기');"
2.confirm
function cancle(){
alert("문구 쓰기");
onClick="alert('보여줄 문구 쓰기');"
onClick="javascript:alert('문구 쓰기');"
function cancle(){
if(confirm("보여줄 문구")){
//확인 버튼
window.location.href="이동 할 경로";
}else{
window.location.href="이동할 경로"; // 취소 시 페이지 상태를 유지 할려면 경로에 # 만 쓰면된다.
//확인 버튼
window.location.href="이동 할 경로";
}else{
window.location.href="이동할 경로"; // 취소 시 페이지 상태를 유지 할려면 경로에 # 만 쓰면된다.
}
}
}
|
<script language="JavaScript"> function displayImage(picName, windowName, windowWidth, windowHeight){ function winClose(){ function doNothing(){} <script language="JavaScript1.1">
|
위와 같은 자바 스크립트를 <head>와 </head> 사이에 넣어 주어야 하고요,,
빨간 박스 친 부분의 "창닫기" 라는건요,, 이미지가 크게 새창으로 열렸을때 그 이미지에 마우스를 대면,, "닫기" 라는 alt 문구가 나오게 된답니다.
또 이미지가 들어가는 태그에 다음과 같이 함수를 호출을 하고 크기등을 지정해야 한답니다..
|
<a href="javascript:doNothing()" |
