자바스크립트 공부 : 1. 자바스크립트의 기초

728x90

자바스크립트 공부 : 1. 자바스크립트의 기초

 

 

 

#다시 시작

 

자바스크립트를 한참 공부하다가..

회사에서 직무가 바뀌어서 공부를 중단했었는데..

다시 돌고돌아서 자바스크립트가 필요한 상황이 되었다.

사람은 역시 게으르면 안된다.

무슨 일이 벌어질지 모르니, 공부할 수 있을때에는

공부에 열중하도록 해야겠다.

 

자바스크립트의 기초부터 다시 복습할겸

포스팅을 이어가보도록 하겠다.

 

 

 

 

 

#자바스크립트란?

 

자바스크립트(JavaScript)란?

자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어.

 

HTML로는 웹의 내용을 작성.

CSS로는 웹을 디자인.

자바스크립트로는 웹의 동작을 구현.

 

자바스크립트는 주로 웹 브라우저에서 사용되나,

Node.js와 같은 프레임워크를 사용하면 서버 측 프로그래밍에서도 사용 가능.

 

* http://www.tcpschool.com/ 참고

 

 

 

#코드로 복습하기

 

생활코딩의 WEB > WEB2 - JavaScript 강의.

 

수업의 목적
HTML과 JavaScript의 만남 1 (script 태그)
HTML과 JavaScript의 만남 2 (이벤트)

 

을 복습한 내용의 코드이다.

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>


    <input type="button" name="버튼1" value="버튼1" onclick=alert("hi")>
    <input type="text" onchange=alert("changed");>
    <input type="text" onkeydown=alert("keydown!")>

    <!--
      웹브라우저에서 이뤄지는 사건, 즉 이벤트
      onclick이라는 이벤트가 실행되면 alert라는 자바스크립트코드가 실행된다.
      onclick onchange onkeydown 어트리뷰트와 같은 여러 이벤트들로 웹페이지는 유저와 상호작용한다.
    --!>


    <br>
    <h1>동적인 javascript</h1>
    <script type="text/javascript">
    //웹페이지는 이 안에 있는 내용은 자바스크립트로 인식한다.
    document.write(1+1);


    </script>
    <h1>정적인 HTML</h1>
    1+1
  </body>
</html>

 

1. 정적인 HTML & 동적인 자바스크립트

    <h1>동적인 javascript</h1>
    <script type="text/javascript">
    //웹페이지는 이 안에 있는 내용은 자바스크립트로 인식한다.
    document.write(1+1);


    </script>
    <h1>정적인 HTML</h1>
    1+1

 

HTML은 정적인 것을 표현

자바스크립트는 동적인 것을 표현

 

HTML코드는 1+1이 출력

자바스크립트는 2가 출력

 

 

 

 

 

 

 

 

2. 이벤트

    <input type="button" name="버튼1" value="버튼1" onclick=alert("hi")>
    <input type="text" onchange=alert("changed");>
    <input type="text" onkeydown=alert("keydown!")>

 

웹브라우저에서 이뤄지는 사건, 즉 이벤트 
onclick이라는 이벤트가 실행되면 alert라는 자바스크립트코드가 실행된다. 
onclick, onchange, onkeydown 어트리뷰트와 같은 여러 이벤트들로 웹페이지는 유저와 상호작용한다. 

 

 

 

 

이 글을 공유하기

댓글(0)

Designed by JB FACTORY