Tel. 042-353-2371

ÆòÀÏ ¿ÀÀü 9½Ã ~ ¿ÀÈÄ 7½Ã
±â¾÷ÀºÇà

010-8649-6758

¿¹±ÝÁÖ:Á¦ÁÖ»ç¶û(¼ÛÁø¾Æ)
JAVASCRIPT
Ȩ > ȨÆäÀÌÁöÁ¦ÀÛ±³½Ç > JAVASCRIPT

Ä«Å×°í¸® Tutorial
Á¦¸ñ Introduction to JavaScript
ÀÛ¼ºÀÚ freewebkorea
ÀÛ¼ºÀÏÀÚ 2009-12-09
Á¶È¸¼ö 1053

JavaScript

ÀÚ¹Ù½ºÅ©¸³Æ®´Â À¥ ÆäÀÌÁö¿¡¼­ °¡Àå ¸¹ÀÌ »ç¿ëµÇ´Â Scripting(»ç¶÷ÀÌ ¾Ë¾Æ º¼ ¼ö ÀÖ´Â ¹®ÀÚ·Î Script¸¦ ÀÛ¼ºÇÏ´Â °Í) ¾ð¾îÀÔ´Ï´Ù. Scripting ¾ð¾î¸¦ Å©°Ô ³ª´©¸é ÀÚ¹Ù ½ºÅ©¸³Æ®³ª DHTML, Visual Basic µî°ú °°Àº Broswer Scripting ¾ð¾î¿Í ASP, PHP ¿Í °°Àº Server Scripting ¾ð¾î·Î ±¸º° ÇÒ ¼ö ÀÖ½À´Ï´Ù. ƯÈ÷ ÀÚ¹Ù½ºÅ©¸³Æ®´Â ASP¿Í ¿¬µ¿µÇ¾î¼­ ÀԷ¶õ¿¡ ÀÔ·ÂÇÑ °ªÀÌ Á¦´ë·Î µÈ °ªÀÎÁöÀÇ ¿©ºÎµîÀ» üũÇÏ´Â »óÈ£ÀÛ¿ë(Interactive)Àû ¿ä¼Ò¿Í À¥ ÆäÀÌÁö¿¡ µ¿Àû(Dynamic)ÀÎ È¿°úµîÀ» ÁÖ´Â ºÎºÐ¿¡ »ç¿ëµÇ¸ç ±× ¹Û¿¡µµ ¸¹Àº ±â´ÉÀ» »ç¿ëÀÚ°¡ Ãß°¡ÇÏ¿© »ç¿ëÇÏ´Â ¸Å¿ì Áß¿äÇÑ ¿ä¼Ò¶ó°í ÇÒ ¼ö ÀÖ½À´Ï´Ù.



JavaScript ¸¦ Çϱâ À§Çؼ­ ¾Ë°í ÀÖ¾î¾ß µÉ ºÎºÐ

JavaScript ¸Þ´º¿¡ ³ª¿À´Â ¹®¼­¸¦ Á¦´ë·Î ÀÌÇØÇϱâ À§Çؼ­´Â WWW¿Í HTML, CSS ±×¸®°í À¥ ¹®¼­¸¦ ¸¸µé±â À§ÇÑ ±âÃÊÀûÀÎ »çÇ×µéÀ» ¾Ë¾Æ¾ß ÇÕ´Ï´Ù. ¸¸¾à ÀÌ 3°¡Áö »çÇ׿¡ ´ëÇØ Àß ¸ð¸£½Ã¸é ÀÌ »çÀÌÆ®ÀÇ HTML ¸Þ´º¿Í CSS ¸Þ´º¸¦ Âü°í Çϼ¼¿ä.



JavaScript¶õ ¹«¾ùÀΰ¡.
  • JavaScript´Â HTML ¹®¼­¿¡ »óÈ£ÀÛ¿ë(Interactive)ÇÏ´Â ¿ä¼Ò¿Í µ¿Àû(Dynamic) ¿ä¼Ò¸¦ Ãß°¡Çϱâ À§ÇØ ¸¸µå´Â ¾ð¾îÀÔ´Ï´Ù.
  • JavaScript´Â Java Programming °ú´Â ÀüÇô ´Ù¸¥ script ¾ð¾î ÀÔ´Ï´Ù. Áï, Java Programming °ú °°ÀÌ ¹è¿ì´Âµ¥ ¸¹Àº ½Ã°£ÀÌ µéÁö ¾Ê°í, ³­À̵µµµ ³·Àº ¾ð¾îÁÒ. ¹°·Ð Java Programming ¿¡ ºñÇØ ±×·¸´Ù´Â °ÅÁö ½±´Ù´Â ¶æÀÌ ¾Æ´Õ´Ï´Ù.
  • JavaScript´Â script code ÀÚü¸¸À¸·Î´Â ¾Æ¹« °Íµµ µÇÁö ¾Ê½À´Ï´Ù. HTML°ú ÇÔ²² »ç¿ëµÉ ¶§ ¾î¶² ±â´ÉÀ» ¼öÇàÇÏ°Ô µË´Ï´Ù.
  • JavaScript´Â Java Programmingó·³ Compile(»ç¶÷ÀÌ Àо ÇØµ¶ÇÒ ¼ö ¾ø´Â ±â°è¾î·Î º¯È¯ÇÏ´Â ÀÛ¾÷)À» ÇÏÁö ¾Ê¾Æµµ ½ÇÇàÀÌ °¡´ÉÇÑ Interpret(»ç¶÷ÀÌ ÇØµ¶ÇÒ ¼ö ÀÖ´Â script¸¦ Á÷Á¢ ÇØ¼®Çؼ­ ½ÇÇà) ¾ð¾îÀÔ´Ï´Ù. ÀÌ JavaScript ÇØ¼®±â(Interpreter)´Â ¹Ù·Î ¿©·¯ºÐµéÀÌ »ç¿ëÇÏ´Â MS ÀͽºÇ÷η¯³ª Netscape °°Àº Áß¿ä ºê¶ó¿ìÀú¿¡ ³»ÀåµÇ¾î ÀÖÀ¸¸ç, °¢°¢ Version 3.0 À̻󿡼­ ¹®Á¦¾øÀÌ ÀÛµ¿µË´Ï´Ù.
  • JavaScript´Â ¹«·á·Î »ç¿ëÇÒ ¼ö ÀÖ½À´Ï´Ù. ¾ÆÁÖ Å« ÀåÁ¡ÀÌ µÇ°ÚÁ®.


JavaScript·Î ÇÒ ¼ö ÀÖ´Â °Í µé...
  • ÀԷ¶õ(Form)¿¡ ÀԷµǾî Àü¼Û½Ãų °ªÀ» °ËÁõ(Validate)ÇØ¼­ ¼±ÅÃÀûÀ¸·Î ¹ÞÀ» ¼ö ÀÖ½À´Ï´Ù. HTML ¸Þ´º¿¡¼­ ¹Ì·ç¾î ³õ¾Ò´ø Form °ü·Ã Element µéÀ» µåµð¾î ¿©±â¼­ ÇÏ°Ô µË´Ï´Ù. JavaScript ¿Í ¿¬µ¿µÇÁö ¾ÊÀº »óÅ¿¡¼­´Â ¾Æ¹«¸® FormÀ» Àâ°í ÀԷ°ªÀ» Àü¼ÛÇØ ºÁµµ ±× °ªÀ» ¹Þ¾Æ ÁÙ µ¥°¡ ¾ø±â ¶§¹®¿¡ JavaScript ¸Þ´º¿¡¼­ ´Ù·é´Ù´Â °Ì´Ï´Ù.
  • ´Ü¼øÈ÷ ¹Ýº¹µÇ´Â °úÁ¤À» ¹Ù·Î ÀÌ ³Ñ... JavaScript¿¡°Ô ½ÃŰ¹Ç·ÎÇØ¼­ ´Ü¼ø ÀÛ¾÷¿¡¼­ ÇØ¹æ µÉ ¼ö ÀÖ½À´Ï´Ù.
  • ´Ù¾çÇÑ Event¸¦ HandlingÇÒ ¼ö ÀÖ°Ô µË´Ï´Ù. Event¶õ ÀÌ »çÀÌÆ®ÀÇ CSS Scripting¿¡¼­ÀÇ OnMouseOver, OnClick µîÀÇ ¸¶¿ì½º Event¸¦ ºñ·ÔÇÑ Keyboard Event µîÀÇ ´Ù¾çÇÑ DHTML Event µéÀ» »ç¿ëÇÒ ¼ö Àֱ⠶§¹®¿¡ ¼±ÅÃÀÇ ÆøÀÌ ÈξÀ ³Ð¾îÁö°Ô µË´Ï´Ù.
  • º¯¼ö(Variable)¸¦ »ç¿ëÇÒ ¼ö Àֱ⠶§¹®¿¡ ¹Ýº¹µÇ´Â ´Ü¾î³ª, ³»¿ëÀÇ TypingÀ» ¹Ýº¹ÇÏÁö ¾Ê¾Æµµ µË´Ï´Ù.
  • ±× À̿ܿ¡ ¸¶¿ì½º¿¡ ±ÛÀÚµéÀÌ µû¶ó´Ù´Ñ ´ÙµçÁö ÇÏ´Â ´Ù¾çÇÑ ÇÁ·Î±×·¥ÀûÀÎ È¿°ú¸¦ ³¾ ¼ö ÀÖ½À´Ï´Ù.


JavaScript¸¦ º¸´Ù È¿°úÀûÀ¸·Î ¹è¿ì´Â ¹æ¹ý

JavaScript ¸Þ´º¿¡¼­ óÀ½À¸·Î 'Programming' À̶ó´Â ´Ü¾î°¡ µîÀåÇÏ°Ô µÇ´Âµ¥, Á¦ °æÇè¿¡ ºñÃß¾î JavaScript¸¦ ¾Æ´Âµ¥ ¾à°£ÀÇ µµ¿òÀÌ µÉ ¼ö ÀÖ´Â ÀÏÁ¾ÀÇ Guideline À̶ö ¼ö ÀÖ´Â ¸î°¡Áö TipÀ» ¾Ë·Á ÁÖ°Ú½À´Ï´Ù.

  • ³²ÀÌ ¸¸µç script¸¦ Èä³» ³½´Ù.
    Program À̶ó°í ºÎ¸£´Â ´Ù¸¥ ¸ðµç ÇÁ·Î±×·¥µéÀÌ ´Ù ±×·¸Áö¸¸ °³³äÀ» Àâ°í, LogicÀ» ÀÌÇØÇÑ´Ù´Â °ÍÀÌ Ãʺ¸ÀÚ¿¡°Ô °áÄÚ ½¬¿î ÀÏÀÌ ¾Æ´Õ´Ï´Ù. µû¶ó¼­ óÀ½ºÎÅÍ °æÇèµµ ¾øÀÌ ÀÚ±â Èû ¸¸À¸·Î scriptingÀ» ÇÑ´Ù´Â °ÍÀº »ó´çÈ÷ ¹Ì·ÃÇÑ ÀÏÀÌÁÒ. ´Ù¸¥ »ç¶÷ÀÌ ¸¸µç °£´ÜÇÑ scriptºÎÅÍ Èä³»¸¦ ³»´Ù º¸¸é Á¡Â÷ °³³äÀÌ ÀâÈ÷°í, Logicµµ ÀÌÇØÇÏ°Ô µË´Ï´Ù. ¹°·Ð ¸¹ÀÌ ÇÒ ¼ö·Ï ÀÌÇØ°¡ ºü¸£°ÚÁÒ.


  • Script sourceÀÇ DataBase¸¦ ¸¸µç´Ù.
    ¸·»ó Àڱ⿡°Ô ÇÊ¿äÇÑ source¸¦ ±¸ÇÏ·Á¸é ºñ½ÁÇϱä Çѵ¥ 'µü ¸ÂÁö´Â ¾Ê´Â' sourceµéÀ» ¸¹ÀÌ º¸°ÔµË´Ï´Ù. ¹°·Ð µü ¸Â´Â °ÍÀ» ±¸ÇÒ ¼öµµ ÀÖ°ÚÁö¸¸... ÀÚ±âÇÑÅ× ÇÊ¿äÇϰųª ±¦Âú´Ù ½ÍÀº source°¡ ÀÖÀ¸¸é Â÷°î Â÷°î ÀúÀåÇØ ³õ´Â ½À°üÀ» µéÀÌ´Â°Ô °á±¹Àº ½Ã°£À» Àý¾àÇÏ´Â ±æÀÌ µË´Ï´Ù. ¿äÁòÀÇ OSµéÀº filenameÀ» ±æ°Ô ÁÙ ¼ö Àֱ⠶§¹®¿¡ ³ªÁß¿¡ ½Ã°£ÀÌ Áö³­ µÚ¿¡µµ ¾î¶² ³»¿ëÀÎÁö ¾Ë¾Æ º¼ ¼ö ÀÖ°Ô À̸§À» ÁÖ°í ÀúÀåÇØ ³õÀ¸¸é ÁÁ½À´Ï´Ù.


  • ¿µ¹®Å¸ÀÚ¸¦ ¿¬½ÀÇÑ´Ù.
    JavaScriptÀÇ codeµéÀº ´ë ºÎºÐ ¿µ¹®À̱⠶§¹®¿¡ Ãʺ¸ÀÚÀ̸鼭 ¿µ¹®Å¸ÀÚ¿¡ Àͼ÷ÇÏÁö ¸øÇÏ°Ô µÇ¸é scriptingÇϴµ¥ ¸¹Àº ½Ã°£À» ¼ÒºñÇÏ°Ô µÇÁ®. ´õ±º´Ù³ª ¿¡·¯°¡ ³ª¸é ¾îµð¼­ ³µ´ÂÁö ¾Ë±âµµ ½¬¿îÀÏÀÌ ¾Æ´Õ´Ï´Ù. ÀÎÅͳݿ¡¼­ ½±°Ô ±¸ÇÒ ¼ö Àִ ŸÀÚ ¿¬½À ÇÁ·Î±×·¥À¸·Î ÇÏ·ç¿¡ 3 ~ 40 ºÐ Á¤µµ¸¦ ¸¹À̵µ ¸»°í, 3ÁÖ¸¸ ÇØ º¸½ÃÁ®. °³ÀÎÀÇ ´É·Â¿¡ µû¶ó ÃÖ¼ÒÇÑ 150Ÿ¿¡¼­ 200Ÿ Á¤µµ´Â Ä¥ ¼ö ÀÖÀ¸¸ç, ±× ÀÌ»óÀÇ ¼Óµµ´Â script¸¦ ÀÛ¼ºÇÏ´Ù º¸¸é ÀÚ¿¬È÷ ´Ã°Ô µË´Ï´Ù. ÃÖ¼ÒÇÑ ÀÚÆÇÀ» ¾È º¸°í Ä¥ Á¤µµÀÇ ±âÃÊÀûÀÎ ¼Ò¾çÀ» °®Ãç¾ß µµÁß¿¡ Æ÷±âÇÒ °¡´É¼ºÀÌ ÁÙ°Ô µË´Ï´Ù.

  • ±Û¾¾ »öÀÌ ±¸º° µÇ´Â Editor¸¦ »ç¿ëÇÑ´Ù.
    script¸¦ ÀÛ¼ºÇÏ´Ù º¸¸é ¿ÀŸ³ª »© ¸ÔÀº ±ÛÀÚµé ¶§¹®¿¡ ¿¡·¯°¡ ³ª´Â °æ¿ì°¡ ¸¹½À´Ï´Ù. ±×·¸±â ¶§¹®¿¡ ¸Þ¸ðÀå°ú °°ÀÌ ±Û¾¾ ¸ð¾çÀ̳ª »öÀÇ ±¸º°ÀÌ ¾ø´Â ÆíÁý±â¸¦ »ç¿ëÇÏ¸é ¿¡·¯³­ ºÎºÐµé ã´Âµ¥ »ó´çÇÑ ¾Ö¸¦ ¸Ô°Ô µÇÁ®. HTML ¸Þ´º¿¡¼­ ¼Ò°³ÇÑ HTML-Kit °°Àº ¹®¼­ ÆíÁý±â¸¦ »ç¿ëÇÏ¸é ±ÛÀÚ ÇüÅÂ¿Í »öÀÇ ±¸ºÐÀÌ ¶Ñ·ÇÇϱ⠶§¹®¿¡ ¿¡·¯¸¦ ã´Âµ¥ ¸¹Àº È¿°ú¸¦ º¼ ¼ö ÀÖ½À´Ï´Ù. ¹Ýµå½Ã ÇÊ¿äÇÕ´Ï´Ù. ¾Æ·¡´Â HTML-Kit Sample...

    ³ª¸ÓÁö TipµéÀº ´Ù¸¥ ÆäÀÌÁö¿¡¼­ ±× ¶§¸¶´Ù ¼³¸íÇϵµ·Ï ÇϰڽÀ´Ï´Ù...^^
editor_sample (11K)