개발에 해당되는 글 144건

getAttribute

개발/실전 2014. 3. 17. 14:10

getAttribute 는 특정 요소노드 내에서 특정 한 속성값을 가져오는 메소드이다.

 

var para = document.getElementById("홍길동");

var title = para.getAttribute("title")

 

위의 소스를 보면

첫 번째 줄에는 "홍길동"이라는 id를 가진 요소노드를 불러와 para라는 객체를 만들어 저장하고

두 번째 줄에는 para내 객체에서 "title" 이라는 속성노드의 값을 title이라는 변수에 저장하는 것이다.

 

 

(소스)

function Func2() {

var paras = document.getElementsByTagName("ul");
for (var i=0;i<paras.length ;i++ ) { alert(paras[i].getAttribute("id")); }
 }    

window.onload=Func2;

 

소스 설명을 하자면 문서내에서 <ul>태그들을 불러와 paras라는 변수에 저장하고 (만약 <ul>태그가 여러개면 paras는 1차원 배열 변수가 될 것이다.)

그렇게 생성된 paras[0..1..2...]라는 객체 변수들이 가진 속성노드 중 id가 가진 속성값을 for문을 이용해 대화상자를 띄워 출력시키라는 소스이다.

(<ul>태그가 여러개라면 대화상자가 갯수만큼 차례로 뜨게 될 것이다.)

 

(출력화면)

 

 

문서내 <ul>태그는 하나 뿐이었고, 그 <ul>의 id라는 속성에는 "purchases" 라는 속성값이 있다는 것을 알 수 있다.

 

[출처] 강좌 2일차 : getAttribute|작성자 주옥단편

'개발 > 실전' 카테고리의 다른 글

Hashmap과 ArrayList 사용법  (0) 2014.03.21
iframe, target 에 대해서[펌]  (0) 2014.03.18
자바스크립트 option  (0) 2014.03.14
HEAD 에 들어가는 태그 (title, style, script, meta 태그)  (0) 2014.03.13
자바스크립트 - screen 객체와 document 객체 , link 객체와, anchor 객체  (0) 2014.03.13
,

자바스크립트 option

개발/실전 2014. 3. 14. 17:01

document.form.formname.options[0]=new Option('text값1','value값1');
document.form.formname.options[1]=new Option('text값2','value값2');
document.form.formname.options[2]=new Option('text값3','value값3');

 

 

다음과 같은거임!!


 

<option value="value값1"> text값1 </option>

<option value="value값2"> text값2 </option>

<option value="value값3"> text값3 </option>

[출처] JAVASCRIPT - new Option();|작성자 메멘토

 


  넷스케이프 내비게이터 3.0붜는 자바스크립트에서 옵션 메뉴를 만들 수 있는 생성자 함수 Option()을 제공하기
  시작하였다.  이 함수를 이용하면 자바스크립트에서 동적으로 옵션 메뉴가 만들어지게 되는 것이다.


  option_name = new Option([optionText, optionValue, defaultSelected, selected[)


  여기에서 optionText는 옵션 메뉴에 나타나는 문자열을 가리키고, optionValue는 이 옵션 메뉴를 선택했을 때 리
  턴되는 값을 가리키게 된다.


  EX :
     <HTML>
     <HEAD>
        <TITLE>자바스크립트 테스트</TITLE>
        <SCRIPT LANGUAGE="JavaScript">
        <!--
            function appendOption1(form) {
                var option1 = new Option("Option1", "1st_option", true)
                form.test_select.options[1] = option1
            }
            function appendOption2(form) {
                var option2 = new Option("Option2", "1st_option")
                form.test_select.options[2] = option2
            }
        // 자바스크립트 끝 -->
        </SCRIPT>
     </HEAD>
     <BODY>
        <H1> 옵션 메뉴 추가 </H1><P>
        <FORM>
            <SELECT NAME="test_select" SIZE=5>
                <OPTION VALUE="option_existed"> Option0
            </SELECT><P>
            <INPUT TYPE="button" VALUE="append Option1"  onClick="appendOption1(this.form)">
            <INPUT TYPE="button" VALUE="append Option2"  onClick="appendOption2(this.form)">
        </FORM>
     </BODY>
     </HTML>


  <옵션 메뉴 삭제하기>
  리스트 박스에서 옵션 메뉴를 삭제하는 것은 매우 간단하다. 삭제하고 싶은 곳에 있는 옵션 메뉴 값을 null로
  만들어 버리게 되기 때문이다.  예를 들어 첫 번째 옵션 메뉴를 삭제 하고 싶다면 다음과 같이 하면된다.

     selectName.options[0] = null


  <옵션 메뉴 선택 상태 바꾸기>
  현재 리스트 박스에 잇는 옵션 메뉴 중에서 현재 선택되어 있는 것을 바꾸는 방법에 대해 살펴보자. 먼저 오직
  한 가지만 선택하는 단일 선택의 경우에는 다음과 같이 select  객체의 selectedIndex 값을 바꾸어주면
  선택된 옵션 메뉴가 바뀌게 된다.


   selectName.selectedIndex = I


  두 번째로 MULTIPLE 속성을 사용하여 다중 속성으로 설정되어 있는 경우에는 옵션 객체의 selected 특성을
  바꾸어 주면 된다. 예를 들어 i번째 옵션 메뉴가 선택되도록 만들고 싶다면 다음과 같이 하면된다.


   selectName. options[i].selected = true

'개발 > 실전' 카테고리의 다른 글

iframe, target 에 대해서[펌]  (0) 2014.03.18
getAttribute  (0) 2014.03.17
HEAD 에 들어가는 태그 (title, style, script, meta 태그)  (0) 2014.03.13
자바스크립트 - screen 객체와 document 객체 , link 객체와, anchor 객체  (0) 2014.03.13
&nbsp &It &gy &amp &quot  (0) 2014.03.12
,

HEAD 에 들어가는 태그 (title, style, script, meta 태그)

개발/실전 2014. 3. 13. 16:58

HTML 핵심, 요소(Element)

 

html기초에서 html핵심은 요소(element)라고 했는데요

 

이 요소는 태그로 이루어져 있어요.

 

요소를 구체적으로 나누어 보면, 아래처럼 구성됩니다.

 

 

   

 <태그 속성="속성값">내용 </태그>

 

 <태그 속성='속성값'>내용 </태그>

 

 * 겹따옴포, 홑따옴표 모두 가능.

 

예 : <table width="100"> </table>

       표를 만드는 태그 table에,

       넓이를 지정하는 태그 속성 width,

       속성 값 100을 지정했습니다.

 

      <a href="right.htm">페이지 오른쪽</a>

       

 

 

 

 

 

 

head 에 들어가는 태그 (title, style,  script, meta 등)

 

                                                                                                                              

 

 <title> 문서의 제목을 넣는 태그

 

 

 


말 그대로 문서의 제목을 나타내 줍니다. 본문에는 나타나지 않습니다.

 

대신, 브라우저 툴바 상단이나, 검색할 때 이 title이 제목으로 나옵니다.

 

제목은, 하나 이상을 쓸 수 없어요..

 

<title> </title>은 <head> 영역에만 들어갈 수 있어요.

 

 

사용 예:

  

 <html>
 <head>
 <title>지구별 안내서</title>
 </head>
 <body>

  지구별 안내서 홈페이지에

  오신 것을 환영합니다
 </body>
 </html>

 

 

<title>실행 화면

(빨간 원으로 표시한 부분이 title 영역이 나오는 부분)

 

 

                           

 

<style>  style 정보(글꼴, 색상, 너비, 높이 등) 를 규정하는 태그

 

 

 

주로, css문서에서 사용 됨.

 

 

style 태그는 3가지 방식으로 넣을 수가 있어요.

 

 

1. Inline 스타일(style이 태그 속성처럼 사용된 예)

 

 <html>
 <head>
 <title>지구별 안내서</title>
 </head>
 <body style="color:red;">

  지구별 안내서 홈페이지에

  오신 것을 환영합니다
 </body>
 </html>

 

 

 

 

2. Internal 스타일(style이 태그처럼 사용된 예)

 

 <html>
 <head>
 <title>지구별 안내서</title>
 <style type="text/css">
    body {color: red;}
  </style>

 </head>
 <body>

  지구별 안내서 홈페이지에

  오신 것을 환영합니다
 </body>
 </html>

 

 

 

3. External (외부로 연결해 사용된 예)

 

㉠확장자  .css로 저장 (예:test.css)


  body {color: red;}

 

 

㉡확장자 .htm으로 저장(예:main.htm)

 <html>
 <head>
 <title>지구별 안내서</title>
 <link rel="stylesheet" type="text/css" href="test.css" />

 </head>
 <body>

  지구별 안내서 홈페이지에

  오신 것을 환영합니다
 </body>
 </html>

 

 

 

<style>태그 실행 화면

 

 

 

 

<script> 자바스크립트 같은 다른 프로그래밍 언어를 연결시키는 태그

 

 

 

그래서, 이 스크립트를 브라우저에서 어떻게 번역해야 할지를 알려 줍니다.


<script>태그는 <head>영역과 <body>영역에 모두 올 수 있어요.

(다만 실행 순서의 차이가 있는데, 다른 자원이 모두 로드된 후 자바스크립트가 실행되길 바라면 </body> 바로 위에 위치시킴)

 

자바스크립트(Javascript)는 두 가지 방식으로 넣을 수가 있는데요.

 

1. html 문서에 자바스크립트 끼워넣기(head 영역 안에)

  

 <html>
 <head>
 <title>지구별 안내서</title>

<script type="text/javascript">

  alert('안녕하세요');
</script>
 </head>
 <body>

  지구별 안내서 홈페이지에

  오신 것을 환영합니다
 </body>
 </html>

 

 

 

 

html 문서에 자바스크립트 끼워넣기(body 영역 안에)

 <html>
 <head>
 <title>지구별 안내서</title>
 </head>
 <body>

  지구별 안내서 홈페이지에

  오신 것을 환영합니다

<script type="text/javascript">

  alert('안녕하세요');
</script>
 </body>
 </html>

 

 

 

 

2. 외부로 자바스크립트 연결

 

㉠ 자바스크립트 파일을  확장자(.js)로 저장

    예(test.js)


  alert('안녕하세요?');

 

 

㉡ 확장자 .htm으로 저장(예: main.htm)

 <html>
 <head>
 <title>지구별 안내서</title>

 <script type="text/javascript" src="test.js"></script>
 </head>
 <body>

  지구별 안내서 홈페이지에

  오신 것을 환영합니다

</script>
 </body>
 </html>

 

 

 

 <script> 태그 실행 화면

 

 

 

<link> 외부 자료를 연결시키는 태그

 

 

 

위 <style>에서 외부로 자바스크립트 연결 편에서 본 것처럼 link 태그는

대부분, style sheet를 연결시키기 위해 사용합니다.

 

<link> 태그는 <head>영역에만 올 수 있어요.

사용 예: <style>-external 참조.

 

 

 

 

 

<meta> 정보에 대한 정보를(metadata) 알려주는 태그

 

 

 

페이지에는 표시되지 않고, 브라우저와 검색엔진에게만 읽힙니다.

 

문서에 대한 설명이나, 검색 엔진 키워드, 저자, 다른 메타테이터 등을 표시합니다.

 

description : 문서에 대한 설명

keywords : 검색어  

charset  : character set의 약자로, 문서 부호처리 방식을 표시함.

                UTF-8 이 가장 일반적임

 

 

HTML4 : <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 라고 표시.
HTML5: <meta charset="UTF-8"> 라고 표시

 

 

meta 태그 위치는 항상 <head> 사이에만 옵니다.

 

사용 예:

 

 <head>
   <meta name="description" content="html 기초 강좌">
   <meta name="keywords" content="html, css">
   <meta name="author" content="지구별에">
   <meta charset="UTF-8">
 </head>

 

출처 : http://aboooks.tistory.com/42

 

'개발 > 실전' 카테고리의 다른 글

getAttribute  (0) 2014.03.17
자바스크립트 option  (0) 2014.03.14
자바스크립트 - screen 객체와 document 객체 , link 객체와, anchor 객체  (0) 2014.03.13
&nbsp &It &gy &amp &quot  (0) 2014.03.12
document.getElementById  (0) 2014.03.12
,

자바스크립트 - screen 객체와 document 객체 , link 객체와, anchor 객체

개발/실전 2014. 3. 13. 11:08

 

[screen 객체]

 

screen 객체는 화면의 정보를 알려주므로 화면의 상태에 따라 처리해야 하는 작업이 다를 경우 사용한다.

형식) window.screen. 속성
         screen.속성


----------------- screen 속성 -------------------

○ availHeight
    - 작업 표시줄을 제외한 화면의 높이를 픽셀 값으로 표시

○ availWidth
    - 작업 표시줄을 제외한 화면의 너비를 픽셀 값으로 표시

○ availTop
    - 화면 표시 영역의 y 좌표 표시

○ availLeft
    - 화면 표시 영역의 x 좌표 표시

○ height
    - 화면의 높이를 픽셀 값으로 표시

○ width
    - 화면의 너비를 픽셀 값으로 표시

○ colorDepth
    - 컴퓨터에서 사용하고 있는 컬러 수를 표시

○ pixelDepth
    - 화면의 컬러 해상도를 표시(넷스케이프 네비게이터용)


-------------------------------------------

 

[document 객체]

 

document 객체는 자바스크립트에서 가장 많이 사용하는 객체로 HTML 문서에 대한 정보와

문서에 포함된 객쳉 대한 정보를 갖는다.


형식) document.속성
       document.메소드


----------------------- document 객체의 속성 ------------------------

+_+_+_+_+_+_+_+_+_+_ 색상 지정 +_+_+_+_+_+_+_+_+_+_+_

○ bgcolor
    - 문서의 배경색 지정

○ fgcolor
    - 문서의 글자색, 선색 지정

○ linkcolor
    - 링크 문자색 지정

○ vilinkcolor
    - 방문한 링크 문자색 지정

○ alinkcolor
    - 선택 중인 링크 문자색 지정


+_+_+_+_+_+_+_+_+_+_+ 웹 문서와 관련된 정보 +_+_+_+_+_+_+_+_+

○ lastModifed
    - 홈페이지가 마지막으로 갱신된 날짜 저장

○ location
    - 웹 문서의 URL 주소 저장

○ URL
    - 문서의 URL 주소 값 반환

○ domain
    - 서버의 도메인 명을 지정하거나 반환

○ title
    - <title> 태그 사이의 문서 제목을 제공

○ referer
    - 링크를 실행한 이전 문서의 URL 정보를 제공(넷스케이프 네비게이터용)

 

+_+_+_+_+_+_+_+_+_+_+_+ 웹 문서에 포함된 배열 객체 +_+_+_+_+_+_+_+_+_+_


○ images
    - 문서에 삽입된 그림을 배열로 제공

○ links
    - 문서에 포함된 모든 링크의 이름을 배열로 제공

○ forms
    - <form> 태그 입력 순서대로 배열로 제공

○ anchors
    - 문서에 포함된 하이퍼링크의 이름을 배열로 제공

○ Applets
    - 문서에 포함된 배열들의 배열을 설정

○ Embeds
    - 문서에 포함된 플러그인을 배열로 제공

○ layers
    - 레이어의 배열 정보를 제공

--------------------------------------------------------------------


-------------------------- document 객체의 메소드 ------------------------------

○ clear()
    - 문서의 모든 내용을 지움

○ open()
    - 문서의 내용을 보여줌

○ close()
    - open() 으로 보여준 문서를 닫음

○ write()
    - 태그를 포함하는 문자열을 출력

○ writeln()
    - <pre> 태그와 함께 사용되면 행 마지막에서 자동 개행 자동 개행을 제외하면 write()와 동일한 기능

○ getSelection()
    - 마우스로 선택한 문자열을 반환(넷스케이프 네이게이터용)

-----------------------------------------------------------------------------------


document 객체에서 사용되느느 이벤트핸들러는 onclick, ondbclick, onkeydown, onkeypress,

onmousedown, onmouseup 이다

 

======================================================================================

 

[실습하기]

 

------------------------ 문서 없이 새 창 열기 ---------------------------------------
<html>
<head>
 <title>Test</title>

<script language="javascript">

var win = null

function openWin()
{
 win = open("","win","width=350 height=540 directories=no");

 if(win != null)
 {
  win.document.write("<html><head>")
  win.document.write("<title></title></head>")
  win.document.write("<body onclick='self.close()'>")
  win.document.write("</body></html>")

 }
}

function closeWin()
{
 win.close();

}

</script>
</head>

<body>

<img src=images/zoom.gif style="cursor:hand" onclick="openWin()">

<form name=info>
<input type=button name=bt value=창닫기 onclick="closeWin()">
</form>

</body>

</html>
------------------------------------------------------------------------------------------


--------------------------객체속성 확인하기-------------------------------

<html>
<head><title> document 객체속성 모두 확인해 보기  </title></head>
<body>
<script language="javascript1.2">
<!--
document.fgColor="white"
document.bgColor="orange"
document.linkColor="blue"
document.vlinkColor="yellow"
document.alinkColor="pink"


document.write("<h3>문서제목 :"+document.title+"<br><br>")
document.write("전경색 :"+document.fgColor+"<br><br>")
document.write("배경색 :"+document.bgColor+"<br><br>")
document.write("링크색 :"+document.linkColor+"<br><br>")
document.write("홈페이지 마지막 갱신일 :"+document.lastModified+"<br><br>")
document.write("URL 주소 :"+document.URL+"<br></h3>")

//-->
</script>
</body>
</html>

------------------------------------------------------------------------


====================================================================================

 

[ link 객체 ]

 

lnik 개체는 document 객체의 하위 객체로 홈페이지 문서 내의 링크 정보를 제공한다. 문자, 그림, 이미지맵

등에 설정한 하이펄이크 정보를 얻을 수 있다.

----------------형식---------------------------

document.links[인덱스 번호].속성 // 인덱스 번호번째 링크 속성

document.links.length  // 문서에 삽입된 링크 개수

document.링크이름.속석  // 링크의 name이 링크이름인 링크의 속성

----------------------------------------------------------------------

link 객체의 속성은 다음과 같다.


---------------------- link 객체의 속성 -----------------------------------

○ length
   - 문서 내 링크 개수 알려줌

○ href
   - URL 전체 주소 알려줌

○ protocol
   - 프로토콜의 종류 알려줌

○ host
   - 링크에 설정된 URL 주소, 호스트명, 포트번호 알려줌

○ hostname
   - 도메인며이나 IP 주소를 알려줌

○ pathname
   - URL에서 경로 부분의 정보를 알려줌

○ port
   - :8080과 같은 포트번호를 알려줌

○ search
   - ? 이후의 문자열을 알려줌

○ hash
   - anchor 객체의 이름을 알려줌

○ target
   - target 속성으로 지정한 문서가 열리는 프레임 이름을 알려줌

○ text
   - 해당 링크를 가지고 있는 문자열을 알려줌

○ x
   - 문서에서 해당 링크의 x 좌표 값을 알려줌

○ y
   - 문서에서 해당 링크의 y 좌표 값을 알려줌

 

---------------------------------------------------------------

 

[ anchor 객체 ]

 

anchor 객체는 document 객체의 하위 객체로 문서에 설정한 책갈피 정보를 제공한다.

document.anchors[인덱스 번호].속성  // 인덱스 번호번째 책갈피 속성
document.anchors.length   // 문서에 삽입된 책갈피의 개수
document.anchors[책갈피명] 또는 document.all[책갈피명] // 책갈피명이 같은 책갈피 설정


------------------- anchor 객체의 속성 -------------------------------

○ length
   - 문서에 삽입된 책갈피 개수를 알려줌

○ name
   - 책갈피명을 알려줌

○ text
   - 책갈피로 설정한 문자열을 알려줌  (넷스케이프 네비게이터전용)

○ x
   - 문서에서 해당 anchor의 x좌표 값을 알려줌 (넷스케이프 네비게이터전용)

○ y
   - 문서에서 해당 anchor의 y좌표 값을 알려줌 (넷스케이프 네비게이터전용)


==========================================================================================


[실습하기]


-------------------- lnik , anhort 예제..--------------------------------------------
<html>
<head>
 <title>Test</title>

<script languange=javascript>

function LastLinkInfo()
{
 var LastIndex = document.links.length - 1;


 href = document.links[LastIndex].href;
 protocol = document.links[LastIndex].protocol;
 hostname = document.links[LastIndex].hostname;
 port = document.links[LastIndex].port;

 message = "href : " + href + "\n" + "protocol : " + protocol + "\n" + "hostname : " + hostname + "\n" + "port : " + port;

 alert(message) 
}

</script>

</head>

<body>

<a href=http://www.naver.com>링크1</a>
<a href=http://www.yahoo.co.kr>링크2</a>
<a href=http://www.daum.net>링크3</a>
<a href=http://www.google.co.kr>링크4</a>

<br>

<a name=site3>쿨사이트</a><br>

 


<script languange=javascript>

document.write("링크수 : " + document.links.length + "<br>")
document.write("앵커수 : " + document.anchors.length + "<br>")

for(i=0; i<document.links.length; i++)
{
 document.write(i + " : " + document.links[i] + "<br>")
}

</script>

<input type=button name=bt value="마지막링크 정보보기" onclick="LastLinkInfo()">

</body>

</html>

--------------------------------------------------------------------------------

 

---------------- 2초후에 공지사항 창이 뜨고 3초후에 공지사항 창이 사라지는 예제----------------------
<html>
<head>
 <title>Test</title>

<script languange=javascript>

var win = null;

function openWin()
{
 win = window.open("allim1.htm","","width=250 height=385"); 
 setTimeout('closeWin()',3000)
}

function closeWin()
{
 win.close();
}

</script>

</head>

<body onload="setTimeout('openWin()',2000)">

 

</body>

</html>

 

-----------------------------------------------------------------------------------------

 

 

----------------------------5 초뒤에 다른 사이트로 접속하기--------------------------------------

<html>
<head>
 <title>Test</title>

<script languange=javascript>


var n = 5

function AddNum()
{

 if(n == 0)
 {
  location.href = "http://blog.naver.com/kimgudtjr"
 }


 fo.num.value = n; 
 n = n-1;
 setTimeout("AddNum()",1000);
}

</script>

</head>

<body onload="AddNum()">

<form name=fo>

<input type=text name=num size=2>초 뒤에 다른사이트로 이동합니다.

</form>


</body>

</html>


-----------------------------------------------------------------------------------------

 

---------------------- 포토앨범 새창으로 띄우기 --------------

<html>
<head>
 <title>Test</title>
<style>img{cursor:hand}</style>

<script languange=javascript>


var win= null           // -> 윈도우를 닫을 때 사용하기 위해 전역변수로 선언

function openWin(f,w,h)
{
 win=window.open("", "win", "width="+w+" height="+h+" directories=no");
 if(win != null)
 {
  win.document.write("<html><head>")
  win.document.write("<title>포스터 확대 보기</title>")
  win.document.write("</head><body leftmargin=0 topmargin=0 onclick='self.close()'>")
  win.document.write("<img src='"+f.src+"'>")
  win.document.write("</body></html>")
 }

}
</script>

</head>

<body>

            <img src="images/photo2.jpg" width="70" height="70" border="1" onclick="openWin(this,600,390)">
            <img src="images/photo3.jpg" width="70" height="70" border="1" onclick="openWin(this,600,397)"><br>
            <img src="images/photo4.jpg" width="70" height="70" border="1" onclick="openWin(this,600,389)">
            <img src="images/photo5.jpg" width="70" height="70" border="1" onclick="openWin(this,400,274)"><br>
            <img src="images/photo6.jpg" width="70" height="70" border="1" onclick="openWin(this,400,267)">
            <img src="images/photo7.jpg" width="70" height="70" border="1" onclick="openWin(this,894,600)"><br>    

</body>

</html>
------------------------------------------------------------------------

 


-------- 흔들면서 나타나는 공지 창 만들기 (3초후 공지창 띄우고 흔들리면서 가운대로 이동 --------------
<html>

<head>
<title>Test</title>

 <script language="JavaScript">
 var remote; //전역변수
 function openwin()
 {
//window.open("띄울 파일의이름","띄운 창의 이름","크기,좌표,여러가지 설정값들,menubar=yes,toolbar=yes,status=yes,scrollbars=yes,resizable=yes")
  remote=window.open("allim.htm", "", "width=250 height=385 left=100 top=100 directories=no"); 
  setTimeout("movewin()",3000);
 }
 
 position=0;
 function movewin(
 {//자바스크립트에서 페이지를 움직이는 함수:moveBy(x축이동량,y축이동량)
  if(position>15)
  {
   return;
  }
  
  remote.moveBy(10,10);
  position=position+1;  //position+=1
  setTimeout("movewin2()",50);
 } 
 
 function movewin2()
 {
  remote.moveBy(10,-10);
  setTimeout("movewin()",50);
 }
 
 </script>


</head>

<body onload="setTimeout('openwin()',3000)">


</body>

</html>

[출처] 자바스크립트 - screen 객체와 document 객체 , link 객체와, anchor 객체|작성자 파란만장 미스터송

 

'개발 > 실전' 카테고리의 다른 글

자바스크립트 option  (0) 2014.03.14
HEAD 에 들어가는 태그 (title, style, script, meta 태그)  (0) 2014.03.13
&nbsp &It &gy &amp &quot  (0) 2014.03.12
document.getElementById  (0) 2014.03.12
<% %>와 <script>차이 점 <%! 설명  (0) 2014.03.12
,

&nbsp &It &gy &amp &quot

개발/실전 2014. 3. 12. 17:39

&nbsp;


" " : 공백(스페이스 한 칸)을 의미.
띄어쓰기를 할 때는 키보드의 스페이스키(가장 길쭉한 키)를 한 번 눌러 "공백 문자" 즉 빈 칸을 한 개 삽입합니다. 그런데 HTML 문법에서는, 일반 텍스트 편집에서와 달리, 공백 2개를 연속으로 사용해도 2칸을 띄어쓸 수 없습니다. 공백을 아무리 많이 삽입해도 공백 1개로 간주됩니다. 그래서 공백을 여러 개 사용해야 할 때는, 빈 칸을 &nbsp; 이렇게 표현해 줍니다. 그러면 브라우저가 &nbsp; 기호를 빈 칸으로 표시해 줍니다.

예제:
aaa    bbb

이렇게 aaa와 bbb 사이에 공백을 4칸 넣어줄 때에는

aaa&nbsp; &nbsp; bbb

이렇게 합니다. 진짜 공백과 &nbsp; 기호를 번갈아서 쓰면 됩니다.




&lt;


부등호(<)
괄호로 사용되기도 하고, 수식에서 "무엇보다 적다(Less Than)"는 의미로 사용되기도 하는 기호입니다. 그런데 < 기호는 HTML 파일에 직접 사용할 수 없습니다. (물론 사용해도 브라우저가 알아서 자동으로 처리해 주지만 나중에 에러가 날 수 있습니다.) 왜냐하면 < 기호는 HTML태그를 둘러싸는 기호이기 때문입니다.

제목이 <여기에> 표시됩니다 라는 문자열을 <h1></h1> 태그 안에 넣을 때,

<h2>제목이 <여기에> 표시됩니다</h2>

라고 하면 <여기에> 라는 것도 하나의 HTML태그로 간주되어 버립니다. <여기에> 라는 태그는 없기에 이것은 오류입니다.

따라서 < 기호를, &lt; 이렇게 표기하면 태그와 혼동되지 않고 부등호가 잘 표현됩니다.



&gt;


부등호(>)
위의 경우와 같습니다. 닫는 괄호 또는, "무엇에 비해 크다(Greater Than)"는 뜻.




&amp;

 
&
앰퍼샌드(&) 기호는, 위의 경우들에서 보는 것과 같이 이미 특수한 용도로 사용되고 있습니다. 그래서 & 기호 자체를 표현해 주기 위해서는 & 를, &amp; 이렇게 표기해 주어야 합니다.



&quot;


이것은 쌍따옴표(") 하나를 표현하는 것입니다.

<a href="http://www.google.co.kr/">구글 "검색" 홈페이지</a>

가량 이런 링크가 있다고 할 때, 링크를 표현하는 <a> 태그 안에 속성을 나타내기 위해 href="" 이 부분에서 쌍따옴표가 사용되었습니다. 그런데 <a> 태그 안에 자바스크립트를 집어넣을 때, 자바스크립트의 쌍따옴표들이 태그 속성의 쌍따옴표와 겹쳐져 서로 충돌할 수 있습니다. 이때는 아주 심각한 에러가 납니다. 그럴 경우에는 자바스크립트 안의 쌍따옴표들을 &quot; 이렇게 표현하면 해결됩니다.

그러나 링크 제목 안에서는 구글 "검색" 홈페이지 이렇게 따옴표를 사용해도 괜찮습니다. 자바스크립트가 아닌 평범한 문자열에서는 쌍따옴표든 홑따옴표든 따옴표를 따옴표 그대로 사용하면 되고 굳이 &quot; 이렇게 바꾸지 않아도 됩니다.

요약하자면, &quot; 는, 태그 내부의, 쌍따옴표로 둘러싸인 곳 안에서 다시 쌍따옴표를 사용할 때 필요한 것입니다.

즉 &quot; 는 따옴표 충돌의 문제가 있을 때에만 사용하고 보통의 경우에는 사용하지 않습니다.

 

'개발 > 실전' 카테고리의 다른 글

HEAD 에 들어가는 태그 (title, style, script, meta 태그)  (0) 2014.03.13
자바스크립트 - screen 객체와 document 객체 , link 객체와, anchor 객체  (0) 2014.03.13
document.getElementById  (0) 2014.03.12
<% %>와 <script>차이 점 <%! 설명  (0) 2014.03.12
JOIN과 UNION  (0) 2014.03.11
,

document.getElementById

개발/실전 2014. 3. 12. 16:00

 영어를 해석하는 것과 의미는 같습니다.


document 문서에서
get element 요소(태그)를 얻겠다 
by id 아이디 값으로

<div id="test"></div> 에 접근하는 방법은

document.getElementById('test'); 입니다.

document 문서에
write 쓰겠다.

document.write('hello'); // => hello 출력

'개발 > 실전' 카테고리의 다른 글

자바스크립트 - screen 객체와 document 객체 , link 객체와, anchor 객체  (0) 2014.03.13
&nbsp &It &gy &amp &quot  (0) 2014.03.12
<% %>와 <script>차이 점 <%! 설명  (0) 2014.03.12
JOIN과 UNION  (0) 2014.03.11
location 객체  (0) 2014.03.11
,

<% %>와 <script>차이 점 <%! 설명

개발/실전 2014. 3. 12. 15:45
<%
이것으로 감싸여져 있는 부분은 JSP 코드중에 JAVA 구현부분 입니다.
이부분은 서버에서 실행이됩니다.
%>

<script>
이부분으로 감싸여져 있는 부분은 스크립트 부분입니다.
사용자에게 html 로 전송된 이후에 실행되는 부분으로 html 의 일부분입니다.
</script>

두개는 좀 다른 의미로 자바는 프로그램적인 부분이고 스크립트는 마크업 랭기쥐의 일부분으로

사용자 환경에서 실행되는 명령어에 해당합니다.

자바 부분도 함수 정의가 가능합니다.

<%!

%>

느낌표가 앞에 붙는다는것이 다르며 이또한 서버에서만 실행되어 집니다.

<scipt></scipt> 를 <%%> 로 바꾸시면 오류가 날수밖에 없습니다.

<%%> 속에 들어가는 구분은 java 문법의 구문을 다르며 <scipt></scipt>속에 들어가는 구문은

javascript 문법구문을 따르게 되어있습니다.

두개의 명령어와 문법 표현 방식은 전혀 다른것이라고 보시면 되구요.

실행되는 시점도 전혀 다릅니다.

사용자는 <%%> 이부분을 제외한 부분만을 보여지게 되며 <%%> 부분으로 둘러쌓여있는 부분은

서버에서 동적으로 반복 또는 문구를 출력하여 html 문서를 동적으로 완성하여 사용자에게 전송 하는것 입니다.

 

'개발 > 실전' 카테고리의 다른 글

&nbsp &It &gy &amp &quot  (0) 2014.03.12
document.getElementById  (0) 2014.03.12
JOIN과 UNION  (0) 2014.03.11
location 객체  (0) 2014.03.11
doGet, doPost  (0) 2014.03.10
,

실전에서!!!

개발/DB 2014. 3. 11. 17:31

컬럼명으로 테이블명을 알고 싶을때

 

SELECT table_name, column_name
FROM all_tab_columns
WHERE column_name like '%SALES_DEALER%'

'개발 > DB' 카테고리의 다른 글

해당 숫자에 몇건이 있는가?  (0) 2014.06.25
해당월의 마지막 날짜 구하는 쿼리  (0) 2014.05.13
TABLESPACE, TRUCATE  (0) 2014.04.07
날짜 갖고 놀기  (0) 2014.03.28
ORACLE 이론 및 코딩하는방법  (0) 2013.11.04
,

JOIN과 UNION

개발/실전 2014. 3. 11. 17:01

먼저 UNION에 앞서 JOIN이 먼지 그리고 그 차이가 먼지 알면 더 도움이 될 듯하다.

나도 오라클 처음 배우면서 .... 물론 SQL은 아주 쪼금 알지만.... 조금씩 알아가는듯 하여 뿌듯..ㅠㅠ

 

                                           UNION과 JOIN

 공통점 :  하나 이상의 테이블에서 특정한 컬럼을 검색할 때 사용

 차이점 : 

  JOIN - WHERE 조건으로 두 개 이상의 테이블에서 원하는 컬럼을 선택하여 조회    

  UNION - 두 개 이상의 SELECT 문을 사용하여 그 검색 결과 합침!!!!


UNION이란 그냥 합집합이라고 생각하면 편한듯 하다..;;

JOIN은 그냥 교집합??? ;;

 

                          [UNION 과 UNIONALL]

EX) 데이터..

보이프렌드 --> 원빈,송승헌,현빈,외계중성

걸프렌드 --> 송혜교,신민아,한가인,한예슬, 외계중성

 

SELECT BOYFRIEND, GIRLFRIEND
FROM TABLE
UNION
SELECT BOYFRIEND, GIRLFRIEND

FROM TABLE2

ORDER BY 1;

 

합쳐지는 두테이블의 COLUMN만 일치 ==> 합친다..!!! 

결과값 --> 원빈,송승헌,현빈,외계중성,송혜교,신민아,한가인,한예슬

 

SELECT BOYFRIEND, GIRLFRIEND
FROM TABLE
UNION ALL
SELECT BOYFRIEND, GIRLFRIEND

FROM TABLE2

 

결과값 --> 원빈,송승헌,현빈,외계중성,송혜교,신민아,한가인,한예슬,외계중성

      

 

==============================================================================

결론 : UNION 은 중복 제거 ;;;

        UNIONALL 그냥 통으로 가지고 있음;;

[출처] [오라클] UNION 과 JOIN의 차이와 UNIONALL과의 차이 비교|작성자 alfustnals

'개발 > 실전' 카테고리의 다른 글

document.getElementById  (0) 2014.03.12
<% %>와 <script>차이 점 <%! 설명  (0) 2014.03.12
location 객체  (0) 2014.03.11
doGet, doPost  (0) 2014.03.10
액션서블릿 흐름  (0) 2014.03.05
,

location 객체

개발/실전 2014. 3. 11. 10:14

location 객체는 현재 문서의 URL에 관한 정보를 갖고 있다. 프레임이 사용된 경우에는 최상위 프레임 문서의 URL만 참조할 수 있고, 하위 프레임의 문서들은 Frames객체를 이용한다. location객체는 window의 하위 객체 이지만 window객체를 생략 할 수 있다.

 

기본형태

[windows].location.속성 혹은 메소드

[windows].loaction.속성=지정값

 

location 객체의 속성

href - URL을 지정하여 지정한 페이지로 이동하거나 페이지의 URL 전체 정보를 반환

protocol - 0 ':'를 포함하는 http나 ftp 등의 프로토콜 정보를 반환

hostname - 호스트 이름과 포트 번호 반환

pathname - URL에서 경로부분의 정보를 반환

port - 8080과 같은 포트번호를 반환

search - ?이후의 문자열을 반환

hash - 지정한 앵커를 설정한 곳으로 이동하거나 앵커이름을 반환

 

location 객체의 메소드

reload() - 브라우저의 'Reload'버튼 처럼 현재 페이지를 새로 업데이트

replace() - 현재 URL을 지정한 URL로 바꾸고 이전 페이지로 돌아 갈 수 없게 한다

 

예제

현재 페이지의 URL의 바꾸기

<a href = "javascript:location.replace('http://대처할 URL')"> replace </a>

 

자바스크립트로 reload바꾸기

<a href = "javascript:location.reload()"> reload</a

==================================================================================================

자바스크립트에서 페이지 이동 시킬때 location.href를 많이 사용한다.

하지만 location.replace 메세드도 종종 이용하는데 두가지의 차이점은 아래와 같다.

표#1

 

location.href

location.replace 

 기능

새로운 페이지로 이동된다.

기존페이지를 새로운 페이지로 변경시킨다. 

 형태

속성 

메서드 

 주소 히스토리

기록된다 

기록되지 않는다.

 사용예

location.href='abc.php' 

location.replace('abc.php') 

 

location.href는 객체의 속성이며, loaction.replace()는 메서드(함수)로 작동된다.

href는 페이지를 이동하는 것이기 때문에 뒤로가기 버튼을 누른경우 이전 페이지로 이동이 가능하지만,

replace는 현재 페이지를 새로운 페이지로 덮어 씌우기 때문에 이전 페이지로 이동이 불가능하다.

 

href는 일반적인 페이지 이동시 이용을 하면 되고,

replace의 경우는 이전페이지로 접근이 필요없는경우 보안상 덮어씌우는 것도 괜찮을듯 하다.

'개발 > 실전' 카테고리의 다른 글

document.getElementById  (0) 2014.03.12
<% %>와 <script>차이 점 <%! 설명  (0) 2014.03.12
JOIN과 UNION  (0) 2014.03.11
doGet, doPost  (0) 2014.03.10
액션서블릿 흐름  (0) 2014.03.05
,
1 ··· 6 7 8 9 10 11 12 ··· 15

티스토리툴바