
[JavaScript] 06. 배열
2022. 5. 18. 16:15
Frontend/JavaScript
교재 : 비전공자를 위한 프로그래밍 입문 - 06. 배열 #배열(Array) 배열이란? 여러 개의 값을 변수에 담는 것. let 배열명 = [값, 값, ...]; · 요소(element/엘리먼트) : 배열의 값 · 인덱스(index) : 몇 번째 요소를 이야기하는지 지정해주는 카운트 값 (인덱스는 0부터 카운트한다.) · 렝스(length) : 배열의 길이. 요소의 수가 몇 개인지 계산해준다. [예제] 배열을 통해 반복문으로만은 그릴 수 없는 도형을 그릴 수 있다. let diam = [30, 15, 70, 50, 25, 90]; function setup() { createCanvas(600, 200); background(102, 103, 171); noLoop(); } function draw() ..

[JavaScript] 05. 반복과 조건분기
2022. 5. 18. 15:38
Frontend/JavaScript
교재 : 비전공자를 위한 프로그래밍 입문 - 05. 반복과 조건분기 # 반복문과 조건문 조합 · 조건문 정의 if (조건식1) { 조건식1을 만족하면 실행하는 코드 } esle if (조건식2) { 조건식1이 충족되지 않으면 조건식2가 충족되면 실행하는 코드 } else if (조건식3) { ... } else { 지금까지 모든 조건식이 충족되지 않을 때 실행하는 코드 } - else-if 및 else문은 선택사항. - 여러개의 조건문을 충족해도 우선으로 쓰인 조건 코드만 실핸한다. · 반복문 for문 정의 for (카운터변수 준비; 반복 조건식; 카운터변수 업데이트) { 반복하는 처리 } 카운터 변수 준비 반복 조건식 확인 반복하는 처리 카운터 변수 업데이트 위 처리들을 '반복 조건식'을 만족할 때까지..

[JavaScript] 04. 반복
2022. 5. 18. 15:38
Frontend/JavaScript
교재 : 비전공자를 위한 프로그래밍 입문 - 04. 반복 반복문 : 어떤 동작을 반복할 때 사용한다. while문 반복 조건을 만족하는 동안 { } 안에서 설정해놓은 것을 반복한다. while(반복조건) { 반복하고 싶은 처리기능(복수행 가능함) } 반복조건에 대한 변수 정의(선언 및 초기화) ... while(반복조건식) { 반복하는 처리 반복조건에 대한 변수 업데이트 } 카운터 변수(counter variable) = 루프카운터(loop counter) : 반복 조건을 위해서 사용되는 변수 [예제] const DIAM = 100; let x = 50; let cnt = 1; // 10 회 계산하기 위한 초기화 변수 function setup() { createCanvas(1000, 200); back..

[JavaScript] 03. 조건분기
2022. 5. 18. 15:38
Frontend/JavaScript
교재 : 비전공자를 위한 프로그래밍 입문 - 03. 조건분기 if문 (if-statement) 조건분기 = 조건식(condition) : 조건이 충족할 시에 실행되도록 하는 명령어. 조건이 만족되지 않으면 정상적인 순서로 계속 수행한다. if(조건식) { 조건을 충족하는 경우 실행 코드 (여러 줄이어도 문제없음) } ※ () 괄호 뒤에 ; 세미콜론 쓰지 않도록 주의 [예제] let diam = 180; function setup() { createCanvas(400, 400); background(102, 103, 171); noLoop(); } function draw() { if (diam >= 100) { // 조건분기 : diam이 100보다 크거나 같으면 noFill(); // 채우지 않도록 명..

[JavaScript] 02. 연산
2022. 5. 18. 15:37
Frontend/JavaScript
교재 : 비전공자를 위한 프로그래밍 입문 - 02. 연산 산술 연산자 연산자(operator) : 값의 연산을 위해 사용되는 부호 사칙연산자 : 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 계산 순서(우선 순위)는 산수와 같다. 따로 괄호로 묶어주면 우선도가 높아진다. 사칙연산자 외에 나머지(%), 지수(**, 거듭제곱) 등의 연산자도 있다. [예제] 콘솔(console)창에서 값을 확인해보려고 'console.log(출력할 값)'을 따로 넣었음 let x, y, z; function setup() { noLoop(); } function draw() { x = 5 + 10; console.log(x); // 15, 콘솔에 표시됨 y = -x + 5; console.log(y); // -10, 콘솔..

[JavaScript] 01. 변수
2022. 5. 16. 21:50
Frontend/JavaScript
교재 : 비전공자를 위한 프로그래밍 입문 - 01. 변수 # 변수를 이용하여 도형 만들기 베리어블(variable) : 변수 공통(반복적)으로 사용되는 것들을 변수로 뽑아내서 관리/수정 쉽게 만들기! 전역 변수 : 맨 윗줄에 선언하여 하위 모든 함수에도 적용됨 지역 변수 : 선언한 함수 중괄호 안에 있는 부분만 적용됨 [변수 정의(define)] let '변수이름' = 값 or '문자' (초기 값); 프로그래밍에서 등호(=)는 초기화(initilize)를 의미. [변수 대입(assign)] 변수 정의로 설정한 초기 값을 코드 도중에 변경하고 싶을 때 사용. let으로 따로 선언하지 않고 바로 변수의 값을 입력한다. 변수명 = 값; [변수 선언(declare)] 변수명을 선언은 했으나 초기 값 설정하지 않..

[JavaScript] p5.js를 통해 프로그래밍 이해하기
2022. 5. 16. 21:42
Frontend/JavaScript
교재 : 비전공자를 위한 프로그래밍 입문 [JavaScript 웹 편집기 - p5.js] : http://p5.js Web Editor p5.js를 통해 프로그래밍 원리를 이해하고, 프로그래밍 기초 문법과 개념을 알아보자. p5.js : JavaScript 언어를 사용하는 웹 편집기 JavaScript : 웹브라우저에서 작동하는 언어 (HTML, CSS와 같은 마크업 언어와 같이 사용됨) [용어 정리] · function(펑션) : 함수 function 뒤에는 setup()이나 draw()가 쓰인다. function setup() { (한번만 실행하고 싶은 것을 작성) } function draw() { (반복해서 실행하고 싶은 것을 작성) } · argument(아규먼트) : 인수 - 테이블에서 구하는..