Study Record 썸네일형 리스트형 [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 : 19~21) 변수 데이터를 보관하는 데이터 컨테이너(저장소) 변수 생성하는 키워드: let & const 일반적인 변수 생성: let 변수 이름 = '데이터'; let으로 생성한 변수는 변할 수 있다. 변수 이름 = '데이터';으로 변수에 저장되는 값을 변경해주면 된다. 상수 생성: const 변수 이름 = '데이터'; const로 생성한 변수는 변할 수 없다. 변수이름 = '데이터';으로 변수에 저장되는 값을 변경해주려고 하면 오류가 난다. Tip 상수는 최대한 자주 사용하는 것이 좋다. 상수는 값을 변경할 수 없고 용도가 제한적이기 때문에 작.. 더보기 웹사이트에 JavaScript 추가하기 * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 2 : 18) 브라우저에게 JavaScript 로드 및 실행을 지시하는 방법 1. HTML 파일의 파일 내부의 The Unconventional Calculator + - * / 0 Result: 0 app.js alert("Hello!"); 주의해야 할 점 JavaScript 파일을 가져올 때 어떤 파일이 다른 파일을 의존하는 경우에는 의존할 내용이 있는 파일을 먼저 가져와야 한다. (JavaScript에서는 순서가 중요함) 더보기 Java와 JavaScript의 차이점, 클라이언트 측과 서버 측 JavaScript의 차이점 * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 1: 11) Java와 JavaScript의 차이점 Java와 JavaScript는 이름을 제외하고는 전혀 공통점이 없다. JavaScript Java 브라우저와 다른 모든 환경에서 실행됨 브라우저에서 실행되지 않음 약형 (유연) 강형 (데이터 컨테이너에 저장할 데이터 종류로 정의 필요) 클라이언트 측과 서버 측 JavaScript의 차이점 클라이언트 측 (브라우저) 서버 측 (NodeJS) 자바스크립트의 기원 브라우저에서 엔진을 추출하여 브라우저 외부에서 실행할 수 있도록 하는 게 목적 브라우저 공급 업체(V8)는 JavaScript 실행 엔진을 제공.. 더보기 Javascript의 정의, 특징, 실행 과정 * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 1: 1 ~10) Javascript의 정의 정의 1) 런타임에 컴파일되는 동적, 약형 프로그래밍 언어로, 이는 브라우저에서 웹 페이지의 일부로 실행될 수도 있고 호스트 환경이라고 불리는 모든 머신에서 직접 실행될 수 있다. 정의 2) Javascript는 웹페이지를 보다 동적으로 만들기 위해 생성되었다. 브라우저 내에서 페이지 내용을 직접 변경하기 위해 만들어졌고 최초에는 LiveScript라고 불렸으나 Java의 인기로 인해 JavaScript로 이름이 변경되었다.(하지만 Java와 Javascript와의 관계는 전혀 없다.) 웹페이지의 작동 과정 .. 더보기 이전 1 2 3 다음
