인생 1회차 (First-Life) Ing

Math.random() : 랜덤한 숫자 Math.ceil() : 올림 Math.round() : 반올림 Math:floor() : 내림 랜덤하게 노래 / 가수 제목 표시하기 ( Quotes 대신) const quotes = [ { title : "꽃길만 걷자", singer : "버블 사운드" }, { title : "있잖아", singer : "데이식스" }, { title : "너를 생각해", singer : "주시크" }, { title : "savage", singer : "aespa" }, { title : "My Universe", singer : "방탄소년단" }, { title : "나의 첫사랑", singer : "다비치" }, { title : "Only You", singer : "..

setIntervals : '매 n초/분…마다' 무언가를 실행하고 싶을 때 사용 setTimeout : 일정 시간 후에 실행하게 함 new Date : 오늘 날짜 (getDate/Day/FullYear/Hours/Minutes/Second) padStart() : string에 쓰는 함수로 원하는 글자수를 만들 때 (앞부분에 string을 추가하여) 사용 ↔ padEnd() "1".padStart(2,"0") // padStart(원하는글자수, "추가할 글자") // 결과 "01" 시계만들기 const clock = document.querySelector("#clock") function getClock (){ const date = new Date(); const hours = String(date...

username 입력받고 저장하고 불러오기 const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; const USERNAME_KEY = "username"; function onLoginSubmit (event){ event.preventDefault(); // 브라우저 기본동작 막기 loginForm.classList.add(HIDDEN_CLASSNAME) // form 다시 숨겨주기 c..

DOM : Document Object Model 자바스크립트로 HTML를 object 형태로 제어(읽고 수정하고 추가 등)할 수 있음! const hello = document.getElementById("Hi"); const hello = document.getElementByClassName("Hi"); querySelector - element를 CSS 방식으로 가져올 수 있음, 단 하나의 element를 가져옴 (여러개의 경우 제일 첫번째 것만 가져옴) querySelectorAll - 조건에 부합하는 모든 element를 가져옴 const title = document.qeurySelector(".hello h1"); addEventListener const h1 = document.query..

변수 : 값을 저장하거나 유지 const : 변하지 않는 상수, 재할당 불가 // const 의 재할당이란? // 전체를 하나의 값으로 업데이트 하려고 할 때는 불가. 배열추가, 오브젝트 property 추가 등은 가능. const player = ["One"] player.push("Two"); // 가능 player = false // 불가능​ let : 값 변경 가능, 재할당 가능(재할당 할 때 let을 안붙이고 변수 이름만 쓰면 됨) var : 실수할 가능성이 크기 때문에 쓰지 말 것 → const 를 기본적으로 사용하고, 업데이트 하고 싶은 변수에만 let을 사용 → 변수의 사용만 보고도 의도를 파악할 수 있기 때문에 var 는 비추천 null & undefined null : 비어있음, 자연적..

실행 컨텍스트 개념 함수를 호출할 때 해당 함수의 호출 정보가 차곡차곡 쌓여있는 스택을 콜 스택call stack 이라 한다. 실행 컨텍스트는 콜 스택에 들어가는 실행 정보 하나와 비슷하다. 실행 컨텍스트는 "실행 가능한 코드를 형상화하고 구분하는 추상적인 개념" 으로 콜스택과 연관하여 정의하면 "실행 가능한 자바스크립트 코드 블록이 실행되는 환경" 이라고 할 수 있고, 이 컨텍스트 안에 실행에 필요한 여러가지 정보를 담고 있다. 여기서 말하는 실행 가능한 코드 블록은 대부분의 경우 함수가 된다. “현재 실행되는 컨텍스트에서 이 컨텍스트와 관련 없는 실행 코드가 실행되면 새로운 컨텍스트가 생성되어 스택에 들어가고 제어권이 그 컨텍스트로 이동한다. ” 실행 컨텍스트 생성 과정 활성 객체 생성 > argum..

프로토타입의 두가지 의미 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 참조 링크 형태의 숨겨진 프로퍼티가 있다. 이러한 링크를 암묵적 프로토타입 링크implicit prototype link 라고 부르며 이러한 링크는 모든 객체의 [[Prototype]] 프로퍼티에 저장된다. 주의해야 할 점은 prototype 프로퍼티와 객체의 숨은 프로퍼티인 [[Prototype]] 링크를 구분해야 한다는 점이다. 자바스크립트에서 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 프로토타입 객체를 자신의 부모 객체로 설정하는 [[Prototype]] 링크로 연결한다. 객체 리터럴 방식으로 생성된 객체의 프로토타입 체이닝 자바스크립트에서 객체는 자기 자신의 프로퍼티뿐만..

함수호출 함수를 호출하여 코드를 실행하는 것 arguments 객체 C와 같은 엄격한 언어와 달리 자바스크립트에서는 함수를 호출할 때 함수 형식에 맞춰 인자를 넘기지 않더라도 에러가 발생하지 않는다. 정의된 함수의 인자보다 적게 함수를 호출했을 경우 : 넘겨지지 않은 인자에게 undefined 값이 할당 정의된 인자 개수보다 많게 함수를 호출 했을 경우 : 에러가 발생하지 않고, 초과된 인수는 무시 이러한 특성 때문에 함수 코드를 작성할 때, 런타임 시에 호출된 인자의 개수를 확인하고 이에 따라 동작을 다르게 해줘야할 경우가 있는데, 이를 가능케 하는 것이 바로 arguments 객체이다. arguments 객체는 매개변수 개수가 정확하게 정해지지 않은 함수를 구현하거나, 전달된 인자의 개수에 따라 서로..

함수 객체 자바스크립트에서는 함수도 객체다 함수의 기본 기능인 코드 실행뿐만 아니라, 함수 자체가 일반 객체처럼 프로퍼티들을 가질 수 있다는 것이다. 자바스크립트에서 함수는 값으로 취급된다 자바스크립트에서는 함수도 일반 객체처럼 취급될 수 있다. 때문에 자바스크립트 함수는 다음과 같은 동작이 가능하다. 리터럴에 의해 생성 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능 함수의 인자로 전달 가능 함수의 리턴값으로 리턴 가능 동적으로 프로퍼티를 생성 및 할당 가능 이와 같은 특징이 있으므로 자바스크립에서는 함수를 일급First Class 객체라고 부른다. 자바스크립트 함수의 기능은 입력한 값을 받아 처리한 다음 그 결과를 반환하는 구조다. 하지만 이러한 기본적인 기능 외에도 함수가 일급 객체이며 이는 ..

자바스크립트에서의 함수를 생성하는 방법은 3가지가 있다 함수 선언문 function statement 함수 표현식 function expression Function() 생성자 함수 함수 리터럴 자바스크립트에서는 함수도 일반 객체처럼 값으로 취급된다. 때문에 객체 리터럴 방식으로 일반 객체를 생성할 수 있는 것처럼 자바스크립트에서는 함수 리터럴을 이용해 함수를 생성할 수 있다. 함수 리터럴은 크게 네 부분으로 구성된다. function add (x, y) { return x + y; } ① function 키워드 : 자바스크립트 함수 리터럴은 function 키워드로 시작한다. ② 함수명 : 함수명은 함수 몸체 내부코드에서 자신을 재귀적으로 호출하거나 자바스크립트 디버거가 해당함수를 구분하는 식별자로 사..