자바스크립트120 [Javascript] 객체 확장 표현식 ES2015가 도입되며 객체의 표현에서 간결한 문법들을 많이 지원하게 되었습니다. 1.키 이름과 값이 같은 경우 기존에 키 이름과 키 값이 동일한 경우에도 {키 이름: 키 값}으로 묶어서 표현했었습니다. let a = 1; let b = 1; let obj = { a: a, b: b }; 이런 경우에 ES2015에서는 다음과 같이 표현할 수 있게 되었습니다. let a = 1; let b = 1; let obj = { a, b }; 위의 경우처럼 키 값을 생략하게 되면 키의 이름을 통해 키 값을 지정하게 됩니다. 즉, 객체 변수 obj에 대입된 a와 b는 키의 이름이고, 이 이름을 통해 키 값 a=1 , b=1을 지정해 줍니다. 2. 계산된 키 값 넣기 계산된 키 값을 넣을 때 이전 버전에서는 키 값을 .. 2021. 5. 7. [Javascript] 템플릿 문자열 (ES2015) 앞으로 몇 포스트간에 걸쳐 ES2015에서 등장한 문법을 몇가지 소개하려고 합니다. 앞선 포스트들에서 이미 소개한 것도 있을 것이고, 소개하지 않은 것들도 있을 것 입니다. 왜 이 문법들을 다시 혹은 새롭게 소개하냐면, 자바스크립트 기초 이후 Node.js나 리액트와 같은 프레임워크 등에서 ES2015(ES6)의 문법들을 이용해서 계속 사용하고 있기 때문에 저도 정리의 필요성을 느끼고, 독자분들에게도 알고 넘어가면 좋겠다고 생각했기에 이렇게 포스트를 다시 빼서 작성하게 되었습니다. 템플릿 문자열의 존재는 기존 자바스크립트에서는 문자열의 표현이 복잡했기 때문입니다. let str = '막대사탕'; let price = 1000; let msg = str + '의 가격은 ' + price + '원 입니다.'.. 2021. 5. 4. [Javascript] 브라우저 객체 모델 BOM 브라우저 객체란, 브라우저에 내장되어있는 브라우저 조작을 위한 객체입니다. 더욱 간단히 설명하자면 브라우저에서 뒤로가기나 새로고침, 새 창 열기 등과 같은 조작을 위해 제공하는 객체입니다. 0. 계층 구조 브라우저 객체는 window라는 최상위 객체 아래에 자식 객체로 존재하고 있습니다. 물론 window가 최상위 객체이므로 여하에 수 많은 자식 객체들을 데리고 있지만 여기서는 간단하게 표시했습니다. 그리고 채용률이 높은 네 가지 정도의 객체들만 간단히 소개해보려고 합니다. 여기서 document 객체는 지난 시간까지 다룬 문서 객체입니다. 1. window 객체 window 객체는 위에서 언급했듯이 모든 객체의 최상위 객체 입니다. 다른 객체들과는 달리 메소드 앞에 이름을 따로 명시하지 않아도 되는 객.. 2021. 4. 30. [Javacript] 스타일 시트 접근 지난번 포스트들까지 해서 자바스크립트에서 html문서에 접근했습니다. 보통 구조를 구성하는 html위에 스타일 시트를 덧씌워서 우리 눈에 보기 좋도록 디자인을 하게됩니다. 그래서 우리는 이번 포스트에서 스타일 시트에 접근하여 디자인을 바꾸는 방법들을 살펴보려고 합니다. 1. style 첫 번째 방법은 style 프로퍼티를 이용하는 방법입니다. style프로퍼티는 스타일을 인라인 형식으로 넣어줍니다. 인라인 형식은 다음과 같이 요소 태그 내부에 스타일을 추가하는 방법입니다. 초록색 그리고 style 프로퍼티의 이용법은 다음과 같습니다. 요소.style.속성 = "속성 값" 요소에 style 프로퍼티를 넣고 속성과 속성값을 집어넣으면 완성되는 형태를 가졌습니다. 만약 속성 값이 없는(의 readonly같은 .. 2021. 3. 31. [Javascript] 노드 변경과 삭제 이번에는 노드를 변경할건데, 특정 노드를 지정하고 그 노드의 자식노드를 교체하고 삭제하는 방법입니다. 1. 노드 교체 - replaceChild 이름에서 느껴지듯이 자식 노드를 교체해주는 메소드입니다. 요소.replaceChild(변경해줄 노드, 변경하는 노드);//(after, before) 사용법은 여태 나온 메소드들과 유사합니다. 첫번째 인자로 교체해줄 노드를 적고, 두번째 인자로 교체시킬 자식 노드를 선택합니다. 이때 주의점은 반드시 변경하는 노드는 지정된 노드의 자식 노드여야만 합니다. 2. 노드 삭제 - removeChild 이번에는 노드를 삭제하는 메소드입니다. 이때도 마찬가지로 지정한 노드의 자식 노드만 삭제할 수 있습니다. 요소.removeChild(삭제할 노드); 참고로 removeCh.. 2021. 3. 30. [Javascript] 노드 추가하기 이전 포스트들에서 계속해서 자바스크립트에서 html의 요소에 접근하는 방법들을 다뤘었습니다. 이번에는 자바스크립트 파일에서 요소들을 추가하는 방법을 다뤄볼려고 합니다. 1. 노드 생성 - create~ 메소드 노드를 생성하는 create~ 메소드 입니다. 이 메소드는 추가하려는 노드에 따라 create뒤에 붙는 접미사가 달라집니다. 주의해야하는 점은 단순히 노드를 추가하는 기능만 하기 때문에 따로 명시적으로 추가하는 과정을 거쳐야 합니다. 우선 create~메소드들은 다음과 같습니다. create~메소드 메소드가 생성하는 노드 createElement(요소) 요소 createAttribute(속성) 속성 createTextNode(텍스트) 텍스트 createComment(텍스트) 주석 이 외에도 crea.. 2021. 3. 29. 이전 1 ··· 8 9 10 11 12 13 14 ··· 20 다음 300x250
