웹 프론트엔드를 위한 자바스크립트 첫걸음

<span style='background-color: > 같지 않음 !! (😤아주 단호)프로그래밍 언어 측면에서 보면 비슷할 수 있음🖥 어떤 느낌이냐면, '프로그래밍 언어 하나 배우면 다른건 다 비슷비슷해' 이런 느낌?자바스크립트 생략하고 리액트(react)

변수란? 값을 저장하기 위한 이름을 가진 저장소 !

자바스크립트 자료형은 원시타입과 비원시타입으로 구분원시타입: 숫자형, Bigint형, 문자형, Boolean형, Null, Undefined, Symbol형비원시타입: 객체형(객체, 함수, 배열이 포함된 자료형)한 번에 하나의 값만 가지고 있는 것을 원시타입한 번에 여

\+(더하기), -(빼기), /(나누기), \*(곱하기)%(나눈 값의 나머지)num++(후위연산: 1을 더하기 전 값), ++num(전위연산: 1을 더한 후의 값)변수에 특정 값을 대입하는 역할"해당 변수에 특정 값을 넣겠다."!(NOT)을 이용해 false의 값을 t

만약 ~하면, ~해라.조건문이 성립하면 if문 안에 있는 코드를 실행조건문이 성립하지 않는다면 아무것도 실행되지 않음만약 ~하면, ~해라, 그렇지 않으면 -해라.조건문이 성립하면 if문 안에 있는 코드를 실행조건문이 성립하지 않으면 else문 안에 있는 코드를 실행여러

같은 동작을 할 때중복된 코드가 존재할 때이들을 하나로 묶어서 실행할 수 있게 하는 것 !코드를 깔끔하게 정리해주는 역할 !함수 내부에 실행돼야 하는 코드를 작성하고 바로 결과 값을 출력할 때 작성함수의 실행 결괏값을 이용해 또 다른 작업을 할 경우 return문을 작

변수 또는 함수를 생성할 때 갖게 되는 유효범위그래서 지난번에 살짝 다룬 지역변수, 전역변수 등등과 연관이 있음 !전역스코프: 어디서든 해당 변수에 접근 할 수 있는 범위지역스코프: 해당 지역에서만 접근이 가능하고, 지역을 벗어난 곳에서는 접근할 수 없는 범위함수 내부

아직 선언되지 않은 함수나 변수들을 스코프의 맨 위로 끌어올려서 사용하는 것처럼 보이게하는 작동 방식함수가 선언되기 전에 함수를 호출하더라도 함수는 오류없이 출력됨이는 gazero 호출문 보다 선언문이 먼저 작성되어 있는 코드로 받아들여지기 때문함수 선언문을 gazer

function 키워드 옆에 함수 이름을 적는 방식으로 함수 선언함수표현식에서 gazero는 변수에 해당하지만 함수를 값처럼 할당즉, 함수를 호출하는 것과 마찬가지로 "gazero();"로 호출함수 선언식은 호이스팅에 영향을 받음, 함수 표현식은 호이스팅에 영향을 받지

비 원시타입으로 분류되는 자바스크립트의 객체형 자료형 중 비원시타입 자료형한 번에 여러개의 데이터 값들을 저장 가능new 키워드를 통해 객체를 생성중괄호를 이용해 객체 생성객체의 중괄호 내부에 들어갈 데이터key와 value를 쌍으로 이루는 데이터여기에서 name은 k

순서가 있는 요소들의 집합여러개의 항목들이 모여 있는 리스트생성자를 이용해서 배열을 생성 !new 키워드를 활용생성자를 통해 생성한 배열 안에 gazeroArray1 안에는 1, 2, 3이 순서대로 들어가 있고, gazeroArray2안에는 3이 아닌 undefined

특정 작업을 반복적으로 수행할 때 사용for 문은 초기화식, 조건식, 증감식, 실행해야할 코드로 구성이러한 결과를 보여주려면 console.log를 다섯번 반복해야 하지만, for문을 사용하면 코드가 매우 간단해짐 !이런식으로 초기화식, 조건식, 증감식을 작성하면 순서

배열의 모든 요소에 접근하기 위한 방법으로 for 반복문이 아닌 forEach 내장함수를 사용할 수 있음map 메서드는 배열 안의 모든 원소를 변환할 때 사용for문에 해당하는 코드를 map을 이용하면 짧은 코드로 구현이 가능 !map은 내장함수는 전달한 콜백함수를 호

기본예시 ) colors라는 배열 함수를 만들어서 각각 함수의 인덱스 값을 바탕으로 요소값을 c1, c2, c3 변수에 요소값을 저장해주었음구조분해할당1 ) 대괄호를 이용해서 변수 선언구조분해할당2 ) colors 배열 변수를 별도로 선언해주지 않는 방법1\. 배열의

작성되는 객체들의 반복되는 프로퍼티를 spread를 사용해 간단하게 만들어 줄 수 있음특정 부분들을 하나의 배열이나 객체로 묶는 문법구조분해할당과 함께 사용됨위 코드에서 구조분해할당된 price와 color를 rest 문법을 사용해 나타낼수 있음즉, 구조분해 할당을 통

하나의 작업이 실행되는 동안 다른 작업을 동시에 수행하지 않는 방식하나의 작업이 종료될 때까지 다른 작업을 실행하지 못함앞선 작업이 끝나야 다음 작업을 할 수 있는 순차적인 방식동기적으로 작업을 처리한다면, 하나가 처리될 때까지 걸리는 시간을 기다려야 다음 작업을 순서

함수를 호출할 때, 1. 출력할 단어 2. 단어를 출력하는 함수 두 가지를 인수를 넘겨줌비동기 함수의 결괏값을 또 다른 비동기 함수에서 사용하기 위해, 이렇게 콜백함수 안에 콜백함수를 전달하는 방식으로 전달하게 되면?가독성이 매우 좋지 않은 코드가 되어 많은 오류를 발

위 코드는 delay 함수의 인수로는 2000을 넘겨 2초 동안 지연하게 해주고, then 메서드를 사용해, "대기" 라는 단어를 출력asyncasync를 붙이면, promise객체를 반환하는 비동기처리 함수가 됨return문의 값이 resolve의 결과값으로 전달됨a

컴퓨터나 컴퓨터 프로그램 사이의 연결1\. 웹브라우저에서 서버에게 원하는 데이터 요청2\. 서버는 데이터베이스에서 요청받은 데이터 탐색3\. 서버가 데이터베이스에서 찾은 데이터를 가져옴4\. 꺼내온 데이터를 서버가 웹브라우저에게 전달즉, "클라이언트와 서버의 통신은 클

\-위키백과웹사이트는 HTML, CSS, JS로 구성브라우저에게 웹 페이지의 요소들이 어떻게 구성되어 있는지를 알려주는 역할웹 페이지의 요소들을 꾸며주는 역할을 하는 sheet웹 요소들을 생성, 삭제 변형HTML로 작성된 요소들에 자바스크립트가 접근할 수 있도록 브라우

HTML을 자바스크립트가 이해할수 있게 객체로 변환DOM API를 제공DOM이 접근하고 조작할 수 있는 방법DOM API를 이용해 요소에 접근하기 위해 DOM Tree에서 확인 할 수 있듯이 상위요소들을 각각 거쳐서 접근하고자 하는 노드를 찾아야 함index.html특

생성만 되었을 뿐 아직 DOM Tree에 추가되지 않은 상태. 따라서, appendChild를 이용해 DOM Tree에 추가할 수 있음매개변수로 전달받은 노드를 특정 요소의 마지막 자식으로 추가하는 메서드먼저, today-info요소의 자식요소로 seasonElemen

특정날짜를 전달빈 값 전달: 오늘의 연도, 월. 일. 요일. 시간 출력현재 월, 일, 요일을 각각 변수에 담아서 출력한 결과 요일의 형태가 이상한 것을 확인할 수 있음 ! 또, 현재(6월 26일인데)날짜와도 다름 원인은 ?지구에서 1년은 총 12개월로 1월부터 12월까

vs code 설치하기폴더명: vscode-test해당 코드를 iterm(window는 cmd에서) 순서대로 입력하면 폴더를 생성하고, 해당 폴더를 vscode에서 바로 실행시킬 수 있음vscode를 실행시키고index.html과 index.js 파일을 생성html은

addEventLister의 mouseover를 사용하여 input에 마우스를 올리면 콘솔창에 input창 안에 value값이 출력됨

웹 브라우저에서 사용 가능한 저장소브라우저를 닫아도 저장한 데이터를 계속 유지할 수 있게 해줌로컬스토리지에 값을 저장할 시: setItem사용객체 혹은 배열 형태의 데이터를 저장하면: JSON.stringify를 사용해 JSON문자열로 변경값을 꺼내어 사용할 때: ge

완성된 프로젝트 ! 1. 스택 ) >### JavaScript 2. 주요기능 ) 2-1. 시간/날짜 기능 주의사항 현재시간을 가져오는 경우, "월" 은 기본 12개(1월~12월)로 하지만 0부터 시작해서 "0 ~ 11"로 데이터를 받아옴. 따라서 "+1"을 해줘