JavaScript

왜 자바스크립트인가?자바스크립트는 전 세계 컴퓨터의 99.98% 에서 사용하고 있다.때문에 자바스크립트는 지속가능한 프로그래밍 언어이다.(자바스크립트를 패지할 일이 없기 때문에 지속적으로 커리어를 쌓기 좋다)하지만 자바스크립트가 무결성의 완벽한 프로그래밍 언어는 아니다

Array데이터를 리스트 화 시킨다.배열에서 인덱스로 해당 인덱스의 값을 가져올 수 있다.배열에 새로운 값을 추가할땐 .push() 메서드를 이용한다.\--추가적인 메서드 업데이트 하겠음.--

객체를 생성하는 방법:변수 선언 후 {}(중괄호) 안에 키:값 형식으로 작성한다.프로퍼티를 작성한 후에는 쉼표(,)로 구분짓는다.이를 참조하기 위해 변수명.키(player.name) 형식으로 입력한다.또는 변수명"키" 형식으로 입력한다.player.fat = true;

addResult에 할당되는 값은 calculation 객체의 메서드인 add 함수의 인자로 2와 3을 받아 2 + 3 의 값을 리턴한다.(5)

isNaN(value)isNaN() 함수는 어떤 값이 NaN인지 판별합니다. isNaN 함수는 몇몇 혼란스러운 케이스을 가지고 있으므로, ECMAScript 2015에서 추가한 Number.isNaN()으로 바꾸는 편이 좋을 수도 있습니다.

1. getElementById 지정된 문자열과 일치하는 id의 요소를 나타내는 개체를 반환 쉽게 말해 HTML에서 id를 통해 element를 찾음 > 2. getElementByClassName 지정된 문자열과 일치하는 class에 해당하는 요소를 배열로 반환

addEventListener - addEventListener는 두개의 인자를 받는 함수이다. - 첫번째 인자에는 감지할 이벤트를 전달한다. - 두번째 인자에는 실행할 함수를 전달한다

결과:addEventListener의 첫번째 인자로 사용한 event에 대해click사용자의 클릭을 감지하여 두번째 인자인 함수를 실행한다.위 코드에서는 클릭하여 HTML 요소의 스타일인 색상을 변경.mouseenter사용자가 HTML 요소에 마우스가 들어갔을때 함수를

CSS 코드를 보면 .active 클래스의 색상을 지정해놨다, 하지만 어떤 HTML의 요소도 현재 active라는 클래스를 가진 요소가 없고 이를 JavaScript를 이용하여 지정해주면 색상은 tomato로 변경되게 만들려고 한다.handleClick 함수안에 h1의

이미 h1 태그에 class가 지정되어있다CSS에 두 클래스에 따른 스타일을 지정했다.sexy-font는 이미 지정된 클래스와 스타일이다.때문에 클릭하게되면 h1의 클래스는 active로 바뀌게되고 이전에 가지고 있던 스타일은 잊게된다.조건문을 보면 classList.

required는 필수 입력 값이라는 뜻이다.input에 아무것도 입력하지 않으면 이 입력란을 작성해달라는 메시지가 뜬다.maxlength는 입력값의 최대길이.input의 유효성 검사를 작동시키기 위해 form 안에 input이 위치해야함.form 안에 Input을 위

a태그가 HTML에 추가 되었다.a태그는 click 이벤트를 감지한다.a태그가 클릭되면 alert을 띄우고 콘솔에 event 객체의 정보를 표시한다.alert창이 사라지면 해당 링크로 이동한다.결과:이전 포스팅에서는 submitEvent라고 출력되었다.위 코드에서는 P

함수가 실행되면 기본동작을 막는다. (e.preventDefault)username은 loginInput에 사용자가 입력한 value를 담는다.loginForm의 class를 추가한다 (HIDDEN_CLASSNAME)greeting은 h1 태그를 가리킨다.greetin

경로: 브라우저 > 개발자도구 > 어플리케이션 > 로컬 스토리지예시:clear, removeItem은 로컬스트리지 값을 지울때 사용한다.로컬스토리지(setItem을 사용하여 키와 값을 넣어준 모습):HTML에서 인풋란에 값을 입력하고 제출했을때 로컬스토리지의 결과:코드

h2 태그로 default가 00:00 인 텍스트를 생성했다.interval이란? 정해진 시간마다 실행되게 하는것ex).매 2초마다 외부API에서 기능을 가져옴setInterval은 두개의 인자를 받음첫번째는 실행할 함수, 두번째는 간격(시간)시간은 ms단위로 (1/1

const date = new Date()를 이용해 date에 JS에서 제공하는 Date 객체를 사용할 수 있다(내 생각)코드를 보면 콘솔에 템플릿 리터럴을 이용해 date 객체의 시간, 분, 초를 값으로 하는 함수들을 출력한다.getTime() 함수를 호출하는것은 웹

지난 시간에 JS로 시계를 구현했는데 표시되는 시간이 19:23:9 이런식으로 두자리 숫자가 아닐때에는 그대로 한자리만 출력하게 했다. 한자리 숫자를 표시할때는 앞에 0을 붙이고 싶다padStart라는 함수를 JS에서 제공하고 있다.문자열 1에 padStart 함수의

먼저 HTML에서 명언과 작가 텍스트를 랜덤으로 출력할 span 태그를 가져온다.showQuotes.innerText = QuotesMath.round(Math.random() \* 4).quotesMath.ceil(1.1) // 2Math.floor(1.9) //

새로고침을 했을때 무작위로 배경사진을 보여주고 싶다. 이런 HTML에 img 태그를 추가하려면 어떻게 해야할까? 먼저 이미지 이름이 담긴 배열을 만들어준다. 이후에 이전 포스팅에서 사용했던 방식과 마찬가지로 0~1사이의 숫자를 random 함수로 가져와 소수점 뒷

querySelector를 이용해 html의 요소들을 지정해준다.submit의 기본동작을 막는다.newToDo 변수에 입력된 값을 복사, 저장한다.입력된 값을 빈 문자열로 변환한다.handleToDoForm 마지막 구문은 paintToDo 함수를 호출하고 인자로 new

5번째 줄에 toDos라는 빈 배열을 선언해준다.handleTodoSubmit 함수를 보면 복사한 newToDo 값을 빈 배열에 push 함수를 이용하여 배열에 추가해준다.이후 saveTodos 함수를 호출한다.saveTodos 함수안에 로컬스트리지에 todos 라는

마지막 if문을 보면 forEach의 인자로 paintToDo 함수를 넣어준 모습이렇게 되면 parseToDo는 배열로 변환된 savedToDos를 갖게 되고이 배열이 가진 아이템 숫자만큼 paintToDo를 반복한다.이러한 로직은 if문 안에서 savedToDos가

Date 모듈의 now 메서드로 밀리초를 주는 함수이다.이 함수를 이용하여 toDos의 빈 배열을이와같이 배열안에 각각의 인덱스에 객체를 넣어 고유한 id를 주고 싶다.때문에 사용자 입력 값을 등록하는 곳을 수정한다nowToDoObj 객체를 생성하여 키로 text와 i

배열에서 지우고 싶은 아이템을 제외한다.그러나!!! 이전 배열은 여전히 남겨놓는다.때문에 지우고 싶은 아이템을 제외하고 새 배열을 만든다.위 콘솔을 보면 sexyFilter 함수는 반드시 true를 리턴한다.숫자 1부터 5까지 배열에 넣어주고 filter 함수에 인자로

Geolocation.getCurrentPosition() 메서드는 장치의 현재 위치를 가져옵니다.출처: mozilla첫번째 매개변수로 위치정보를 성공적으로 가져올때 실행할 함수두번째 매개변수로 위치정보를 가져오지 못했을때 실행할 함수두개의 함수를 정의해 준다alert

객체 기초에 대하여

화살표 함수로 메서드를 만들면 this는 전역객체를 호출한다전역객체는 브라우저에선 window, node.js에선 global가능하면 메서드에는 함수 선언문을 사용할 것함수 표현식은 this 사용 못함!

생성자 함수는 객체를 찍어내는 틀매개변수로 받는 값을 객체의 값 프로퍼티로 할당붕어빵 틀이라고 생각하면됨생성자 함수의 첫 글자는 대문자로 작성this의 프로퍼티로 할당 해주어야함 호출시 new 연산자를 붙여 호출!new 함수명()생성자 함수라고 특별한게 없고 어떤 함수

변수의 생성 과정1\. 선언 단계2\. 초기화 단계3\. 할당 단계var는 선언하기 전에 사용할 수 있다.위 코드는 다음과 같이 동작함var로 선언한 변수는 코드가 실제로 이동하진 않지만 최상위로 끌어 올려진것 처럼 동작함 => hosting(호이스팅)undefined

객체의 프로퍼티키는 문자형위 예제에서 객체의 프로퍼티 키는 숫자와 불린형하지만 콘솔로 찍어보면 모두 문자형으로 반환된다맨 아래 두 줄 처럼 문자형으로 접근해도 올바른 값을 반환한다객체의 키로 문자형 외에 사용 가능한 자료형이 심볼(Symbol)심볼은 유일한 식별자를 만

변수를 대괄호로 묶어서 객체의 키 프로퍼티로 넣으면 변수 a에 할당된 문자열이 값 프로퍼티에 할당됨위 예시 처럼 연산자 사용도 가능키 포인트는 대괄호로 묶어서 사용하는 것어떤 값이 키 프로퍼티가 될지 모를때 유용하다Object.assign()Object.keys()Ob

소수점 자리수를 인수로 받는다.전달하는 인수가 0이면 정수만 표현된다.만약 인수가 표현하는 숫자를 넘어가면 0으로 채워준다💡 주의할점은 숫자형이 아닌 문자형으로 반환 하기 때문에 숫자로 형 변환을 해줘야 한다.NaN은 자기자신과 비교연산자로 비교시 false를 반환한

따옴표와 다르게 백틱은 개행(줄 바꿈) 가능.따옴표는 /n로 개행 해줘야함 백틱은 그럴 필요 없음.문자열 안에 ${} (달러, 중괄호)로 변수 사용 가능.같은 방법으로 연산자 사용 가능.배열 처럼 인덱스로 문자열에 접근 가능하지만 변경은 안됨.모든 문자를 대문자 또는

📌for in문 📌 for of 문 📌 arr.forEach(fn) : 배열 반복 요소와 인덱스를 둘다 참조 하고자 할 때(?) 사용 📌 arr.indexOf / arr.lastIndexOf 문자열의 indexOf와 동일함. 발견하면 해당 요소가 있는

📌 Array 기초 push(): 배열 맨 뒤 삽입 pop(): 배열 맨 뒤 삭제 unshift(): 배열 맨 앞 삽입 shift(): 배열 맨 앞 삭제 📌arr.splice(n, m, x): 특정 요소 지움, x는 지운 요소 자리에 값 추가 n번째 요소부터 m개