언어

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

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

[JavaScript]DOM의 사용법

문서 객체 생성하는 방법 var header = document.createElement('h2'); // 태그 생성 var textNode = document.createTextNode('Hello'); // 'Hello'라는 문자열 생성 header.appendChild(textNode); // 태그에 textNode를 append document.body.appendChild(header); // 문서(document)의 에 문자열이 들어간 태그를 append 주석으로 달아놓은 것을 보면 알 수 있듯이 이렇게 동적으로 문서객체를 생성할 수 있음!!! 문서 객체 lookup하는 방법 id 속성 var takeElement = document.getElementById("id명"); id가 'id명'인..

[JavaScript]DOM(Document Object Model)

DOM(Document Object Model)이란??? DOM이 무엇의 약자인가 보면 Document Object Model의 약자이다. 그대로 해석하면 '문서 객체 모델'이라는 뜻인데 이게 뭐냐고 그래서 ㅋㅋㅋㅋㅋㅋ 이 문서 객체라는 것은 등의 html 태그들을 JavaScript가 이용할 수 있는 객체(object)로 만든 것을 문서 객체라고 함! 그리고 DOM은 이 문서 객체를 해석하는 방식? 인식하는 방식??? 이라고 보면 된다고 함! 그니까 웹브라우저가 HTML을 인식하는 방식이라고 생각하면 됨! DOM으로 뭐하는건데 그래서? DOM은 이런 트리 형식의 자료구조를 가지고 있음 트리는 맨 위에 있는 애가 루트 노드(root node), 그 아래에 있는 애들이 차일드 노드(child node) 그..

[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..