본문 바로가기
개발자 꿈나무/JavaScript

JavaScript 기초(1) - 특징, 이벤트

by ♥︎♥︎ Heina ♥︎♥︎ 2020. 5. 1.
반응형

JavaScript가 무엇인가 하면 객체 기반의 스크립트 프로그래밍 언어... 음... 아... 아래와 같다고 한다. 문장을 읽어도 이해할 수 있는 단어가 별로 등장하지 않으므로 다음에 시간날 때 읽어 보기로 했다=_= 그래, 프로그래밍 할 때 쓰는 언어인거 알았고, 일단 공부 Start~*

https://ko.wikipedia.org/wiki/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

 

자바스크립트 - 위키백과, 우리 모두의 백과사전

위키백과, 우리 모두의 백과사전. 자바스크립트JavaScript패러다임프로그래밍 패러다임: 스크립트 언어, 객체 지향 프로그래밍 (프로토타입 기반 프로그래밍), 명령형 프로그래밍, 함수형 프로그��

ko.wikipedia.org

 


JavaScript 특징

: JavaScript는 html 위에서 동작하는 언어이다. html을 1도 모른다면 먼저 html 공부를 하는 것이 좋다.

: html 문서 내에서 <script></script> 태그를 통해 자바스크립트임을 알려줄 수 있다.

JavaScript와 html과의 차이점

: html이 정적이라면, JavaScript는 동적이다.

: 예를 들자면 자바스크립트로 '1+1'를 입력하면 결과값인 '2'가 출력되는 반면에 html로 입력하면 '1+1'이 그대로 출력된다. (아래 참고)

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
  	<h1>JavaScript</h1>
    <script> <!--지금부터 자바스크립트가 시작합니다!-->
      document.write('hello world'); <!--hello world 출력-->
      document.write(1+1); <!--1+1을 계산해서 '2' 출력-->
    </script>
    <h1>html</h1>
      hello world <!--hello world 출력(위와 동일)-->
      1+1 <!--1+1 텍스트 그대로 출력-->
  </body>
</html>

 

이벤트(event) : on으로 시작하는 속성들

: onclick의 속성 값으로는 반드시 JavaScript가 와야 하며, 해당 속성값을 웹브라우저가 기억하고 있다가 사용자가 클릭했을 때에 비로소 동작한다.

<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <input type="button" value="hi" onclick="alert('hi')"> 
    <!--타입에 'button' 입력하면 버튼 모양이 됨, value에 쓰는 텍스트값을 버튼 안에 출력함,
    클릭했을 때 'hi'라는 내용의 경고창이 뜸-->
    <input type="text" onchange="alert('changed')">
    <!--타입에 'text' 입력하면 글씨를 입력할 수 있는 텍스트창 생김, 
    텍스트 내용이 바뀌면 'changed'라는 내용의 경고창이 뜸-->
    <input type="text" onkeydown="alert('key down!')">
  </body>
</html>

 

그 외

: 웹페이지에 어떤 글씨를 출력하고 싶으면 document.write를 쓴다.

: 경고창을 출력하고 싶다면 alert('경고창 내용') 를 사용한다.

: 검색TIP - javascript event attribute

※생활코딩 > WEB > WEB2 - JavaScript 강의를 통해 공부한 내용입니다.

반응형

댓글0