javascript

[JavaScript]ES5와 ES6의 차이(6) - Destructuring Assignment

ES5와 ES6의 차이(6) - Destructuring Assignment Destructuring Assignment(디스트럭처링 할당) Destructuring이란 비구조화, 파괴를 뜻하는 단어이며 객체나 배열에 사용해서 개별 변수에 할당하는 것임! 오른쪽에 존재하는 자료구조를 파괴하여 왼쪽에 있는 변수들에 각각 할당함!!! 그래서 디스트럭처링인듯??? 배열은 순서를 중요하게 여기고, 객체는 키값을 중요하게 여김(순서바뀌어도 된다는 뜻)

[JavaScript]ES5와 ES6의 차이(5) - Concise Method, Spread

ES5와 ES6의 차이(5) - Concise Method, Spread Concise Method 함수 선언을 더 간편하게! Spread 객체 또는 배열의 복사, 객체에 속성 추가, 배열에 요소 추가를 아주 편하게!!

[JavaScript]ES5와 ES6의 차이(1) - 변수와 함수

ES5와 ES6의 차이(1) 변수 ES5 ES6 let과 const의 등장! 함수 ES5 ES6 arrow function의 등장

[JavaScript]var, let, const 차이와 호이스팅(hoisting)

var 원래 자바스크립트가 처음 나왔을 때는 이 var만 존재해서 변수를 선언할 때 var만 사용가능했다고 한다. 그러다가 ES6 이후로 let과 const가 나오면서 변수 선언할 때의 다양성?이 더 늘었다고 보면 된다! var의 특징으로는 중복 선언이 가능하고, 전역 스코프에서 사용이 가능하다는 점이 있다. // var: 함수 외부 선언: 전역 변수 var no1 = 10; if(true) { var no1 = 20; console.log('no1=', no1); // 1. 20 } console.log('no1=', no1); // 2. 20 이 코드처럼 if문 안에서 no1을 재선언 해줬는데 아무 문제없이 선언이 되었다. 또, if문 밖에서, 안에서 선언한 변수를 어디서든 사용하고 있다. 그리고 평..

[JavaScript]JavaScript 기본 문법 (3)

JavaScript의 기본 문법 객체 객체는 이름과 값으로 구성된 프로퍼티들(properties)의 집합 키와 값으로 구성된 프로퍼티들의 집합 전역 객체를 제외한 자바스크립트 객체는 프로퍼티를 동적으로 추가하거나 삭제 가능 자바스크립트의 함수는 일급 객체이므로 값으로 사용할 수 있다. 따라서 프로퍼티의 값으로 함수를 사용가능 (함수의 인자를 함수로 가능???) -> 콜백(call back) 함수와 연결!!! 배열은 순서대로 정보를 저장하는 반면에, 객체는 순서 없이 정보를 저장할 수 있다고 보면 됨 객체 계층 구조 Window Document Form Text Password Checkbox(다중 선택) Radio Submit Reset Button ... Location History ... 내장 객체..

[JavaScript]JavaScript 기본 문법 (2)

JavaScript의 기본 문법 배열 "["로 시작해서 "]"로 끝남 여러 개의 값을 적을 수 있음 배열 안에 값이 몇 개인지 → array.length 배열의 끝에 값을 추가 → array.push('abc') 반복문 loop(루프)라고도 함 배열과 반복문 예제 모든 태그의 폰트 색깔을 'powderblue'로 변경 var aList = document.querySelectorAll('a'); var i = 0; while(i 인자값의 개수가 다르더라도 호출이 됨!!! 함수 호출 방법 함수명(); 함수명(params); var 변수명 = 함수명(); 내장 함수 Window 객체 alert(arg): 경고창(modal 창) var result = confirm(arg): 확인/취소 숫자 여부: isNaN..

[JavaScript]JavaScript 기본 문법 (1)

이번 글은 유튜버 생활코딩 채널이랑 내가 배우고 느낀 점들을 짬뽕해놨음 https://www.youtube.com/watch?v=dPRtcRwKo-Y&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf 생활코딩 WEB2 JavaScript 재생목록 JavaScript란 무엇일까 에 그냥 1+1이라 적으면 "1+1"이 출력 되지만, 아래의 코드는 "2"가 출력됨 버튼을 만들고 버튼에 "Hi"를 쓰고 버튼을 클릭하면 "hi" 알럿이 뜸 텍스트 인풋을 만들고 텍스트 인풋의 상태가 바뀌면 "changed" 알럿이 뜸 텍스트 인풋 안에서 키가 눌리면 "key down!" 알럿이 뜸 이처럼 on으로 시작하는 속성들 → event라고 함 💡 f12 누르고 나오는 콘솔창에서 실행하는 js코드는 해당..

[JavaScript]JavaScript란???

자바스크립트란??? 으으음 기본적으로 앞서 글을 썼던 HTML과 CSS는 정적인 언어임. 정적인 언어라는 것은 얘네로는 브라우저 상에서 우리 눈에 보이게 화면을 그려주는 역할이라는 것임. HTML이 뼈대, 컨텐츠의 구조 등을 담당했다면, CSS는 꾸미기, 컨텐츠의 표현을 담당했다고 볼 수 있음. 그렇게 HTML이랑 CSS를 이용해서 화면을 그렸다면 그린 화면이 좀 움직이고(예를 들면 경고창이 뜬다거나, 버튼을 누르거나, 키보드로 입력을 하거나), 동적으로 만들고 싶을 때는 얘네만으로는 불가능함. 그럴 때 필요한게 이 JavaScript라는 애임!!! JavaScript는 HTMl과 CSS로 만들어진 웹페이지를 동적으로 변경해줄 수 있는 언어임! 얘는 컨텐츠의 기능을 담당한다고 보면 됨 JavaScript..