본문 바로가기

컴퓨터 사이언스138

[자바스크립트] String 객체 String 전역 객체는 문자열의 생성자이다. : String 전역 객체를 직접 사용하여 문자열을 생성할 수 있다는 말이다. 기본형 : String(문자열로_반환하고_싶은_값) ex. let a = String(1) => console.log(a) // "1" 문자열은 텍스트 형태로 표현될 수 있는 데이터를 보관하는데 유용하다. 문자열에서 가장 많이 사용되는 작업들은, ① 문자열의 길이를 확인하는 length 속성 ② 문자열을 생성하고 연결하는 +와 += 문자열 연산자 ③ 서브문자열(substring)이 있는지 확인하고, 있으면 위치를 확인해주는 indexOf() 메서드 ④ 서브문자열을 추출해내는 substring() 메서드 문자 접근 문자열에서 개개의 문자에 접근할 수 있는 방법 ① return 'ki.. 2022. 7. 20.
TypeScript 설치 및 사용 node.js 설치 ⊙ https://nodejs.org Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org as by 2022/07/20 v16.16.0 LTS v18.6.0 Current ⊙ node.js version manager 1. nvm(권장) https://github.com/coreybutler/nvm-windows for Windows https://github.com/nvm-sh/nvm for macOS 2. n https://github.com/tj/n browser설치 보통은 Chrome 사용(권장) TypeScript 컴파일러 설치 1. npm (권장) npm i ty.. 2022. 7. 20.
[자바스크립트] 문서 객체 모델 DOM에서 노드 추가 및 삭제하기 DOM에서 노드 추가 및 삭제하기 웹 문서에서 처음 화면에는 내용이 보이지 않다가 클릭 등의 이벤트가 발생하면 내용이 나타나는 경우가 있다. 이러한 동작은 CSS의 display 속성을 사용해 만들 수도 있지만, DOM 트리에 새로운 노드를 추가(텍스트나 속성 노드 포함)하는 방법도 있다. 노드 리스트 DOM에서 새로운 노드를 만들어 추가하거나 삭제하려면 노드 리스트(node list)를 사용해야 한다. DOM에 접근할 때 querySelectorAll() 메서드를 사용하면 노드를 한 번에 여러 개 가져올 수 있다. 이렇게 여러 개의 노드 정보를 저장한 것, 노드를 여러 개 저장한 데이터 형태를 노드 리스트라 한다. 노드 리스트는 배열과 비슷해서 인덱스 번호로 특정 위치의 노드에 접근할 수 있다. 텍스트.. 2022. 7. 20.
[자바스크립트] 문서 객체 모델 DOM, 이벤트 문서 객체 모델이란? DOM은 웹 문서를 하나의 객체로 정의한다. 웹 문서를 이루는 텍스트나 이미지, 표 등의 모든 요소도 각각 객체로 정의한다. 그래서, DOM은 웹 문서와 그 안의 모든 요소를 객체로 인식하고 처리하는 것을 말한다. 이러한 문서 객체 모델(DOM)의 구조를 DOM 트리로 나타낸다. DOM 트리 DOM은 웹 문서의 요소를 부모 요소와 자식 요소로 구분한다. DOM은 HTML 요소의 계층과 달리, 문서 안의 요소 뿐만 아니라 각 요소에 사용한 내용과 속성도 자식으로 나타낸다. ex. body의 자식인 h1의 요소 내용도 h1의 자식이 되지만, img 요소의 src이나 alt 속성도 각각의 자식이 된다. 부모와 자식 구조로 표시하면 마치 나무 형태가 되어 DOM 트리라고 한다. 이 DOM .. 2022. 7. 19.
SelfStudy 엘리코딩 자바스크립트 내부에 포함되어 있는 오브젝트들에 대한 레퍼런스 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference JavaScript reference - JavaScript | MDN This part of the JavaScript section on MDN serves as a repository of facts about the JavaScript language. Read more about this reference. developer.mozilla.org 2022. 7. 19.
[자바스크립트] 자바스크립트의 배경과 API, 공식 사이트 2004 년 AJAX : Asynchronous JavaScript and XML 비동기적으로 데이터를 서버에서 받아오고 처리할 수 있도록 도와주는 프로그램 2008년 구글에서 크롬이라는 JIT(just-in-time compilation) 엔진을 장착한 브라우저를 만들게 되었다. 자바스크립트를 실행하는 속도가 엄청나게 빠른 엔진 2015년 ECMA Script6 등장: 2009년 ECMA Script5로 표준화를 시작하고 그 뒤 현재까지 표준화된 자바스크립트의 큰 틀이 되고 있음. default parameter, class, arrow function이 이 때 정의되어 사용됨. ECMA Script5, 6이후로 자바스크립트가 브라우저에 구애받지 않고 잘 작동하게 되어 jQuery나 dojo, moot.. 2022. 7. 18.
[HTML] 김준태 강사 강의 복습 웹사이트에 들어간다고 하지만, 사실은 웹사이트에 우리가 주소로 접근(request, 요청)하는 순간에 해당 주소에 존재하는 HTML, CSS, JS 파일이 우리 컴퓨터에 순간적으로 다운로드(Response, 응답)되는 것일 뿐이다 ! 개발자 도구에서 네트워크를 통하여 주고받는 파일을 볼 수 있다. 결국 웹이라는 건, 어떤 주소에 접근하면, 어떤 파일을 건네줄 건지가 정의된 것이라고 생각하면 된다. HTML에서 Markup Language란 프로그래밍 랭귀지와 같이 특정한 논리를 가지고 작동하는 프로그램을 작성하기 위한 것이 아니라, 특정한 데이터를 표시하는 방법을 기술하는 언어를 말하는 것으로, 보여줄 데이터를 작성하는 방식을 정의한 언어일 뿐이다. CSS는 Cascading Style Sheet의 약자.. 2022. 7. 18.
MGS Day-14 증가, 감소 연산자 : 변수에 저장된 값을 1 증가 및 감소시키는 경우에 사용되는 연산자 연산자 연산자의 기능 ++i i의 값을 1 증가시킨 후, 증가된 값을 반환 i++ i의 값을 1 증가시킨 후, 증가되기 전 값을 반환 --i i의 값을 1 감소시킨 후, 감소된 값을 반환 i-- i의 값을 1 감소시킨 후, 감소되기 전 값을 반환 함수 선언식 : function 키워드로 단독으로 선언 함수 표현식 : 변수에 함수를 담음(할당), 익명 함수를 변수에 담아 호출할 수 있게 된다. 화살표 함수(Arrow function) : ES6에서 처음 등장한 새로운 함수 선언 방법 화살표 함수에는 없는 것 : 함수 이름, this, arguments 1. 빈 객체 user를 만든다. 2. user에 키가 name, .. 2022. 7. 15.
MGS Day-13 JS 클래스 JS에서의 기본값 this는 window인데(window를 가리키는데) use strict가 적용되면 undefined임 ! cf. ES2015 모듈에서는 strict 모드 자동 적용됨 객체 안의 this는 객체를 가리킴 ! 하지만, 이 객체의 this가 포함된 메소드를 변수에 대입해 확인해보면 이 때의 this는 window임을 확인할 수 있다. 즉, 꼭 객체 안에 있는 this라고 항상 객체를 가리키는 것은 아니란 말. => 결국, this는 함수가 호출될 때 정의된다 !!!! 쉽게 말해 함수 앞에 객체가 붙어있으면(객체.함수) this는 객체를 가리키고, 그 객체를 다른 변수에 담거나 하면 this는 그냥 window를 가리킴 + new가 붙는 생성자 함수일 때도, this가 windo.. 2022. 7. 15.

티스토리툴바