웹 애플리케이션 만들기

자바스크립트 실습

 실습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. minjoon0514@gmail.com
    저도 처음에 css가 적용이 안되서 멘붕이 왔었습니다...
    하지만 다른 계정을 사용해 보거나 캐시를 무시하고 페이지를 새로고침 해보았더니 (윈도우의 경우 ctrl+F5, 맥의 경우 shift+cmd+r) css가 적용이 됐습니다.
    참고로 <link rel="stylesheet" type="text/css" href="http://localhost/style.css">을
    <link rel="stylesheet" type="text/css" href="http://localhost/style.css?ver=1">으로 바꿔도 된다고 하시네요.^^
  2. GoldPenguin
    완료했습니다.
  3. bm.hmbl@gmail.com
    감사합니다.
  4. Baekkyu Han
    자바스크립트 실습
    JS 웹 어플 만들기
    White Black 단추
    실습1~5
    CSS HTML JS 각각의 역할
    CSS style
    HTML 정보
    JS 제어
  5. 박예지
    감사합니다!!!
  6. Molang
    ㅠㅠ 버튼 다 했는데 색이 안변해요
    코드 틀린거 없는데 왜 변하지 않죠? 캐시지우는건 어떻게 하나요 그건 css?ver1로해서 실헹되는데...
    그리고 주석처리하는데 될 때가 있고 안 될때가 있는데 저만 그런가요...?
  7. 가영
    black 으로 바꾼 상태에서 다른 페이지로 이동하면 다시 white로 바뀌는데 default값이 white라서 뜨는건가요??
    그러면 black으로 바꾼 페이지에서 다른 페이지로 넘어갔을 때도 black을 유지하는 건 어떻게하면 되나요??
  8. 가영
    완료!
  9. 완료 ^^
  10. Elena
    고맙습니다. 캐쉬 지우니 되네요. ^__^
    대화보기
    • GoldenBough
      감사합니다.
    • shonny
      감사합니다.
    • 현지
      page.vc.html 파일을 열고 localhost페이지에 들어가니까 큰제목(?)인 Javascript가 안보이네요...어찌 된건지...
      코드 다 비교해봐도 똑같이 했는데...나오게 하려면 어떤 방법이 있을까요...?
    • 박해민
      기존에 css수업할 때 chrome 기술자 도구에서 디자인을 이리 저리 바꾸고 저장되 있어서 그런지 이번 수업을 따라하면 계속 변화없는 화면이 보여지네요.
      safari에서 실행하면 문제 없는데 크롬에서만요.
      이거 reset 할 수 있는 방법이 있을까요?
    • FirstSubject
      감사합니다
      대화보기
      • 김범진
        좋네요 완료
      • Seul_Lee
        마지막 활용부분에서요 저는 지금 mac에서 chrome이랑 codeanywhere를 쓰고있는데요, disqus를 넣어보니까 안보이길래 inspect에 들어가서 console에 보니까 "Failed to load resource: net::ERR_BLOCKED_BY_CLIENT"라고 뜨는데 요건 무슨 뜻인가요?
      • Myeongjin Ko
        완료
      • ㄱㅁ
        크롬에서는 캐쉬안에 기존 css를 읽어서 변경된 css가 적용이 안되는데
        캐쉬를 비워주면 변경된 css가 적용된다.
      • markerss2
        완료!
      • 정재욱
        ok
      • ㅁㅁ
        css적용이 안되시면 ctrl+F5를 누르셔서 캐시를 지우고 다시 새로고침하는 기능을 사용해보세요
      • Kim SeungChan
        css 적용이 안되어서 뭘 실수했지,.. 저번에 크롬에 'css'라는 extension을 설치해서 이것저것 바꿔놨더니 오류가 발생했나 싶어서 internet explorer로 실행해보니 그대로 작동하더라구요.
        나중에 아래댓글 보고 ?ver=1 입력하니깐, 크롬에서도 이상없이 작동하네요.(explorer로도 작동) 이유가 궁금하네요..
      • 조용히나와
        저도 css적용이 안되서 어리둥절했는데
        왜 ver=1을 써야 하는거죠?
        대화보기
        • Five Senses
          기본부터 시작하자
        • 인재진
          수강완료^^
          수고하세요
        • 실습 sound cording 에서 5분34초에 body.black에 배경색과 글씨색 지정되어있는데 왜 body.black a 만드는지 아시는분있나요? 이거는 어떨때 만드는건가요???
          >> a 태그는 색상을 직접 지정해 주지 않으면 안되니까요~~ ^^; 색상을 부모 태그로부터 상속을 못받더라구요.
          대화보기
          • 시바견
            자바 맛보기!
          • 코딩학습생
            강의 잘 들었습니다.
          • 이경수
            재밌지만 어렵네요.ㅎㅎㅎ
            완료했습니다.
          • 희락
            재밌네요ㅎㅎㅎ 감사합니다 !
          • 김태윤
            어렵네요 ㅠㅠ 몇 번 반복해서 들어봐야 될 것 같습니다. 감사합니다 :)
          • 김선종
            실습 5를 보고 궁금한건데요.
            JS에 관련된 내용은 .js파일을 만들어서 일괄적으로 처리함은 알겠습니다.

            그렇다면 각 페이지에 있는 white, black 버튼들은 이와 비슷한 방식으로 한개의 파일에서 일괄적으로 처리하는 방법은 없는건가요?
          • 한종운
            실습 최종 목표 : button 으로 배경색 바꾸기

            실습1 : event programming
            onclick/onfocus/onblur="Java script code"

            실습2 : 사용자가 text box에 text를 치고 button누르면, message box 나타내기

            리스트 두개의 tag만 class를 만들어
            text style 바꾸기

            [강조]button을 누르면,
            특정 리스트가 강조 문자로 변경

            실습3:
            리스트 두개의 tag만 class를 만들어
            text style 바꾸기

            Java script 는 HTML을 제어.
            HTML 본문을 직접 수정 제어 가능.

            실습4
            white black 버튼에 따라
            background-color 바꾸기

            <div> tag
            하위 tag를 단순히 묶는 역할.
            style을 묶어 지정하기에 유용.

            실습5(추가) 참고용
            HTML과 Java script 분리하기
            HTML내에Java script가 직접 들어가 있는것은
            HTML문서의 정보로써의 가치를 떨어뜨린다.

            <script>로 빼내고,
            별도의 java script 파일
            script.js로 만들어,
            모든 HTML 문서에 적용하기.


            지금까지 배운 것만으로도 할 수 있는 일
            댓글 기능: DISQUS 설치
            댓글 써비스 & e-mail송부 & 답글 달기

            채팅 기능: tawk 설치

            코딩은 상대를 위한 써비스다.
          • 호박고구마
            감사합니다!
            대화보기
            • 김코코
              class는 어떤 태그들을 하나의 이름으로 묶어서 사용할 수 있어요.
              id는 어떤 한 태그에 이름을 붙이는거에요!
              대화보기
              • 김코코
                body.black 의 a 를 가리키는거같아용 <a src= > </a> 이 코드요!
                결론적으루 <body>의 black(id 또는 className가 black인것을 지칭)의 <a> 를 가리키는것 같네용
                대화보기
                • 임영선
                  css 변경사항이 적용되지 않아서 저도 어리둥절 했었는데요 아래 해결사항을 적어놓으신 분이 있어서 다행히도 잘 끝냈어요!
                  혹시 css파일 내용변경에도 아무런 변화가 없다면
                  <link rel="stylesheet" type="text/css" href="http://localhost/style.css">을
                  <link rel="stylesheet" type="text/css" href="http://localhost/style.css?ver=1">로 바꿔보세요!

                  그리고 강의 잘들었습니다!
                  이벤트리스너는 너무 어려워보이지만 너무나도 긴 input을 짧게하고 싶은 욕망이 솟아나네요. 앞으로 익숙해져봐야겠습니다.
                • 손태민
                • 알로하
                  유니버셜 코드 안보이시는 분들은 I want to install Diqus on my site누르시고 creat 하신다음에 마우스휠로 맨아래로 내리시면 (I don't see my platform listed, install manually with Universal Code) 라는 문구있어요 클릭하시면 소스코드가 나옵니다~
                • publicum
                  body.black a {
                  color: white;
                  }

                  → black이라는 class를 가진 body 태그 속 a 태그 안쪽에서는 텍스트를 하얀색으로 표시하라는 구문입니다.

                  링크에 기본적으로 적용되는 파란색이 흑백화면에서는 잘 보이지 않아서
                  그 경우에만 하얀색으로 링크를 표시해 주려고 적용한거에요.
                  대화보기
                  • 푸른바람9101
                    열심히....
                  • charl
                    완료!
                  • emessell
                    저도 안돼서 찾아봤습니다. 이럴 땐 페이지 소스를 검사하면서 했는데요.
                    CSS파일이 아주 예전꺼에서 바뀌질 않더라구요.
                    그래서 어떻게 계속 업데이트를 해줄까 찾아보니까 css링크 뒤에 버젼을 붙여주니까 계속 새로운 css파일을 찾습니다.
                    따라서 각 페이지에서 css를 불러오는 줄에
                    <link rel="stylesheet" type="text/css" href="http://localhost/style.css?ver=1">
                    라고 "?ver=1"라고 써주시면 됩니다.
                    버전 숫자는 상관없다고 하네요.
                    대화보기
                    • emessell
                      저도 안돼서 찾아봤습니다. 이럴 땐 페이지 소스를 검사하면서 했는데요.
                      CSS파일이 아주 예전꺼에서 바뀌질 않더라구요.
                      그래서 어떻게 계속 업데이트를 해줄까 찾아보니까 css링크 뒤에 버젼을 붙여주니까 계속 새로운 css파일을 찾습니다.
                      따라서 각 페이지에서 css를 불러오는 줄에
                      <link rel="stylesheet" type="text/css" href="http://localhost/style.css?ver=1">
                      라고 "?ver=1"라고 써주시면 됩니다.
                      버전 숫자는 상관없다고 하네요.
                      대화보기
                      • 뚜답답
                        흠 class와 id에 대해서 어디부분에서 설명이 나오는지 알수있을까요? 놓친것같은데 ㅠ
                      • powhyckf
                        잘 봤습니다! 활용 부분이 특히 저는 재미있네요~
                      • 이용성
                        강의완료!
                      • Jung Ik
                        음... 제가 보기에는 아마 크롬 브라우저에서 전에 쿠키들이 남아서 그럴듯하네요. 쿠키들을 지우고 시작해보세요.
                        대화보기
                        • 시노
                          캐시를 지우고 다시 로드 해보니까 되네요 감사합니다!
                          대화보기
                          버전 관리
                          egoing
                          현재 버전
                          선택 버전
                          graphittie 자세히 보기