티스토리 뷰

javaScript/생활코딩 - JavaScript

WEB2 JavaScript -3

GrapeMilk 2020. 2. 11. 15:42

1. 이벤트

 - 웹브라우저상에서 일어나는 일

 - 이벤트를 이용해서 사용자와 상호작용하는 웹페이지를 만들 수 있다.

 - 자주 쓰이는 빈도의 이벤트는 10~20개가 있고, 외우기 보다는 검색을 통해 접근하면 익숙해진다.

 

 

 1-1 onclick과 이벤트

  - onclick 속성의 속성 값으로는 반드시 자바스크립트 값이 와야 한다.

  - onclick의 속성값을 웹브라우저가 기억하고 있다가, 사용자가 onclick속성이 위치한 버튼을 클릭했을 때 기억하고 있던 JS코드를 해석해서 웹브라우저가 동작한다. 

  - 즉, 이벤트가 일어났을 때 자바스크립트 코드가 실행 되게 함 

 

1) 예제코드

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="button" value="hi" onclick="alert('hi')">
    </body>
</html>

2) 실행결과

1-2 onchange와 이벤트

 - onchange: input type="text"로 생성한 텍스트 상자안에 입력하는 내용이 바뀌면 alert을 통해 'hi'를 출력

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <input type="text" onchange="alert('hi')">
    </body>
</html>

 

2. Console

 - 웹브라우저 오른쪽 마우스 클릭 -> 맨아래 '검사' -> 개발자 도구의 console창을 통해 간단한 js코드 작성 및 실행 가능

 - console을 통해 JS를 실행하면 보고 있는 웹페이지를 대상으로 JS가 실행된다. 

 - 간단하면서도, 웹페이지에서 바로 코드를 실행시킬 수 있는 강력한 도구 ex) 생활코딩 페이스북 당첨자 추출 

 

3. 데이터 타입

 - 데이터 타입에 따라 사용할 수 있는 함수가 다양하다 

 (참고) https://www.zerocho.com/category/JavaScript/post/57271d6e5aec14515b949b4b

var a = ''; // 문자열
var b = 0; // 숫자
var c = false; // 불린
var d = null; // 널
var e = undefined; // 언디파인드
var f = []; // 배열
var g = {}; // 객체
var h = function() {}; // 함수

 

4. JS에서의 변수 

 - var(variable) : 변수선언시 사용, JS에서는 Java처럼 변수의 데이터 타입을 지정하지 않아도 됨. 

 - 초기화 : 변수를 선언하는 동시에 값을 대입하는 것 

 

 

*자바스크립트 바로 결과 확인 -> 콘솔에서가능

 - vscode에서 일어나는 문제 해결하기 

'javaScript > 생활코딩 - JavaScript' 카테고리의 다른 글

WEB2 JavaScript -4  (0) 2020.02.11
WEB2 JavaScript -2 script 태그  (0) 2020.02.08
WEB2 JavaScript -1 정의 및 동작  (0) 2020.02.08
댓글