blog

정리 할 링크 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String String The String object is used to represent and manipulate a sequence of characters. developer.mozilla.org https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/valueOf Object.prototype.valueOf() valueOf() 메서드는 특정 객체의 원시 값을 반환합니다. developer.mozilla.org https://develope..

Project: A Pixel Art Editor The material from the previous chapters gives you all the elements you need to build a basic web application. In this chapter, we will do just that. Components We will structure the editor interface as a number of components, objects that are responsible for a piece of the DOM and that may contain other components inside them. 에디터 인터페이스는 여러 개의 컴포넌트로 이루어 지는데, 이 컴포넌트는 하..

Node.js Node.js, a program that allows you to apply your JavaScript skills outside of the browser. With it, you can build anything from small command line tools to HTTP servers that power dynamic websites. These chapters aim to teach you the main concepts that Node.js uses and to give you enough information to write useful programs for it. Background One of the more difficult problems with writi..

HTTP and Forms The protocol the browser might send something like this: GET /18_http.html HTTP/1.1 Host: eloquentjavascript.net User-Agent: Your browser's name Then the server responds, through that same connection. HTTP/1.1 200 OK Content-Length: 65585 Content-Type: text/html Last-Modified: Mon, 08 Jan 2018 10:29:45 GMT ... the rest of the document The browser takes the part of the response aft..

Drawing on Canvas Browsers give us several ways to display graphics. The simplest way is to use styles to position and color regular DOM elements. But we’d be using the DOM for something that it wasn’t originally designed for. There are two alternatives. The first is DOM-based but utilizes Scalable Vector Graphics (SVG), rather than HTML. Think of SVG as a document-markup dialect that focuses on..

Code HTML CSS .background { background: rgb(52, 166, 251); table-layout: fixed; border-spacing: 0; } .background td { padding: 0; } .lava { background: rgb(255, 100, 100); } .wall { background: white; } .actor { position: absolute; } .coin { background: rgb(241, 229, 89); } .player { background: rgb(64, 64, 64); } .lost .player { background: rgb(160, 64, 64); } .won .player { box-shadow: -4px -7..

Handling Events Some programs work with direct user input, such as mouse and keyboard actions. That kind of input isn’t available as a well-organized data structure—it comes in piece by piece, in real time, and the program is expected to respond to it as it happens. 마우스나 키보드의 액션같은 유저 입력은 실시간으로 조각조각 들어오고 바로 처리되길 기대한다. Event handlers Imagine an interface where the only way to find out whether a ke..

The Document Object Model When you open a web page in your browser, the browser retrieves the page’s HTML text and parses it, much like the way our parser from Chapter 12 parsed programs. The browser builds up a model of the document’s structure and uses this model to draw the page on the screen. This representation of the document is one of the toys that a JavaScript program has available in it..

Networks and the Internet For example, the Hypertext Transfer Protocol (HTTP) is a protocol for retrieving named resources (chunks of information, such as web pages or pictures). Most protocols are built on top of other protocols. HTTP treats the network as a streamlike device into which you can put bits and have them arrive at the correct destination in the correct order. As we saw in Chapter 1..

Code function parseExpression(program) { program = skipSpace(program); let match, expr; if (match = /^"([^"]*)"/.exec(program)) { expr = {type: "value", value: match[1]}; } else if (match = /^\d+\b/.exec(program)) { expr = {type: "value", value: Number(match[0])}; } else if (match = /^[^\s(),#"]+/.exec(program)) { expr = {type: "word", name: match[0]}; } else { throw new SyntaxError("Unexpected ..