웹 애플리케이션 만들기

자바스크립트 실습

 실습1

웹페이지가 갱신되지 않는 분은 아래 댓글을 참고해주세요. 

실습2

1.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
</head>
<body>
  <input type="text" id="user_input" />
  <input type="button" value="white" onclick="alert(document.getElementById('user_input').value)"/>
</body>
</html>

실습3

2.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
   <style>
     .em{
       text-decoration:underline;
     }
   </style>
</head>
<body>
  <ol id="target">
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
  </ol>
  <ul>
    <li>최진혁</li>
    <li>최유빈</li>
    <li>한이람</li>
    <li>한이은</li>
  </ul>
  <input type="button" value="강조" onclick="document.getElementById('target').className='em'" />
</body>
</html>
참고로 위의 코드에서 onclick 속성의 값인 document.getElementById('target').className='em' 부분이 자바스크립트입니다. 

실습4

index.html

<!DOCTYPE html>
<html>
<head>
     <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body id="target">
	<header>
		<h1><a href="http://localhost/">JavaScript</a></h1>
	</header>
	<nav>
		<ol>
  		<li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
  		<li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
  		<li><a href="http://localhost/page_op.html">연산자</a></li>
		</ol>
	</nav>
  <div id="control">
    <input type="button" value="white" onclick="document.getElementById('target').className='white'" />
    <input type="button" value="black" onclick="document.getElementById('target').className='black'"  />
  </div>
</body>
</html>

page_html.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body id="target">
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ol>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ol>
  </nav>
  <div id="control">
    <input type="button" value="white" onclick="document.getElementById('target').className='white'" />
    <input type="button" value="black" onclick="document.getElementById('target').className='black'"  />
  </div>
  <article>
    <h2>JavaScript란?</h2>
    JavaScript는 웹페이지를 프로그래밍적으로 제어하는 언어입니다.
  </article>
</body>
</html>

page_op.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body id="target">
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ul>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ul>
  </nav>
  <div id="control">
    <input type="button" value="white" onclick="document.getElementById('target').className='white'" />
    <input type="button" value="black" onclick="document.getElementById('target').className='black'"  />
  </div>
  <article>
    <h2>연산자</h2>
    계산을 할 때 사용되는 것입니다.
  </article>
</body>
</html>

page_vc.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">
</head>
<body id="target">
  <header>
    <h1><a href="http://localhost/">JavaScript</a></h1>
  </header>
  <nav>
    <ul>
      <li><a href="http://localhost/page_html.html">JavaScript란?</a></li>
      <li><a href="http://localhost/page_vc.html">변수와 상수</a></li>
      <li><a href="http://localhost/page_op.html">연산자</a></li>
    </ul>
  </nav>
  <div id="control">
    <input type="button" value="white" onclick="document.getElementById('target').className='white'" />
    <input type="button" value="black" onclick="document.getElementById('target').className='black'"  />
  </div>
  <article>
    <h2>변수와 상수</h2>
    변수란
    <ul>
      <li>변하는 값</li>
      <li>x=10일 때 왼쪽항인 x는 오른쪽 항인 10에 따라 다른 값이 지정된다.</li>
    </ul>
    상수란
    <ul>
      <li>변하지 않는 값</li>
      <li>x=10일 때 오른쪽 항인 10이 상수가 된다</li>
    </ul>
  </article>
</body>
</html>

style.css

body.black {
  background-color:black;
  color:white;
}
body.white {
  background-color:white;
  color:black;
}
header{
  border-bottom:1px solid gray;
  padding:20px;
}
nav {
  border-right:1px solid gray;
  width:200px;
  height:600px;
  float:left;
}
nav ol{
  list-style:none;
}
article{
  float:left;
  padding:20px;
}
#control {
  float:right;
}

실습5

아래 수업은 실습을 하지 마시고 설명만 들어주세요.  안들어도 됩니다! 왠만하면 듣지 마세요. ㅎㅎ 차라리 아래에 나오는 활용을 보시는 것을 추천드립니다. 

Sound of coding

적은 시간으로 공부한 것을 동기화할 수 있도록 제공되는 뮤직 비디오입니다. 전체 뮤직 비디오 보러가기

지금까지 배운 것만으로도 할 수 있는 일 

댓글 기능인 disqus, 채팅 기능인 tawk을 여러분의 웹에플리케이션에 붙이는 방법을 알아봅니다. 수업의  흐름과는 무관한 양념 같은 수업입니다. 안 보셔도 됩니다. 

소스코드

github 

댓글

댓글 본문
  1. heyri
    210609
  2. 감사합니다
  3. Jarvis
    답변 감사합니다!
    대화보기
    • 김민수
      <!DOCTYPE html>
      <html>
      <head>
      <meta charset="utf-8">
      </head>
      <body>
      <input type="button" value="white"
      onclick="alert('Hello world')"/>
      <input type="text" onfocus="this.blur();alert('focus')"/>
      </body>
      </html>

      이렇게 쓰세요.
      onfocus="this.blur();alert('focus')"의 의미는
      text박스에 포커스가 되면 발생하는 이벤트이고,
      여기서 this는 이벤트대상인 엘리먼트 자신을 의미합니다.
      따라서 해당 엘리먼트에서 포커스를 해제하고, alert 창을 띄워주는겁니다.
      대화보기
      • Jarvis
        그면 코드를 어떻게짜야되는건가요?...똑같이 했는데 왜 계속focus창이 무한반복뜨는거죠 ㅠ
        대화보기
        • 목담과
          실습 4번 이상하네요..
          https://youtu.be......153
          </nav>

          <input type="button" value="white"/>
          <input type="button" value="black"/>

          <article>
          이렇게 넣으면 영상에선 버튼두개가 왼쪽에 붙는데, 저는 오른쪽으로 붙어있네요.

          </nav>
          <div>
          <input type="button" value="white"/>
          <input type="button" value="black"/>
          </div>
          <article>
          이렇게 div 넣어주니까 왼쪽으로 붙습니다. 왜그럴까요...
        • James Hanjoo Park
          감사합니다..
          ?after : 큰 도움이 되었습니다. 수고하셨습니다.
        • coding_prince
          감사합니다.
          ?after
        • 정착유목민
          마지막 동영상은 가히 충격적이네요. 댓글을 먼저 보신분들은 지치지 마시고, 모든 영상을 보시는걸 추천 드려요.
        • 박재현
          20.12.26
        • 늦은나이가아님
          2020.12.14 감사합니다
        • 박병진
          감사합니다.
        • 10/7
        • 김민수
          경고창이 뜨고, 확인을 눌러도 텍스트박스에는 커서는 계속 깝박이니까,
          텍스트 박스에 계속 onfocus상태인겁니다. 따라서 이를 방지하려면, alert를 띄우기 전에
          텍스트 박스를 선택된 상태가 아니게 만들고, alert가 되어야 한번만 경고가 나오는 겁니다.
          대화보기
          • 물을 주는 자
            도움이 되었습니다.
            대화보기
            • 만듀
              2020.09.13
            • 허우룩
              2020.09.11
            • 물을 주는 자
              <!DOCTYPE html>
              <html>
              <head>
              <meta charset="utf-8">
              </head>
              <body>
              <input type="button" value="white"
              onclick="alert('Hello world')"/>
              <input type="text" onfocus="alert('focus')"/>
              </body>
              </html>
              에서 onfocus를 하면 focus라는 경고 메세지가 확인을 눌러도 계속 뜹니다. 뭐가 문제일까요?
              여기에 onblur="alert('blur')" 항목을 추가하니 focus라는 경고 화면에서 ok(확인)을 클릭하면 blur 경고화면이 뜨고 ok(확인)을 클릭하면 다시 focus경고화면...이런식으로 무한반복이 됩니다
            • 강민규
              2020 08 14 완료
            • 권오상
              대소문자가 이렇게 중요한줄 이제야 깨닫습니다. 조금 어려워지고 있지만 감사합니다.^^
            • eeejeenee
              css적용이 안되서 헤매다가 덕분에 해결 되었습니다. 갑사합니다`!! 이렇게 적어야지 직용되는 원리가 뭔가요??
              대화보기
              • HyeonHui Jeong
                5/14
              • 열심히사는사람
                완료 나중에 다시한번 봐야겠어요
              • 산노을
                고맙습니다!
              • 중딩
                감사합니다 ㅜㅜ 님 덕에 css 문제 고쳤네여
                대화보기
                • wibette
                  경로 설정을 못하겠어요. TT
                • th20001026
                  css 파일이 적용이 안될 때<link rel="stylesheet" type="text/css" href="style.css"> 에서 .css 뒤에 ?after을 붙이면 돼요!!! <link rel="stylesheet" type="text/css" href="style.css?after">
                • 캐나다아조씨
                  색반전 안되시는 분들은, 간단하게 크롬 실행 상태에서 ctrl+shift+R키 동시에 눌러주신후 새로고침 하셔도 됩니다ㅎㅎ 빠른 캐쉬삭제 단축키에요~
                • 조승빈
                  캐시삭제하니까 되네요 ㅎㅎㅎ
                  댓으로 알려주신분들 감사합니다.
                • 권지원
                  혹시 백그라운드 색깔이 변경이 안된다면 css 파일맨위에 <style>과 맨밑 </style>
                  이게있는지 한번확인해보세요 지우니까 바로해결되네요!
                • 아르하트
                  감사합니다^^.
                • myjin
                  완료!!
                • 잘살자
                  감사합니다. 완료
                • 웹초보
                  20191111완료

                  감사합니다
                • 프레쉬 맨얌
                  엥 buying 하라고 하네용 유니버셔 코드

                  원래 바잉 하는 건가일까용 선생님
                • ㅊㄷㅎ
                  재밌땅
                • 들국화
                  완료
                • C_K_PARK
                  여기서부터 해야 함
                • 셜리
                  감사합니다.
                • 나눔사랑
                  오오오..
                  이 댓글이 도움이 되었습니다.
                  펑션의 확인을 거의 alert 으로 하는 편이라,
                  포커스/블러 무한반복은 처음 겪어 당황스러웠는데, 이게 원인일 줄은 몰랐네요.
                  유용한 댓글 감사합니다~
                  대화보기
                  • 무요
                    잘못 입력이 된 윗글을 삭제하고 싶은데 삭제가 안되네요...
                    대화보기
                    • 무요
                      가능?
                    • 민턴쟁이
                      500 Internal Server Error 이건 제컴이 이상이 생긴건지..
                    • 크롬에서 background-color가 작동 안되시는 분들!!!!!!!!

                      안되시면 꼭 캐시 삭제를 해보시고요 그래도 안되시면 f12 눌러서 어디에서 터지고있는지 한번 보시면 될거 같습니다.
                      저는 캐시 삭제하고도 안되서 왜 안될까하고 다른 페이지를 확인하니까 색깔 변경이 잘되네요

                      그래서 비교해보니까 document.ElementById -> document.getElementById 로 수정했습니다.

                      오타가 반인거 같습니다 ^^
                    • 캐시때문에그런것 같아요
                      크롬에서 캐시삭제하니 제대로 작동하네요
                      대화보기
                      • umjaeda
                        실습 2하고 나서 응용해서 만든 것 공유합니다.

                        텍스트 박스에 em 입력 후 apply 누르면 회색 테두리,
                        ulol 입력 후 apply 누르면 노란색 테두라가 글자 목록 주변에 생깁니다.
                        기능에만 충실하다보니 정리가 안되어 보일 수도 있습니다. ㅎㅎ

                        <!DOCTYPE html>
                        <html>
                        <head>
                        <meta charset="utf-8">
                        <style>
                        li{
                        color:blue;
                        }
                        ul li{
                        font-size: 40px;
                        }
                        .em{
                        border: 20px solid gray;
                        color: gray;
                        }
                        .ulol{
                        color:black;
                        font-size: 20px;
                        border: 10px solid yellow;
                        }
                        </style>
                        </head>
                        <body>
                        <ol id="target02">
                        <li>make</li>
                        <li>cake</li>
                        <li>bike</li>
                        <li>joke</li>
                        </ol>
                        <input type="button" value="boder20" onclick="document.getElementById('target').className='ulol'">


                        <input type="text" value=" type either em or ulol" id="applytype"/>
                        <input type="button" value="apply " onclick="document.getElementById('target02').className=document.getElementById('applytype').value"/>


                        </body>
                        </html>
                      • Jinsoo Choi
                        늘 감사합니다.
                      • 소요자
                        atom에서 편집하실 때마다 매번 ctrl+v누르고 보여주시는 건가요?
                      • 이동원
                        실습1번에 나온대로 하면 onfocus랑 onblur기능 무한반복 실행됩니다.

                        **

                        <!DOCTYPE html>
                        <html>
                        <head>
                        <meta charset="utf-8">
                        </head>
                        <body>
                        <input type="button" value="white" onclick="alert('Hello world')"/>
                        <input type="text" onfocus="alert('focus')" onblur="alert('blur')"/>
                        </body>
                        </html>
                      • jsm5272
                        실습 4번에 대해서 질문이있어서 댓글 남깁니다.
                        다름이 아니라 page_vc.html 파일에서 <div id="control"> ... </div> 로 저장하고
                        css파일을 열어서 #control { float: right; } 이렇게 변경 후에 저장을 했는데 크롬상에서 새로고침을해봐도
                        white black 이 오른쪽으로 이동하지 않습니다.
                        그래서 페이지 상에서 페이지 소스보기를 통해서 확인을 해보니 css파일을 변경한게 적용이 되있지 않더라구요.
                        왜그런지좀 알수있을까요?? 정상적으로 다 수정한 후에 저장을 했는데도 크롬상에서는 적용이 안되서
                        변경되지 않고 일반 마이크로소프트 주소창에 localhost/page_vc.html을 치면 text가 오른쪽으로 이동이 되있네요

                        크롬이랑 마이크로소프트랑 왜 크롬은 적용이 안되고 마이크로소프트는 적용이되는지 좀 알고 싶습니다.
                      버전 관리
                      egoing
                      현재 버전
                      선택 버전
                      graphittie 자세히 보기