[JavaScript] 심화
2024. 6. 10. 11:58
Frontend/JavaScript
Truthy와 Falsy자사스크립트에서는 참, 거짓이 아닌 값도 참, 거짓으로 평가함이를 이용하면 조건문을 간결하게 만들 수 있음 Falsy한 값let f1 = undefinde;let f2 = null;let f3 = 0;let f4 = -0;let f5 = NaN;let f6 = "";let f7 = 0n; Truthy한 값7가지의 falsy한 값들을 제외한 나머지 모든 값 활용 사례function printName(person) {console.log(person.name);}let person;// person은 undefined 가 됨 printName(person); // => 오류남 아래와 같이 사용하면 조건문을 간결하게 사용할 수 있음 function printName(person) ..
[JavaScript] 기본
2024. 6. 5. 18:02
Frontend/JavaScript
출처 : 한 입 크기로 잘라먹는 리액트변수와 상수// 1. 변수let nmae;// 2. 상수const name; 변수 명명 규칙(네이밍 규칙)$, _ 제외한 기호는 사용할 수 없음.숫자로 시작할 수 없음.예약어를 사용할 수 없음. 변수 명명 가이드변수명은 다른 사람도 알아보기 쉽도록 명명한다.안좋은 예let a = 1;let b = 1;let c = a - 1; 좋은 예let salesCount = 1;let refundCount = 1;let totalSalesCount = salesCount - refundCount; 자료형(타입)자료형(Type) = 집합 원시타입기본형 타입이라고도 불림프로그래밍에 있어 가장 기본적인 값들의 타입을 의미함동시에 한개의 값만 변수에 저장될 수 있음Number T..
[JavaScript] 간단한 기본 개념
2024. 6. 5. 17:41
Frontend/JavaScript
JavaScript의 역할?웹 서버데스크탑 어플리케이션모바일 어플리케이션기타 등등.. Web 페이지를 개발하기 위해서 JavaScript, HTML, CSS를 사용한다. HTML의 역할?요소들의 내용,배치,모양을 정하기 위해 사용함색상이나 디자인 등의 수정은 불가 CSS의 역할?요소들의 색상,크기 등의 스타일을 설정 JavaScript의 역할?웹 내부에서 발생하는 다양한 기능을 만듦웹에 어떠한 동작을 부여할 수 있음 (예 : 버튼을 눌렀을 때 실행될 동작)자바스크립트는 "JavaScript 엔진"에 의해 실행됨엔진은 게임 구동기, JavaScrip는 게임이라고 이해하면 쉬움 JavaScript 엔진은 브라우저에 기본 탑재되어 있음브라우저에서 개발자 도구를 열어서 간단하게 consol.log("text")..
[JavaScript] 11. 리턴 값이 있는 함수
2022. 5. 18. 21:13
Frontend/JavaScript
교재 : 비전공자를 위한 프로그래밍 입문 - 10. 인수가 있는 함수 리턴 값이 있는 함수 random함수 floor함수 : 소수점을 버려서 정수로 변환해주는 함수 map함수 - 제1인수 “입력값”을 제2-3인수로 지정한 범위로부터 제4-5인수로 지정한 새 범위에 맞도록 변환합니다. 변환된 값(출력값)은 리턴값으로 함수와 바뀝니다. - 마우스 입력의 값을 특정 범위에 변환할때 자주 사용 map(입력, 최소, 최대, 신규최소, 신규최대) 예시) function setup() { createCanvas(500, 100); noStroke(); } function draw() { background(102, 103, 171); fill(200); rect(200, 0, 100, height); // 입력범위를..
[JavaScript] 10. 인수가 있는 함수
2022. 5. 18. 20:06
Frontend/JavaScript
교재 : 비전공자를 위한 프로그래밍 입문 - 10. 인수가 있는 함수 인수(argument) 인수는 실행될 때 값으로 대체된다. 인수는 숫자나 문자열을 직접 지정할 뿐만 아니라 변수나 식으로 지정할 수 있다. #인수가 있는 함수 function 함수명(인수, 인수, ...) { // 함수 정의 처리할 내용 } ~ 어딘가의 다른 위치 ~ 함수명(인수, 인수, ...); // 함수 호출 실인수(argument) : 실제 호출하는 인수 가인수(parameter) : 어떤 값이 들어올지 모르는 인수 #변수의 범위(variable scope) 로컬 변수 = 지역 변수 글로벌 변수 = 전역 변수 자바스크립트에서는 로컬변수가 더 중요시된다. 인수가 있는 직접 만든 함수를 정의한 후 반복이나 배열과 조합해서 사용하는 ..
[JavaScript] 09. 함수
2022. 5. 18. 18:07
Frontend/JavaScript
함수(function) · 인수가 있음 · 인수가 없음 · 리턴값(반환값, return value)이 있음 · 리턴값이 없음 함수호출 (function call) 함수 정의 (function definition) function 함수명() { // 함수정의 // 처리할 내용 (함수가 호출될 때까지 실행되지 않음) } /* 어딘가 다른 위치에 있는 */ 함수명(); // 함수호출 (위에서 정의한 내용이 실행됨) 함수명(); // 여러번 호출 가능 *카멜케이스 : 이름 설정할때 단어조합시 drawFace 띄어쓰기를 못하니 첫 시작 단어 외에 붙는 단어가 있을때 그 단어의 시작 알파벳을 대문자로 표기한다. 인수/리턴값이 모두 없는 함수 정의 function setup() { createCanvas(400, 4..
[JavaScript] 07. 애니메이션
2022. 5. 18. 16:53
Frontend/JavaScript
교재 : 비전공자를 위한 프로그래밍 입문 - 07. 애니메이션 애니메이션 setup() : 한 번만 실행되는 것을 넣는 함수 draw() : 반복적으로 실행되는 것을 넣는 함수 function setup() { // 여기는 우선 한번만 실행하는 코드 } function draw() { // 여기는 반복적으로 실행하는 코드 } 왼쪽에서 오른쪽으로 이동하는 원 만들어보기 let x = 100; // 초기화 function setup() { createCanvas(500, 100); //배경 strokeWeight(2); //선두께 } function draw() { if (x >= 400) { // 반복조건 noLoop(); //x가 400값에 도달하면 멈춤 } background(102, 103, 171)..
[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() ..