modern web designwebskills.kr/2018/data/javascript_jquery.pdf · javascrtipt란? 11 ¡...

JavaScript

&

jQuery

유승열

<차례>

[머리말] 9

JavaScript 10

JavaScrtipt란? 11

¡ JavaScript는? 11

¡ JavaScript History 11

¡ ECMAScript(= ECMA-262)? 11

¡ JavaScript로 무엇을 할 수 있는가? 12

JavaScript in HTML 13

¡ JavaScript code example in HTML 13

¡ JavaScript 코드를 넣을 수 있는 곳 15

JavaScript 기본 예제 16

¡ HTML 콘텐트 변경 예제 16

¡ HTML 속성(Attributes) 변경 예제 17

¡ HTML Style(CSS) 변경 예제 18

¡ HTML Event Handling 예제 19

¡ HTML Data 검증(form validation) 예제 20

Console 사용 21

¡ Console? 21

¡ Console 활용 23

¡ <script> vs <script type="text/javascript"> 24

주석(Comment) 24

¡ 주석(comment)이란? 24

¡ 주석의 종류 25

변수(Variables) 25

¡ 변수(Variables)란? 25

¡ 변수(Variables) 사용 방법 26

¡ var 사용 27

¡ 변수 재 선언 28

¡ 변수의 연산 29

¡ 변수의 다양한 변신 30

연산자(Operators) 31

¡ 산술(Arithmetic) 연산자 31

¡ 대입(Assignment) 연산자 31



¡ 비교(Comparison) 연산자 33

¡ 비교(Comparison) 연산자 34

¡ 논리(Logical) 연산자 35

¡ 연산자 우선순위(Precedence) 35

JavaScript – Data Types 37

¡ 데이터 타입 알아내기 typeof 38

¡ 데이터 Type 변환 39

함수(function) 40

¡ 함수란? 40

¡ 함수 사용의 장점 : 코드 재사용 41

¡ 함수 호출(Invocation)과 활용 42

¡ 함수에서 return 키워드 43

¡ 함수의 매개변수와 인수 44

¡ Anonymous(이름 없는) Function과 IIFE 46

¡ 변수 유효범위(scope) 46

JavaScript HTML Events 50

¡ HTML Events란? 50

¡ Event Handlers 50

¡ addEventListener() Method 50

¡ removeEventListener() Method 51

¡ HTML Window Event들 52

¡ HTML Form Event들 53

¡ HTML Keyboard Event들 53

문자열(Strings) 다루기 54

¡ 문자열(Strings)이란? 54

¡ 긴 문자열 처리 : 문자열 나누고 합치기 55

¡ 문자 갯수 알아내기 – length 56

¡ 특수 문자 처리 – escape 56

¡ 하나의 문자 추출하기 : charAt() 58

¡ 특정 index의 문자 코드 추출 : charCodeAt() 59

¡ 문자 코드를 문자로 변환 : String.fromCharCode() 59

¡ 특정 문자(열)의 위치 값 얻어오기 : indexOf(), lastIndexOf() 59

¡ 문자열의 특정 index 범위의 문자열 반환 : slice() 61

¡ slice와 유사한 : substring() 61

¡ 문자열의 특정 위치부터 지정한 수 만큼 문자열 반환 : substr() 61

¡ 문자열 치환(바꾸기) : replace() 62

¡ 대소문자 전환 : toLowerCase(), toUpperCase() 63

¡ 문자열 또는 배열 합치기 : concat() 또는 + 64

¡ 문자열을 쪼개서 배열로 만들기: split() 64

¡ 배열을 문자열로 합치기: join() 65

¡ 문자열에서 특정 문자(열) 찾기: match() 65

¡ 문자열 앞 뒤의 공백 제거: trim() 66

¡ 숫자, 배열 등을 문자열로 변환: toString() 66

¡ 숫자(Numbers)란? 66

¡ 숫자가 아닌 값 NaN과 이를 검사하는 메서드 : inNaN() 67

¡ 값을 숫자로 변환 : Number() 68

¡ 주어진 값을 정수형 값으로 변환: parseInt() 68

¡ 주어진 값을 부동소수점 숫자로 변환: parseFloat() 69

¡ 수학적인 값(속성)과 처리 메서드 70

날짜 시간 다루기 72

¡ Date() - 시스템의 현재 날짜와 시간 얻어오기 72

¡ 날짜와 시간 설정 73

배열(Arrays) 79

¡ 배열이란? 79

¡ 배열의 길이 - length 81

¡ 배열 정렬 – sort() 82

¡ 배열의 숫자값 정렬과 큰 수, 작은 수 구하기 83

¡ 배열 요소의 값 변경 84

¡ 배열에 요소 추가하기 86

¡ 배열에서 요소 삭제하기 88

¡ 배열 합치기 – concat() 91

¡ 배열 잘라서 추출하기 – slice() 92

¡ 배열을 문자열로 – toString(), join() 92

¡ 문자열을 배열로 – split() 93

¡ 배열채우기 – fill() 94

¡ 배열인지 확인하기 – Array.isArray() 95

¡ 배열 필터링 – fillter() 96

¡ 배열에서 조건에 맞는 첫 번째 값 찾기 – find() 97

¡ 조건에 맞는 첫 번째 index 추출 – findIndex() 98

¡ 특정 값이 존재하는지 index 찾기 – indexOf() 100

¡ 배열의 순서를 반대로 뒤집기 – reverse() 101

¡ 모든 값이 조건에 만족하는지 검사 – every() 101

¡ 일부 값이 조건에 만족하는지 검사 – some() 102

¡ 배열의 반복 – .forEach(), for(){} 103

조건문 105

¡ 조건문이란? 105

반복문 111

¡ for 반복문 111

¡ while 반복문 113

¡ do while 반복문 113

JavaScript Browser 다루기 115

¡ Web Browsing 115

¡ Navigator 객체 117

¡ Window Open 123

¡ Layer Popup 129

JavaScript Cookie 다루기 132

¡ Cookie란? 132

¡ Cookie 사용법 133

JavaScript From 다루기 148

¡ Form Validation 148

JavaScript Timer 152

¡ setTimeOut - 일정 시간 뒤에 함수를 한 번 실행 152

¡ setInterval – 지정된 시간마다 반복적으로 실행 154

JavaScript 정규표현식 156

¡ 정규표현식(Regular Expression)이란? 156

¡ 정규표현식 사용법 156

¡ 정규표현식 flags 160

¡ 정규표현식 패턴 문자들 161

JavaScript AJAX 170

¡ AJAX란? 170

¡ AJAX 사용 준비 171

¡ AJAX 지원 브라우저 171

¡ AJAX 지원 여부 확인 코드 172

¡ AJAX 기본 예제 173

¡ AJAX XML 읽기 예제 176

¡ AJAX JSON 읽기 예제 179

jQuery 182

What is jQuery? 183

¡ jQuery는? 183

¡ jQuery History 183

¡ jQuery로 할 수 있는 일들 184

¡ jQuery를 시작하기 전에 알아야 할 것들 184

jQuery Versions 186

¡ jQuery Current Versions 186

¡ 버전 별 지원 사항 186

¡ Compressed or Uncompressed Version? 186

jQuery 시작하기 187

¡ jQuery Download 187

¡ jQuery Download 코드 사용 188

¡ jQuery CDN – Content Delivery Network 189

¡ jQuery의 시작 $ 또는 jQuery 190

¡ jQuery 기본 문법(Syntax) 190

¡ jQuery에서 $를 사용하지 않는 방법 191

¡ $, $() 또는 jQuery, jQuery() 192

¡ jQuery onload 192

¡ 선택한 요소의 콘텐트와 스타일 변경하기 193

¡ jQuery 효과(effects) 195

속성(attributes) - get/set 196

¡ $( "요소선택" ).attr( 속성이름, [속성값] ); 196

¡ HTML get - html(), text(), val() 197

¡ HTML set - html(html), text(text), val(value) 198

요소 선택(selecting elements) 199

¡ jQuery Selectors are based on CSS Selector 199

¡ 요소 선택 방법들 199

¡ 다양한 Selector 예제 201

¡ 폼요소들 선택 예제 203

¡ 선택 결과로부터 다시 선택 또는 필터링 204

¡ :first vs :first-child vs .first() 205

¡ .parent(), .children() ... 206

¡ 선택 대상의 주변 요소들 선택(같은 부모를 갖는 child들-형제자매들 중) 207

¡ 선택한 결과는 어떻게 사용되는가? 208

¡ 선택한 요소가 여러 개일 때 209

jQuery Event 211

¡ 이벤트(events)란? 211

¡ 마우스 이벤트(mouse events) 211

¡ 키보드 이벤트(keyboard events) 213

¡ keydown() vs keypress() 214

¡ 폼(form) 관련 이벤트들 blur(), focus(), change(), select(), submit() 214

¡ ready() 이벤트 메서드 웹 페이지가 모두 loading 된 후에 발생 215

¡ resize() 이벤트 메서드 브라우저 창의 크기가 변경될 때 216

¡ scroll() 이벤트 메서드 모든 스크롤 가능한 요소에 발생하는 스크롤 이벤트 217

¡ 이벤트 trigger 선택된 대상에게 이벤트를 발생시켜주는 메서드 218

¡ event.preventDefault() 이벤트의 결과로 벌어질 기본 동작을 차단 219

¡ event.stopPropagation() 이벤트가 부모 요소로 확산됨을 방지 220

¡ .on() 메서드 – Event 캐치 222

¡ 페이지 로딩 후 추가된 콘텐트 요소에 접근하기 223

¡ 한 번에 여러 가지 이벤트 처리하기 225

¡ .off() 메서드 이벤트 핸들러 제거하기 226

¡ .one() 메서드 한 번 만 이벤트 실행하기 227

jQuery 효과(effects) 228

¡ show() / hide() 228

¡ .toggle() : .show()와 hide()를 번갈아 실행 229

¡ jQuery Animation 230

¡ .stop() 애니메이션 중단 232

¡ callback in effects – complete 234

¡ chaining : 여러 개의 효과 또는 method를 연결 237

jQuery content 추가 238

¡ append(), prepend(), before(), after() 238

¡ [응용] 표에서 마지막 tr 뒤에 새로운 tr 추가 240

¡ remove() : 선택된 요소 제거 241

jQuery CSS 다루기 242

¡ css() 242

¡ addClass(), removeClass(), toggleClass() 243

¡ hasClass() : 특정 클래스를 갖는지 검사 244

jQuery 치수 다루기 245

¡ width/height 245

¡ window / document 247

¡ scrollTop / scrollLeft 250

¡ window scrollTop, scrollLeft setting(값 지정) 253

¡ window scroll이 문서의 끝에 도달했는지 검사하기 254

¡ offset() : 요소가 실제 놓여 있는 좌표(top, left) 256

jQuery 포지션(position) 258

¡ position() 258

¡ event.pageX, event.pageY 260

[참고사이트] 262

[머리말]자바스크립트(JavaScript)는 웹을 이루고 있는 핵심 언어 요소인 HTML(HyperText

Mark-up Language)과 웹의 스타일을 처리하는 CSS(Cascading Style Sheet)와 함

께 현대 웹에서 없어서는 안될 요소이다.

자바스크립트는 웹 페이지를 이루는 요소들을 제어하는 작업을 주로 처리한다.

CSS와는 다른 방법으로 요소를 선택할 수 있고 선택한 요소의 스타일과 내용을

변경하는 등의 작업을 할 수 있으며 이벤트와 상호작용을 처리하고 애니메이션 같

은 작업을 수행할 수도 있으며 데이터를 불러와 화면에 표시하거나 검색기능을 제

공할 수도 있다.

최근에는 google이나 facebook 같은 글로벌 기업들이 자신들의 웹 개발에 사용하

던 자바스크립트 Framework를 공개해서 자바스크립트가 단순히 하나의 웹 페이

지 내에서의 제어뿐만 아니라 사이트 전체를 관리하는데도 사용될 수 있다는 것을

보여주고 있다.

본 교재에서는 자바스크립트의 기본적인 개념과 사용법을 주로 설명한다. 또한 많

은 사용자를 확보하고 있는 자바스크립트 라이브러리(Library) 중 하나인 jQuery에

대해서도 알아볼 것이다.

초보자를 위한 교재인만큼 지나치게 복잡한 내용은 제외하였지만 자바스크립트를

처음 배우려는 초보자가 알아야 할 내용들은 대부분 담았다.

많은 분들에게 도움이 되길 바란다.

2018년 2월 유승열

JavaScript_jQuery(유승열).hwp 10

JavaScript


JavaScrtipt란?

¡ JavaScript는?

Ÿ 상호작용(interactive) 가능한 웹 페이지를 위한 프로그래밍 언어

Ÿ 방문자(user) 컴퓨터(또는 기기)의 웹 브라우저에서 실행되는 언어

Ÿ 표준 웹 브라우저를 제공하는 모든 기기와 운영체제에서 사용 가능

한 언어(cross-platform)

Ÿ 객체지향프로그래밍(Object Oriented Programming) 언어

F https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Orie

nted_JavaScript

¡ JavaScript History

Ÿ 1995.5.10일 당시의 웹 브라우저 Netscape에서 실행되도록 개발

Ÿ 최초 이름은 Mocha à 1995.10월 LiveScript로 변경à1995.12월

SUN에 의해 JavaScript로 이름이 변경되어 오늘에 이르고 있음

Ÿ 1996~7년 ECMA에 의해 스크립트언어 표준안 제정됨

¡ ECMAScript(= ECMA-262)?

Ÿ ECMA?

- 유럽 전자계산기 제조공업회

- European Computer Manufacturers Association


Ÿ ECMAScript?

- ECMA는 1996년에서 1997년 동안 스크립트 언어에 대한 표준 제정작업을

시작하여 이 기간 동안 ECMA-262, 즉 ECMAScript 1st Edition을 발행하였

다.F http://www.ecmascript.org/

Ÿ ECMAScript=JavaScript?

- ECMAScript는 JavaScript뿐만 아니라 ActionScript, Jscript와 같은 스크립트

언어의 표준안 개발을 위해 작성됨

- 스크립트 언어의 엔진에 해당

Ÿ ECMAScript Latest Standard Version in 2015

- ECMA-262-5th Edition, 2009.12.3, 현재 거의 모든 브라우저가 지원

- http://kangax.github.io/compat-table/es5/

- ECMA-262-6th Edotion, 2015.06 최종 승인, 일부(FF) 브라우저 지원

- 2016년 ECMAScript 7이 발표되어 있음

¡ JavaScript로 무엇을 할 수 있는가?

Ÿ w3schools.com : http://www.w3schools.com/js/js_intro.asp

- JavaScript는 HTML 콘텐트(Content)를 변경할 수 있다.

- JavaScript 는 HTML 속성(Attributes)을 변경할 수 있다.

- JavaScript 는 HTML 스타일(CSS)을 변경할 수 있다.

- JavaScript는 데이터를 검증(Validate )할 수 있다.

Ÿ w3.org

F https://www.w3.org/community/webed/wiki/What_can_you_do_with_JavaScript

- JavaScript는 실행하기 쉽다. 당신이 해야 할 일은 그저 HTML 안에 코드

를 입력하고 브라우저에게 코드가 JavaScript임을 알려주는 일 뿐이다.

- JavaScript는 사용자의 컴퓨터에서 작동한다(심지어 인터넷에 연결되어 있

지 않을 때에도)


- JavaScript는 서버로부터의 반응이나 또 다른 페이지를 불러오지 않고도

높은 반응형 인터페이스를 생성함으로써 사용자 경험과 동적인 기능을 향

상시킨다.

- JavaScript는 일반적으로 AJAX라고 하는 기능으로 사용자가 필요로 할 때

전체 페이지를 불러오지 않고도 콘텐트를 문서에 불러 넣을 수 있다.

- JavaScript는 브라우저에서 무엇이 가능한지 테스트할 수 있으며 그에 따라

반응할 수 있다. 이를 “귀찮게 하지 않는 스크립팅 원리” 또는 “방어적인

스크립팅”이라 한다.

- JavaScript는 브라우저 문제를 해결하는데 도움을 줄 수 있고 지원하지 않

는 기능을 수정할 수 있다.

JavaScript in HTML

¡ JavaScript code example in HTML

Ÿ index.html

<!DOCTYPE�html>

<html�lang="ko">

<head>

��<meta�charset="UTF-8">

��<title>JavaScript�Where�to</title>

��<script>

��function�hello(gretting){

��console.log(gretting);

��}

��</script>

��<script�src="hello1.js"></script>

</head>

<body>

��<h1>javasScript�Where�to</h1>

��<p>

��<button�onclick="hello('Hello�from�button�click');">button</button>

��<a�href="javascript:hello('Hello�from�a�link�click');">link</a>

��<span�id="hi">span</span>

��</p>


��<script>

��hello("Hello�from�auto�invoking");

��document.getElementById("hi").addEventListener("click",function(){�hello("Hello�from�

span");�});

��</script>

��<script�src="hello2.js"></script>

</body>

</html>

Ÿ hello1.js

console.log("Hello�from�outer�file�1�–�hello1.js");

Ÿ hello2.js

console.log("Hello�from�outer�file�2�–�hello2.js");


¡ JavaScript 코드를 넣을 수 있는 곳

Ÿ <head>와 </head> 사이에 <script> // code lines </script>

형식으로 넣음

Ÿ HTML 요소들(elements), 즉 태그에서 event handler와 함께 넣을

수 있음

- 예) <button onclick=“clickMe();”>버튼</button> <-- inline script

- 이 경우 주로 함수 호출을 위해 사용됨, 끝의 세미콜론(;)은 없어도 되나,

다음에 다른 함수를 이어서 호출하거나 할 때는 반드시 세미콜론(;)으로 구

분해주어야 함.

Ÿ body의 끝, 즉 닫는 body 태그(</body>) 바로 위에 넣음

- 최근 들어 여러 가지 이유로 이 위치에 JavaScript를 넣는 것이 권장되고

있음

- http://www.w3schools.com/js/js_whereto.asp

- http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put

-script-tags-in-html-markup

Ÿ 외부 js 파일 삽입

- <script src="hello1.js"></script> 와 같이 script 태그의 src 속성에 외부

script 파일의 경로와 파일명을 넣어 외부 파일 삽입

- 이 때 <script src=“”>와 </script> 사이에는 어떤 내용들 들어갈 수 없음.

- 각종 CDN((Content delivery network)에서 제공되는 JS 프레임워크 또난

라이브러리를 문서에서 사용F 예) jQuery CDN

<script�src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>


JavaScript 기본 예제

¡ HTML 콘텐트 변경 예제

<!DOCTYPE�html>

<html�lang="ko">

<head>


��<title>Change�HTML�Content</title>

</head>

<body>

��<h1>Change�HTML�Content</h1>

��<p>현재시간�:�<span�id="curTime">?</span></p>

��<script>

��document.getElementById("curTime").innerHTML�=�Date();

��</script>

</body>

</html>

Ÿ ID가 curTime인 span 요소의 콘텐트를 ? 에서 날짜 데이터로 변경

Ÿ document.getElementById() : 지정한 ID의 객체를 얻어옴

Ÿ innerHTML : HTML 요소의 콘텐트를 지정하거나 얻어올 때 사용하는 속성

Ÿ Date() : 사용자컴퓨터의 현재 날짜시간 정보를 얻어옴


¡ HTML 속성(Attributes) 변경 예제

<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>Change�HTML�Attributes</title>

</head>

<body>

��<h1>Change�HTML�Attributes</h1>

��<p><img�id="myimg"�src=""�width="300"�height="240"></p>

��<p>

��<button�onclick="changeSrc('food');">food</button>

��<button�onclick="changeSrc('people');">people</button>

��<button�onclick="changeSize(600,480);">넓이x2</button>

��</p>

��<script>

��var�img�=�document.getElementById("myimg");

��var�imgSrc�=�"http://lorempixel.com/300/240";

��img.src�=�imgSrc;

��function�changeSrc(category){

��img.src�=�imgSrc�+�"/"�+�category;

��}

��function�changeSize(x,y){

��img.width�=�x;

��img.height�=�y;

��}��

��</script>

</body>

</html>


¡ HTML Style(CSS) 변경 예제

<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>Change�HTML�Styles(CSS)</title>

</head>

<body>

��<h1>Change�HTML�Styles(CSS)</h1>

��<p>

��<button�onclick="changeColor('red','white');">배경색-red,�글자색-white</button>

��<button�onclick="changeColor('blue','red');">배경색-blue,�글자색-red</button>

��</p>

��<script>

��function�changeColor(bc,tc){

��document.body.style.backgroundColor�=�bc;

��document.body.style.color�=�tc;

��}

��</script>

</body>

</html>

Ÿ CSS 변경 방법

- document.getElementById(id).style.property=new style

- property : CSS 속성(예, color, width, height….)

- new style : CSS 속성의 값(예, red, 300px…)

Ÿ Property 이름에 하이픈(-)이 있는 경우

- 하이픈(-) 은 JavaScript에서는 연산자로 인식되므로 그대로 쓰면 에러 발생

- 하이픈(-) 이 있을 경우 하이픈(-)을 없애고 하이픈(-) 바로 다음에 나오는

단어의 첫 글자를 대문자로 하여 입력

- 예) background-color à backgroundColor, font-size à fontSize

¡ HTML Event Handling 예제

<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>JavaScript�Event�Handling</title>

</head>

<body>

��<p><button�onclick="alert('hello')">hello</button></p>

��<p><button�id="btn1">hello�btn-1</button></p>



��<script>

��//ID가�btn1인�요소에�click�이벤트를�추가(클릭하면�'hello�btn-1'�alert)

��document.getElementById("btn1").onclick=function(){�

��alert('hello�btn-1');�

��};

��//ID가�btn2인�요소에�click�이벤트를�추가(클릭하면�'hello�btn-2'�alert)

��document.getElementById("btn2").addEventListener("click",function(){�

��alert('hello�btn-2');�

��});

��</script>

��

��<script�src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

��

��<script>

��//ID가�btn3인�요소를�클릭하면�

��$("#btn3").click(function(){�alert('hello�btn-3');�});

��//모든�button�요소에�마우스를�올리면�글자색을�빨간색으로�변경

��$("button").on("mouseover",function(){�

��$(this).css({"color":"red"});�

��});

��//모든�button�요소에�마우스를�올렸다�빠져나오면�글자색을�검정색으로�변경

��$("button").on("mouseout",function(){�

��$(this).css({"color":"black"});�

��});

��</script>

</body>

</html>


Ÿ JavaScript Event 참고

F http://www.w3schools.com/js/js_events.asp

F http://www.w3schools.com/jsref/dom_obj_event.asp

F 본 교재 Event Handling 편 참조

¡ HTML Data 검증(form validation) 예제<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>HTML�form�validation</title>

</head>

<body>

<form�name="testForm"�action="test.php"�onsubmit="return�checkIfFormValid()"�method="post">

��<label�for="uname">이름</label>

��<input�type="text"�name="uname"�id="uname">

��<input�type="submit"�value="전송">

</form>

<script>

�function�checkIfFormValid(){

��var�uname�=�document.getElementById("uname").value;

��if�(uname�==�null�||�uname�==�"")�{

��alert("이름은�반드시�입력하셔야�합니다.");

��return�false;

��}

�}

</script>

</body>


</html>

Ÿ HTML 5에서 Form Validation

- HTML 5는 아래와 같은 From Validation Option을 제공함

- <input type="text" name="uname" id="uname" required>

- 단, 이 옵션은 Internet Explorer 9와 그 이하 버전에서는 작동하지 않음F <input type="text" name="uname" id="uname" required> 로 변경 후 테스트

Console 사용

¡ Console?

Ÿ 최신 Browser들은 대부분 개발자도구와 그 안에 Console을 제공함.

Ÿ Console에서 JavaScript를 실행 및 결과를 출력이 가능함


Ÿ 개발단계에서 결과를 미리 검증해보거나 값을 미리 확인하거나 할

때 Console은 유용하게 사용될 수 있으며 대부분의 웹 개발자들이

Console을 사용하고 있음.

Ÿ Console Open : 개발자도구 Open(F12)àConsole Tab

Chrome Console

Internet Explorer 11 console

FireFox Console


¡ Console 활용

Ÿ 대부분의 Console에서는 command 입력을 지원하므로 여기에 직접

JavaScript를 입력하여 결과 확인 가능

Ÿ 연산을 수행할 수 있으며, 변수나 함수 또는 객체 생성 및 실행

Ÿ 변수나 객체 등의 값 확인 시 사용

F 예) <script> console.log(1+2); //결과 3 </script>


¡ <script> vs <script type="text/javascript">

Ÿ 오래된 코드들에서는 type="text/javascript" 발견

Ÿ HTML 5에서 script 태그의 type 기본값은 "text/javascript"

Ÿ 그러나 오래된 브라우저(예를 들어 IE8 이하) 사용자를 고려할 경우

<script type="text/javascript">..</script> 처럼 해주어야 함

Ÿ 왜 이전에는 script type 속성을 지정해주어야 했을까?

Ÿ <script type="text/vbscript"></script> ?

- VBScript : IE 11 전에는 IE에서 JavaScript 외에 Visual Basic 언어의 스크립

트 일부를 클라이언트 사이드에서도 사용할 수 있었음

- MS는 IE11 부터 VBscript 를 더 이상 지원하지 않기로 함

- https://msdn.microsoft.com/en-us/library/dn384057(v=vs.85).aspx

- 현재의 주요 브라우저들은 script의 기본 type이 text/javascript 임

주석(Comment)

¡ 주석(comment)이란?

Ÿ JavaScript를 비롯한 코딩 언어에서 주석은 대부분 코드에 대한 설

명을 추가하기 위해 사용됨.

Ÿ 일부 코드를 실행하지 않도록 하기 위해 주석으로 처리하기도 함


¡ 주석의 종류

Ÿ 한 줄 주석 : //

- 코드 앞에 // 를 추가하면 해당 줄(line)은 주석으로 간주되며 코드로 실행

되지 않음

- 예) <script> //console.log("test"); </script>

Ÿ 여러 줄 주석 : /* … */

- 코드를 /* 와 */ 로 둘러 싸면 주석처리되며 실행되지 않음

- 예)

<script>�

/*�this�is�multi-line comment�*/

</script>

변수(Variables)

¡ 변수(Variables)란?

Ÿ 변수란 데이터의 값을 저장하는 저장소

Ÿ JavaScript 변수의 특징

- 변수의 형(Type)을 지정하지 않음F JavaScript : var a=1; var b="text"; var c=3.14159

F C++ or Java : int a=1; String b="text"; double pi = 3.14159;

F 상수(CONSTANT)의 개념이 없음(Ecma Script 6에서는 상수 를 위한 const 지원)


Ÿ 변수 이름 규칙

- 변수 이름에 사용 가능한 문자 : 알파벳문자, 숫자, _, $

- 변수 이름은 알파벳문자, _ , $ 로만 시작 가능(숫자로 시작할 수 없음)

- 변수는 대소문자를 구분함 à a와 A는 전혀 다른 변수임

- 변수 이름은 x,y와 같이 짧게, xValue와 같이 길게도 사용 가능함

- 예약어(JavaScript keywords)를 사용할 수 없음F 예, alert, function 등…

F http://www.w3schools.com/js/js_reserved.asp

Ÿ 변수 사용 예

- var a = 1;

- var b = 2;

- var c = a + b;

- console.log( c ); // 3

- var d = "3";

- var e = c + d;

- console.log( e ); // 33 ß 3 과 "3"은 전혀 다른 type임(숫자, 문자)

¡ 변수(Variables) 사용 방법

Ÿ 한 번에 하나의 변수 선언

- var a = 1;

- var a;

a = 1;

Ÿ 한 번에 여러 개의 변수 선언

- var a = 1, b = 2, c = "hello";

- var a, b, c;

a = 1;

b = 2;

c = "hello";


Ÿ 값 덮어쓰기(value override)

- var a = 1;

- a = 2;

- a = "hello";

- consoloe.log( a );

F 최종 a의 값은 "hello"임 - 나중에 대입된 a의 값이 앞의 값을 덮어 쓴 것임

Console에서 JavaScript 사용

¡ var 사용

Ÿ var 는 변수 선언 시 사용하는 키워드

Ÿ var 는 반드시 사용해야 하는가?

- var a = 1;


- a = 1;

- JavaScript에서 변수 선언 시 변수명 앞에 var를 붙임

- 그러나 반드시 var 를 붙여야 하는 것은 아님

Ÿ var 를 썼는지에 따라 달라지는 경우는?

- 함수 밖에서 위 두 가지는 어떤 차이도 없음

- 그러나 함수 안에서 상황은 매우 달라짐(아래 예 참조)

- 예 1) 전역(Global) 변수

var�num�=�100;�//전역(global)��변수�선언,�전역변수란�어디서나�접근�가능한�변수

function�newNum()�{

num�=�200;�//함수�안에서�전역변수에�접근

}

newNum();�//함수를�호출(실행)하면�전역변수�num�의�값이�200으로�변경됨

console.log(�num�);�//�200

- 예 2) 지역(Local) 변수

var�num�=�100;�//전역(global)��변수�선언

function�newNum()�{

��//함수�안에서�var�를�사용하면�지역(local)변수로�선언됨

��//지역변수는�함수�안에서만�사용가능하며,�함수를�벗어나면�소멸됨

��var�num�=�200;�//

}

newNum();�//함수를�호출했지만�전역변수에�접근하지�않아�함수�밖에서�num은�여전히�100임

console.log�(�num�);�//�100

¡ 변수 재 선언

Ÿ 단순히 변수를 다시 선언 하는 경우에는 원래 있던 변수의 값이 변

하지 않음

var�num�=�100;

var�num

console.log(�num�);�//�100,�이�부분은�나중에�변수�Hoisting�참조


Ÿ 다음과 같이 변수를 선언함과 동시에 값을 지정하면 값이 변함



console.log(�num�);�//�200

¡ 변수의 연산

Ÿ 숫자들을 저장하고 있는 변수들 사이의 연산은 수식에 따라 계산 결

과를 보여줌

var�a�=�1,�b�=�2

console.log(�a�+�b�);�//�3�덧셈

console.log(�a�-�b�);�//�-1�뺄셈

console.log(�a�*�b�);�//�2�곱하기

console.log(�a�/�b�);�//�0.5�나누기

console.log(�a�%�b�);�//�1�a를�b로�나누고�난�후의�나머지

Ÿ 문자가 포함된 변수들 사이의 연산에서 + 는 문자열을 합쳐줌

Ÿ + 이외의 연산자는 연산자는 NaN(Not-A-Number)에러가 발생함

var�a�=�1,�b�=�"hi";

console.log(�a�+�b�);�//�1hi

console.log(�a�-�b�);�//�NaN�

console.log(�a�*�b�);�//�NaN

console.log(�a�/�b�);�//�NaN

console.log(�a�%�b�);�//�NaN

Ÿ 형 변환 사례(자동으로 형이 변환되기도 함)

var�a�=�30,�b�=�"3";

console.log(�a�+�b�);�//�"303"

console.log(�a�-�b�);�//�27�

console.log(�a�*�b�);�//�90

console.log(�a�/�b�);�//�10

console.log(�a�%�b�);�//�0


¡ 변수의 다양한 변신

Ÿ JavaScript 변수는 숫자, 문자를 저장하는 저장소 뿐만 아니라 객체,

함수, 배열이 될 수 있음

Ÿ 객체(Object)를 저장하는 변수

var�myobj�=�{�firstName�:�"Seunglyul",�lastName�:�"Ryu"�};

console.log(�myobj.lastName�);�//�Ryu

var�myfullname�=�myobj.firstName�+�"�"�+�myobj.lastName

console.log(�myfullname�);;�//�Seunglyul�Ryu�

Ÿ 함수(Function)를 저장하는 변수

var�myfunc�=�function()�{�

console.log(�Date()�);

��}

myfunc();�//�Sun�Jan�03�2016�20:42:24�GMT+0900�(대한민국�표준시)

Ÿ 여러 개의 값을 저장하는 변수 배열(Array)

var�myarr�=�[�"red",�"green",�"blue",�"black"�];

consoloe.log(�myarr[0]�);�//�red

var�myarr2�=�new�Array("red",�"green",�"blue",�"black"�);

consoloe.log(�myarr2[3]�);�//�black


연산자(Operators)

¡ 산술(Arithmetic) 연산자

연산자 설명 사용 예

+ 더하기a = 1 + 2; c = a + b; b = a + 2;

a = “happy” + “ new year”;

- 빼기 a = 5 – 3; c = a – b;

* 곱하기 a = 2 * 7; c = a * b;

/ 나누기 a = 6/2; c = b / a;

% 나머지 a = 5 % 2; c = a % b;

++ 증가 a++; // ( a = a + 1 ); 와 같음

-- 감소 a—; // ( a = a -1 ); 과 같음

¡ 대입(Assignment) 연산자

연산자 설명 사용 예 같은 용법

= 왼쪽에 오른 쪽의 값을 대입 x = y x = y

+= 왼쪽의 값과 오른쪽의 값을 더해 왼쪽에 대입 x += y x = x + y

-= 왼쪽의 값에서 오른쪽의 값을 빼서 왼쪽에 대입 x -= y x = x - y

*= 왼쪽의 값과 오른쪽의 값을 곱해서 왼쪽에 대입 x *= y x = x * y

/= 왼쪽의 값을 오른쪽의 값으로 나눠서 왼쪽에 대입 x /= y x = x / y

%=왼쪽의 값을 오른쪽 값으로 나눈 나머지를 왼쪽에

대입x %= y x = x % y










대입x %= y x = x % y









대입x %= y x = x % y


¡ 비교(Comparison) 연산자


==왼쪽과 오른쪽의 값이 같음

(같으면 true, 다르면 false 반환)

a == b

3 == “3” à true

=== 데이터 형(type)과 값 모두 같음x === null, x === undefined

3 === “3” à false

!= 왼쪽과 오른쪽의 값이 같지 않음a != b

3 != “3” à false

!==왼쪽과 오른쪽의 값과 데이터 타입이

같지 않음

a !== b

3 !== “3” à true

> 왼쪽이 오른쪽보다 큼

a >b

3 >2 à true, 2 >3à false,

3 >3à false

< 왼쪽이 오른쪽보다 작음

a <b

3 <2 à false, 2 <3à true,

3 <3à false

>= 왼쪽이 오른쪽보다 크거나 같음

a >= b

3 >= 2 à true, 2 >= 3à false,

3 >= 3à true

<= 왼쪽이 오른쪽보다 작거나 같음

a <= b

3 <= 2 à false, 2 <= 3à true,

3 <= 3à true

?

조건(삼항)연산자 : 조건 ? 값1 : 값2

조건이 참이면 값1, 아니면 값2를 왼쪽

에 대입

a ? b : c

a = ( age >= 20 ) ? “성년” : “미성년”

à age가 20보다 크거나 같으면 a는

“성년” 아니면 “미성년”



==왼쪽과 오른쪽의 값이 같음

(같으면 true, 다르면 false 반환)

a == b

3 == “3” à true

=== 데이터 형(type)과 값 모두 같음x === null, x === undefined

3 === “3” à false

!= 왼쪽과 오른쪽의 값이 같지 않음a != b

3 != “3” à false

!==왼쪽과 오른쪽의 값과 데이터 타입

이 같지 않음

a !== b

3 !== “3” à true

> 왼쪽이 오른쪽보다 큼

a >b

3 >2 à true, 2 >3à false,

3 >3à false

< 왼쪽이 오른쪽보다 작음

a <b

3 <2 à false, 2 <3à true,

3 <3à false

>= 왼쪽이 오른쪽보다 크거나 같음

a >= b

3 >= 2 à true, 2 >= 3à false,

3 >= 3à true

<= 왼쪽이 오른쪽보다 작거나 같음

a <= b

3 <= 2 à false, 2 <= 3à true,

3 <= 3à true

?

조건(삼항)연산자 : 조건 ? 값1 : 값2

조건이 참이면 값1, 아니면 값2를 왼

쪽에 대입

a ? b : c

a = ( age >= 20 ) ? “성년” : “미성년”

à age가 20보다 크거나 같으면 a는 “성

년” 아니면 “미성년”

¡ 비교(Comparison) 연산자


¡ 논리(Logical) 연산자

연산자 이름 설명 사용법

&& 논리곱

왼쪽과 오른쪽 모두 참이면

True,

둘 중 하나만 거짓이어도

False,

둘 다 거짓이어도 False가

반환됨

a &&b

( 3 >1 ) &&( 2 >1 ) // à true

( 3 >1 ) &&( 1 >2 ) // à false

( 1 >3 ) &&( 1 >2 ) // à false

true &&true //à true

true &&false // à false

false &&false // à false

|| 논리합

왼쪽 오른쪽 모두 참이면

True,

둘 중의 하나만 참이어도

True,

둘 다 거짓일 때만 False가

반환됨

a || b

( 3 >1 ) || ( 2 >1 ) // à true

( 3 >1 ) || ( 1 >2 ) // à true

( 1 >3 ) || ( 1 >2 ) // à false

true || true //à true

true || false // à true

false || false //à false

!논리부

정

조건 식이 거짓이면 True,

참이면 False를 반환함

! a

! ( a == b )

! ( 2 >3 ) // à true

! ( 2 <3 ) // à false

! true //à false

! false //à true

¡ 연산자 우선순위(Precedence)

Ÿ 연산자는 연산을 하는 우선순위가 있음, 아래 표 참조(높은 순으로

위부터 내림 차순


Operator type Individual operators

맴버 연산자 . []

객체 호출/생성 연산자 () new

부정/증가 연산자 ! ~ - + ++ -- typeof void delete

곱셈/나눗셈 연산자 * / %

덧셈/뺄셈 연산자 + -

비트단위 시프트 연산자 << >>>>>

관계 연산자 < <= >>= in instanceof

같음 비교 연산자 == != === !==

비트 단위 논리곱 연산자 &

비트단위 배타적 논리합 연산자 ^

비트단위 논리합 연산자 |

논리 곱 연산자 &&

논리 합 연산자 ||

조건 연산자 ?:

대입 연산자 = += -= *= /= %= <<= >>= >>>= &= ^= |=

콤마 연산자 ,

Ÿ 연산자 우선순위 예제

- 1 + 2 * 3 // 7

- 만일 위 계산을 순서대로 한다면

F 1 + 2 = 3

F 3 * 3 = 9

- 그러나 연산자는 우선 순위가 있어 * 를 먼저 하고 나중에 + 를 계산함.

따라서,

F 2 * 3 = 6

F 1 + 6 = 7

- 앞의 연산자 우선순위 표를 보면 * 이 + 보다 우선 순위에 있는 것을 알

수 있음

- 만일 9를 얻고자 한다면 연산자 중 가장 우선순위에 있는 ( ) 를 사용F ( 1 + 2 ) * 3 // 9

- 같은 우선 순위에서 연산 순서(방향) : left-to-right or right-to-left


타입 설명

숫자형(Number) 1, 2.5, 3.14159, -5

논리형(Boolean) true / false문자형(String) “hello"

null

빈 값을 나타냄. 빈 문자열을 대입하는 a=“” 와는 다름.

var a = null:console.log( a ) >>> “null”선언되지 않은 변수의 값과는 다름 à undefined.

undefined

선언이 되기는 했지만 값이 입력되지 않은 변수를 말함.

var a; console.log(a);>>> undefined

Object / Function 객체(Object), 날짜(Date), 배열(Array) / 함수(Function)

기타

선언이 되지 않은 변수에 접근하려고 하면?

console.log(a);>>> a is not defined새로운 Data Type : ES6에서 새로운 타입으로 Symbol 추가

F 2 * 3 * 4 * 5 120

>>> 2 * 3 = 6, 6 * 4 = 24, 24 * 5 = 120

F 2 * 3 + 4 * 5 26

>>> 2 * 3 = 6, 4 * 5 = 20, 6 + 20 = 26

Ÿ 우선순위, 순서에 대한 상세 내용 참조

- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/

Operator_Precedence

JavaScript – Data Types


¡ 데이터 타입 알아내기 typeof

Ÿ typeof 를 통해서 JavaScript에서 사용되는 변수의 type을 알아낼 수

있음


¡ 데이터 Type 변환

Ÿ Number 함수 : 문자열 및 객체, 값을 숫자로 변환

Ÿ 숫자로 변환될 수 없는 문자열(“30A”, “A30”, “30 40”, “AAA”…)을 변

환하면 NaN이 반환됨

Number("20“)�//20

Number(“3.14”)�//3.14

Number(true)�//1

Number(false)�//0

Number(“20A”)�//NaN

Number(“A20”)�//NaN

Number(�new�Date()�)�//1451900281511

“999”�–�0�//999

Ÿ String 함수 : 숫자, 객체 등을 문자열로 변환

String(12345)�//“12345”

String(“12345”)�//“12345”

String(3.14)�//“3.14”

String(true)�//“true”

String(false)�//“false”

String(�new�Date()�)�//"Mon�Jan�04�2016�18:50:01�GMT+0900�(대한민국�표준시)“

1234�+�“”�//“1234”

(1234).toString()�//“1234”

Ÿ Boolean : 값을 boolean(true/false)으로 변환

Boolean(�3�>�2�)�//true��à (�3�>�2�)�만�써도�같은�결과임

Boolean(�3�<�2�)�//false�à (�3�<�2�)�만�써도�같은�결과임


함수(function)

¡ 함수란?

Ÿ 프로그래밍 언어에서 함수란 특정한 기능을 하는 프로그램 코드들

의 집합임

Ÿ 함수는 외부에서 호출되어 사용되며 반복적으로 재사용 가능한 기

능 단위

Ÿ JavaScript에서 함수는 객체(Objects)임

- JavaScript에서 함수는 자체로 속성(Properties)과 메서드(Method)를 갖는

하나의 객체

Ÿ 일반적으로 함수는 내부에 기능코드들을 포함하고 있지만 호출하기

전까지는 실행되지 않음

- 단, 괄호로 묶어 즉시 실행되는 함수를 표현할 수 있음, IIFE

Ÿ 기본적인 함수 선언 및 활용 예 1

function�myfunc1(n1,�n2)�{�//함수�myfunc1�선언,�n1�n2는�매개변수(parameter)

��return�n1�+�n2;�//두�매개변수의�값을�더해�반환함,�return�반환�키워드

}

//값�10,�20을�매개변수로�하여�함수�myfunc1�호출

//함수에서�반환된�결과값�30이�변수�sum에�할당(대입)됨

var�sum�=�myfunc1(�10,�20�);

console.log(�sum�);�//�30


Ÿ 기본적인 함수 선언 및 활용 예 2

var�myfunc2�=�function(n1,�n2)�{�//변수에�함수를�할당하는�방식으로�함수�선언\

��return�n1�*�n2;

}

var�sum3�=�myfunc2(�10,�20�);

console.log(�sum2�);�//�200

¡ 함수 사용의 장점 : 코드 재사용

Ÿ 함수 사용의 가장 큰 장점은 한 번 정의해놓고 언제든지 재사용 가

능함

Ÿ 매개변수(parameter)를 바꿔서 다른 결과를 얻을 수 있음

<!DOCTYPE�html>

<html�lang="ko">

<head>


��<title>JavaScript�Sample</title>

</head>

<body>

��<h3>문서�배경색�변경</h3>

��<p>

��<a�href="#"�onclick="changeBgColor('red','white')">red</a>

��<a�href="#"�onclick="changeBgColor('#00ff00','#000')">green</a>

��<a�href="#"�onclick="changeBgColor('rgb(0,0,255)','rgb(255,255,255)')">blue</a>

��</p>

��<script>

��function�changeBgColor(�bgc,�txtc�)�{

��document.body.style.backgroundColor�=�bgc

��document.body.style.color�=�txtc

��}

��</script>

</body>

</html>


¡ 함수 호출(Invocation)과 활용

Ÿ 함수 호출과 활용

��function�myName()�{�return�"Ryu";�}

��var�name�=�myName();

��console.log(�name�);

Ÿ 변수처럼 사용하는 함수

function�myName()�{�return�"Ryu";�}

var�name�=�myName();

console.log(�myName()�);

Ÿ 값을 반환하지 않고 실행코드를 내장하는 함수

function�myName()�{�console.log(�"Ryu"�);�}

myName();

Ÿ window 객체

function�myName()�{�console.log(�"Ryu"�);�}

window.myName();


JavaScript에서 첫 번째 함수(first function), 즉 객체 속의 메서드가 아닌 함수는

모두 window 라는 객체에 속함. 따라서 window.함수()와 같이 해도 함수() 와 같이

호출한 것과 같음

웹 페이지에 위 함수를 입력하고 브라우저 console에서 window 를 입력한 후 실

행해보면 거의 모든 속성과 함수, 그리고 사용자가 추가한 함수도 보이는 것을 확

인할 수 있음.

¡ 함수에서 return 키워드

Ÿ return 키워드는 함수를 호출한 호출자에게 값을 반환

��function�myNum(a,b)�{�return�a�+�b;�}�//�a,�b�는�매개변수

��var�num�=�myNum(2,5);�//�값�2와�5를�인수로�보내�함수�호출하여�

��//�반환받은�값을�num에�할당한다.�

��console.log(�num�);��//�결과��7�

Ÿ 검증되지 않은 값 또는 값이 없을 대 함수 실행을 중단 할 때도 사

용


��function�greetings(name)�{

��if(�name�===�undefined�||�a�===�""�||�a�===�null�)�{

��return�"Hello�Nobody;

��}�

��return�"Hello�"�+�name;

��}

- console.log( myNum() ); à "Hello Nobody"

- 위와 같이 인수를 매개변수 name에 넘기지 않았을 경우

- 또는 myNum("")과 같이 빈값이거나 myNum(null)인 경우 세가지 조건 중

하나에 해당할 경우 if 문의 안의 return 실행되며, 더 이상 다음 줄로 넘어

가지 않고 "Hello Nobody"가 반환됨.

- 만일 console.log( myNum("Ryu) ); 와 같이 호출하면 if 문 다음의 return

이 실행되어 "Hello Ryu" 와 같이 출력됨

- 값을 return해야 할 필요가 없을 때는 값 없이 return만 쓸 수 있음

¡ 함수의 매개변수와 인수

Ÿ 매개변수(parameter)

- 매개변수란 함수에서 값을 받아들이기 위해 선언된 변수를 말함

- 예) function myFunc(a, b) { }에서 a와 b는 매개변수임

Ÿ 인수(argument)

- 인수란 함수를 호출할 때 매개변수에게 전달하는 값을 말함

- 예) myFunc(10, 20); 에서 10과 20은 인수임

Ÿ 매개변수와 인수 예

��function�myNum(a,b)�{�return�a�+�b;�}�//�a,�b�는�매개변수

��var�num�=�myNum(2,5);�//�값�2와�5를�인수로�보내�함수�호출�


Ÿ 인수의 생략

��function�myFunc(param)�{�return�param�}

��console.log(�myFunc()�);�//�undefined

��//�함수�myFunc은�param이라는�매개변수를�갖는데�이�함수를�호출할�때

��//�인수를�생략하고�myFunc()와�같이�호출하면�매개변수�param이�

��//�undefiend�되어�출력결과도�undefined가�됨

��function�myFunc(a,�b)�{�return�a�+�b;�}

��console.log(�myFunc()�);�//�NaN

��//�위�코드의�결과�undefined�+�undefined�가�되므로�Not�A�Number

Ÿ arguments

- arguments 는 함수 안에서 실제 전달된 인수를 가리키는 객체임

- 이 객체는 매개변수(a, b)의 숫자와는 무관함

- function myFunc(a, b) { console.log( arguments.length ); } 함수 호출 예

- myFunc( 10, 20 ); // 결과2, 전달된 인수의 수가 2개 이므로 2 출력

- myFunc( ); // 결과 0, 전달된 인수의 수가 0개 이므로 0 출력

- myFunc(10, 20, 30, 40, 50); // 결과 5, 전달된 인수가 5개 이므로 5 출력

Ÿ arguments 활용

function�myFunc()�{�

��if(�arguments.length�>�0�)�{

��for�(var�i=0;�i<�arguments.length�;�i++)�{

��console.log(�"매개변수�"�+�(�i�+�1�)�+�"�은�"�+�arguments[i]�);

��}

��}

}

myFunc(10,�20,�30,�40,�50);

- 매개변수 1 은 10

매개변수 2 은 20

- 매개변수 3 은 30

- 매개변수 4 은 40

- 매개변수 5 은 50


¡ Anonymous(이름 없는) Function과 IIFE

Ÿ 이름 없는 함수

- function() { console.log("Ryu"); }F Uncaught Syntax Error: Unexpected token (...)

F function()과 같이 함수의 이름 없이 선언하면 일반적으로 에러 발생

F 에러를 발생시키지 않으려면 아래와 같이 ( ) 로 둘러 싸면 됨

- ( function() { console.log("Ryu"); } );F 에러를 발생시키지는 않지만 실행도 되지 않으므로 의미가 없음

F 위와 같이 이름 없는 함수를 실행하려면 함수 전체를 ()로 둘러싸고

F 끝에 함수 호출연산자인 ()를 추가해야 함.

Ÿ 자동으로 실행되는 함수(IIFE)

Immediately-Invoked Function Expression

- ( function() { console.log("Ryu"); } )(); F 함수 호출 없이 자동으로 실행되는 함수

F 위와 같이 하면 콘솔에 텍스트가 출력됨

- ( function( lastName ) { console.log( lastName ); } )( "Ryu" );

F 위와 같이 파라미터를 자동실행함수에 전달할 수도 있음.

F 위와 같은 함수를 IIFE라 하며, jQuery에서 많이 볼 수 있음.

¡ 변수 유효범위(scope)

Ÿ 유효범위(scope) 란 JavaScript에서 변수, 객체, 함수들에 접근할 수

있는 범위에 대한 설정이다.

Ÿ Global 변수 = 전역변수(全域變數)

- Global 변수란 페이지의 어떤 곳에서도(순서적인 위치 뿐만 아니라 함수

내에서나 다른 모든 영역에서) 접근 가능한 변수를 말한다.

- 일반적으로 <script> </script> 안에 바로 추가된 변수, 객체, 함수들은 페


이지의 어디에서나 접근 가능하다.

- 전역변수 범위에서 키워드 var 는 선택적이다. 사용할 수도 있고 사용하지

않아도 된다.

- 예) 아래 두 변수 사용은 같은 결과를 보여준다.

<script>�var�myval�=�"test";�</script>

<script>�myval�=�"test";�</script>

Ÿ Local 변수 = 지역변수(地域變數)

- 지역변수는 일반적으로 함수 안에서만 사용 가능한 변수를 말한다.

- 함수 안에서는 전역변수 지역변수 모두 사용할 수 있지만 지역변수를 함수

를 벗어나면 사라진다.

- 지역변수의 유효 범위는 사용된 구문 또는 함수 내에 한정된다.

- 함수 안에서는 전역변수와 같은 이름의 변수를 지역변수로 사용할 수 있

다.

Ÿ Global vs Local 변수 예제

<script>��

��var�num�=�0�//전역변수�num�선언�및�초기값�0�할당

��function�myfunc()�{�//�함수�myfunc�생성

��num�=�10��//전역변수�num에�접근,�10�할당하도록�코딩됨

��}

��myfunc();��//함수�호출(호출결과�전역변수�num에�10�할당)

��console.log(num);�//�10�출력(변경된�전역변수�num은�10)

��function�myfunc2()�{�//�함수�myfunc2()�생성

��var�num�=�30��//�var를�붙임으로써�지역변수�num�선언

��console.log(num);�//�30�출력(바로�위에�선언된�지역변수�값)�

��}

��myfunc2();��//함수�호출,�myfunc2에�할당된�num은�지역변수이므로�

��//전역변수�num에는�영향을�미치지�않음

��console.log(num);�//�10�출력,�여전히�전역변수�num은�10

</script>


Ÿ 변수 Hoisting

- 변수 Hoisting이란 함수 내에서 변수가 선언되었을 경우 해당 변수 선언이

함수의 처음으로 올라가는 것을 말함

- [중요] 변수의 선언만 위로 올라가고 변수에 할당된 값은 올라가지 않음.

따라서 아래 왼쪽 코드에서 첫 번째 num은 지역변수로 선언만 된 num을

출력하려고 시도하였으므로 undefined 에러가 발생함.

- 모든 변수는 항상 코드의 윗부분에 선언 또는 초기화 해주는 것이 좋다

Ÿ 함수 Hoisting

- 함수 Hoisting이란 변수 Hoisting와 마찬가지로 코드 내에서 항상 함수는

상위로 올라가서 실행됨을 말한다. 함수는 변수보다도 상위로 올라가서 선

언되는 것으로 재조정된다.

- 함수는 변수와 달리 코드 순서상 나중에 선언해도 위로 올라오므로 에러

없이 처리된다.


Ÿ 함수 재정의(overriding)

- 함수 재정의란 이미 존재하는 함수(사용자정의 함수 또는 내장함수)를 다

시 정의하는 것임

- 상세 설명은 객체지향 프로그래밍(Object-Oriented-Programming) 참조

- 내장 함수 alert() 재정의 예제F alert() 는 메시지 박스를 표시해주는 대표적인 내장함수임

F alert("Hello");

F 아래 예제는 화면에 팝업되는 alert 상자의 기능을 무시하고

대신에 입력된 텍스트를 콘솔에 출력해주는 것으로 재정의

하는 것임.

<script>

��window.alert�=�function(str)�{�

��var�str�=�str�||�"no�string";

��console.log(�str�);

��};

��alert("hello");

</script


JavaScript HTML Events

¡ HTML Events란?

Ÿ HTML Events는 HTML 요소들(elements)에 발생되는 일(사건)을 말

한다.

Ÿ JavaScript를 사용하면 발생되는 event들에 반응할 수 있다.

Ÿ HTML Event 중에는 브라우저 스스로 발생시키는 경우도 있고 사용

자에 의해 발생되는 경우도 있다.

- 브라우저 스스로 발생시키는 경우 : onload, onunload, …

- 사용자에 의해 발생되는 이벤트들 : onclick, onmouseover, …

¡ Event Handlers- Event Handler란 웹 페이지에서 발생하는 Event들을 처리하기 위해 사용되

는 방법을 말한다.

- <button onclick='this.innerHTML=new Date();'>show time</button>

F 위 예에서 onclick='this.innerHTML=new Date();' 부분은 버튼에 발생한 click event를

처리하기 위한 event handler이다. 이 중에 onclick은 event listener라고 하며 event

가 발생할 때 이를 캐치(catch)하는 역할을 한다.

- <button onclick='callMyFunction();'></button>F Event Handler는 직접 스크립트 코드를 실행하는 것 뿐만 아니라 사용자정의 함수

또는 built-in 함수를 호출할 수도 있다.

¡ addEventListener() Method

Ÿ addEventListener() 메서드는 문서 내에 event handler를 추가하는

내장 메서드(built-in method)이다.


Ÿ 이 메서드를 활용하면 in-line event handler 대신에 스크립트 코드

에서만 event handler를 추가할 수 있다.

<button�id="clickme">show�time</button>

<script>

��document.getElementById("clickme").addEventListener("click",function()�{

��document.getElementById("clickme").innerHTML=new�Date();

��});

</script>

<button�id="clickme">show�time</button>

<script>

��document.getElementById("clickme").addEventListener("click",showTime);

��function�showTime()�{


��}

</script>

¡ removeEventListener() Method

Ÿ removeEventListener() 메서드는 HTML 요소에 추가한 이벤트 핸들

러를 제거한다. 핸들러가 제거되면 이벤트가 발생해도 사전에 지정

한 동작이 실행되지 않는다.

Ÿ 이 메서드는 addEventListener에서 외부 함수를 호출한 경우에만 작

동할 수 있다. 예를 들어 아래와 같이 이름없는(annonymouse) 함

수를 사용한 경우에는 적용할 수 없다.

document.getElementById("clickme").addEventListener("click",function()�{�…�});

document.getElementById("clickme").removeEventListener("click");�//작동하지�않는다


Event 속성 설명

onafterprint 문서가 출력된 후에 발생하는 이벤트 <body onafterprint="myFunction()">

onbeforeprint 문서를 출력하기 직전에 발생하는 이벤트 <body

onbeforeprint="myFunction()">

onbeforeunload 문서를 닫기 직전에 발생하는 이벤트 <body onbeforeunload="return

myFunction()">

onerror 문서에 에러가 발생했을 대 발생하는 이벤트

onhashchange 문서 URL의 해시링크가 바뀔 때 발생하는 이벤트

예)index.html#aboutàindex.html#history

onload 문서 읽기가 모두 끝난 다음에 발생하는 이벤트

onmessage 메시지가 발생했을 대 발생되는 이벤트

onoffline 브라우저가 오프라인 상태가 되었을 때 발생하는 이벤트

ononline 브라우저가 온라인 상태가 되었을 때 발생하는 이벤트

onpagehide 하나의 페이지를 떠나 다른 페이지로 이동할 때 발생하는 이벤트

onpageshow 다른 페이지에서 현재 페이지로 이동할 때 발생하는 이벤트

onpopstate 브라우저의 history가 변경되었을 때 발생하는 이벤트

onresize 브라우저의 창 사이즈가 변경되었을 때 발생하는 이벤트

onstorage Web Storage영역이 갱신(update)되었을 때 발생하는 이벤트

onunload 문서가 닫힌 다음에 발행하는 이벤트

Ÿ removeEventListener() 작동 코드 예제

document.getElementById("clickme").addEventListener("click",showTime);

function�showTime()�{


}

document.getElementById("clickme").removeEventListener("click",showTime);

¡ HTML Window Event들

Ÿ window 객체에서 발생되는 이벤트들 body 태그에 적용됨

- 예) <body onload="myfunction();"> - HTML5 새 이벤트


¡ HTML Form Event들

Ÿ HTML Form 객체에서 발생되는 이벤트들 Form 요소들에 적용됨

- 예) <input type="text" onfocus="myfunction();">

Event 속성 설명

onblur폼 요소들이 포커스를 잃었을 때 발생하는 이벤트.즉, 선택이 다른 것으로

옮겨갔을 때…

onchange주로 select에서 option을 변경했을 때 발생하는 이벤트

<select onchange="my()">

oncontextmenu 요소에 마우스 오른쪽 버튼을 누르면 추가되는 메뉴. 현재 Firefox만 지원됨

onfocus 폼 요소들이 포커스를 가질 때 발생하는 이벤트

oninput 폼 요소에 사용자 입력이 있을 때 발생하는 이벤트.

oninvalid 폼 요소에 입력된 데이터가 유효할 때 발생하는 이벤트

onreset 폼에서 Reset 버튼을 클릭하거나 해서 폼 내용이 리셋되었을 때 발생하는

이벤트

onsearch <input="search">와 같은 검색 필드에 검색어를 입력했을 때 발생하는 이벤트

onselect 폼 요소에서 텍스트가 선택되었을 대 발생하는 이벤트

onsubmit 폼을 전송할 때 발생하는 이벤트. <form onsubmit="returncheckform()">

¡ HTML Keyboard Event들

Ÿ 키보드를 누르고 뗄 때 발생하는 이벤트들

- 예) <input type="text" onkeydown="myfunction();">

Event 속성 설명

onkeydown 키보드의 키를 누를 때 발생하는 이벤트. 텍스트가 입력된 후에 발생하는 이벤트

onkeypress 키보드의 키를 누를 때 발생하는 이벤트. 텍스트가 입력되기 전에 발생하는 이벤트

onkeyup 키보드의 키를 눌렀다 뗄 때 발생하는 이벤트

HTML Event 참고

http://www.w3schools.com/jsref/dom_obj_event.asp


문자열(Strings) 다루기

¡ 문자열(Strings)이란?

Ÿ 문자열이란 문자들의 집합이며 일반적으로 따옴표(‘ 또는 “)안에 입

력하는 값이다

Ÿ 숫자나 특수문자로 이루어진 문자들의 집합도 문자열이 될 수 있음

Ÿ JavaScript에서 문자열 사용 예

<script>

��var�username�=�"홍길동";

��var�phone�=�"010-1234-5678";

��var�birth�=�"19801230";

��var�greetings�=�"안녕하세요.�저는�'홍길동'�입니다.";

��var�myskills�=�'저는�"JavaScript�Coding",�"PHP�Coding"을�합니다';

��var�myprofile�=�"이름:"�+�username�+�",�전화번호:"�+�phone;

��myprofile�+=�",�생년월일"�+�birth�+�",�기술:"�+�myskills;

��myprofile�+=�",�인사말씀:"�+�greetings;

��alert(myprofile);

</script>


¡ 긴 문자열 처리 : 문자열 나누고 합치기

Ÿ 문자열이 너무 길어서 화면에 모두 보이지 않거나 코드를 좀 더 시

각적으로 정리되도록 하기 위해서는 긴 문자열을 나누어서 합칠 필

요 있음

Ÿ 긴 문자열을 합치기 위해서는 기본적으로 + 연산자를 사용하며, 백

슬래시( \)를 사용하기도 하지만 일부 브라우저에서 지원하지 않기

도 하고 \ 뒤에 공백이나 다른 문자가 들어가면 에러가 발생하므로

+ 연산자만 사용할 것을 권장함

Ÿ 긴 문자열 합치기 예 (아래 두 예제는 같은 결과를 보여 줌)

<script>

��var�lorem�=�"Lorem�ipsum�dolor�sit�amet,�consectetur�adipisicing�elit.�"�+

��"Nesciunt,�placeat.�Natus�quibusdam�corporis�velit�aspernatur,�"�+

��"temporibus�consectetur,�tenetur�praesentium�illum�vitae�et�vero,�"�+�

��"explicabo�nesciunt�magni,�perspiciatis�fuga�error.�In.";

</script>

<script>

��var�lorem�=�"Lorem�ipsum�dolor�sit�amet,�consectetur�adipisicing�elit.�";

��lorem�+=��"Nesciunt,�placeat.�Natus�quibusdam�corporis�velit�aspernatur,�";

��lorem�+=��"temporibus�consectetur,�tenetur�praesentium�illum�vitae�et�vero,�";

��lorem�+=��"explicabo�nesciunt�magni,�perspiciatis�fuga�error.�In.";

</script>


¡ 문자 갯수 알아내기 – length

Ÿ 문자열.length

Ÿ 문자열 또는 문자열 변수에 length 속성을 통해 문자 개수를 알아낸

다.

Ÿ String.length 사용 예

<script>

��var�username�=�"홍길동";

��console.log(�username.length�);

��console.log(�"abcdefg".length�);

</script>

¡ 특수 문자 처리 – escape

Ÿ 자바스크립트 문자열에서 따옴표를 표시하거나

Ÿ 줄바꿈, 탭 등과 같이 특수한 기능을 하는 문자를 포함하고자 할 때

Ÿ 따옴표 사용


코드 설명 결과

\'작은 따옴표를 문자열에 포함

(예, '안녕하세요 \'홍길동\'입니다')안녕하세요 '홍길동'입니다

\"큰 따옴표를 포함

(예, "안녕하세요 \"홍길동\"입니다')안녕하세요 "홍길동"입니다

\\백슬래시 자체를 문자열에 포함

(예, "백슬래시 기호는 \\ 입니다")백슬래시 기호는 \입니다

\n줄 바꿈 처리

(예, "안녕하세요 \n홍길동입니다")

안녕하세요

홍길동입니다

\t탭문자 추가

(예, "안녕하세요\t홍길동입니다")안녕하세요 홍길동입니다

<script>

��var�greetings�=�"안녕하세요?�제�이름은�"홍길동"�입니다.";

��console.log(�greetings�);

</script>

- 처음 따옴표가 "홍길동"의 첫 번째 " 에서 닫히기 때문임.

- 만일 "홍길동"을 문자열 안에서 그대로 표시하고 싶다면 다음과 같이 따옴

표 앞에 \ (백슬래시, 한글 폰트에서는 \)를 넣어주어야 함.

- \ 또는 \ 를 escape 문자라고 함.

<script>

��var�greetings�=�"안녕하세요?�제�이름은�\"홍길동\"�입니다.";

��console.log(�greetings�);

</script>

Ÿ 다양한 특수 문자 사용

- 큰 따옴표 안에 작은 따옴표를 쓰거나 그 반대의 경우는 escape 문자가

필요 없음

- 예) "안녕하세요.'홍길동'입니다", '안녕하세요."홍길동"입니다'


¡ 하나의 문자 추출하기 : charAt()

Ÿ 문자열에서 문자들의 index 번호(첫 문자는 0부터 시작)에 해당하는

문자를 추출하는 메서드

<script>

��var�str�=�"ABCDEFGHIJKLMNOPQRSTUVWXYZ";

��var�firstChar�=�str.charAt(0);�

��console.log(�firstChar�);�//�A�출력됨

��var�lastChar�=�str.charAt(�str.length-1�);�

��console.log(�lastChar�);�//�Z�출력됨

</script>

F 문자열에서 각 문자의 index 번호는 0부터 시작하므로 전체 문자 갯수에서 1 빼주어

야 마지막 문자의 index가 됨. 전체 갯수는 26 마지막 index는 25임

<script>


��var�rts�=�"";

��for(�var�i=(str.length-1);�i�>=�0;�i--)�{

��rts�+=�str.charAt(i);

��}

��console.log(�rts�);�//ZYXWVUTSR….

</script>

위쪽과 아래 코드 모두 변수 rts에 알파벳을 뒤집어서 대입한 예제임. 왼쪽은 반복

문과 charAt() 메서드를 사용한 경우이고, 아래는 문자열을 배열로 나누고 그 배열

을 뒤집어서 다시 합치는 방식으로 처리한 경우임

<script>


��var�rts�=�str.split("").reverse().join("");

��console.log(�rts�);�//ZYXWVUTSR…�출력됨

</script>


¡ 특정 index의 문자 코드 추출 : charCodeAt()

Ÿ 문자열에서 특정 index에 위치하는 문자의 코드를 추출하는 메서드

Ÿ 반환되는 문자 코드는 Unicode임

Ÿ 숫자 범위는 0~65535

<script>

��var�str�=�"Web�Design�과정";

��var�code�=�str.charCodeAt(4);�

��console.log(code);�//�68�출력�D의�코드�값

��var�code2�=�str.charCodeAt(11);�

��console.log(code2);�//�44284

</script>

¡ 문자 코드를 문자로 변환 : String.fromCharCode()

<script>

��var�str�=�String.fromCodePoint(65,66,67);

��console.log(str);�//�ABC�출력

��var�str2�=�String.fromCodePoint(0xAC00);

��console.log(str2);�//�가�출력

</script>

F Unicode 문자 테이블 : https://unicode-table.com/en/#control-character

¡ 특정 문자(열)의 위치 값 얻어오기 : indexOf(), lastIndexOf()

Ÿ indexOf(); 특정 문자 또는 문자열이 나타나는 첫 번째 위치를 반환

Ÿ lastIndexOf(); 특정 문자 또는 문자열이 나타나는 마지막 위치 반환


¡ 문자열의 특정 index 범위의 문자열 반환 : slice()

Ÿ slice( start index, end index)

Ÿ 예) slice( 3, 7) // index 3에서부터 7 직전까지의 문자열 반환

<script>

��var�str�=�"My�Name�is�Kim";

��var�newStr�=�str.slice(11,�14);

��console.log(�newStr�);�//Kim�출력됨

��var�newStr2�=�str.slice(-11,�-7);

��console.log(�newStr2�);�//Name�출력됨

��var�newStr3�=�str.slice(8);�//8번�째�index�부터�끝까지�반환

��console.log(�newStr3�);�//is�Kim�출력됨

��var�newStr4�=�str.slice(-11);�//뒤에서부터�11번�째�index�부터�끝까지�반환

��console.log(�newStr4�);�//Name�is�Kim�출력됨

</script>

F str 변수의 index 11은 K, 12는 i, 13번 째는 m으로 11번 째 index인 K부터 14의 직

전인 13번 째 index까지의 문자열은 Kim이므로 Kim이 반환됨

- 부호를 사용하면 반대로 추출하여 반환홤

숫자 하나만 사용하면 해당 index 부터 끝까지 반환

¡ slice와 유사한 : substring()

Ÿ substring( start, end); // start에서 end 직전까지의 문자열 반환

Ÿ Slice()와 차이는 – 부호를 사용할 수 없다는 점

¡ 문자열의 특정 위치부터 지정한 수 만큼 문자열 반환 : substr()

Ÿ substr( start, length )

Ÿ 예) substr( 3, 3 ) // 3번째 문자부터 3개의 문자를 추출하여 반환


��//소문자�d로�시작하는�design이�없으므로�false(-1)

��console.log(res);

��var�res2�=�str.toLowerCase().indexOf("design");

��//str의�모든�문자를�소문자로�변환하여�web을�찾은�결과�4번�index에서�찾음(4)

��console.log(res2);

</script>

¡ 문자열 또는 배열 합치기 : concat() 또는 +

Ÿ "문자열".concat(" ", "합치기"); // 문자열 합치기

Ÿ "문자열" + " " + "합치기" 와 같은 결과

<script>

��var�str1�=�"Web";

��var�str2�=�"Design";

��var�str3�=�str1.concat("�",�str2);�//Web�Design�출력

��var�str4�=�str1�+�"�"�+�str2;�

��console.log(str3);�//Web�Design�출력

��console.log(str4);�//Web�Design�출력

</script>

<script>

��//배열�합치기

��var�arr1�=�["Seoul",�"Daejeon",�"Daegu",�"Busan"];

��var�arr2�=�["전주",�"광주",�"목포",�"여수"];

��var�arr3�=�arr1.concat(arr2);

��console.log(arr3);�

��//["Seoul",�"Daejeon",�"Daegu",�"Busan","전주",�"광주",�"목포",�"여수"]�출력

</script>

¡ 문자열을 쪼개서 배열로 만들기: split()

Ÿ 문자열을 특정 문자로 구분하여 쪼개서 배열로 변환

Ÿ "a,b,c".split(","); //쉼표로 문자열을 쪼개서 배열 ["a","b","c"]로 변환


¡ 문자열 앞 뒤의 공백 제거: trim()

<script>

��var�str�=�"��Web�Design��";

��var�str2�=�str.trim();

��console.log(str2);�//앞�뒤�공백�없이�Web�Design�출력�

</script>

¡ 숫자, 배열 등을 문자열로 변환: toString()<script>

��var�a�=�10;

��console.log(�a�+�1�);�//숫자�10에�1을�더해서�11�출력

��console.log(�a.toString()�+�1�);�//문자열로�변환된�"10"과�1을�합쳐서�101�출력

��console.log(�a.toString(2)�);�//10을�2진수로�변환해서�1010�출력

��console.log(�a.toString(16)�);�//10을�16진수로�변환해서�a�출력

��console.log(�(255).toString(16)�);�//255를�16진수로�변환해서�ff�출력

��var�b�=�[1,�2,�3,�4,�5];

��console.log(�b.toString()�);�//배열을�문자열로�변환해서�1,2,3,4,5�출력

</script>

숫자(Numbers) 다루기¡ 숫자(Numbers)란?

Ÿ 자바스크립트는 단 하나의 숫자 타입을 가진다.

Ÿ 소수점을 사용하거나 사용하지 않는 숫자를 사용할 수 있다.

Ÿ Hexa 코드를 사용할 수 있다.


¡ 값을 숫자로 변환 : Number()

Ÿ 문자열, true / false, Date 등을 숫자로 변환

Ÿ 숫자로 변환하지 못화면 NaN 반환

<script>

��var�a�=�"3";

��console.log(�Number(a)�);//숫자�3�출력

��var�b�=�"abc";

��console.log(�Number(b)�);//숫자로�변환할�수�없으므로�NaN

��var�c�=�"123abc";

��console.log(�Number(c)�);//숫자로�변환할�수�없으므로�NaN��

��var�d�=�true;

��var�e�=�false;

��console.log(�Number(d)�+�"/"�+�Number(e)�);//true는�1로,�false�=�0으로�변환

��console.log(�Number(�new�Date()�)�);

��//1482375958390�과�같이�숫자로�변환(날짜에�따라�값은�다름)

��//1970년�1월�1일부터�시간을�밀리세컨드(1/1000초)로�계산한�날짜�값

</script>

¡ 주어진 값을 정수형 값으로 변환: parseInt()

Ÿ 숫자와 문자열이 섞인 경우에도 변환하나 앞부분에 포함된 숫자만

해당

Ÿ 문자로만 된 경우에는 변환 불가

Ÿ parseInt(값, [진수값])

- [진수값] = 2,8,10,16 중 하나 선택사항이지만 사용 권장

<script>

��var�a�=�"3";

��console.log(�parseInt(a,10)�);//숫자�3�출력

��var�b�=�"abc";

��console.log(�parseInt(b,10)�);//숫자로�변환할�수�없으므로�NaN

��var�c�=�"123abc";

��console.log(�parseInt(c,10)�);//앞�부분의�숫자만�변환해서�123�출력


��var�d�=�"abc123";

��console.log(�parseInt(d,10)�);//숫자로�변환할�수�없으므로�NaN

��var�e�=�"3.14159";

��console.log(�parseInt(e,10)�);//3.14159를�정수로�반환하므로�3

��console.log(�parseFloat(e)�);//소수점�포함하여�변환하려면�parseFloat()�사용하여�3.14159�출력��

��var�d�=�"11�22�33";

��console.log(�parseInt(d,10)�);

��//첫�번째의�숫자만�변환하여�11�출력(11�뒤의�공백때문에�그�뒤로는�변환하지�않음)

��console.log(�parseInt("0xFF",16)�);�//16진수�0xFF를�10진수로�변환하여�255�출력

��console.log(�parseInt("1010",2)�);�//2진수�1010을�10진수로�변환하여�10�출력

��console.log(�parseInt("01",10)�);�//1�출력

</script>

¡ 주어진 값을 부동소수점 숫자로 변환: parseFloat()

Ÿ 숫자와 문자열이 섞인 경우에도 변환하나 앞부분에 포함된 숫자만

해당

Ÿ 문자로만 된 경우에는 변환 불가

Ÿ parseFloat(값)

<script>

��console.log(�parseFloat("123")�);//숫자�123�출력

��console.log(�parseFloat("3.14")�);//숫자�3.14�출력

��console.log(�parseFloat("5�persons")�);//숫자�5�출력

��console.log(�parseFloat("five�persons")�);//숫자로�변환할�수�없으므로�NaN

��console.log(�parseFloat("0.0314E+2",10)�);//숫자�3.14�출력

</script>


¡ 수학적인 값(속성)과 처리 메서드

Ÿ Math는 JavaScript에서 수학적 상수 값(예,Math.PI)이나 수학적 계산

을 위한 메서드(예,Math.random())를 제공한다.

<script>

��//원주율�값�

��console.log(�'Math.PI�=�'�+�Math.PI�);�//3.141592653589793

��//주어진�값의�절대값�출력

��console.log(�'Math.abs(-2)�=�'�+�Math.abs(-2)�);�//�2

��console.log(�'Math.abs("-2")�=�'�+�Math.abs("-2")�);�//�2

��//주어진�값보다�같거나�큰�쪽의�정수�

��console.log(�'Math.ceil(0.75)�=�'�+�Math.ceil(0.75)�);//�1

��console.log(�'Math.ceil(1.25)�=�'�+�Math.ceil(1.25)�);//�2

��console.log(�'Math.ceil(-1.8)�=�'�+�Math.ceil(-1.8)�);//�-1�

��//주어진�작거나�같은�아래�쪽의�정수

��console.log(�'Math.floor(1.25)�=�'�+�Math.floor(1.25)�);//�1

��console.log(�'Math.floor(-1.8)�=�'�+�Math.floor(-1.8)�);//�-2

��console.log(�'Math.floor(0.75)�=�'�+�Math.floor(0.75)�);//�0

��//주어진�값에서�가까운�정수

��console.log(�'Math.round(0.75)�=�'�+�Math.round(0.75)�);//�1�

��console.log(�'Math.round(0.45)�=�'�+�Math.round(0.45)�);//�0

��//주어진�숫자�중�가장�큰�수�추출

��console.log(�'Math.max(1,2,3)�=�'�+�Math.max(1,2,3)�);�//�3

��console.log(�'Math.min(1,2,3)�=�'�+�Math.min(1,2,3)�);�//1

��//주어진�첫번째�숫자를�두�번째�숫자만큼�제곱한�값

��console.log(�'Math.pow(2,3)�=�'�+�Math.pow(2,3)�);�//�8

��//랜덤�숫자�반환.�실행할�때마다�0~1�사이�다른�숫자

��console.log(�'Math.random()�=�'�+�Math.random()�);�//�예�0.6138321157532207

��//랜덤�숫자�반환.�1부터�10�사이의�랜덤�숫자�추출하기�예제

��console.log(�'Math.floor((Math.random()�*�10)�+�1)�=�'�+�Math.floor((Math.random()�*�10)�+�1)�);�

��//랜덤�숫자�반환.�1부터�100�사이의�랜덤�숫자�추출하기�예제

��console.log(�'Math.floor((Math.random()�*�100)�+�1)�=�'�+�Math.floor((Math.random()�*�100)�+�1)�

);�

��//주어진�숫자들�중�가장�큰�수�구하기�

��console.log(�'Math.max(1,2,3,4,5)�=�'�+�Math.max(1,2,3,4,5)�);�//�5


��//주어진�숫자들�중�가장�작은�수�구하기�

��console.log(�'Math.min(1,2,3,4,5)�=�'�+�Math.min(1,2,3,4,5)�);�//�1

</script>


날짜 시간 다루기

¡ Date() - 시스템의 현재 날짜와 시간 얻어오기

Ÿ Date() 함수는 시스템(서버가 아니고 JavaScript를 실행하고 있는 컴

퓨터)의 현재 날짜와 시간을 반환한다.

Ÿ Date() 함수로 날짜와 시간 정보 얻어오기 예제

<!DOCTYPE�html>

<html�lang:�"en">

<head>

�<meta�charset:�"UTF-8">

�<title>Date()</title>

</head>

<body>

�<script�type:�"text/javascript">

��var�d�=�new�Date();

��console.log(�"new�Date():�"�+�d�);�//날짜와�시간�전체를�문자열로�반환

��console.log(�"getFullYear():�"�+�d.getFullYear()�);�//연도를�반환

��console.log(�"getMonth():�"�+�d.getMonth()�);�//월을�숫자로�반환(0부터�시작,�0은�1월)

��console.log(�"getDate():�"�+�d.getDate()�);�//날짜를�반환

��console.log(�"getDay():�"�+�d.getDay()�);�//요일을�반환(0:�일요일,�0~6)

��console.log(�"getHours():�"�+�d.getHours()�);�//시간을�반환

��console.log(�"getMinutes():�"�+�d.getMinutes()�);�//분을�반환

��console.log(�"getSeconds():�"�+�d.getSeconds()�);�//초를�반환

��console.log(�"getMilliseconds():�"�+�d.getMilliseconds()�);�//밀리세컨드(1/1000초)를�반환

��console.log(�"getTime():�"�+�d.getTime()�);�//1970년�1월�1일부터의�시간을�millisecond�단위로�반환

��console.log(�"toString():�"�+�d.toString()�);�//날짜와�시간�전체를�문자열로�반환.�new�Date()와�같다.

��console.log(�"toDateString():�"�+�d.toDateString()�);�//Sat�Jan�20�2018

��console.log(�"toDateString():�"�+�d.toUTCString()�);�//국제�표준시(GMT)를�문자열로�반환

��console.log(�"getUTCFullYear():�"�+�d.getUTCFullYear()�);�//국제�표준시(GMT)�연도를�반환

��console.log(�"getMonth():�"�+�d.getMonth()�);�//월을�숫자로�반환(0부터�시작,�0은�1월)

��console.log(�"getUTCDate():�"�+�d.getUTCDate()�);�//국제�표준시(GMT)�날짜를�반환

��console.log(�"getUTCDay():�"�+�d.getUTCDay()�);�//국제�표준시(GMT)요일을�반환(0:�일요일,�0~6)

��console.log(�"getUTCHours():�"�+�d.getUTCHours()�);�//국제�표준시(GMT)시간을�반환

��console.log(�"getUTCMinutes():�"�+�d.getUTCMinutes()�);�//국제�표준시(GMT)분을�반환

��console.log(�"getUTCSeconds():�"�+�d.getUTCSeconds()�);�//국제�표준시(GMT)초를�반환

��console.log(�"getUTCMilliseconds():�"�+�d.getUTCMilliseconds()�);�//국제�표준시(GMT)밀리세컨드

(1/1000초)를�반환

�</script>

</body>

</html>


¡ 날짜와 시간 설정

Ÿ Date() 함수를 이용해서 날짜와 시간을 설정할 수 있다.

Ÿ 단, JavaScript를 통해서 설정된 날짜와 시간은 시스템의 날자와 시

간을 바꾸는 것은 아니며 자바스크립트가 페이지에서 실행되는 동

안만 유지되는 설정 값이다.

Ÿ 날짜와 시간 설정 예제


<!DOCTYPE�html>

<html�lang="en">

<head>

�<meta�charset:�"UTF-8">

�<title>Date()</title>

</head>

<body>

�<script�type="text/javascript">

��var�d1�=�new�Date();

��console.log(�"현재�날짜와�시간:�"�+�d1�);�//날짜와�시간�전체를�문자열로�반환

��var�d2�=�new�Date(2019,0,31);�//날짜를�2019년�1월�31일로�맞춰서�d2에�저장

��console.log(�"새로운�날짜와�시간:�"�+�d2�);�//새로운�날짜와�시간�전체를�문자열로�반환

��d2.setFullYear(2020);

��d2.setMonth(11);

��d2.setDate(21);

��d2.setHours(7);

��d2.setMinutes(54);

��d2.setSeconds(15);

��console.log(�"날짜와�시간을�변경한�후:�"�+�d2�);�//새로운�날짜와�시간�전체를�문자열로�반환

�</script>

</body>

</html>

[응용예제] JavaScript 달력 만들기

다음 소소코드는 JavaScript Date() 함수를 활용하여 화면에 달력을 출력해주고 이전달, 다음달, 이전년도,

다음연도, 오늘날짜로 이동하는 달력 예제이다. 코드에 대한 설명은 코드 안에 주석으로 추가되어 있다. 예제를

학습하고 다양한 응용예제를 만들어보자.


<!DOCTYPE�html>

<html�lang="en">

<head>

�<meta�charset="UTF-8">

�<title>JavaScript�Calendar</title>

�<style�type="text/css">

��.calneder-header�{

��width:�100%;

��height:�30px;

��margin-bottom:�5px;

��}

��.calneder-header�>�div�{

��float:�left;

��width:�33.333%;

��}

��#year-month�{

��text-align:�center;

��}

��.calneder-header�.next-btns�{

��text-align:�right;

��}

��.calendar-table�{

��border-collapse:�collapse;

��width:�100%;

��}

��.calendar-table�thead�td�{

��background-color:�#E5E5E5;

��}

��.calendar-table�tr�td:first-child�{

��color:�#FF0000;

��}

��.calendar-table�tr�td:last-child�{

��color:�#0000FF;

��}��

��.calendar-table�td�{

��border:�1px�solid�#666;


��padding:�10px;

��}

��.today�{

��background-color:�#C0DFE8;

��}

��.calendar-footer�{

��margin-top:�10px;


��}

�</style>

</head>

<body>

�

�<div�class="calneder-header">

��<div�class="prev-btns">

��<button�onclick="moveYearMonth('Y',�-1)"><<이전년도</button>

��<button�onclick="moveYearMonth('M',�-1)"><이전달</button>

��</div>

��<div�id="year-month"></div>

��<div�class="next-btns">

��<button�onclick="moveYearMonth('M',�1)">다음달></button>

��<button�onclick="moveYearMonth('Y',�1)">다음년도>></button>

��</div>

�</div>

�<div�id="calendar"></div>

�<div�class="calendar-footer"><button�onclick="goToday()">오늘�날짜로</button></div>


��var�currentYear,�currentMonth;�//년,월�변경�시�값을�기억하기�위한�전역�변수�선언

��goToday();�//페이지에�처음�들어오면�goToday함수�실행하여�오늘�날짜�달력�표시

��//달력을�화면에�표시해주는�함수

��function�calendar(year,month)�{

��//현재�출력중인�년도를�기억하기�위한�변수�currentYear의�값을�전달받은�인수�year의�값으로�변경�

��currentYear�=�year;�

��//현재�출력중인�월을�기억하기�위한�변수�currentMonth�값을�전달받은�인수�month�값으로�변경�

��currentMonth�=�month;

��//월별�날자�수�배열,�2월은�해마다�다르므로�getFebuaryDays�함수로�구함

��var�lastDaysOfYear�=�[31,getFebuaryDays(year),31,30,31,30,31,31,30,31,30,31];

��var�lastDayOfMonth�=�lastDaysOfYear[month];�//선택된�달의�마지막�날짜�구하기

��var�firstDate�=�new�Date(year,�month,�1);�//선택된�년월의�1일을�기준으로�Date�생성

��//선택된�년월의�마지막�날을�기준으로�Date�생성

��var�lastDate�=�new�Date(year,�month,�lastDayOfMonth);�

��var�weekOfFirstDay�=�firstDate.getDay();//�선택된�달의�1일의�요일�구하기

��var�weekOfLastDay�=�lastDate.getDay();//�선택된�달의�1일의�요일�구하기

��document.getElementById("year-month").innerHTML�=�year�+�"."�+�(month+1);

��//달력�테이블�시작하기

��var� calendarTable� =� "<table� class='calendar-table'><thead><tr><td>일</td><td>월</td><td>화

</td><td>수</td><td>목</td><td>금</td><td>토</td></tr></thead><tbody>";

��//1일부터�선택된�달의�마지막�날까지�반복

��var�week�=�0;�//요일을�일요일로�초기화(반복문에서�0~6�반복)

��for(�var�i=1;�i<=lastDayOfMonth;�i++�){

��if(�week�===�0�)�calendarTable�+=�"<tr>";�//요일이�0이면�<tr>�추가

��if(�i�===�1�&&�weekOfFirstDay�>�0)�{�//만일�1일이�일요일이�아니면

��for(�var�j=0;j<weekOfFirstDay;�j++)�{�//1일의�요일�전까지�빈�칸<td>를�추가

��calendarTable�+=�"<td> </td>";


��week++;�//빈�칸을�하나�추가할�때마다�week(요일)�값을�1씩�늘림

��}�//j�반복문�끝

��}

��//출력되는�날짜가�시스템의�현재�년월일과�일치하면�td에�today�class�추가

��if(�year�===�new�Date().getFullYear()�&&�month�===�new�Date().getMonth()�&&�i�===�new�Date().getDate()�)�{

��calendarTable�+=�"<td�class='today'>";

��}�else�{

��calendarTable�+=�"<td>";

��}

��calendarTable�+=�i�+�"</td>";�//반목되는�i�값을�날짜로�칸�추가�

��week++;�//날짜�칸을�추가할�때마다�week(요일)�값을�1씩�늘림

��//만일�선택된�달의�마지막�날이�토요일이�아니면�마지막�날�다음부터�토요일까지�빈�칸�추가

��if(�i�===�lastDayOfMonth�&&�weekOfLastDay�<�6)�{�

��for(�var�k=weekOfLastDay+1;k<=6;�k++)�{

��calendarTable�+=�"<td> </td>";

��week++;

��}�//k�반복문�끝

��}

��if(week�>�6)�{

��calendarTable�+=�"</tr>";

��week�=�0;

��}

��}�//i�반복문�끝

��calendarTable�+=�"</tbody></table>";

��document.getElementById("calendar").innerHTML�=�calendarTable;

��}�//함수�calendar()�끝�

��//년도�별�2월의�날자수를�구하는�함수

��function�getFebuaryDays(year)�{

��var�m2days;

��if�(�(�year�%�100�!=�0�)�&&�(�year�%�4�==�0�)�||�(�year�%�400�==�0�)�){

��return�29;

��}else{

��return�28;

��}

��}

��//년도,�날짜�이동�버튼에서�호출하여�실행하는�함수

��//YM�=�값이�Y이면�년도를,�M이면�월을�변경

��//val�=�-1�도는�1,�-1이면�더해도�빼기가�되고�1은�더해줌�

��function�moveYearMonth(YM,�val)�{

��if(�YM�===�"Y"�)�{�//연도이면�값을�그대로�빼거나�더해�줌

��calendar((currentYear�+�val),currentMonth);


��}�else�if(�YM�===�"M"�)�{

��if(�currentMonth�+�val�>�11�)�{

��//월의�증감값�11(12월)�보다�크면�년도를�1�증가시켜주고�다음년도의�1월(0)로�이동

��calendar((currentYear�+�1),0);

��}�else�if(�currentMonth�+�val�<�0�)�{

��//월의�증감값이�0(1월)�보다�작으면�이면�년도를�1�감소시켜주고�다음년도의�12월(11)로�이동

��calendar((currentYear�-�1),11);

��}�else�{

��//월의�증감값이�0~11�사이에�있으면�현재년도에서�월�증감값�그대로�이동

��calendar(currentYear,(currentMonth�+�val));

��}

��}

��}

��//오늘�날짜가�포함된�달력으로�이동

��function�goToday()�{

��calendar(�new�Date().getFullYear(),�new�Date().getMonth()�);

��}

�</script>

</body>

</html>

F 소스코드 : https://pastebin.com/CFsHZKRN


배열(Arrays)

¡ 배열이란?

배열은 쉽게 표현해서 여러 개의 값을 가지는 하나의 변수이다. 배열은 숫자, 문자,

객체 등을 포함할 수 있다. 배열을 선언하는 방법은 다음 두 가지가 있다.

var�arr�=�[item1,�item2,�item3....];

var�arr�=�new�Array(item1,�item2,�item3....);

위 두가지 방법은 배열을 선언하는 같은 방법이다. 그러나 최근에는 new Array()를

사용하는 대신에 [ ]를 사용하는 것이 일반적이다. 좀 더 심플하기도 하고 읽기 쉽

고, 처리 속도가 빠르다는 이유에서이다. 앞으로 본 교재의 모든 예제는 배열을 대

괄호(brackets) 즉, [ ]를 사용할 것이다.

배열 값에 접근(access)하려면 다음과 같이 [ ]를 사용한다.

var�arr�=�[1,�2,�3,�4,�5];

var�val�=�arr[2];�//3

배열의 값은 0부터 시작하며 길이(length)-1 이 마지막 번호이다.

배열을 사용하는 이유는 간단하다. 자료에 대한 접근이 보다 더 체계적이고 관리

가능하다는 점에서이다. 예를 들어 위 배열을 변수로 사용한다면 다음과 같을 것

이다. 아래와 같이 한다면 값들에 반복문으로 접근하거나 값을 추가하거나 삭제하

는 등의 작업이 쉽지 않다.

var�arr1�=�1;

var�arr2�=�2;

var�arr3�=�3;

var�arr4�=�4;

var�arr5�=�5;


Ÿ 배열 기본 예제

<!DOCTYPE�html>

<html�lang="en">

<head>

<meta�charset="UTF-8">

<title>array</title>

</head>

<body>

<script�type="text/javascript">

��var�arr1�=�new�Array(1,�2,�3,�4,�5);

��var�arr2�=�[1,�2,�3,�4,�5];

��var�arr3�=�["red",�"green",�"blue"];

��var�arr4�=�["KIM",�23,�"010-1234-5678"];

��var�arr5�=�[

��{name:"KIM",�age:22,�phone:"010-1111-2222"},

��{name:"LEE",�age:33,�phone:"010-3333-4444"},

��{name:"PARK",�age:44,�phone:"010-5555-6666"}

��];

��console.log(�arr1[1]�);

��console.log(�arr2[arr2.length�-�1]�);




�</script>

</body>

</html>


¡ 배열의 길이 - length

배열은 길이를 갖는다. 길이란 배열에 포함된 아이템들의 개수를 말한다. 배열의

길이를 구하면 반복문 등을 활용해 배열을 처음부터 마지막 요소까지 반복하며 접

근할 수 있고 정의되지 않은 배열 번호에 접근하는 것을 막을 수도 있다.

배열의 길이는 예를 들어 5개의 요소가 포함되어 있다면 5이다. 배열의 마지막 번

호는 마지막 번호-1이다. 즉 배열[4]로 길이가 5인 배열의 마지막 번호에 접근하능

한 것이다.

Ÿ 배열 길이 구하기: 배열이름.length

var�arr�=�[1,�2,�3,�4,�5];

var size = arr.length; var lasNumber = size - 1;console.log( size ); //5console.log( lastNumber ); //4

Ÿ 배열 길이 활용 예제

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<p�id="sum"></p>


��//배열의�합계�구하기�예제

��var�arr�=�[31,�22,�41,�17,�9];

��var�sum�=�0;

��//0부터�배열의�길이보다�작을�때까지,�즉�배열의�마지막�번호까지�반복

��for(�var�i=0;�i<arr.length;�i++)�{

��sum�+=�arr[i];

��}

��document.getElementById("sum").innerHTML�=�"배열의�합�=�"�+�sum;

�</script>

</body>

</html>


¡ 배열 정렬 – sort()

Ÿ 배열을 정렬하려면 sort() 메서드를 사용한다.

Ÿ 사용법: 배열이름.sort()

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�arr1�=�[31,�22,�41,�17,�9];

��var�arr2�=�["kim",�"lee",�"park",�"choi",�"ryu"];

��arr1.sort();

��arr2.sort();


��console.log(arr2);

�</script>

</body>

</html>


¡ 배열의 숫자값 정렬과 큰 수, 작은 수 구하기

위 예제에서 배열을 정렬하였다. 그런데 arr2의 경우 알파벳 순으로 정렬되었자만

arr1은 숫자의 크기 오름차순으로 정렬되지 않았다. 대힌 [17, 22, 31, 41, 9]와 같

이 정렬되었다. 이것은 sort()가 기본적으로 문자열 정렬을 하기 때문에 앞자리의

순서에 따라 정렬한 결과이다. 41의 4보다 9가 더 크기 때문이다. 숫자를 정렬하려

면 다음과 같이 해야 한다. 아래 예제는 값을 정렬할 때 숫자들을 서로 비교하여

앞, 뒤로 보내는 방식을 사용하여 숫자를 정렬한다. 정렬을 한 후에 첫 번째 배열

은 가장 작은 수이고 마지막 배열은 가장 큰 수가 된다.

Ÿ .sort(function(a, b){return a - b});

<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>array</title>

</head>

<body>


��//배열의�숫자�정렬

��var�arr�=�[31,�22,�41,�17,�9];

��arr.sort(function(a,�b){return�a�-�b});

��console.log(arr);

��console.log("가장�작은�수="�+�arr[0]);

��console.log("가장�큰�수="�+�arr[arr.length-1]);�</script>

</body>

</html>


Ÿ 정렬을하지 않고도 큰 수와 작은 수를 구하는 방법

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��//배열의�숫자�정렬

��var�arr�=�[31,�22,�41,�17,�9];

��var�min�=�Math.min.apply(null,�arr);

��var�max�=�Math.max.apply(null,�arr);


��console.log("가장�작은�수는�"�+�min);

��console.log("가장�큰�수는�"�+�max);

�</script>

</body>

</html>

¡ 배열 요소의 값 변경

배열 요소에 접근하려면 arr[0], arr[1],... 와 같이 번호로 접근한다고 설명했다. 배

열 요소의 값을 변경하려면 이와 같이 배열 요소에 접근해서 값을 대입하면 된다.

arr[0]�=�1;

arr[1]�=�"홍길동";


이 때 없는 요소의 값을 변경하려고 하면 해당 번호의 값을 할당하고 그 앞의 번

호 요소를 비워둔다.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��//배열의�값�변경

��var�arr�=�[31,�22,�41,�17,�9];


��arr[0]�=�99;

��arr[1]�=�88;

��arr[7]�=�77;�//4번이�마지막이므로�5,6을�배워두고�7�할당

��arr[8]�=�"홍길동";�//4번이�마지막이므로�5,7을�배워두고�7�할당

��console.log(arr);�//arr�전체를�출력

��console.log(arr[5]);�//arr[5]는�empty�상태이므로�undefined�출력

��arr[6]�=�"테스트";�//empty였던�arr[6]에�값�할당

��console.log(arr[6]);�//arr[6]�출력,�"테스트"

�</script>

</body>

</html>


¡ 배열에 요소 추가하기

배열에 새로운 요소를 추가하는 방법은 몇가지가 있다. 배열의 맨 끝에 새로운 요

소를 추가하는 방법, 배열의 맨 앞에 추가하는 방법, 특정 위치에 요소를 추가하고

다른 요소들을 이동시키는 방법 등이다.

Ÿ .push() 메서드를 활용해서 배열 맨 뒤에 값 추가

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�arr�=�[31,�22,�41,�17,�9];

��console.log(arr);�//push�전에�arr�값�출력

��console.log("arr의�길이="�+�arr.length);�//push�전에�arr�길이�출력

��arr.push(77);

��console.log(arr);�//push�후에�arr�값�출력

��console.log("arr의�길이="�+�arr.length);�//push�후에�arr�길이�출력

�</script>

</body>

</html>

- .push() 메서드로 요소를 추가하면 배열의 길이도 늘어난다.


Ÿ 마지막 번호 다음에 값 추가하여 .push() 효과 실행하기

- arr[ arr.length ] = "새로운 값"; 같은 방식으로 하면 .push() 메서드를 사용

한 것과 같은 효과를 낼 수 있다. arr.length는 배열의 크기로 요소가 5개

이면 5가 된다. 이 때 배열의 마지막 번호는 4이므로 5에 새로운 요소를

추가하면 .push()를 사용한 것과 같은 효과를 낸다.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�arr�=�[31,�22,�41,�17,�9];

��console.log(arr);�//값�추가�전에�arr�값�출력

��console.log("arr의�길이="�+�arr.length);�//값�추가�전에�arr�길이�출력

��arr[�arr.length�]�=�77;

��console.log(arr);�//값�추가�후에�arr�값�출력

��console.log("arr의�길이="�+�arr.length);�//값�추가�후에�arr�길이�출력

�</script>

</body>

</html>

Ÿ .unshift()를 활용하여 배열 맨 앞에 값 추가하기

- .unshift()는 배열 맨 앞의 요소를 추가할 때 사용된다.

- .unshift() 예제


<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�arr�=�["HTML",�"CSS",�"JAVASCRIPT",�"JQUERY",�"PHP"];

��console.log(arr);�//값�추가�전에�arr�값�출력


��arr.unshift("ANGULAR");�//배열�맨�앞에�새로운�값을�추가한다.�

��console.log(arr);�//값�추가�후에�arr�값�출력


�</script>

</body>

</html>

¡ 배열에서 요소 삭제하기

Ÿ .pop() 메서드 활용 배열의 마지막 요소 삭제

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>




��console.log(arr);�//요소�제거�전에�arr�값�출력


��arr.pop();�//배열�맨�뒤의�요소를�제거한다.�

��console.log(arr);�//요소�제거�후에�arr�값�출력


�</script>

</body>

</html>

Ÿ .shift() 메서드 활용 배열의 맨처음 요소 삭제

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>





��arr.shift();�//배열�맨�앞의�요소를�제거한다.�



�</script>

</body>

</html>


Ÿ delete 로 배열의 요소를 제거하면?

- delete로도 배열의 요소를 제거할 수 있다. 그러나 이 경우 삭제된 요소는

앞의 .pop이나 .shift를 사용했을 때 배열의 특정 요소를 완전히 제거하고

배열의 길이도 바뀌는 것과 달리 해당 요소를 empty(undefined)로 남겨둔

다. 따라서 실제로 배열을 제거할 때는 delete를 사용하지 않는 것이 좋다.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>




��delete�arr[2];�//배열의�세번째�요소�delete한다


�</script>

</body>

</html>


¡ 배열 합치기 – concat()

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�clients�=�["HTML",�"CSS",�"JAVASCRIPT",�"JQUERY"];

��var�servers�=�["PHP",�"JSP",�"ASP.NET",�"PHYTHON",�"RUBY"];

��console.log(clients);

��console.log(servers);

��//배열�clients에�배열�servers를�합쳐서�새�변수�weblangs에�할당한다

��var�weblangs�=�clients.concat(servers);�

��console.log(weblangs);�//weblangs�값�출력

��//�세�개의�배열을�합쳐�새로운�배열�생성

��var�dbs�=�["MySQL","MS-SQL","ORACLE","MONGODB"];

��var�webresourses�=�clients.concat(servers,�dbs);�

��console.log(webresourses);�//webresourses�값�출력

��//배열�값으로�합치기

��var�websystems�=�webresourses.concat(["APACHE","IIS","NGINX","LIGHTHTTPD"]);

��console.log(websystems);�//websystems�값�출력

�</script>

</body>

</html>


¡ 배열 잘라서 추출하기 – slice()

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�web�=�["HTML",�"CSS",�"JAVASCRIPT",�"JQUERY",�"PHP",�"JSP",�"ASP.NET",�"MySQL",�"MS-SQL",�

"ORACLE",�"APACHE",�"IIS"];

��//배열의�특정�위치부터�요소부터�나머지를�추출해�새로운�배열에�저장

��var�servers�=�web.slice(4);�//4번째�PHP부터�추출해�servers에�저장

��console.log(servers);

��//배열의�특정�위치부터�요소부터�시작해서�두�번째�위치�직전까지�추출하여�새로운�배열에�저장

��//이�때�첫�번째�값의�요소부터�시작하고�두�번재�요소의�값은�포함하지�않고�직전까지�포함

��var�js�=�web.slice(2,4);

��console.log(js);

�</script>

</body>

</html>

¡ 배열을 문자열로 – toString(), join()

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>


<body>



��var�str�=�arr.toString();�//배열의�요소들을�쉼표(,)로�구분된�문자열로�변환

��console.log(str);�//HTML,CSS,JAVASCRIPT,JQUERY,PHP

��var�join�=�arr.join();�//배열의�요소들을�쉼표(,)로�구분된�문자열로�변환

��console.log(join);�//HTML,CSS,JAVASCRIPT,JQUERY,PHP

��var�joinStar�=�arr.join("*");�//배열의�요소들을�쉼표대신�*로�구분하여�문자열로�변환

��console.log(joinStar);�//HTML*CSS*JAVASCRIPT*JQUERY*PHP

��var�joinSlash�=�arr.join("/");�//배열의�요소들을�쉼표대신�/로�구분하여�문자열로�변환

��console.log(joinSlash);�//HTML/CSS/JAVASCRIPT/JQUERY/PHP

�</script>

</body>

</html>

¡ 문자열을 배열로 – split()

Ÿ .split() 사용법

- string.split(구분자, 개수)

Ÿ .slpit() 예제

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�str�=�"HTML,CSS,JAVASCRIPT,JQUERY,PHP";

��var�arr�=�str.split(",");�//쉽표(,)를�기준으로�문자열을�나누어�배열로�저장



��var�str2�=�"HTML/CSS/JAVASCRIPT/JQUERY/PHP";

��var�arr2�=�str2.split("/");�//슬래시(/)를�기준으로�문자열을�나누어�배열로�저장


��var�str3�=�"HTML,CSS,JAVASCRIPT,JQUERY,PHP";

��var�arr3�=�str3.split(",",�3);�//쉽표(,)를�기준으로�문자열을�나누어�3개만�배열로�저장


��var�str4�=�"Hello�World!!!.�Welcome�to�Web�Development";

��var�arr4�=�str4.split("");�//문자열의�모든�글자를�배열로�저장,�공백도�하나의�문자


��//split()응용�

��var�url�=�"http://localhost/public/assets/images/logo.png";

��var�urlArr�=�url.split("/");

��var�filename�=�urlArr[�urlArr.length�-�1�];�

��console.log(filename);

�</script>

</body>

</html>

¡ 배열채우기 – fill()

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>


<body>




��//배열의�모든�요소를�지정된�값으로�채우기

��arr.fill("WEB");�


��//배열의�모든�요소�중�첫�번째�숫자의�위치에�값부터�두�번째�숫자의�위치�직전가지�지정된�값으로�채

우기

��arr.fill("JS",�2,4);�//2,3번�요소를�"JS"로�채우기


�</script>

</body>

</html>

¡ 배열인지 확인하기 – Array.isArray()<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�str�=�"HTML,CSS,JAVASCRIPT,JQUERY,PHP";


��console.log(�Array.isArray(str)�);�//false

��console.log(�Array.isArray(arr)�);�//true

�</script>

</body>

</html>


¡ 배열 필터링 – fillter()

Ÿ 조건에 맞는 모든 값을 추출해 배열로 반환

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�arr�=�[90,91,87,45,77,93,95,97,71,99];

��//90점�이상만�추출하기�위해�filter에�적용할�함수

��function�checkA(result)�{

��return�result�>=�90;

��}

��var�arrFilter�=�arr.filter(checkA);

��console.log(arrFilter);�//[90,�91,�93,�95,�97,�99]

��//필터�안에�직접�함수를�사용하는�예제

��var�arrFilter2�=�arr.filter(function(val){�

��return�val�<�90;�

��});

��console.log(arrFilter2);

��//값이�문자열인�요소들만�추출하는�필터

��var�arr2�=�[90,"A0","A+",45,"B+",93,95,"C+",71,"F"];

��var�arrFilter3�=�arr2.filter(function(val){�

��return�typeof�val�===�"string";�

��});


��//특정�문자열을�포함하는�배열만�추출하는�필터

��var�arr3�=�["김영철","홍길동","이수영","김경희","최고다","김이박"];

��var�arrFilter4�=�arr3.filter(function(val){�

��return�val.indexOf("김")�>=�0;�

��});


�</script>

</body>

</html>


¡ 배열에서 조건에 맞는 첫 번째 값 찾기 – find()

Ÿ filter()가 조건에 맞는 값들을 모두 찾아 배열로 반환하는 반면,

find()는 조건에 맞는 값을 처음 만나면 그 값을 반환한다. 아래는

filter() 예제를 find로 바꾸었을 때의 예제이다.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�arr�=�[90,91,87,45,77,93,95,97,71,99];

��//배열에서�90점�이상인�첫�번째�값을�추출하기�위한�필터

��function�checkA(result)�{

��return�result�>=�90;

��}

��//배열에서�90점�이상인�첫�번째�값을�추출

��var�findResult1�=�arr.find(checkA);

��console.log(findResult1);�//90

��//배열에서�90점�이상인�첫�번째�값을�추출(함수�안에�필터�함수를�사용)

��var�findResult2�=�arr.find(function(val){�

��return�val�<�90;�

��});

��console.log(findResult2);�//87

��//값이�문자열인�첫�번째�값을�추출

��var�arr2�=�[90,"A0","A+",45,"B+",93,95,"C+",71,"F"];


��var�findResult3�=�arr2.find(function(val){�

��return�typeof�val�===�"string";�

��});

��console.log(findResult3);�//�A0

��//특정�문자열을�포함하는�첫�번째�값을�추출

��var�arr3�=�["김영철","홍길동","이수영","김경희","최고다","김이박"];

��var�findResult4�=�arr3.find(function(val){�

��return�val.indexOf("김")�>=�0;�

��});

��console.log(findResult4);�//김영철

�</script>

</body>

</html>

¡ 조건에 맞는 첫 번째 index 추출 – findIndex()

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�arr�=�[90,91,87,45,77,93,95,97,71,99];

��//배열에서�특정�값을�가지는�마지막�index�번호�반환

��//같이�값이�두�개�이상이면�마지막�값의�번호를�반환한다

��var�lastIndex�=�arr.lastIndexOf(77);

��console.log(lastIndex);�//4

��console.log(arr[lastIndex]);�//77

��var�arr2�=�["김영철","홍길동","이수영","홍길동","최고다","김이박"];

��var�lastIndex2�=�arr2.lastIndexOf("홍길동");


��console.log(lastIndex2);�//3

��console.log(arr2[lastIndex2]);�//홍길동

��//없는�값을�찾으면?

��var�lastIndex3�=�arr.lastIndexOf(55);

��console.log(lastIndex3);�//-1

��console.log(arr[lastIndex3]);�//undefined

��var�lastIndex4�=�arr2.lastIndexOf("길동홍");

��console.log(lastIndex4);�//-1

��console.log(arr2[lastIndex4]);�//undefined

��//찾은�값이�있는지에�따라�처리�

��var�lastIndex5�=�arr2.lastIndexOf("길동홍");

��if(�lastIndex5�>�-1�)�{

��console.log("찾는�값이�있음");

��}�else�{

��console.log("찾는�값이�없음");

��}

��var�lastIndex6�=�arr.lastIndexOf(97);

��if(�lastIndex6�>�-1�)�{

��console.log("찾는�값이�있음");

��}�else�{

��console.log("찾는�값이�없음");

��}��

�</script>

</body>

</html>


¡ 특정 값이 존재하는지 index 찾기 – indexOf()

Ÿ array.indexOf(value)

- indexOf()는 특정 값이 배열 안에 존재한다면 그 index 번호를 반환한다.

- indexOf()는 얼핏 보면 findIndex() 메서드와 유사하다. 그러나 파라미터가

다르다. findIndex()는 () 안에 함수를 호출 또는 직접 정의하여 실행하는데

indexOf는 값을 그대로 찾는다.

- 예제를 통해 indexOf()의 사용법을 알아보자.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�arr1�=�[90,91,87,45,77,93,95,97,71,99];


��var�indexNo1�=�arr1.indexOf(95);

��console.log(indexNo1);�//�6

��var�indexNo2�=�arr2.indexOf("홍길동");

��console.log(indexNo2);�//�1,�두�개의�"홍길동"�중에�처음�발견된�"홍길동"의�위치는�1

��//문자열에서�찾고자�하는�문자�또는�단어가�시작하는�처음�위치

��var�str�=�"Hello�World!!!.�Welcome�to�Web�Development";

��var�indexNo3�=�str.indexOf("Welcome");

��console.log(indexNo3);�//�16

�</script>

</body>

</html>


¡ 배열의 순서를 반대로 뒤집기 – reverse()

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�arr1�=�[90,91,87,45,77,93,95,97,71,99];


��console.log(arr1);�//[90,91,87,45,77,93,95,97,71,99]

��console.log(arr2);�//["김영철","홍길동","이수영","홍길동","최고다","김이박"]

��arr1.reverse();

��arr2.reverse();

��console.log(arr1);�//[99,�71,�97,�95,�93,�77,�45,�87,�91,�90]

��console.log(arr2);�//["김이박",�"최고다",�"홍길동",�"이수영",�"홍길동",�"김영철"]

�</script>

</body>

</html>

¡ 모든 값이 조건에 만족하는지 검사 – every()

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>



��var�arr�=�[90,91,87,45,77,93,95,97,71,99];

��//배열�arr의�모든�값이�90보다�같거나�큰지�검사

��var�check1�=�arr.every(function(result){�return�result�>=�90�});

��console.log(check1);�//false,�90�미만인�값들이�있어�false�

��//배열�arr의�모든�값이�100보다�작은지�검사

��var�check2�=�arr.every(function(result){�return�result�<�100�});

��console.log(check2);�//true,�모든�값이�100보다�작으므로�true�

�</script>

</body>

</html>

¡ 일부 값이 조건에 만족하는지 검사 – some()

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�arr�=�[90,91,87,45,77,93,95,97,71,99];

��//배열�arr의�일부�값이�90�이상인지�검사

��var�check1�=�arr.some(function(result){�return�result�>=�90�});

��console.log(check1);�//true,�90보다�크거나�같은�값들이�있어�true

��//배열�arr에�100보다�큰�수가�있는지�검사

��var�check2�=�arr.some(function(result){�return�result�>�100�});

��console.log(check2);�//100보다�작은�값이�없으므로�false

�</script>

</body>

</html>


¡ 배열의 반복 – .forEach(), for(){}

Ÿ forEach()

- array.forEach(function(currentValue, index, arr), thisValue)

- currentValue : 반복문에서 반복할 때마다 해당 index의 값

- index : 반복문에서 반복할 때마다 해당 index 번호(생략가능)

- arr : 배열 전체(생략가능)

- thisValue : callback을 실행할 때 this로 사용되는 값(생략가능)

- forEach()사용법

arr.forEach(function(val){�

��//code�here�

});

arr.forEach(function(val,�index,�arr){

��//code�here

});

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>



��arr.forEach(function(val){�console.log(val);�});

��arr.forEach(function(val,�index,�arr){

��console.log("arr["�+�index�+�"]�=�"�+�val);

��if(�index�===�(arr.length�-�1)�)�{


��}�

��});

�</script>

</body>

</html>


Ÿ for(){} 반복문 사용

- for()는 배열뿐만 아니라 일반적인 반복문에 사용하는데 배열에도 사용할

수 있다. for()를 사용할 때는 배열의 길이를 알아야 하는데 이 때

arr.length와 같이 배열의 길이를 얻어내서 사용할 수 있다.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>



��for(var�i=0;�i<arr.length;�i++�){

��console.log(arr[i]);

��}

��for(var�i=0;�i<arr.length;�i++�){

��console.log("arr["�+�i�+�"]�=�"�+�arr[i]);

��}

�</script>

</body>

</html>


조건문

¡ 조건문이란?

Ÿ 조건문이란 서로 다른 조건에서 서로 다른 동작을 실행하기 위한 구

문이다. JavaScript 뿐만 아니라 거의 모든 프로그래밍 언어에서는

조건문을 제공한다.

Ÿ 조건문은 다음과 같은 구문을 사용한다.

- if : 조건을 시작한다. if( conditions ) 와 같이 괄호 안에 조건을 명시한다.

- else : 앞의 if문에 명시한 조건과 다른 경우에 실행되는 구문이다.

- else if : if() 조건 말고 또다른 조건을 명시한다.

- switch : 값의 여러 조건을 구분하여 각 조건마다 실행을 구분한다.

Ÿ if 사용법


if(�조건�)�{

//실행할�구문

}

if(�조건1�&&�조건2�)�{�//두�조건을�만족할�때�구문�실행


}

if(�조건1�||�조건2�)�{�//두�조건�중에�하나만�만족하면�구문�실행


}

if(�조건�)�{�

//조건을�만족할�때�실행할�구문

}�else�{

//조건을�만족하지�않을�때�실행할�구문

}

if(�조건1�)�{�

//조건1을�만족할�때�실행할�구문

}�else�if(조건2)�{

//조건2를�만족할�때�실행할�구문

}�else�if(조건3)�{

//조건3을�만족할�때�실행할�구문

......

}�else�{

//위�모든�조건을�만족하지�않을�때�실행할�구문

}

Ÿ if 문 예제


<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>JavaScript</title>

</head>

<body>

�<script>

��var�a�=�1;

��var�b�=�"1";

��if(�a�===�b�)�{

��console.log("a와�b는�값과�type이�같다.");

��}�else�{

��console.log("a와�b는�값�또는�type이�다르다.");

��}

��if(�a�==�b�)�{

��console.log("a=1와�b=\"1\"는�값이�같다.");

��}

��console.log(�getResult(75)�);�//C+

��function�getResult(c)�{�//받은�값�c에�따라�학점�등급�반환하는�함수

��if(�c�<�60�)�{

��result�=�"F";

��}�else�if(�c�>=�60�&&�c�<�65)�{

��result�=�"D0";

��}�else�if(�c�>=�65�&&�c�<�70)�{

��result�=�"D+";

��}�else�if(�c�>=�70�&&�c�<�75)�{

��result�=�"C0";

��}�else�if(�c�>=�70�&&�c�<�75)�{

��result�=�"C0";

��}�else�if(�c�>=�75�&&�c�<�80)�{

��result�=�"C+";

��}�else�if(�c�>=�80�&&�c�<�85)�{

��result�=�"B0";

��}�else�if(�c�>=�85�&&�c�<�90)�{

��result�=�"B+";

��}�else�if(�c�>=�90�&&�c�<�95)�{

��result�=�"A0";

��}�else�if(�c�>=�95)�{

��result�=�"A+";

��}�else�{

��result�=�"알수없음";

��}

��return�result;

��}

�</script>

</body>

</html>


조건문, 반복문에서 중괄호 { } 의 생략

if 문 또는 for 문과 같은 조건문과 반복문의 내용이 들어가는 영역을 block이라고 한다. 이러한 block은 대

부분 중괄호 { }로 둘러 쌓여 있다. JavaScript에서(다른 C 계열의 언어들 대부분)는 이 중괄호를 생략할 수

있는데 조건문 또는 반복문에서 실행할 구문이 한 줄일 경우이다. 다음은 그 예이다.

if(�a�===�b�)

��aldrt("a와�b는�같다“);

이런 경우 굳이 두 줄로 하지 않고 한 줄에 표현할 수도 있다.

if(�a�===�b�)�aldrt("a와�b는�같다“);

중괄호 생략은 for 문에서도 가능한데 다음과 같다.

for(var�I=1;�i<=100;�I++)�

��sum�+=�i;

for(var�I=1;�i<=100;�I++)�sum�+=�i;

Ÿ switch문 사용법

- switch는 case와 함께 사용하며 값에 따라 다른 구문을 실행할 수 있다.

- switch case는 if else if와 유사하지만 case에 조건을 정할 수는 없다.

- switch 예제

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


�<script>

��var�w�=�new�Date().getDay();�//현재�시간의�요일(0~6)

��var�week�=�getWeekWord(�w�);

��console.log(�"오늘은�"�+�week�+�"요일입니다"�);�

��function�getWeekWord(w)�{

��switch(�w�)�{

��case�0:

��week�=�"일";

��break;

��case�1:

��week�=�"월";

��break;��

��case�2:

��week�=�"화";

��break;��

��case�3:

��week�=�"수";

��break;��

��case�4:

��week�=�"목";

��break;��

��case�5:

��week�=�"금";

��break;��

��case�6:

��week�=�"토";

��break;��

��default:

��week�=�"";��

��}

��return�week;

��}

�</script>

</body>

</html>

Ÿ switch에서 break를 사용하지 않으면?

- switch문에셔 break는 조건에 해당하므로 구문을 실행하고 다른 조건은 확

인하지 않는다는 의미이다. 만일 break를 사용하지 않으면 switch문에서


해당 case를 건너뛰게 된다. 예제를 통해서 알아보자.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<script>

��var�w�=�new�Date().getDay();�//현재�시간의�요일(0~6)

��var�week�=�getWeekWord(�w�);

��console.log(�"오늘은�"�+�week�+�"입니다"�);�

��function�getWeekWord(w)�{

��switch(�w�)�{

��case�1:��

��case�2:

��case�3:

��case�4:

��case�5:

��week�=�"주중";

��break;��

��case�6:��

��case�0:

��week�=�"주말";

��break;��

��default:

��week�=�"";��

��}

��return�week;

��}

�</script>

</body>

</html>


반복문

¡ for 반복문

Ÿ 지정된 횟수만큼 반복

for�(구문1;�구문2;�구문3)�{�

��//실행할�할�코드

}

- 구문1: 반복문을 시작할 숫자를 변수에 대입. 예) var i=0, 0부터 i를 시작

- 구문2: 반복할 조건. 예) i<100, I가 100보다 작을 때가지 반복(99까지)

- 구문3: 매번 반복할 때마다 실행, 예) i++, i를 1씩 증가

Ÿ for 예제

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<script>

��//1부터�100까지�구하기�예제


��for(�var�i=0;�i<=100;�i++�)��{

��sum�+=�i;

��}

��console.log(sum);//5050

�</script>

</body>

</html>


Ÿ 반복을 종료하는 break

- 반복문 안에서 특정 조건에 break를 사용하면 더 이상 실행하지 않고 반복

문을 종료한다.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<script>



��for(�var�i=0;�i<=100;�i++�)��{

��if(�i�>�10�)�break;�//i가�10보다�크면�중지

��sum�+=�i;

��}


�</script>

</body>

</html>

Ÿ 다음 반복으로 건너뛰는 continue

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<script>

��//1부터�100까지의�수�중�짝수의�합만�구하기�예제


��for(�var�i=0;�i<=100;�i++�)��{

��if(�i�%�2�===�1�)�continue;�//2로�나눈�나머지가�1이면,�즉�홀수이면�건너뜀

��sum�+=�i;

��}


�</script>

</body>

</html>


¡ while 반복문

Ÿ 조건 먼저 비교하여 조건에 맞는 동안 반복

while�(조건)�{

//실행할 할 코드

}

- while은 먼저 조건을 비교한 후 조건이 맞으면 반복한다.

- break와 continue 사용은 for 문과 같다.

- 만일 조건에 정확하지 않으면 무한히 반복되는 오류가 발생할 수 있으니

주의해야 한다.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<script>



��var�i�=�1;

��while(�i<=100�)��{

��sum�+=�i;

��i++;�//만일�이�코드가�없으면�반복문은�끝나지�않는다.�

��}


�</script>

</body>

</html>

¡ do while 반복문

Ÿ 먼저 반복하고 조건에 맞으면 계속


do�{

//실행할 할 코드

} while( 조건 );

- do while은 먼저 실행하고 조건을 비교하여 조건에 맞으면 계속 반복한다.

- break와 continue 사용은 for 문과 같다.

- 만일 조건에 정확하지 않으면 무한히 반복되는 오류가 발생할 수 있으니

주의해야 한다.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<script>



��var�i�=�0;

��do��{

��i++;�//만일�이�코드가�없으면�반복문은�끝나지�않는다.�

��sum�+=�i;

��}�while(�i<100�);�//i++이�합계�전에�실행되므로�99까지만�실행되면�됨


�</script>

</body>

</html>


JavaScript Browser 다루기

¡ Web Browsing

여기서는 JavaScript로 웹 브라우저의 주소를 이동하는 방법에 대해 알아볼 것이

다. JavaScript로 현재 브라우저의 위치를 특정 페이지로 변경하거나 이전 페이지

로 이동하는 등의 작업을 할 수 있다.

Ÿ location.href – 현재 url을 얻어내거나 특정 위치로 이동

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<p�id="current-uri"></p>

�<button�onclick="location.href='http://naver.com';">naver.com</button>

�<button�onclick="location.href='http://daum.net';">daum.net</button>

�<button�onclick="location.href='http://google.com';">google.com</button>

�<script>

��var�uri�=�location.href;�//현재�브라우저의�위치를�uri�변수에�대입

��document.querySelector("#current-uri").innerHTML�=�uri;�//uri�값을�#current-uri에�출력

�</script>

</body>

</html>

- location.href='http://naver.com'; //http://naver.com 으로 이동

- 페이지를 접속한 주소에 따라 location.href는 다르게 표시됨


F 예) http://localhost/index.html

F 예) http://webskills.kr/index.html

- location.href='#section-1'; 과 같이 하면 페이지 내에서 책갈피(ID가

section-1인 요소의 위치)로 이동한다.

- 같은 ULR에서는 파일명 또는 상대 위치만으로도 이동가능하다. F 예) location.href='page/list.php';

Ÿ back(), foreard(), go() – history 이동

- history란 브라우저에서 이동한 기록들이다.

- JavaScript는 history 메서드들을 통해서 history 사이를 이동할 수 있다. F window.history.back() - 이전 history로 이동

F window.history.forward() - 앞 history로 이동

F window.history.go(숫자) - 숫자 만큼의 앞/뒤 history로 이동(-이면 뒤로, 양수이면 앞

으로 이동)

- 단, history 목록이 더 없으면 이동하지 않는다.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<div>

��<button�onclick="location.href='index1.html';">index�1</button>



�</div>

�<p�id="historys"></p>

�<div>

��<h1>page�1</h1>

��<p>

��Lorem�ipsum�dolor�sit�amet,�consectetur�adipisicing�elit,�sed�do�eiusmod

��tempor�incididunt�ut�labore�et�dolore�magna�aliqua.�Ut�enim�ad�minim�veniam,

��quis�nostrud�exercitation�ullamco�laboris�nisi�ut�aliquip�ex�ea�commodo

��consequat.�Duis�aute�irure�dolor�in�reprehenderit�in�voluptate�velit�esse

��cillum�dolore�eu�fugiat�nulla�pariatur.�Excepteur�sint�occaecat�cupidatat�non

��proident,�sunt�in�culpa�qui�officia�deserunt�mollit�anim�id�est�laborum.

��</p>

�</div>

�<div>

��<button�onclick="window.history.back();">뒤로</button>

��<button�onclick="window.history.go(-2);">두�페이지�뒤로</button>


��<button�onclick="window.history.forward();">앞으로</button>

��<button�onclick="window.history.go(2);">두�페이지�앞으로</button>

�</div>��


��var�n�=�history.length;

��document.querySelector("#historys").innerHTML�=�"history에�포함된�URL의�수는�"�+�n;

�</script>

</body>

</html>

¡ Navigator 객체

Navigator 객체는 브라우저에 대한 여러 가지 정보를 포함하고 있다. 예를 들어 브

라우저의 종류, 버전, 접속한 컴퓨터의 운영체제 등의 정보를 Navigator 객체를 통

해서 얻을 수 있다. 이 정보를 활용하면 모바일 기기에서 접속했는지도 알 수 있

다.


Ÿ navigator.userAgent – 브라우저 정보

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<p�id="browser-info"></p>


��var�agent�=�navigator.userAgent;

��document.querySelector("#browser-info").innerHTML�=�agent;

�</script>

</body>

</html>

- Chrome

Mozilla/5.0� (Windows� NT� 10.0;� Win64;� x64)� AppleWebKit/537.36� (KHTML,� like� Gecko)�

Chrome/63.0.3239.132�Safari/537.36

- IE11

Mozilla/5.0�(Windows�NT�10.0;�WOW64;�Trident/7.0;�.NET4.0C;�.NET4.0E;�.NET�CLR�2.0.50727;�.NET�

CLR�3.0.30729;�.NET�CLR�3.5.30729;�rv:11.0)�like�Gecko

- FireFox

Mozilla/5.0�(Windows�NT�10.0;�WOW64;�rv:42.0)�Gecko/20100101�Firefox/42.0

- Edge

Mozilla/5.0� (Windows� NT� 10.0;� Win64;� x64)� AppleWebKit/537.36� (KHTML,� like� Gecko)�

Chrome/58.0.3029.110�Safari/537.36�Edge/16.16299


Ÿ 모든 navigator 객체 정보 얻기

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>



��var�bi�=�document.querySelector("#browser-info");

��bi.innerHTML�+=�"navigator.appCodeName="�+�navigator.appCodeName;

��bi.innerHTML�+=�"<br>navigator.appName="�+�navigator.appName;

��bi.innerHTML�+=�"<br>navigator.appVersion="�+�navigator.appVersion;

��bi.innerHTML�+=�"<br>navigator.cookieEnabled="�+�navigator.cookieEnabled;

��bi.innerHTML�+=�"<br>navigator.language="�+�navigator.language;

��bi.innerHTML�+=�"<br>navigator.onLine="�+�navigator.onLine;

��bi.innerHTML�+=�"<br>navigator.platform="�+�navigator.platform;

��bi.innerHTML�+=�"<br>navigator.userAgent="�+�navigator.userAgent;

�</script>

</body>

</html>

[응용예제]JavaScript로 모바일 장치인지 확인하기

JavaScript로 모바일 장치인지 확인하는 방법 중 하나는 navigator.userAgent로 얻

어낸 값에 모바일 장치를 표시하는 단어가 포함되어 있는를 확인하는 것이다.

모바일 장치에서 userAgent를 얻어보면 Android, webOS, iPhone, iPad, iPod,

BlackBerry, Windows Phone 등의 값을 찾을 수 있다. 이 값이 포함되어 있으면 모


바일 장치로 간주하는 것이다.

Ÿ 조건문을 활용한 모바일 장치 확인 예제

<!DOCTYPE�html>

<html�lang="en">

<head>

�<meta�name="viewport"�content="width=device-width,�initial-scale=1.0">



</head>

<body>



��var�ua�=�navigator.userAgent;


��if(�isMobile�===�true�)�{

��bi.innerHTML�=�"모바일장치입니다.";

��}�else�{

��bi.innerHTML�=�"모바일장치가�아닙니다.";

��}

��function�isMobile()�{�

��if(�ua.match(/Android/i)�

��||�ua.match(/webOS/i)�

��||�ua.match(/iPhone/i)�

��||�ua.match(/iPad/i)�

��||�ua.match(/iPod/i)�

��||�ua.match(/BlackBerry/i)�

��||�ua.match(/Windows�Phone/i)�

��)�{

��return�true;

��}�else�{


��}

��}

��

�</script>

</body>

</html>


Ÿ PC용 브라우저에서 모바일 장치로 설정하여 확인하기

Chrome 브라우저의 경우 F12키를 눌러 개발자 도구에서 버튼을 누르면 모바

일 모드로 설정할 수 있다. 여기서 모바일 장치를 설정하면 모바일에서 접속한 것

으로 header를 보낼 수 있으므로 모바일 장치에서의 동작을 확인할 수 있다.

Ÿ http://detectmobilebrowsers.com/ 활용하기

- 이 사이트에 접속하면 접속한 브라우저가 모바일 장치인지 확인해준다. 또

한 JavaScript를 비롯한 여러 언어들의 모바일 검사 코드를 제공한다. 여기

서 제공하는 JavaScript 코드를 활용해서 위 예제에서 if문 안의 코드를 정

규표현식으로 표현한 예제로 변경해보자. 거의 모든 모바일 기기를 체크할

수 있는 코드이다. <!DOCTYPE�html>

<html�lang="en">

<head>

�<meta�name="viewport"�content="width=device-width,�initial-scale=1.0">



</head>


<body>



��var�ua�=�navigator.userAgent;


��if(�isMobile()�===�true�)�{

��bi.innerHTML�=�"모바일장치입니다.";

��}�else�{

��bi.innerHTML�=�"모바일장치가�아닙니다.";

��}

��function�isMobile()�{�

��var�check�=�false;

��

(function(a){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|f

ennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge�

|maemo|midp|mmp|mobile.+firefox|netfront|opera�m(ob|in)i|palm(�

os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone

|wap|windows�ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a�

wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au

(di|\-m|r�|s�

)|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm

|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)

|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1�

u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp(�

i|ip)|hs\-c|ht(c(\-|�|_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(�

|\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt(�

|\/)|klon|kpt�|kwc\-|kyo(c|k)|le(no|xi)|lg(�

g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)

|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-|�|o|v)|zz)|mt(50|p1|v�

)|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(

6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|

pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim

9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-

|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v�

)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m

\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx

(52|53|60|61|70|80|81|83|85|98)|w3c(\-|�)|webc|whit|wi(g�

|nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))�check�=�

true;})(navigator.userAgent||navigator.vendor||window.opera);

��return�check;

��}

��/*�regExp�from�http://detectmobilebrowsers.com�*/

�</script>

</body>

</html>

F code : https://pastebin.com/2WqJeZeC


¡ Window Open

여기서는 JavaScript로 새 창 열기(pop-up window)에 대해 알아보자. 새 창 열기

는 최근에는 브라우징의 방해요소로 여겨지는 측면이 있어서 가급적 사용을 줄이

는 흐름이다. 브라우저들도 옵션으로 팝업창 열기 않기를 제공한다. 대신 레이어

팝업이라고 하는, 새 윈도우가 아닌 콘텐츠 박스를 문서 내에서 보여주는 방식을

사용하는 것이 좋을 것이다. 여기서는 따라서 간단히 window open을 이용한 팝업

을 알아보자.

Ÿ window.open( url );

- window.open("http://google.com")과 같이 하면 예전에는 대부분 새 창을

열어 주었지만 탭을 제공하는 최신 브라우저들은 새 탭을 열어준다.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<button�onclick="popUp('http://google.com')">google</button>

�<button�onclick="popUp('http://naver.com')">naver</button>

�<button�onclick="popUp('http://daum.net')">daum</button>


��function�popUp(url)�{

��var�pop�=�window.open(�url�);

��}

�</script>

</body>

</html>

F window.op()으로 연 링크들이 새 탭에 열려있다.


Ÿ window.open(url, windowName, windowOptions)

- url 외에 새 창 이름(windowName)과 새 창에 대한 여러 설정들

(windowOptions)을 추가하면 새 탭이 아닌 새 창으로 표시된다.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>






��pop�=�window.open(�url,�"popTest",�"width=300,height=300,left=0,top=100"�);

��}

�</script>

</body>

</html>

F 이 예제는 가로, 세로 300인 새 창에 주소를 열고 위치는 왼쪽 좌표가 0, 위쪽은

100px 위치에 창이 표시된다. 좌표는 브라우저가 아닌 window 바탕화면을 기준으로

한다.

F 여기서 주의 할 것은 위 예제이서 var pop = window.open()으로 모든 창을 popTest

이라는 이름으로 열었으므로 다른 버튼을 눌러 새로운 url을 새 창으로 열어도 이미

열려 있는 창에 위치만 바뀌듯 열린다는 것이다. 완전히 새로운 창으로 열기 위해서

는 다른 이름으로 열어야 한다.


Ÿ pop = window.open()

- window.open()만 사용해도 되지만 위 예제에서처럼 window.open()의 결과

를 pop이라는 변수에 할당했다.

- window.op()이 할당된 변수는 나중에 창을 제어하는데 사용된다. 즉 새로

운 창에 접근하는 통로가 된다.

- 여기서 var pop = window.open()처럼 var를 붙이지 않은 이유는 매우 중

요하다. 위 예제에서 window.open()은 함수 안에서 실행되었다. 그런데 함

수 안에서 var pop 이라고 해주면 pop은 함수 안에서만 생성되고 소멸되

는 지역변수가 된다. var pop이라고 하면 나중에 창을 닫기 위해

pop.close()와 같이 실행할 때 정의되지 않은 요소에 접근하려 하므로 에러

가 발생한다.

Ÿ windowName

- windowName 자리에는 다음과 같은 내용을 표시할 수 있다. F 이름 : 영문 또는 숫자로 된 창의 이름, 예) "popTest", "pop20180101", "popNotice1"

이 이름이 새창의 제목 표시줄에 표시되는 것은 아니다. 이 이름은 웹 페이지에서 자

바스크립트가 기억하는 창의 이름이다.

F _blank : 새 창으로 열기(기본 값)

F _parent : 부모 창에 열기

F _self : 현재 창에 열기

F _top : 윈도우 프레임 셋의 최 상위 창에 열기

Ÿ windowOptions 더 알아보기

- top : 창의 위쪽 좌표, pixel 단위, 예)top=100

- left : 창의 왼쪽 좌표, pixel 단위, 예)left=100

- width : 창의 가로 넓이, pixel 단위, 예)width=100

- height : 창의 세로 높이, pixel 단위, 예)height=100

- fullscreen : 전체화면모드(F11) 가능 설정, IE만 작동, yes|no 또는 1|0F 예) fullscreen=yes, fullscreen=1, fullscreen=no, fullscreen=0

F 다음 모든 설정에서도 yes는 1과 같고, no는 0과 같다.

- location : 팝업 창에 주소 표시줄 표시 여부, Opera만 작동, yes|no 또는 1|0

- menubar : 팝업 메뉴바 표시여부, yes|no 또는 1|0

- resizable : 창 크기 조절 가능 여부 설정, IE만 작동, yes|no 또는 1|0


- scrollbars : 스크롤바 표시 여부, IE, Firefox, Opera만 작동, yes|no 또는 1|0

- status : 창 하단 상태표시줄 표시여부, yes|no 또는 1|0

- titlebar : 창 상단 제목표시줄 표시여부, yes|no 또는 1|0

- toolbar : 창에 도구모음(아이콘들) 표시 여부, IE, Firefox만 작동, yes|no 또는 1|0

Ÿ window.close() - 창 닫기

- window.close()는 페이지에서 팝업 창을 닫을 수도 있고 팝업 창 내에서

자신을 닫을 수도 있고, 팝업창에서 부모창을 닫을 수도 있게 한다.

- 예제를 통해서 알아보자

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>




�<button�onclick="popClose()">창닫기</button>


��function�popUp()�{

��pop�=�window.open(�url,�"popTest",�"width=300,height=300,left=0,top=100"�);

��}

��function�popClose()�{

��pop.close();

��}

�</script>

</body>

</html>

- 팝업창 내에서 창 자신을 닫기F index.html

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<button�onclick="popUp()">창열기</button>


�<button�onclick="popClose()">창닫기</button>



��//pop.html을�새�창으로�연다.

��pop�=�window.open(�"pop.html",�"popTest",�"width=300,height=300,left=0,top=100"�);

��}

��function�popClose()�{

��pop.close();

��}

�</script>

</body>

</html>

F pop.html

<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>새�창�테스트</title>

</head>

<body>

�<h1>팝업창�테스트</h1>

�<button�onclick="selfClose()">창닫기</button>

�<button�onclick="openerClose()">열어준�창�닫기</button>


��//창�자신을�닫기

��function�selfClose(){

��self.close();�//window.close()와�같음

��}

��//현재�창을�열어준�창�닫기

��function�openerClose(){

��opener.close();�//index.html�창을�닫는다.

��}

�</script>

</body>

</html>

Ÿ 빈 새 창 열어서 내용 넣기

- window.open()으로 특정 url 또는 특정 파일을 열지 않고도 빈 창을 연 후


에 나중에 내용을 채워 넣을 수 있다. 아래는 그 예제이다.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<button�onclick="popUp()">창열기</button>



��pop�=�window.open(�"",�"popTest",�"width=300,height=300,left=0,top=100"�);

��pop.document.write("<html><body><h1>Hello�World!!!</h1></body></html>");

��}

�</script>

</body>

</html>


¡ Layer Popup

앞에서 최근에는 모바일 인터넷 사용 비중 증가와 인터넷 사용 패턴의 변화 등으

로 window.open()을 이용한 팝업창이 덜 사용된다고 설명했다. 대신 div 요소 등

을 감췄다가 보여주는 방식으로 사용하는 추세이다. 다음은 그 예제이다.

<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>Layer�Popup</title>


��#pop�{

��width:�300px;


��overflow:�hidden;


��position:�absolute;

��top:�80px;

��left:�150px;


��background-color:�#ff0;

��display:�none;

��}

�</style>

</head>

<body>


�<button�onclick="popUp()">레이어�팝업�띄우기</button>

�<div�id="pop">

��<h1>Hello</h1>

��<p>레이어�팝업입니다.</p>

��<p><button�onclick="closePopUp()">닫기</button></p>

�</div>


��//레이어�팝업�열기

��function�popUp(){

��document.getElementById("pop").style.display�=�"block";

��}

��//레이어�팝업�닫기

��function�closePopUp(){

��document.getElementById("pop").style.display�=�"none";

��}

�</script>

</body>

</html>


[응용예제]레이어 팝업을 화면 한 가운데 표시하기

<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>Layer�Popup</title>


��#pop�{



��overflow:�hidden;



��top:�0;

��left:�0;


��background-color:�#ff0;

��display:�none;

��}

�</style>

</head>

<body>


�<button�onclick="popUp()">레이어�팝업�띄우기</button>

�<div�id="pop">

��<h1>Hello</h1>

��<p>레이어�팝업입니다.</p>

��<p><button�onclick="closePopUp()">닫기</button></p>


�</div>


��//레이어�팝업�열기

��function�popUp(){

��document.getElementById("pop").style.display�=�"block";

��var�pop�=�document.getElementById("pop");

��pop.style.top�=�(window.innerHeight/2)�-�(pop.offsetHeight/2)�+�'px';

��pop.style.left�=�(window.innerWidth/2)�-�(pop.offsetWidth/2)�+�'px';��

��}

��//레이어�팝업�닫기

��function�closePopUp(){

��document.getElementById("pop").style.display�=�"none";

��}

�</script>

</body>

</html>


JavaScript Cookie 다루기

¡ Cookie란?

Cookie란 컴퓨터 저장소(정확히 말하면 브라우저가 관리하는)에 저장되는 작은 텍

스트 파일이다. Cookie라 불리는 이 텍스트 파일에 웹 페이지 제공자는 필요한 정

보를 저장할 수도 있고 정보를 읽어들일 수도 있다.

Cookie는 웹 사이트 또는 웹 페이지를 기준으로 생성되거나 읽어들일 수 있다.

Cookie가 사용되는 대표적인 예는 웹사이트 로그인 박스에 “ID 기억하기”이다. 이

항목이 체크되어 있으면 웹 페이지는 PC에 사용자 ID를 포함한 Cookie 파일을 저

장하고 다음 번에 페이지에 접근하면 ID를 표시해줄 수 있다.

Cookie가 사용되는 또 다른 예는 팝업 창을 보여 줄 때 “오늘 하루 이 창 열지 않

기”를 Cookie로 설정해서 새 창이 열리는 번거로움을 막을 수 있다.

만일 사용자가 브라우저 설정에서 Cookie 사용을 중지했다면 Cookie는 사용할 수

없다. 그래서 어떤 사이트들은 접속 했을 때 Cookie를 작동하도록 할 것을 요청하

기도 한다.

Cookie를 사용할 때 사용자의 정보를 수집할 수 있으므로 이러한 사항은 웹사이

트의 개인정보 이용동의 등의 설명에 반드시 포함해야 한다.

또 Cookie는 프로그래머에 의해 읽힐 수 있으므로 절대 여기에 비밀번호와 같은

정보를 저장하지 않도록 해야 한다.

local file에서 cookie 다루기

local file이란 http://mytestwebserver.com/index.html 또는 http://localhost/나 http://127.0.0.1과

같이 서버 환경에서 연 페이지가 아니고 탐색기에서 웹문서를 더블클릭해서 열었을 때를 말한다. 이렇게 열면

주소는 다음과 같다.

file:///D:/xampp/htdocs/index.html


이와 같이 연 파일을 loca file이라고 하며, Internet Explorer, Firefox는 local file에서도 Cookie를 지

원한다. 그러나 Google Chrome은 local file에서 Cookie를 지원하지 않는다.

¡ Cookie 사용법

Ÿ Cookie 저장

- document.cookie = "userid=jsuser";

Ÿ Cookie 읽기

- var c = document.cookie;

Ÿ Cookie 기본 예제

<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>Cookies</title>

</head>

<body>

�<p�id="my-cookie"></p>

�<button�onclick="setCookie()">Cookie�저장하기</button>

�<button�onclick="getCookie()">저장된�Cookie�읽어들이기</button>


��//Cookie에�userid=jsuser�를�저장�

��function�setCookie(){

��document.cookie�=�"userid=jsuser";

��}

��//Cookie에�저장된�내용을�화면에�표시

��function�getCookie(){

��var�c�=�document.cookie;

��document.getElementById("my-cookie").innerHTML�=�"저장된�Cookie�=�"�+�c;

��}

�</script>

</body>

</html>


Ÿ 여러개의 Cookie 값 저장

- Cookie에는 여러개의 값을 저장할 수 있다.

- 저장된 여러개의 값은 각각 세미콜론(;)으로 구분되어 저장된다.

- 다음은 두 개의 값을 저장하고 이를 화면에 표시해보는 예제이다.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


�<button�onclick="setCookie1()">Cookie�1�저장하기</button>




��//Cookie에�userid=jsuser�를�저장�

��function�setCookie1(){

��document.cookie�=�"userid=jsuser";

��}

��//Cookie에�username=홍길동�를�저장�


��document.cookie�=�"username=홍길동";

��}




��document.getElementById("my-cookie").innerHTML�=�"저장된�Cookie�:�"�+�c;

��}

�</script>

</body>

</html>


- Chrome에 저장된 Cookie 확인

Ÿ Cookie 값 삭제

- Cookie 값을 삭제하려면 Cookie 이름에 빈 값을 대입해서 설정하면 된다.

- 또한 Cookie의 만료일을 지나간 날로 해주면 된다.

- 다음 예제는 Cookie 두 개를 생성할 수 있도록 해주는 버튼과 두 개를 삭

제하는 버튼을 제공한다.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>





�<button�onclick="delCookie1()">저장된�Cookie�1�삭제</button>

�<button�onclick="delCookie2()">저장된�Cookie�2�삭제</button>


��//Cookie에�"userid=testuser;"�를�저장�


��document.cookie�=�"userid=testuser";


��}

��//Cookie에�"username=테스터"�를�저장�


��document.cookie�=�"username=테스터";

��}




��document.getElementById("my-cookie").innerHTML�=�"저장된�Cookie�:�"�+�c;

��}

��//Cookie에서�userid"�삭제,�userid의�값을�지우고�지나간�날짜를�지정해주면�된다.��

��function�delCookie1(){

��document.cookie�=�"userid=;�expires=Thu,�01�Jan�1970�00:00:00�UTC;�path=/;";

��}

��//Cookie에서�username"�삭제,�username의�값을�지우고�지나간�날짜를�지정해주면�된다.�

��function�delCookie2(){

��document.cookie�=�"username=;�expires=Thu,�01�Jan�1970�00:00:00�UTC;�path=/;";

��}

�</script>

</body>

</html>

F 위 예제에서 “Cookie 1 저장하기”와 “Cookie 2 저장하기” 버튼을 누르면 Cookie에

userid, username이 testuser, 테스터의 값으로 저장된다.

F 위 그림은 각각 저장된 값을 확인하기 위해 Chrome에서 F12 키를 눌러 개발자 모드

로 들어와 Application 메뉴에서 Cookies를 열고 http://localhost/를 열어본 그림이다.

만일 표시가 제대로 되지 앟으면 Cookie 창의 상단에 동그란 화살표 모양의 아이콘

을 눌러 새로고침 해보면 된다.

F “Cookie 1 삭제”와 “Cookie 2 삭제”를 누르면 두 값이 제거된다. 각각의 버튼을 누른

후에 Chrome의 Cookies 창을 열어 새로고침 버튼을 누르고 확인해본다. 다음 그림은

Cookie를 삭제하고 난 뒤에 확인한 결과이다.


Ÿ Cookie 만료일

- Session

앞의 예제들에서는 document.cookie = "name=value"; 와 같이 이름과 값만 추가

하는 방식으로 Cookie를 생성하였다. 이렇게 하면 Cookie는 기본적으로 Expire(만

료일) 속성에 Session 값을 갖는다.

Session은 웹 브라우저를 모두 종료하면 사라지므로 이 때 Cookie가 삭제된다는

것이다. 같은 종류의 브라우저 창이 여러개 열려 있다면 모든 창을 다 닫아야

Session이 사라지고 만료일이 Session인 Cookie도 사라진다.

- 만료일 지정

Cookie 만료일은 UTC문자열을 사용한다. 이는 날짜 객체의 값을 toUTCString() 메

서드로 문자열로 변환한 것과 같은 형식의 값이다.


�var�expDate�=�new�Date().toUTCString();

�console.log(expDate);�//Mon,�22�Jan�2018�10:19:22�GMT

</script>


만료일을 지정하면 Cookie는 해당 일시 이후에는 더 이상 유효하지 않고 사라지

게 된다. 만료일을 지정하는 방법은 다음과 같다.

document.cookie�=�"userid=testuser;�expires=Mon,�22�Jan�2018�10:40:22�GMT";

- 만료일 지정 Cookie 생성 예제<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


�<button�onclick="setCookie()">Cookie�저장하기</button>

�<button�onclick="getUTC()">현재�UTC�시간�보기</button>


��//Cookie에�"userid=testuser;�expires=Mon,�22�Jan�2018�10:24:22�GMT"를�저장�

��function�setCookie(){

��document.cookie�=�"userid=testuser;�expires=Mon,�22�Jan�2018�10:40:22�GMT";

��}

��//현재�UTC�시간을�화면에�표시

��function�getUTC(){

��document.getElementById("my-cookie").innerHTML�=�new�Date().toUTCString();

��}

�</script>

</body>

</html>

위와 같이 Cookie를 생성하면 userid의 값이 testuser 이며, GMT 시간으로 2018년

1월 22일 10:40:22까지 유효하며 그 이후에는 사라지는 Cookie가 생성되었다.


이 Cookie는 만료일이 지나지 않는한 브라우저를 모두 닫았다 열어도 삭제되지

않고 남아 있다.

그러나 만료일(시)이 지난 다음에 열어보면 단 1초가 지났더라도 다음 그림과 같

이 Cookie는 사라졌다.

Ÿ 만료일이 1일 또는 n일 후인 Cookie 만들기

- 날짜에 하루 더하기 예제

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�date�=�new�Date();�//현재�시간�얻어오기

��console.log(date.toUTCString());�//날짜�추가�전�현재�시간�출력하기

��date.setDate(date.getDate()�+�1);�//date에�days에�지정된�숫자만큼�날짜를�더함�

��console.log(date.toUTCString());�//날짜�추가�후�현재�시간�출력하기

�</script>

</body>

</html>


F 위 예제에서 하루 뒤가 아니라 2일 또는 10일 뒤의 날짜를 얻으려면

date.getDate() + 1

에서 숫자 1 대신에 2 또는 10을 써주면 된다.

- 1일 뒤에 사라지는 Cookie 만들기

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Cookies</title></head><body> <p id="info"></p> <button onclick="setCookie()">1일 후에 만료되는 Cookie 저장하기</button> <script type="text/javascript"> var infoBox = document.getElementById("info"); //페이지를 연 날짜를 화면에 표시 infoBox.innerHTML = "페이지 접속시간 : " + new Date().toUTCString(); //지정된 날자만 큼 더해서 만료일을 지정하는 Cookie 생성 함수 function setCookie() { var date = new Date(); //현재 시간 얻어오기

//1일 추가하기 전에 날짜와 시간을 화면에 표시 infoBox.innerHTML += "<br>Cookie 생성 시간(UTC) : " + date.toUTCString(); date.setDate(date.getDate() + 1); //date에 1일을 더함 //위의 1 대신에 숫자만 바꾸면 더 많은 날짜를 더해 날짜 지정 가능 var expDate = date.toUTCString(); //날짜가 더해진 date를 UTC 문자열로 변환

//1일 후에 만료되는 Cookie 생성 document.cookie = "cname=mycookie; expires=" + expDate + "path=/";

//Cookie 만료 시간(UTC)을 화면에 표시


infoBox.innerHTML += "<br>Cookie 만료 시간(UTC) : " + expDate; } </script></body></html>

F 컴퓨터 날짜를 강제로 1일 뒤로 바뀐 뒤 다시 페이지를 열어보면 Cookie가 사라졋다.


Ÿ Cookie 검사(특정 이름의 Cookie)가 존재하는 지 검사

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<p�id="info1"></p>

�<p�id="info2"></p>

�<p><button�onclick="showCookies()">모든�Cookie�보기</button></p>�

�<p>

��<button�onclick="setCookie('mycookie1',�'hello1',�1)">Cookie�1�저장</button>



�</p>

�<p>

��<button�onclick="checkCookie('mycookie1')">Cookie�1�찾기</button>



�</p>


��//지정된�날자만�큼�더해서�만료일을�지정하는�Cookie�생성�함수

��function�setCookie(name,�value,�days)�{

��var�date�=�new�Date();�//현재�시간�얻어오기

��date.setDate(date.getDate()�+�days);�//date에�days�만큼�날짜를�더함

��var�expDate�=�date.toUTCString();�//날짜가�더해진�date를�UTC�문자열로�변환

��//Cookie�생성

��document.cookie�=�name�+�"="�+�value�+�";�expires="�+�expDate�+�"path=/";

��}�//end�of�setCookie

��//모든�Cookie를�화면에�출력

��function�showCookies()�{

��var�cookies�=�document.cookie;

��document.getElementById("info1").innerHTML�=�cookies;

��}�//end�of�showCookies

��function�checkCookie(cname)�{�//Cookie�존재하는지�getcookie�함수�호출하고�결과�출력

��var�cookieVal�=�getCookie(cname);

��document.getElementById("info2").innerHTML�=�cname�+�"="�+�cookieVal;

��}


��//지정한�이름의�Cookie가�존재하는지,�존재한다면�값은�무엇인지�찾는�함수�

��function�getCookie(cname)�{

��var�cookieName�=�cname�+�"=";�//Cookie�이름과�값이�name=value�형식이므로�=�추가

��var�cookie�=�document.cookie;�//Cookie�가져옴(여러개의�Cookie가�있을�수�있음)

��//Cookie를�추출하면�여러개인�경우�다음과�같이�;으로�구분되어�있음.�

��//mycookie1=hello1;�mycookie2=hello2;�mycookie3=hello3

��//따라서�;을�구분자로�하여�cookie를�배열�cookieArray로�저장�

��//Cookie가�하나�인�경우에도�index가�하나인�배열로�저장됨�

��var�cookieArray�=�cookie.split(";");�

��if(�cookieArray.length�>�0�)�{�//배열의�길이가�0보다�크면,

��for(var�i=0;�i<cookieArray.length;�i++�){�//0부터�배열의�끝가지�반복

��var�c�=�cookieArray[i];�//i번째�Cookie를�변수�c에�저장�

��//첫�번째�글자가�공백인�경우�제거

��//mycookie1=hello1;�mycookie2=...와�같이�여러개의�Cookie�값이�있으면�

��//첫�번재�Cookie�다음부터는�이어지는�쿠키는�;와�공백을�포함하기�때문에�

��//두�번째�Cookie부터는�"�mycookie2=..."와�같이�앞에�공백이�있으므로�제거�필요

��//첫�글자가�공백인�동안�반복하는�반복문을�사용해서�공백�제거

��while(�c.charAt(0)�==�'�'�)�{�//첫�글자에�공백이�있는�경우에만�반복

��c�=�c.substring(1);�//변수�c의�첫�글자를�지우고�다시�c에�저장

��}

��//Cookie�이름�cookieName이�존재하는지�검사

��//name=�와�같은�형식의�Cookie�이름이�처음에�있는지�검사�

��if(�c.indexOf(cookieName)�===�0�)�{

��//Cookie�이름이�존재한다면,�

��//문자열�c에서�이름과�등호(예,�name=)�뒤에서�전체�문자열까지의�문자열을�잘라�추출

��//추출한�문자를�반환(rerutn),�return이�실행되면�다음의�코드는�실행되지�않고�함수�종료

��return�c.substring(cookieName.length,�c.length);

��}

��}�//end�for

��}�//end�if

��return�"";�//앞에서�Cookie를�찾지�못했을�경우에�빈�값을�반환함.

��}//end�of�getCookie

�</script>

</body>

</html>


Ÿ path

위 예제 중에 다음과 같이 ; path=/을 추가한 적이 있다.

document.cookie�=�"userid=;�expires=Thu,�01�Jan�1970�00:00:00�UTC;�path=/;";

이 속성은 Cookie가 적용되는 경로이다.

/는 예를 들어 http://localhost/에 적용되고, /mydir 는 예를 들어 http://localhost/

mydir 에 적용된다.

이 값을 생략하면 현재 문서의 위치가 기본 값으로 설정된다.


[응용예제] 팝업창에 “오늘 하루 이 창 열지 않기” 적용 예제

- index.html

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<p>Cookie�검사하여�팝업�열기</p>


��//페이지를�열면�Cookie를�검사하여�pop1이�있고�값이�pass인�경우가�아니면�팝업창을�연댜.�

��if(�getCookie('pop1')�!=�"pass"�)�{

��window.open(�"pop.html",�"popTest",�"width=300,height=300,left=0,top=120"�);

��}

��function�getCookie(cname)�{

��var�cookieName�=�cname�+�"=";

��var�cookie�=�document.cookie;

��var�cookieArray�=�cookie.split(";");�

��if(�cookieArray.length�>�0�)�{

��for(var�i=0;�i<cookieArray.length;�i++�){

��var�c�=�cookieArray[i];

��while(�c.charAt(0)�==�'�'�)�{

��c�=�c.substring(1);

��}

��if(�c.indexOf(cookieName)�===�0�)�{

��return�c.substring(cookieName.length,�c.length);

��}

��}

��}

��return�"";

��}

�</script>

</body>

</html>


- pop.html

<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>새�창�테스트</title>


��body�{

��margin:�0;

��}

��.close-box�{


��top:�0;

��width:�100%;


��background-color:�#000;

��}

��.close-box�a�{

��color:�#fff;

��}

�</style>

</head>

<body>


�<div�class="close-box">

��<a�href="javascript:setCookie('pop1','pass',1);">[X]오늘�하루�이�창�열지�않기</a>

��

��<a�href="javascript:self.close();">[창닫기]</a>

�</div>

�</form>


��function�setCookie(name,�value,�days)�{

��var�date�=�new�Date();

��date.setDate(date.getDate()�+�days);�

��var�expDate�=�date.toUTCString();�

��document.cookie�=�name�+�"="�+�value�+�";�expires="�+�expDate�+�"path=/";

��self.close();

��}

�</script>

</body>

</html>

이 예제는 페이지를 열면 pop.html을 팝업으로 띄우기 전에 Cookie에 pop1의 값

이 pass로 저장되어 있는지 검사하고 있다면 띄우지 않고 없을 때만 띄워줌.


위 창에서 “[X]오늘 하루 이 창 열지 않기” 링크를 클릭하면 다음에 페이지를 열

때 팝업은 표시되지 않음.

똑 같은 예제를 Layer 팝업에도 구현할 수 있음.


JavaScript From 다루기

¡ Form Validation

JavaScript에서 Form을 다루는 일은 주로 Validation, 즉 값이 유효한지를 검사하

여 폼 전송 여부를 결정하는데 사용된다.

Ÿ 기본 예제

다음의 예제를 보면 Form Validation이 어떻게 작동하는지 알 수 있다.

<!DOCTYPE�html>

<html�lang="en">

<head>




��#msg�{�color:�red;�}

�</style>

</head>

<body>

�<form�action="test.php"�method="POST"�onsubmit="return�checkForm()">

��<p>

��<input�type="text"�name="userid"�id="userid">


��</p>

��<p�id="msg"></p>

�</form>


��function�checkForm()�{

��var�userid�=�document.getElementById("userid").value;

��if(�!�userid�)�{

��document.getElementById("msg").innerHTML�=�"필수�항목을�입력하세요!";


��}

��}

�</script>

</body>

</html>


<form�action="test.php"�method="POST"�onsubmit="return�checkForm()">

위 코드에서 onsubmit="return checkForm()" 은 <input type="submit"> 버튼을

눌러 폼을 전송할 때 실행된다. “return checkForm()”은 checkForm() 함수를 실행

하여 그 결과가 true일 때 Form을 전송하라는 의미이다. 만일 checkForm() 함수에

서 false가 반환되면 Form은 작동하지 않는다.

function�checkForm()�{�...�}

이 함수는 폼을 전송할 때 실행된다. 정확히는 폼이 전송되기 직전에 실행된다.

var�userid�=�document.getElementById("userid").value;

이 코드는 id가 userid인 input 요소의 값(value)을 읽어서 변수 userid에 대입한다.

if(�!�userid�)�{

�document.getElementById("msg").innerHTML�=�"필수�항목을�입력하세요!";

�return�false;

}

만일 userid 값이 없으면 <p id="msg"></p> 안에 "필수 항목을 입력하세요!" 라

는 메시지를 표시하고 false를 반환한다. false가 반환되면 폼은 전송되지 않는다.

JavaScript Form Validation만으로는 안전하지 않은 이유

JavaScript Form Validation은 사용자에게 입력하지 않은 값들에 대한 경고를 보여주고 전송을 차단하므

로 유용하게 사용된다. 그러나 JavaScript Form Validation을 했다고 해서 코드가 안전한 것은 아니다. 개

발자 도구에서 얼마든지 간단한 조작만으로도 폼을 검사 없이 전송할 수 있기 때문이다. 앞의 예제를 Google

Chrome 개발자 도구(F12)의 Console에거 간단한 입력으로 Validation 없이 전송되게 해보자.


F12를 눌러 개발자 도구를 열고 Console에서 다음과 같이 입력한 후에 아무 값도 입력하지 않은

상태에서 폼을 전송해보자.

document.forms[0].onsubmit = "";

Console에 이렇게 입력하면 onsubmit="return checkForm()"을 onsubmit=""으로 바꿔버리므로

폼 검사 없이 바로 전송하게 된다.

이런 이유로 Validation은 Client Side에서 뿐만 아니라 Server Side에서도 반드시 해주어야 한다.


[응용예제] 입력 폼에 숫자만 입력되게 하기

키보드 이벤트와 문자 코드를 검사해서 숫자만 입력받을 수 있다. 다음은 그 코드

이다.

<!DOCTYPE�html>

<html�lang="en">

<head>




��#msg�{�color:�red;�}

�</style>

</head>

<body>

�<form>

��<p>

��<label�for="amount">수량입력</label>

��<input�type="text"�name="amount"�id="amount"�onkeypress="return�checkNumber(event)">

��</p>

�</form>


��function�checkNumber(event)�{

��var�key�=�event.keyCode�||�event.which;

��if(�key�<�48�||�key�>�57�)�{


��}

��}

�</script>

</body>

</html>

onkeypress="return�checkNumber(event)"

키보드의 키를 누른 순간(눌렀다 떼었을 때가 아니라) checkNumber(event) 함수

를 실행하여 false이면 값을 입력하지 않음. event를 인자로 넘기는 것은 키보드

입력이벤트를 캐치하여 눌린 키의 코드를 확인하기 위해서이다.

var�key�=�event.keyCode�||�event.which;

이 코드는 keypress 이벤트로부터 눌린 키의 코드를 파악해 변수 key에 대입하는


데 event.keyCode || event.which는 event.keyCode가 인식이 안되면 event.which

를 사용하라는 뜻이다. 어떤 브라우저는 눌린 키의 코드를 파악하는데 keyCode

속성을 사용하고 또 어떤 브라우저는 which 속성을 사용하기 때문에 모든 브라우

저에서 작동하도록 하기 위함이다.

if(�key�<�48�||�key�>�57�)�{�return�false;�}

key가 48보다 작거나, 57보다 크면 false를 반환한다.

key code는 ASCII 코드로 숫자는 48~57 사이에 있다. 48은 0이고 49는 1...57은 9

이다. 이 범위 밖에 있는 코드는 숫자가 아니므로 false를 반환하면 된다.

ASCII : American Standard Code for Information Interchange

F https://ko.wikipedia.org/wiki/미국정보교환표준부호

JavaScript Timer

¡ setTimeOut - 일정 시간 뒤에 함수를 한 번 실행

setTimeOut() 함수는 지정된 시간 뒤에 한 번만 발생하는 타이머이다. 한 번 실행

되면 두 번 이상은 실행되지 않는다. 따라서 일정 시간 뒤에 특정 페이지로 이동하

거나 특정 기능을 한 번만 수행할 때 사용된다.

Ÿ setTimeout(function, milliseconds)

- function : 지정된 시간이 흐른 뒤에 실행할 함수

- milliseconds : 밀리초, 1/1000초, 1000=1초

Ÿ setTimeout() 예제


<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<p�id="info"></p>


��//문서를�읽고�1초�후에�오늘�날짜를�화면에�표시

��setTimeout(function(){

��document.getElementById("info").innerHTML�=�new�Date();

��},�1000);

�</script>

</body>

</html>

[응용예제] 5초 후에 다른 페이지로 이동하는 예제 - setTimeout

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<p�id="info">5초�후에�새로운�홈페이지로�이동합니다.</p>


��//문서를�읽고�5초�후에�"/new/index.html"�페이지로�이동

��setTimeout(function(){

��location.href�=�"/new/index.html";

��},�5000);

�</script>

</body>

</html>


¡ setInterval – 지정된 시간마다 반복적으로 실행

setInterval() 함수는 지정된 시간 뒤에 실행된다는 점에서는 setTimeOut() 함수와

같지만 한 번 실행된 뒤에서 반복적으로 지정된 시간마다 같은 코드를 실행한다는

점이 다르다. setInterval() 함수는 시계 표시, 애니메이션 등과 같이 반복적으로 지

속해야 한느 작업에 주로 사용된다.

Ÿ setInterval(function, milliseconds)

- function : 지정된 시간이 흐른 뒤에 실행할 함수, 다음 시간마다 반복

- milliseconds : 밀리초, 1/1000초, 1000=1초

Ÿ setInterval() 예제

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>



��//문서를�읽고�매�3초마다�후에�현재�날짜와�시간을�화면에�추가하여�표시

��setInterval(function(){

��document.getElementById("info").innerHTML�+=�new�Date()�+�"<br>";

��},�3000);

�</script>

</body>

</html>


[응용예제]디지털 시계 - setInterval()

<!DOCTYPE�html>

<html�lang="en">

<head>




��#digitalwatch�{



��line-height:�40px;


��font-size:�22px;

��background-color:�black;

��color:�yellow;

��}

�</style>

</head>

<body>

�<p�id="digitalwatch"></p>


��//매�1초마다�함수�getCurrentDateTime()을�실행�

��setInterval(function(){�getCurrentDateTime();�},�1000);

��//현재�날짜와�시간을�년-월-일�시:분:초�형식으로�표시

��function�getCurrentDateTime()�{

��var�now�=�new�Date();

��var�currentDate�=�now.getFullYear()�+�"-"�+�now.getMonth()�+�"-"�+�now.getDate();

��var�currentTime�=�now.getHours()�+�":"�+�now.getMinutes()�+�":"�+�now.getSeconds();

��document.getElementById("digitalwatch").innerHTML�=�currentDate�+�"�"�+�currentTime;

��}

�</script>

</body>

</html>

F 아날로그 시계 예제 참조

https://www.w3schools.com/graphics/canvas_clock.asp

https://www.w3schools.com/graphics/tryit.asp?filename=trycanvas_clock_start


JavaScript 정규표현식

¡ 정규표현식(Regular Expression)이란?- 정규표현식이란 텍스트 데이터로부터 특정 값을 찾아내기 위한 검색 패턴

을 정의한 연속된 문자(들)을 의미한다.

- 예를 들어 주어진 값에 영문자만 포함되어 있는지 또는 숫자만 포함되어

있는지 아니면 영문자와 숫자가 혼합되어 있는지 등을 검사하는 패턴을 말

한다. 이러한 패턴은 매우 강력해서 Email이나 URL이 규칙에 맞는지 검사

할 수도 있고 사이트에서 제시한 아이디 작성 규칙에 맞는지 등을 검사할

수도 있다.

- 정규표현식을 사용하면 텍스트 데이터로부터 다양한 패턴의 문자열을 찾아

다른 문자열로 바꿀 수 있다. 예를 들어 <로 시작하고 >로 끝나는 문자열

을 찾아 <와 >로 일괄 변경하는 등의 작업을 처리할 수 있다.

- 또는 img 태그의 src 속성의 값을 모두 추출해서 이미지 목록을 추출할 수

도 있는 등 다양한 용도로 사용될 수 있다.

- 정규표현식을 사용할 수 있는 메서드 들은 다음과 같은 것들이 있다. F exec()

F test()

F match()

F replace()

F search()

F split()

¡ 정규표현식 사용법

Ÿ /pattern/flags;

- pattern : 정규표현식을 입력한다.

- flags : 검색에 대한 추가 옵션(i, g, m 등이 있다)

Ÿ 단순 패턴 예


- /webskills/i : 대소문자 구분 없이(i) 문자열 webskills를 찾는다.

- /w/gi : 대소문자 구분 없이(i) w 문자 전체를 찾는다.

Ÿ 특수문자 사용 패턴 예

- /[0-9]/ : 0부터 9 사이의 숫자 값이 있으면 모두 찾는다.

- /a-zA-Z/ : 알파벳 소문자 대문자를 모두 찾는다.

- /^[a-z]/ : 데이터의 시작이 알파벳 소문자로 시작하는지 찾는다.

- /[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/ : 한글이 포함되어 있으면 찾는다.

정규표현식 사용 함수 예제

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�str�=�"The�World�Wide�Web�(abbreviated�WWW�or�the�Web)�is�an�information�space�where�

documents�and�other�web�resources�are�identified�by�Uniform�Resource�Locators�(URLs),�interlinked�

by�hypertext�links,�and�can�be�accessed�via�the�Internet.From�

https://en.wikipedia.org/wiki/World_Wide_Web";

��

��//[test�예제]

��var�reg1�=�/Web/;

��//정규표현식�"/Web/"를�찾아서�있는지�검사,�"Web"이�있으면�true�없으면�false

��var�reg1result�=�reg1.test(str);

��console.log(reg1result);

��

��//[exec�예제�1]

��//정규표현식�"/web/"를�찾아서�있는지�검사,�"Web"이�있으면�배열로�반환,�없으면�null

��var�reg2�=�/web/;�//소문자�web을�찾는�패턴

��var�reg2result�=�reg2.exec(str);

��console.log(reg2result);�

��//reg2test[0]�=�"web"�

��//reg2test.index=98,�처음�소문자�web이�발견된�위치

��//reg2test.input�=�"The�World�Wide�Web..."

��//reg2test.length�=�1

��

��//[exec�예제�2]

��//정규표현식�"/web/i"를�찾아서�있는지�검사

��//대소문자에�관계없이"Web"이�있으면�배열로�반환,�없으면�null

��var�reg3�=�/web/i;�//대소문자�가리지�않고�web을�찾는�패턴

��var�reg3result�=�reg3.exec(str);



��//reg3test[0]�=�"web"�

��//reg3test.index=15,�대소문자에�관례�없이�처음�web이�발견된�위치

��//reg3test.input�=�"The�World�Wide�Web..."


��//[match�예제]��

��//정규표현식�"/web/gi"를�찾아서�있는지�찾아서�모두�배열로�반환

��//g는�전체를�대상으로�모두�찾는�flag이고�i는�대소문자�구문�않는�flag이다

��//대소문자에�관계없이"Web"이�있으면�배열로�반환,�없으면�null

��var�reg4�=�/web/gi;�//대소문자�가리지�않고�전체�범위에서�web을�찾는�패턴

��var�reg4result�=�str.match(reg4);


��//reg4test[0]�=�"Web"�

��//reg4test[1]�=�"Web"�

��//reg4test[2]�=�"web",�세번째�소문자로�시작하는�web

��//reg4test[3]�=�"Web"


��//[search�예제]��

��//정규표현식�"/web/i"를�찾아서�처음�만나는�검색어의�위치를�숫자로�반환

��//발견하지�못하면�-1�반환

��var�reg5�=�/web/i;�//대소문자�가리지�않고�전체�범위에서�web을�찾는�패턴

��var�reg5result�=�str.search(reg4);

��console.log(reg5result);�//15,�15번째에�web이�처음�발견됨

��//[replace�예제]

��//정규표현식�"/web/gi"를�모두�찾아서�"WOW"로�치환

��var�reg6�=�/web/gi;

��var�reg6result�=�str.replace(reg6,�"WOW");


��//[split�예제]

��//정규표현식�"/web/"을�기준으로�문자열을�나눠서�배열로�저장

��var�reg7�=�/web/i;

��var�reg7result�=�str.split(reg7);


��//reg6test[0]�=�"The�World�Wide�"�

��//reg6test[1]�=�"�(abbreviated�WWW�or�the�"�

��//reg6test[2]�=�")�is�an�information�space�where�documents�and�other�"�

��//reg6test[3]�=�"�resources�are�identified�by�Uniform�Resource�..."�

��//reg6test[4]�=�""�

�</script>

</body>

</html>

- 소스코드: https://pastebin.com/mBV3Yrf8


¡ 정규표현식 flags

Ÿ g : global search, 텍스트 데이터 전체에서 찾는다

Ÿ i : 대소문자를 가리지 않음

Ÿ m : 여러 줄 검색

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��//g�flag�예제�

��var�str1�=�"The�1st�World�Wide�Web�of�2018";

��var�reg1�=�/\s[a-zA-Z]+/g;�//공백�뒤에�영(대소)문자로�구성된�패턴

��var�reg1result�=�str1.match(reg1);

��console.log(reg1result);�//["�World",�"�Wide",�"�Web",�"�of"]

��//i�flag�예제

��var�str2�=�"The�Web�is�World�Wide�Web.�HTML�is�a�web�language.";

��var�reg2�=�/web/gi;�//텍스트�전체에서�대소문자�구분�없이�web�단어�찾기�


��console.log(reg2result);�//["Web",�"Web",�"web"]

��

��var�reg3�=�/web/g;�//i를�사용하지�않았으므로�소문자로�시작하는�web�만�찾아줌


��console.log(reg3result);�//["web"]

�</script>

</body>

</html>


¡ 정규표현식 패턴 문자들

Ÿ 특수문자

문자 설명

. 한 문자를 찾는다. 이 때 새로운 줄, 줄바꿈 문제는 제외한다.

\w 알파벳과숫자(alphanumeric), _ 문자를 찾는다. [A-Za-z0-9_]와 같다.

\W "\w"로�찾는�문자가�아닌�문자들을�찾는다.�[Â-Za-z0-9_]와�같다.

\d 0부터 9까지의 숫자 문자를 찾는다. [0-9]와 같다.

\D 숫자 문자를 제외한 문자를 찾는다.[^0-9]와 같다.

\s 공백 문자를 찾아준다.

\S 공백이 아닌 문자들을 찾는다.

\b 시작 또는 끝이 특정 문자(열)로 시작하거나 끝나는 단어를 찾는다.

\B시작 또는 끝이 특정 문자(열)로 시작하지 않고 또는 특정 문자(열)로 끝나지 않는 단어를 찾는다.

\0 NUL 문자를 찾는다(텍스트 안에 \0으로 표기된 문자가 NUL 문자임)

\n 줄바꿈 문자를 찾는다.

\f form feed 문자를 찾는다.

\r 캐리지 리턴 문자를 찾는다.

\t 탭 문자를 찾는다.

\v 세로 탭 문자를 찾는다.

\xxx 8진수 코드 넘버가 xxx인 문자를 찾는다.

\xdd 헥사 코드가 dd인 문자를 찾는다.

\uxxxx Unicode 넘버가 xxxx인 문자를 찾는다.

[abc] a 또는 b, c 중의 문자가 하나라도 포함되어 있으면 찾는다.

[âbc] a 또는 b, c 중의 문자가 아닌 문자를 찾는다.

{n} 문자가 n개 있는 문자를 찾는다.

{n,m} 문자가 최소 n개 최대 m개인 문자를 찾는다.

^문자열의 시작을 의미한다. â는 a로 시작하는 문자열이다. [â]는 a가 아닌 문자열을 의미하며 []안에서는 전혀 다른 뜻이 된다.

$ 문자열의 시작을 의미한다. 뒤에 쓴다. a$는 a로 끝나는 문자를 찾는다.

* 0번 이상 반목되는 문자 앞의 문자. a*는 a뒤에 문자가 0회 이상 반복되는 문자.

+ 1회 이상 연속으로 반복되는 문자. a+는 a뒤에 1회이상 문자가 반복.

? 0외 또는 1회 반복되는 문자가 있음. a?는 a뒤에 0또는 1회 문자 반복.

(x) 검색어를 기억시킨다. /(a)/에서 검색 결과는 $1이 된다.


정규표현식 패턴문자 사용 예제

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>


��var�str1�=�"delete�destiny�dolor�domain�dilation";

��var�str2�=�"_cost=124$";

��var�str3�=�"World�Wide�Web";

��var�str4�=�"It�was�very�sorry";

��var�str5�=�"Bring�any�computer";

��var�str6�=�"2018�JavaScript�배우기";

��var�str7�=�"apple�achieve�april�address�arrow�appreciation";

��//[패턴문자�.�]

��//d와�l�사이에�하나의�문자가�포함된�텍스트를�검색

��var�reg1�=�/d.l/gi;�


��console.log(reg1result);�//["del",�"dol",�"dil"]

��//[패턴문자�\w�],�소문자�w임

��//alphanumeric�문자와�_만�검색,�특수�문자�등은�검색�안됨.

�

��var�reg2�=�/\w/g;�


��console.log(reg2result);�//["_",�"c",�"o",�"s",�"t",�"1",�"2",�"4"]�

��//[패턴문자�\W�],�대문자�W임

��//alphanumeric�문자와�_�이외의�문자만�검색

��var�reg3�=�/\W/g;�


��console.log(reg3result);�//["=",�"$"]

��//문자열에서�alphanumeric�문자와�_�이외의�문자를�@로�치환

��reg3str�=�str2.replace(reg3,�"@");�

��console.log(reg3str);�//_cost@124@

��//[패턴문자�\d�]

��//숫자�문자만�찾음

��var�reg4�=�/\d/g;�



��//["1",�"2",�"4"]

��//숫자�문자를�@로�치환

��



��console.log(reg4str);�

��//_cost=@@@$

��//[패턴문자�\D�]

��//숫자�문자가�아닌�문자만�찾음

��var�reg5�=�/\D/g;�



��//["_",�"c",�"o",�"s",�"t",�"=",�"$"]

��//숫자�문자가�아닌�문자를�공백으로�치환

��reg5str�=�str2.replace(reg5,�"");�

��console.log(reg5str);�//124

��//[패턴문자�\s�]

��//공백�문자를�찾음

��var�reg6�=�/\s/g;�


��console.log(reg6result);�//["�",�"�"]

��

��//공백�문자를�제거

��reg6str�=�str3.replace(reg6,�"");�


��//WorldWideWeb

��//[패턴문자�\S�]

��//공백�문자가�아닌�문자를�찾음

��var�reg7�=�/\S/g;�



��//["W",�"o",�"r",�"l",�"d",�"W",�"i",�"d",�"e",�"W",�"e",�"b"]

�

��//공백�문자를�@로�치환



��//@@@@@�@@@@�@@@

��//[패턴문자�\b�]

��//단어의�시작�또는�끝에�검색어가�있는�문자�찾기

��var�reg8�=�/\bdo/g;�//단어의�시작에�있는�do�찾기


��console.log(reg8result);�//["do",�"do"]

��

��//단어의�시작에�있는�do를�co로�치환하기

��reg8str�=�str1.replace(reg8,�"co");

��console.log(reg8str);�//delete�destiny�color�comain�dilation

��var�reg9�=�/ry\b/g;�//단어의�끝에�있는�ry�찾기




��//["ry",�"ry"]

��

��//단어의�끝에�있는�ry를�ky로�치환하기

��reg9str�=�str4.replace(reg9,�"ky");


��//It�was�veky�sorky

��//[패턴문자�\B�]

��//단어의�시작�또는�끝에�있지�않은�문자�찾기

��var�reg10�=�/\Bdo/g;�//단어의�시작에�있지�않은�do�찾기



��//null

��var�reg11�=�/do\B/g;�//단어의�끝에�있지�않은�do�찾기



��//["do",�"do"]

��//[패턴문자�\uxxxx�]

��//유니코드�문자�찾기

��//유니코드�문자표�->�https://unicode-table.com/en/

��var�reg12�=�/\u0057/g;�//대문자�W�찾기



��//["W",�"W",�"W"]

��//[패턴문자�[abc]�]

��//Brackets�[]�안의�어떤�문자라도�찾기

��var�reg13�=�/[abc]/gi;�//대소문자�관계�없이�모든�a,b,c



��//["B",�"a",�"c"]

��//[패턴문자�[^abc]�]

��//Brackets�[]�안의�모든�문자를�제외하고�찾는다.

��var�reg14�=�/[^abc]/gi;�//대소문자�관계�없이�모든�a,b,c�이외의�문자



��//["r",�"i",�"n",�"g",�"�",�"n",�"y",�"�",�"o",�"m",�"p",�"u",�"t",�"e",�"r"]

��//[패턴문자�x|y�]

��//x�또는�y에�일치하는�문자를�찾는다.�

��var�reg15�=�/world|web/gi;�//대소문자�관계�없이�world�또는�web�찾기



��//["World",�"Web"]

��//[패턴문자�[0-9],�[a-zA-Z],�-�[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]�]�


��var�reg16�=�/[0-9]/g;�//0~9까지의�숫자를�찾는다



��//["1",�"2",�"4"]

��var�reg17�=�/[^0-9]/g;�//숫자가�아닌�문자�검색



��//["_",�"c",�"o",�"s",�"t",�"=",�"$"]

��var�reg18�=�/[a-z]/g;�//a~z�소문자



��//["o",�"r",�"l",�"d",�"i",�"d",�"e",�"e",�"b"]

��var�reg19�=�/[A-Z]/g;�//A~Z�대문자



��//["W",�"W",�"W"]

��var�reg20�=�/[a-zA-Z]/g;�//알파벳�대소문자�모두�찾기



��//["W",�"o",�"r",�"l",�"d",�"W",�"i",�"d",�"e",�"W",�"e",�"b"]

��var�reg21�=�/[ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g;�//한글만�찾기



��//["배",�"우",�"기"]

��var�reg22�=�/[^ㄱ-ㅎ|ㅏ-ㅣ|가-힣]/g;�//한글이�아닌�문자만�찾기



��//["2",�"0",�"1",�"8",�"�",�"J",�"a",�"v",�"a",�"S",�"c",�"r",�"i",�"p",�"t",�"�"]

��var�reg23�=�/a[cpr]/g;�//a다음에�c또는�p�또는�r이�나오는�문자�찾기



��//["ap",�"ac",�"ap",�"ar",�"ap"]

��//[패턴문자�{n}�]

��var�reg24�=�/ap{2}/g;�//a다음에�2개의�p가�있는�문자�찾기



��//["app",�"app"]

��//[패턴문자�^$�]

��//a로�시작하고�중간에�0개�이상의�문자가�있고�e�뒤에�공백이�있는�문자�찾기�

��var�reg25�=�/^a.*e\s/gi;�




��//["apple�achieve�"]

��//[패턴문자�()�]

��//공백�앞뒤의�문자를�찾아서�쉽표로�변환하는�예제

��var�reg26�=�/(\w+)\s(\w+)/;�

��var�reg26result�=�str3.replace(reg26,�"$1,�$2");


��//World,�Wide�Web

�</script>

</body>

</html>

- 소스코드 : https://pastebin.com/Upn3TwQt

[응용예제] email 주소 유효성 검사

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<form�onsubmit="return�formValidate();">

��<div>

��<label�for="email">Email</label>

��<input�type="text"�name="email"�id="email">

��<input�type="submit"�value="검사하기">

��</div>

��<p�id="msg"�style="color:�red;"></p>

�</form>


��function�formValidate()�{

��var�email�=�document.getElementById("email").value;

��if(�validateEmail(email)�===�false�)�{

��document.getElementById("msg").innerHTML�=�"Email�형식이�맞지�않음";


��}

��}

��function�validateEmail(email)�{

��var�regEmail�=�/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/;

��return�regEmail.test(email);

��}

�</script>

</body>

</html>


Ÿ /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/

- ^[a-zA-Z0-9._-]+F 이 패턴은 email의 시작이 alphanumeric 또는 마침표와 밑줄, 대시를 포함한 문자 하

나 이상으로 시작해야 한다는 의미이다.

- @F 앞의 패턴 다음에 반드시 @가 포함되어 있어야 한다는 의미이다.

- [a-zA-Z0-9.-]+

F @ 다음에도 하나 이상의 alphanumeric또는 마침표와 밑줄, 대시를 포함한 문자 하나

이상이 나와야 한다.

- \.

F 앞의 문자 뒤에 마침표가 표시되어야 한다. \가 붙은 것은 그냥 . 만 찍을 경우 특정

문자 하나를 나타내는 패턴문자로 인식되므로 . 그대로를 표시하고 싶으면 escape 문

자 \를 써서 .를 표시한다.

- [a-zA-Z]{2,4}$F 끝나는 문자는 반드시 알파벳(소문자 또는 대문자) 최소 2문자 최대 4문자가 있어야

한다.

- 위 패턴든 다음 패턴과 동일하다.

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$

Ÿ Email 체크 다른 패턴

/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9

]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/


[응용예제] 입력 폼에 숫자만 입력되게 하기 2, 정규표현식 활용

본 문서 앞에서 키보드를 누를 때 키 코드를 캐치하여 숫자 외에는 입력이 안되게

한 예제가 있었다. 여기서는 같은 예제를 정규표현식으로 바꿔보자.

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<form�onsubmit="return�checkForm();">

��<p>

��<label�for="amount">나이</label>

��<input�type="text"�name="age"�id="age">


��</p>

�</form>


��function�checkForm()�{

��var�age�=�document.getElementById("age").value;

��var�reg�=�/^\d+$/;�//숫자로�시작하고�숫자로�구성되고�숫자로�끝나는지�검사

��if(�reg.test(age)�===�false�)�{

��alert("숫자만�입력하세요.");


��}

��}

�</script>

</body>

</html>


[응용예제] 문자열에서 특정 문자 찾아서 하이라이트 시키기

<!DOCTYPE�html>

<html�lang="en">

<head>




��.active�{�color:�red;�background-color:�yellow;}

�</style>

</head>

<body>

�<p�id="mytext">The�World�Wide�Web�(abbreviated�WWW�or�the�Web)�is�an�information�space�where�

documents�and�other�web�resources�are�identified�by�Uniform�Resource�Locators�(URLs),�interlinked�

by�hypertext�links,�and�can�be�accessed�via�the�Internet.From�

https://en.wikipedia.org/wiki/World_Wide_Web</p>

�<p�id="mytext2"></p>


��var�mytext�=�document.getElementById("mytext").innerHTML;

��var�reg�=�/(web)/gi;

��var�str�=�mytext.replace(reg,�"<span�class='active'>$1</span>");

��document.getElementById("mytext2").innerHTML�=�str;

�</script>

</body>

</html>


JavaScript AJAX

¡ AJAX란?

Ÿ Asynchronous JavaScript and XML

- AJAX(애이젝스)는 비동기 웹 개발을 위한 기법이다.

- AJAX는 페이지가 로딩된 이후에 서버와 통신할 수 있는 방법을 제공한다.

- 페이지를 이동하거나 새로고침 하지 않고도 페이지를 Update할 수 있다.

- 페이지 작업을 하는 동안 백그라운드로 서버에 데이터를 전송할 수 있다.

Ÿ AJAX 장단점

- https://ko.wikipedia.org/wiki/Ajax

- 장점

F 페이지 이동없이 고속으로 화면을 전환할 수 있다.

F 서버 처리를 기다리지 않고, 비동기 요청이 가능하다.

F 수신하는 데이터 양을 줄일 수 있고, 클라이언트에게 처리를 위임할 수도 있다.

- 단점

- Ajax를 쓸 수 없는 브라우저에 대한 문제가 있다.

F HTTP 클라이언트의 기능이 한정되어 있다.

F 페이지 이동없는 통신으로 인한 보안상의 문제

F 지원하는 Charset이 한정되어 있다.

F 스크립트로 작성되므로 디버깅이 용이하지 않다.

F 요청을 남발하면 역으로 서버 부하가 늘 수 있음.

F 동일-출처 정책으로 인해 다른 도메인과는 통신이 불가능하다.

Ÿ XMLHttpRequest

- XMLHttpRequest는 Microsoft에서 만든 JavaScript Object로 백그라운드에서

url을 열고 요청을 보내고 응답을 받아 처리하는 것을 주요 기능으로 하고

있다. 현재는 일부 브라우저를 제외하고는 대부분의 브라우저가 지원하고 있

으며 AJAX는 바로 이 XMLHttpRequest를 사용한 웹 기술이다.


Ÿ AJAX 요약

- AJAX를 사용하면 페이지 이동 없이 서버와 통신할 수 있다.

- AJAX는 웹 서버 환경에서만 작동한다(file://...에서는 작동 안함).

- AJAX는 기본적으로는 동일한 도메인에서만 작동한다.

- AJAX는 현대 웹개발에서 상당히 중요한 비중을 차지한다.

- 대부분의 주요 웹 브라우저들이 AJAX를 지원한다.

¡ AJAX 사용 준비

AJAX는 서버환경에서만 작동하므로 AJAX를 테스트하기 위해서는 웹서버가 필요

하다. 또는 웹서버 기능을 제공하는 편집기(예, Brackets, PhpStorm 등)를 사용해

야 한다. 서버의 자원(PHP와 같은 서버사이드 언어와 MySQL같은 DB시스템 등)을

이용하기 위해서는 XAMPP와 같은 웹 서버와 DB등을 제공하는 소프트웨어를 설

치하는 것이 좋을 것이다.

본 교재에서는 XAMPP를 설치해서 웹서버를 사용하는 것으로 할 것이다.

그 외에는 AJAX를 위해서 별도로 준비할 것이 없다. 왜냐면 AJAX는 전혀 새로운

기술이 아니라 이미 오래 전에 발표되고 대부분의 웹브라우저가 지원하는

XMLHttpRequest객체를 사용하여 다양한 방법으로 웹 서비스를 제공하기 때문이

다.

¡ AJAX 지원 브라우저① Mozilla Firefox 1.0 이상

② Apple Safari 1.2 이상

③ Microsoft Internet Explorer 5 이상

④ Konqueror.

⑤ Opera 7.6 이상

⑥ Google Chrome


¡ AJAX 지원 여부 확인 코드

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>



��var�xhr;

��if�(window.XMLHttpRequest)�{

��//�대부분의�최신�브라우저는�window.XMLHttpRequest를�지원

��xhr�=�new�XMLHttpRequest();

��}�else�{

��//�예전�IE를�위한�코드

��xhr�=�new�ActiveXObject("Microsoft.XMLHTTP");

��}

��var�info�=�document.getElementById("info");

��if(�xhr�)�{

��info.innerHTML�=�"이�브라우저는�AJAX를�지원합니다.";

��}�else�{

��info.innerHTML�=�"이�브라우저는�AJAX를�지원하지�않습니다.";

��}

�</script>

</body>

</html>

최신의 브라우저들은 대부분 window.XMLHttpRequest를 지원하므로 별다른 코드

를 사용하지 않아도 된다.

혹시라도 IE5나 IE6 버전을 사용하는 경우에만 다음과 같이 사용한다.

xhr�=�new�ActiveXObject("Microsoft.XMLHTTP");


¡ AJAX 기본 예제

AJAX 기본 예제를 위해서 index.html과 1.html, 2.html, 3.html 파일을 만들 것이

다. 그리고 index.html 파일에서 버튼을 눌러 1~2.html 파일을 페이지 이동 없에

index.html의 특정 요소에 불러다 표시하도록 할 것이다.

Ÿ index.html

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<div>

��<button�onclick="getAjaxFile('1.html');">페이지�1</button>



�</div>

�<div�id="content">

��<h1>index.html</h1>

��<p>Lorem�ipsum�dolor�sit�amet,�consectetur�adipisicing�elit,�sed�do�eiusmod

��tempor�incididunt�ut�labore�et�dolore�magna�aliqua.</p>

�</div>


��function�getAjaxFile(file)�{

��var�xhr�=�new�XMLHttpRequest();�//XMLHttpRequest�인스턴스�xhr�생성

��xhr.onreadystatechange=function()�{�//XMLHttpRequest�요청�후�상태�변화가�생기면

��if�(xhr.readyState==4�&&�xhr.status==200)�{�//요청에�대한�응답이�성공하면

��document.getElementById("content").innerHTML=xhr.responseText;

��}

��};

��xhr.open("GET",file,true);�//file을�GET�방식으로�열도록�준비

��xhr.send();�//요청�전송(성공하면�onreadystatechange의�함수�실행)

��}

�</script>

</body>

</html>

Ÿ 1.html

<h1>1.html</h1>

<p>Ut�enim�ad�minim�veniam,�quis�nostrud�exercitation�ullamco�laboris�nisi�ut�aliquip�ex�

ea�commodo�consequat.</p>


Ÿ 2.html

<h1>2.html</h1>

<p>Duis�aute�irure�dolor�in�reprehenderit�in�voluptate�velit�esse�cillum�dolore�eu�fugiat�

nulla�pariatur.</p>

Ÿ 3.html

<h1>3.html</h1>

<p>Excepteur�sint�occaecat�cupidatat�non�proident,�sunt�in�culpa�qui�officia�deserunt�

mollit�anim�id�est�laborum.</p>

위 예제에서 index.html 파일의 버튼을 누를 때마다 페이지 이동 없이 1~3.html이

화면에 표시되는 것을 볼 수 있다.


Ÿ 세부설명

- new XMLHttpRequest()

F 새로운 XMLHttpRequest 객체를 생성한다.

- open(method, url, async[, username][, password])

F 요청의 세부 사항을 설정한다.

F method : 요청방식, GET, POST

F url : 요청을 보낼 주소

F async : 비동기 여부 설정, true=비동기, false=동기

동기이면, 요청을 보내서 응답을 받을 때까지 다른 동작을 하지 않고 기다린다.

F username : 선택적, 사용자 이름, 웹 페페이가 아이디, 패스워드 요청 시

F password : 선택적, 비밀번호, 웹 페페이가 아이디, 패스워드 요청 시

- send()

F 요청을 전송한다.

F GET 요청을 위해서는 send()를 실행한다.

F POST 요청을 위해서는 send(문자열) 형식으로 값을 보낸다.

- onreadystatechangeF readyState 속성에 변화가 생겼을 때, 즉 요청을 보냈을 때 상태에 대한 변화가 있을

때 실행할 함수를 정의한다.

F onreadystatechange = function() { //... }와 같은 방법으로 정의

- readyState

F XMLHttpRequest로 보낸 요청의 상태 값을 반환

F 0: 요청이 초기화되지 않았음.

F 1: 서버와 연결이 시작됨.

F 2: 요청이 도달되었음.

F 3: 요청을 진행중임.

F 4: 요청이 끝나고 응답이 준비되었다.

- statusF 요청을 보낸 결과의 응답 상태의 숫자값

F 200: "OK", 성공

F 403: "Forbidden", 차단됨

F 404: "Not Found", 파일을 찾을 수 없음

F 모든 상태 코드 알아보기, 다음 링크 참조

https://developer.mozilla.org/ko/docs/Web/HTTP/Status


- statusTextF 요청을 보낸 결과의 응답 상태의 문자값

F "OK", "Forbidden", "Not Found" 등

- responseTextF 응답결과로 받은 데이터를 문자열로 받는다.

F 데이터는 요청을 보낸 url에서 출력된 데이터이다.

- responseXMLF 응답결과로 받은 데이터를 XML로 받는다.

¡ AJAX XML 읽기 예제

XML(Extensible Markup Language)은 HTML과 같은 Markup 언어이다. XML은 웹

에서 데이터를 공유하기 위한 방법으로 설계되었다. HTML은 W3C에 의해 표준 태

그들과 그 사용법이 정의되어 있는 반면에 XML은 필요에 따라 여러 태그들을 만

들어 사용할 수 있다. 이런 측면에서 HTML은 XML에 포함되는 개념이라고도 할

수 있다.

여기서는 친구 목록을 포함하는 간단한 XML 파일을 만들고 이를 AJAX를 활용하

여 웹 페이지에 표(table)로 표시하는 방법을 알아보자.

Ÿ friends.xml

<?xml�version="1.0"�encoding="UTF-8"?>

<addressbook>

�<friend>

��<name>홍길동</name>

��<email>[email protected]</email>

��<phone>010-1234-5678</phone>

��<age>22</age>

�</friend>

�<friend>

��<name>최호영</name>


��<phone>010-2222-3333</phone>

��<age>25</age>

�</friend>

�<friend>


��<name>박일구</name>


��<phone>010-3333-4567</phone>

��<age>31</age>

�</friend>

�<friend>

��<name>정의람</name>


��<phone>010-9876-5432</phone>

��<age>29</age>

�</friend>

</addressbook>

- 소스코드 : https://pastebin.com/8nkU63Wv

Ÿ index.html

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<div>

��<button�onclick="getAjaxXML('friends.xml');">친구목록보기</button>

�</div>

�<div�id="friend-list"></div>


��function�getAjaxXML(xml)�{




��//응답�결과를�XML로�해석하여�friendData에�저장

��var�friendData�=�xhr.responseXML;�

��//XML에서�<friend>..</friend>를�모두�추출하여�friendList에�배열로�저장��

��var�friendList�=�friendData.getElementsByTagName("friend");�

��var�table�=�"<table�

border='1'><tr><th>이름</th><th>Email</th><th>연락처</th><th>나이</th></tr>";

��for(�var�i=0;�i<friendList.length;�i++)�{

��var�friend�=�{};�//객체�friend�생성

��//name,�email,�phone,�age�등의�객체의�값을�읽어서�객체�friend에�저장�

��//friendList[i].getElementsByTagName("name")[0].childNodes[0].nodeValue;

��//위�코드를�함수화�하여�getNodeValue(friendList[i],"name")�형식으로�호출하여�값�반환


��friend.name�=�getNodeValue(friendList[i],"name");

��friend.email�=�getNodeValue(friendList[i],"email");

��friend.phone�=�getNodeValue(friendList[i],"phone");

��friend.age�=�getNodeValue(friendList[i],"age");

��table�+=�"<tr>";

��table�+=�"<td>"�+�friend.name�+�"</td>";

��table�+=�"<td>"�+�friend.email�+�"</td>";

��table�+=�"<td>"�+�friend.phone�+�"</td>";

��table�+=�"<td>"�+�friend.age�+�"</td>";

��table�+=�"</tr>";

��}

��table�+=�"</table>";

��document.getElementById("friend-list").innerHTML�=�table;

��}

��};

��xhr.open("GET",xml,true);�//xml을�GET�방식으로�열도록�준비


��}

��function�getNodeValue(nodeData,nodeName)�{

��return�nodeData.getElementsByTagName(nodeName)[0].childNodes[0].nodeValue;

��}

�</script>

</body>

</html>

- 소스코드 : https://pastebin.com/T1K7jU9S


¡ AJAX JSON 읽기 예제

JSON은 JavaScript Object Notation(자바스크립트 객체 표기법)의 약자이다.

자바스크립트 객체란 {name1:value1, name2:value2,...} 형식으로 정의되는 데이터

이다. JSON은 XML보다는 비교적 경량의 경량의 DATA 교환 형식으로 간주된다.

이는 코드가 XML에 비해 훨씬 더 간결해서 대용량 데이터의 경우 실제로 저장되

는 텍스트 수가 많이 적다(간결함 : JSON > XML > SGML). 뿐만 아니라 사람이

읽고 쓰기에 쉽기도 하고 기계가 분석하고 생성하기도 쉽다. 최근에는 가장 이상

적인 데이터 교환 언어로 인정되고 있다.

여기서는 앞의 예제에서 만들어 본 friends.xml 데이터를 JSON으로 변환하여

friends.json으로 저장하고 이를 index.html에서 표(table)로 읽어들이는 예제를 만

들어볼 것이다. JSON 데이터가 XML 데이터와 어떻게 다른지 또 JSON 데이터에

어떻게 접근하는지 살펴보자. 적어도 JSON 데이터에 접근하는 코드가 XML보다는

간결하다는 것을 알 수 있다.

Ÿ friends.josn

[

�{

��"name":�"홍길동",

��"email":�"[email protected]",

��"phone":�"010-1234-5678",

��"age":�"22"

�},

�{

��"name":�"최호영",


��"phone":�"010-2222-3333",

��"age":�"25"

�},

�{

��"name":�"박일구",


��"phone":�"010-3333-4567",

��"age":�"31"

�},

�{


��"name":�"정의람",


��"phone":�"010-9876-5432",

��"age":�"29"

�}

]

- 소스코드 : https://pastebin.com/vZjbeNqk

Ÿ index.html

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<div><button�onclick="getAjaxXML('friends.json');">친구목록보기</button></div>

�<div�id="friend-list"></div>


��function�getAjaxXML(json)�{




��//응답�결과�text를�JSON으로�변환�friendList에�저장

��var�friendList�=�JSON.parse(xhr.responseText);�

��var�table�=�"<table�

border='1'><tr><th>이름</th><th>Email</th><th>연락처</th><th>나이</th></tr>";

��for(�var�i=0;�i<friendList.length;�i++)�{

��table�+=�"<tr>";

��table�+=�"<td>"�+�friendList[i].name�+�"</td>";

��table�+=�"<td>"�+�friendList[i].email�+�"</td>";

��table�+=�"<td>"�+�friendList[i].phone�+�"</td>";

��table�+=�"<td>"�+�friendList[i].age�+�"</td>";

��table�+=�"</tr>";

��}

��table�+=�"</table>";

��document.getElementById("friend-list").innerHTML�=�table;

��}

��};

��xhr.open("GET",json,true);�//json을�GET�방식으로�열도록�준비


��}

�</script>

</body>

</html>


jQuery


What is jQuery?

¡ jQuery는?

Ÿ jQuery는 JavaScript Library 중 하나

Ÿ jQuery는 JavaScript를 기반으로 작성된 객체와 메서드 집합

Ÿ 간단한 코드로 많을 일을 할 수 있도록 지원(write less, do more)

Ÿ jQuery는 CSS Selector로 시작되어 현재 전세계에서 가장 많이 사용

되고 있는 JavaScript Library 중 하나

¡ jQuery History

Ÿ 2005.8.22일 John Resig에 의해 CSS Selector로서의 jQuery 제안

http://ejohn.org/blog/selectors-in-javascript/

Ÿ 2006.8.26일 jQuery 1.0(첫 번째 안정화 버전) 발표

Ÿ 2007.9.17일 jQuery UI 초기 버전 발표

Ÿ 이후 버전업을 거듭해 2018년 01월 현재 v.3.2.1 버전 배포

John Resig

Emeritus Member | Creator of the jQuery Library


¡ jQuery로 할 수 있는 일들

Ÿ HTML / DOM 처리(manipulation)

Ÿ CSS 처리

Ÿ HTML event 처리

Ÿ 효과(effects)와 애니메이션

Ÿ AJAX 처리(+ XML, JSON…)

Ÿ 기타 기능들

¡ jQuery를 시작하기 전에 알아야 할 것들

Ÿ HTML

Ÿ CSS

Ÿ JavaScript

Ÿ jQuery는 별다른 특수한 요소 없이 JavaScript로 만들어진 Library이

므로 jQuery를 사용하기 위해서는 JavaScript에 대한 기본적인 지식

이 필수


참고 : What is HTML DOM(HTML Document Object Model)

- Web 페이지가 로딩되면 브라우저는 소스코드를 해석하여 tree 구조의

DOM을 생성한다.

- HTML DOM은 HTML 요소(elements)들을 객체로 정의하며, 요소들의 속성

(properties), HTML 요소들에 접근하기 위한 메서드(method), 모든 HTML

요소들의 evet들을 정의한다.

- DOM을 통해서 JavaScript는 HTML 문서의 요소들에 접근하고 변경할 수

있다.

- 결국, HTML DOM은 HTML 요소들(elements)의 내용과 구조, 속성과 스타

일에 관한 정보를 얻어내거나(get), 변경하고(change) 추가(add) 또는 삭제

(delete)하기 위한 웹 표준임.

그림출처: http://www.w3schools.com/js/js_htmldom.asp


jQuery Versions

¡ jQuery Current Versions

Ÿ 3.x : 공식 최신 버전 : jQuery 3.2.1 (2017.03.20~)

Ÿ 2.x : 공식 최종 버전 : jQuery 2.2.4 (2016.5.20)

Ÿ 1.x : 공식 최종 버전 : jQuery 1.12.4 (2016.5.20)

¡ 버전 별 지원 사항

Ÿ jQuery 3.x : jQuery 현재 공식 지원 버전(IE 6~8 지원 X)

Ÿ jQuery 2.x : jQuery 3.x 이전 버전(IE 6~8 지원 X)

Ÿ jQuery 1.x : jQuery 2.x와 기능은 같으나 IE 6~8 지원 O

Ÿ IE 6~8을 지원하도록 하려면 jQuery 1.x 버전을 사용하여야 함.

¡ Compressed or Uncompressed Version?

Ÿ Compressed Version : 파일의 용량을 줄이기 위해 문서에 포함된

주석, 공백, 줄 바꿈 등을 거의 제거한 버전으로 기능은 동일함

(예, jquery-3.2.1.min.js)

Ÿ Uncompressed Version : 주석이 포함되고 가독성을 높이기 위해 줄

바꿈 및 띄어쓰기 등이 포함되어 Compressed Version 보다는 파일

크기가 약간 큼 (예,jquery-3.2.1.js)


jQuery 시작하기

¡ jQuery Download

Ÿ v3.2.1 기준, IE6~8 지원하려면 v1.12.4

Ÿ http://jquery.com/download 접속

Ÿ Download the compressed, production jQuery 3.2.1

(또는 Download the uncompressed, development jQuery 3.2.1)

클릭 또는 마우스 오른쪽 버튼 눌러 "다른 이름으로 대상 저장"

html 파일 또는 html 파일이 저장된 폴더의 하위(예, js 폴더)에 저장

¡ jQuery Download 코드 사용

Ÿ Download한 jQuery 파일은 header 안 또는 body 안에서 연결할 수

있다.

Ÿ jQuery 파일은 반드시 jQuery 활용 코드보다 앞에 연결되어 있어야

한다.

<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>jQuery</title>

</head>

<body>

��

��<script�src="js/jquery-3.1.1.min.js"></script>

��<script>

��//JavaScript�or�jQuery�Codes�here...

��</script>

</body>

</html>

<!DOCTYPE�html>

<html�lang="en">

<head>




��<script>

��//JavaScript�or�jQuery�Codes�here...

��</script>

</head>

<body>

��

</body>

</html>

¡ jQuery CDN – Content Delivery Network

Ÿ jQuery 코드를 다운로드 하지 않고 웹의 리소스에 연결하여 사용

Ÿ google 등에서 jquery cdn을 검색하여 활용 가능

Ÿ 단, CDN 연결 방법은 인터넷 연결이 없을 때 사용할 수 없다.

Ÿ jQuery CDN List

- http://code.jquery.com

- https://cdnjs.com/libraries/jquery/

- https://developers.google.com/speed/libraries/#jquery

- https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CD

N_0

Ÿ CDN 코드 연결

<!DOCTYPE�html>

<html�lang="en">

<head>



��<script�src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

</head>

<body>

��

��<script>

��//JavaScript�or�jQuery�Code�here...

��</script>

</body>

</html>

jQuery 버전은 수시로 업그레이드되므로 항상 최신 버전 확인 필요


¡ jQuery의 시작 $ 또는 jQuery

Ÿ $는 JavaScript에서 함수 이름으로 사용할 수 있는 문자 중 하나

Ÿ 예) var $ = function() { }; 또는 function $() { }

Ÿ jQuery 외에도 이와 유사한 Prototype Library도 $ 사용

Ÿ jQuery도 jQuery Library에 접근하는 방법으로 $ 사용

Ÿ jQuery에서 $ 는 jQuery와 같음

Ÿ 아래 4 코드는 모두 jQuery에 접근하는 같은 방법임

⑦ window.jQuery()

⑧ window.$()

⑨ jQuery()

⑩ $()

¡ jQuery 기본 문법(Syntax)

Ÿ jQuery는 HTML 요소를 선택하고 선택한 요소에 대해 특정한 동작

을 하도록 작성된 JavaScript Library

Ÿ 기본 문법 : $( selector ).action()

- (selector) : CSS 기반의 요소 선택 , 예) $( "#visual > img")

또는 데이터(배열 등) 선택, 예) $( slides ), $(slides[0])

- action() : 요소에 대해 실행될 작업(동작, 값 반환 및 변경 등)


¡ jQuery에서 $를 사용하지 않는 방법

Ÿ jQuery 외에 다른 코드 또는 Library에서 $를

사용하는 경우 충돌 가능

Ÿ 예를 들어 Prototype(2015.10.22 최종 업데이트)의

경우 $를 jQuery와 유사하게 사용하므로 두 가지를

같이 사용하는 경우 충돌 발생

Ÿ 최근의 AngularJs 경우 $scope나 $httpd 등 $ 사인

을 사용하는 경우가 있어 jQuery와 충돌 발생 가능

Ÿ 이런 경우 jQuery는 $를 사용하지 않게 하거나

다른 것으로 대체할 수 있도록 noConflict()

메서드를 제공함(사용 예, 아래 코드 참조)

<div�id="greetings"></div>

<script�src="js/jquery-3.1.1.min.js"></script>

<script>

��var�J�=�jQuery.noConflict()�//�이�코드�이후�$는�작동하지�않고�J로�대체됨

��J(�"#greetings"�).html("<h1>Hello�World</h1>");�//jQuery가�J를�통해서�동작함

��$(�"#greetings"�).html("<h1>Test�jQuery</h1>");�//$는�인식되지�않으므로�에러�발생

��//참조�:�http://api.jquery.com/jQuery.noConflict/�

</script>


¡ $, $() 또는 jQuery, jQuery()

Ÿ 셀렉터(selector) 기반의 $ 사용

- $( "p" ).click(); // p element 선택하여 클릭 이벤트 발생(trigger)

- $( "#mydiv" ).hide(); // ID가 mydiv인 element 선택하여 감추기

- $( ".myclass" ).css( { color: "#f00" }); // class가 myclass인 element 선택

Ÿ 셀렉터가 없는 메서드 사용

- $.get( url, function() { } ); //AJAX get method

- $.post( url, data, function() { } ); //AJAX post method

- $.each(); //배열의 반복 처리

- $.getJSON( url, function(data) { } ); // AJAX 기반의 JSON 데이터 가져오

기

- $.trim(); //앞 뒤의 공백 문자 제거

- $.inArray(); // 배열에서 특정 인덱스가 있는지 검사

- $extend(); // 두 개의 객체 속성을 합쳐줌

- $.proxy();

- $.isArray(); //배열인지 검사

- $.isFunction(); //함수인지 검사

- $.isNumeric(); //숫자인지 검사

- $.type(); // 데이터의 형을 반환

¡ jQuery onload

Ÿ 웹 페이지의 요소들이 모두 로딩되기 전에 JavaScript 코드가 실행

되면 아직 로드되지 않은 요소에 접근하려 할 때 에러가 발생할 수

있음.

Ÿ 따라서, JavaScript에서는 다음과 같이 onload 이벤트를 캐치하여 코


드를 처리함

Ÿ window.onload = function() { //code here… }

Ÿ jQuery에서는 $(document).ready(function() { //code here… });

Ÿ 위 코드는 다음처럼 줄여서 사용 가능 $( function() { //code here…

} );


<script>

��$(�document�).ready(function()�{

��//�Code�here....

��});

</script>


<script>

��$(�function()�{

��//�Code�here....

��});

</script>

¡ 선택한 요소의 콘텐트와 스타일 변경하기

Ÿ jQuery에서 가장 핵심적인 기능으로 HTML 요소를 선택하고 선택된

요소에 대해 메서드를 실행함으로써 내용 또는 속성 등을 변경하거

나 효과를 부여할 수 있음


<!DOCTYPE�html>

<html�lang="en">

<head>



��<style>

��.pcolor�{�color:�green;�}

��</style>

</head>

<body>

��<div�id="greetings"></div>

��<div�class="moregreetings"></div>

��<p></p>


��<script>


��//�ID가�greetings인�요소의�콘텐트(태그포함)를�변경

��$(�"#greetings"�).html("<h1>Hello�World</h1>");�

��//�class에�moregreetings를�포함한�요소의�텍스트�변경

��$(�".moregreetings"�).text("This�is�a�jQuery�Example.");�

��//�ID가�greetings인�요소의�style�중�color�속성�변경

��$(�"#greetings"�).css({color:"blue"});�

��//�class에�moregreetings를�포함된�요소에�정의된�다른�클래스�추가(반대는�removeClass)

��$(�".moregreetings"�).addClass("pcolor");�

��//�태그이름이�p�인�모든�요소의�텍스트�변경

��$(�"p"�).text("jQuery�can�chagne�elements'�content�or�style.");�

��});

��</script>

</body>

</html>


¡ jQuery 효과(effects)

Ÿ 선택된 요소에 대해 다양한 효과를 부여할 수 있음

<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>jQuery�Effects</title>

</head>

<body>

��<h1>Hello�World</h1>

��<div�class="moregreetings">This�is�a�jQuery�Effect�Example.</div>


��<script>


��$(�"h1"�).hide();�//�h1�요소를�모두�감춘다.

��$(�"h1"�).slideDown("slow");�//h1�요소를�(감춰진�상태에서)�서서히�슬라이드�다운�하며�보여줌

��$(�".moregreetings"�).hide("slow");�//클래스�moregreetings를�서서히�감춤

��});

��</script>

</body>

</html>


속성(attributes) - get/set

¡ $( "요소선택" ).attr( 속성이름, [속성값] );

Ÿ getter : $( "a" ).attr( "href" ); //a 요소의 href 속성을 얻어냄

Ÿ setter : $( "a" ).attr( "href", http://webskills.kr ); //a 요소의 href 속

성을 변경함

Ÿ 예제들

<p�class='linktest'><a�href='/home/index.html'�data-menu='main'�target='_top'>home</a></p>

<script>


��var�link�=�$(�".linktest�a"�).attr("href");�//�.linktest�하위의�a의�href�속성을�얻어낸다

��console.log(�link�);�//�"/home/index.html"�출력

��var�menu�=�$(�".linktest�a").attr("data-menu");�//�.linktest�하위의�a의�href�속성을�얻어낸다

��console.log(�menu�);�//�"main"�출력

��var�target�=�$(�".linktest�a").attr("target");�//�.linktest�하위의�a의�href�속성을�얻어낸다

��console.log(�target�);�//�"_top"�출력

��//�.linktest�하위�a의�href�속성값을�새로�지정

��$(�".linktest�a"�).attr("href",�"/new/home/index.html");�

��console.log(�$(�".linktest�a"�).attr("href")�);�//�"/new/home/index.html"�출력

��var�linktext�=�$(�".linktest�a"�).html();�//�속성(attribute)이�아니라�콘텐트�값�얻어옴

��console.log(�linktext�);�//�"home"�출력

��$(�".linktest�a"�).html("My�Home");�//�콘텐츠�변경

��console.log(�$(�".linktest�a"�).html()�);�//�"My�Home"�출력

��});

</script>

속성 제거 : removeAttr("속성")

$(�".linktest�a").removeAttr("href");


¡ HTML get - html(), text(), val()

Ÿ html() : 요소의 innerHTML(html 요소 전체)을 얻어옴

Ÿ .text() : 요소의 text(html 요소를 제외한 텍스트만) 얻어옴

Ÿ .val() : form 요소의 value 값을 얻어옴(input, textarea 등)

<div�id="mydiv"><h1>jQuery�Getting/Setting</h1></div>

<form><input�type="text"�id="myinput"�value="Hello"></form>

<script>

��$(document).ready(function()�{

��console.log(�$("#mydiv").html()�);�//�<h1>jQuery�Getting/Setting</h1>

��console.log(�$("#mydiv").text()�);�//�jQuery�Getting/Setting

��console.log(�$("#myinput").val()�);�//�Hello

��});

</script>

위 코드는 아래와 같이 jQuery를 사용하지 않은 코드로 변환할 수 있다.

<div�id="mydiv"><h1>jQuery�Getting/Setting</h1></div>


<script>

��window.onload�=�function()�{

��var�mydiv�=�document.getElementById("mydiv");

��console.log(�mydiv.innerHTML�);

��console.log(�mydiv.textContent�);

��var�myinput�=�document.getElementById("myinput");

��console.log(�myinput.value�);

��}

</script>


¡ HTML set - html(html), text(text), val(value)

Ÿ html( html ) : 요소의 innerHTML(html 요소 전체)을 설정함

Ÿ .text( text ) : 요소의 content를 text 설정함(html은 무시되고 태그가

제외된 text로 설정됨)

Ÿ .val( value ) : form 요소의 value 값을 설정함(input, textarea 등)

<div�id="mydiv1"><h1>jQuery�Getting/Setting</h1></div>

<div�id="mydiv2">jQuery�Text</div>


<script>


��$("#mydiv1").html("<h1>New�HTML</h1>");�

��$("#mydiv2").text("<h1>New�Text</h1>");�

��$("#myinput").val("New�Value");�

��});

</script>

<script>

��window.onload�=�function()�{

��document.getElementById("mydiv1").innerHTML�=�"<h1>New�HTML</h1>";

��document.getElementById("mydiv2").textContent�=�"<h1>New�Text</h1>";

��document.getElementById("myinput").value�=�"New�Value";

��}

</script>

jQuery를 사용하지 않은 setter 사용


요소 선택(selecting elements)

¡ jQuery Selectors are based on CSS Selector

Ÿ jQuery의 설명에 따르면 jQuery는 CSS 1-3 버전의 Selectors를 빌려

왔다고 한다.

Ÿ 따라서 jQuery Selector를 정확히 구사하려면 CSS Selectors를 이해

해야 한다.

F http://www.w3schools.com/cssref/css_selectors.asp

F https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors

F https://www.w3.org/TR/css3-selectors/

¡ 요소 선택 방법들

Ÿ * Selector : 모든 요소들을 선택

$(�"*"�)

Ÿ first Selector : 선택된 요소들 중 첫 번째 요소 선택(하나만 선택됨)

$(�"#visual�>�img:first"�)�//ID가�'visual'인�요소�바로�하위의�img�중�첫�번째�요소�선택

$(�"p:first"�)�//문서에�포함된�p�중에�첫�번째�요소�선택

Ÿ first-child Selector : 선택된 요소들 중 첫 번째 인 것들 선택(다중

선택 가능)

$(�"table�tr�td:first-child"�)�//테이블의�줄마다�첫�번째인�td를�모두�선택

$(�"�table�tr�td:first"�)�//테이블의�tr�하위의�td�중�첫�번째�인�것�하나�선택


Ÿ last Selector : 선택된 요소들 중 마지막인 요소 선택

$(�"table#booklist�tr:last"�)�//선택한�테이블의�마지막�tr(줄)�선택

Ÿ last-child Selector : 선택된 요소들 중 마지막인 요소들 선택(복수)

$(�"table#booklist�td:last-child"�)�//선택한�테이블의�tr�중�마지막�td들�선택

Ÿ first-of-type, last-of-type Selector : 특정 type의 첫 번째, 마지막 요

소 선택

$(�"div�p:first-of-type"�)�//div의�children�중�p인�첫�번째�요소�선택

$(�"div�p:last-of-type"�)�//div의�children�중�마지막�p�요소�선택

Ÿ 특정 속성을 가진 요소들 선택

$(�"[href]"�)�//속성�중에�href가�있는�모든�요소�선택

Ÿ 현재 선택된 요소

$(�this�)�//선택된�대상�그�자체를�가리킬�때�사용

Ÿ 짝수 혹은 홀수의 index(순서)에 있는 요소들 선택

$(�"tr:even"�)�//짝수의�index를�갖는�모든�tr�선택(index가�0인�첫�번째�tr부터�선택됨)

$(�"tr:odd"�)�//홀수의�index를�갖는�모든�tr�선택(index가�1인�두�번째�tr부터�선택됨)

Ÿ Animation 되는 요소 선택

$(�"div:animated"�)�//현재�애니메이션�되고�있는�모든�div�요소�선택

Ÿ 보이거나 감춰진 요소 선택

$(�"div:visible"�),�$(�"div:hidden"�)�//보이는(visible),�감춰진(hidden)�모든�div


Ÿ 인덱스 번호 기준으로 선택

$(�"div:gt(3)"�)�//인덱스�번호가�3보다�큰�요소들�선택(0~3까지�제외)

$(�"div:lt(3)"�)�//인덱스가�3보다�작은�요소들�모두�선택(0~2까지만�선택)

$(�"div:eq(2)"�)�//인덱스가�2인�즉�3번째�요소�선택

$(�"div:nth-child(2)"�)�//�부모�요소의�두�번째�child�인�div�요소�선택

$(�"div:nth-last-child(2)"�)�//�부모�요소의�끝에서�두�번째�child�인�div�요소�선택

$(�"p:nth-of-type(1)"�)�//�부모�요소의�p인�child�요소들�중�첫�번째�요소�선택

$(�"p:nth-last-of-type(2)"�)�//�부모�요소의�p인�child�중�끝에서�두�번째�요소�선택

Ÿ not(selector)

$(�"p:not(.myclass)"�)�//�p�요소들�중�클래스가�myclass가�아닌�요소들�선택

$(�"input:not(:checked)"�)�//�input(checkbox,�radio)들�중�check되지�않은�요소들

¡ 다양한 Selector 예제

Ÿ $( "div + p" )

- 모든 div 바로 뒤에 나타나는 하나의 p 요소 선택

Ÿ $( "div ~ p" )

- div와 부모가 같은 모든 p 요소(div 자신은 제외)

- siblings 참조

Ÿ $( "title~=hello" )

- title 속성에 hello 단어 포함된 모든 요소 선택

- 반드시 독립된 같은 단어 이어야 함(hello! 나 hellos, helloword 등은 안됨)

Ÿ $( "title|=hello" )

- title 속성의 값이 hello로 시작되는 요소 선택

Ÿ $( "a[href^='https']" )

- href 속성의 값이 https로 시작하는 모든 a 요소들


Ÿ $( "img[src$='.jpg']" )

- src 속성의 값이 .jpg로 끝나는 모든 img 요소들

Ÿ $( "div[title*='hello']" )

- title에 hello가 포함된 모든 div 요소들(hihello! 가능)

Ÿ $( "[href!='index.html']" )

- href 속성의 값이 index.html이 아닌 모든 요소들

Ÿ $( ":has(span)" )

- span 요소를 포함하는 모든 요소들 – 예, $("div:has(p)"

Ÿ $( ":contains('hello')" )

- 텍스트 hello를 포함하는 모든 요소 선택

Ÿ $( ":focus" )

- 현재 포커스를 갖는 하나의 요소 선택

Ÿ $( ":empty" )

- 내용이 없는 모든 요소들 선택

Ÿ $( ":parent" )

- children 요소를 포함하는, 즉 어떤 요소들의 부모인 모든 요소

Ÿ $( ":only-child" )

- 요소들을 포함하는 부모의 children 요소들만 선택

Ÿ $( "p:only-of-type" )

- children 요소들 중 p인 요소들만 선택


¡ 폼요소들 선택 예제

Ÿ $( ":input" )

- 모든 input 요소들 선택

Ÿ $( ":button" )

- 모든 <button></button> 및 <input type='button'> 요소들 선택

Ÿ $( ":text" )

- type이 text인 모든 input 선택

Ÿ $( ":password" )

- type이 password인 모든 input 선택

Ÿ $( ":radio" )

- 모든 radio button input 요소 선택

Ÿ $( ":checkbox" )

- 모든 checkbox input 요소 요소 선택

Ÿ $( ":submit" )

- 모든 submit 버튼 button 선택

Ÿ $( ":reset" )

- 모든 reset button 선택

Ÿ $( ":image" )

- 모든 image button input 요소 선택

Ÿ $( ":button" )

- 모든 <button></button> 및 <input type='button'> 선택

Ÿ $( ":file" )


- 모든 file input 요소 선택

Ÿ $( ":enabled" )

- 활성화된 모든 input 요소 선택

Ÿ $( ":disabled" )

- 비활성화된 모든 input 요소 선택

Ÿ $( ":selected" )

- 선택된 모든 input 요소 선택

Ÿ $( ":checked" )

- 체크된 모든 input 요소 선택

¡ 선택 결과로부터 다시 선택 또는 필터링

Ÿ $( "div" ).has( "h1" )

- h1 요소를 포함하고 있는 div 요소 선택

Ÿ $( "div:has(h1)" )

- 위와 같이 h1 요소를 포함하고 있는 div 요소 선택

- jQuery 개발자들은 .has() 가 :has() 보다 속도가 빠르다고 설명함

Ÿ $( "div" ).not( ".main" )

- 클래스 main을 가지지 않은 모든 div 요소 선택

Ÿ $( "tr" ).not( ":even" )

- tr 중 짝수 index가 아닌 tr 선택(2,4,6…번째 tr)

Ÿ $( "#slider img" ).filter( ":visible" )

- #slider 요소에 포함된 보이는 모든 img

- $( "#slider img:visible" ) 와 같음


Ÿ $( "#slider" ).filter( ".active" )

- #slider 하위의 active클래스를 가지는 요소들

- $( "#slider .active" ) 와 같음

Ÿ $( "div p" ).first()

- div 하위의 p 중 첫 번째 요소 선택,

- $( "div p:first" ) 와 같음

Ÿ $( "div p" ).last()

- div 하위의 p 중 마지막 요소 선택

- $( "div p:last" ) 와 같음

Ÿ $( "#slider img" ).eq(2)

- #slider 하위의 세 번째 인덱스의 img 선택

- $( "#slider img:nth-child(3)" ) 과 같을 수도 있지만 항상 일치하지는 않음,

예를 들어 #slider에 포함된 img가 각각의 li에 하나씩 포함되어 있을 경우,

img들은 각각 nth-child index가 1이므로 선택의 결과가 eq(n)과는 다름

¡ :first vs :first-child vs .first()

<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>jQuery�Selectors</title>

</head>

<body>

��<div�id="visual">

��<span�class="visual-btns">

��<img�src="images/left.png"�width="30"�height="30"�alt="left�button">

��<img�src="images/right.png"�width="30"�height="30"�alt="left�button">

��</span>

��<img�src="images/1.jpg"�width="100"�height="100"�alt="img1">



��</div>


��<script>


��console.log(�$("#visual�>�img:first").attr("alt")�);�//img1

��console.log(�$("#visual�img:first").attr("alt")�);�//left�button

��console.log(�$("#visual�>�img:first-child").attr("alt")�);�//img1

��console.log(�$("#visual�img:first-child").attr("alt")�);�//undefined

��console.log(�$("#visual�>�img").first().attr("alt")�);�//img1

��console.log(�$("#visual�>�img").eq(0).attr("alt")�);�//img1

��console.log(�$("#visual�img").eq(0).attr("alt")�);�//left�button

��</script>

</body>

</html>

F #visual의 first-child는 span.visual-btns이며, 이 요소는 alt 속성이 없으므로

$("#visual img:first-child").attr("alt")는 속성과 값이 없어 undefined가 됨

¡ .parent(), .children() ...

Ÿ .parent() : 선택 요소의 한 단계 위 요소 하나 선택

- $( "p.info" ).parent() // class info를 갖는 p 요소의 한 단계 위 부모 요소

Ÿ .parents() : 선택 요소의 모든 부모 선택

- $( "p.info" ).parents() // p.info의 모든 부모요소들, … html까지

- $( "p.info" ).parents( "nav" ) // p.info의 부모요소들 중 모든 nav 요소

Ÿ .parentsUntil() : 지정한 특정 요소까지의 모든 부모 요소들 선택

- $( "p.info" ).parentsUntil("nav") // p.info의 nav 직전까지의 모든 부모 요

소들

Ÿ .children() : 선택 요소의 모든 한 단계 아래의 자식 요소들 선택

- $( "#visual" ).children() //#visual의 모든 하위 요소들 선택

- $( "nav > ul" ).children("li") // nav > ul의 한 단계 아래 자식들 중 li 요

소들만 선택


¡ 선택 대상의 주변 요소들 선택(같은 부모를 갖는

child들-형제자매들 중)

Ÿ $( "img.active" ).siblings()

- 선택된 요소를 제외하고 같은 부모를 갖는 나머지 모든 child 들

Ÿ $( "img.active" ).next()

- 선택된 요소의 siblings 중 바로 다음에 나오는 요소 하나

Ÿ $( "img.active" ).nextAll()

- 선택 요소의 siblings 중 바로 다음에 나오는 모든 요소

Ÿ $( "h1" ).nextUntil( "h5" )

- 선택된 다음 siblings 중 h5 직전까지의 모든 요소

Ÿ .prev(), prevAll(), prevUntil()

- 위 next 관련 요소들과 같으나 역순으로 선택

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<div�class="wrap">

��<div�id="visual">

��<div�class="btns">

��<span�class="btn-left">

��<img�src="images/left.png"�class="img-left"�width="30"�height="30"�alt="left�button">

��</span>

��<span�class="btn-right">

��<img�src="images/right.png"�class="img-right"�width="30"�height="30"�alt="left�button">

��</span>

��</div>

��<div�id="slider">

��<ul>

��<li�class="first"><img�src="images/1.jpg"�width="100"�height="100"�alt="img1"></li>

��<li�class="second"><img�src="images/2.jpg"�width="100"�height="100"�alt="img2"></li>


��<li�class="third"><img�src="images/3.jpg"�width="100"�height="100"�alt="img3"></li>

��</ul>

��</div>

��</div>

�</div>


��<script>

��console.log(�$(".btn-left").parent()�);�//[div.btns]

��console.log(�$(".btn-left").parents()�);�//[div.btns,�div#visual,�div.wrap,�body,�html]

��console.log(�$(".btn-left").parents("#visual")�);�//[div#visual]

��console.log(�$(".img-left").parentsUntil("#visual")�);�//[span.btn-left,�div.btns]

��console.log(�$(".btns").children()�);�//[span.btn-left,�span.btn-right]

��console.log(�$(".wrap").children()�);�//[div#visual,�div#slider]

��console.log(�$(".wrap").children("#slider")�);�//[div#slider]

��console.log(�$(".first").siblings()�);�//[li.second,�li.third]

��console.log(�$(".first").next()�);�//[li.second]

��console.log(�$(".first").nextAll()�);�//[li.second,�li.third]

��console.log(�$(".first").nextUntil(".third")�);�//[li.second]��

��console.log(�$(".third").prev()�);�//[li.second]

��console.log(�$(".third").prevAll()�);�//[li.second,�li.first]

��console.log(�$(".third").prevUntil(".first")�);�//[li.second]�

��</script>

</body>

</html>

¡ 선택한 결과는 어떻게 사용되는가?

Ÿ $(selector).method();

- 선택 결과를 대상으로 하는 method 실행

Ÿ var imgs = $("div>img");

- 선택 결과를 변수에 저장

Ÿ if( $("div") ) { //… }

- 이와 같은 방법으로는 사용할 수 없음, (대상이 없어도 true)가 되기 때문

Ÿ if( $("div").length ) { //…. }

- 이와 같은 방법으로는 사용 가능

Ÿ if( $(this).is(":animated") ) { //… }


- 선택된 요소의 상태 등을 조건으로 설정 가능

Ÿ 사용 예

<div�class="greetings"></div>

<div�id="slider">




</div>


<script>


��$("div.greetings").html("안녕하세요?");�//greetings�클래스를�갖는�모든�div의�콘텐트�지정

��//ID가�slider인�요소의�바로�하위�모든�img를�변수(배열)�slides에�저장

��var�slides�=�$("#slider�>�img");�

��//이�조건은�if(�$(slides)�)�또는�if(�slide.length�)와�같이�쓸�수도�있음

��if(�$("#slider�>�img").length�)�{�

��//여기에�코드�넣기...ID가�slider인�요소의�바로�하위에�img�요소가�하나�이상인�경우�실행

��};�

��});

</script>

¡ 선택한 요소가 여러 개일 때

Ÿ 앞의 예제에서 p.linktest 안에 하나의 a만 있었으나, 여러 개일 때

는?

<p�class='linktest'>

��<a�href='/home/index.html'�data-menu='main'�target='_top'>Home</a>

��<a�href='/home/about.html'�data-menu='about'�target='_self'>About</a>

��<a�href='/home/board.html'�data-menu='board'�target='_blank'>Board</a>

</p>


<script>


��//�.linktest�하위의�첫�번째�a의�data-menu�속성값�"main"만�출력

��console.log(�$(�".linktest�a"�).attr("data-menu")�);�

��//�.linktest�하위의�모든�a의�컬러를�"red"로�변경

��$(�".linktest�a"�).css(�{color:"red"�});

��//�여러�개의�요소들을�반복하여�선택하여�처리

��//�매�반복�시�해당�요소는�this로�지정)


��$(�".linktest�a"�).each(�function(index)�{

��console.log(�index�+�":"�+�$(this).attr("data-menu")�);

��}�);

��//0:main�1:about�2:board�차례로�출력됨

��});

</script>


jQuery Event

¡ 이벤트(events)란?

Ÿ 이벤트란 사용자에 의해 웹 페이지에게 가해지는 응답 가능한 동작

을 말한다.

Ÿ 이벤트란 웹 페이지에 무언가 일어나는 바로 그 순간을 나타낸다.

Ÿ 기본적인 이벤트 사용법

//�jQuery는�대부분의�기본적인�브라우저�이벤트�메서드를�제공한다.�

//�예를�들어�.click(),�.mouseover(),�.blur(),�.focus(),�.change()�등등…

$(�"button"�).click(function()�{

��console.log(�"버튼을�클릭하셨네요!"�);

});

//�jQuery�1.7�버전부터는�여러�이벤트들의�핸들러�메서드로�.on()을�제공한다.�

//�.on()�메서드는�하나�또는�여러�이벤트들을�다룰�수�있다.�

//�.on()�메서드는�서브�셀렉션을�가질�수�있다.�

$(�"button"�).on(�"click"�function()�{

��console.log(�"버튼을�Click�하셨네요!"�);

});

$(�"#visual"�).on(�"click",�"img",�function()�{�console.log(�"이미지를�Click�하셨네요!"�);�}�);

$(�"p"�).on(�{�//"click"과�"mouseover"�각각의�이벤트에�대한�반응을�설정한다.��

��"click":�function()�{�console.log(�$(this).text()�);�},�

��"mouseover":�function()�{�$(this).css(�{�"background-color":"red"�});�}

});

$(�"input"�).on(�"click�change",�function()�{�//한�번에�두�개의�이벤트를�캐치�}�);

¡ 마우스 이벤트(mouse events)

Ÿ $( "button" ).click( function() { … } );

- 마우스 클릭(mousedown + mouseup)

- $( "button" ).on( "click", function() { … } );와 같음


- ※ 아래의 모든 이벤트들도 $(selector).on( "event", function() { … } ); 형식

으로 사용 가능

Ÿ $( "button" ).dblclick( function() { … } );

- 더블 클릭

Ÿ $( "button" ).mousedown( function() { … } );

- 마우스를 눌렀을 때

Ÿ $( "button" ).mouseup( function() { … } );

- 눌렀던 마우스를 떼었을 때

Ÿ $( "button" ).mouseover( function() { … } );

- 마우스 포인터가 요소 위에 올라왔을 때

Ÿ $( "button" ).mouseenter( function() { … } );

- mouseover와 유사

Ÿ $( "button" ).mouseout( function() { … } );

- 마우스 포인터가 요소를 벗어날 때

Ÿ $( "button" ).mouseleave( function() { … } );

- mouseout과 유사

Ÿ $( "button" ).mousemove( function() { … } ); /

- 마우스가 움직일 때

$(document).mousemove(�function(event)�{

��console.log(�event.pageX�+�"/"�+�event.pageY�);�//마우스를�움직일�때�좌표�출력(예,�324/109)

}�);

$(document).on(�"mousemove",�function(event)�{

��console.log(�event.pageX�+�"/"�+�event.pageY�);�//마우스를�움직일�때�좌표�출력(예,�324/109)

});


¡ 키보드 이벤트(keyboard events)

Ÿ $( "button" ).keydown( function() { … } );

- 키보드 키 다운(key down, 눌렀을 때)

- = $( "button" ).on( "keydown", function() { … } );



Ÿ $( "button" ).keyup( function() { … } );

- 키보드의 키 업(눌렀다 떼었을 때)

Ÿ $( "button" ).keypress( function() { … } );

- keydown과 유사

<form><input�type="text"�id="mytext"></form>

<p>keydown�code�:�<span�id="keydowncode"></span></p>

<p>keypress�code�:�<span�id="keypresscode"></span></p>

<script>

��$(�"#mytext"�).on(�{�

��"keydown":�function(event)�{

��var�keycode�=�event.keyCode�?�event.keyCode�:�event.which;

��$(�"#keydowncode"�).html(�keycode�);

��},

��"keypress":�function(event)�{

��var�keycode�=�event.keyCode�?�event.keyCode�:�event.which;

��$(�"#keypresscode"�).html(�keycode�);

��}

��});

</script>


¡ keydown() vs keypress()

Ÿ 특수키 인식 여부

- keydown()은 모든 키 입력을 캐치할 수 있다.

- 반면, keypress() 는 특수키에 적용되지 않는다.(예, ALT, CTRL, SHIFT, ESC)

- 따라서 ALT, CTRL, SHIFT, ESC 등의 키가 눌렸는지 체크하려면 keydown()

메서드를 사용해야 한다.

Ÿ keycode 반환

- a 와 A를 각각 keydown()과 keypress로 입력 받아보면 다음과 같은 ascii

keycode를 반환한다.

- keydown() : a=65, A=65 | keypress() : a=97, A=65

- caps lock 키의 on/off에 따라 메서드는 각각 다른 keycode 값을 반환한

다.

- 대소문자까지 구분하여 키를 인식하고자 한다면 keypress를 사용할 필요가

있고, 대소문자는 무시하고 키 자체를 인식하고자 한다면 keydown을 사용

하면 된다.

¡ 폼(form) 관련 이벤트들

blur(), focus(), change(), select(), submit()

Ÿ $( "input#userid" ).blur( function() { … } );

- 요소가 포커스를 잃었을 때

- = $( "#input#userid" ).on( "blur", function() { … } );



Ÿ $( "input#userid" ).focus( function() { … } );

- 요소가 포커스를 가졌을 때

- ※ 요소를 마우스로 클릭하거나, tab 키로 이동하여 선택했을 때 포커스 이


벤트가 발생함

Ÿ $( "input#userid" ).focusin( function() { … } );

- 요소가 포커스를 가졌을 때

Ÿ $( "input#userid" ).focusout( function() { … } );

- 요소가 포커스를 잃었을 때

- ※ focus(), blur()과 다르게 focusin(), focusout()은 요소에 포함된 하위 요소

들이 포커스를 가지거나 잃었을 때도 발생하는 이벤트라는 점에서 다르다

Ÿ $( "input#userid" ).change( function() { … } );

- 요소의 내용이 변경되었을 때

- ※ change 이벤트는 input, textarea, select 요소에만 적용된다

Ÿ $( "input#userid" ).select( function() { … } );

- 텍스트를 선택했을 때

- ※ input(text field) 또는 textarea 요소에서 마우스 또는 Shift + key로 텍

스트를 선택했을 때 발생하는 이벤트

Ÿ $( "form" ).submit( function() { … } );

- 폼(form)이 submit 될 대

- ※ 오직 form 요소가 submit 될 때만 발생하는 이벤트

¡ ready() 이벤트 메서드

웹 페이지가 모두 loading 된 후에 발생

$(document).ready(function()�{�

��console.log(�"Document�is�ready!"�);�

});


- ※ 문서가 모두 로딩되었을 때 발생하는 이벤트로 모든 jQuery Event들과

기능들은 ready() 메서드 안에 두는 것이 좋음. 위 코드는 아래와 같이 줄

여서 사용 가능

- ※ loading은 소스코드 기준이며 image가 모두 다운로드 되지 않아도

ready() 상태로 인식됨.

$(�function()�{

��console.log(�"Document�is�Ready"�)

});

- 위 코드는 순수(pure) 자바스크립트에서 아래와 같이 할 수 있음

<body�onload="console.log(�'Document�is�ready!'�)">…</body>

- 또는 아래와 같이 함수를 호출하여 사용할 수도 있음.

<head>

��<script>function�myfunction()�{�console.log(�'Document�is�ready!'�);�}�</script>

</head>

<body�onload="myfunction()">…</body>

- 또는,

window.onload�=�myfunction();

¡ resize() 이벤트 메서드

브라우저 창의 크기가 변경될 때

Ÿ $(window).resize(function() { … });

= $(window).on( "resize", function() { … } );


Ÿ resize() 예제 – 브라우저 창 크기가 변경되면 사이즈를 표시하는 예

<p>window�width:�<span�id="w_width"></span>px</p>

<p>window�height:�<span�id="w_height"></span>px</p>

<script>


��$(window).resize(function�()�{

��$('#w_width').text(�$(window).width()�);

��$('#w_height').text(�$(window).height()�);

��});

��});

</script>

¡ scroll() 이벤트 메서드

모든 스크롤 가능한 요소에 발생하는 스크롤 이벤트

Ÿ $("div").scroll(function() { … });

= $("div").on( "scroll", function() { … } );

Ÿ scroll() 예제 – 스크롤 감지


Ÿ trigger() 예제

<button>click</button>

<p></p>

<script>


��$("button").on("click",�function()�{

��$("p").html("버튼을�클릭하셨네요!");

��});

��$("button").trigger("click");

��//위�코드는�$("button").click();�코드와�같음

��});

</script>

¡ event.preventDefault()

이벤트의 결과로 벌어질 기본 동작을 차단

Ÿ 때로는 요소에 발생한 이벤트를 캐치한 후 이벤트의 결과에 따라 나

타나는 기본동작을 차단시킬 필요가 있을 때 event.preventDefault()

를 사용한다.

Ÿ 예를 들어 <a href="1">jQuery Event 강좌 1</a>같이 게시판의 링

크를 처리할 때 실제로 1이 링크가 아니고 게시물 번호인 경우, 이

번호를 얻어 AJAX로 글 보기 등을 처리를 하고자 한다면 링크가 작


동하지 않도록 해야 한다.

Ÿ a 외에도 form의 submit 버튼과 같은 다른 요소에서도 사용 가능하

다.

Ÿ 이벤트는 반드시 함수에서 캐치해야 하며, function(event) 또는

function(e)와 같이 function의 인자로 캐치해와야 한다. 인자의 이름

은 주로 event 또는 e로 한다.

Ÿ event.preventDefault()는 순수(pure) JavaScript에서도 사용 가능하

다.

//�jQuery�예제

$(�"a"�).click(function(event)�{

��event.preventDefault();

��var�idx�=�$(this).attr("href");

��console.log(�idx�);

});

//�순수(pure)�JavaScript�예제

document.getElementById("myLink").addEventListener("click",�function(event)�{

��event.preventDefault();

});

¡ event.stopPropagation()

이벤트가 부모 요소로 확산됨을 방지

Ÿ 예를 들어 #slider 요소 안에 #next 버튼이 있고,

Ÿ #slider의 클릭에 대한 이벤트 핸들러(처리기)가 있고,

Ÿ #next를 클릭했을 때도 처리해야 할 핸들러가 있을 경우,

Ÿ #next를 클릭하면 해당 이벤트 핸들러가 작동을 하고 동시에


#slider에게도 click 이벤트가 발생하여 두 가지 핸들러가 모두 작동

하게 된다.

Ÿ 이와 같은 의도치 않은 동작을 방지하도록 해주는 메서드가

event.stopPropagation()이다.

Ÿ #next에 이 메서드를 사용하면 click 이벤트는 #next에만 발생하고

#slider에게는 발생하지 않는다.

Ÿ 사용 예

//�jQuery�예제

$(�"#prev"�).on("click",�function(event)�{

��event.stopPropagation();

��//�실행�코드�추가

});

//�순수(pure)�JavaScript�예제

document.getElementById("next").addEventListener("click",�function(event)�{


��//실행코드�추가

});

Ÿ event.stopPropagation() 예제

<style>�#slider�{width:�300px;�height:�200px;�background-color:�#ff0;�}�</style>

…

<div�id="slider"><button�id="next">Next</button></div>

//�이�코드는�#next를�클릭할�경우�#next�버튼이�클릭되었다는�

//�메시지를�출력하고,�동시에�#next가�포함된�#slider에도�click�

//�이벤트가�전달되어�#slider가�클릭되었다는�메시지가�출력됨

$("#slider").on("click",�function()�{

��console.log("#slider�clicked!");

});

$("#next").on("click",�function()�{

��console.log("#next�button�clicked!");

});


//�아래와�같이�event.stopPropagation()을�실행하면�

//�해당�요소에만�이벤트가�실행되고�상위로�전달되지�않음�

//�따라서�#next�버튼을�클릭했다는�메시지만�출력됨

$("#next").on("click",�function(event)�{


��console.log("#next�button�clicked!");

});

¡ .on() 메서드 – Event 캐치

Ÿ jQuery 1.7 버전 이후 이벤트 핸들러 메서드 .on()을 추가했다.

Ÿ .on() 메서드는 거의 모든 이벤트를 핸들링 할 뿐만 아니라 다른 여

러 추가 기능을 갖는다.

Ÿ 사용법 : $(selector).on( events [, selector ] [, data ], handler )

- events : click, mouseover 등의 이벤트

- [, selector ] : 생략가능 - $(selector) 의 children 요소들 중 특정 요소를

선택할 때 사용

( 페이지 로딩이 끝난 후에 JavaScript 또는 jQuery 코드로 추가된 요소도

선택가능)

- [, data] : 생략가능 - 객체 형태의 데이터를 전송할 수 있음(예,

{"name":"value" } )

- handler : function() { … } 형태의 이벤트 핸들러, function(event)로 이벤트

캐치 가능. ( function() { … } 대신에 선언된 함수 이름을 사용 가능(예,

$("div").on("click", myfunc );


//�.on()�메서드�기본�사용법

$(�"button"�).on("click",�function()�{

��console.log(�"버튼을�클릭하셨네요!"�);

});

$(�"#slider"�).on("click",�"button",�function()�{

��console.log(�"#slider에�포함된�버튼을�클릭하셨네요!"�);

});

¡ 페이지 로딩 후 추가된 콘텐트 요소에 접근하기

Ÿ 기본적으로 이벤트 처리 메서드들은 페이지가 로딩될 때 포함된 요

소들에만 적용된다. 즉, 페이지 로딩 후 JavaScript 또는 jQuery 코드

로 추가된 요소들은 인식하지 못한다. 이와 같은 이유로 일반적으로

.click() 등과 같은 메서드로는 나중에 추가된 요소에 접근할 수 없다.

Ÿ 나중에 추가된 요소에 접근하지 못하는 예

<div�id="textbox">

��<button>추가</button>

��<p>test</p>

</div>

<script>


��$("button").on("click",�function()�{�//�페이지�로딩�후�button�클릭으로�p�요소�추가

��$(this).parent().append("<p>test</p>");�

��});

��$("p").on("click",�function()�{�//�button�클릭으로�추가된�p에는�적용�안됨

��$(this).css(�{"background-color":"#ff0"�});

��});

��});

</script>

F 나중에 추가된 p 요소에는 click 이벤트가 적용되지 않음


Ÿ 나중에 추가된 요소에 접근하기

- 나중에 추가된 요소에 접근하는 방법 – 상위 요소 선택 후 하위 요소 접근

- $(selector).on(events, selectors, function() {… }) 와 같이 하면 나중에 추가

한 요소에 접근 가능

<div�id="textbox">

��<button>추가</button><p>test</p>

</div>

<script>


��$("button").on("click",�function()�{�//�페이지�로딩�후�button�클릭으로�p�요소�추가

��$(this).parent().append("<p>test</p>");

��});

��$("#textbox").on("click",�"p",�function()�{�//�상위�요소인�#textbox를�선택하고�하위�p를�선택

��$(this).css(�{"background-color":"#ff0"�});

��});

��});

</script>

F 나중에 추가된 p 요소에 click 이벤트가 적용됨


¡ 한 번에 여러 가지 이벤트 처리하기

Ÿ .on() 메서드로는 한 번에 여러 개의 이벤트에 대해 처리할 수 있다.

$(selector).on("event1�event2�…",�function()�{…�})

$(selector).on(�{�"event1":�function()�{�…�},��"event2":�function()�{�…�}�})

<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>jQuery�Events</title>

��<style>�.active�{�background-color:�red;�}�</style>��

</head>

<body>

<p>test</p>


<script>


��$("p").on("mouseenter�mouseleave",�function()�{�

��$(this).toggleClass("active");

��});

��});

</script>

</body>

</html>

- 위 빨간색 코드 부분과 같은 결과를 나타내는 또 다른 예제들

$("p").on(�{

��"mouseenter":�function()�{�$(this).addClass("active");�},

��"mouseleave":�function()�{�$(this).removeClass("active");�}

});

또는

$("p").hover(

��function()�{�$(this).addClass("active");�},

��function()�{�$(this).removeClass("active");�}

);


¡ .off() 메서드 이벤트 핸들러 제거하기

Ÿ .off(event) : 다른 코드에서 부여한 이벤트 핸들러가 무시됨

- 예) $("div").off("click"); F div 요소들에 click 이벤트가 작동하지 않도록 제거

<!DOCTYPE�html>

<html�lang="en">

<head>


<title>jQuery�Events</title>

<style>�

�#box�{�

��width:�300px;�

��height:�200px;�

��background-color:�yellow;�

�}�

</style>��

</head>

<body>

<button�class="rm-event">이벤트제거</button>

<div�id="box"></div>


<script>

�$(document).ready(function()�{

��$("#box").on("click",function(){

��console.log("#box�is�clicked.");

��});

��$(".rm-event").on("click",function(){

��$("#box").off("click");

��});

�});

</script>

</body>

</html>


¡ .one() 메서드 한 번 만 이벤트 실행하기

Ÿ $(selector).one(events [,selector] [,data], handler )

- 선택된 요소(들)에 대해 이벤트를 한 번 만 실행함(두 번째부터는 무시됨)

<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>jQuery�Events</title>

</head>

<body>

<button>한�번만�작동하는�이벤트</button>


<script>


��$("button").one(�"click",�function()�{

��console.log("#box�is�clicked.");

��});

��});

</script>

</body>

</html>


jQuery 효과(effects)

¡ show() / hide()

Ÿ $(selector).show();

- (감춰져 있던) 요소를 보이게 함

- 예) $("#dialog").show();

Ÿ $(selector).hide();

- (보이는) 요소를 감춤

- 예) $("#dialog").hide();

Ÿ $(selector).show([duration] [,easing] [,complete]);

- show()의 파라미터(선택)

Ÿ $(selector).hide([duration] [,easing] [,complete]);

- hide()의 파라미터(선택)F duration : 속도 - milliseconds, "slow", "fast", 값이 없으면 기본 값은 400(0.4초)

예) $("#dialog").show(2000); // 2초간 서서히 보여짐

예) $("#dialog").show("slow"); // 천천히 보여짐(600ms)

예) $("#dialog").show("fast"); // 빨리 보여짐(200ms)

예) $("#dialog").hide(2000); // 2초간 서서히 사라짐

예) $("#dialog").hide("slow"); // 천천히 사라짐(600ms)

예) $("#dialog").hide("fast"); // 빨리 사라짐(200ms)

F easing : 전환속도 설정 – "swing", "linear", 값이 없으면 기본 값은 "swing"

예) $("#dialog").show(2000,"swing"); // 시작/끝에서 느려지고 중간에서 빠르게…

예) $("#dialog").hide(2000,"linear"); // 시작~끝까지 같은 속도로…

F complete : show 또는 hide 동작이 끝난 후 동작 정의 함수

예) $("#dialog").hide("slow", function () {

console.log("#dialog is hidden");

});


¡ .toggle() : .show()와 hide()를 번갈아 실행

Ÿ $(selector).toggle(); // 상태가 visible이면 hide()를 hidden이면

show()를 실행

$(".menu-btn").click(function�()�{

��$("#sidemenu").toggle();

});

Ÿ $(selector).toggle([duration] [,easing] [,complete]);

- toggle()의 파라미터(선택)

- duration : 속도

F milliseconds, "slow", "fast", 값이 없으면 기본 값은 400(0.4초)

F 예) $("#dialog").toggle(2000); //2초간 서서히 보여지거나 감춰짐

F 예) $("#dialog").toggle("slow"); // 천천히 보여지거나 감춰짐(600ms)

F 예) $("#dialog").toggle("fast"); 빨리 보여지거나 감춰짐(200ms)

- easing : 전환속도 설정

F "swing", "linear", 값이 없으면 기본 값은 "swing“

F 예) $("#dialog").show(2000,"swing"); // 시작/끝에서 느려지고 중간에서 빠르게…

F 예) $("#dialog").hide(2000,"linear"); // 시작~끝까지 같은 속도로…

Ÿ complete : toggle() 동작이 끝난 후 동작 정의 함수

$("#dialog").toggle("slow",�function�()�{

��if(�$(this).is(":visible")�)

��console.log("#dialog�is�visible");

��else

��console.log("#dialog�is�hidden");

});


¡ jQuery Animation

Ÿ .animate( properties [, duration ] [, easing ] [, complete ] )

Ÿ $(selector).animate( { 속성 }, 시간);

- 지정한 시간 동안 지정한 속성으로 전환

- 예) $("img.sample").animate( { width: "150%", height: "150%" } , 2000 );

- 클래스 sample을 가진 img 요소의 크기를 2초간 가로 세로 각각 150% 확

대

- { 속성 }은 필수 이며, 시간은 없을 시 기본 값 400ms

- duration, easing, complete는 선택적 사용 가능

Ÿ animate()의 파라미터들

- properties: 변화의 최종 목표값들, 객체 타입

F ( {property1:"value1",property2:"value2"… } )

- duration: 시간

F milliseconds, "slow", "fast", 값이 없으면 기본 값은 400(0.4초)

- easing : 전환속도 설정

F "swing", "linear", 값이 없으면 기본 값은 "swing“

- complete : animate() 동작이 끝난 후 동작 정의 함수

Ÿ 모든 파라미터 사용 animate() 예제

$("ul#slider�>�li").animate(�{�left:�"600px",�top:"0"�},�2000,�"linear",�function()�{

��console.log(�"The�animation�is�completed."�);

}�);

Ÿ 파라미터 사용의 다른 예

$("ul#slider�>�li").animate({�left:�"600px",�top:"0"�},�{

��duration:�3000,

��easing:�"swing",

},�function()�{�console.log(�"Animation�finished."�);�}�);


Ÿ .animate() 응용 예제

<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>jQuery�animation</title>

�<script�src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

�<style>

��.box�{



��background-color:�#aaa;�

��position:�relative;�

��}

��.ball�{�

��width:�30px;�height:�30px;�

��border-radius:�50%;�

��background-color:�#f00;�

��position:�absolute;�

��left:�0;�top:�0;

��}

�</style>

</head>

<body>

�<p>애니메이션�진행율:�<span�id="p_rate"></span></p>

�<div�class="box"><div�class="ball"></div></div>

<script>


��$(".ball").one(�"click",�function�()�{

��$(this).animate(�

��{�left:�470�},

��{�


��easing:�"linear",�

��start:�function�()�{

��$(this).css(�{�"background-color":�"#0f0"�}�);

��},

��progress:�function�(�animation,�progress�)�{

��$("#p_rate").text(�Math.round(�(�progress�*�100�)�)�+�"%"�);

��},

��complete:�function�()�{

��$(this).css(�{�"background-color":�"#f00"�}�);

��}

��}

��);

��});

�});


</script>

</body>

</html>

¡ .stop() 애니메이션 중단

<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>.Stop()</title>

�<style>

��.box�{



��background-color:�#aaa;�

��position:�relative;

��}

��.ball�{�



��border-radius:�50%;�

��background-color:�#f00;�

��position:�absolute;�

��left:�0;�top:�0;

��}

�</style>�

</head>

<body>

�<p>애니메이션�진행율�:�<span�id="p_rate"></span></p>

�<div�class="box"><div�class="ball"></div></div>

�<script�type="text/javascript"�src="http://code.jquery.com/jquery-3.2.1.min.js"></script>


��$(".ball").one(�"click",�function�(event)�{



��$(this).animate(�

��{�left:�470�},

��{�


��easing:�"linear",

��start:�function�()�{

��$(this).css(�{�"background-color":�"#0f0"�}�);

��},

��progress:�function�(�animation,�progress�)�{

��$("#p_rate").text(�Math.round(�(�progress�*�100�)�)�+�"%"�);

��},

��complete:�function�()�{

��$(this).css(�{�"background-color":�"#f00"�}�);

��}

��}

��);

��});

��$(".box").on(�"click",�function�()�{�$(".ball").stop();��}�);

�</script>

</body>

</html>


¡ callback in effects – complete- jQuery effects 들은 해당 효과가 끝나면 실행할 callback함수를 지원함

- callback 함수는 effects에서는 complete 라는 이름의 파라미터로 불린다.

- complete는 효과가 시작되어서 진행되는 도중에는 호출되지 않고 오직 효

과가 성공적으로 종료된 뒤에만 실행된다.

- 만일 하나의 효과를 끝내고 나서 다음의 동작을 실행토록 하고자 한다면

콜백, 즉 complete 함수파라미터를 활용해야 한다.

- effects의 callback은 stop()을 제외하고 모두 지원한다.

- effects callback 사용하지 않은 예

<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>callback</title>�

</head>

<body>

�<p>나를�누르면�사라져요!</p>

�<script type="text/javascript" src="http://code.jquery.com/jquery-3.2.1.min.js"></script>�<script�type="text/javascript">


��$("p").on(�"click",�function�()�{

��$(this).hide(�"slow"�);

��alert(�"문장이�사라졌어요."�);

��}�);

��});

</script>

</body>

</html>

F 위 코드는 문자를 누르면 hide()

메서드와 alert()가 거의 동시에 실

행되는데 이 때 alert()가 웹 페이

지를 제어하여 일시 정지 되어 있

으므로 [확인]버튼을 누른 후에 텍

스트가 사라진다.


- effects callback 사용한 예

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<p>나를�누르면�사라져요!</p>


�<script>


��$("p").on(�"click",�function�()�{

��$(this).hide(�"slow",�function�()�{

��alert(�"문장이�사라졌어요."�);

��}�);

��}�);

��});

</script>

</body>

</html>

F 위 코드는 문자를 누르면 hide() 메서드가 실행되고, hide() 메서드 안에 callback 함

수가 있어 hide() 동작이 완료된 후에 실행될 코드를 포함시켰다.

F 따라서 hide()메서드의 동작이 끝나고 즉, 텍스트가 사라지고나서 alert() 함수가 실행

되어 경고창이 표시된다.

F 위 코드에서 hide("slow", function(){ //... } ); 내부의 function(){ //... } 함수가 콜백함

수이다.

- callback의 또 다른 예제

<!DOCTYPE�html>

<html�lang="en">

<head>




</head>

<body>

�<p>jQuery�Callback�function</p>


�<script>

��$("p").animate({"font-size":"30px"},�2000,�function(){

��$("p").append("<br>폰트가�2초가�50px로�커졌어요");

��});

</script>

</body>

</html>


¡ chaining : 여러 개의 효과 또는 method를 연결- 하나의 요소에 대해 효과 또는 method를 연결해서(이어서) 사용할 수 있다.

- 이 때 각각의 효과 또는 메서드는 순차적으로 실행되어 하나 끝나고 뒤에

있는 하나가 실행되는 방식으로 진행된다.

- 단, 속성을 변경하기 위한 같은 메서드(예, .css(), .html(), .text()…)는 앞의

효과나 메서드가 실행되기를 기다리지 않고 마지막의 것이 바로 적용된다.

<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>chaining</title>�

</head>

<body>

<button>Click�Me</button>

<div>jQuery�Chaining</div>

<script�type="text/javascript"�src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>


��$("button").on(�"click",�function�()�{

��$("div")

��.css({"background-color":"blue","width":"100px","height":"100px"})

��.slideUp(1000)

��.slideDown(1000)

��.animate({"margin-left":"50px"},1000)

��.animate({"margin-top":"50px"},1000)

��.css({"color":"white"});

��});

��});

</script>

</body>

</html>


jQuery content 추가

¡ append(), prepend(), before(), after()- append( content )F 선택된 요소 안에 원래 있던 콘텐트 뒤에 새 콘텐트 추가

- prepend( content )F 선택된 요소 안에 원래 있던 콘텐트 앞에 새 콘텐트 추가

- before( content )F 선택된 요소의 바깥 쪽 앞 쪽에 새 콘텐트 추가

- after( content )F 선택된 요소의 바깥 쪽 뒤 쪽에 새 콘텐트 추가

<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>chaining</title>�

</head>

<body>


<script>


��$("body").append("<div�id='mydiv'></div>");

��var�id�=�0;

��$("#mydiv").html(�"<p>"�+�(id++)�+�".�Original�Content</p>"�);

��$("#mydiv").append(�"<p>"�+�(id++)�+�".�New�Content</p>"�);

��$("#mydiv").prepend(�"<p>"�+�(id++)�+�".�New�Content</p>"�);

��$("#mydiv").before(�"<h1>Content�추가/삭제</h1>"�);

��$("#mydiv").after(�"<hr>"�);

��});

</script>

</body>

</html>


- before()와 after()는 insertBefore()와 insertAfter()로도 처리 가능하다. 단, 아

래와 같이 선택자와 콘텐트의 위치가 다름F $("<h1>Content 추가/삭제</h1>").insertBefore( "#mydiv" );

F $("<hr>").insertAfter( "#mydiv" );


¡ [응용] 표에서 마지막 tr 뒤에 새로운 tr 추가

<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>jQuery�Content</title>

</head>

<body>

<table�id="telbook"�border="1">

��<tbody>

��<tr><th>번호</th><th>이름</th><th>전화번호</th></tr>

��</tbody>

</table>


<script>


��var�newTr�=�"<tr><td>1</td><td>홍길동</td><td>010-1234-5678</td></tr>";

��$("#telbook�tr:last").after(�newTr�);

��});

</script>

</body>

</html>

- $("#telbook tr:last").after(newTr);F ID가 telbook인 테이블의 tr 중에 마지작 tr을 선택하고 그 마지막 tr 다음에 새로운

내용, 여기서는 변수 newTr의 내용을 추가하는 코드.

F 이 코드는 아래와 같이 고쳐 쓸 수도 있다.

$(�newTr�).insertAfter("#telbook�tr:last");


¡ remove() : 선택된 요소 제거

<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>jQuery�Effects</title>

</head>

<body>

<h1>연락처</h1>

<p>친구들의�연락처</p>

<table�id="telbook"�border="1">

��<tbody>

��<tr><th>번호</th><th>이름</th><th>전화번호</th></tr>

��<tr><td>1</td><td>홍길동</td><td>010-1234-5678</td></tr>

��</tbody>

</table>


<script>


��$("#telbook�tr:last").remove();

��$("p").remove();

��});

</script>

</body>

</html>


jQuery CSS 다루기

¡ css()

Ÿ css( "속성", "값" )

- 선택된 요소의 css 속성을 지정해준 값으로 변경 또는 추가

Ÿ css( { "속성1":"값1", "속성2":"값2", … } )

- 여러 css 속성을 변경 또는 추가

<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>jQuery�CSS</title>

</head>

<body>

<div�id="mydiv">jQuery<br>CSS</div>


<script>


��$("div").css("background-color","red");

��$("div").css("text-align","center");

��$("div").css(�{"width":"150px",�"height":"50px",�"color":"white"�});

��});

</script>

</body>

</html>


¡ addClass(), removeClass(), toggleClass()

Ÿ addClass( "클래스" ) - 선택된 요소에 클래스를 추가

Ÿ removeClass( "클래스" ) - 선택된 요소에서 클래스를 제거

Ÿ toggleClass( "클래스" ) - 선택된 요소에 클래스 추가 제거 토글

<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>jQuery�CSS</title>

�<style>

��#mydiv�{�width:�150px;�heigth:�50px;�}

��.active�{�background-color:�red;�color:�white;�}

�</style>

</head>

<body>

<div�id="mydiv">jQuery�CSS</div><script�type="text/javascript"�src="http://code.jquery.com/jquery-3.2.1.min.js"></script>

<script>


��$("#mydiv").on("mouseover�mouseleave",�function(){

��$(this).toggleClass("active");

��});

�});

</script>

</body>

</html>


¡ hasClass() : 특정 클래스를 갖는지 검사

Ÿ $("#mydiv").hasClass( "active" ); - 클래스 active를 갖는지 검사

Ÿ 클래스를 가지고 있으면 true를 가지고 있지 않으면 false를 반환

<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>jQuery�CSS</title>

�<style>

��.active1�{�background-color:�red;�}

��.active2�{�color:�white;�}

�</style>

</head>

<body>

<div�id="mydiv"�class="active1">jQuery�CSS</div>


<script>


��if(�$("#mydiv").hasClass("active1")�)�{

��$("#mydiv").addClass("active2");

��}�else�{

��$("#mydiv").addClass("active1�active2");

��}

��});

</script>

</body>

</html>


jQuery 치수 다루기

¡ width/height

Ÿ width() : 요소의 콘텐트 영역 넓이(padding 안쪽)

Ÿ innerWidth() : 요소의 넓이(padding 포함, border 안쪽)

Ÿ height() : 요소의 콘텐트 영역 높이(padding 안쪽)

Ÿ innerHeight() : 요소의 높이(padding 포함, border 안쪽)

Ÿ outerWidth() : 요소의 border 포함 넓이(margin 안쪽)

Ÿ outerHeight() : 요소의 border 포함 높이(margin 안쪽)

Ÿ outerWidth( true ) : 요소의 margin 포함 넓이


Ÿ outerHeight( true ) : 요소의 margin 포함 높이<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>jQuery�치수</title>

�<style>

��body�{�

��margin:0;�

��background-color:�yellow;

��}

��#mydiv1�{�



��margin:�20px;

��padding:�20px;

��border:�10px�solid�red;

��background-color:�white;

��}

��#mydiv2�{



��background-color:�brown;

��}

�</style>

</head>

<body>

<div�id="mydiv1"><div�id="mydiv2"></div></div>


<script>


��console.log(�'$("#mydiv1").width()�=�'�+�$("#mydiv1").width()�);�//100

��console.log(�'$("#mydiv1").height()�=�'�+�$("#mydiv1").height()�);�//100

��console.log(�'$("#mydiv2").width()�=�'�+�$("#mydiv2").width()�);�//100

��console.log(�'$("#mydiv2").height()�=�'�+�$("#mydiv2").height()�);�//100

��console.log(�'$("#mydiv1").innerWidth()�=�'�+�$("#mydiv1").innerWidth()�);�//140

��console.log(�'$("#mydiv1").innerHeight()�=�'�+�$("#mydiv1").innerHeight()�);�//140

��console.log(�'$("#mydiv2").innerWidth()�=�'�+�$("#mydiv2").innerWidth()�);�//100

��console.log(�'$("#mydiv2").innerHeight()�=�'�+�$("#mydiv2").innerHeight()�);�//100

��console.log(�'$("#mydiv1").outerWidth()�=�'�+�$("#mydiv1").outerWidth()�);�//160

��console.log(�'$("#mydiv1").outerHeight()�=�'�+�$("#mydiv1").outerHeight()�);�//160

��console.log(�'$("#mydiv2").outerWidth()�=�'�+�$("#mydiv2").outerWidth()�);�//100

��console.log(�'$("#mydiv2").outerHeight()�=�'�+�$("#mydiv2").outerHeight()�);�//100

��console.log(�'$("#mydiv1").outerWidth(�true�)�=�'�+�$("#mydiv1").outerWidth(�true�)�);�//200

��console.log(�'$("#mydiv1").outerHeight(�true�)�=�'�+�$("#mydiv1").outerHeight(�true�)�);�//200

��console.log(�'$("#mydiv2").outerWidth(�true�)�=�'�+�$("#mydiv2").outerWidth(�true�)�);�//100

��console.log(�'$("#mydiv2").outerHeight(�true�)�=�'�+�$("#mydiv2").outerHeight(�true�)�);�//100

�});

</script>


</body>

</html>

¡ window / document

Ÿ $(window).width(), $(window).height() : 브라우저 창의 넓이와 높이

Ÿ $(document).width(), $(document).height() : 문서의 넓이와 높이


<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>jQuery�width/height</title>

</head>

<body>

<div�class="info"></div>


<script>


��$(".info").append(�"<p>Window's�Width�is�"�+�$(window).width()�+�"</p>"�);�

��$(".info").append(�"<p>Window's�Height�is�"�+�$(window).height()�+�"</p>"�);�

��$(".info").append(�"<p>Document's�Width�is�"�+�$(document).width()�+�"</p>"�);�

��$(".info").append(�"<p>Document's�Height�is�"�+�$(document).height()�+�"</p>"�);�

��});

</script>

</body>

</html>

※ document의 크기가 window의 크기보다 크지 않으면 두 width와 height는 같음

Ÿ document의 사이즈와 window의 사이즈가 다른 경우 예제

- document의 크기가 window보다 큰 경우에 window의 width와 height는

scroll bar의 사이즈를 제외하고 계산됨


<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>jQuery�width/height</title>


��.info�{



��}

�</style>

</head>

<body>

�<div�class="info"></div>


�<script>


��$(".info").append(�"<p>Window's�Width�is�"�+�$(window).width()�+�"</p>"�);�

��$(".info").append(�"<p>Window's�Height�is�"�+�$(window).height()�+�"</p>"�);�

��$(".info").append(�"<p>Document's�Width�is�"�+�$(document).width()�+�"</p>"�);�

��$(".info").append(�"<p>Document's�Height�is�"�+�$(document).height()�+�"</p>"�);�

��});

�</script>

</body>

</html>


¡ scrollTop / scrollLeft

Ÿ scrollTop()

- 선택된 요소의 세로 스크롤 바 위치를 얻어오거나 설정함

F 스크롤 바의 세로 위치가 문서의 최 상단에 있으면 scrollTop()의 return 값은 0

Ÿ scrollLeft()

- 선택된 요소의 가로 스크롤 바 위치를 얻어오거나 설정함F 스크롤 바의 가로 위치가 문서의 좌측 끝에 있으면 scrollLeft()의 return 값은 0

<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>jQuery�scroll</title>


��.info�{



��background-color:�#ccc;

��padding:�100px�0�0�100px;

��}

�</style>

</head>

<body>



�<script>


��$(".info").append(�"<p>Window's�scrollTop�is�"�+�$(window).scrollTop()�+�"</p>"�);�

��$(".info").append(�"<p>Window's�scrollLeft�is�"�+�$(window).scrollLeft()�+�"</p>"�);�

��});

�</script>

</body>

</html>


Ÿ window scroll() Event와 scroll 값 검사 예제

<!DOCTYPE�html>

<html�lang="en">

<head>




��body�{

��margin:�0;

��}

��.info�{



��}

�</style>

</head>

<body>



�<script>


��$(window).scroll(function(event){

��console.log(�$(window).scrollTop()�+�"/"�+�$(window).scrollLeft()�);�

��});

��});

�</script>

</body>

</html>


Ÿ div에 대한 scroll() Event와 scroll 값 검사 예제

<!DOCTYPE�html>

<html�lang="en">

<head>




��body�{

��margin:�0;

��}

��.info�{�



��overflow-y:�scroll;��

��}

�</style>

</head>

<body>

�<div�class="info">

��Lorem� ipsum� dolor� sit� amet,� consectetur� adipisicing� elit.� Soluta� voluptatibus� � doloremque,�

reiciendis,� velit,� quasi� officiis� odio� natus� odit� non� consectetur� quam,� enim� nihil� sapiente�


aspernatur.�Earum,�culpa�deserunt�quae�facilis.

�</div>


�<script>


��$("div").scrollTop(80);

��});

�</script>

</body>

</html>

¡ window scrollTop, scrollLeft setting(값 지정)

<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>jQuery�Scroll</title>

��<style>

��.info�{�width:�600px;�height:�600px;�background-color:�aqua;�}

��</style>

</head>

<body>



<script>


��$(window).scrollLeft(150).scrollTop(150);

��});

</script>

</body>

</html>


¡ window scroll이 문서의 끝에 도달했는지 검사하기

<!DOCTYPE�html>

<html�lang="en">

<head>



��<style>

��.info�{�width:�600px;�height:�600px;�}

��</style>

</head>

<body>



<script>


��$(window).scroll(function(event){

��var�wHeight�=�$(window).height();

��var�dHeight�=�$(document).height();

��var�sTop�=�$(window).scrollTop();

��console.log(�"Window's�Height�=�"�+�wHeight�);

��console.log(�"Document's�Height�=�"�+�dHeight�);�

��console.log(�"scrollTop�=�"�+�sTop�);�

��console.log(�"Window's�Height�+�scrollTop�=�"�+�(wHeight�+�sTop)�);�

��if(�(wHeight�+�sTop)�>=�dHeight��)�{

��alert(�"스크롤이�문서의�끝에�도달했습니다."�);

��}

��});

�});

</script>

</body>

</html>


- (window의 height + scrollTop) >= document의 height 이면 스크롤이 문

서의 끝에 도달한 것임(div와 같은 요소에도 적용 가능)

- 스크롤이 문서의 끝보다 이전에서 감지하고자 하면

(window의 height + scrollTop) = (document의 height – 50)

과 같이 하면 됨

Ÿ jQuery를 사용하지 않고 스크롤이 페이지 끝에 도달했는지 확인

<script>

�window.onscroll�=�function�()�{

��var�wHeight�=�window.innerHeight;

��wHeight�=�wHeight�==�undefined�?�document.documentElement.clientHeight�:�wHeight;

��var�dHeight��=�document.body.offsetHeight;

��dHeight��=�dHeight��==�undefined�?�window.document.documentElement.scrollHeight�:�dHeight�;

��var�sTop�=�window.scrollY;

��sTop�=�sTop�==�undefined�?�window.document.documentElement.scrollTop�:�sTop;

��console.log(�"Window's�Height�=�"�+�wHeight�);

��console.log(�"Document's�Height�=�"�+�dHeight�);�

��console.log(�"scrollTop�=�"�+�sTop�);�

��console.log(�"Window's�Height�+�scrollTop�=�"�+�(wHeight�+�sTop)�);�

��if�(�(wHeight�+�sTop)�>=�dHeight�)�{

��alert(�"스크롤이�문서의�끝에�도달했습니다."�);

��}

�};

</script>


¡ offset() : 요소가 실제 놓여 있는 좌표(top, left)

Ÿ offset() 값 얻어오기

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

<p�id="info">My�Offset�Position�:�</p>


<script>


��var�os�=�$("#info").offset();

��$("#info").append(�"top="�+�os.top�+�",�left="�+�os.left�);

�});

</script>

</body>

</html>

위 예제에서 <p id="info">My Offset Position : </p> 위에 <h1>offset()</h1>을

추가하고 나서 다시 열어보면 다음과 같이 offset 위치값이 다르게 표시된다.


Ÿ offset() 값 설정하기

<!DOCTYPE�html>

<html�lang="en">

<head>


��<title>jQuery�offset</title>

��<style�type="text/css">

��body�{

��margin:�0;

��}

��#info�{

��background-color:�red;

��}

��</style>

</head>

<body>

<p�id="info">My�Offset�Position�:�</p>


<script>


��$("#info").offset({top:�50,�left:�50});�//offset�값�설정

��var�os�=�$("#info").offset();�//새로�설정한�offset�값�얻어오기

��$("#info").append(�"top="�+�os.top�+�",�left="�+�os.left�);

�});

</script>

</body>

</html>


jQuery 포지션(position)

¡ position()

Ÿ 부모 요소와 관련된 요소의 좌표(top, left)를 반환

- offset() 과 유사하지만 부모 요소의 position 속성에 따라 달라질 수 있음

- 단, 부모 요소에 position 속성의 설정되어 있을 경우에만 상대적 좌표를

반환<!DOCTYPE�html>

<html�lang="en">

<head>


�<title>jQuery�position</title>


��body�{

��margin:�0;

��}

��#outbox�{�

��width:100px;

��height:100px;

��border:�1px�solid�black;

��position:relative;

��margin:20px;�

��}

�</style>

</head>

<body>

�<div�id="outbox">

��<div�id="inbox">inbox</div>

�</div>

�<p>inbox�top=<span�id="inboxTop"></span>,�left=<span�id="inboxLeft"></span></p>


�<script>


��var�pos�=�$("#inbox").position();

��$("#inboxTop").text(pos.top);

��$("#inboxLeft").text(pos.left);

��});

�</script>

</body>


</html>

- 위 코드에서 style의 #outbox 설정에서 position을 주석처리 또는 삭제하고

실행하면 position()은 부모 요소인 #outbox로부터의 상대적 위치를 가져

오는 것이 아니라 페이지에서의 위치인 offset 값을 가져오게 된다.

��#outbox�{�

��width:100px;

��height:100px;

��border:�1px�solid�black;

��/*position:relative;*/

��margin:20px;�

��}


¡ event.pageX, event.pageY

Ÿ 마우스 이벤트 발생시 x, y 좌표 리턴

Ÿ pageX, pageY는 mouse 관련 이벤트에서 리턴되는 값이며, 마우스

포지션은 JavaScript 또는 jQuery에서 설정 또는 변경할 수 없음

<!DOCTYPE�html>

<html�lang="en">

<head>



</head>

<body>

�<p>Mouse�X=<span�id="mouseX"></span>,�Y=<span�id="mouseY"></span></p>


�<script>


��$(document).mousemove(function(event){

��$("#mouseX").text(event.pageX);

��$("#mouseY").text(event.pageY);

��});

�});

�</script>

</body>

</html>


[응용예제] 마우스를 따라다니는 볼 만들기

<!DOCTYPE�html>

<html�lang="en">

<head>




��#ball�{



��border-radius:�50%;

��background-color:�#f00;


��top:�0;

��left:�0;

��}

�</style>

</head>

<body>

�<div�id="ball"></div>


�<script>


��$(document).mousemove(function(event){

��var�x�=�event.pageX�-�(�$("#ball").width()/2�);

��var�y�=�event.pageY�-�(�$("#ball").width()/2�);

��$("#ball").css({left:x+"px",�top:y+"px"});

��});

�});

�</script>

</body>

</html>


[참고사이트]- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript

- http://www.ecmascript.org/

- http://kangax.github.io/compat-table/es5/

- http://www.w3schools.com/js/

- https://www.w3.org/community/webed/wiki/What_can_you_do_with_JavaScript

- http://stackoverflow.com/questions/436411/where-is-the-best-place-to-put-script-tags-in-html-markup

- http://code.jquery.com/

- https://ajax.googleapis.com/ajax/libs/

- http://lorempixel.com

- https://msdn.microsoft.com/en-us/library/dn384057(v=vs.85).aspx

- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Operator_Precedence

- http://www.w3schools.com/jsref/dom_obj_event.asp

- https://unicode-table.com/en/#control-character

- http://detectmobilebrowsers.com/

- https://ko.wikipedia.org/wiki/미국정보교환표준부호

- https://www.w3schools.com/graphics/canvas_clock.asp

- https://www.w3schools.com/graphics/tryit.asp?filename=trycanvas_clock_start

- https://ko.wikipedia.org/wiki/Ajax

- https://developer.mozilla.org/ko/docs/Web/HTTP/Status

- http://ejohn.org/blog/selectors-in-javascript/

- http://www.w3schools.com/js/js_htmldom.asp

- http://code.jquery.com

- https://cdnjs.com/libraries/jquery/

- https://developers.google.com/speed/libraries/#jquery

- https://docs.microsoft.com/en-us/aspnet/ajax/cdn/overview#jQuery_Releases_on_the_CDN_0

- http://www.w3schools.com/cssref/css_selectors.asp

- https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors

- https://www.w3.org/TR/css3-selectors/

modern web designwebskills.kr/2018/data/javascript_jquery.pdf · javascrtipt란? 11 ¡...

Documents