web입문(3)

18034 단어 HTML자바스크립트jQueryCSS입문

소개



자바스크립트는 웹 사이트에서 HTML과 CSS로 표현할 수 없는 기능을 구현하는 언어입니다.
글쎄, js는 약어. Java라는 언어와 이름은 비슷하지만 전혀 다르므로 조심하십시오. 또한 jQuery는 JavaScript를 더 다루기 쉽도록 한 프레임 워크입니다.

폴더 구성



데스크탑에 js-prac라는 폴더를 만들고 그 안에서 index.html과 main.js를 만든다.
/Users/(ユーザー名)/Desktop/js-prac
                            |-index.html (表示用)
                            |-main.js (機能面)

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1>Hello World</h1>
  </body>
</html>

JavaScript(jQuery) 사용



HTML에 직접 JavaScript를 작성하는 방법도 있지만, 이번에는 다른 파일로 나누어 읽는 방법을 채택합니다.
또한 jQuery를 사용하는 방법은 다운로드하는 방법과 CDN을 사용하는 방법이 있지만 이번에는 CDN을 사용하는 방법을 채택합니다.
CDN(Content Delivery Network)이란 간단하게 말하면 부하를 어깨 대신해 주는 렌탈 서버와 같은 것입니다. 아래 그림과 같이 일부 부하를 어깨 대신 받는 덕분에 자신의 서버 부하가 내려 안정적으로 서비스를 제공할 수 있게 됩니다.


이제 index.html을 다음과 같이 수정합니다.

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1>Hello World</h1>

    <!-- CDNの読み込み -->
    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    ></script>
    <!-- main.jsの読み込み -->
    <script src="./main.js"></script>
  </body>
</html>

이것으로 jQuery를 사용할 준비가 끝납니다. 이제 jQuery를 사용해 보겠습니다.

우선, index.html의 h1에 id 속성을 붙입니다.

index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <!-- idを追加する -->
    <h1 id="hello">Hello World</h1>

    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    ></script>
    <script src="./main.js"></script>
  </body>
</html>

그런 다음 main.js를 편집합니다.

main.js
$(function() {
  $("#hello").click(function() {
    $(this).text("こんにちは、世界");
  });
});
$("#hello") 에서 html로 지정한 id를 가져오고 click() 로 클릭했을 때 어떻게 할지, function() {$(this).text("こんにちは、世界");} 흐름입니다.

크롬에서 열어 확인해 봅시다. Hello World를 클릭하면 안녕하세요 세계가 표시되는지 확인할 수 있습니다.

대략적으로 설명하면 다음과 같은 형태가 됩니다. 위의 예에서는, id를 취득하고 있었습니다만, class, 태그(a, h2 등)도 css와 같이 취득하는 것이 가능합니다.
$("#idの名前").jQueryのイベント(function() {
  // メソッド
});

$(".classの名前").jQueryのイベント(function() {
  // メソッド
});

$("htmlのタグの名前").jQueryのイベント(function() {
  // メソッド
});

그러면 자주 사용하는 패턴을 정리해 둡니다.

1. 클릭하면 페이드 아웃



main.js
$(function() {
  $("#hello").click(function() {
    $(this).fadeOut();
  });
});

2. 호버하면 색이 바뀐다



main.js
$(function() {
  $("#hello").hover(function() {
    $(this).css("color", "red");
  });
});

3. 호버하면 색이 바뀌고 놓으면 색이 되돌아갑니다.



main.js
$(function() {
  $("#hello").on({
        'mouseenter' : function(){
            $(this).css("color", "red")
        },
        'mouseleave' : function(){
            $(this).css("color", "#000")
        }
    });
});

4. 버튼을 누르면 숫자가 더해진다



index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1 id="hello">Hello World</h1>

    <!-- 以下を追加 -->
    <input id="txt" type="text" value="0" readonly />
    <input id="btn" type="button" value="add!" />

    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    ></script>
    <script src="./main.js"></script>
  </body>
</html>

main.js
$(function() {
  $("#hello").click(function() {
    $(this).text("こんにちは、世界");
  });

  $("#btn").click(function() {
    let value = $("#txt").val(); // id="txt"のvalue属性を取得して、変数valueに代入
    value = parseInt(value); // 変数valueの型をstring型->int型にキャスト
    $("#txt").val(value + 1); // id="txt"のvalue属性にvalue+1を入れる
  });
});

5. 드롭다운 메뉴 구현



index.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>JavaScriptの練習</title>
  </head>

  <body>
    <h1 id="hello">Hello World</h1>

    <!-- 以下を追加 -->
    <input id="btn" type="button" value="表示する" />
    <div
      id="menu"
      style="background-color: #ddd; height: 200px; padding-top: 20px; display: none"
    >
      <p>ドロップダウンメニューです。</p>
    </div>

    <script
      type="text/javascript"
      src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
    ></script>
    <script src="./main.js"></script>
  </body>
</html>

main.js
$(function() {
  $("#hello").click(function() {
    $(this).text("こんにちは、世界");
  });

  $("#btn").click(function() {
    if ($(this).val() == "表示する") {
      $(this).val("非表示にする");
      $("#menu").slideDown(1000); // 引数に秒数指定（単位：ミリ秒）
    } else {
      $(this).val("表示する");
      $("#menu").slideUp(1000);
    }
  });
});
Vue Storefront 2에 커스텀 API 메서드를 추가하는 방법
Linux Azure VM에서 cloud-init를 사용하여 Rust 도구 체인 관리 설치

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage