Tech/BoostCourse - WEB 썸네일형 리스트형 [부스트코스] DOM과 querySelector DOM 브라우저에서는 우리가 열심히 코딩한 HTML코드를 해석해 DOM(Document Object Model)이라는 객체 형태의 모델로 저장한다. 그렇게 저장된 정보를 DOM Tree라고 한다. 결국 HTML element는 Tree형태로 저장된다. 복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색알고리즘을 구현하면 너무 힘들다. 그래서 브라우저에서는 DOM(document object model)이라는 개념을 통해서, 다양한 DOM API를 제공한다. 브라우저는 DOM Tree찾고 조작하는 걸 쉽게 도와주는 여러 가지 메서드를(DOM API)를 제공한다 . getElementById() ID정보를 통해서 엘리멘트를 찾는다. querySelector() DOM을 찾는데 특히 유용한 qu.. [부스트코스] 자바스크립트 window 객체(setTimeout) window객체 브라우저 개발을 하다보면, window라는 객체가 있다. window에는 많은 메서드들이 존재하며, 아래첨 사용할 수 있다. window는 디폴트에 개념임으로 생략 가능하다. window.setTimeout() setTimeout() // window는 전역객체라서 생략가능하다. setTimeout 활용 인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백함수라고도한다. 자바스크립트는 함수를 인자로 받을 수 있는 특징이 있다. 참고로 함수를 반환할 수도 있다. function run() { setTimeout(function() { var msg = "hello codesquad"; console.log(msg); //이 메시지는 즉시 실행되지 않습니다. }, 1000); } r.. [부스트코스] 자바스크립트 함수 호출 스택 함수 호출 아래 함수를 실행해보자. run이 호출되고 그 다음에 printName이 호출된다. // 함수의 호출. function printName(firstname) { var myname = "bell"; return myname + " ," + firstname; } function run(firstname) { firstname = firstname || "Youn"; var result = printName(firstname); console.log(result); } run('kim'); // bell, kim 함수호출과 Stack 메모리에서는 우측의 Call Stack에서와 같이 순서대로 쌓이게 된다. bar 함수에서 foo를 호출한 후 foo함수의 결과를 받아올 때 까지 bar함수는 메모리.. [부스트코스] 자바스크립트 함수 "자바스크립트 잘 이해하고 있다는 것" === "자바스크립트 함수를 잘 이해하고 있다" 함수의 선언 함수는 여러개의 인자를 받아서, 그 결과를 출력한다. 파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않는다. 파라미터가 1개일때, 인자의 갯수가 0개만 넣어 실행하면, 이미 정의된 파라미터는 undefined라는 값을 갖게 된다. 이는 변수는 초기화됐지만, 값이 할당되지 않았기 때문이다. // 함수의 호출. function printName(firstname) { return "name is" + firstname; } console.log(printName()); // 출력 결과 : name is undefined console.log(printName('bellroute')); // 출력.. [부스트코스] 자바스크립트 비교-반복-문자열 비교문 if, else if, else 를 통해서 다양한 비교문을 사용할 수 있다. [참고 사이트] if (true) console.log(true); else console.log(false); // 출력 결과 : true 분기 - switch [참고 사이트] switch (expression) { case label_1: statements_1 [break;] case label_2: statements_2 [break;] ... default: statements_def [break;] } 반복 for 문이나 while문을 사용해서 반복문을 구현할 수 있다. [참고 사이트] function howMany(selectObject) { var numberSelected = 0; for (var i = .. [부스트코스] 자바스크립트 변수-연산자-타입 자바스크립트? 자바스크립트는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다. (위키백과) 자바스크립트의 버전 - 자바스크립트 버전은 ECMAScript(줄여서 ES)의 버전에 따라서 결정되고, 이를 자바스크립트실행 엔진이 반영한다. - ES5, ES6(ES2015) ... 이런식으로 버전을 일컫는다. - 2018년을 중심으로 ES6를 지원하는 브라우저가 많아서 몇년간 ES6문법이 표준으로 쓰이고 있다. - ES6는 ES5문법을 포함하고 있어 하위호환성 문제가 없다. 다만 feature별로 지원하.. [부스트코스] Request, Response 객체 이해하기 웹 브라우저에 URL을 입력하고 Enter를 입력하면 웹 브라우저는 도메인과 포트 번호를 이용해서 서버에 접속한다. 그리고 나서 path 정보, 클라이언트 IP, 클라이언트의 다양한 정보를 포함한 요청 정보를 서버에게 전송한다. 클라이어트로부터 요청이 들어오면 WAS는 어떤 일을 하게 되냐면 HttpServletRequest라는 객체와 HttpServletResponse라는 객체를 생성한다. HttpServletRequest 객체에는 요청할 때 가지고 들어온 다양한 정보들을 이 객체에 담긴다. 그리고 이 HttpServletResponse라는 객체는 현재 이 요청을 보낸 클라이언트에게 전송하기 위해서 담을 수 잇는, 정보를 담을 수 있는 객체에 HttpServletResponse 객체를 생성해 준다. 이.. [부스트코스] Servlet 라이프 싸이클 * 라이프 사이클이란? 어떤 객체의 생성부터 소멸까지의 과정을 라이프 사이클(Life Cycle)라고 한다. Servlet의 라이프 사이클 서블릿 생명주기를 확인해 보기 위한 간단한 실험 우선, LigecycleServlet이란 서블릿을 작성하고 HttpServlet의 3가지 메소드를 오버라이딩 한다. init() service(request, response) destory() ... @WebServlet("/LifecycleServlet") public class LifecycleServlet extends HttpServlet { private static final long serialVersionUID = 1L; public LifecycleServlet() { System.out.println.. 이전 1 2 3 4 5 6 다음
