JavaScript 썸네일형 리스트형 [조코딩 웹 개발 5주 완성] 3주차 정리 - 웹 조작, 이벤트 * 조코딩 웹 개발 5주 완성 강의를 듣고 개인 복습을 위해 정리한 글입니다. https://www.youtube.com/watch?v=n9BBDb4I4Vs JavaScript를 이용한 웹 조작 BOM(Browser Object Model) : 브라우저 조작 DOM(Document Object Model) : HTML/CSS 조작 + python으로도 웹 조작할 수 있음(아직 베타 버전) https://pyscript.net/ Pyscript.net Run Python code in your HTML. pyscript.net BOM(Browser Object Model) 브라우저에 있는 기능들을 JavaScript 코드를 이용해서 실행할 수 있음 DOM (Document Object Model) docu.. 더보기 [조코딩 웹 개발 5주 완성] 3주차 정리 - JavaScript * 조코딩 웹 개발 5주 완성 강의를 듣고 개인 복습을 위해 정리한 글입니다. https://www.youtube.com/watch?v=n9BBDb4I4Vs 변수 정의 값을 담는 상자 변수 만드는 법 var 변수명 let 변수명 const 변수명 함수 ex) f(x) = 2x + 3 정의 function myFunction(x) { let temp = 2 * x + 3; return temp; } 실행 myFunction(1) ex) f(x, y) = x + y 정의 function add(x, y) { let temp = x + y; return temp; } 실행 add(1, 2) 함수를 정의하는 또 다른 방법 조건문 if(money > 5000) { rideTaxi(); } else if (mone.. 더보기 [JavaScript] 에러 해결하는 방법 (구문 오류, 런타임 오류, 논리 오류) * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 2: 50) 에러는 다양하게 발생할 수 있다. 그중에서 가장 대표적인 에러를 해결할 수 있는 방법을 알아보자. 1. 구문 오류 IDE에서 잘못된 부분은 빨간 줄로 표시해주기 때문에 바로 해결할 수 있는 오류이다. 2. 런타임 에러 에러 메시지가 뜨는 경우이다. 이 경우는 비교적 쉽게 해결할 수 있는 편이다. 크롬의 개발자 도구 console 창에 뜨는 에러 메시지를 먼저 읽고 어떤 부분으로 인해 에러가 났는지 찾아보면 된다. 하지만 에러 메시지를 이해하지 못하겠거나 어떻게 해결해야 할지 모르겠을 때는 구글링을 통해 해결 방안을 찾아갈 수 있을 것이다. .. 더보기 VSCode에서 JavaScript 실행하는 방법 VSCode에서 자바스크립트 코드를 실행하는 방법을 알아보자. 1. Code Runner 확장 플러그인 설치 먼저 Extensions에 code runner를 검색하여 설치해준다. 다른 언어로 코드를 실행해보았다면 이미 설치되어있을 것이다. 2. 파일을 만들어준다. math라는 폴더와 test라는 파일을 만들었다. 3. 파일에 코드를 작성한다. console.log("hello"); hello를 출력하는 예시 코드이다. 4. vscode에 내장되어있는 터미널에서 bash를 클릭한다. bash가 보이지 않으면 위쪽 우측에 있는 +버튼을 클릭하고 Git bash를 클릭하면 된다. *터미널이 보이지 않는다면 vscode창의 가장 상단에서 terminal > new terminal을 클릭하면 된다. 5. bas.. 더보기 [JavaScript] 스크립트 import 하는 방법에 대해 알아보기 - defer&async * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 2: 50) 스크립트를 import 하는 방법에 따라서 스크립트를 실행하는 것과 HTML 코드가 구문 분석하는 등의 순서가 바뀌게 되어 웹페이지가 가장 효율적으로 빠르게 작동할 수 있도록 할 수 있다. 방법의 종류는 4가지가 있다. Inline External File External File - async External File - defer 즉시 실행, HTML 분석 및 렌더링을 차단 즉시 로드 및 실행, HTML 분석 및 렌더링 차단 즉시 로드, HTML 분석 및 렌더링 후 실행 HTML 분석 및 렌더링 후 즉시 로드 및 실행 이에 대해 자세히 .. 더보기 [JavaScript] undefined&null&NaN와 Typeof 연산자 * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 2: 48~49) undefined, null, NaN은 비슷한 듯하지만 쓰임과 유형이 모두 다르다. 각각에 대해서 자세히 알아보자. undefined 초기화되지 않은 변수의 기본 값 (아무것도 없음을 나타내는 값) 변수를 생성한 후에 등호로 값을 할당하지 않거나 요소를 생성하지 않은 인덱스에서 배열 요소에 접근하려고 할 때 뜬다. 이때 주의해야 할 점은 undefined가 데이터 유형이긴 하지만 직접 값으로 할당하면 안 된다는 것이다. 그 이유는 값을 할당한 적이 없을 경우의 기본 값이기 때문이기 때문이다. 예시를 통해 알아보자. userName이라는.. 더보기 [JavaScript] 객체를 사용하는 재사용 가능한 함수 만들기 * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 2: 47) 코드를 작성할 때는 재사용이 가능하도록 작성하는 것이 중요하다. function add(num1, num2) { const enteredNumber = getUserNumberInput(); const initialResult = currentResult; currentResult += enteredNumber; createAndWriteOutput("+", initialResult, enteredNumber); const logEntry = { operation: "ADD", prevResult: initialResult, number: .. 더보기 [JavaScript] 객체에 대해 알아보기 * 이 글은 Udemy의 "JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정" 강의를 수강한 뒤 개인 복습을 위해 정리하는 글입니다. (섹션 2 : 44~46) 객체란? 키-값으로 구조화된 그룹화된 데이터 데이터를 그룹화하는 데에 사용한다. 객체 생성 방법 const 객체 이름 = {키: 값, 키: 값, ... }; * 값은 어떤 것이든 가능하다. 문자열, 숫자, 배열, 다른 객체 등 사용 예시 코드 const logEntry = { operation: "ADD", prevResult: initialResult, number: enteredNumber, result: currentResult, }; 객체 사용 방법 객체 전체를 사용할 때 logEntries.push(logEntry); con.. 더보기 이전 1 2 3 다음
