๋ชฉ๋ก2022/01 (83)
whatisthis?
ํด์ ๊ฒ์ - ํ ์คํธ ๊ธฐ๋ฐ RGP - ์งํ์ฌํญ javaScript. ํด์ ๊ฒ์ - ํ ์คํธ ๊ธฐ๋ฐ RPG (ไธญ) ํด์ ๊ฒ์ - ํ ์คํธ ๊ธฐ๋ฐ RGP - ์ง๋๋ฒ ์งํ์ฌํญ javaScript. ํด์ ๊ฒ์ - ํ ์คํธ ๊ธฐ๋ฐ RPG (ไธ) ํด์ ๊ฒ์ - ํ ์คํธ ๊ธฐ๋ฐ RGP skill html / css javascript ํ ์คํธ RPG style.css * { margin: 0; box-s.. mywebproject.tistory.com index.html ์์ 1.๋ชจํ 2.ํด์ 3.์ข ๋ฃ ์ ๋ ฅ 1.๊ณต๊ฒฉ 2.ํ๋ณต 3.๋๋ง ์ ๋ ฅ - ์คํ์ผ ์ ์ฉ (flex)์ ์ํ container div๋ฅผ ์ถ๊ฐํ๋ค. - input ํ๊ทธ์ required์์ฑ / placeholder / maxlength๋ฅผ ์ถ๊ฐํ์๋ค. style.css *..
ํด์ ๊ฒ์ - ํ ์คํธ ๊ธฐ๋ฐ RGP - ์ง๋๋ฒ ์งํ์ฌํญ javaScript. ํด์ ๊ฒ์ - ํ ์คํธ ๊ธฐ๋ฐ RPG (ไธ) ํด์ ๊ฒ์ - ํ ์คํธ ๊ธฐ๋ฐ RGP skill html / css javascript ํ ์คํธ RPG style.css * { margin: 0; box-sizing : border-box; } html { font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-ser.. mywebproject.tistory.com index.html ์์ 1.๋ชจํ 2.ํด์ 3.์ข ๋ฃ ์ ๋ ฅ 1.๊ณต๊ฒฉ 2.ํ๋ณต 3.๋๋ง ์ ๋ ฅ turn.js let TurnGame = (function() { let instance; let initiate = function..
ํด์ ๊ฒ์ - ํ ์คํธ ๊ธฐ๋ฐ RGP skill html / css javascript javaScript. ์๋ ํ ์คํธ RPG ๊ฒ์ ์๋ ํ ์คํธ RPG ๊ฒ์ index.html ํ ์คํธ RPG style.css * { margin: 0; box-sizing : border-box; } html { font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-s.. mywebproject.tistory.com ์ง๋ ์ค์ต์ผ๋ก ํด๋ดค๋ ์๋ ํ ์คํธ RPG ๊ฒ์์ ํ ๋๋ก ์ ์ํ์. - ์๋ํ ์คํธ RPG๊ฒ์์ ๊ฒ์๊ณผ ์ฌ์ฉ์์ interaction์ด '์ด๋ฆ ์ ๋ ฅ' ํ๋๋ฐ์ ์์๋ค๋ฉด, ์ด๋ฒ์ ์ ์ํ ๊ฒ์์ 'ํด(turn)'์ ๊ฐ๋ ..
ํจ์ํ ํ๋ก๊ทธ๋๋ฐ - ๊ฐ์ฒด์งํฅ ํ๋ก๊ทธ๋๋ฐ(OOP)๊ณผ๋ ๋ค๋ฅด๋ค. - ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ 'ํจ์๋ฅผ ๊ธฐ๋ฐ'์ผ๋ก ๋์๊ฐ๋ค. - ์๋ฐ์คํฌ๋ฆฝํธ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ๊ฐ์ฒด์งํฅ์ด๋ฏ๋ก, ์๋ฒฝํ๊ฒ ํจ์ํ ํ๋ก๊ทธ๋๋ฐ์ ํ ์๋ ์๋ค. ์ ์ถ๋ ฅ์ด ์์ํ ํจ์์ฌ์ผ ํ๋ค. ๋ถ์์ฉ(๋ถ์ฐ๋ฌผ)์ด ์์ด์ผ ํ๋ค. ํจ์์ ๋ฐ์ดํฐ๋ฅผ ์ค์ ์ผ๋ก ์๊ฐํ๋ค. (๊ฐ์ฒด๋์ ๋ค๋ฆ) ๐ก ์ ์ถ๋ ฅ์ด ์์ํ๋ค? (= ์์ํจ์) >> ํ๋ ์ด์์ ์ธ์๋ฅผ ๋ฐ๊ณ , ๋ฐ์ ์ธ์๋ฅผ ์ฒ๋ฆฌํ์ฌ ๊ฒฐ๊ณผ ๋ฆฌํดํด์ผํจ. - ์ธ์ ์ ์ธํ ๋ค๋ฅธ ๋ณ์๋ ์ฌ์ฉํด์ X. - ๋ฐ์ ์ธ์๋ง์ผ๋ก ๊ฒฐ๊ณผ ๋์ถํด์ผํจ. โ ์๋ฐ์คํฌ๋ฆฝํธ์์๋ this๋ผ๋ ๊ฐ๋ ๋๋ฌธ์ ์์ํจ์๋ฅผ ์ฌ์ฉํ๊ธฐ ํ๋ค๋ค. ๐ก ๋ถ์์ฉ์ด ์๋ค? - ํ๋ก๊ทธ๋๋จธ๊ฐ ๋ฐ๊พธ๋ ค๋ ๋ณ์ ์ธ์๋ ๋ฐ๋์ด์๋ X. - ์๋ณธ Data๋ ๋ถ๋ณ. >> ํจ์ํ ํ๋ก๊ทธ๋๋ฐ..
์๋ฐ์คํฌ๋ฆฝํธ ๋์์ธ ํจํด - ์๋ฐ์คํฌ๋ฆฝํธ ์ฑ์ ๋ง๋ค ๋ ์์ฃผ ์ฌ์ฉ๋๋ ํจํด 1) ๋ชจ๋ ํจํด (=IIFE) - ๋น๊ณต๊ฐ ๋ณ์๋ฅผ ๋ง๋๋ ๊ฒ. (์๋ js์๋ ์๋ ๊ธฐ๋ฅ์) javaScript. IIFE(์ฆ์ ํธ์ถ ํจ์ ํํ์) IIFE ์ฆ์ ์คํ ํจ์ ํํ(IIFE, Immediately Invoked Function Expression)์ ์ ์ธํ์๋ง์ ์ฆ์ ์คํ๋๋ Javascript Function ๋ฅผ ๋งํ๋ค. ๋ค๋ฅธ ๋ง๋ก ๋ชจ๋ ํจํด(Module Pattern)์ด๋ผ๊ณ ๋ ํจ. SYNTAX (function (.. mywebproject.tistory.com ์ฆ์ ์คํ ํจ์ ํํ(IIFE, Immediately Invoked Function Expression)์ ์ ์ธํ์๋ง์ ์ฆ์ ์คํ(=ํธ์ถ)๋๋ Javasc..
์๋ฐ์คํฌ๋ฆฝํธ์์๋ ์ผ๋ฐ String / Number / Boolean ๊ฐ์ ๋ค์๊ณผ ๊ฐ์ด ๋ณต์ฌ(copy)ํ ์ ์๋ค. const string = 'hello'; const copy = string; copy; // 'hello' function sayHello() { console.log('hello'); } const copyFunc = sayHello; ์๋ฐ์คํฌ๋ฆฝํธ์์๋ null๊ณผ undefined ๋ฅผ ์ ์ธํ ๋ชจ๋ ํ์ ์ด ๊ฐ์ฒด์ด๋ฏ๋ก '๊ฐ์ฒด' = ํจ์, ๋ฐฐ์ด, ์ผ๋ฐ ๊ฐ์ฒด๋ ๋ณต์ฌํ ์ ์๋ค. โ ๋จ, ๋ณต์ฌ๋ ๊ฐ์ ์กฐ์ํ ๋ ์ฐจ์ด๊ฐ ์๋ค. let string = 'hello'; let copy = string; copy = 'bye'; // ๋ณต์ฌ๋ณธ์ ๊ฐ์ ๋ฐ๊ฟ์ค string; // 'hello' ใ ก ์๋ณธ์ ..
์ง๋ ๊ฐ์์์๋ ์ซ์ / ๋ฐฐ์ด / ๋ฌธ์์ด์ ๋ํ ๋ฉ์๋๋ฅผ ๋ฐฐ์ ์๋ค. (์> Number.toFixed() / Array.join() / String.split() ๋ฑ) javaScript. (9) ๋ฐฐ์ด(Array) ๋ฐฐ์ด์ ๊ดํ Method 1) ๋ฐฐ์ด.length let array= [1, 2, 3, 4]; array.length; // 4 ๋ฐฐ์ด์ ๊ธธ์ด๋ฅผ ์๋ ค์ค๋ค. ๋ฐฐ์ด์ ์์๊ฐ ์ถ๊ฐ/์ ๊ฑฐ ๋ ๋ ๋ง๋ค ์๋์ผ๋ก ๋ฐ๋๋ค. let array = [1, 2, 3, 4, 5]; array.length; /.. mywebproject.tistory.com javaScript. (8) ์ซ์์ Math ๊ฐ์ฒด ์ซ์(Number) - ์ซ์ ๋ํ ์์ ๋ํผ ๊ฐ์ฒด (new Number()) ๊ฐ ์กด์ฌํ๊ณ , ๋ฉ์๋๋ฅผ ๊ฐ์ง ์ ์..
javaScript. (20) Event Listener / Callback ๐ Event Listener - ํด๋น ์ด๋ฒคํธ์ ๋ํด ๋๊ธฐ์ค์ธ ๊ฒ. (์์ Listening ์ค) - ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์๋ ๋ฑ๋กํ๋ ์ด๋ฒคํธ ๋ฆฌ์ค๋๊ฐ ์คํ๋จ. window.onload = function () { alert('I\'m loaded'); }; - ๋ํ์ ์ธ ์ด๋ฒค.. mywebproject.tistory.com ์ง๋ ํฌ์คํ ์์ Callback์ ๋ํ ์ดํด๊ฐ ์ ์๋๋ ๊ฒ ๊ฐ์ ์ถ๊ฐ๋ก Callback์ ๋ํด ํฌ์คํ ํด๋ณด๊ฒ ๋ค. ์ฝ๋ฐฑ์ ๋ํด ์ค๋ช ํ๊ธฐ์ ์์, ๋น๋๊ธฐ ์ฒ๋ฆฌ๊ฐ ๋ฌด์์ธ์ง์ ๋ํด ๋จผ์ ์์๋ณด์. ๋น๋๊ธฐ๋ ๋๊ธฐ์์ ๋ฐ๋๋๋ ๊ฐ๋ ์ผ๋ก, ๋์ ๋น๊ตํด๋ณด๋ฉด ๋ค์๊ณผ ๊ฐ๋ค. Syncronous (๋๊ธฐ์) ์์ฒญ์ ๋ณด๋ธ ํ ํด๋น ์์ฒญ์..
๐ Event Listener - ํด๋น ์ด๋ฒคํธ์ ๋ํด ๋๊ธฐ์ค์ธ ๊ฒ. (์์ Listening ์ค) - ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ์๋ ๋ฑ๋กํ๋ ์ด๋ฒคํธ ๋ฆฌ์ค๋๊ฐ ์คํ๋จ. window.onload = function () { alert('I\'m loaded'); }; - ๋ํ์ ์ธ ์ด๋ฒคํธ๋ฆฌ์ค๋ ์ฝ๋์. - window๊ฐ load ๋ ๋ function ๋ถ๋ถ์ด ์คํ๋๋ ๊ฒ. ์ด๋ฒคํธ๋ฆฌ์ค๋๋ ํญ์ on + '์ด๋ฒคํธ๋ช '์ผ๋ก ๋ช ๋ช ๋๋ค. ์> onclick ** ์์ฃผ ์ฐ์ด๋ ์ด๋ฒคํธ ๋ชฉ๋ก onchange ๊ฐ์ฒด ๋ด์ฉ์ด ๋ฐ๋๊ณ / ํฌ์ปค์ค๋ฅผ ์์ ๋ onclick ๊ฐ์ฒด๋ฅผ ํด๋ฆญํ ๋ ondblclick ๊ฐ์ฒด๋ฅผ ๋๋ธํด๋ฆญํ ๋ onerror ์๋ฌ๊ฐ ๋ฐ์ํ์ ๋ onfocus ๊ฐ์ฒด์ ํฌ์ปค์ค๋์์ ๋ onblur ๊ฐ์ฒด๊ฐ ํฌ์ปค์ค๋ฅผ ์์ ๋ onkey..
javaScript. ์๋ ํ ์คํธ RPG ๊ฒ์ ์๋ ํ ์คํธ RPG ๊ฒ์ index.html ํ ์คํธ RPG style.css * { margin: 0; box-sizing : border-box; } html { font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-s.. mywebproject.tistory.com ์ง๋์๊ฐ ์ ์ํด๋ณด์๋ ์๋ ํ ์คํธ RPG ๊ฒ์์ ๊ธฐ๋ฅ์ ์ถ๊ฐํ๊ณ , ๋ ๊ฐ์ ๋ ๋ฒ์ ์ ์ ์ํด๋ณด์๋ค. ์ด์ ์ฝ๋๋ ์๋ [๋๋ณด๊ธฐ] ๋ฅผ ์ฐธ๊ณ ๐ป ๋๋ณด๊ธฐ index.html style.css * { margin: 0; box-sizing : border-box; } html { font-family:Impact, Hae..