본문 바로가기

분류 전체보기

(185)
Javascript 함수 - function() 함수란 함수(function)란 스크립트 내에서 반복해서 사용할 수 있는 코드조각을 의미합니다. 어떤코드를 캡슐화해서 여러번 실행할 수 있게 해줍니다. 데이터 보내기 아래의 예제처럼 함수는 작성한 값을 밖으로 보낼 수 있습니다. function functionName(){ console.log("{}안에 작성하는 것들이 실행됨"); } functionName(); //실행방법 functionName(); //실행하고 싶을때마다 언제든 functionName(); //실행할 수 있음 데이터 받기 아래의 예제처럼 함수는 밖에서 데이터(인자)를 받을 수도 있습니다. 변수에 들어가는 값을 인자라고 합니다. function functionName(variable1, variable2){ console.log("첫..
Javascript 데이터 구조 - 객체(Object) 예를들어 게임을 만든다고 가정해보자 아래처럼 플레이어의 이름, 레벨, 로그인여부 등이 필요하다면 아래처럼 변수로 저장할 수 있을것이다. const playerName = "홍길동"; const playerLevel = 10; const playerLogin = true; 하지만 player가 반복되고 있으니, 이것을 배열로 정리하면 어떨까? const player = ["홍길동", 10, true]; 개발자가 각 배열의 항목의 의미를 주석으로 표시하지않는 이상 각 항목들이 어떤 값을 의미하는지 유추하기 어려울것이다. 이럴 때 우리는 객체(Object)를 이용한다. const player = { name: "홍길동", level: 10, login: true }; console.log(player); co..
Javascript 데이터 구조 - 배열(Array) 배열(Array) 자바스크립트에는 변수가 있고 변수값(데이터)가 있다. 이 데이터를 리스트로 정리하는것, 변수값을 리스트 구조로 변수에 저장하는것을 배열(Array)라고 한다. 아래에는 월화수목금토일 변수가 있고 각각의 변수값이 들어있다. 일일이 변수값을 주고 저장하면 노가다 작업을 해야하기때문에 이 경우 배열로 정리하면 편하다. 또, 아래처럼 일일이 나열한다면 특정요일을 찾기도 어렵다. index 값이 없기때문이다. 배열로 정리하면 인덱스, 즉 순서가 생기기 때문에 n번째 값을 찾거나, 찾아서 바꾸거나, n번째 값 다음으로 새로운 값을 추가하거나 등등 여러가지를 해볼수있다. 인덱스는 0부터 시작한다. 배열안에는 number, string, boolrean, null, undefinde 모두 가능하다. ..
Javascript 데이터 타입 - number, string, boolean, null, undefind 데이터 타입 데이터 타입 설명 EX number 숫자 const variable = (1); string 문자 열 const variable = ("원하는 텍스트"); boolean 참 또는 거짓 (true / false) const variable = (true); null 어떤 값이 의도적으로 비어있음을 표현 const variable = (null); undefind 선언한 후 값을 할당하지 않은 변수에 자동으로 할당됩니다. const variable; null과 undefind 차이점 null은 변수에 값이 주어졌는데 그 값이 "없다" 또는 "비어있다" 의미인거고 undefind는 변수에 값이 주어지지않은것
Javascript 변수 선언 - const, let, var 1. var var는 오래된 변수 선언 방식이다. var는 아래의 예제 처럼 변수를 재선언해도 에러가 나오지 않고, 물론 변수에 재할당도 가능하다. 당연히 원한다면 재할당을 하지 않아도 무방하다. 이처럼 var는 아무 의미도 가지지않은(?) 단순 변수 선언 방식인것이다. var a = 1 console.log(a) var a = 2 console.log(a) var a = 1 console.log(a) a = 2 console.log(a) 간단한 테스트 예제 정도라면 var를 써도 무방할것이다. 하지만 코드가 길어진다면, 해당 변수가 어떻게 쓰일것인지 파악이 어렵고 실수로 변수값이 변경될 수도 있을것이다. 그래서 이를 보완하기위해 const와 let이 나왔다. 2. const const는 변하지않는 값을..
HTML <canvas> createPattern() - 패턴 만들기 1. createPattern() createPattern() 메소드는 패턴 객체를 만들어 반환합니다. image는 CanvasImageSource (즉, HTML ImageElement, 다른 캔버스, 요소 등등)입니다. type은 이미지 사용 방법을 나타내는 문자열입니다. type 패턴을 만들기 위해 이미지를 사용하는 방법을 지정하며, 다음 문자열 값 중 하나 여야합니다. repeat 수직 및 수평 방향으로 이미지를 이어 붙입니다. repeat-x 수평 방향으로만 이미지를 이어 붙입니다. repeat-y 수직 방향으로만 이미지를 이어 붙입니다. no-repeat 이미지를 이어 붙이지 않습니다. 이미지는 한번만 사용됩니다. createPattern() 메소드를 사용하여 그라디언트 메소드와 유사한 Can..
HTML <canvas> 그라디언트(Gradient) 1. 그라디언트 다른 그래픽 프로그램들과 마찬가지로 캔버스에서도, 도형에 그라디언트를 사용할 수 있습니다. 아래의 메소드 중 하나를 사용하여 객체를 생성합니다. 그 다음 이 객체를 fillStyle 또는 strokeStyle 속성에 할당할 수 있습니다. createLinearGradient(x1, y1, x2, y2); 시작점 좌표를 (x1, y1)로 하고, 종료점 좌표를(x2, y2)로 하는 선형 그라디언트 객체를 생성합니다. createRadialGradient(x1, y1, r1, x2, y2, r2); 반지름이 r1이고 좌표(x1, y1)을 중심으로 하는 원과, 반지름이 r2이고 좌표(x2, y2)를 중심으로 하는 원을 사용하여 그라디언트 객체를 생성합니다. gradient.addColorStop..
HTML <canvas> setLineDash, lineDashOffset - 선의 대시 패턴 지정하기 1. setLineDash, lineDashOffset setLineDash 메소드와 lineDashOffset 속성은 선의 대시 패턴을 지정합니다. setLineDash 메소드는 거리를 지정하는 숫자 목록을 받아 선과 틈을 교대로 그리며 lineDashOffset 속성은 패턴을 시작할 위치를 오프셋으로 설정합니다. 2. 예제 var ctx = document.getElementById('canvas').getContext('2d'); var offset = 0; function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.setLineDash([40, 20]); ctx.lineDashOffset = -offset; ctx.strokeR..