javascript
1.var, const, let 차이점
1. var , let , const var 문은 변수를 선언하고, 선택적으로 초기화할 수 있다. 참조 문서 MDN const 선언은 블록 범위의 상수를 선언합니다. 상수의 값은 재할당할 수 없으며 다시 선언할 수도 없습니다 참조문서 MDN let 구문은 블록 유효 범위를 갖는 지역 변수를 선언하며, 선언과 동시에 임의의 값으로 초기화할 수도 있다. 참...
2.switch, forEach(), split()
자기소개 페이지 작업 하면서 공부한 것들!!🤣 > 1. switch 지뢰찾기 게임에서 난이도 선택하는 부분에서 swich문을 사용했다. 초급, 중급, 고급 각각을 클릭하면 ev.target.id값을 비교해 보드의 크기를 결정 한다. > 아래의 코드는 해당 칸을 클릭하면 그 칸의 id값을 얻어와 row와 column을 추출해내는 코드이다. 2. fo...
3.js에서 json파일 import 하는 방법
예를들어 위 사진 처럼 질문과 대답이 필요한 경우 어떤 방법을 사용 할수 있을까 생각 해보았는데, 위와 같은 형태의 객체로 만들면 좋을것 같았다. 그런데 지금은 질문이 6개 인데 질문의 개수가 100개 1000개 10000개가 되면 하나하나 변수로 만들수 있을까? javascript에서 배열(Array)은 안에 모든 것이 들어 갈수 있다. 배열 안에 ...
4.DOM(Document Object Model)
DOM(Document Object Model)은 HTML문서의 프로그래밍 interface이다.프로그래밍 인터페이스(Application Programming Interface)는 소프트웨어 간의 교류를 가능하게 해주는 인터페이스이다.Javascirpt에서 DOM이라
5.Select Elements(요소 선택하기)
화면 속 요소를 선택하는 4가지 방법을 알아보겠다.아이디는 HTML문서에서 고유한 값이다.document.getElementById함수를 이용하여 요소를 선택하면 주어지는 값은 단 하나의 요소이다.getElementByClassName함수의 결과 값은 배열과 유사한 형
6.Manipulating Elements(요소 조작하기)
DOM을 이용하여 선택한 요소들을 필요에 따라 수정하거나 삭제할 수도 있다.자주 사용하는 속성들위의 내용은 "MDN - Web API"를 참조 하였습니다.MDN Web API
7.Creating Elements(요소 만들기)
원하는 대로 요소를 만들기도 가능하다.자바스크립트에서 생성한 요소는 우리가 직접 화면에 추가하기 전에는 시각적으로 화면에 표시되지 않는다.
8.Events(이벤트)
이벤트는 웹상에서 발생하는 사건. 즉, 사용자가 화면의 일부를 "클릭"하거나 "드래그" 등의 행위를 말한다.이벤트 목록모든 이벤트를 외울순 없다. 상황에 맞게 필요한 이벤트를 찾아서 적용할수 있도록 하자. (검색하는 습관을 들이자!!😎)자바스크립트를 이용해 DOM요소
9.this
자바스크립트에서 this키워드는 항상 함수 내부에서 사용된다. this값은 this가 사용된 함수가 어떤 방식으로 실행 되었는지에 따라 결정된다. 함수 선언시에는 this값을 판별할 수 없다. this값을 알기 위해선 함수 실행문을 찾고, 어떻게 실행되었는지만 알면
10.Constructor Function(생성자 함수)
자바스크립트에서는 함수의 return값이 없으면 undefined가 반환되는데, 위 예제에서는 Person함수는return값이 없는데도 hth 변수에 어떠한 객체가 담긴다.우리는 보통 자바스크립트에서 객체를 생성할때 위와 같이 사용한다.위 예제 코드처럼 작성해도 실제로
11.Prototype
자바스크립트의 모든 함수에는 prototype이라는 속성이 있다.
12.Closure
자바스크립트에서 클로저는 함수가 선언(또는 생성)될 당시 주변환경(Lexical Environment)을 기억하는 것기본적으로 함수 내부에서 만들어진 변수는 외부 스코프에서 접근을 할수가 없다.하지만 클로저를 이용하면 이러한 문제를 해결할 수 있다. 여기서 중요한 것
13.Execution Context
자바스크립트는 함수가 실행될때마다, 현재 실행되는 함수에 대한 관련 정보를 컴퓨터 메모리에 저장한다. 이것을 Execution Context(실행 컨텍스트)라고 한다.위 예제에서 함수 실행문은 총 2개addCurry(5);addFive(1);두 실행문에 대한 관련 정보
14.Spread syntax (...)
구글링을 하다보면 자바스크립트 코드에 ... 기호를 볼수 있다.스프레드 문법이라는 것인데 여러가지로 유용하게 쓰일 것 같아서 정리해본다.기본적으로 스프레드 문법은 대상을 각 요소로 분리 시킨다.아래와 같은 용도로 많이 사용된다.
15.Array.prototype.reduce()
reduce()이해를 위해서 예제를 만들어 풀어보았다.과목명을 요소로 가지는 배열이 있다.(중복된 값이 있다.)과목명을 객체의 key값으로 가지는 객체를 만들어라. (value는 임시 값으로 0입력)reduce()메서드는 활용하기에 따라 엄청난 기능이 될것같다.
16.3자리 마다 콤마(,) 찍어주기 - 가격 표시
17.커링을 이용한 타입별 선언 및 API 호출
출처 : 코어자바스크립트(정재남, 2020 개정판)
18.정규 표현식
| 또는() 그룹\[] 문자셋, 괄호안의 어떤 문자든(대괄호 안의 문자 하나라도 일치할 시)\[^] 부정 문자셋, 괄호안의 어떤 문자가 아닐때(?:) 찾지만 기억하지는 않음(그룹으로 만들지 않음)? 앞의 문자가 없거나 있거나(a? a가 있거나 없거나)\* 없거나 있거
19.var의 문제점, 해결방안(const, let)
자바스크립트를 심도있게 공부하기 위하여 자료를 찾아 보던중에 정리하기 위해 포스팅한다.이런 상황에서 명시적 에러가 발생하도록 하려면 파일 상단에 use strict를 선언 하면 된다.for 뿐만 아니라 while문, switch문, if문 등 함수 내부에서 작성되는 모
20.깊은 복사
spread 연산자(...)를 사용해도 깊은 복사가 되지 않는다.중첩 객체의 경우 원본객체에 영향이 간다.추후 추가로 작성 예정
21.[javascript] 'string+number ' 문자열 정렬(추가: Array<object> key 기준 정렬)
위의 string배열, number배열, string+number(string)배열을 sort함수를 이용해 정렬을 해보니결과가 예상한 대로 나오지 않는다. 그 이유는 sort 함수가 문자열 비교이기 때문이다.숫자를 정렬 하기 위해선 위와 같은 방법으로 정렬이 가능하다.
22.JS 객체를 value로 정렬
23.JS(in React) input 가격표시 (3자리 마다 콤마)
!codesandboxadmiring-nova-93by2q?fontsize=14&hidenavigation=1&theme=dark