자바스크립트 썸네일형 리스트형 [JavaScript] 배열에 대해 알아보기 * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 2 : 43) 배열이란? 모든 데이터 종류의 목록 (숫자, 문자열, 혼합 데이터 등) 개인 분석 서버 등에 데이터 목록을 저장을 하고자 할 때 사용 배열 생성 방법 let 배열 이름 = [데이터(선택)]; let logEntries = []; 배열 사용 방법 배열의 이름으로 사용할 수 있고 배열의 요소에 접근할 때는 배열의 이름[접근할 요소의 인덱스]을 통해 할 수 있다. logEntries.push(enteredNumber); console.log(logEntries[0]); 배열의 요소를 출력하게 되면 그 해당 인덱스 요소만 출력하므로 배열의 값을 .. 더보기 [JavaScript] 연산자와 데이터 타입 종류 (이어서) * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 2: 41 ~42) 연산자 값을 조종할 수 있도록 해주는 JavaScript의 구문 기능 연산자의 종류 + : 곱하기 연산자 - : 빼기 연산자 * : 곱하기 연산자 / : 나누기 연산자 % : 나머지 연산자 ** : 거듭제곱 연산자 = : 할당 연산자 +=, -=, *=, /=, %= : 축약 연산자 ++, -- : 증감 연산자 ※ 증감 연산자는 붙이는 위치에 따라서 반환 값이 달라진다. ++변수와 변수++의 출력 값은 다름 📍 이전 글 참조 2022.06.15 - [Study Record/Javascript] - JavaScript 변수와 연산자 J.. 더보기 [JavaScript] 계산기 연산 버튼 함수 만들기 * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 2: 39~40) 📝 전체 코드 const defaultResult = 0; let currentResult = defaultResult; // Gets input from input field function getUserNumberInput() { return parseInt(userInput.value); } // Generates and writes calculation log function createAndWriteOutput(operator, resultBeforeColc, calNumver) { const calcDescription = .. 더보기 [JavaScript] 코드 리팩터링과 재사용 * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 2 : 38~39) 코드 리팩터링 조금 더 명확하고 효율적인 코드 작성하는 방법 코드의 반복 줄이기 작성했던 코드나 로직을 변경해야 할 때 변경이 필요한 횟수 줄이기 ⬇ 변경 전 코드 const defaultResult = 0; let currentResult = defaultResult; function add(num1, num2) { const calcDescription = `${currentResult} + ${userInput.value}`; currentResult = currentResult + parseInt(userInput.value).. 더보기 [JavaScript] 버튼을 함수에 연결해보자 * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 2 : 34~36) + 버튼을 add 함수에 연결하기 먼저 vender.js 파일에 있는 addBtn을 app.js 파일에 작성한다. addBtn.addEventListener("click", add); 이와 같이 작성한다. addEventListener는 브라우저에 내장된 함수이고 addBtn과 연결되어 있다. 이 함수는 매개변수 2개를 가지는 함수로 첫 번째 매개변수는 문자열, 두 번째 매개변수는 함수이다. 두 번째 매개변수에 적는 함수는 click이 일어나면 무슨 일이 일어날건지 브라우저에게 알리기 위한 것으로 함수를 간접적으로 실행하도록 한다. .. 더보기 JavaScript 함수에 대해 알아보자 * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 2 : 23~25, 33) 함수 추후에 실행할 수 있는 코드를 정의하도록 해준다. (즉시 실행되는 것 X) 메모리에 저장해 두고 이후에 함수를 호출함으로써 함수 내의 코드를 실행시킨다. 함수 정의 function 키워드 원하는 함수 이름 (매개변수 선택) { 실행하고자 하는 코드 (함수 본문) } * 함수 이름은 함수의 역할을 명확히 나타낼 수 있는 이름으로 정하는 것이 좋음 함수 호출 함수 이름(이 함수가 사용할 수 있는 값) 사용 예시 const defaultResult = 0; let currentResult = defaultResult; func.. 더보기 JavaScript 데이터 타입 * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 2 : 23~25) 데이터 타입은 숫자와 문자열로 나뉠 수 있다. 숫자 정수(양수, 음수)와 소수 등 * 22.956과 같이 소수점 이하에 소수를 가진 수를 부동수 또는 부동 소수점 수라고 부른다. 활용 예시: 계산기 만들 때, 가격을 다룰 때 등 문자열 텍스트를 작은따옴표, 큰 따옴표, 백틱으로 감싸서 문자열을 생성할 수 있다. 작은따옴표, 큰 따옴표, 백틱 중에서 무엇을 사용하든 상관없지만 일관성을 유지하는 것이 중요하다. 하지만 작은따옴표와 큰 따옴표와 달리 백틱만의 특별함이 있다. 그것은 아래에서 확인할 수 있다. 활용 예시: 로그인된 사용자의 .. 더보기 웹사이트에 JavaScript 추가하기 * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 2 : 18) 브라우저에게 JavaScript 로드 및 실행을 지시하는 방법 1. HTML 파일의 파일 내부의 The Unconventional Calculator + - * / 0 Result: 0 app.js alert("Hello!"); 주의해야 할 점 JavaScript 파일을 가져올 때 어떤 파일이 다른 파일을 의존하는 경우에는 의존할 내용이 있는 파일을 먼저 가져와야 한다. (JavaScript에서는 순서가 중요함) 더보기 이전 1 2 3 다음
