LAPM 개발자 정보공유

igniter.egloos.com

포토로그



form object 접근과 제어 javaScript

제목에서 처럼 초급용 입니다. 

이미 아는 내용이라고 태클 거신다면 할말 없지만 그래도 초급용입니다 -_-; 



통상 form의 element에 접근하는 방식은 

js를 사용하는 사람들 마다 다소 약간의 차이가 있습니다. 

선호하는 코딩 스타일이 다르다는 소리죠 

그렇지만 한가지 공통점은 어디서든 돌아가게 만들자~ 는게 목적 아닐까요? 

javascript 에서 form 뿐만 아니라  document단의  element에 접근하는 방법은 

계층적 접근에 대해서 약간 이해를 해야할 부분이 있습니다. 

그럼 아래에 기본적인 형식을 이용해서 설명을 곁들여 보겠습니다. 

-------------------------------------- 예제 코드1 -------------------------------------- 
<html> 
  <head> 
    <title>문서제목</title> 
  </head> 
  <body> 
    <form name="wfm"> 
        <input type="text" name="lg"  /><br /> 
        <input type="password" name="lp" /><br /> 
        <input type="checkbox" name="auto" /><br /> 
        <input type="submit" value="전송"  /> 
    </form> 
  </body> 
</html> 
------------------------------------------------------------------------------------------------ 
위와 같은 form이 있다고 가정 하겠습니다. 

스크립트를 통해서 문서내의 특정 tag에 접근하는 규칙은 . 을 기준으로 

계층적 구조로 접근하는 형식을 쓰는 것입니다. 

쉬운예로 
document.forms["wfm"].elements["lg"]; 
      문서  .        폼      .      객체 

이해가 되시나요? 

물론 폼을 거치지 않고 바로 접근하는 방법도 있습니다. 

document.getElementById("id"); 
document.getElementsByName("name"); 
    문서  .      아이디 | 네임 객체지정; 

이런 형식이 대표적인 예라고 보시면 됩니다. 

get은 가져오다 라는 의미로 해석을 하시면 이해가 빠를것이라 생각됩니다. 
엘리먼트의 아이디나 네임을 지정해서 해당객체를 지정하는 것입니다. 

그럼 이런 형식의 접근을 이용한 실질적인 방법을 만들어 보겠습니다. 

-------------------------------------- 예제 코드2 -------------------------------------- 
<html> 
  <head> 
    <title>문서제목</title> 
  </head> 
  <script language="javascript"> 
      function fm(){ 
          var obj = document.getElementById("sp");//span tag의 id를 이용한 접근 
          var frm = document.forms["wfm"];//폼까지의 접근자를 지정 
          for ( i=0; i < frm.length; i++){ 
          // form elements는 form의 배열형식으로도 접근 가능합니다. 
              tc = "=\n\n" 
              tc += "element type : " + frm[i].type + "\n\n"; //tc 변수에 문자열지정 
              tc += "element name : " + frm[i].name + "\n\n"; 
              tc += "element value : " + frm[i].value + "\n\n"; 
              obj.innerText += tc;//지정된 id의 연결정보를 담고있는 obj변수에 
              //innerText 를 이용하여 span tag영역안에 문자를 넣어라는 표현입니다. 
          } 
        return false; 
      } 
  </script> 
  <body> 
    <form name="wfm" omsubmit="return fm();"> 
        <input type="text" name="lg"  /><br /> 
        <input type="password" name="lp" /><br /> 
        <input type="checkbox" name="auto" value="1" /><br /> 
        <input type="submit" value="전송"  /> 
    </form> 
    <span id="sp"></span> 
  </body> 
</html> 
------------------------------------------------------------------------------------------------ 


실행된 결과물을 보시면 

element type : text 

element name : lg 

element value : 

element type : password 

element name : lp 

element value : 

element type : checkbox 

element name : auto 

element value : 1 

element type : submit 

element name : 

element value : 전송 

이런 값이 출력됩니다. 

단편적인 예를 들어 설명을 하였지만 javascript를 이용하여 

window, document 등에 접근하는 형식 대동소이합니다. 

forms[""], elements[""] 이런 내용은 하나의 형식입니다. 

elements["string"] 이런 표현식은 form의 객체에 접근하는 경우에만 

사용가능 합니다. 

예제코드2에 사용된 onsubmit 이벤트핸들러에 대해서 말씀드리면 

많은 초보자들이 <input type="button" value="전송" omclick="함수명()" /> 

이런식으로 사용하여 폼유효성 체크를 하고 js에서 form.submit();를 이용하여 

form을 전송하는 것을 많이 보았습니다. 

하지만 스쿨 팁텍에도 언젠가 올라온 내용이 있는데요 

이런경우 form의 input field에서 enter를 입력하면 form이 submit 되는 현상을 
보게 됩니다. 

위 input field 예는 버튼을 클릭을 해야만 함수를 호출하게 되어 있습니다. 

반면 onsubmit 이벤트 핸들러는 form이 submit 되는것을 인식합니다. 

onsubmit = "return 함수명();" 

이런식으로 사용하여 함수내에서 form의 입력된 정보에 유효성 검사를 하여 

맞지 않을 경우 false를 return 하는 형식을 취해주면 form이 전송되는 것도 

막을 수 있습니다. = "return  <- 이문장은 함수로 부터 되돌아 오는 

값이 false가 아니면 submit을 시키겠다는 뜻입니다. 

다소 귀찮고 힘들지 몰라도 개발자가 생각을 많이 하면 사용자는 더욱 편해진다는 

간단한 이치 잊어버리지 맙시다 ^^ 

위 예제를 통해 도움이 되었다면 좋겠습니다. 

[PHPschool.com 눈팅님의 글]

null

덧글

  • viagra_online 2017/03/27 06:04 # 삭제 답글

  • viagra 2017/03/28 19:10 # 삭제 답글

  • for 2017/03/30 18:17 # 삭제 답글

  • online 2017/04/09 10:56 # 삭제 답글

  • du 2017/04/11 14:32 # 삭제 답글

    Vitrix &raquo; Similar Threads Cialis and http://clia2online.com/ , for weightlifting wft?
  • try! 2017/04/11 17:58 # 삭제 답글

    Lowest Price For Tadalafil, http://www.erectilepharm11.com/wp/ , Generic Canada.
  • custom 2017/04/13 19:13 # 삭제 답글

  • kondom 2017/04/13 19:37 # 삭제 답글

    Hi, Neat post. There's a problem with your website in internet explorer, would test this IE still is the market leader and a good portion of people will miss your great writing due to this problem.
  • viagra_cheap 2017/04/13 23:01 # 삭제 답글

    Where To Buy Cheap Generic Cefuroxime 250mg in Baltimore
  • fast 2017/04/20 05:39 # 삭제 답글

    I got what you intend, appreciate it for posting .Woh I am lucky to find this website through google. I was walking down the street wearing glasses when the prescription ran out. by Steven Wright.
  • comprar 2017/04/21 22:02 # 삭제 답글

    It's very straightforward to find out any topic on net as compared to textbooks, as I found this article at this site.
  • buy_viagra 2017/04/23 12:12 # 삭제 답글

    I discovered your blog web site website on the search engines and check several of your early posts. Always sustain up the very excellent operate. I lately additional increase Rss to my MSN News Reader. Looking for toward reading much far more on your part later on!
  • generic_cialis 2017/04/25 07:10 # 삭제 답글

    As soon as I detected this site I went on reddit to share some of the love with them.
  • love 2017/04/25 22:22 # 삭제 답글

    This design is incredible! You obviously know how to keep a reader amused.
  • generic_viagra 2017/05/03 02:03 # 삭제 답글

    Great, thanks for sharing this article. Really Cool.
  • online_cialis 2017/05/20 10:28 # 삭제 답글

    cell phone lookup by name I was just searching for this
  • buy 2017/05/21 07:44 # 삭제 답글

    I am really impressed with your writing skills as well as with the layout on your weblog. Is this a paid theme or did you modify it yourself? Anyway keep up the excellent quality writing, its rare to see a great blog like this one nowadays
  • lkjhgfd 2017/05/25 09:34 # 삭제 답글

    breast enlargement pills online india

    <a href=http://breastenlargementpillstzv.info/> breast enlargement pills in sri lanka</a>

    <a href=http://breastenlargementpillstzv.info/> breast enlargement pills malaysia</a>

    breast enlargement pills in india
  • cialis_online 2017/05/29 06:19 # 삭제 답글

    I do not even know how I stopped up here, however I assumed this put up was good. I do not recognise who you are however definitely you're going to a wellknown blogger for those who are not already
  • cialis 2017/05/29 16:39 # 삭제 답글

    A big thank you for your article.Really thank you! Cool.
  • viagra_online 2017/06/08 19:21 # 삭제 답글

    I don't usually comment but I gotta admit thanks for the post on this great one
  • generic_viagra 2017/06/16 09:25 # 삭제 답글

    reverse lookup cell phone free christian louboutin shoes you are
  • generic 2017/06/18 19:54 # 삭제 답글

    very nice submit, i definitely love this website, keep on it
  • generic 2017/06/27 12:01 # 삭제 답글

    garcinia cambogia extract weight loss results She is to make pill
  • cash 2017/06/29 07:56 # 삭제 답글

    hi!,I really like your writing so so much! proportion we communicate more about your post on AOL? I need a specialist on this space to unravel my problem. Maybe that's you! Looking ahead to see you.
  • cheap_cialis 2017/07/16 09:54 # 삭제 답글

    This kind of game gives a real experience of building a farm and planting trees.
  • yqihix 2017/07/20 19:14 # 삭제 답글

    www.koloniezimowiska.pl http://m97.pl/1e
  • cialis 2017/08/01 10:47 # 삭제 답글

    You have brought up a very good details , thankyou for the post.
  • cialis_online 2017/08/06 22:15 # 삭제 답글

    We're a group of volunteers and starting a new scheme in our community.
  • viagra 2017/08/23 19:25 # 삭제 답글

    This is why Facebook games are becoming more popular. The ease of use and dissemination of content, tagging
  • buy_viagra 2017/08/25 03:22 # 삭제 답글

    I loved your blog article. Really Cool.
  • viagra_india 2017/08/30 03:42 # 삭제 답글

    Hey very nice website!! Man .. Beautiful .. Amazing .. I'll bookmark your website and take the feeds alsoI'm happy to find numerous useful information here in the post, we need work out more techniques in this regard, thanks for sharing. . . . . .
  • loans 2017/09/09 03:02 # 삭제 답글

    As soon as I detected this site I went on reddit to share some of the love with them.
  • cialis_price 2017/09/14 23:51 # 삭제 답글

    It is also possible that Zynga's chosen advertising network is to blame if we
  • fax 2017/09/19 12:21 # 삭제 답글

    whoah this weblog is wonderful i love studying your posts. Stay up the great work! You know, many individuals are searching round for this info, you can aid them greatly.
  • cialis 2017/10/06 02:04 # 삭제 답글

    Some genuinely prize content on this internet site, bookmarked.
  • viagra_generic 2017/10/14 10:57 # 삭제 답글

    I think this is one of the most significant information for me. And i'm glad reading your article. But should remark on some general things, The web site style is wonderful, the articles is really excellent D. Good job, cheers
  • viagra_generic 2017/10/20 16:04 # 삭제 답글

    I am impressed with this website, rattling I am a big fan.
  • payday_loans 2017/10/27 21:21 # 삭제 답글

    Exclusively at Target 42 Bluray Combo Pack with exclusive
  • payday 2017/10/29 10:56 # 삭제 답글

    coumadin valtrex interaction
  • viagra_coupons 2017/11/04 15:42 # 삭제 답글

    Hi there, I found your site by way of Google while searching for a comparable matter, your web site got here up, it looks good. I have bookmarked it in my google bookmarks.
  • cialis_cheap 2017/11/15 04:49 # 삭제 답글

    Thank you for the auspicious writeup. It in fact was a amusement account it. Look advanced to far added agreeable from you! By the way, how can we communicate?
  • cialis 2017/11/25 07:50 # 삭제 답글

    Specifically where web can a certified psyciatrist submit content or sites for them to become fashionable?
  • cialis 2017/11/29 08:55 # 삭제 답글

    I know this if off topic but I'm looking into starting my own blog and was curious what all is required to get set up? I'm assuming having a blog like yours would cost a pretty penny? I'm not very web savvy so I'm not 100 positive. Any recommendations or advice would be greatly appreciated. Thanks
  • generic_cialis 2017/12/01 05:43 # 삭제 답글

    I loved your post.Much thanks again.
  • order_cialis 2017/12/02 20:25 # 삭제 답글

    Very good blog post.Really thank you! Fantastic.
  • super 2017/12/04 23:48 # 삭제 답글

    This event occurred rigt after the time Mario return to the Mushroom Kingdom so it had to take place after
  • viagra_cheap 2017/12/08 13:39 # 삭제 답글

    I like this site its a master peace ! Glad I observed this on google. The definition of a beautiful woman is one who loves me. by Sloan Wilson.
  • viagra 2017/12/13 23:30 # 삭제 답글

    Some really quality blog posts on this internet site , saved to fav.
  • cialis 2017/12/16 13:28 # 삭제 답글

    Good writeup, I am normal visitor of ones blog, maintain up the excellent operate, and It's going to be a regular visitor for a lengthy time.
  • cialis 2017/12/19 07:34 # 삭제 답글

    Someone essentially help to make significantly posts I might state. This is the first time I frequented your web page and so far? I surprised with the research you made to create this actual submit amazing. Magnificent activity!
  • payday 2017/12/23 13:17 # 삭제 답글

    Article Source a viral game app is not
  • cialis 2017/12/26 13:16 # 삭제 답글

    Well I really enjoyed reading it. This information procured by you is very practical for correct planning.
  • buy_cialis 2017/12/31 00:45 # 삭제 답글

    I will immediately grab your rss feed as I can not find your email subscription link or enewsletter service. Do you've any? Please let me know in order that I could subscribe. Thanks.
  • generic_cialis 2018/01/03 04:39 # 삭제 답글

    Usually I do not read writeup on blogs, nevertheless I wish to say that this writeup extremely forced me to take a look at and do so! Your writing taste has been amazed me. Thanks, really wonderful post.
  • cialis 2018/01/05 15:28 # 삭제 답글

    As I web site possessor I believe the content material here is rattling great , appreciate it for your hard work. You should keep it up forever! Good Luck.
  • viagra_cheap 2018/01/06 21:20 # 삭제 답글

    Today, while I was at work, my sister stole my apple ipad and tested to see if it can survive a 30 foot drop, just so she can be a youtube sensation. My apple ipad is now destroyed and she has 83 views. I know this is entirely off topic but I had to share it with someone!
  • cialis_online 2018/01/12 04:43 # 삭제 답글

    is elocon a steroid cream
  • buy_viagra 2018/01/12 18:13 # 삭제 답글

    Article Source a viral game app is not
  • cialis_canada 2018/01/16 20:31 # 삭제 답글

    Admiring the hard work you put into your site and detailed information you offer. It's good to come across a blog every once in a while that isn't the same unwanted rehashed material. Wonderful read! I've bookmarked your site and I'm adding your RSS feeds to my Google account.
  • viagra_cheap 2018/02/02 00:44 # 삭제 답글

    Hello there, I discovered your website by the use of Google while looking for a related subject, your web site came up, it seems good. I have bookmarked it in my google bookmarks.
  • viagra 2018/02/23 13:52 # 삭제 답글

    Mudbox is a software for 3D sculpting and painting which
  • viagra 2018/02/25 16:07 # 삭제 답글

    Hey very nice web site!! Man.. Beautiful.. Wonderful.. I'll bookmark your web site and take the feeds alsoKI am satisfied to seek out a lot of helpful information here in the publish, we want work out extra techniques in this regard, thank you for sharing
  • cheap 2018/03/05 21:49 # 삭제 답글

    Howdy! Do you know if they make any plugins to protect against hackers? I'm kinda paranoid about losing everything I've worked hard on. Any recommendations?
  • viagra 2018/03/08 00:22 # 삭제 답글

    Hi there! Would you mind if I share your blog with my myspace group? There's a lot of people that I think would really appreciate your content. Please let me know. Many thanks
  • viagra_price 2018/03/08 17:56 # 삭제 답글

    This kind of game gives a real experience of building a farm and planting
  • viagra 2018/03/08 17:56 # 삭제 답글

    It's a mammoth playground built of mountains, hills, lakes,
  • cialis 2018/03/29 10:21 # 삭제 답글

    You could certainly see your skills within the work you write. The world hopes for more passionate writers like you who arent afraid to say how they believe. Always follow your heart.
  • generic 2018/03/31 14:28 # 삭제 답글

    This website was how do you say it? Relevant!!
  • viagra 2018/04/04 23:13 # 삭제 답글

    Article Source a viral game app is not that much
  • viagra 2018/04/10 17:12 # 삭제 답글

    I truly appreciate this post. I've been looking all over for this! Thank goodness I found it on Bing. You've made my day! Thanks again!
  • cialis 2018/04/12 08:04 # 삭제 답글

    griseofulvin psoriasis
  • buy_cialis 2018/04/24 16:14 # 삭제 답글

    Howdy! Do you know if they make any plugins to protect against hackers? I'm kinda paranoid about losing everything I've worked hard on. Any recommendations?
  • buy_cialis 2018/04/26 20:29 # 삭제 답글

    I like this weblog very much so much good info. It's a poor sort of memory that only works backward. by Lewis Carroll.
  • viagra_online 2018/05/04 17:41 # 삭제 답글

    Some genuinely prize content on this internet site, bookmarked.
  • online_viagra 2018/05/16 12:28 # 삭제 답글

    You are a really persuasive writer. I can see this in your writeup. You've a way of writing compelling info that sparks significantly interest.
  • cheap_viagra 2018/06/02 19:56 # 삭제 답글

    Good blog! I really love how it is easy on my eyes and the data are well written. I am wondering how I could be notified whenever a new post has been made. I have subscribed to your feed which must do the trick! Have a nice day!
  • cialis_online 2018/06/04 23:44 # 삭제 답글

    I just like the valuable info you provide in your articles. I will bookmark your weblog and check once more here frequently. I am moderately sure I will be told lots of new stuff right right here! Best of luck for the following!
  • buy_cialis 2018/06/13 04:04 # 삭제 답글

    I really enjoy the article post. Cool.
  • generic_cialis 2018/06/13 20:10 # 삭제 답글

    I got what you mean, regards for putting up.Woh I am delighted to find this website through google. You must pray that the way be long, full of adventures and experiences. by Constantine Peter Cavafy.
  • buy_viagra 2018/06/16 02:47 # 삭제 답글

    weblog. Loads of gratitude sharing.
  • canadian_viagra 2018/06/28 20:21 # 삭제 답글

    Thanks for any other informative web site. Where else may just I get that kind of information written in such an ideal way? I have a mission that I am just now operating on, and I have been on the look out for such information.
  • generic_viagra 2018/06/30 04:01 # 삭제 답글

    Thanks for this article. I'd also like to convey that it can always be hard if you find yourself in school and starting out to initiate a long history of credit. There are many college students who are only trying to live and have long or good credit history can often be a difficult thing to have.
  • generic_cialis 2018/07/02 18:09 # 삭제 답글

    I just couldnt depart your site prior to suggesting that I incredibly enjoyed the standard information an individual supply for your visitors? Is gonna be back often so that you can inspect new posts
  • cheap_viagra 2018/07/17 17:09 # 삭제 답글

    Write more, thats all I have to say. Literally, it seems as though you relied on the video to make your point. You clearly know what youre talking about, why throw away your intelligence on just posting videos to your weblog when you could be giving us something enlightening to read?
  • viagra_online 2018/07/24 06:04 # 삭제 답글

    Hey there! Do you know if they make any plugins to help with Search Engine Optimization? I'm trying to get my blog to rank for some targeted keywords but I'm not seeing very good results. If you know of any please share. Thank you!
  • purchase_cialis 2018/07/31 01:37 # 삭제 답글

    Because here is a list of multiplayer games is that the leave was asked
  • online_viagra 2018/08/05 15:02 # 삭제 답글

    Link exchange is nothing else but it is just placing the other persons weblog link on your page at proper place and other person will also do similar in support of you.
  • cialis_cheap 2018/08/10 15:10 # 삭제 답글

    what are some superior and in demand websites for blogs? ?? .
  • online_viagra 2018/08/23 09:49 # 삭제 답글

    It's a mammoth playground built of mountains, hills, lakes, rivers, valleys, woodlands,and beaches.
  • viagra 2018/08/24 11:16 # 삭제 답글

    Specifically where web can a certified psyciatrist submit content or sites for them to become fashionable?
  • generic_cialis 2018/08/29 18:14 # 삭제 답글

    Magnificent beat ! I wish to apprentice even as you amend your site, how could i subscribe for a blog web site? The account helped me a acceptable deal. I were a little bit acquainted of this your broadcast offered bright transparent concept
  • cialis 2018/09/01 18:53 # 삭제 답글

    I know this if off topic but I'm looking into starting my own blog and was curious what all is required to get set up? I'm assuming having a blog like yours would cost a pretty penny? I'm not very web savvy so I'm not 100 positive. Any recommendations or advice would be greatly appreciated. Thanks
  • viagra_online 2018/09/03 08:45 # 삭제 답글

    Very well written article. It will be helpful to anyone who usess it, as well as yours truly
  • payday_advance 2018/09/13 19:56 # 삭제 답글

    I loved your post.Much thanks again.
  • online_viagra 2018/09/17 19:27 # 삭제 답글

    I dugg some of you post as I cogitated they were very useful extremely helpful
  • super 2018/09/22 11:50 # 삭제 답글

    I'm curious to uncover out what blog system youre employing? Im experiencing some small security troubles with my latest weblog and Id like to locate something more safeguarded. Do you've any recommendations?
  • viagra_cheap 2018/09/24 04:17 # 삭제 답글

    A big thank you for your article.Really thank you! Cool.
  • buy_cialis 2018/09/24 21:12 # 삭제 답글

    It is rare for me to uncover something on the web thats as entertaining and intriguing as what you have got here. Your page is sweet, your graphics are great, and whats much more, you use source that are relevant to what youre saying. That you are undoubtedly one in a million, well done!
  • generic_cialis 2018/09/26 00:13 # 삭제 답글

    Neat blog! Is your theme custom made or did you download it from somewhere? A theme like yours with a few simple tweeks would really make my blog jump out. Please let me know where you got your design. Thanks
댓글 입력 영역
◀ 다음덧글    이전덧글 ▶