<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>vgo_dongv.log</title>
        <link>https://velog.io/</link>
        <description>삐약..뺙뺙</description>
        <lastBuildDate>Thu, 04 Sep 2025 07:25:52 GMT</lastBuildDate>
        <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
        <generator>https://github.com/jpmonette/feed</generator>
        <image>
            <title>vgo_dongv.log</title>
            <url>https://images.velog.io/images/vgo_dongv/profile/e2887d8a-0e00-4e42-80bc-2986c0f32f58/ㅍㅅ.jpg</url>
            <link>https://velog.io/</link>
        </image>
        <copyright>Copyright (C) 2019. vgo_dongv.log. All rights reserved.</copyright>
        <atom:link href="https://v2.velog.io/rss/vgo_dongv" rel="self" type="application/rss+xml"/>
        <item>
            <title><![CDATA[플러터 여백 마진 패딩]]></title>
            <link>https://velog.io/@vgo_dongv/%ED%94%8C%EB%9F%AC%ED%84%B0-%EC%97%AC%EB%B0%B1-%EB%A7%88%EC%A7%84-%ED%8C%A8%EB%94%A9</link>
            <guid>https://velog.io/@vgo_dongv/%ED%94%8C%EB%9F%AC%ED%84%B0-%EC%97%AC%EB%B0%B1-%EB%A7%88%EC%A7%84-%ED%8C%A8%EB%94%A9</guid>
            <pubDate>Thu, 04 Sep 2025 07:25:52 GMT</pubDate>
            <description><![CDATA[<p>바깥여백주기
안쪽여백주기
참
쉽
져?</p>
<pre><code>import &#39;package:flutter/material.dart&#39;;

void main() {
  runApp(const MyApp()); /* 앱 구동 시켜주세요 MyApp()에 메인메이지 넣어주면됨 */
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
       appBar: AppBar(title: Text(&#39;상단띠&#39;), backgroundColor: Colors.blue),
        body: Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            width: double.infinity, height: 100, color: Colors.red,
           /* margin: EdgeInsets.all(20),  바깥 여백 주기 */
           /* padding: EdgeInsets.all(15), 안쪽 여백 주기 */
                 /*   decoration: BoxDecoration(
              border: Border.all(color: Colors.black)
              박스 테두리 주기
            ),*/
            child: Text(&#39;온도&#39;),
          ),
        ),
      ),
    );

  }
}
</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[플러터 간단 예제 만들어보기 ]]></title>
            <link>https://velog.io/@vgo_dongv/%ED%94%8C%EB%9F%AC%ED%84%B0-%EA%B0%84%EB%8B%A8-%EC%98%88%EC%A0%9C-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0</link>
            <guid>https://velog.io/@vgo_dongv/%ED%94%8C%EB%9F%AC%ED%84%B0-%EA%B0%84%EB%8B%A8-%EC%98%88%EC%A0%9C-%EB%A7%8C%EB%93%A4%EC%96%B4%EB%B3%B4%EA%B8%B0</guid>
            <pubDate>Thu, 04 Sep 2025 06:55:39 GMT</pubDate>
            <description><![CDATA[<p>유튜브 코딩애플 강의 그대로 따라하는데 나만.. 상단바 배경 파랑아니고 가운데 정렬이야? 알아보니 맥이라 그런거같음^_^ 색상은 내가 넣어주지뭐</p>
<p>컨테이너 박스는 남용하지말것 무겁다
성능을 위해 간단한 크기 조절이면 사이즈드 박스써라</p>
<pre><code>import &#39;package:flutter/material.dart&#39;;

void main() {
  runApp(const MyApp()); /* 앱 구동 시켜주세요 MyApp()에 메인메이지 넣어주면됨 */
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {

    /* 실제 내용은 여기 안에 */
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(&#39;상단바&#39;),
          backgroundColor: Colors.blue
        ),
        body: Text(&#39;가운데&#39;),
        bottomNavigationBar: BottomAppBar(
          child: SizedBox( /* 가벼운 사이즈 박스 */
            height: 200,
            child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Icon(Icons.phone),
              Icon(Icons.message),
              Icon(Icons.contact_page),
            ]
                    ),
          ),
        ),
      ),
    );

  }
}
</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[플러터 위젯 가로세로 배치]]></title>
            <link>https://velog.io/@vgo_dongv/%ED%94%8C%EB%9F%AC%ED%84%B0-%EC%9C%84%EC%A0%AF-%EA%B0%80%EB%A1%9C%EC%84%B8%EB%A1%9C-%EB%B0%B0%EC%B9%98</link>
            <guid>https://velog.io/@vgo_dongv/%ED%94%8C%EB%9F%AC%ED%84%B0-%EC%9C%84%EC%A0%AF-%EA%B0%80%EB%A1%9C%EC%84%B8%EB%A1%9C-%EB%B0%B0%EC%B9%98</guid>
            <pubDate>Thu, 04 Sep 2025 06:34:28 GMT</pubDate>
            <description><![CDATA[<p>가로배치</p>
<pre><code>import &#39;package:flutter/material.dart&#39;;

void main() {
  runApp(const MyApp()); /* 앱 구동 시켜주세요 MyApp()에 메인메이지 넣어주면됨 */
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {

    /* 실제 내용은 여기 안에 */
    return MaterialApp(
      /* 여러가지 위젯 가로로 배치 -  Row, children 이용 */
      home: Scaffold(
        body: Row(
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star),

          ],
        ),
      )
    );

  }
}
</code></pre><p>세로배치</p>
<pre><code>import &#39;package:flutter/material.dart&#39;;

void main() {
  runApp(const MyApp()); /* 앱 구동 시켜주세요 MyApp()에 메인메이지 넣어주면됨 */
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {

    /* 실제 내용은 여기 안에 */
    return MaterialApp(
      /* 여러가지 위젯 세로로 배치 -  Column, children 이용 */
      home: Scaffold(
        body: Column(
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star),

          ],
        ),
      )
    );

  }
}
</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[플러터 상중하 위젯 레이아웃]]></title>
            <link>https://velog.io/@vgo_dongv/%ED%94%8C%EB%9F%AC%ED%84%B0-%EC%83%81%EC%A4%91%ED%95%98-%EC%9C%84%EC%A0%AF-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83</link>
            <guid>https://velog.io/@vgo_dongv/%ED%94%8C%EB%9F%AC%ED%84%B0-%EC%83%81%EC%A4%91%ED%95%98-%EC%9C%84%EC%A0%AF-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83</guid>
            <pubDate>Thu, 04 Sep 2025 06:31:14 GMT</pubDate>
            <description><![CDATA[<p>MaterialApp안에 다넣어</p>
<pre><code>

import &#39;package:flutter/material.dart&#39;;

void main() {
  runApp(const MyApp()); /* 앱 구동 시켜주세요 MyApp()에 메인메이지 넣어주면됨 */
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {

    /* 실제 내용은 여기 안에 */
    return MaterialApp(
      /* 위젯은 보통 대문자로 시작하고 뒤에 소괄호 */
      home: Scaffold(
        appBar: AppBar(), /* 상단 위젯 */
        body: Container(), /* 중간 위젯 */
        bottomNavigationBar: BottomAppBar( child: Text(&#39;test&#39;)), /* 하단 위젯 */
      )
    );

  }
}</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[안드로이드 스튜디오 플러터 Unsupported operation: Cannot send Null 오류]]></title>
            <link>https://velog.io/@vgo_dongv/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4-%ED%94%8C%EB%9F%AC%ED%84%B0-Unsupported-operation-Cannot-send-Null-%EC%98%A4%EB%A5%98</link>
            <guid>https://velog.io/@vgo_dongv/%EC%95%88%EB%93%9C%EB%A1%9C%EC%9D%B4%EB%93%9C-%EC%8A%A4%ED%8A%9C%EB%94%94%EC%98%A4-%ED%94%8C%EB%9F%AC%ED%84%B0-Unsupported-operation-Cannot-send-Null-%EC%98%A4%EB%A5%98</guid>
            <pubDate>Thu, 04 Sep 2025 06:25:18 GMT</pubDate>
            <description><![CDATA[<p>크롬으로 런 실행하면 결과값은 정상적으로 작동하는데 디버그 창에서
Unsupported operation: Cannot send Null Unsupported operation: Cannot send Null Unsupported operation: Cannot send Null </p>
<p>이렇게 계속 도배된 디버그 에러 문구가 올라옴</p>
<p>원인은 플러터 버전이 (3.35.2) 최신이라함
돌아가는데는 이상없으니 일단 다음버전 나올 때까지 걍쓸거..</p>
<p>[굳이 거슬린다면 이렇게 해도됨]
웹 디버깅 로그를 당장 멈추고 싶으면 dwds 패키지 파일 한 줄을 바꾸는 임시 패치를 적용할 수 있음</p>
<pre><code># 1) IDE 종료 후 터미널에 복사해서 실행
DWDS_FILE=$(find ~/.pub-cache -type f -path &quot;*/dwds-*/lib/src/services/debug_service.dart&quot; | head -n 1)

if [ -z &quot;$DWDS_FILE&quot; ]; then
  echo &quot;dwds 파일을 찾지 못했습니다. PUB_CACHE 경로 확인 필요.&quot;
  exit 1
fi

echo &quot;패치 대상: $DWDS_FILE&quot;
cp &quot;$DWDS_FILE&quot; &quot;${DWDS_FILE}.bak&quot;
sed -i &#39;&#39; &#39;s/channel\.sink\.add(jsonEncode(response));/return jsonEncode(response);/&#39; &quot;$DWDS_FILE&quot;
echo &quot;치환 완료. 백업: ${DWDS_FILE}.bak&quot;

# 2) flutter tool 재빌드 유도
FLUTTER_ROOT=$(dirname &quot;$(dirname &quot;$(which flutter)&quot;)&quot;)
rm -f &quot;$FLUTTER_ROOT/bin/cache/flutter_tools.snapshot&quot;
flutter --version &gt;/dev/null 2&gt;&amp;1 &amp;&amp; echo &quot;재빌드 유도 완료 — IDE 재시작 후 테스트하세요.&quot;
</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[jQuery] 컨텍스트]]></title>
            <link>https://velog.io/@vgo_dongv/jQeury-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8</link>
            <guid>https://velog.io/@vgo_dongv/jQeury-%EC%BB%A8%ED%85%8D%EC%8A%A4%ED%8A%B8</guid>
            <pubDate>Mon, 22 Nov 2021 07:28:57 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h2 id="컨텍스트">컨텍스트</h2>
</blockquote>
<ul>
<li><strong>$(선택자,[컨텍스트])</strong>
var myJquery1 = $(“p”);
var myJquery2 = $(“p”, document.forms[2]); <pre><code> $(‘p’, this)  -&gt;  this안에 p  this는 p의  부모가 됨 </code></pre></li>
</ul>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;
&lt;script src = &quot;../js/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

$(function(){
    // 모든 p태그를 선택한다.
    $(&#39;p&#39;).css(&#39;border&#39;, &#39;2px solid blue&#39;);

    // box클래스안의 div 안의 p태그를 선택한다.
    $(&#39;.box div&#39;).on(&#39;click&#39;, function(){
        // this는 div
        $(&#39;p&#39;, this).css(&#39;font-size&#39;, &#39;+=3px&#39;);
    })

    // 첫번째form 내부의 p태그를 선택
    $(&#39;p&#39;, document.forms[0]).css(&#39;background&#39; , &#39;yellow&#39;);

})


&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;box&quot;&gt;

    // 모든 p태그를 선택한다. &lt;br&gt;
    $(&#39;p&#39;).css(&#39;border&#39;, &#39;2px solid blue&#39;);&lt;br&gt;

    // box클래스안의 div 안의 p태그를 선택한다.&lt;br&gt;
    $(&#39;.box div&#39;).on(&#39;click&#39;, function(){&lt;br&gt;
        // this는 div&lt;br&gt;
        $(&#39;p&#39;, this).css(&#39;font-size&#39;, &#39;+=3px&#39;);&lt;br&gt;
    })&lt;br&gt;

    // 첫번째form 내부의 p태그를 선택&lt;br&gt;
    $(&#39;p&#39;, document.forms[0]).css(&#39;background&#39; , &#39;yellow&#39;);&lt;br&gt;

    &lt;br&gt;

    &lt;div&gt;
     &lt;p&gt;무궁화 꽃이 피었습니다.&lt;/p&gt;
    &lt;/div&gt;

    &lt;p&gt;흰 눈이 펄펄 내려옵니다.&lt;/p&gt;

    &lt;form&gt;
       &lt;p&gt;우리집 강아지는 뽀글 갱얼쥐&lt;/p&gt;
    &lt;/form&gt;

    &lt;div&gt;
       &lt;p&gt;무궁화 꽃이 피었습니다&lt;/p&gt;

    &lt;/div&gt;

&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[jQuery] 콜백함수]]></title>
            <link>https://velog.io/@vgo_dongv/jQeury-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98</link>
            <guid>https://velog.io/@vgo_dongv/jQeury-%EC%BD%9C%EB%B0%B1%ED%95%A8%EC%88%98</guid>
            <pubDate>Mon, 22 Nov 2021 07:28:51 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h2 id="콜백함수">콜백함수</h2>
</blockquote>
<ul>
<li><p>문서로드된 후에 호출되는 콜백함수<br></p>
<ol>
<li>window.onload = function(){}<br></li>
<li>$(document).ready(function(){}) <br></li>
<li>$(function(){}) <br><br></li>
</ol>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;
&lt;script src = &quot;../js/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;
</code></pre></li>
</ul>
<script type="text/javascript">

function proc1(vh){
    $(vh).hide();    
}

$(document).ready(function(){

    // 콜백함수 패버려.
    $('#result2 h2').on('click', function(){

        /* this.style.display = "none"; */
        $(this).hide();

    })
})


</script>
</head>
<body>

<div class="box">
    h2요소를 클릭하면 화면에서 사라진다.<br>
    &lt;h2 onclick = "proc1(this)">

<pre><code>&lt;br&gt;
&lt;div id=&quot;result1&quot;&gt;
    &lt;h2 onclick = &quot;proc1(this)&quot;&gt;클릭하면 사라집니다1.&lt;/h2&gt;
    &lt;h2 onclick = &quot;proc1(this)&quot;&gt;클릭하면 사라집니다2.&lt;/h2&gt;
    &lt;h2 onclick = &quot;proc1(this)&quot;&gt;클릭하면 사라집니다3.&lt;/h2&gt;
    &lt;h2 onclick = &quot;proc1(this)&quot;&gt;클릭하면 사라집니다4.&lt;/h2&gt;
    &lt;h2 onclick = &quot;proc1(this)&quot;&gt;클릭하면 사라집니다5.&lt;/h2&gt;
    &lt;h2 onclick = &quot;proc1(this)&quot;&gt;클릭하면 사라집니다6.&lt;/h2&gt;
    &lt;h2 onclick = &quot;proc1(this)&quot;&gt;클릭하면 사라집니다7.&lt;/h2&gt;
    &lt;h2 onclick = &quot;proc1(this)&quot;&gt;클릭하면 사라집니다8.&lt;/h2&gt;
    &lt;h2 onclick = &quot;proc1(this)&quot;&gt;클릭하면 사라집니다9.&lt;/h2&gt;
    &lt;h2 onclick = &quot;proc1(this)&quot;&gt;클릭하면 사라집니다10.&lt;/h2&gt;
&lt;/div&gt;</code></pre></div>

<div class="box">
    h2요소를 클릭하면 화면에서 사라진다.<br>
    script에서 h2에클릭 이벤트를 준다. <br>
    $('#result2 h2').on('click', function(){})

<pre><code>&lt;br&gt;
&lt;div id=&quot;result2&quot;&gt;
    &lt;h2&gt;클릭하면 사라집니다1.&lt;/h2&gt;
    &lt;h2&gt;클릭하면 사라집니다2.&lt;/h2&gt;
    &lt;h2&gt;클릭하면 사라집니다3.&lt;/h2&gt;
    &lt;h2&gt;클릭하면 사라집니다4.&lt;/h2&gt;
    &lt;h2&gt;클릭하면 사라집니다5.&lt;/h2&gt;
    &lt;h2&gt;클릭하면 사라집니다6.&lt;/h2&gt;
    &lt;h2&gt;클릭하면 사라집니다7.&lt;/h2&gt;
    &lt;h2&gt;클릭하면 사라집니다8.&lt;/h2&gt;
    &lt;h2&gt;클릭하면 사라집니다9.&lt;/h2&gt;
    &lt;h2&gt;클릭하면 사라집니다10.&lt;/h2&gt;
&lt;/div&gt;</code></pre></div>
</body>
</html>
```

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;

&lt;script src = &quot;../js/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

 $(function(){ /* 문서가 로드된 후에 h1을 선택하시오 */
    $(&#39;h1&#39;).css(&#39;color&#39;, &#39;blue&#39;);
    $(&#39;h1&#39;).first().css(&#39;color&#39;, &#39;red&#39;);
    $(&#39;h1&#39;).eq(2).css(&#39;color&#39;, &#39;green&#39;);

})

/*  $(document).ready(function(){
     $(&#39;h1&#39;)

 })

 window.onload = function(){

     $(&#39;h1&#39;)
} */


&lt;/script&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;box&quot;&gt;
    문서로드된 후에 호출되는 콜백함수&lt;br&gt;
    1. window.onload = function(){}&lt;br&gt;
    2. $(document).ready(function(){}) &lt;br&gt;
    3. $(function(){}) &lt;br&gt;&lt;br&gt;

    $(&#39;h1&#39;).css(&#39;color&#39;, &#39;blue&#39;); &lt;br&gt;
    $(&#39;h1&#39;).first().css(&#39;color&#39;, &#39;red&#39;); &lt;br&gt;
    $(&#39;h1&#39;).eq(2).css(&#39;color&#39;, &#39;green&#39;); &lt;br&gt;

    &lt;br&gt;

    &lt;div id=&quot;result1&quot;&gt;
        &lt;h1&gt; 무궁화 꽃이 피었습니다.&lt;/h1&gt;
        &lt;h1&gt; 바람에 낙엽이 춤을 춥니다.&lt;/h1&gt;
        &lt;h1&gt; 꼭꼭 숨어라 머리카락 보일라&lt;/h1&gt;
        &lt;h1&gt; 꼭꼭 숨어라 머리카락 보일라&lt;/h1&gt;
        &lt;h1&gt; 꼭꼭 숨어라 머리카락 보일라&lt;/h1&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[jQuery] 기본선택자]]></title>
            <link>https://velog.io/@vgo_dongv/jQeury-%EA%B8%B0%EB%B3%B8%EC%84%A0%ED%83%9D%EC%9E%90</link>
            <guid>https://velog.io/@vgo_dongv/jQeury-%EA%B8%B0%EB%B3%B8%EC%84%A0%ED%83%9D%EC%9E%90</guid>
            <pubDate>Mon, 22 Nov 2021 07:28:45 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h2 id="jquery-기본선택자">jQuery 기본선택자</h2>
</blockquote>
<ul>
<li>.class 선택자    :  $(‘.name’)<ul>
<li>#id선택자      :    $(‘#name’)</li>
<li>```</li>
<li>전체선택자   :    $(‘*’)</li>
</ul>
</li>
</ul>
<p> <img src="https://images.velog.io/images/vgo_dongv/post/a6885198-da78-4bb6-b08a-e77eeefee220/image.png" alt=""></p>
<p>ex)</p>
<pre><code>// h1요소의 글자색을 파랑 
/*  document.getElementsByTagName(&#39;h1&#39;)[0].style.color = &#39;blue&#39;; */

/* var vh = $(&#39;h1&#39;);
vh.css(&#39;color&#39;, &#39;blue&#39;); */

$(&#39;h1&#39;).css(&#39;color&#39;, &#39;blue&#39;);</code></pre><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;
&lt;script src = &quot;../js/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt;

&lt;script&gt;
function proc1(){
    // 전체 배경색을 변경 
    $(&#39;*&#39;).css(&#39;background&#39;,&#39;yellow&#39;);

    // h1요소의 글자색을 파랑 
    /*  document.getElementsByTagName(&#39;h1&#39;)[0].style.color = &#39;blue&#39;; */

    /* var vh = $(&#39;h1&#39;);
    vh.css(&#39;color&#39;, &#39;blue&#39;); */

    $(&#39;h1&#39;).css(&#39;color&#39;, &#39;blue&#39;);

     // 아이디는 # 클래스는.
    //id가 green인 요소의 글자색은 녹색
   /*  document.getElementId(&#39;para&#39;).style.color = &#39;green&#39;; */
    $(&#39;#green&#39;).css(&#39;color&#39;,&#39;green&#39;);

    //class 가 sample요소의 글자색은 빨강
   /*  document.getElementsClassName(&#39;sample&#39;)[0].style.color = &#39;red&#39;; */
    $(&#39;.sample&#39;).css(&#39;color&#39;,&#39;red&#39;);

}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;box&quot;&gt;

    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc1()&quot;&gt;확인&lt;/button&gt;

    &lt;div id=&quot;result1&quot;&gt;
      &lt;h1&gt; 제목입니다 &lt;/h1&gt;
      &lt;h2 id=&quot;green&quot;&gt; 작은 제목입니다 &lt;/h2&gt;
      &lt;h2 class=&quot;sample&quot;&gt; 샘플입니다 &lt;/h2&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[jQuery] jQuery 파일 다운, 문장구조]]></title>
            <link>https://velog.io/@vgo_dongv/jQuery-jQuery-%ED%8C%8C%EC%9D%BC-%EB%8B%A4%EC%9A%B4-%EB%AC%B8%EC%9E%A5%EA%B5%AC%EC%A1%B0</link>
            <guid>https://velog.io/@vgo_dongv/jQuery-jQuery-%ED%8C%8C%EC%9D%BC-%EB%8B%A4%EC%9A%B4-%EB%AC%B8%EC%9E%A5%EA%B5%AC%EC%A1%B0</guid>
            <pubDate>Mon, 22 Nov 2021 07:28:36 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h2 id="jquery-파일-다운하기">jQuery 파일 다운하기</h2>
</blockquote>
<p><a href="http://www.jquery.com%EC%97%90%EC%84%9C">http://www.jquery.com에서</a> 다운로드
<img src="https://images.velog.io/images/vgo_dongv/post/18368a4a-da96-4420-96ce-51d8e9483bfe/image.png" alt=""></p>
<blockquote>
<h2 id="스크립트에서-html요소에-접근하기-위해서">스크립트에서 html요소에 접근하기 위해서</h2>
<p><strong>window.onload = function(){}</strong><br>
    또는 <strong>$(document).ready(function(){})</strong> 가 있어야 함</p>
</blockquote>
<ul>
<li>$(document).ready(function(){})를 사용하려면 라이브러리 <strong>jquery-3.6.0.min.js</strong>가 있어야한다.</li>
</ul>
<p><strong>자바스크립트</strong> </p>
<pre><code>window.onload = function</code></pre><p><strong>제이쿼리</strong></p>
<pre><code>$(document).ready(function(){      
        $(‘h1’).css(‘background’, ‘yellow’);
    });</code></pre><p>둘중에 아무거나 쓰면됨~</p>
<pre><code>&lt;script&gt;
window.onload = function(){
    document.getElementById(&#39;result1&#39;).style.backgroundColor =  &#39;red&#39;;

    $(&#39;#result1&#39;).css(&#39;background-color&#39;, &#39;red&#39;);
}

$(document).ready(function(){
    $(&#39;#result1&#39;).css(&#39;background-color&#39;, &#39;red&#39;);
    document.getElementById(&#39;result1&#39;).style.backgroundColor =  &#39;red&#39;;
})

&lt;/script&gt;</code></pre><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;

&lt;script src = &quot;../js/jquery-3.6.0.min.js&quot;&gt; &lt;/script&gt;
&lt;!-- &lt;script src = &quot;/jqpro/js/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt; --&gt;

&lt;script&gt;
/* window.onload = function(){
    document.getElementById(&#39;result1&#39;).style.backgroundColor =  &#39;red&#39;;

    $(&#39;#result1&#39;).css(&#39;background-color&#39;, &#39;red&#39;);
} */

$(document).ready(function(){
    $(&#39;#result1&#39;).css(&#39;background-color&#39;, &#39;red&#39;);
/*     document.getElementById(&#39;result1&#39;).style.backgroundColor =  &#39;red&#39;; */
})

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;box&quot;&gt;
    실행시 result1의 배경색을 바꾼다.&lt;br&gt;
    스크립트를 body위에 코딩. 스크립트에서 html요소에 접근하기 위해서 window.onload = function(){}&lt;br&gt;
    또는 $(document).ready(function(){}) 가 있어야 하는데 2번을 사용하려면 라이브러리 &lt;br&gt;
    &amp;lt;script src = &quot;../js/jquery-3.6.0.min.js&quot;&gt; &lt;/script&gt;이 있어야한다.
    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc1()&quot;&gt;확인&lt;/button&gt;
    &lt;div id=&quot;result1&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><blockquote>
<h2 id="script의-위치를-body밑에-코딩할경우-html요소에-직접-접근이-가능하다">script의 위치를 body밑에 코딩할경우 html요소에 직접 접근이 가능하다.</h2>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;
&lt;!-- &lt;link rel=&quot;stylesheet&quot; href=&quot;/jqpro/css/mystyle.css&quot; type=&quot;text/css&quot;&gt; --&gt;

&lt;script src = &quot;/jqpro/js/jquery-3.6.0.min.js&quot;&gt;&lt;/script&gt; &lt;!-- 외부스크립트 --&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;box&quot;&gt;
    script의 위치를 body밑에 코딩할경우 html요소에 직접 접근이 가능하다.&lt;br&gt;
     window.onload = function(){}문장 없이도 실행이된다.&lt;br&gt;
     $(document).ready(function(){})역시 없어도 실행된다.
    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc1()&quot;&gt;확인&lt;/button&gt;
    &lt;div id=&quot;result1&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;


&lt;/body&gt;


&lt;!-- 스크립트를 아래 지정하면 window.onload = function(){}불필요 --&gt;
&lt;script&gt;
$(&#39;#result1&#39;).css(&#39;background-color&#39;,&#39;green&#39;);
&lt;/script&gt;
&lt;/html&gt;</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[HTML5&JavaScript] 정규식]]></title>
            <link>https://velog.io/@vgo_dongv/HTML5JavaScript-%EC%A0%95%EA%B7%9C%EC%8B%9D</link>
            <guid>https://velog.io/@vgo_dongv/HTML5JavaScript-%EC%A0%95%EA%B7%9C%EC%8B%9D</guid>
            <pubDate>Mon, 22 Nov 2021 05:25:37 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h2 id="전방탐색">전방탐색:</h2>
</blockquote>
<ul>
<li>탐색문자?=기준점</li>
<li>^로시작하고 $로끝남.  <pre><code>/^탐색문자(?=기준자)$/</code></pre>공백있으면안됨.</li>
<li>탐색문자 생략시 기준자로 시작하는 문자를 탐색</li>
<li><pre><code>.*</code></pre>0번이상나오는 문자 .*[A-Z] 영문자 대문자가 포함된다. 탐색문자 생략<pre><code>.* : [기준점]앞에 어떤 문자가 와도되고 안와도되고 근데 [기준점]은 꼭있어야함
ex.  passreg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&amp;*]).{8-20}$/;</code></pre></li>
</ul>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;
&lt;style type=&quot;text/css&quot;&gt;
label {
    display : inline-block;
    width:100px;
    height: 40px;

}
input{
    height: 30px;
    margin: 2px;
}

&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function proc1(){

    // 입력한값 가져오기 - value &amp; 공백과 길이 체크
    ff = document.myform;

     idv = ff.id.value.trim();
    if(idv.length&lt;1){
        alert(&quot;id를 입력하세요&quot;);
        return false;
    }
    if(idv.length&lt; 8  || idv.length&gt; 20){
        alert(&quot;아이디는 8~20자리 입니다.&quot;)
        return false;
    }

    // 정규식
    idreg = /^[a-z][A-za-z0-9]{7,19}$/;

    // 정규식.test(value) - true, false를 리턴한다.

    if(!(idreg.test(idv))){
        alert(&quot;아이디 형식오류&quot;)
        return false;
    }


    namev = ff.name.value.trim();
    if(namev.length&lt;1){
        alert(&quot;name를 입력하세요&quot;);
        return false;
    }

    if(namev.length&lt; 2  || namev.length&gt; 5){
        alert(&quot;이름은 2~5자리 입니다.&quot;)
        return false;
    }

    // 정규식
    namereg = /[가-힣]{2,5}$/;

    if(!(namereg.test(namev))){
        alert(&quot;이름 형식오류&quot;)
        return false;
    }    

    telv = ff.tel.value.trim();
    if(telv.length&lt;1){
        alert(&quot;tel를 입력하세요&quot;);
        return false;
    }

    telreg = /^\d{2,3}\d{3,4}\d{4}$/;

    if(!(telreg.test(telv))){
        alert(&quot;전화번호 형식오류.&quot;)
        return false;
    }    

    emailv= ff.email.value.trim();
    if(emailv.length&lt;1){
        alert(&quot;email를 입력하세요&quot;);
        return false;
    }

    emailreg = /^([a-zA-Z0-9]+)@([a-zA-Z0-9]+)(\.[a-z]+){1,2}$/;

    if(!(emailreg.test(emailv))){
        alert(&quot;이메일 형식오류&quot;)
        return false;
    }


    passv = ff.pass.value.trim();

    if(passv.length&lt;1){
        alert(&quot;pass를 입력하세요&quot;);
        return false;
    }

    if(passv.length&lt; 8  || passv.length&gt; 20){
    alert(&quot;비밀번호는 8~20자리 입니다.&quot;)
    return false;

        // 전방탐색: 탐색문자?=기준점
       //  a = &quot;http://www.naver.com&quot;
      /*   a = &quot;https://www.naver.com&quot; // :를 기준으로 w찾는다
         b = /\w+(?=:)/
         bb = a.match(b);
         alert(bb); 
      */

        // ^로시작하고 $로끝남. /^탐색문자(?=기준자)$/ 공백있으면안됨.
        // 탐색문자 생략시 기준자로 시작하는 문자를 탐색
        // .* 0번이상나오는 문자 .*[A-Z]

        // 영문자 대문자가 포함된다. 탐색문자 생략
        // .* : [기준점]앞에 어떤 문자가 와도되고 안와도되고 근데 [기준점]은 꼭있어야함

     passreg = /^(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*[!@#$%^&amp;*]).{8-20}$/;

    if(!(passreg.test(passv))){
        alert(&quot;비밀번호 형식오류&quot;)
        return false;
    }     

} 

    alert(&quot;성공&quot;);


}

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;box&quot;&gt;

    &lt;form name=&quot;myform&quot;&gt;
        &lt;label&gt;아이디&lt;/label&gt;
        &lt;input type=&quot;text&quot; id=&quot;id&quot; name=&quot;id&quot;&gt;&lt;br&gt;
        &lt;label&gt;이름&lt;/label&gt;
        &lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;name&quot;&gt;&lt;br&gt;
        &lt;label&gt;비밀번호&lt;/label&gt;
        &lt;input type=&quot;password&quot; id=&quot;pass&quot; name=&quot;pass&quot;&gt;&lt;br&gt;
        &lt;label&gt;전화번호&lt;/label&gt;
        &lt;input type=&quot;text&quot; id=&quot;tel&quot; name=&quot;tel&quot;&gt;&lt;br&gt;
        &lt;label&gt;이메일&lt;/label&gt;
        &lt;input type=&quot;text&quot; id=&quot;email&quot; name=&quot;email&quot;&gt;&lt;br&gt;
    &lt;/form&gt;

    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc1()&quot;&gt;확인&lt;/button&gt;
    &lt;div id=&quot;result1&quot;&gt;&lt;/div&gt;
&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[HTML5&JavaScript] DOM 트리 순회]]></title>
            <link>https://velog.io/@vgo_dongv/HTML5JavaScript-DOM-%ED%8A%B8%EB%A6%AC-%EC%88%9C%ED%9A%8C</link>
            <guid>https://velog.io/@vgo_dongv/HTML5JavaScript-DOM-%ED%8A%B8%EB%A6%AC-%EC%88%9C%ED%9A%8C</guid>
            <pubDate>Fri, 19 Nov 2021 07:55:50 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h2 id="dom-트리-순회">DOM 트리 순회</h2>
</blockquote>
<p><img src="https://images.velog.io/images/vgo_dongv/post/78f16aa8-d7f9-477d-9d35-c2abba91fba0/image.png" alt=""></p>
<blockquote>
<h2 id="새로운-요소-생성">새로운 요소 생성</h2>
</blockquote>
<ul>
<li>텍스트 노드를 갖는 요소와 갖지 않는 요소로 구분</li>
<li>요소노드와 텍스트 노드를 생성한 후에 텍스트 노드를 요소 노드에 붙임</li>
</ul>
<p><img src="https://images.velog.io/images/vgo_dongv/post/a464153d-fc5b-4776-9ef2-67f0d690f071/image.png" alt=""></p>
<blockquote>
<h2 id="추가버튼-클릭시-랜덤으로-발생되는-문자를-result1번에-출력br삭제버튼-클릭시-추가된-문자를-차례대로-삭제한다">추가버튼 클릭시 랜덤으로 발생되는 문자를 result1번에 출력<br>삭제버튼 클릭시 추가된 문자를 차례대로 삭제한다.</h2>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function proc1(){

    ultag = document.getElementsByTagName(&#39;ul&#39;)[0];
    listall = ultag.getElementsByTagName(&#39;li&#39;);

    str = &quot;&quot;;
    for(i=0; i&lt;listall.length; i++){
        str += listall[i].firstChild.data+&quot;\n&quot;;
    }

    alert(str);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;box&quot;&gt;
    &lt;ul&gt;
      &lt;li&gt; List Item1 &lt;/li&gt;
      &lt;li&gt; List Item2 &lt;/li&gt;
      &lt;li&gt; List Item3 &lt;/li&gt;
      &lt;li&gt; List Item4 &lt;/li&gt;
      &lt;li&gt; List Item5 &lt;/li&gt;
    &lt;/ul&gt;
    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc1()&quot;&gt;확인&lt;/button&gt;
    &lt;div id=&quot;result1&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><blockquote>
<h2 id="추가-삭제버튼-클릭시-랜덤으로-발생되는-문자와-삭제버튼을-생성하여-result2번에-출력한다">추가 삭제버튼 클릭시 랜덤으로 발생되는 문자와 삭제버튼을 생성하여 result2번에 출력한다.</h2>
</blockquote>
<ul>
<li>this가 포인트</li>
</ul>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
    str = [&quot;불금&quot;, &quot;불토&quot;, &quot;신나는 금요일&quot;, &quot;신나는 토요일&quot;, &quot;졸려&quot;];
function add(){

    // 랜덤발생 : 랜덤수에 해당하는 문자를 str배열에서 선택
    rnd = parseInt(Math.random()*str.length);

    // 선택된 문자로 textNode를 생성한다.
    text = document.createTextNode(str[rnd]);

    // p태그 생성
    ptag = document.createElement(&quot;p&quot;);

    // p태그에 textnode를 추가
    ptag.appendChild(text);

    // p태그를 result1에 추가
    document.getElementById(&#39;result1&#39;).appendChild(ptag);


}

function del(){
    // 삭제할 대상의 부모를 검색한다.
    parent = document.getElementById(&#39;result1&#39;);
    child = parent.lastChild; //마지막 p태그를 선택

    parent.removeChild(child);

}


function proc2(){
    // 랜덤생성
    rnd = parseInt(Math.random()*str.length);

    // 랜덤수번째의 문자를 str배열에서 선택해서 textnode로 생성한다.
    text = document.createTextNode(str[rnd]);

    // 삭제 버튼을 생성한다.
    delbutton = document.createElement(&quot;input&quot;);
    delbutton.type = &quot;button&quot;; 
    delbutton.onclick = function(){

        // 삭제할때 필요한 부모를 지정해서 삭제해야한다. this = 클릭한 삭제버튼 자기자신~ /  parentNode=p태그
        this.parentNode.remove();

    };
    delbutton.value = &quot;삭제&quot;;

/*     delbutton = document.createElement(&quot;button);
    delbutton.type = &quot;button&quot;;
    delbutton.setAttribute(&#39;type&#39;, &#39;button&#39;)

    delbutton.innerHTML = &quot;삭제&quot;; 

    te = document.createTextNode(&quot;삭제&quot;);
    delbutton.appendChild(te);

*/


    // p 태그 생성
    ptag = document.createElement(&quot;p&quot;);

    // p태그에 textNode와 button을 추가

    ptag.appendChild(text);
    ptag.appendChild(delbutton);

    // result2에 p태그를 추가한다.
    document.getElementById(&#39;result2&#39;).appendChild(ptag);
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;box&quot;&gt;
    추가버튼 클릭시 랜덤으로 발생되는 문자를 result1번에 출력&lt;br&gt;
    삭제버튼 클릭시 추가된 문자를 차례대로 삭제한다.
    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;add()&quot;&gt;추가&lt;/button&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;del()&quot;&gt;삭제&lt;/button&gt;
    &lt;div id=&quot;result1&quot;&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;div class=&quot;box&quot;&gt;
    추가 삭제버튼 클릭시 랜덤으로 발생되는 문자와 삭제버튼을 생성하여 result2번에 출력한다.
    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc2()&quot;&gt;추가삭제&lt;/button&gt;

    &lt;div id=&quot;result2&quot;&gt;&lt;/div&gt;

&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;</code></pre><blockquote>
<p>시작버튼 클릭시 이미지가 회전한다. 시작버튼은 사라진다.<br>
첫번째 이미지를 선택하여 appendChild()로 div의 맨 마지막에 추가된다.
첫번째 이미지는 잘라내기 붙여넣기와 같은 이동의 효과가 나타난다.<br>
종료버튼 클릭시 시작버튼이 다시 나타나고 당첨을 표시한다.<br>
다시 시작버튼 클릭시 당첨표시를 클리어 후 실행한다.<br></p>
</blockquote>
<blockquote>
<h3 id="내풀이">내풀이</h3>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;
&lt;style type=&quot;text/css&quot;&gt;
img{

    width: 150px;
    height: 150px;
}
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
    str = [&quot;불금&quot;, &quot;불토&quot;, &quot;신나는 금요일&quot;, &quot;신나는 토요일&quot;, &quot;졸려&quot;];
function add(){

    // 랜덤발생 : 랜덤수에 해당하는 문자를 str배열에서 선택
    rnd = parseInt(Math.random()*str.length);

    // 선택된 문자로 textNode를 생성한다.
    text = document.createTextNode(str[rnd]);

    // p태그 생성
    ptag = document.createElement(&quot;p&quot;);

    // p태그에 textnode를 추가
    ptag.appendChild(text);

    // p태그를 result1에 추가
    document.getElementById(&#39;result1&#39;).appendChild(ptag);


}

function del(){
    // 삭제할 대상의 부모를 검색한다.
    parent = document.getElementById(&#39;result1&#39;);
    child = parent.lastChild; //마지막 p태그를 선택

    parent.removeChild(child);

}


function proc2(){
    // 랜덤생성
    rnd = parseInt(Math.random()*str.length);

    // 랜덤수번째의 문자를 str배열에서 선택해서 textnode로 생성한다.
    text = document.createTextNode(str[rnd]);

    // 삭제 버튼을 생성한다.
    delbutton = document.createElement(&quot;input&quot;);
    delbutton.type = &quot;button&quot;; 
    delbutton.onclick = function(){

        // 삭제할때 필요한 부모를 지정해서 삭제해야한다. this = 클릭한 삭제버튼 자기자신~ /  parentNode=p태그
        this.parentNode.remove();

    };
    delbutton.value = &quot;삭제&quot;;

/*     delbutton = document.createElement(&quot;button);
    delbutton.type = &quot;button&quot;;
    delbutton.setAttribute(&#39;type&#39;, &#39;button&#39;)

    delbutton.innerHTML = &quot;삭제&quot;; 

    te = document.createTextNode(&quot;삭제&quot;);
    delbutton.appendChild(te);

*/
    // p 태그 생성
    ptag = document.createElement(&quot;p&quot;);

    // p태그에 textNode와 button을 추가

    ptag.appendChild(text);
    ptag.appendChild(delbutton);

    // result2에 p태그를 추가한다.
    document.getElementById(&#39;result2&#39;).appendChild(ptag);
}



index = 0;
function start(vt){

    gvt = vt; //전역변수

    // 확인버튼을 사라지게 한다.
    vt.style.display = &quot;none&quot;;

    // 선택된 이미지의 border를 클리어
    // 3번째 인덱스.style.border = &quot;none&quot;


         parent = document.getElementById(&#39;result3&#39;);    
          child2 = parent.getElementsByTagName(&#39;img&#39;)[index];
            child2.style.border = &quot;none&quot;; 

    // 이미지의 부모요소를 검색한다. - result3
        idx = setInterval(function(){


        child = parent.firstChild; //첫번째태그를 선택

        // img의 첫번째 요소 - firstChild를 통해 선택 후 result2에 appenChild를 통해 추가한다.
        document.getElementById(&#39;result3&#39;).appendChild(child);

    }, 500);

}


function stop(){
     // setInterval() 종료 - clearInterval()
     clearInterval(idx);

     // 랜덤을 발생시킨다. -5
     index = parseInt(Math.random()*5);

     // 5번째 인덱스의 이미지 하나를 선택해서 border를 지정. 인덱스.style.border = &quot;5px solid red&quot;
     parent = document.getElementById(&#39;result3&#39;);
     child = parent.getElementsByTagName(&#39;img&#39;)[index];
     child.style.border = &quot;5px solid red&quot;;

     // 시작버튼이 나타난다.
    gvt.style.display = &quot;inline&quot;;
}


&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;box&quot;&gt;
    추가버튼 클릭시 랜덤으로 발생되는 문자를 result1번에 출력&lt;br&gt;
    삭제버튼 클릭시 추가된 문자를 차례대로 삭제한다.
    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;add()&quot;&gt;추가&lt;/button&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;del()&quot;&gt;삭제&lt;/button&gt;
    &lt;div id=&quot;result1&quot;&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;div class=&quot;box&quot;&gt;
    추가 삭제버튼 클릭시 랜덤으로 발생되는 문자와 삭제버튼을 생성하여 result2번에 출력한다.
    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc2()&quot;&gt;추가삭제&lt;/button&gt;

    &lt;div id=&quot;result2&quot;&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;div class=&quot;box&quot;&gt;
    시작버튼 클릭시 이미지가 회전한다. 시작버튼은 사라진다.&lt;br&gt;
    첫번째 이미지를 선택하여 appendChild()로 div의 맨 마지막에 추가된다.
    첫번째 이미지는 잘라내기 붙여넣기와 같은 이동의 효과가 나타난다.&lt;br&gt;
    종료버튼 클릭시 시작버튼이 다시 나타나고 당첨을 표시한다.&lt;br&gt;
    다시 시작버튼 클릭시 당첨표시를 클리어 후 실행한다.&lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;start(this)&quot;&gt;시작&lt;/button&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;stop()&quot;&gt;종료&lt;/button&gt;

    &lt;div id=&quot;result3&quot;&gt;
    &lt;img alt=&quot;&quot; src=&quot;../images/강아지5.jpg&quot;&gt;
    &lt;img alt=&quot;&quot; src=&quot;../images/사자2.jpg&quot;&gt;
    &lt;img alt=&quot;&quot; src=&quot;../images/강아지5.jpg&quot;&gt;
    &lt;img alt=&quot;&quot; src=&quot;../images/사자2.jpg&quot;&gt;
    &lt;img alt=&quot;&quot; src=&quot;../images/툐끼.jpg&quot;&gt;

    &lt;/div&gt;

&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[Java] CRUD 예제]]></title>
            <link>https://velog.io/@vgo_dongv/Java-CRUD</link>
            <guid>https://velog.io/@vgo_dongv/Java-CRUD</guid>
            <pubDate>Fri, 19 Nov 2021 03:44:54 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h2 id="회원을-관리하는-프로그램을-작성하시오-mymember-테이블-이용-아래-메뉴의-기능을-모두-구현하시오">회원을 관리하는 프로그램을 작성하시오. (MYMEMBER 테이블 이용) 아래 메뉴의 기능을 모두 구현하시오.</h2>
<h2 id="crud-기능-구현하기">(CRUD 기능 구현하기)</h2>
<p><strong>메뉴예시)</strong> 
      -- 작업 선택 --
      1. 자료추가
      2. 자료삭제
      3. 자료수정 UPDATE
      4. 전체자료출력
     5.   자료수정2
      0. 작업끝
 <strong>처리조건)</strong>
      1) 자료추가에서 &#39;회원ID&#39;는 중복되지 않는다.(중복되면 다시 입력 받는다.)
      2) 삭제는 &#39;회원ID&#39;를 입력받아서 처리한다.
      3) 자료 수정에서 &#39;회원ID&#39;는 변경되지 않는다.</p>
</blockquote>
<blockquote>
<h2 id="내-정답">내 정답</h2>
</blockquote>
<ul>
<li>nextLine() 오류처리</li>
<li>스위치문 default 처리해주기</li>
</ul>
<pre><code>package kr.or.ddit.basic;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Scanner;

import kr.or.ddit.util.DBUtil;

/*
     회원을 관리하는 프로그램을 작성하시오. (MYMEMBER 테이블 이용)
     아래 메뉴의 기능을 모두 구현하시오. (CRUD 기능 구현하기)
     메뉴예시) 
      -- 작업 선택 --
      1. 자료추가
      2. 자료삭제
      3. 자료수정 UPDATE
      4. 전체자료출력
      5. 자료수정2
      0. 작업끝

      처리조건)
      1) 자료추가에서 &#39;회원ID&#39;는 중복되지 않는다.(중복되면 다시 입력 받는다.)
      2) 삭제는 &#39;회원ID&#39;를 입력받아서 처리한다.
      3) 자료 수정에서 &#39;회원ID&#39;는 변경되지 않는다.

 */
public class JdbcTest06 {
    static Scanner sc = new Scanner(System.in);
    static Connection conn = null;
    ResultSet rs = null;
    PreparedStatement pstmt = null;
    Statement stmt = null;

    public static void main(String[] args) {

        conn = DBUtil.getConnection();
        JdbcTest06 j = new JdbcTest06();
        j.start();

    }

    private void start() {

        while(true){

            System.out.println(&quot;==작업선택==&quot;);
            System.out.println(&quot;1.자료추가 2.자료삭제 3.자료수정4.전체자료출력 5.자료수정2 0.작업끝&quot;);
            System.out.print(&quot;선택&gt;&quot;);

            int input=sc.nextInt(); 
            sc.nextLine();
            switch(input){
            case 1:  add(); break;
            case 2:  delete();    break;
            case 3:  update(); break;
            case 4:  select(); break;
            case 5: 
            case 0:  System.out.println(&quot;프로그램을 종료합니다.&quot;);
                    return;
            default : System.out.println(&quot;번호를잘못입력했습니다. 다시 입력하세요&quot;);

            }
        }


    }

    private void add() {
        try {

            String sql = &quot;select mem_id from MYMEMBER&quot;;
            stmt = conn.createStatement();
            rs = stmt.executeQuery(sql);

            String id = &quot;&quot;;

            while(true){
                System.out.println(&quot;mem_id를 입력해주세요&quot;);
                id = sc.nextLine();
                boolean flag = true;

                while(rs.next()){

                    if(rs.getString(&quot;mem_id&quot;).equals(id)){
                        System.out.println(&quot;중복입니다. 다시입력해주세요&quot;);
                        flag = false;
                        break;
                    }
                }
                if(flag){
                    break;
                }
            }

            System.out.println(&quot;mem_name를 입력해주세요&quot;);
            String name = sc.nextLine();
            System.out.println(&quot;mem_pass를 입력해주세요&quot;);
            String pass = sc.nextLine();
            System.out.println(&quot;mem_tel를 입력해주세요&quot;);
            String tel = sc.nextLine();
            System.out.println(&quot;mem_addr를 입력해주세요&quot;);
            String addr = sc.nextLine();

            String sql2 = &quot; insert into MYMEMBER values(? , ? , ? , ? , ?)&quot;;
            pstmt = conn.prepareStatement(sql2);
            pstmt.setString(1, id);
            pstmt.setString(2, name);
            pstmt.setString(3, pass);
            pstmt.setString(4, tel);
            pstmt.setString(5, addr);

            int cnt =pstmt.executeUpdate();

            System.out.println(&quot;반환값: &quot;+ cnt);
            if(cnt&gt;0){
                System.out.println(&quot;insert 성공&quot;);
            }else{
                System.out.println(&quot;insert 실패&quot;);
            }


        } catch (SQLException e) {
            e.printStackTrace(); //왜 해주는거니
        }finally{
            //자원 반납 : 만들어진 순의 역순으로

            if(rs!=null) try {
                rs.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(stmt!=null) try {
                stmt.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(pstmt!=null) try {
                pstmt.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }

        }
    }


    private void delete() {
        try {

            System.out.println(&quot;삭제할 회원ID를 입력하세요&quot;);
            String did = sc.nextLine();

            String sql3 = &quot;delete from MYMEMBER where mem_id = &#39;&quot; + did + &quot;&#39; &quot;;

        /*    String sql3 = &quot;delete from MYMEMBER where mem_id = ? &quot;;*/
            stmt = conn.createStatement();
            int cnt = stmt.executeUpdate(sql3);

    /*        pstmt = conn.prepareStatement(sql3);
            pstmt.setString(1, did);
            int cnt =pstmt.executeUpdate();*/

            System.out.println(&quot;반환값: &quot;+ cnt);

            if(cnt&gt;0){
                System.out.println(&quot;delete 성공&quot;);
            }else{
                System.out.println(&quot;delete 실패&quot;);
            }

        } catch (SQLException e) {
            // TODO: handle exception
        }finally{
            //자원 반납 : 만들어진 순의 역순으로

            if(stmt!=null) try {
                stmt.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }


    }

    }


    private void update() {

        try {
            System.out.println(&quot;수정할 레코드의 mem_id를 입력해주세요&quot;);
            String uid = sc.nextLine();


            int count = getMemberCount(uid);
            if(count==0){
                System.out.println(uid+&quot;는 없는 회원 id&quot;);
                return ;
            }

            System.out.println(&quot;수정할 mem_name를 입력해주세요&quot;);
            String name = sc.nextLine();
            System.out.println(&quot;수정할 mem_pass를 입력해주세요&quot;);
            String pass = sc.nextLine();
            System.out.println(&quot;수정할 mem_tel를 입력해주세요&quot;);
            String tel = sc.nextLine();
            System.out.println(&quot;수정할 mem_addr를 입력해주세요&quot;);
            String addr = sc.nextLine();

            /*String sql4 = &quot;update MYMEMBER set mem_name = ?, mem_pass = ?, mem_tel = ?, mem_addr = ? where mem_id = &#39;&quot; + uid + &quot;&#39; &quot;;*/
            String sql4 = &quot;update MYMEMBER set mem_name = ?, mem_pass = ?, mem_tel = ?, mem_addr = ? where mem_id = ? &quot;;
            pstmt = conn.prepareStatement(sql4);
            pstmt.setString(1, name);
            pstmt.setString(2, pass);
            pstmt.setString(3, tel);
            pstmt.setString(4, addr);
            pstmt.setString(5, uid);

            int cnt =pstmt.executeUpdate();

            System.out.println(&quot;반환값: &quot;+ cnt);
            if(cnt&gt;0){
                System.out.println(&quot;update 성공&quot;);
            }else{
                System.out.println(&quot;update 실패&quot;);
            }


        } catch (SQLException e) {
            // TODO: handle exception
        }finally{
            //자원 반납 : 만들어진 순의 역순으로

            if(pstmt!=null) try {
                pstmt.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }

    }

    }

    // 회원 id를 인수값으로 받아서 해당 회원 id의 개수를 반환하는 메서드
    private int getMemberCount(String memId){
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;

        int count =0;
        try {
            conn = DBUtil.getConnection();
            String sql = &quot;select count(*) cnt from mymember where mem_id=?&quot;;
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, memId);

            rs = pstmt.executeQuery();

            if(rs.next()){
                count = rs.getInt(&quot;cnt&quot;);
            }

        } catch (SQLException e) {
            count = 0;
            e.printStackTrace();

        }finally{
            if(rs!=null)try{
                rs.close();
            }catch(SQLException e){

            }
            if(pstmt!=null)try{
                pstmt.close();
            }catch(SQLException e){

            }
            if(conn!=null)try{
                conn.close();
            }catch(SQLException e){

            }
        }

        return count;
    }

    // 내정답 - 커밋을 하자^,^..
    private void updateMember2() {


        System.out.println(&quot;수정할 회원id: &quot;);
        String id = sc.nextLine();

            int count = getMemberCount(id);
            if(count==0){
                System.out.println(id+&quot;는 없는 회원 id&quot;);
                return ;
            }

            System.out.println(&quot;수정할 항목을 선택하세요. 1.회원이름 2.회원비밀번호 3.회원 전화번호 4.회원주소 &quot;);
            int num = sc.nextInt();
            sc.nextLine();


        try {
            conn = DBUtil.getConnection();

            if(num ==1){
                System.out.println(&quot;회원이름을 입력하세요&quot;);
                String name = sc.nextLine();

                String sql = &quot;update MYMEMBER set mem_name = ? where mem_id = ? &quot;;

                pstmt = conn.prepareStatement(sql);
                pstmt.setString(1, name);
                pstmt.setString(2, id);

                int cnt = pstmt.executeUpdate();

                if(cnt&gt;0){
                    System.out.println(&quot;회원 정보 수정 완료&quot;);
                }else{
                    System.out.println(&quot;회원 정보 수정 실패&quot;);
                }
            }

            if(num ==2){
                System.out.println(&quot;회원비밀번호를 입력하세요&quot;);
                String pass = sc.nextLine();
                String sql = &quot;update MYMEMBER set mem_pass = ? where mem_id = ? &quot;;
                pstmt = conn.prepareStatement(sql);
                pstmt.setString(1, pass);
                pstmt.setString(2, id);

            }

            if(num ==3){
                System.out.println(&quot;회원전화번호를 입력하세요&quot;);
                String tel = sc.nextLine();
                String sql = &quot;update MYMEMBER set mem_tel = ? where mem_id = ? &quot;;
                pstmt = conn.prepareStatement(sql);
                pstmt.setString(1, tel);
                pstmt.setString(2, id);

            }

            if(num ==4){
                System.out.println(&quot;회원주소를 입력하세요&quot;);
                String addr = sc.nextLine();
                String sql = &quot;update MYMEMBER set mem_addr = ? where mem_id = ? &quot;;
                pstmt = conn.prepareStatement(sql);
                pstmt.setString(1, addr);
                pstmt.setString(2, id);

            }

        } catch (SQLException e) {
            // TODO: handle exception
        }finally{
            if(pstmt!=null) try {
                pstmt.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(conn!=null) try {
                conn.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
        }


    }




    private void select() {
        try {
            String sql5 = &quot;select * from MYMEMBER&quot;;
            stmt = conn.createStatement();
            rs = stmt.executeQuery(sql5);


            while(rs.next()){

                System.out.println(&quot;mem_id: &quot;+rs.getString(&quot;mem_id&quot;));
                System.out.println(&quot;mem_name: &quot;+rs.getString(&quot;mem_name&quot;));
                System.out.println(&quot;mem_pass: &quot;+rs.getString(&quot;mem_pass&quot;));
                System.out.println(&quot;mem_tel: &quot;+rs.getString(&quot;mem_tel&quot;));
                System.out.println(&quot;mem_addr: &quot;+rs.getString(&quot;mem_addr&quot;));
                System.out.println();

            }

        } catch (SQLException e) {
            // TODO: handle exception
        }finally{
            //자원 반납 : 만들어진 순의 역순으로
            if(stmt!=null) try {
                stmt.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(rs!=null) try {
                rs.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }

    }

    }



}
</code></pre><blockquote>
<h2 id="슨생님-정답">슨생님 정답</h2>
</blockquote>
<pre><code>package kr.or.ddit.basic;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Scanner;

import kr.or.ddit.util.DBUtil;
import kr.or.ddit.util.DBUtil3;

/*
     회원을 관리하는 프로그램을 작성하시오. (MYMEMBER 테이블 이용)
     아래 메뉴의 기능을 모두 구현하시오. (CRUD 기능 구현하기)
     메뉴예시) 
      -- 작업 선택 --
      1. 자료추가
      2. 자료삭제
      3. 자료수정 UPDATE
      4. 전체자료출력
      0. 작업끝

      처리조건)
      1) 자료추가에서 &#39;회원ID&#39;는 중복되지 않는다.(중복되면 다시 입력 받는다.)
      2) 삭제는 &#39;회원ID&#39;를 입력받아서 처리한다.
      3) 자료 수정에서 &#39;회원ID&#39;는 변경되지 않는다.

      쓰앵님 정답

 */
public class CopyOfJdbcTest06 {
    static Scanner sc = new Scanner(System.in);
    static Connection conn = null;
    ResultSet rs = null;
    PreparedStatement pstmt = null;
    Statement stmt = null;

    public static void main(String[] args) {
        new CopyOfJdbcTest06().memberStart();

    }

    public void memberStart(){
        while(true){
            int choice = displayMenu();

            switch(choice){
            case 1: insertMember(); break; //추가
            case 2:  deleteMember();break; //삭제
            case 3:  updateMember(); break; //수정 (아이디제외 전체 항목 수정)
            case 4:  displayMember(); break; //전체자료 출력
            case 5 : updateMember2(); break; // (원하는 항목만 수정)
            case 0:  System.out.println(&quot;프로그램을 종료합니다.&quot;); //종료
            return;
            default : System.out.println(&quot;번호를잘못입력했습니다. 다시 입력하세요&quot;);

            }
        }
    }



    // 회원 정보를 추가하는 메서드
    private void insertMember(){
        Connection conn = null;
        PreparedStatement pstmt = null;

        System.out.println(&quot;추가할 회원 정보를 입력하세요&quot;);

        int count =0;
        String id = &quot;&quot;; //String memId = null;

        do{
            System.out.println(&quot;mem_id를 입력하세요&quot;);
            id = sc.nextLine();
            count = getMemberCount(id);
            if(count&gt;0){
                System.out.println(id +  &quot;은(는) 이미 등록된 회원 ID입니다.&quot;);
                System.out.println(&quot;다른 회원 ID를 입력하세요&quot;);

            }
        }while(count&gt;0);

        System.out.println(&quot;mem_name를 입력해주세요&quot;);
        String name = sc.nextLine();
        System.out.println(&quot;mem_pass를 입력해주세요&quot;);
        String pass = sc.nextLine();
        System.out.println(&quot;mem_tel를 입력해주세요&quot;);
        String tel = sc.nextLine();
        System.out.println(&quot;mem_addr를 입력해주세요&quot;);
        String addr = sc.nextLine();

        try {

            conn = DBUtil.getConnection();

            String sql = &quot; insert into MYMEMBER values(? , ? , ? , ? , ?)&quot;;
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, id);
            pstmt.setString(2, name);
            pstmt.setString(3, pass);
            pstmt.setString(4, tel);
            pstmt.setString(5, addr);

            int cnt = pstmt.executeUpdate();
            System.out.println(&quot;반환값: &quot;+ cnt);
            if(cnt&gt;0){
                System.out.println(&quot;insert 성공&quot;);
            }else{
                System.out.println(&quot;insert 실패&quot;);
            }

        } catch (SQLException e) {
            e.printStackTrace();
        }finally{
            if(pstmt!=null)try{
                pstmt.close();
            }catch(SQLException e){

            }
            if(conn!=null)try{
                conn.close();
            }catch(SQLException e){

            }

        }
    }

    //회원정보 삭제
    private void deleteMember() {
        Connection conn = null;
        PreparedStatement pstmt = null;

        System.out.println();
        System.out.println(&quot;삭제할 회원 정보를 입력하세요&quot;);
        System.out.println(&quot;삭제할 mem_id를 입력해주세요 &quot;);
        String id = sc.nextLine();

        try {
            conn = DBUtil.getConnection();

            String sql = &quot;delete from mymember where mem_id = ?&quot;;
            pstmt = conn.prepareStatement(sql);
                    pstmt.setString(1, id);

            int cnt = pstmt.executeUpdate();
            System.out.println(&quot;반환값: &quot;+ cnt);
            if(cnt&gt;0){
                System.out.println(&quot;delete 성공&quot;);
            }else{
                System.out.println(&quot;delete 실패&quot;);
            }

        } catch (SQLException e) {
            e.printStackTrace();
        }finally{
            if(pstmt!=null) try {
                pstmt.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(conn!=null) try {
                conn.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
        }

    }


    // 회원정보 수정
    private void updateMember() {
        Connection conn = null;
        PreparedStatement pstmt = null;

        System.out.println(&quot;수정할 회원 정보를 입력하세요&quot;);
        System.out.println(&quot;수정할 회원id: &quot;);
        String id = sc.nextLine();

        int count = getMemberCount(id);
        if(count==0){
            System.out.println(id+&quot;는 없는 회원 id&quot;);
            return ;
        }

        System.out.println(&quot;수정할 mem_name를 입력해주세요&quot;);
        String name = sc.nextLine();
        System.out.println(&quot;수정할 mem_pass를 입력해주세요&quot;);
        String pass = sc.nextLine();
        System.out.println(&quot;수정할 mem_tel를 입력해주세요&quot;);
        String tel = sc.nextLine();
        System.out.println(&quot;수정할 mem_addr를 입력해주세요&quot;);
        String addr = sc.nextLine();

        try {
            conn = DBUtil.getConnection();
            String sql = &quot;update MYMEMBER set mem_name = ?, mem_pass = ?, mem_tel = ?, mem_addr = ? where mem_id = ? &quot;;
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, name);
            pstmt.setString(2, pass);
            pstmt.setString(3, tel);
            pstmt.setString(4, addr);
            pstmt.setString(5, id);

            int cnt = pstmt.executeUpdate();

            if(cnt&gt;0){
                System.out.println(&quot;회원 정보 수정 완료&quot;);
            }else{
                System.out.println(&quot;회원 정보 수정 실패&quot;);
            }

        } catch (SQLException e) {
            // TODO: handle exception
        }finally{
            if(pstmt!=null) try {
                pstmt.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(conn!=null) try {
                conn.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
        }

    }



    private void updateMember2() {
        Connection conn = null;
        PreparedStatement patmt = null;

        System.out.println();
        System.out.println(&quot;수정할 회원 정보를 입력하세요&quot;);
        System.out.println(&quot;수정할 회원 id를 입력하세요&quot;);
        String memId = sc.next();

        int count = getMemberCount(memId);
        if(count==0){
            System.out.println(memId+&quot;는 없는 회원 id&quot;);
            return ;
        }

        int num ; // 수정할 컬럼에 대한 선택 값이 저장될 변수
        String updateField = null;
        String updateTitle = null;

        do{
            System.out.println();
            System.out.println(&quot;수정할 항목을 선택하세요.&quot;);
            System.out.println(&quot;1.회원이름 2.회원비밀번호 3.회원 전화번호 4.회원주소&quot;);
            num = sc.nextInt();
            sc.nextLine();

            switch(num){
            case 1: 
                    updateField = &quot;mem_name&quot;;
                    updateTitle = &quot;회원이름&quot;;
                    break;
            case 2:
                    updateField = &quot;mem_pass&quot;;
                    updateTitle = &quot;비밀번호&quot;;
                    break;
            case 3:
                    updateField = &quot;mem_tel&quot;;
                    updateTitle = &quot;회원전화번호&quot;;
                    break;
            case 4:
                    updateField = &quot;mem_addr&quot;;
                    updateTitle = &quot;회원주소&quot;;
                    break;
            default : 
                    System.out.println(&quot;수정할 항목을 잘못 선택했습니다.&quot;);
                    System.out.println(&quot;다시 선택하세요&quot;);
            }
        }while(num&lt;1 || num&gt;4);

        System.out.println(&quot;새로운 &quot;+ updateTitle + &quot;:&quot;);
        String updateData = sc.nextLine();

        try {
            conn = DBUtil.getConnection();
            String sql = &quot;update mymember set &quot; + updateField + &quot;= ? where mem_id = ?&quot;;
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, updateData);
            pstmt.setString(2, memId);

            int cnt = pstmt.executeUpdate();

            if(cnt&gt;0){
                System.out.println(updateTitle+ &quot;수정 완료&quot;);
            }else{
                System.out.println(updateTitle+ &quot;수정 실패&quot;);
            }

        } catch (SQLException e) {
            e.printStackTrace();
        }finally{
            if(pstmt!=null) try {
                pstmt.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(conn!=null) try {
                conn.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
        }

    }


    private void displayMember() {
        Connection conn = null;
        Statement stmt = null;
        ResultSet rs = null;

        System.out.println(&quot;회원id   회원이름    비밀번호   전화번호                   주소&quot;);
        try {
            /*conn = DBUtil.getConnection();*/
            conn = DBUtil3.getConnection();
            /*conn = DBUtil2.getConnection();*/

            String sql = &quot;select * from mymember&quot;;
            stmt = conn.createStatement();

            rs= stmt.executeQuery(sql);

            while(rs.next()){

                System.out.print(rs.getString(&quot;mem_id&quot;) + &quot; \t&quot;);
                System.out.print(rs.getString(&quot;mem_name&quot;)+ &quot; \t&quot;);
                System.out.print(rs.getString(&quot;mem_pass&quot;)+ &quot; \t&quot;);
                System.out.print(rs.getString(&quot;mem_tel&quot;)+ &quot; \t&quot;);
                System.out.println(rs.getString(&quot;mem_addr&quot;)+ &quot; \t&quot;);
            }


        } catch (SQLException e) {
            e.printStackTrace();
        }finally{
            if(rs!=null)try{
                rs.close();
            }catch(SQLException e){

            }
            if(stmt!=null)try{
                stmt.close();
            }catch(SQLException e){

            }
            if(conn!=null)try{
                conn.close();
            }catch(SQLException e){

            }
        }


    }


    // 회원 id를 인수값으로 받아서 해당 회원 id의 개수를 반환하는 메서드
    private int getMemberCount(String memId){
        Connection conn = null;
        PreparedStatement pstmt = null;
        ResultSet rs = null;

        int count =0;
        try {
            conn = DBUtil.getConnection();
            String sql = &quot;select count(*) cnt from mymember where mem_id=?&quot;;
            pstmt = conn.prepareStatement(sql);
            pstmt.setString(1, memId);

            rs = pstmt.executeQuery();

            if(rs.next()){
                count = rs.getInt(&quot;cnt&quot;);
            }

        } catch (SQLException e) {
            count = 0;
            e.printStackTrace();

        }finally{
            if(rs!=null)try{
                rs.close();
            }catch(SQLException e){

            }
            if(pstmt!=null)try{
                pstmt.close();
            }catch(SQLException e){

            }
            if(conn!=null)try{
                conn.close();
            }catch(SQLException e){

            }
        }

        return count;
    }



    private int displayMenu() {
        System.out.println(&quot;==작업선택==&quot;);
        System.out.println(&quot;1.자료추가 2.자료삭제 3.자료수정4.전체자료출력 5. 자료수정2 0.작업끝&quot;);
        System.out.print(&quot;선택&gt;&quot;);

        int input=sc.nextInt(); 
            sc.nextLine();

        return input;
    }





}
</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[Java] JDBC - Statement, PreparedStatement]]></title>
            <link>https://velog.io/@vgo_dongv/Java-JDBC-Statement-PreparedStatement</link>
            <guid>https://velog.io/@vgo_dongv/Java-JDBC-Statement-PreparedStatement</guid>
            <pubDate>Fri, 19 Nov 2021 03:39:39 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h2 id="statement를-이용하는-방법">Statement를 이용하는 방법</h2>
</blockquote>
<ul>
<li>간단한 쿼리문을 실행할 때 사용</li>
</ul>
<pre><code>package kr.or.ddit.basic;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Scanner;

public class JdbcTest04 {

    public static void main(String[] args) {

        Scanner scan = new Scanner(System.in);
        Connection conn = null;
        Statement stmt = null;
        ResultSet rs = null;

        try {
            Class.forName(&quot;oracle.jdbc.driver.OracleDriver&quot;);

            conn = DriverManager.getConnection(&quot;jdbc:oracle:thin:@localhost:1521:xe&quot;,&quot;JHY990208&quot;,&quot;java&quot;);

            System.out.println(&quot;계좌번호 정보 추가하기&quot;);

            String sql2 = &quot;select bank_no from bankinfo&quot;;

            stmt = conn.createStatement();
            rs = stmt.executeQuery(sql2);


            String bankNo=&quot;&quot;;

            while(true){
                System.out.print(&quot;계좌번호: &quot;);
                bankNo =  scan.next();
                boolean flag = true;

                while(rs.next()){

                    if(rs.getString(&quot;bank_no&quot;).equals(bankNo)){
                        System.out.println(&quot;중복입니다.&quot;);
                        flag = false;
                        break;
                    }
                }
                if(flag){
                    break;
                }
            }

            System.out.print(&quot;은행명: &quot;);
            String bankName = scan.next();
            System.out.print(&quot;예금주명: &quot;);
            String bankUser = scan.next();

            // &#39;&quot;사이에 공백 x
            String sql = &quot;insert into bankinfo values(&#39;&quot; + bankNo + &quot;&#39;, &#39;&quot; + bankName+ &quot;&#39;, &#39;&quot; + bankUser+&quot;&#39;, sysdate)&quot;;

            // select문을 실행할때는 executeQuery()메서드를 사용하고
            // insert, update, delete문과 같이 select문이 아닌 쿼리문을 실행할때는 executeUpdate()메서드를 사용한다.
            // executeUpdate()메서드의 반환값은 작업에 성공한 레코드 수를 반환한다.
            int cnt = stmt.executeUpdate(sql);

            System.out.println(&quot;반환값: &quot;+ cnt);
            if(cnt&gt;0){
                System.out.println(&quot;insert 성공&quot;);
            }else{
                System.out.println(&quot;insert 실패&quot;);
            }

        } catch (SQLException e) {
            // TODO: handle exception
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            //자원 반납 : 만들어진 순의 역순으로

            if(stmt!=null) try {
                stmt.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(conn!=null) try {
                conn.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
        }
    }



}

</code></pre><blockquote>
<h2 id="preparedstatement를-이용하는방법">PreparedStatement를 이용하는방법</h2>
</blockquote>
<ul>
<li><strong>SQL문을 작성할 때 데이터가 들어갈 자리를 물음표(?)로 표시한다.</strong>
String sql = &quot;insert into bankinfo values( ? , ? , ? , sysdate)&quot;;</li>
<li><strong>PreparedStatement 객체를 생성한다. 이때 실행할 SQL문을 매개변수에 넘겨준다.</strong>
pstmt = conn.prepareStatement(sql); 미리쿼리문을 컴파일해서 해석하기때문에  속도가 빠르다</li>
<li><strong>SQL문의 물음표(?)자리에 들어갈 데이터를 세팅한다.</strong></li>
<li><strong>사용법) pstmt.set자료형(물음표번호, 세팅할데이터)</strong></li>
<li><strong>물음표 번호는 1번부터 시작</strong>
pstmt.setString(1, bankNo);
pstmt.setString(2, bankName);
pstmt.setString(3, bankUser);</li>
<li>** 데이터의 세팅이 완료되면 쿼리문을 실행한다.**
int cnt =pstmt.executeUpdate();</li>
</ul>
<pre><code>package kr.or.ddit.basic;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.Scanner;

public class CopyOfJdbcTest04 {

    public static void main(String[] args) {

        Scanner scan = new Scanner(System.in);
        Connection conn = null;
        ResultSet rs = null;
        PreparedStatement pstmt = null;
        PreparedStatement pstmt2 = null;

        try {
            Class.forName(&quot;oracle.jdbc.driver.OracleDriver&quot;);

            conn = DriverManager.getConnection(&quot;jdbc:oracle:thin:@localhost:1521:xe&quot;,&quot;JHY990208&quot;,&quot;java&quot;);

            System.out.println(&quot;계좌번호 정보 추가하기&quot;);

            String bankNo =&quot;&quot;;
            int count =0;
            do{
            System.out.print(&quot;계좌번호: &quot;);
            bankNo =  scan.next();
            String sql2 = &quot;select count(*) cnt from bankinfo where bank_no = ? &quot;;
            pstmt2 = conn.prepareStatement(sql2);
            pstmt2.setString(1, bankNo);

            rs = pstmt2.executeQuery();

            if(rs.next()){ // select문의 결과가 1개의레코드일 경우 if문 사용가능
           /*     count = rs.getInt(1);
                count = rs.getInt(&quot;count(*)&quot;);*/
                count = rs.getInt(&quot;cnt&quot;); // 컬럼의 alias로 설정하기
            }
            if(count&gt;0){
                System.out.println(&quot;중복입니돵&quot;);
            }
            }while(count&gt;0);

            System.out.print(&quot;은행명: &quot;);
            String bankName = scan.next();
            System.out.print(&quot;예금주명: &quot;);
            String bankUser = scan.next();

            // PreparedStatement를 이용하는 방법
            // SQL문을 작성할 때 데이터가 들어갈 자리를 물음표(?)로 표시한다.
            String sql = &quot;insert into bankinfo values( ? , ? , ? , sysdate)&quot;;

            // PreparedStatement 객체를 생성한다. 이때 실행할 SQL문을 매개변수에 넘겨준다.
            // 미리 쿼리문을 컴파일해서 해석하기때문에  속도가 빠르다
            pstmt = conn.prepareStatement(sql);
            // SQL문의 물음표(?)자리에 들어갈 데이터를 세팅한다.
            // 사용법) pstmt.set자료형(물음표번호, 세팅할데이터)
            // 물음표 번호는 1번부터 시작
            pstmt.setString(1, bankNo);
            pstmt.setString(2, bankName);
            pstmt.setString(3, bankUser);

            // 데이터의 세팅이 완료되면 쿼리문을 실행한다.
            int cnt =pstmt.executeUpdate();

            System.out.println(&quot;반환값: &quot;+ cnt);
            if(cnt&gt;0){
                System.out.println(&quot;insert 성공&quot;);
            }else{
                System.out.println(&quot;insert 실패&quot;);
            }

        } catch (SQLException e) {
            // TODO: handle exception
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            //자원 반납 : 만들어진 순의 역순으로

            if(rs!=null) try {
                rs.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(pstmt!=null) try {
                pstmt.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(pstmt2!=null) try {
                pstmt2.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }

            if(conn!=null) try {
                conn.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
        }
    }



}

</code></pre><blockquote>
<h2 id="둘다-이용하는-방법">둘다 이용하는 방법</h2>
</blockquote>
<ul>
<li><p>LPROD 테이블에 새로운 데이터를 추가하기</p>
<ul>
<li>lprod_gu와 lprod_nm은 직접 입력받아서 처리하고, lprod_id는 현재의 lprod_id값 중에서 제일 큰 값보다 
1 크게한다.</li>
<li>입력받은 lprod_gu가 이미 등록되어 있으면 다시 입력받아서 처리한다.</li>
</ul>
<blockquote>
<blockquote>
<h3 id="쿼리마다-preparestatement만드는-이유는">쿼리마다 prepareStatement만드는 이유는?</h3>
</blockquote>
</blockquote>
<ul>
<li>왜 pstmt2? 걍 pstmt쓰면 안되는이유눙?</li>
<li>한쿼리마다 걍 새로운 prepareStatement 만들어주는게 좋다고 합니다~</li>
</ul>
</li>
</ul>
<blockquote>
<h2 id="내가-한-정답">내가 한 정답</h2>
</blockquote>
<pre><code>package kr.or.ddit.basic;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Scanner;

/*
     LPROD 테이블에 새로운 데이터를 추가하기
     lprod_gu와 lprod_nm은 직접 입력받아서 처리하고, lprod_id는 현재의 lprod_id값 중에서 제일 큰 값보다 1 크게한다.

     입력받은 lprod_gu가 이미 등록되어 있으면 다시 입력받아서 처리한다.

 */
public class JdbcTest05 {

    public static void main(String[] args) {

        Scanner scan = new Scanner(System.in);
        Connection conn = null;
        ResultSet rs = null;
        PreparedStatement pstmt = null;
        Statement stmt = null;

        try {

            Class.forName(&quot;oracle.jdbc.driver.OracleDriver&quot;);
            conn = DriverManager.getConnection(&quot;jdbc:oracle:thin:@localhost:1521:xe&quot;,&quot;JHY990208&quot;,&quot;java&quot;);

            String sql2 = &quot;select lprod_gu from lprod&quot;;
            stmt = conn.createStatement();
            rs = stmt.executeQuery(sql2);

            String gu = &quot;&quot;;

            while(true){
                System.out.println(&quot;lprod_gu를 입력하세요&quot;);
                gu = scan.nextLine();
                boolean flag = true;

                while(rs.next()){

                    if(rs.getString(&quot;lprod_gu&quot;).equals(gu)){
                        System.out.println(&quot;중복입니다.&quot;);
                        flag = false;
                        break;
                    }
                }
                if(flag){
                    break;
                }
            }

            System.out.println(&quot;lprod_nm를 입력하세요&quot;);
            String nm = scan.nextLine();


            String sql3 = &quot;select nvl(MAX(lprod_id),0) MAX from lprod&quot;;
            rs =  stmt.executeQuery(sql3);
            int id = 0;
            if(rs.next()){
            id = rs.getInt(&quot;MAX&quot;)+1; // 컬럼의 alias로 설정하기
             }

            String sql = &quot; insert into lprod values(?, ? , ?)&quot;;
            pstmt = conn.prepareStatement(sql);
            pstmt.setInt(1, id);
            pstmt.setString(2, gu);
            pstmt.setString(3, nm);

            int cnt =pstmt.executeUpdate();

            System.out.println(&quot;반환값: &quot;+ cnt);
            if(cnt&gt;0){
                System.out.println(&quot;insert 성공&quot;);
            }else{
                System.out.println(&quot;insert 실패&quot;);
            }


        } catch (SQLException e) {
            // TODO: handle exception
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            //자원 반납 : 만들어진 순의 역순으로

            if(rs!=null) try {
                rs.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(pstmt!=null) try {
                pstmt.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(conn!=null) try {
                conn.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
        }

    }

}
</code></pre><blockquote>
<h2 id="선생님이-한-정답">선생님이 한 정답</h2>
</blockquote>
<pre><code>package kr.or.ddit.basic;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Scanner;

/*
     LPROD 테이블에 새로운 데이터를 추가하기
     lprod_gu와 lprod_nm은 직접 입력받아서 처리하고, lprod_id는 현재의 lprod_id값 중에서 제일 큰 값보다 1 크게한다.

     입력받은 lprod_gu가 이미 등록되어 있으면 다시 입력받아서 처리한다.

 */
public class CopyOfJdbcTest05 {

    public static void main(String[] args) {

        Scanner scan = new Scanner(System.in);
        Connection conn = null;
        ResultSet rs = null;
        PreparedStatement pstmt = null;
        PreparedStatement pstmt2 = null;
        Statement stmt = null;

        try {

            Class.forName(&quot;oracle.jdbc.driver.OracleDriver&quot;);
            conn = DriverManager.getConnection(&quot;jdbc:oracle:thin:@localhost:1521:xe&quot;,&quot;JHY990208&quot;,&quot;java&quot;);

            // lprod_id 구하기
            String sql3 = &quot;select nvl(MAX(lprod_id),0)+1 MAX from lprod&quot;;
            stmt = conn.createStatement();
            rs =  stmt.executeQuery(sql3);

            int id = 0;
            if(rs.next()){
            id = rs.getInt(&quot;MAX&quot;); // 컬럼의 alias로 설정하기
             }

            // gu 구하기
            String gu = &quot;&quot;;
            int count = 0;

            do{
                System.out.println(&quot;상품 분류코드(gu)입력&quot;);
                gu = scan.nextLine();

                String sql2 = &quot;select count(*) cnt from lprod where lprod_gu=?&quot;;
                pstmt = conn.prepareStatement(sql2);
                pstmt.setString(1, gu);

                rs = pstmt.executeQuery();

                if(rs.next()){
                    count = rs.getInt(&quot;cnt&quot;);
                }

                if(count &gt; 0){
                    System.out.println(&quot;중복입니다.&quot;);

                }

            }while(count&gt;0);

            System.out.println(&quot;lprod_nm를 입력하세요&quot;);
            String nm = scan.nextLine();

            String sql = &quot; insert into lprod values(?, ? , ?)&quot;;

            // 왜 pstmt2? 걍 pstmt쓰면 안되는이유눙? 쿼리마다 prepareStatement만드는 이유는? 한쿼리마다 새로운 pstmt2 만들어주는게 좋다고 합니다~
            pstmt2 = conn.prepareStatement(sql);
            pstmt2.setInt(1, id);
            pstmt2.setString(2, gu);
            pstmt2.setString(3, nm);

            int cnt =pstmt2.executeUpdate();

            System.out.println(&quot;반환값: &quot;+ cnt);
            if(cnt&gt;0){
                System.out.println(&quot;insert 성공&quot;);
            }else{
                System.out.println(&quot;insert 실패&quot;);
            }


        } catch (SQLException e) {
            // TODO: handle exception
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        }finally{
            //자원 반납 : 만들어진 순의 역순으로

            if(rs!=null) try {
                rs.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(pstmt!=null) try {
                pstmt.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(pstmt2!=null) try {
                pstmt2.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(conn!=null) try {
                conn.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
        }

    }

}
</code></pre><blockquote>
<h2 id="jdbc-드라이버를-로딩하고-connection객체를-생성하는-메서드로-구성된-class만들기">JDBC 드라이버를 로딩하고 Connection객체를 생성하는 메서드로 구성된 class만들기</h2>
</blockquote>
<pre><code>package kr.or.ddit.util;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;


// JDBC 드라이버를 로딩하고 Connection객체를 생성하는 메서드로 구성된 class만들기

public class DBUtil {
    // static 초기화 블럭
    static{
        try {
            Class.forName(&quot;oracle.jdbc.driver.OracleDriver&quot;);

        } catch (ClassNotFoundException e) {
            System.out.println(&quot;드라이버 로딩 실패&quot;);
            e.printStackTrace();
        }
    }

    public static Connection getConnection(){
        try {
            return DriverManager.getConnection(&quot;jdbc:oracle:thin:@localhost:1521:xe&quot;,&quot;JHY990208&quot;,&quot;java&quot;);
        } catch (SQLException e) {
            System.out.println(&quot;오라클 연결 실패&quot;);
            return null;
        }
    }


}
</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[HTML5&JavaScript] DOM/BOM(2) - Location]]></title>
            <link>https://velog.io/@vgo_dongv/HTML5JavaScript-DOMBOM2-Location</link>
            <guid>https://velog.io/@vgo_dongv/HTML5JavaScript-DOMBOM2-Location</guid>
            <pubDate>Thu, 18 Nov 2021 09:15:27 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h2 id="location객체--url-정보-얻기">Location객체 : URL 정보 얻기</h2>
</blockquote>
<ul>
<li><strong>location.href를 가장 많이쓴다.</strong></li>
</ul>
<p><img src="https://images.velog.io/images/vgo_dongv/post/44526fe9-2ef4-4cc4-9b37-2f8ab0d2b8ce/image.png" alt=""></p>
<blockquote>
<h2 id="예제">예제</h2>
</blockquote>
<ul>
<li><strong>replaced()</strong>: 현재화면을 새로운 화면으로 대체하고 이전화면으로 돌아갈 수 없다.</li>
<li><strong>reload()</strong>: 현재 문서를 재호출한다.</li>
</ul>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function proc1(){

    str = &quot;protocol: &quot; +location.protocol+&quot;&lt;br&gt;&quot;;
    str += &quot;hostname: &quot;+location.hostname+&quot;&lt;br&gt;&quot;;
    str += &quot;port: &quot;+location.port+&quot;&lt;br&gt;&quot;;
    str += &quot;host(hostname + port): &quot;+location.host+&quot;&lt;br&gt;&quot;;
    str += &quot;pathname: &quot;+location.pathname+&quot;&lt;br&gt;&quot;;
    str += &quot;href: &quot;+location.href+&quot;&lt;br&gt;&quot;;

    document.querySelector(&quot;#result1&quot;).innerHTML = str

}

function proc2(){

     location.href = &quot;test.jsp&quot;; 

}

function proc3(){
    document.myform.action = &quot;testPost.jsp&quot;;
    document.myform.method = &quot;post&quot;;
    document.myform.submit();
}

function proc4(page){
    location.replace(page);
}

function proc5(){
    arr = [&quot;hello&quot;, &quot;ChristMas&quot;, &quot;happy&quot;,&quot;sad&quot;,&quot;good&quot;,&quot;bad&quot;];
    num = parseInt(Math.random()*arr.length);
    str = &quot;&lt;h1&gt;&quot;+ arr[num] + &quot;&lt;/h1&gt;&quot;;

    /* document.getElementById(&#39;result5&#39;).innerHTML = str;
    document.getElementById(&#39;result5&#39;).style.color = &quot;red&quot;; */

    result = document.getElementById(&#39;result5&#39;);
    result.innerHTML = str;
    result.style.color = &quot;red&quot;;

    setTimeout(function(){

        location.reload();

    }, 1000);
}

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;box&quot;&gt;
    location객체: URL 정보 얻기
    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc1()&quot;&gt;확인&lt;/button&gt;
    &lt;div id=&quot;result1&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;box&quot;&gt;
    자동으로 특정페이지를 이동할 때 사용 &lt;button type=&quot;button&quot; onclick=&quot;proc2()&quot;&gt;location.href&lt;/button&gt;
    &lt;br&gt;
    a태그 이용- script의 함수호출후 location.href이용
    &lt;a href=&quot;javascript:proc2()&quot;&gt;공지사항 목록&lt;/a&gt;
    &lt;br&gt;&lt;br&gt;

    get-----------------------------&lt;br&gt;
    &lt;input type=&quot;button&quot; onclick=&quot;location.href=&#39;test.jsp&#39;&quot;&gt; get이동&lt;br&gt;
    post----------------------------&lt;br&gt;
    &lt;form name = &quot;myform&quot;&gt;
     &lt;input type=&quot;hidden&quot; name = &quot;korea&quot; value=&quot;코리아&quot;&gt;
     &lt;input type=&quot;button&quot; onclick=&quot;proc3()&quot;&gt;

    &lt;/form&gt;
&lt;/div&gt;

&lt;div class=&quot;box&quot;&gt;
    location.replace(url): 현재화면을 새로운 화면으로 대체하고 이전화면으로 돌아갈 수 없다.&lt;br&gt;
    새로운 문서로 대체한다.&lt;br&gt;

    &lt;button type=&quot;button&quot; onclick=&quot;proc4(&#39;test.jsp&#39;)&quot;&gt;replace&lt;/button&gt;

&lt;/div&gt;

&lt;div class=&quot;box&quot;&gt;
    location.reload(): 현재 문서를 재호출한다.&lt;br&gt;
    result5에 랜덤으로 발생하는 문자를 출력하고 1초후에 원래페이지를 재호출한다.
    &lt;button type=&quot;button&quot; onclick=&quot;proc5()&quot;&gt;reload&lt;/button&gt;
    &lt;div id =&quot;result5&quot;&gt;
    &lt;/div&gt;

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[HTML5&JavaScript] DOM/BOM(1) - window, setInterval]]></title>
            <link>https://velog.io/@vgo_dongv/HTML5JavaScript-DOMBOM1-window-setInterval</link>
            <guid>https://velog.io/@vgo_dongv/HTML5JavaScript-DOMBOM1-window-setInterval</guid>
            <pubDate>Thu, 18 Nov 2021 07:13:12 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h2 id="dom-html-문서를-객체로-표현한-것">DOM: HTML 문서를 객체로 표현한 것</h2>
<h2 id="bombrowser-object-model-웹브라우저를-객체로-표현한-것최상위-객체는-window이고-그-아래로-navigator-location-history-screen-document-frames-객체가-있다">BOM(Browser Object Model): 웹브라우저를 객체로 표현한 것.최상위 객체는 window이고 그 아래로 navigator, location, history, screen, document, frames 객체가 있다.</h2>
</blockquote>
<p><img src="https://images.velog.io/images/vgo_dongv/post/94822eda-4d29-427b-b1e7-ea67e06ed364/image.png" alt=""></p>
<blockquote>
<h2 id="window객체">Window객체</h2>
</blockquote>
<p><img src="https://images.velog.io/images/vgo_dongv/post/0fa61437-a2c2-4e11-98b7-7b995284dbea/image.png" alt="">
<img src="https://images.velog.io/images/vgo_dongv/post/da362d7f-14a4-4c17-889b-ec2385a61ac6/image.png" alt="">
<img src="https://images.velog.io/images/vgo_dongv/post/c4a70217-1ddb-4a43-bc7d-146d7bdcdb0d/image.png" alt=""></p>
<blockquote>
<h2 id="새로운-윈도우-오픈-예제">새로운 윈도우 오픈 예제</h2>
</blockquote>
<h3 id="--windowopenurl-name-specs">- window.open(URL, name, specs);</h3>
<h3 id="--moveto-resizeto-resizeby-close-opener">- moveTo, resizeTo, resizeBy, close(), opener</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function proc1(){

    a = window.open(&quot;windowsub.html&quot;, &quot;_blank&quot;, &quot;width=200 height=200&quot;);
    a.moveTo(100, 100);
    a.resizeTo(300, 300); /*  width=200 height=200무시됨  */
    /* a.resizeBy(300, 300);   width=200 height=200에 각각 300 더해서 총 500됨 */
    /* _blank일때만 width=200 height=200가 적용된당. */

}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;box&quot;&gt;
    새로운 창 열기 &lt;br&gt;
    window.open(url, name, specs) 파라미터의 값을 전부 생략가능하다. 생략시 새로운 빈창이 열린다.&lt;br&gt;

    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc1()&quot;&gt;확인&lt;/button&gt;
    &lt;div id=&quot;result1&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;windowsub&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function proc1(){

    //입력한 값 가져오기
    namevalue = document.getElementById(&#39;name&#39;).value.trim();
    /* namevalue = document.ff.name.value.trim(); */
    addrvalue = document.getElementById(&#39;addr&#39;).value.trim();

    str = &quot;이름: &quot;+namevalue+&quot;&lt;br&gt;&quot;;
    str += &quot;주소: &quot;+ addrvalue+&quot;&lt;br&gt;&quot;;

    // 값을 부모창으로 보내기
    opener.document.getElementById(&#39;result1&#39;).innerHTML = str ;
    window.close();
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;box&quot;&gt;
    이름과 주소를 입력하여 부모창으로 보내기 &lt;br&gt;
    부모창을 나타내는 속성은 opener&lt;br&gt;
    부모창의 id=result1으로 출력한다.&lt;br&gt;
    opener.document.getElementById(&#39;result1&#39;)
    &lt;br&gt;
    &lt;form name = &quot;ff&quot;&gt;
    이름&lt;input type=&quot;text&quot; id=&quot;name&quot; name=&quot;name&quot;&gt;&lt;br&gt;
    주소&lt;input type=&quot;text&quot; id=&quot;addr&quot; name=&quot;addr&quot;&gt;&lt;br&gt;
    &lt;/form&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc1()&quot;&gt;확인&lt;/button&gt;
    &lt;div id=&quot;result1&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre><blockquote>
<h2 id="setinterval">setInterval()</h2>
</blockquote>
<h3 id="--05초마다-색깔이-바뀌는-예제">- 0.5초마다 색깔이 바뀌는 예제</h3>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel =&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot;&gt;
&lt;style&gt;
div{
        border : 1px dotted blue;
        margin : 10px;
        padding: 20px;
        height: 100px;
}
&lt;/style&gt;

&lt;script&gt;
window.onload = function(){ //window.onload없으면 body태그보다 먼저 실행되어서 오류발생
    var vd2 = document.getElementById(&quot;d2&quot;)
    // var vd2 = document.querySelector(&quot;#d2&quot;)

    setInterval(function(){
        vr = parseInt(Math.random()*256);
        vg = parseInt(Math.random()*256);
        vb = parseInt(Math.random()*256);

        vd2.style.background = &#39;rgb(&#39;+vr+&#39;,&#39;+vg+&#39;,&#39;+vb+&#39;)&#39;;
    }, 500)
}

function randomColor(){
    // div검색
    // var vdiv = document.getElementsByTagName(&#39;div&#39;);
    // vdiv[0].style

    vr = parseInt(Math.random()*256);
    vg = parseInt(Math.random()*256);
    vb = parseInt(Math.random()*256);

    vr16 = vr.toString(16);
    vg16 = vg.toString(16);
    vb16 = vb.toString(16);


    var vdiv = document.querySelector(&#39;div&#39;);

    // vdiv.style.background=&#39;rgb(&#39;+vr+&#39;,&#39;+vg+&#39;,&#39;+vb+&#39;)&#39;;
       vdiv.style.background=&#39;#&#39;+vr16+vg16+vb16;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;pre&gt;
버튼을 클릭할때 마다 div의 색상을 변경한다.

script에서 html 요소 검색하기
document.getElementById(&#39;id이름&#39;)
document.getElementsByTagName(&#39;div&#39;)
document.getElementsByClassName(&#39;class이름&#39;)

document.querySelector(&#39;#id이름&#39;)
document.querySelector(&#39;.class이름&#39;)
document.querySelector(&#39;태그이름&#39;)

document.querySelectorAll(&#39;.class이름&#39;)
document.querySelectorAll(&#39;태그이름&#39;)

&lt;/pre&gt;
&lt;div&gt;&lt;/div&gt;
&lt;button type=&quot;button&quot; onclick=&quot;randomColor()&quot;&gt;확인&lt;/button&gt;
&lt;br&gt;&lt;br&gt;
&lt;div id=&quot;d2&quot;&gt;일정시간이 지날때마다 배경색을 변경한다.&lt;br&gt;
setInterval(function(){}, millisec)
&lt;/div&gt;


&lt;/body&gt;
&lt;/html&gt;


</code></pre><blockquote>
<h2 id="clearinterval-setinterval에서-수행되는-기능을-정지-시킨다">clearInterval: setInterval에서 수행되는 기능을 정지 시킨다.</h2>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot;&gt;
&lt;style&gt;
div{
        border : 1px dotted blue;
        margin : 10px;
        padding: 20px;
        height: 150px;
        overflow : auto;
}
&lt;/style&gt;
&lt;script&gt;
function randomColor(vt){
    //vt는 지역변수이고 gvt는 전역변수

    gvt = vt; //전역변수
    vt.style.display = &quot;none&quot;;
    // id가 d1인 요소 검색
    var vd1 = document.getElementById(&quot;d1&quot;);
    // vd1 = document.querySelector(&quot;#d1&quot;);

    a = setInterval(function(){ //var쓰면 지역변수됨. a는 전역변수.
        console.log(a);

        cr = parseInt(Math.random()*256);
        cg = parseInt(Math.random()*256);
        cb = parseInt(Math.random()*256);

        cr16 = cr.toString(16);
        cg16 = cg.toString(16);
        cb16 = cb.toString(16);

        vd1.style.background = &#39;#&#39; + cr16 + cg16 + cb16;

    },500) 
}

function stop(){
    clearInterval(a);
    gvt.style.display = &quot;inline&quot; /* #inline 줄안바뀜 block줄바뀜 */
    //확인 버튼 보이기

}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;pre&gt;
확인버튼 클릭하면 확인 버튼은 사라진다.
style.display = &quot;none&quot;

종료버튼 클릭하면 확인버튼이 다시 나타난다.
style.display = &quot;inline&quot;
&lt;/pre&gt;
&lt;div id=&quot;d1&quot;&gt;
  확인버튼을 클릭하면 호출되는 함수의 매개변수로 자기 자신(this)을 파라미터 변수로 전달한다.&lt;br&gt;&lt;br&gt;
 onclick=&quot;randomColor(this)

 0.5초가 지날때마다 function의 기능을 수행한다.&lt;br&gt;&lt;br&gt;
 a=setInterval(function(){},500)

 setInterval에서 수행되는 기능을 정지 시킨다.
 clearInterval(a)
&lt;/div&gt;
&lt;button type=&quot;button&quot; onclick=&quot;randomColor(this)&quot;&gt;확인&lt;/button&gt;
&lt;button type=&quot;button&quot; onclick=&quot;stop()&quot;&gt;종료&lt;/button&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[HTML5&JavaScript] Math]]></title>
            <link>https://velog.io/@vgo_dongv/HTML5JavaScript-Math</link>
            <guid>https://velog.io/@vgo_dongv/HTML5JavaScript-Math</guid>
            <pubDate>Thu, 18 Nov 2021 05:48:18 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h2 id="math-메서드">Math 메서드</h2>
</blockquote>
<p><img src="https://images.velog.io/images/vgo_dongv/post/227fe7b6-42d7-447e-ab9e-68399d517e97/image.png" alt=""></p>
<blockquote>
<h2 id="원하는-범위의-랜덤값-만들기">원하는 범위의 랜덤값 만들기</h2>
<p><strong>Math.floor(Math.random() * (최대값 – 최소값+1) +최소값);</strong>
<strong>Math.round(Math.random() * (최대값 – 최소값) + 최소값);</strong></p>
</blockquote>
<p><strong>예) 1부터 10까지의 랜덤수 만들기</strong></p>
<pre><code>var ranNum = Math.floor(Math.random() * (10 – 1 + 1) + 1);
document.write(ranNum);

Math.random() *10 -&gt;  0~ 9
Math.random() *10+1 - &gt; 1~ 10 
Math.random() *20 + 11 -&gt; 11 ~30</code></pre><blockquote>
<h2 id="math-객체-문제">Math 객체 문제</h2>
</blockquote>
<ul>
<li>1 ~ 10 사이의 난수를 발생 후 사용자가 이 값을 맞추는 프로그램을 작성하시오.</li>
<li>가위 바위 보 게임을 할 수 있는 프로그램을 작성하시오. (단, 컴퓨터는 랜덤을 이용하고, 사용자는 prompt로 입력 받아서 처리)</li>
<li>로또 번호를 생성하는 프로그램을 작성하시오.(1번 ~ 45번 중 6개의 번호를 추첨) </li>
</ul>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
rand = parseInt(Math.random()*100+1);
count = 0;
function proc1(){
    count++;

    str = &quot;&quot;;
    // 입력한 값 가져오기 - value
    invalue = document.querySelector(&#39;input&#39;).value;

    if(rand &gt; invalue){
        str += &quot;더 크게 입력하세요&quot;;
    }else if(rand == invalue){
        str += &quot;정답입니다. &quot;+count+&quot;번 만에 맞췄습니다.&quot;;
    }else{
        str += &quot;더 작게 입력하세요&quot;;
    }

    document.getElementById(&#39;result1&#39;).innerHTML = str;

}

function proc2(){

    arr = [&quot;가위&quot;,&quot;바위&quot;,&quot;보&quot;];
    crand = parseInt(Math.random()*arr.length);
    com = arr[crand];
    user = prompt(&quot;가위바위보 입력&quot;);

    str = &quot;컴퓨터: &quot;+com+&quot;&lt;br&gt;&quot;;
    str += &quot;사용자: &quot;+user+&quot;&lt;br&gt;&quot;;


    if(com == user){
        str += &quot;결과: 비김&quot;
    }else if(user == &quot;가위&quot; &amp;&amp; com==&quot;보&quot; || user ==&quot;바위&quot; &amp;&amp; com==&quot;가위&quot; || user ==&quot;보&quot; &amp;&amp; com == &quot;바위&quot;){
        str += &quot;결과: 사용자 승&quot;
    }else{
        str += &quot;결과: 컴퓨터 승&quot;
    }

    document.getElementById(&#39;result2&#39;).innerHTML= str;
}

function proc3(){
    // 배열 선언
    lotto = new Array();

    while(true){

        // 랜덤발생
        num = parseInt(Math.random()*45+1);
        // 배열에 저장 유무를 비교, 배열에 없으면 랜덤수를 저장
        if(lotto.indexOf(num)==-1){
            lotto.push(num);
            }
        // 계속할지 판단 - 배열의 갯수
        if(lotto.length==6){
            break;
        }
    }

    // 배열을 출력

    document.getElementById(&#39;result3&#39;).innerHTML = lotto;
}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;div class=&quot;box&quot;&gt;
        1~100사이의 랜덤수를 발생한다. 발생된 랜덤수를 입력하여 맞춘다.&lt;br&gt;
        result1에는 크다 작다 힌트와 결과를 출력한다.

        &lt;br&gt;
        &lt;input type = &quot;text&quot;&gt;
        &lt;button type=&quot;button&quot; onclick=&quot;proc1()&quot;&gt;확인&lt;/button&gt;
        &lt;div id=&quot;result1&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;box&quot;&gt;
        가위 바위 보 게임을 할 수 있는 프로그램을 작성하시오. &lt;br&gt;
        (단, 컴퓨터는 랜덤을 이용하고, 사용자는 prompt로 입력 받아서 처리)&lt;br&gt;
         가위바위보는 배열로 작성한다. arr = [&quot;가위&quot;,&quot;바위&quot;,&quot;보&quot;]&lt;br&gt;

        &lt;br&gt;
        &lt;button type=&quot;button&quot; onclick=&quot;proc2()&quot;&gt;확인&lt;/button&gt;
        &lt;div id=&quot;result2&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;box&quot;&gt;
        로또 번호를 생성하는 프로그램을 작성하시오.(1번 ~ 45번 중 6개의 번호를 추첨)

        &lt;br&gt;
        &lt;button type=&quot;button&quot; onclick=&quot;proc3()&quot;&gt;확인&lt;/button&gt;
        &lt;div id=&quot;result3&quot;&gt;&lt;/div&gt;
    &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[Java] JDBC(Java DataBase Connectivity)]]></title>
            <link>https://velog.io/@vgo_dongv/Java-JDBCJava-DataBase-Connectivity</link>
            <guid>https://velog.io/@vgo_dongv/Java-JDBCJava-DataBase-Connectivity</guid>
            <pubDate>Thu, 18 Nov 2021 03:46:49 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h3 id="jdbc-처리-순서">JDBC 처리 순서</h3>
</blockquote>
<ol>
<li><p>드라이버 로딩 : 라이브러리를 사용할 수 있게 메모리로 읽어들이는 작업. (라이브러리에는 DB와 JAVA를 연동해주는 클래스가 있다.)
Class.forName(&quot;oracle.jdbc.driver.OracleDriver&quot;);</p>
</li>
<li><p>DB시스템에 접속하기 : 접속이 완료되면 Connection객체가 생성된다.
DriverManager.getConnection()메서드를 이용한다.</p>
<p>DriverManager.getConnection(&quot;jdbc:oracle:thin:@오라클서버IP주소:포트번호:SID값&quot;,user,password)</p>
<p><img src="https://images.velog.io/images/vgo_dongv/post/1a049248-fe0e-451f-9faf-ecf8e930d843/image.png" alt=""></p>
</li>
<li><p>질의 : 쿼리를 처리한다. SQL문장을 DB서버로 보내서 결과를 얻어온다.
(Statement객체 또는 PreparedStatemnet객체를 이용하여 작업한다.)</p>
</li>
<li><p>결과 처리 : 질의 결과를 받아서 원하는 작업을 수행한다.
1) SQL문이 SELECT문일 경우: SELECT한 결과가 ResultSet객체에 저장되어 반환된다.
2) SQL문이 INSERT, UPDATE, DELETE문일 경우: 정수값이 반횐된다. (이 정수값은 실행에 성공한 레코드 수를 의미한다.)</p>
</li>
<li><p>사용자가 사용한 자원을 반납한다.
close() 메서드를 이용한다.</p>
</li>
</ol>
<blockquote>
<h3 id="예제1">예제1</h3>
</blockquote>
<pre><code>package kr.or.ddit.basic;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

// JDBC(Java DataBase Connectivity) 라이브러리를 이용한 DB자료 처리하기

/*
- JDBC 처리 순서
1. 드라이버 로딩 : 라이브러리를 사용할 수 있게 메모리로 읽어들이는 작업. 
(라이브러리에는 DB와 JAVA를 연동해주는 클래스가 있다.)
  Class.forName(&quot;oracle.jdbc.driver.OracleDriver&quot;);
2. DB시스템에 접속하기 : 접속이 완료되면 Connection객체가 생성된다.
  DriverManager.getConnection()메서드를 이용한다.

  DriverManager.getConnection(&quot;jdbc:oracle:thin:@오라클서버IP주소:포트번호:SID값&quot;,user,password)

3. 질의 : 쿼리를 처리한다. SQL문장을 DB서버로 보내서 결과를 얻어온다.
  (Statement객체 또는 PreparedStatemnet객체를 이용하여 작업한다.)
4. 결과 처리 : 질의 결과를 받아서 원하는 작업을 수행한다.
   1) SQL문이 SELECT문일 경우: SELECT한 결과가 ResultSet객체에 저장되어 반환된다.
   2) SQL문이 INSERT, UPDATE, DELETE문일 경우: 정수값이 반횐된다. 
   (이 정수값은 실행에 성공한 레코드 수를 의미한다.)
5. 사용자가 사용한 자원을 반납한다.
  close() 메서드를 이용한다.
*/

public class JdbcTest01 {


    public static void main(String[] args) {
    // DB작업에 필요한 객체변수 선언
    Connection conn = null;
    Statement stmt = null;
    ResultSet rs = null;

    try {
    //1. 드라이버 로딩
        Class.forName(&quot;oracle.jdbc.driver.OracleDriver&quot;);

        //2. DB연결: Connection객체 생성
        conn = DriverManager.getConnection(&quot;jdbc:oracle:thin:@localhost:1521:xe&quot;,&quot;JHY990208&quot;,&quot;java&quot;);

        //3. 질의
        //3-1) 실행할 SQL문 작성
        String sql = &quot;select * from lprod&quot;;
        //3-2) Statement객체 또는 PreparedStatement객체를 생성한다. (Connection객체를 이용하여 생성한다.)
        stmt = conn.createStatement();
        //3-3) SQL문을 DB서버로 보내서 실행한 결과를 얻어온다. 지금은 실행한 SQL문이 SELECT문이라 결과가  ResultSet객체에 저장되어 반환된다.
        rs = stmt.executeQuery(sql);

        //4. 결과 처리
        // rs.next(): ResultSet객체의 데이터를 가리키는 포인터를 다음위치로 이동하고 그 곳에 데이터가 있으면 true를 반환한다.
        // 데이터하나가 레코드
        while(rs.next()){
            // 포인터가 가리키는 곳의 자료 가져오기
            // 형식1) rs.get가져올데이터의자료형(&quot;컬럼명&quot;)
            // 형식2) rs.get가져올데이터의자료형(컬럼번호) : 컬럼번호는 1부터 시작한다. 0부터아님
            // 형식3) rs.get가져올데이터의자료형(&quot;컬럼의 alias명&quot;)
            System.out.println(&quot;lprod_id: &quot;+rs.getInt(&quot;lprod_id&quot;));
            System.out.println(&quot;lprod_gu: &quot;+rs.getString(2));
            System.out.println(&quot;lprod_nm: &quot;+rs.getString(&quot;lprod_nm&quot;));
            System.out.println();

        }

    } catch (SQLException e) {
        // TODO: handle exception
    } catch (ClassNotFoundException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } finally{
        // 5. 자원 반납 : 만들어진 순의 역순으로
        if(rs!=null) try {
            rs.close();
        } catch (SQLException e) {
            // TODO: handle exception
        }
        if(stmt!=null) try {
            stmt.close();
        } catch (SQLException e) {
            // TODO: handle exception
        }
        if(conn!=null) try {
            conn.close();
        } catch (SQLException e) {
            // TODO: handle exception
        }
    }

    }

}
</code></pre><blockquote>
<h3 id="예제2-사용자로부터-lprod_id값을-입력받아-입력한-값보다-lprod_id가-큰-자료를-출력하시오">예제2) 사용자로부터 lprod_id값을 입력받아 입력한 값보다 lprod_id가 큰 자료를 출력하시오.</h3>
</blockquote>
<ul>
<li>num은 int니까 &quot;&quot;밖으로 빼서 +로 연결해야함.
int num = sc.nextInt();
String sql = &quot;select * from lprod where lprod_id &gt; &quot;+num;</li>
</ul>
<pre><code>package kr.or.ddit.basic;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Scanner;

public class JdbcTest02 {
    //문제) 사용자로부터 lprod_id값을 입력받아 입력한 값보다 
    lprod_id가 큰 자료를 출력하시오.

    public static void main(String[] args) {
    // DB작업에 필요한 객체변수 선언
    Connection conn = null;
    Statement stmt = null;
    ResultSet rs = null;
    Scanner sc = new Scanner(System.in);

    try {
        //1. 드라이버 로딩
        Class.forName(&quot;oracle.jdbc.driver.OracleDriver&quot;);

        //2. DB연결: Connection객체 생성
        conn = DriverManager.getConnection(&quot;jdbc:oracle:thin:@localhost:1521:xe&quot;,&quot;JHY990208&quot;,&quot;java&quot;);

        //3. 질의
        //3-1) 실행할 SQL문 작성
        System.out.println(&quot;입력하세요&quot;);
        int num = sc.nextInt();
        String sql = &quot;select * from lprod where lprod_id &gt; &quot;+num;
        //3-2) Statement객체 또는 PreparedStatement객체를 생성한다. (Connection객체를 이용하여 생성한다.)
        stmt = conn.createStatement();
        //3-3) SQL문을 DB서버로 보내서 실행한 결과를 얻어온다. 
        지금은 실행한 SQL문이 SELECT문이라 결과가  ResultSet객체에 저장되어 반환된다.
        rs = stmt.executeQuery(sql);

        //4. 결과 처리
        // rs.next(): ResultSet객체의 데이터를 가리키는 포인터를 다음위치로 이동하고 그 곳에 데이터가 있으면 true를 반환한다.
        // 데이터하나가 레코드
        while(rs.next()){
            // 포인터가 가리키는 곳의 자료 가져오기
            // 형식1) rs.get가져올데이터의자료형(&quot;컬럼명&quot;)
            // 형식2) rs.get가져올데이터의자료형(컬럼번호) : 컬럼번호는 1부터 시작한다. 0부터아님
            // 형식3) rs.get가져올데이터의자료형(&quot;컬럼의 alias명&quot;)
            System.out.println(&quot;lprod_id: &quot;+rs.getInt(&quot;lprod_id&quot;));
            System.out.println(&quot;lprod_gu: &quot;+rs.getString(2));
            System.out.println(&quot;lprod_nm: &quot;+rs.getString(&quot;lprod_nm&quot;));
            System.out.println();

        }

    } catch (SQLException e) {
        // TODO: handle exception
    } catch (ClassNotFoundException e) {
        // TODO Auto-generated catch block
        e.printStackTrace();
    } finally{
        // 5. 자원 반납 : 만들어진 순의 역순으로
        if(rs!=null) try {
            rs.close();
        } catch (SQLException e) {
            // TODO: handle exception
        }
        if(stmt!=null) try {
            stmt.close();
        } catch (SQLException e) {
            // TODO: handle exception
        }
        if(conn!=null) try {
            conn.close();
        } catch (SQLException e) {
            // TODO: handle exception
        }
    }

    }

}
</code></pre><blockquote>
<h3 id="예제3-lprod_id값을-2개-입력-받아서-두-값중-작은-값부터-큰값사이의-자료를-출력하시오">예제3) lprod_id값을 2개 입력 받아서 두 값중 작은 값부터 큰값사이의 자료를 출력하시오</h3>
</blockquote>
<ul>
<li>아니 and 앞뒤로 공백줘야함
String sql = &quot;select * from lprod where lprod_id BETWEEN &quot;+num1+&quot; AND &quot;+num2;</li>
</ul>
<pre><code>package kr.or.ddit.basic;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Scanner;

// 문제) lprod_id값을 2개 입력 받아서 두 값중 작은 값부터 큰값사이의 자료를 출력하시오
public class JdbcTest03 {

    public static void main(String[] args) {
        // DB작업에 필요한 객체변수 선언
        Connection conn = null;
        Statement stmt = null;
        ResultSet rs = null;
        Scanner sc = new Scanner(System.in);

        try {
            //1. 드라이버 로딩
            Class.forName(&quot;oracle.jdbc.driver.OracleDriver&quot;);

            //2. DB연결: Connection객체 생성
            conn = DriverManager.getConnection(&quot;jdbc:oracle:thin:@localhost:1521:xe&quot;,&quot;JHY990208&quot;,&quot;java&quot;);

            //3. 질의
            //3-1) 실행할 SQL문 작성
            System.out.println(&quot;lprod_id1값을 입력하세요&quot;);
            int num1 = sc.nextInt();
            System.out.println(&quot;lprod_id2값을 입력하세요&quot;);
            int num2 = sc.nextInt();

            int max = Math.max(num1, num2);
            int min = Math.min(num1, num2);

            /*String sql = &quot;select * from lprod where lprod_id BETWEEN &quot;+num1+&quot; AND &quot;+num2;*/
            String sql = &quot;select * from lprod where lprod_id &gt;= &quot; +min+ &quot; AND lprod_id&lt;= &quot;+max;
            //3-2) Statement객체 또는 PreparedStatement객체를 생성한다. (Connection객체를 이용하여 생성한다.)
            stmt = conn.createStatement();
            //3-3) SQL문을 DB서버로 보내서 실행한 결과를 얻어온다. 지금은 실행한 SQL문이 SELECT문이라 결과가  ResultSet객체에 저장되어 반환된다.
            rs = stmt.executeQuery(sql);

            //4. 결과 처리
            // rs.next(): ResultSet객체의 데이터를 가리키는 포인터를 다음위치로 이동하고 그 곳에 데이터가 있으면 true를 반환한다.
            // 데이터하나가 레코드
            while(rs.next()){
                // 포인터가 가리키는 곳의 자료 가져오기
                // 형식1) rs.get가져올데이터의자료형(&quot;컬럼명&quot;)
                // 형식2) rs.get가져올데이터의자료형(컬럼번호) : 컬럼번호는 1부터 시작한다. 0부터아님
                // 형식3) rs.get가져올데이터의자료형(&quot;컬럼의 alias명&quot;)
                System.out.println(&quot;lprod_id: &quot;+rs.getInt(&quot;lprod_id&quot;));
                System.out.println(&quot;lprod_gu: &quot;+rs.getString(2));
                System.out.println(&quot;lprod_nm: &quot;+rs.getString(&quot;lprod_nm&quot;));
                System.out.println();

            }

        } catch (SQLException e) {
            // TODO: handle exception
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            e.printStackTrace();
        } finally{
            // 5. 자원 반납 : 만들어진 순의 역순으로
            if(rs!=null) try {
                rs.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(stmt!=null) try {
                stmt.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
            if(conn!=null) try {
                conn.close();
            } catch (SQLException e) {
                // TODO: handle exception
            }
        }

        }

}
</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[Java] File과 Map을 이용한 전화번호부 프로그램]]></title>
            <link>https://velog.io/@vgo_dongv/Java-File%EA%B3%BC-Map%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%A0%84%ED%99%94%EB%B2%88%ED%98%B8%EB%B6%80-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8</link>
            <guid>https://velog.io/@vgo_dongv/Java-File%EA%B3%BC-Map%EC%9D%84-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EC%A0%84%ED%99%94%EB%B2%88%ED%98%B8%EB%B6%80-%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8</guid>
            <pubDate>Thu, 18 Nov 2021 01:41:21 GMT</pubDate>
            <description><![CDATA[<p> 문제) 이름, 주소, 전화번호를 멤버로 갖는 Phone클래스를 만들고
   Map을 이용하여 전화번호 정보를 관리하는 프로그램을 작성하시오
     이 프로그램에는 아래와 같은 메뉴가 있는데 이 기능을 모두 구현하시오</p>
<p>   메뉴예시
      1. 전화번호 등록
      2. 전화번호 수정
      3. 전화번호 삭제
      4. 전화번호 검색
      5. 전화번호 전체 출력
      0. 프로그램 종료</p>
<p>   (Map의 구조는 key값으로 저장되는 사람의 이름을 사용하고,
       value값으로는 &#39;phone 클래스의 인스턴스&#39;로 한다.)</p>
<ul>
<li><p>**추가조건</p>
<pre><code>  1) 6. 전화번호 저장 메뉴를 추가하고 구현한다.
  (이 때 저장파일명은 &#39;phoneData.dat&#39;로 한다.
  2) 프로그램이 시작될 때 저장된 파일이 있으면 그 데이터를 읽어와  Map에 세팅한다.
  3) 프로그램을 종료할 때 Map의 데이터가 수정되거나, 추가 또는 삭제되면 저장 후 종료되도록 한다.**</code></pre><h2 id="실행예시">   실행예시)</h2>
<h2 id="다음-메뉴를-선택하세여">  다음 메뉴를 선택하세여</h2>
<ol>
<li><p>전화번호 등록 &gt;&gt; 새롭게 등록할 전화번호를 입력하세요. </p>
<pre><code>   이름&gt;&gt; 전화번호&gt;&gt; 주소&gt;&gt; &#39;홍길동&#39;전화번호 등록 완료.  이름 중복시 이미 등록된 사람 &gt; 다음 메뉴를 선택하세요

   2. 전화번호 수정
   3. 전화번호 삭제
   4. 전화번호 검색
   5. 전화번호 전체출력
   6. 전화번호 저장
   0. 프로그램 종료

   ------------------------------
   번호  이름  전화번호  주소
   -----------------------------
   1  홍길동  010-1111-1111  대전시
   ----------------------------

   1. 전화번호 등록
   2. 전화번호 수정
   3. 전화번호 삭제
   4. 전화번호 검색
   5. 전화번호 전체출력
   6. 전화번호 저장
   0. 프로그램 종료</code></pre></li>
</ol>
</li>
</ul>
<pre><code>


public class PhoneBookTest {

    Scanner sc = new Scanner(System.in);


    private HashMap&lt;String, Phone&gt; map;

    /*Set&lt;String&gt; keySet = map.keySet();*/

    private String fileName = &quot;d:/d_other/phoneData.dat&quot;;
    private String name;
    private String addr;
    private String tel;
    //데이터가 변경되었는지 여부를 나타내는 변수선언 데이터가 변경되면 
        이 변수값이 true가된다.
    private boolean dataChange;

    public PhoneBookTest() {

        map = load();

        if(map==null){ //파일이 없거나 입출력 오류일때
            map = new HashMap&lt;&gt;();
        }
    }

    public static void main(String[] args) {
        PhoneBookTest b= new PhoneBookTest();
        b.start();
    }

    public void start(){

        while(true){
            System.out.println(&quot; -----------&quot;);
            System.out.println(&quot;메뉴를 선택하세요 &quot;);
            System.out.println(&quot; -----------&quot;);
            System.out.println(&quot;1. 전화번호 등록&quot;);
            System.out.println(&quot;2. 전화번호 수정&quot;);
            System.out.println(&quot;3. 전화번호 삭제&quot;);
            System.out.println(&quot;4. 전화번호 검색&quot;);
            System.out.println(&quot;5. 전화번호 전체출력&quot;);
            System.out.println(&quot;6. 전화번호 저장&quot;);
            System.out.println(&quot;0. 프로그램 종료&quot;);
            int input = sc.nextInt();
            sc.nextLine(); // 입력버퍼를 비워주는 역할을 한다.

            switch(input){
            case 1: add(); break;
            case 2: edit(); break;
            case 3: delete(); break;
            case 4: search(); break;
            case 5: print(); break;
            case 6: save(); break;
            case 0: 
                if(dataChange==true){//데이터가 변경되었으면
                    System.out.println(&quot;변경된 데이터를 저장합니다.&quot;);
                    save();
                }
                return;
            }
        }

    }

    // 전화번호 파일로 저장
    private void save() {
        ObjectOutputStream oos = null; 
        //객체로 저장하려면 ObjectOutputStream 필요
        try {
            // 객체 저장용 출력 스트림 객체 생성
            oos = new ObjectOutputStream(new FileOutputStream(fileName));
            // Map객체를 파일로 저장한다.
            oos.writeObject(map);
            System.out.println(&quot;저장이 완료되었습니다.&quot;);
        } catch (Exception e) {
            e.printStackTrace();
        }finally{
            //사용했던 스트림 객체 닫기
            if(oos!=null)
            try {
                oos.close();
            } catch (IOException e) {
                // TODO: handle exception
            }
        }

        dataChange=false;

    }

    // 저장된 전화번호 정보를 읽어와서 반환하는 메서드
    private HashMap&lt;String,Phone&gt; load(){
        // 읽어온 데이터가 저장될 변수 선언
        HashMap&lt;String, Phone&gt; pMap = null;

        File file = new File(fileName);
        if(!file.exists()){ // 저장된 파일이 없으면
            return null;
        }
        // 저장된 파일을 읽어오기 위한 스트림 객체 변수 선언
        ObjectInputStream ois = null;
        try {
            // 파일 입력용 스트림 객체 생성
            ois = new ObjectInputStream(new FileInputStream(file));

            // 파일 내용을 읽어와 Map객체 변수에 저장한다.
            pMap = (HashMap&lt;String, Phone&gt;) ois.readObject();

        } catch (IOException e) {
            // TODO: handle exception
            return null;
        } catch (ClassNotFoundException e) {
            // TODO Auto-generated catch block
            return null;
        } finally{
            if(ois!=null)
                try {
                    ois.close();
                } catch (IOException e) {
                    // TODO: handle exception
                }
        }

        return pMap;
    }


    //전화번호 등록
    public void add(){

        System.out.println(&quot;새롭게 등록할 전화번호를 입력하세요.&quot;);

        System.out.println(&quot;이름&gt;&quot;);
        name =sc.nextLine();
        if(map.containsKey(name)==true){
            System.out.println(&quot;중복되는 이름이 있습니다.&quot;);
            add();
        }

        System.out.println(&quot;전화번호&gt;&quot;);
        tel=sc.nextLine();

        System.out.println(&quot;주소&gt;&quot;);
        addr=sc.nextLine();

        //방법1)
        /* Phone p = new Phone(name, tel, addr);
        map.put(name, p); */

        //방법2)
        map.put(name, new Phone(name, addr, tel));
        System.out.println(&quot;등록이 완료되었습니다. &quot;+ map.get(name));
        System.out.println();
        dataChange = true;
    }


    private void edit() {


        System.out.println(&quot;수정할 사람의 이름을 입력:&quot;);
        name = sc.nextLine();

        if(map.containsKey(name)==false){
            System.out.println(&quot;이름 없음&quot;);
            edit();
        }

        System.out.println(&quot;변경할 주소:&quot;);
        addr = sc.nextLine();
        System.out.println(&quot;변경할 번호:&quot;);
        tel = sc.nextLine();

        // 수정 방법1 : name을 이용해서 Phone객체를 구한후 Phone객체의 내용을 변경

        /* Phone p = map.get(name);
        p.setTel(tel);
        p.setAddr(addr); */

        // 수정 방법2 : 

        map.put(name, new Phone(name, addr, tel));
        dataChange=true;
        System.out.println(&quot;변경이 완료되었습니다. &quot;+ map.get(name));

    }


    private void delete() {

        System.out.println(&quot;삭제할 사람 전화번호의 이름을 입력:&quot;);
        name = sc.nextLine();

        if(map.containsKey(name)!=true){
            System.out.println(&quot;검색되지않습니다.&quot;);
            return;
        }

        map.remove(name);

        System.out.println(&quot;삭제가 완료되었습니다. &quot;);

        for(String key : map.keySet()){
            Phone value = map.get(key);
            System.out.println(key + &quot;:&quot;+value);
        }

        dataChange = true;

    }

    private void search() {



        System.out.println(&quot;검색할 사람의 이름을 입력:&quot;);
        name= sc.nextLine();
        if(map.containsKey(name)!=true){
            System.out.println(&quot;검색되지않습니다.&quot;);
            return;
        }

        // 방법1)
        /* Phone p = map.get(name);
        System.out.println(&quot;이름: &quot;+p.getName());
        System.out.println(&quot;전화번호: &quot;+p.getTel());
        System.out.println(&quot;주소: &quot;+p.getAddr());
        */


        // 방법2)
        System.out.println(&quot;검색결과 &quot;+ map.get(name));

    }

    private void print() {


        if(map.size()==0){
            System.out.println(&quot;등록된 정보가 없습니다.&quot;);
        } /* else{
            Iterator&lt;String&gt; keyIt = keySet.iterator();
            while(keyIt.hasNext()){
                String name = keyIt.next(); //키값
                Phone p = map.get(name); // value값(phone객체)

                System.out.println(&quot; &quot;+ p.getName()+&quot; &quot;+p.getTel()+&quot; &quot;+ p.getAddr() );
            }
        } */

        for(String key : map.keySet()){
            Phone value = map.get(key);
            System.out.println(key + &quot;:&quot;+value);
        }

    }
}

class Phone implements Serializable{ // 파일로 저장하려면 직렬화 

    private static final long serialVersionUID = 1L;

    private String name;
    private String addr;
    private String tel;


    public Phone(String name, String addr, String tel) {
        super();
        this.name = name;
        this.addr = addr;
        this.tel = tel;
    }

    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getAddr() {
        return addr;
    }
    public void setAddr(String addr) {
        this.addr = addr;
    }
    public String getTel() {
        return tel;
    }
    public void setTel(String tel) {
        this.tel = tel;
    }

    @Override
    public String toString() {
        return &quot;[이름=&quot; + name + &quot;, 주소=&quot; + addr + &quot;, tel=&quot; + tel + &quot;]&quot;;
    }


}
</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[HTML5&JavaScript] String]]></title>
            <link>https://velog.io/@vgo_dongv/HTML5JavaScript-String</link>
            <guid>https://velog.io/@vgo_dongv/HTML5JavaScript-String</guid>
            <pubDate>Wed, 17 Nov 2021 09:10:26 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h2 id="string-메소드">String 메소드</h2>
</blockquote>
<p><img src="https://images.velog.io/images/vgo_dongv/post/86148b86-dac7-4743-b84d-8157f21ee2e1/image.png" alt=""><img src="https://images.velog.io/images/vgo_dongv/post/e9538a3b-8a7f-44cb-bc15-b72920d4fc8b/image.png" alt=""></p>
<blockquote>
<h3 id="charatindex">charAt(index)</h3>
</blockquote>
<ul>
<li>지정된 index 위치의 문자를 리턴한다.<blockquote>
<h3 id="charcodeatindex">charCodeAt(index)</h3>
</blockquote>
</li>
<li>지정된 index 위치의 문자 코드를 리턴한다.<blockquote>
<h3 id="substringstart-end">substring(start, end)</h3>
</blockquote>
</li>
<li>start ~ end 사이의 문자열 추출<blockquote>
<h3 id="slicestart-end">slice(start, end)</h3>
</blockquote>
</li>
<li>start ~ end 사이의 문자열 추출<blockquote>
<h3 id="substrstart-length">substr(start, length)</h3>
</blockquote>
</li>
<li>start부터 length갯수만큼 추출<blockquote>
<h3 id="split구분자-갯수">split(구분자, 갯수)</h3>
</blockquote>
</li>
<li>구분자를 기준으로 문자열을 분리하여 배열로 생성되어 저장한다.
  갯수는 생략가능하다. 생략시 전체를 대상으로 한다.<blockquote>
<h3 id="replaceoldvalue-newvalue">replace(oldvalue, newvalue)</h3>
</blockquote>
</li>
<li>oldvalue를 newvalue로 변경한다.<br></li>
</ul>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
str = &quot;korea 우리 나라 좋은 나라 대한 민국 Korea&quot;;

function proc1(){
    a = str.charAt(4);
    codea = str.charCodeAt(4);

    res = str + &quot;&lt;br&gt;&quot;;
    res += &quot;srt.charAt(4): &quot;+a+&quot;&lt;br&gt;&quot;;
    res += &quot;str.charCodeAt(4): &quot;+codea+&quot;&lt;br&gt;&quot;;

    document.getElementById(&#39;result1&#39;).innerHTML = res;
}

function proc2(){
    subs = str.substring(3, 7); /* 3에서 7까지 */
    slic = str.slice(3, 7);    /* 3에서 7까지 */
    sublen = str.substr(3, 5); /* 3부터 5개 글자를 추출 */

    res = str + &quot;&lt;br&gt;&quot;;
    res += &quot;str.substring(3, 7): &quot;+ subs + &quot;&lt;br&gt;&quot;;
    res += &quot;str.slice(3, 7): &quot;+ slic+ &quot;&lt;br&gt;&quot;;
    res += &quot;str.subststr(3, 7): &quot;+ sublen+ &quot;&lt;br&gt;&quot;;

    document.getElementById(&#39;result2&#39;).innerHTML = res;

}

function proc3(){
    arr = str.split(&quot; &quot;);

    document.getElementById(&#39;result3&#39;).innerHTML = arr;

}

function proc4(){
    area = document.getElementsByTagName(&#39;textarea&#39;)[0].value;
    /* area = document.querySelector(&#39;textarea&#39;).value; */

    reparea = area.replace(/\r/g,&quot;&quot;).replace(/\n/g, &quot;&lt;br&gt;&quot;);

    aa = str.replace(/korea/gi,&#39;꾞릮아&#39;);
    alert(aa);

    document.getElementById(&#39;result4&#39;).innerHTML = reparea;
}
function proc5(){
    input = prompt(&quot;찾는 문자열을 입력하세요&quot;);

    value1 = str.match(/korea/gi); /* gi : korea랑 Korea둘다 찾아짐 */
    console.log(value1);

    value2 = str.match(/Good/gi); 
    console.log(value2);

    document.getElementById(&#39;result5&#39;).innerHTML = &quot;str.match(/korea/gi) &lt;br&gt;&quot;;
    document.getElementById(&#39;result5&#39;).innerHTML += &quot;배열을 리턴한다:&quot; + value1 + &quot;&lt;br&gt;&quot;;
    document.getElementById(&#39;result5&#39;).innerHTML += &quot;str.match(/Good/gi) &lt;br&gt;&quot;;
    document.getElementById(&#39;result5&#39;).innerHTML += &quot;null을 리턴한다:&quot;+value2;


}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;div class=&quot;box&quot;&gt;
    charAt(index): 지정된 index 위치의 문자를 리턴한다.&lt;br&gt;
    charCodeAt(index): 지정된 index 위치의 문자 코드를 리턴한다.&lt;br&gt;

    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc1()&quot;&gt;확인&lt;/button&gt;

    &lt;div id=&quot;result1&quot;&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;div class=&quot;box&quot;&gt;
    문자열 추출&lt;br&gt;
    substring(start, end): start ~ end 사이의 문자열 추출&lt;br&gt;
    slice(start, end): start ~ end 사이의 문자열 추출&lt;br&gt;
    substr(start, length): start부터 length갯수만큼 추출&lt;br&gt;

    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc2()&quot;&gt;확인&lt;/button&gt;

    &lt;div id=&quot;result2&quot;&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;div class=&quot;box&quot;&gt;
    문자열 분리&lt;br&gt;
    split(구분자, 갯수): 구분자를 기준으로 문자열을 분리하여 배열로 생성되어 저장한다.&lt;br&gt;
    갯수는 생략가능하다. 생략시 전체를 대상으로 한다.&lt;br&gt;

    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc3()&quot;&gt;확인&lt;/button&gt;

    &lt;div id=&quot;result3&quot;&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;div class=&quot;box&quot;&gt;
    문자열 대체- 수정&lt;br&gt;
    replace(oldvalue, newvalue): oldvalue를 newvalue로 변경한다.&lt;br&gt;
    textarea에 여러줄로 입력된 문자를 script로 보낸다. - value &lt;br&gt;
    id가 result4번인 요소에 출력한다. &lt;br&gt;
    출력시 \r\n을 &amp;lt;br&gt; 태그로 변경하여 출력한다.&lt;br&gt;&lt;br&gt; 
    &lt;textarea rows=&quot;5&quot; cols=&quot;50&quot;&gt;&lt;/textarea&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc4()&quot;&gt;확인&lt;/button&gt;

    &lt;div id=&quot;result4&quot;&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;div class=&quot;box&quot;&gt;
    문자열 검색&lt;br&gt;
    match(value):value를 검색한다.&lt;br&gt;
    검색된 문자열을 배열로리턴하고 검색문자가 없으면 null를 리턴한다. &lt;br&gt;
    id가 result4번인 요소에 출력한다. &lt;br&gt;
    출력시 \r\n을 &amp;lt;br&gt; 태그로 변경하여 출력한다.&lt;br&gt;&lt;br&gt; 
    &lt;button type=&quot;button&quot; onclick=&quot;proc5()&quot;&gt;확인&lt;/button&gt;

    &lt;div id=&quot;result5&quot;&gt;&lt;/div&gt;

&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre><blockquote>
<h3 id="주민등록번호를-입력-받아-생년월일과-성별을-출력하는-프로그램">주민등록번호를 입력 받아 생년월일과 성별을 출력하는 프로그램</h3>
<h3 id="주민번호-유효성-검사-예제">주민번호 유효성 검사 예제</h3>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;
&lt;script type=&quot;text/javascript&quot;&gt;
function proc1(){
   today = new Date(); // 2021.11.17 시간

   // 990504 &quot;2&quot;408712 -&gt; 1,2 - 1900/ 3,4-2000 ,1,3남자
    num = prompt(&quot;주민번호를 입력하세요.&quot;, &quot;-없이 입력&quot;);
   /* year = num.substring(0, 2); */
   month = num.substring(2, 4);
   day = num.substring(4, 6);
   /* gender = num.substr(6, 1); */

    if(num.substr(6, 1) == 1 || num.substr(6, 1) == 2){
      year = &quot;19&quot;+num.substring(0, 2);
   }
    else{
      year = &quot;20&quot;+num.substring(0, 2);
    }

    if(num.substr(6, 1)==1 || num.substr(6, 1)==3){
       gender = &quot;남자&quot;
    }else{
       gender = &quot;여자&quot;
    }


    today.getFullYear() //2021
    age =  (today.getFullYear()-year)+1;

    str = &quot;생일: &quot; + year+&quot;년&quot;+ month+&quot;월&quot;+ day+ &quot;일&quot;+&quot;&lt;br&gt;&quot;;
    str += &quot;성별: &quot;+gender+&quot;&lt;br&gt;&quot;;
    str += &quot;나이:&quot;+age;


   document.getElementById(&#39;result1&#39;).innerHTML = str;


}

function proc2(){
   /* str = &quot;234567892345&quot;; */

   // 입력 (가정: 1103264432618)
   code = prompt(&quot;주민번호 입력&quot;, &#39;-없이 입력&#39;);
   // code.length = 13 index : 0부터 12까지 
   sum = 0;
   // 입력된것을 한자리씩 추출 : 0부터 11까지 추출

   for(i=0; i&lt;code.length-1; i++){
   /*    sum += code.substr(i,1) * str.substr(i,1); */
      sum += code.substr(i,1) * (i % 8 + 2);
   }

   res = 11 - sum % 11 // 0~11
   res = res % 10;
/*    if(res == 10) 
      res =0;
   if(res == 11)
      res =1; */


   if(res == code.substr(code.length-1,1)){
      alert(&quot;옳바른 주민번호다.&quot;);
   }else{
      alert(&quot;틀린 주민번호다.&quot;);
   }

}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

   &lt;div class=&quot;box&quot;&gt;
   주민등록번호를 입력 받아 ( -없이 입력 ) 생년월일과 성별을 출력하는 프로그램을 작성하시오.(입력은 prompt로 입력받는다.)&lt;br&gt;
   예) 주민등록번호를 110326-4(1,2 - 1900/ 3,4-2000 ,1,3남자)432618로 입력 받은 경우&lt;br&gt;
   생일 : 2011년 3월 26일&lt;br&gt;
   성별 : 여자  나이: &lt;br&gt;

      &lt;br&gt;
      &lt;button type=&quot;button&quot; onclick=&quot;proc1()&quot;&gt;확인&lt;/button&gt;
      &lt;div id=&quot;result1&quot;&gt;&lt;/div&gt;
   &lt;/div&gt;

   &lt;div class=&quot;box&quot;&gt;
   주민등록번호를 입력 받아 주민등록번호의 유효성을 검사하는 프로그램을 작성하시오.(ABCDEF-GHIJKLM)&lt;br&gt;
   1. A*2 + B*3 + ... + H*9 + I*2 + ... + L*5 의 총합을 구한다.&lt;br&gt;
   110326-4432618&lt;br&gt;
   2. 1번의 합을 11로 나눈 나머지를 구한다.&lt;br&gt;
   3. 11에서 2번의 결과를 뺀다.&lt;br&gt;
   4. 3번의 결과가 0~9이면 값 그대로, 10이면 0, 11이면 1로 변환&lt;br&gt;
   5. 4번의 결과와 M자리의 값이 같으면 맞는 번호이다.&lt;br&gt;

   &lt;br&gt;
   &lt;button type=&quot;button&quot; onclick=&quot;proc2()&quot;&gt;확인&lt;/button&gt;
   &lt;div id=&quot;result2&quot;&gt;&lt;/div&gt;
   &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>]]></description>
        </item>
        <item>
            <title><![CDATA[[HTML5&JavaScript] Date]]></title>
            <link>https://velog.io/@vgo_dongv/HTML5JavaScript</link>
            <guid>https://velog.io/@vgo_dongv/HTML5JavaScript</guid>
            <pubDate>Wed, 17 Nov 2021 05:46:45 GMT</pubDate>
            <description><![CDATA[<blockquote>
<h2 id="date-객체--날짜와-시간-작업을-하는데-사용되는-가장-기본적인-객체">Date 객체 : 날짜와 시간 작업을 하는데 사용되는 가장 기본적인 객체</h2>
</blockquote>
<ul>
<li>new Date() // 현재 날짜와 시간</li>
<li>new Date(milliseconds) //1970/01/01 이후의 밀리초</li>
<li>new Date(dateString)</li>
<li>new Date(year, month, date[, hours[, minutes[, seconds[,ms]]]])</li>
</ul>
<blockquote>
<h2 id="date-객체의-메소드">Date 객체의 메소드</h2>
</blockquote>
<p><img src="https://images.velog.io/images/vgo_dongv/post/c072a232-c1e5-4c21-ac51-1f37f44ea3f5/image.png" alt=""></p>
<blockquote>
<blockquote>
<h3 id="getday로-요일찍기">getDay()로 요일찍기</h3>
</blockquote>
</blockquote>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;

&lt;style type=&quot;text/css&quot;&gt;
pre{
    padding : 20px;
}
&lt;/style&gt;
&lt;script type=&quot;text/javascript&quot;&gt;

window.onload =  function(){
    vp = document.getElementsByTagName(&quot;pre&quot;)[0]; // pre태그 전부를 배열에 저장해서 [0]붙히기.
    // document.querySelector(&#39;pre&#39;);  pre태그 중 젤 첫번째꺼만

    window.setInterval(function(){

        today = new Date();
        tostr = today.toLocaleString();
        vp.innerHTML = tostr;

    }, 1000); //1초마다 한번씩
}

    now = new Date(); // now는 무조건 전역변수

function proc1(){

    now2 = new Date(&quot;2000.4.12&quot;);
    now3 = new Date(200,4,12);
    now4= new Date(100928282);

    str = now.toLocaleString() + &quot;&lt;br&gt;&quot;;
    str += now2.toLocaleString() + &quot;&lt;br&gt;&quot;;
    str += now3.toLocaleString() + &quot;&lt;br&gt;&quot;;
    str += now4.toLocaleString() + &quot;&lt;br&gt;&quot;;

    document.querySelector(&#39;#result1&#39;).innerHTML = str;
}

function proc2(){
    week = now.getDay()
    switch(week){
    case 0:
        str = &quot;일요일&quot;;
        break;
    case 1:
        str = &quot;월요일&quot;;
        break;
    case 2:
        str = &quot;화요일&quot;;
        break;
    case 3:
        str = &quot;수요일&quot;;
        break;
    case 4:
        str = &quot;목요일&quot;;
        break;
    case 5:
        str = &quot;금요일&quot;;
        break;
    case 6:
        str = &quot;토요일&quot;;
        break;
    }

    res = &quot;오늘: &quot;+ now.toLocaleString() + &quot;&lt;br&gt;&quot;;
    res += str + &quot;입니다.&quot;

    document.getElementById(&#39;result2&#39;).innerHTML = res;
}
function proc3(){
    days=[&quot;일요일&quot;,&quot;월요일&quot;,&quot;화요일&quot;,&quot;수요일&quot;,&quot;목요일&quot;,&quot;금요일&quot;,&quot;토요일&quot;];

    days[now.getDate()];

    res = &quot;오늘: &quot;+ now.toLocaleString() + &quot;&lt;br&gt;&quot;;
    res += days[now.getDate()] + &quot;입니다.&quot;

    document.getElementById(&#39;result3&#39;).innerHTML = res;

}
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;pre&gt;

&lt;/pre&gt;
&lt;div class=&quot;box&quot;&gt;
    Date()객체 생성&lt;br&gt;
    new Date()&lt;br&gt;
    new Date(millisec)
    new Date(&quot;2000.4.12&quot;) -&gt; 4월나옴&lt;br&gt;
    new Date(2000,4,12) -&gt; 5월나옴&lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc1()&quot;&gt;확인&lt;/button&gt;
    &lt;div id=&quot;result1&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;box&quot;&gt;
    요일 구하기&lt;br&gt;
    getDay() : 0(일요일)~6(토요일)으로 리턴한다.&lt;br&gt;
    if_else, switch_case를 이용하여 요일을 구한다.&lt;br&gt;

    &lt;button type=&quot;button&quot; onclick=&quot;proc2()&quot;&gt;확인&lt;/button&gt;
    &lt;div id=&quot;result2&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;div class=&quot;box&quot;&gt;
    요일 구하기&lt;br&gt;
    getDay() : 0(일요일)~6(토요일)으로 리턴한다.&lt;br&gt;
    배열을 이용하여 요일을 구한다.&lt;br&gt;
    days=[&quot;일요일&quot;,&quot;월요일&quot;,&quot;화요일&quot;,&quot;수요일&quot;,&quot;목요일&quot;,&quot;금요일&quot;,&quot;토요일&quot;]&lt;br&gt;

    &lt;button type=&quot;button&quot; onclick=&quot;proc3()&quot;&gt;확인&lt;/button&gt;
    &lt;div id=&quot;result3&quot;&gt;
    &lt;/div&gt;
&lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre><blockquote>
<h3 id="gettime으로-경과시간-구하기">getTime()으로 경과시간 구하기</h3>
</blockquote>
<ul>
<li>태어난 날로부터 현재까지 일 또는 년수 구하기</li>
<li>100일후의 날짜 구하기</li>
<li>선택한 날로부터 경과한 날 수 구하기</li>
</ul>
<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Insert title here&lt;/title&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../css/mystyle.css&quot; type=&quot;text/css&quot;&gt;

&lt;script type=&quot;text/javascript&quot;&gt;
today = new Date(); //오늘

function proc1(){
    bir = new Date(1999,2-1,8);
/*     bir =  new Date(&quot;1999.2.8&quot;) */

    ttime = today.getTime();
    btime = bir.getTime();
    console.log(ttime, btime);

    timse = ttime - btime; // millisec
    res = timse/1000/60/60/24/365;
    console.log(res);

    str =  &quot;오늘: &quot;+today.toLocaleDateString()+&quot;&lt;br&gt;&quot;;
    str += &quot;태어난 날: &quot;+bir.toLocaleDateString()+&quot;&lt;br&gt;&quot;;
    str += &quot;경과된 시간: &quot;+parseInt(Math.ceil(res)) + &quot;년 경과 하였습니다.&quot;;

    document.getElementById(&#39;result1&#39;).innerHTML = str;
}
function proc2(){
    tomili = today.getTime();
    milli100 = 1000*60*60*24*100; /* 100의 milliesec */
    millisum = tomili + milli100;

    after100 = new Date(millisum);
    after100.toLocaleDateString(); /* toLocaleString() -날짜와 시간, toLocaleDateString()-시간 */

    str = &quot;오늘: &quot;+today.toLocaleDateString()+&quot;&lt;br&gt;&quot;;
    str+= &quot;100일후: &quot;+ after100.toLocaleDateString()+&quot;&lt;br&gt;&quot;;

    document.querySelector(&#39;#result2&#39;).innerHTML = str;
}
function proc3(){
    // 1. id가 pdate인 요소에서 선택한 값을 가져온다. value이용. value값은 String. 
    datevalue = document.getElementById(&#39;pdate&#39;).value;
    // 2. value값으로 date 객체를 생성한다.
    date1 = new Date(datevalue);

    // 경과시간
    // 3. 오늘의 getTime - 2번의 getTime //결과값은 millisec
    date2 = today.getTime()-date1.getTime();
    console.log(&quot;date2:&quot; + date2);
    if(date2 &lt; 0){
        alert(&quot;선택오류입니다.&quot;);
        return false;
    }
    // 4. 경과한 날수를 구한다. date2/1000/60/60/24
    times = date2/1000/60/60/24;
    console.log(&quot;times :&quot; + times);
    // 5. times를 가지고 비교
    if(times&gt;7){
        res = &quot;교환 불가능&quot;;
    }else{
        res = &quot;교환 가능&quot;;
    }

    // 6. 결과를 result3번에 출력한다. -toLocaledateString
    str = &quot;오늘날짜: &quot;+today.toLocaleDateString()+&quot;&lt;br&gt;&quot;;
    str += &quot;구매날짜: &quot;+ date1.toLocaleDateString()+&quot;&lt;br&gt;&quot;;
    str += &quot; 결과: &quot;+res+&quot;&lt;br&gt;&quot;

    document.getElementById(&#39;result3&#39;).innerHTML =  str;



}

function proc4(){
    cm = new Date(2021,12-1,25);

    ttime = today.getTime();
    btime = cm.getTime();

    timse= btime-ttime;
    res = timse/1000/60/60/24;

    str =  &quot;오늘: &quot;+today.toLocaleDateString()+&quot;&lt;br&gt;&quot;;
    str += &quot;크리스마스까지 남은일수: &quot;+parseInt(Math.round(res))+&quot;일 남았습니다.&lt;br&gt;&quot;;


    document.getElementById(&#39;result4&#39;).innerHTML = str;


}

&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;

    &lt;div class=&quot;box&quot;&gt;
    경과시간 구하기&lt;br&gt;
    getTime(): 리턴값은 millisec이다.&lt;br&gt;
    millisec를 1000으로 나누면 실제 초를 구할 수 있다. &lt;br&gt;
    태어난 날로부터 현재까지 일 또는 년수 구하기
    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc1()&quot;&gt;확인&lt;/button&gt;
    &lt;div id=&quot;result1&quot;&gt;
    &lt;/div&gt;

    &lt;div class=&quot;box&quot;&gt;
    경과시간 구하기&lt;br&gt;
    100일후의 날짜 구하기
    getTime(): 리턴값은 millisec이다.&lt;br&gt;
    1일의 millisec : 1000 * 60 * 60 * 24&lt;br&gt;
    a = 현재의  millisec + 100일후의  millisec &lt;br&gt;
    new Date(a)&lt;br&gt;

    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc2()&quot;&gt;확인&lt;/button&gt;
    &lt;div id=&quot;result2&quot;&gt;
    &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;box&quot;&gt;
    경과시간 구하기&lt;br&gt;
    선택한 날로부터 경과한 날 수 구하기&lt;br&gt;
    getTime(): 리턴값은 millisec이다.&lt;br&gt;

    7일 이상이면 교환반품 불가능 아니면 가능으로 출력.
    &lt;br&gt;
    &lt;input type =&quot;date&quot; id=&quot;pdate&quot;&gt;&lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc3()&quot;&gt;확인&lt;/button&gt;
    &lt;div id=&quot;result3&quot;&gt;
    &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;box&quot;&gt;
    경과시간 구하기&lt;br&gt;
    크리스마스까지 남은 일수 구하기&lt;br&gt;
    getTime(): 리턴값은 millisec이다.&lt;br&gt;

    &lt;br&gt;
    &lt;button type=&quot;button&quot; onclick=&quot;proc4()&quot;&gt;확인&lt;/button&gt;
    &lt;div id=&quot;result4&quot;&gt;
    &lt;/div&gt;
    &lt;/div&gt;

&lt;/body&gt;
&lt;/html&gt;</code></pre>]]></description>
        </item>
    </channel>
</rss>