여러분이 사용하고 계신 브라우저는 HTML5를 지원하지 않기 때문에 몇몇 요소가 제대로 보이도록 JScript를 사용하고 있습니다. 하지만 여러분의 브라우저 설정에서 스크립트 기능이 꺼져있으므로, 현재 페이지를 제대로 확인하시려면 스크립트 기능을 켜주셔야 합니다. Javascript - 기초 - 함수
Javascript – 기초 – 함수
2년전 작성
2년전 수정

함수

함수는 코딩할 때 필수적인 항목 중 하나다.

하나의 코드를 여러곳에서 불러오고자할 때 함수를 호출하여 이용한다.

함수는 내장 함수와 사용자 정의 함수가 있다.

내장 함수

함수 사용
요소 이름.함수 이름();

이런식으로 입력을 한다.

Javascript
var myText = 'I am a string';
var newString = myText.replace('string', 'sausage');
console.log(newString);
사용된 코드 설명
var newString = myText.replace(‘string’, ‘sausage’);
:
변수 newString을 선언하고 myText에 있는 ‘string’을 ‘sausage’로 변환한다.
console.log(newString);
:
웹 콘솔에 변수 newString의 값이 출력된다.

자세한 사항은 MDN Web Docs - Standard built-in objects를 참고하자.

사용자 정의 함수

함수 선언
function 함수 이름() { ... }
함수 사용
요소 이름.함수 이름();

이런식으로 입력을 한다.

HTML
<button>Update</button>

<canvas></canvas>
CSS
html {
width: 100%;
height: inherit;
}

canvas {
display: block;
}

body {
margin: 0;
}

button {
position: absolute;
top: 5px;
left: 5px;
}
Javascript
const btn = document.querySelector('button');
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

let WIDTH = document.documentElement.clientWidth;
let HEIGHT = document.documentElement.clientHeight;

canvas.width = WIDTH;
canvas.height = HEIGHT;

function random(number) {
return Math.floor(Math.random()*number);
}

function draw() {
ctx.clearRect(0,0,WIDTH,HEIGHT);
for(let i = 0; i < 100; i++) {
ctx.beginPath();
ctx.fillStyle = 'rgba(255,0,0,0.5)';
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
ctx.fill();
}
}

btn.addEventListener('click',draw);

 

사용된 코드 설명
const ctx = canvas.getContext('2d');
:
변수 ctx를 선언하고 2d 드로잉 컨텍스트에 접근한다.
let WIDTH = document.documentElement.clientWidth;
:

WIDTH 변수를 만들고 clientWidth의 가로 넓이를 저장한다.
canvas.width = WIDTH;
:
canvas 요소의 가로 값을 변수 WIDTH 값을 불러와서 사용한다.
function random(number) { ... }
:
random()함수와 매개변수 number를 선언한다.
return Math.floor(Math.random()*number);
:
0과 1사이의 무작위 소수를 생성하고 * number 값과 곱한 후 소수점 이하 숫자를 반올림하여 반환한다.
ctx.clearRect(0,0,WIDTH,HEIGHT);
:
canvas 지우기
ctx.beginPath();
:
새로운 경로를 만든다.
ctx.fillStyle = 'rgba(255,0,0,0.5)';
:
도형을 'rgba(255,0,0,0.5)' 색상으로 채운다.
ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
:
원을 x 좌표 WIDTH, y 좌표 HEIGHT, 반지름 50이 지정된다. 원을 만들기 위해 아크는 0 라디안 (0 °)의 각도에서 시작하여 2π 라디안 (360 °)의 각도로 끝난다.
ctx.fill();
:
내부가 채워진 도형을 그린다.
btn.addEventListener('click',draw);
:
btn 클릭했을 때 draw 함수를 불러온다.
참고
관련 포스트
Javascript - 기초 - 함수 - 현재글

Mingg`s Diary
밍구
공부 목적 블로그