차곡차곡 차곡차곡

Runtime 런타임이란 어떤 프로그래밍 언어가 동작할 수 있는 프로그램이라고 할 수 있습니다. 자바스크립트를 이용해서 코드를 만들고 실행되는 곳이 바로 런타임이고, 자바 스크립트 런타임은 웹 브라우저입니다. 이전에는 자바스크립트 런타임이 브라우저 밖에 없었지만 이제 Node.js라는 새로운 자바스크립트 런타임이 나왔습니다. 이로인해 자바스크립트를 이용해서 웹페이지 뿐만 아니라 서버와 같은 다른 프로그램도 만들 수 있습니다. 자바스크립트 코드를 브라우저에서 실행시킬 수도 있고, Node.js에서 실행시킬 수도 있습니다. 자바스크립트 코드를 HTML script 태그 안에 작성한다면 브라우저에서 동작하고, 터미널에서 node 명령어를 입력하면 Node.js 환경에서 실행됩니다. //node $ node r..

백슬래시는 escape 기능을 가지고 있습니다. escaping sequence는 기존 의미를 탈출한 특수한 기능을 위해 사용됩니다. 코드를 작성해가며 기존에 정해진 약속에 의해 표현이 곤란한 문자들을 표현한다던지, 특정 기능을 제공할 수 있습니다. 만약에 I'll be a "Rockstar" 이 문자열을 출력하려 한다면 console.log("I'll be a "Rockstar"") //Uncaught SyntaxError console.log('I'll be a "Rockstar"') '//Uncaught SyntaxError 컴퓨터는 문자열을 묶은 따옴표와 같은 따옴표가 문자열 안에 있다면 문자열이 끝났다고 여깁니다. 이런 표현적 한계에서 벗어나기 위해서 백슬래시(\)의 escape기능을 사용합니다..

배열 또는 객체를 출력합니다. Array function returnArr(){ return ['Hello', 'world!'] } let words = returnArr()// ['Hello', 'world!'] console.log(words[0] + ' ' + words[1]) // Hello world! Object function returnObj(){ let obj = {first: Steve, last: Jobs} return obj } let name = {} name = returnObj()// {first: Steve, last: Jobs} console.log(name.first + ' ' + name.last) // Steve Jobs

throw문으로 함수를 정지시키고 에러를 출력합니다 throw new SyntaxError function sayYes(answer){ if(answer === 'yes'){ console.log('great!') } throw new SyntaxError } sayYes('yes')// great! sayYes('no')// Uncaught SyntaxError

this this 키워드는 어떠한 객체를 가르킵니다. 객체를 가르키는 기준을 무엇일까요? 5 Patterns of Binding 'this' Global scope Function Invocation Method Invocation Construction mode [call, apply, bind] Global scope: window function 호출: window //Global & function invocation var name = 'Global Variable';// === window.name console.log(this.name); function foo() { console.log(this.name);// this === window } foo(); function outer() {..

자바 스크립트의 메서드를 직접 프로그래밍하고, 만든 메서드를 사용하여 다른 메서드를 만드는 중요한 경험을 하게 되었습니다.

Rest parameter 나머지 매개변수는 정해지지 않은 수(an indefinite number, 부정수)를 배열로 나타냅니다. function restFuc(a, b, ...theArgs) { // ... } 함수의 마지막 파라미터 앞에 ... 을 붙여서 모든 나머지 인수를 배열로 대체합니다. 마지막 파라미터만 "Rest 파라미터"가 될 수 있습니다. function restFuc(a, b, ...theArgs) { console.log("one", a) console.log("two", b) console.log("rest", theArgs) } restFnc(1, 2, 3, 4, 5) //console //one, 1 //two, 2 //rest, [3, 4, 5] rest 파라미터는 Array..

새로운 단계가 시작되며 HTML과 CSS를 배우기 시작했습니다. 와이어 프레임을 짜고 HTML로 뼈대를 세운뒤에 CSS로 옷을 입혀 주었습니다. 특히 레이아웃을 설정하는 것에 있어서 어려움을 겪었습니다. 그래서 position을 중점적으로 연습해보고 다양한 CSS기능들을 찾아보려 합니다.

문서 객체 모델(DOM)이란? DOM은 HTML 문서의 프로그래밍 interface입니다. 문서의 구조화된 표현을 제공하며 또한, 프로그래밍 언어가 DOM 구조에 접근하는 방법을 제공하고 그들이 문서구조, 스타일, 내용 들을 변경할 수 있게 돕습니다. DOM은 구조화된 nodes와 property와 method를 가지고 있는 object로 문서를 표현합니다. 이들은 웹 페이지를 스크립트 또는 프로그래밍 언어들에서 사용될 수 있게 연결 시켜주는 역할을 담당합니다. HTML 문서의 구조와 관계가 객체(Object)로 표현됩니다. HTML 하나의 엘리먼트 자식 엘리먼트입니다. 자식 엘리먼트입니다. JavaScript { tagName: 'DIV', id: 'example', classList: ['highli..

기본적으로 요소는 왼쪽 상단의 좌표가 (0, 0)이 되고, 픽셀 단위나 퍼센트 단위 등을 사용하여 위에서 아래로, 왼쪽에서 오른쪽으로 확장합니다. Box Mobel 크기의 속성은 외부여백(margin), 경계선(border), 내부여백(padding)으로 나뉩니다. box-sizing 기준에 따라서 크기가 다를 수 있기에 box-sizing으로 기준을 정해주어야 합니다. content-box (컨텐츠 기준) / border-box (경계선 기준) positioning & layout static: 기본값 relative: 기본값 + 상대적인 위치 fixed: 브라우저 화면의 좌상단을 기준으로 절대적인 위치 absolute: 부모 중 기준점이 있는 경우, 그 기준으로 절대적인 위치 sticky: 기본적으로..