[js] js의 틀을 익혀보자

밥슌·2024년 8월 3일
0

☕❌js

목록 보기
2/15
post-thumbnail

어디까지나 보드 되는 순서는 html->css->js이다.

<head>
<title>...</title>
<link>css</link>
...</head>

<body>
<script>js 외부 라이브러리</script>
<script>내가 코드할 js</script>
...</body>

이를 bootstrap 예시로 보이자면 이렇게 된다.

```<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap Example</title>
    <!-- Bootstrap CSS -->
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container">
        <h1 class="text-center">Hello, Bootstrap!</h1>
        <button class="btn btn-primary">Click me</button>
    </div>
    <!-- Bootstrap JS and dependencies -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

HTML에서 <script> 태그는 JavaScript 코드를 HTML 문서에 포함하거나 외부 JavaScript 파일을 불러오는 데 사용됩니다. <script> 태그는 웹 페이지에 동적 기능을 추가하고, 사용자와의 상호작용을 가능하게 합니다. 주로 다음과 같은 역할을 합니다:

  1. JavaScript 코드 포함:

    • HTML 문서 내에 직접 JavaScript 코드를 작성할 수 있습니다.
    <script>
    console.log("Hello, world!");
</script>

  2. 외부 JavaScript 파일 포함:

    • src 속성을 사용하여 외부 JavaScript 파일을 불러올 수 있습니다.
    <script src="path/to/your/script.js"></script>

  3. DOM 조작:

    • JavaScript를 사용하여 문서 객체 모델(DOM)을 조작할 수 있습니다. 이를 통해 HTML 요소를 동적으로 추가, 삭제 또는 수정할 수 있습니다.
    <script>
    document.getElementById("myElement").innerHTML = "New content";
</script>

  4. 이벤트 핸들링:

    • 사용자와의 상호작용을 처리할 수 있습니다. 예를 들어, 버튼 클릭, 마우스 이동, 키보드 입력 등의 이벤트를 처리할 수 있습니다.
    <script>
    document.getElementById("myButton").addEventListener("click", function() {
        alert("Button clicked!");
    });
</script>

  5. 비동기 작업:

    • Ajax(Asynchronous JavaScript and XML) 요청을 통해 서버와 비동기적으로 데이터를 주고받을 수 있습니다. 이를 통해 페이지 새로고침 없이 데이터를 갱신할 수 있습니다.
    <script>
    fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => console.log(data));
</script>

  6. 로딩 순서 제어:

    • defer와 async 속성을 사용하여 스크립트 로딩 순서를 제어할 수 있습니다. defer는 HTML 파싱이 끝난 후 스크립트를 실행하고, async는 스크립트 로딩이 끝나는 대로 즉시 실행합니다.
    <script src="script.js" defer></script>
<script src="script.js" async></script>

예제

HTML 문서에 <script> 태그를 사용하는 간단한 예제는 다음과 같습니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Script Example</title>
</head>
<body>
    <h1 id="title">Hello, world!</h1>
    <button id="changeTitleButton">Change Title</button>

    <script>
        document.getElementById("changeTitleButton").addEventListener("click", function() {
            document.getElementById("title").innerHTML = "Title Changed!";
        });
    </script>
</body>
</html>

위 예제에서는 버튼을 클릭하면 <h1> 요소의 텍스트가 변경됩니다. 이는 <script> 태그 내의 JavaScript 코드로 인해 가능합니다.

+)script를 head안에 넣어서 구동시킬 수도 있지만 브라우저가 위에서 부터 읽어가기때문에 script가 길면 길수록, 이를 사용하는 사용자 입장에선 느리게 보일 수 있다.
-> script가 head에 있던 body에 있던 뭔 상관?
=> head에 script가 없고, body에 있다면 브라우저가 먼저 html을 다 읽고 나서(어디까지나 html은 코드의 뼈대이다.) script를 읽으므로 사용자 입장에선 보다 빠르게 느낄 수 있음.

<div> 태그는 HTML에서 문서의 구획을 나누기 위해 사용됩니다. 주로 CSS와 함께 사용되어 웹 페이지의 레이아웃을 구성하거나 스타일을 적용하는 데 도움이 됩니다.

주된 용도는 다음과 같습니다:

  1. 레이아웃 구성: 웹 페이지의 구조를 나누고 구획을 설정하는 데 유용합니다. 예를 들어, 헤더, 본문, 사이드바, 푸터 등을 나누기 위해 사용됩니다.

  2. 스타일 적용: CSS와 함께 사용하여 특정 구역에 스타일을 적용할 수 있습니다. 이를 통해 배경색, 여백, 테두리 등을 설정할 수 있습니다.

  3. 스크립트와 상호작용: JavaScript와 함께 사용되어 동적인 상호작용을 구현할 때 유용합니다. 예를 들어, 특정 영역의 콘텐츠를 동적으로 변경하거나 조작할 수 있습니다.

예를 들어, 다음과 같은 HTML 코드가 있을 때:

<div class="header">
  <h1>사이트 제목</h1>
</div>
<div class="main-content">
  <p>여기에 본문 내용이 들어갑니다.</p>
</div>
<div class="footer">
  <p>푸터 내용</p>
</div>

여기서 <div> 태그는 각 구획을 정의하고, CSS를 사용하여 각 구획에 스타일을 적용할 수 있도록 합니다.

<div> 태그는 기본적으로 아무 스타일도 적용하지 않는 컨테이너 역할만 하며, 스타일과 레이아웃을 설정하려면 CSS와 함께 사용해야 합니다.

문서 객체 모델(DOM, Document Object Model)은 HTML, XML 문서의 구조화된 표현을 제공하는 프로그래밍 인터페이스입니다.
DOM 트리는 브라우저가 HTML 문서를 파싱하여 자동으로 생성하는 구조입니다. DOM은 문서의 각 요소를 객체로 표현하고, 이를 조작할 수 있는 방법을 제공합니다. 이를 통해 JavaScript 같은 스크립팅 언어를 사용하여 웹 페이지의 내용을 동적으로 변경하고 상호작용할 수 있습니다.

DOM의 구조

DOM은 트리 구조로 문서를 모델링합니다. 트리의 각 노드는 문서의 부분을 나타냅니다. 이 트리는 부모-자식 관계를 통해 요소를 조직화합니다. 예를 들어, HTML 문서의 DOM 트리는 다음과 같이 구성될 수 있습니다:

<!DOCTYPE html>
<html>
  <head>
    <title>Document</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

위 HTML 문서의 DOM 트리는 다음과 같은 구조를 가집니다:

Document
  └── html
      ├── head
      │   └── title
      │       └── "Document"
      └── body
          ├── h1
          │   └── "Hello, world!"
          └── p
              └── "This is a paragraph."

주요 DOM 객체

DOM을 구성하는 주요 객체는 다음과 같습니다:

  • Document: 문서 자체를 나타내며, DOM 트리의 루트입니다. document 객체로 접근할 수 있습니다.
  • Element: HTML 요소를 나타냅니다. document.getElementById(), document.querySelector(), document.getElementsByClassName() 등의 메서드로 특정 요소에 접근할 수 있습니다.
  • Node: 트리 구조의 기본 단위로, 모든 요소와 텍스트는 노드입니다.
  • Text: HTML 요소 내의 텍스트를 나타냅니다.
  • Attribute: 요소의 속성을 나타냅니다.

DOM 조작

DOM을 조작하여 문서의 내용을 동적으로 변경할 수 있습니다. JavaScript를 사용하여 DOM을 조작하는 방법은 다음과 같습니다:

  1. 요소 선택:

    var element = document.getElementById("myElement");
var elements = document.getElementsByClassName("myClass");
var element = document.querySelector("div > p.myClass");

  2. 내용 변경:

    element.innerHTML = "New content";
element.textContent = "New text content";

  3. 스타일 변경:

    element.style.color = "red";
element.style.fontSize = "20px";

  4. 속성 변경:

    element.setAttribute("class", "newClass");
var attr = element.getAttribute("class");

  5. 이벤트 핸들링:

    element.addEventListener("click", function() {
    alert("Element clicked!");
});

  6. 요소 생성 및 추가:

    var newElement = document.createElement("div");
newElement.innerHTML = "Hello, new element!";
document.body.appendChild(newElement);

예제

다음은 DOM을 조작하여 버튼을 클릭했을 때 <h1> 요소의 텍스트를 변경하는 예제입니다:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Example</title>
</head>
<body>
    <h1 id="title">Hello, world!</h1>
    <button id="changeTitleButton">Change Title</button>

    <script>
        document.getElementById("changeTitleButton").addEventListener("click", function() {
            document.getElementById("title").innerHTML = "Title Changed!";
        });
    </script>
</body>
</html>

위 예제에서는 버튼을 클릭하면 JavaScript가 실행되어 <h1> 요소의 텍스트를 "Title Changed!"로 변경합니다. 이는 DOM 조작을 통해 가능합니다.

jQuery는 웹 페이지에서 특정 작업을 더 쉽게 하고 싶을 때 사용하는 도구입니다. 예를 들어, 웹 페이지를 꾸미고, 사용자가 버튼을 클릭했을 때 특별한 반응을 보여주거나, 페이지의 내용을 바꾸는 작업을 쉽게 도와줍니다.

초등학생 수준으로 jQuery 설명하기

상상해보세요, 웹 페이지는 큰 그림책 같아요. 그 그림책에서 jQuery는 마법의 연필과 같아요. 이 연필로 다음과 같은 일을 할 수 있어요:

  1. 글자 바꾸기: 그림책에서 "안녕하세요"라는 글자를 "안녕하세요! 반가워요!"로 바꾸고 싶다면, jQuery는 쉽게 해줄 수 있어요.

    $("#myElement").text("안녕하세요! 반가워요!");

    여기서 #myElement는 웹 페이지의 특정 부분을 가리키는 이름이에요. 이 부분의 글자를 바꿔줄 수 있는 거죠.

  2. 버튼 클릭하기: 버튼을 클릭했을 때 무언가를 보여주고 싶다면, jQuery가 도와줘요. 예를 들어, "클릭하면 팝업이 뜨게 하고 싶다"고 하면, jQuery는 그렇게 할 수 있어요.

    $("#myButton").click(function() {
    alert("버튼을 클릭했어요!");
});

    여기서 #myButton은 클릭할 버튼의 이름이에요. 버튼을 클릭하면 "버튼을 클릭했어요!"라는 알림이 뜨게 할 수 있어요.

  3. 페이지의 내용 바꾸기: 웹 페이지의 내용을 바꿀 때 jQuery가 도움이 돼요. 예를 들어, 페이지에 새 그림을 추가하거나 숨겨진 내용을 보이게 할 수 있어요.

    $("#myImage").attr("src", "newImage.jpg");

    여기서 #myImage는 이미지를 가리키는 이름이고, newImage.jpg는 새로운 그림 파일이에요. 그래서 페이지에 새로운 그림을 보여줄 수 있어요.

예시로 이해하기

  • 버튼 클릭으로 글자 바꾸기: 웹 페이지에 "변경"이라는 버튼이 있고, 버튼을 클릭하면 "안녕하세요"라는 문장이 "안녕하세요, 친구들!"로 바뀌는 것처럼 할 수 있어요.
  • 슬라이드 효과: 웹 페이지에서 어떤 내용을 숨기고 있다가, 버튼을 클릭하면 그 내용이 슬쩍 드러나는 애니메이션을 추가할 수 있어요.

jQuery는 이런 작업을 쉽게 할 수 있게 도와주는 도구예요. 마치 마법의 연필처럼 웹 페이지를 재미있고, 쉽게 만들 수 있게 해주죠!

<js와 jQuery의 차이점>
jQuery와 JavaScript는 웹 페이지를 조작하는 데 사용되는 도구들이지만, 서로 다른 역할과 특징이 있습니다.

JavaScript

  • 기본 언어: JavaScript는 웹 페이지의 동작을 제어하는 기본 프로그래밍 언어입니다. 웹 브라우저에서 실행되며, HTML과 CSS를 조작하고, 이벤트를 처리하며, 다양한 동작을 수행할 수 있습니다.

  • 문법: JavaScript는 기본적인 문법을 사용하여 직접 코드를 작성해야 합니다. 예를 들어, 버튼을 클릭했을 때 메시지를 표시하려면, JavaScript를 사용하여 직접 이벤트를 설정하고 처리해야 합니다.

    document.getElementById("myButton").addEventListener("click", function() {
    alert("버튼이 클릭되었습니다!");
});

jQuery

  • 라이브러리: jQuery는 JavaScript로 작성된 라이브러리입니다. 즉, 이미 만들어진 많은 유용한 기능들을 담고 있는 도구 모음입니다. jQuery는 JavaScript로 할 수 있는 일을 더 쉽고 간편하게 할 수 있도록 도와줍니다.

  • 간편함: jQuery는 문법을 간단하게 만들어줍니다. 복잡한 JavaScript 코드 대신 간단한 jQuery 코드로 동일한 작업을 수행할 수 있습니다. 예를 들어, 버튼을 클릭했을 때 메시지를 표시하는 코드가 훨씬 짧고 간단해집니다.

    $("#myButton").click(function() {
    alert("버튼이 클릭되었습니다!");
});

  • 호환성: jQuery는 다양한 웹 브라우저에서 일관되게 작동하도록 설계되었습니다. 브라우저 간의 차이점을 자동으로 처리하여 개발자가 걱정하지 않도록 도와줍니다.

  • 추가 기능: jQuery는 애니메이션, AJAX 요청, DOM 탐색 등 다양한 기능을 쉽게 사용할 수 있는 메서드를 제공합니다. 예를 들어, 슬라이드 다운 애니메이션을 jQuery로 간단히 구현할 수 있습니다.

    $("#myElement").slideDown();

요약

  • JavaScript: 기본적인 웹 페이지 조작 언어, 직접 코드를 작성해야 함.
  • jQuery: JavaScript로 만들어진 라이브러리, 웹 페이지 조작을 더 쉽고 간편하게 해줌.

결국, jQuery는 JavaScript를 더 쉽게 사용할 수 있도록 도와주는 도구입니다. JavaScript는 기본적인 기능을 제공하며, jQuery는 그 기능을 더 쉽게 사용할 수 있는 방법을 제공합니다.

+) 한눈에 js랑 jQuery 비교 하기

function regist(){
	//1
    alert(document.getElementById("name").value);
    //2
    alert($("#name").val());
}

1번이랑 2번 코드는 같은거다

profile
밥슌
마트 시식코너같은 저의 벨로그에 어서오세요.
이전 포스트

인터랙티브 자바스크립트

다음 포스트

[js] 순수하게 궁금해서 모음집.ver

0개의 댓글