ABOUT ME

    -

    Today
    -
    Yesterday
    -
    Total
    -
    • JS 편 - 1일차
      개발 공부/생활코딩! HTML+CSS+JavaScript 2025. 5. 9. 09:00
      반응형



       

      1일차

       

       

       

      01. 수업 소개

      • WEB2 자바스크립트(JavaScript) 수업은 HTML과 인터넷에 의존하는 수업이다.
      • 만약 HTML을 모른다면 이 포스팅을 보기 전에 아래의 링크로 HTML 포스팅을 먼저 보고 올 것을 추천한다.
      • https://impnem.tistory.com/11?category=1065258 
       

      HTML 편 - 1일차

      1일차 01. 수업 소개 코딩, 웹, 인터넷, 컴퓨터라는 거대한 주제에 대한 탐험을 시작하기에 앞서 상상력이 필요하다. 다른 사람의 문제를 통해 코딩을 배우려는 학생이 아니라 나의 문제를 코딩으

      impnem.tistory.com

       

      • 웹이 처음 세상에 등장했을 때는 HTML이라는 단 하나의 기술만이 존재했다.
      • 그래서 인류는 HTML을 통해 정보를 표현하고 주고받을 수 있게 되었다.
      • HTML은 정적이다. 한번 화면에 출력되면 언제나 그 모습 그대로이다.
      • 사람들은 웹 페이지도 게임처럼 동적으로 사용자와 상호작용할 수 있게 되기를 원했다. 그래서 태어난 기술이 자바스크립트(JavaScript)이다.

       

       

       

      02. 수업의 목적

      • 이 수업의 최종적인 목표를 알아보자.
      • 웹 사이트를 보면 눈이 부시다. 그래서 night라는 버튼을 클릭했을 때 웹 페이지가 어둡게, day라는 버튼을 누르면 다시 원래 상태로 돌아오게끔 하고 싶다.
      • 즉, 야간 모드와 주간 모드를 버튼을 통해 바꾸는 기능을 만드는 것이 목표이다.
      • 웹 페이지는 한 번 화면에 출력되면 자기 자신을 바꾸는 능력이 없다. 그것을 가능하게 해주는 것이 자바스크립트이다.
      • 웹 페이지에서 마우스 오른쪽 클릭 후 검사 또는 F12를 눌러나오는 개발자모드에서 elements로 자바스크립트의 동작을 확인할 수 있다. 엘리먼트(elements)는 태그라는 뜻이다.

       

      • 정리해보자.
        • 첫 번째, 자바스크립트는 사용자와 상호작용하는 언어이다.
        • 두 번째, HTML은 화면에 한 번 출력되면 자기자신을 바꿀 수 없다. 하지만 자바스크립트를 이용해 자바스크립트 코드에 따라 태그의 style속성(CSS용어이다, 만약 CSS를 배우지 않았다면 아래 포스팅에서 배우길 추천한다.)이 추가되어 이를 통해 디자인을 바꿀 수 있다.
        • 자바스크립트는 HTML을 제어하는 언어이다. 위와 같은 특성이 웹 페이지를 훨씬 더 동적으로 바꿔준다.
        • https://impnem.tistory.com/16?category=1065258
       

      CSS 편 - 1일차

      1일차 01. 수업 소개 이 수업은 앞의 'HTML과 인터넷 수업'에 의존하는 수업이다. HTML이 무엇인지 모른다면 아래의 링크로 공부한 후에 수업을 진행하는 것을 권장한다. https://impnem.tistory.com/11 HTML

      impnem.tistory.com

       

       

       

       

       

       

      03. HTML과 JS의 만남: <script> 태그

      • 기본적으로 자바스크립트는 HTML 위에서 동작하는 언어이다.
      • HTML이라는 컴퓨터 언어에 완전히 다른 문법을 가진 자바스크립트 코드를 어떻게 넣을 수 있을까?
      • 자바스크립트 코드를 넣을 때는 HTML에 자바스크립트 코드가 시작된다는 사실을 알려야 한다.
      • 그때 사용하는 태그가 <script>라는 태그이다.
      • 아래 코드를 보자.
      <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>JavaScript</h1>
        <script>
            document.write('hello world');
            document.write('<br>');
            document.write(1+1);
        </script>
        <h1>html</h1>
        hello world
        <br>
        1+1
    </body>
</html>
      • 그리고 아래는 위 코드에 대한 웹 페이지이다.

      • 자바스크립트와 HTML에서의 출력을 비교하였다.
      • 'hello world'라고 쓰는 것에는 차이가 보이지 않을지도 모르지만, 1+1을 써보면 차이는 확연하다.
      • HTML에서 '1+1'은 영원히 '1+1'이지만, 자바스크립트에서의 '1+1'은 숫자 1과 숫자 1을 더한 2를 출력하는 능력이 있다.
      • 이처럼 HTML은 정적이고, 자바스크립트는 동적이다.
      • 이번 수업에서는 자바스크립트 코드를 웹 브라우저에게 알려주기 위해 <script> 태그를 쓴다는 것을 기억하면 된다.

       

       

       

       

       

       

      04. HTML과 JS의 만남: 이벤트

      • 이벤트는 자바스크립트가 사용자와 상호작용하는 데 핵심적인 역할을 한다.
      • 먼저 버튼을 만들어보자.
      • 이때 사용하는 태그는 <input>태그이다. <input> 태그의 type을 'button'으로 지정하면 버튼 모양이 된다. 그리고 버튼에 글자를 넣고 싶으면 value라는 속성을 이용하면 된다.
      • 궁극적으로는 버튼을 클릭했을 때 경고창이 나타나게 하는 것이다.
      • 아래 코드를 보자.
      <input type="button" value="hi" onclick="alert('hi')">
      • <input> 태그에 onclick이라는 속성을 썼는데, 이 속성은 아주 특별한 속성이다.
      • HTML 설명서에는 "onclick 속성 값으로는 반드시 자바스크립트 코드가 와야 한다"라고 적혀있고, 그 다음에는 "onclick 속성의 값은 웹 브라우저가 기억해 뒀다가, onclick 속성이 위치하고 있는 태그를 사용자가 클릭했을 때 자바스크립트 코드를 자바스크립트 문법에 따라 해석해서 웹 브라우저가 실행할 것이다."라고 되어있다.
      • 이처럼 웹 브라우저 위에서 일어나는 일들을 사건, 영어로는 이벤트(event)라고 한다.
      • 어떤 이벤트가 일어났을 때 어떠한 자바스크립트 코드를 실행하게 하는 것이 onclick이라는 것이다.
      • alert는 말그대로 경고창이며, 버튼을 클릭하게 되면, 경고창이 뜨게 된다.

       

      • 모든 이벤트를 생각해 본다면 많은 이벤트가 존재하지만 그중 대표적인 이벤트를 정해놓았다.
      • 예로 <input type="text">라고 지정하면 글자를 입력할 수 있고, 이때 글자를 입력하면 내용이 변화하는데, 이러한 내용이 변했을 때를 체크하는 이벤트도 있다. 이 속성이 onchange라는 속성이다.
      <input type="text" onchange="alert('changed')">
      • 만약 'ABC'를 입력하고, 마우스 커서를 바깥쪽으로 빼서 클릭하면 웹 브라우저가 onchange 이벤트를 실행한다. 그리고 아무거나 쓴다음 다시 'ABC'를 쓰고 마우스 커서를 빠져나가면 onchange 이벤트를 실행되지 않는다. 즉, 값이 변경되지 않으면 이벤트는 실행되지 않는다.)

       

      • 만약 사용자가 어떤 키를 눌렀을 때 이벤트가 발생하도록 만들고 싶다면 아래와 같은 코드를 사용할 수 있다.
      <input type="text" onkeydown="alert('key down!')">
      • 출력하여 텍스트창에 입력을 하려고 키보드를 누르는 순간 경고창이 나타날 것이다.

       

      • 이번 수업의 주제는 'on'으로 시작하는 속성이다. 이러한 속성들을 자바스크립트에서는 이벤트라고 하며, 웹 브라우저 위에서 일어나는 여러 가지 사건들 중에서 대표적인 10 ~ 20개의 이벤트를 정의하였고, 이것들을 이용해 사용자와 상호작용할 수 있는 코드를 작성할 수 있다.

       

       

       

      05. HTML과 JS의 만남: 콘솔

      • 경우에 따라서 파일이 아니더라도 간단하게 어떤 코드를 실행해야 하는 상황들이 있다. 그런 경우에 콘솔(console)을 사용할 수 있다.
      • 개발자도구를 킨 다음 [Console]탭을 눌러서 '>' 커서에 자바스크립트 코드를 즉석에서 실행할 수 있다. 간혹 계산이 필요할 때에 계산기로 쓰기도 하며, 데이터를 간단하게 처리해야 할 경우에도 사용한다.
      • 그 예로 아래의 코드를 보자.
      alert('JavaScript, often abbreviated JS, is a programming language that is one of the core technologies of the World Wide Web, alongside HTML and CSS.[11] Over 97% of websites use JavaScript on the client side for web page behavior,[12] often incorporating third-party libraries.[13] All major web browsers have a dedicated JavaScript engine to execute the code on users devices. JavaScript is a high-level, often just-in-time compiled language that conforms to the ECMAScript standard.[14] It has dynamic typing, prototype-based object-orientation, and first-class functions. It is multi-paradigm, supporting event-driven, functional, and imperative programming styles. It has application programming interfaces (APIs) for working with text, dates, regular expressions, standard data structures, and the Document Object Model (DOM). The ECMAScript standard does not include any input/output (I/O), such as networking, storage, or graphics facilities. In practice, the web browser or other runtime system provides JavaScript APIs for I/O. JavaScript engines were originally used only in web browsers, but are now core components of some servers and a variety of applications. The most popular runtime system for this usage is Node.js. Although Java and JavaScript are similar in name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design.'.length)
      • 위의 코드는 이 텍스트가 몇 개의 글자로 이루어져 있는지 알고 싶을 때 사용한다.
      • 문자를 먼저 ' '로 묶으면 이 안의 것들은 문자가 되고, 문자의 갯수를 알려주는 명령이 .length이다. 이를 alert()로 감싼다.
      • 그리고 코드를 콘솔창에 입력하면 경고창으로 '1381'이라고 뜬다.

       

      • 이것도 자바스크립트 코드를 실행하는 한 가지 방법이고, 일상에서 자바스크립트 코드를 실행하는 경우 파일을 만드는 것이 아주 귀찮기 때문에 콘솔을 이용하면 자바스크립트 코드를 즉석에서 실행할 수 있다.
      • 그리고 예로 페이스북에 댓글 이벤트로 몇명의 사람을 뽑을 때 아래와 같은 코드를 입력할 수 있다.
      var 당첨자수 = 4;
var 댓글선택자 = '._3b-9>div>.UFIComment .UFICommentActorName';
function shuffle(a) {
    for (let i = a.length; i; i--) {
        let j = Math.floor(Math.random() * i);
        [a[i = 1], a[j]] = [a[j], a[i - 1]];
        console.log(i + ', ' + j);
    }
}
var list = [];
document.querySelectorAll(댓글선택자).forEach(function(e){
    list.push(e.innerText);
});
list = list.filter((v,i,a) => a.indexOf(v)===i);
shuffle(list)
console.log(list.slice(0,당첨자수));
      • 이해하지 않아도 된다.
      • 그냥 이러한 코드로 4명을 추첨하여 결과를 얻을 수 있고, 한번 더 실행할 때는 키보드 위쪽 화살표 키를 눌러 다시 화면에 나타나게 할 수도 있다.
      • 자바스크립트를 이용한다는 것은 웹 페이지를 만드는 것처럼 거대한 목표일 수도 있지만 이미 만들어진 웹 사이트를 대상으로 나의 필요에 따라 맥락적으로 간단하면서도 나에게는 딱 맞는 코드를 만들어 문제를 해결할 수 있다.
      • 그리고 이 콘솔을 통해 자바스크립트 코드를 실행하면 현재 열려있는 웹 페이지를 대상으로 자바스크립트 코드가 실행된다는 것도 기억하라.

       

       

       

       

      해당 글은 [생활코딩! HTML + CSS + 자바스크립트] 책을 토대로 공부한 내용을 기록하기 위하여 작성됨.

       

       

       

       

      반응형

      '개발 공부 > 생활코딩! HTML+CSS+JavaScript' 카테고리의 다른 글

      JS 편 - 3일차  (0) 2025.05.11
      JS 편 - 2일차  (0) 2025.05.10
      CSS 편 - 5일차  (0) 2025.05.08
      CSS 편 - 4일차  (0) 2025.05.07
      CSS 편 - 3일차  (1) 2025.05.06

      관련글 관련글 더보기

    Designed by Tistory.

    티스토리툴바