JavaScript 7

JS library

라이브러리와 프레임워크 라이브러리(library)는 일련의 함수 및 기능으로 구성되어 있으며, 개발자는 필요에 따라 선택적으로 사용할 수 있습니다. 라이브러리는 보통 특정 문제나 작업을 해결하기 위한 도구로 사용됩니다. 예를 들어 jQuery 라이브러리는 DOM 조작과 이벤트 처리에 매우 유용하며, Moment.js 라이브러리는 날짜 및 시간을 처리하는 데 사용됩니다. 반면에, 프레임워크(framework)는 일련의 라이브러리로 구성되어 있으며, 더 큰 개발 패턴을 제공합니다. 프레임워크는 개발자가 애플리케이션의 전체 구조를 정의하고 애플리케이션의 핵심 기능을 제공합니다. 개발자는 프레임워크가 제공하는 라이브러리를 사용하여 애플리케이션을 개발할 수 있습니다. 예를 들어 Angular, React, Vue..

JavaScript 2023.03.08

객체

객체(object) : 관련된 데이터와 함수의 집합 객체에 소속된 데이터를 속성(property), 객체에 소속된 함수를 메소드(method)라고 한다. 간단하게 설명하면 객체는 서로 연관된 함수와 변수 및 데이터들을 정리정돈하기 위해 한데 묶은 수납상자 같은 것 객체 기본 구조 (출처 mdn) var objectName = { member1Name: member1Value, member2Name: member2Value, member3Name: member3Value }; 이전까지 작성했던 코드 중 document.querySelector('body') 에서 document는 객체, querySelector은 document객체에 속한 함수, 즉 메소드였다. 객체의 쓰기와 읽기 배열은 순서대로 데이터가..

JavaScript 2023.03.01

함수

※ 함수 함수 - JavaScript | MDN 함수는 JavaScript에서 기본 구성 요소 중 하나입니다. JavaScript의 함수는 작업을 수행하거나 값을 계산하는 명령문의 집합인 프로시저(procedure)와 비슷하지만, 프로시저가 함수로 쓰이려면 입력을 developer.mozilla.org 다른 정리된 블로그보다 위의 공식문서 정독하는 게 제일 좋더라(사실 잠와서 읽다가 말긴 했는데 나중에 다 읽을..걸..?) 함수의 기본 ▷ 함수 선언 및 호출 ▷ Parameter(매개변수)와 Argument(인수) 매개변수 : 인수를 받아서 함수 안으로 매개하는 변수. 인수 : 입력값. (내 식대로 말하면 함수 정의역의 원소) ▷ return > 1+1 1 === 1 < true 이 때 1+1..

JavaScript 2023.02.25

반복문

※ 반복문 종류와 예시 루프와 반복 - JavaScript | MDN 루프는 어떤 것을 반복적으로 시행할때 빠르고 간편한 방법을 제공합니다. JavaScript Guide의 이 항목은 JavaScript 에서 사용이 가능한 서로 다른 여러가지 반복문을 소개합니다. developer.mozilla.org 가장 간단한 while문만 살펴보았다. 이제 이걸 야간모드에서 a태그들의 속성을 변경할 수 있도록 활용해보자. 이전 글의 조건문에서, a태그들도 색을 변경하려고 했는데 하나의 a태그만 선택되는 문제가 있었다. 그 해결법을 이제 알았다. 거의 한 달만에 자바스크립트 보네ㅜㅜ 반성하자.. 애들 방학 끝나면 빡세게 공부해야지. 아무튼 해결법은 querySelectorAll이었다. querySelector과 qu..

JavaScript 2023.02.19

조건문

※ 자바스크립트에서 ' === ' 은 비교연산자로, boolean 데이터 타입이 출력된다 ※ 조건문 기본문법 if (조건) { 만약 조건(condition)이 참일 경우 실행할 코드 } else { 대신 실행할 다른 코드 } 조건문을 활용하여, 다음과 같이 나이트 모드, 주간 모드 변경되는 버튼을 만들었다. 마지막으로, 리팩토링(refactoring. 코드를 유지보수 편하게, 가독성 좋게 재조정하는 것)했다. document.querySelector('#mode')은 자기 자신을 가리키는 코드라서 this를 쓰면 된다. 그러면 id도 쓸 필요가 없으므로 같이 지웠다. 여러 번 중복되고 있는 document.querySelector('body')는 변수 target에 저장해서 썼다. (vscode에서 같은..

JavaScript 2023.01.27

태그 선택

JS로 제어할 태그를 선택하는 방법에 대해 배웠다. 음... 구글에 JavaScript select tag by CSS selector 만 입력해도 방법이 좌라락 나오더라 간단히 요약하면, document.querySelector을 사용하여 태그를 선택하고, style을 통해 원하는 스타일의 코드를 작성할 수 있었다. (document.querySelectorAll 도 있었는데 이건 아직 잘 모르겠다.) 강의를 따라 야간모드 주간모드 버튼을 만들었다. 아니 근데 나는 a태그도 모드에 따라 색상을 변경하게 했는데 h1태그에 딸린 a태그만 변경되고 나머지 태그들은 색이 안 바뀌더라... 대체 왜지?? CSS파일도 확인하고 이짓 저짓 다 해봤는데도 안 된다. 나중에 좀 더 찾아봐야겠다...ㅜㅜㅜ 일단은 걍 올..

JavaScript 2023.01.15

HTML과 JS(script태그, 이벤트, 콘솔)

JS를 도입하기에 앞서, 우선 HTML과 CSS, JavaScript 사이의 관계와 역할을 간단히 비유해보면 웹페이지라는 문장에서 HTML은 명사, CSS는 형용사, JavaScript는 동사 역할을 한다. "몬생긴 고양이가 꿈실거린다." 라는 문장에서 '고양이'는 HTML, '몬생긴'은 CSS, '꿈실거린다'는 JavaScript 로 표현된다. HTML과 CSS로 웹페이지에 정보를 담고 꾸미는 법을 배웠으니 이제 JS로 웹페이지의 동작을 구현하는 법을 배울 차례다. script 태그 안에 자바스크립트 문법을 쓰면 된다. 웹브라우저는 HTML 코드를 읽어내려오다가 태그를 보게 되면, HTML을 읽는 걸 멈추고 JS 파일을 다운로드하고 실행시킨 후에 나머지 HTML 코드를 읽는다. 이벤트 웹브라우저 위에서..

JavaScript 2023.01.14