Web/JavaScript (10) 썸네일형 리스트형 [JavaScript] JavaScript 소개 1. HTML문서 내 2. 자바스크립트 콘솔 파이어폭스 콘솔 단축키 window : ctrl-shift-k / mac : ctrl-option-k 콘솔을 통해 프로그램의 출력결과를 볼 수 있고, 간단한 테스트를 하거나 프로그램을 임시로 수정하는 일이 가능하다. console.log('main.js loaded'); 3. jQuery 불러오기 URL을 통해 클라이언트 스크립트 라이브러리인 제이쿼리를 페이지에 불러온다. 4. $(document).ready(function() {}); 사용하기 브라우저 기반 자바스크립트를 만들 때에는 반드시 브라우저가 HTML을 전부 불러왔는지를 확인하는 것이 좋다. use strict는 자바스크립트 인터프리터에서 코드를 더 엄격하게 처리하라는 의미이다. $(document.. [JavaScript] JavaScript Debugging JavaScript Debugging자바스크립트는 실행단계(런타임)에서 버그가 발견된다.크롬 개발자도구 - Sources 탭에는 다음과 같은 디버깅 컨트롤 버튼이 있다.(1)디버깅 컨트롤 버튼 아래 부분에는 해당 라인에 대한 자세한 정보들이 보여진다.Break Point를 건 후 디버깅은 물론, Console에서 해당 변수에 대한 정보를 얻을 수도 있다.(2) - Pause / Continue script execution 첫 번째 버튼은 평소에는 Pause 상태인데, Break Point가 잡힌 상태이면 Continue 버튼이 된다. 다른 Break Point가 잡힐 때까지 코드를 진행한다. - Step over next function call 코드 라인을 한 스텝 진행하는데, 현재 실행 라인에 함수.. [JavaScript] Ajax AJAX (XMLHTTPRequest 통신)Asynchronous JavaScript and XML의 약자로 비동기적인 웹 애플리케이션의 제작을 위한 웹 개발 기법이다.비동기적으로 화면의 다른 요소에 영향을 주지 않고 데이터를 서버에서 가지고 오는 방법으로, 더 좋은 UX를 제공할 수 있는 기술이다.Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있다.즉, Ajax를 이용하면 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.이 때, 서버와는 다음과 같은 형태의 데이터를 주고받을 수 있다.- JSON- XML- HTML- text file 등 JSON(JavaScript Object Notation)Ajax를 위한 대표적인 포맷으.. [JavaScript] Event Event브라우저에는 많은 이벤트가 발생한다.브라우저 화면의 크기를 마우스로 조절할 때도, 스크롤을 할 때도, 마우스로 이동하거나 무언가를 선택할 때도 이벤트가 발생한다.HTML 요소 별로 어떤 이벤트가 발생했을 때, 특정 행위를 하고 싶다면, 대상 요소를 찾고 행위를 등록하면 된다.이를 자바스크립트로 구현할 수 있다. Event 등록이벤트 등록 표준방법으로, addEventListener 메서드를 사용할 수 있다.12345var el = document.getElementById("outside"); el.addEventListener("click", function(e) { console.log("clicked!", e);}, false);Colored by Color ScriptercsaddEven.. [JavaScript] DOM(querySelector) DOM(Document Object Model)브라우저에서는 HTML코드를 DOM이라는 객체 형태의 모델로 저장한다.그렇게 저장된 정보를 DOM Tree라고 하며, 결국 HTML element는 Tree형태로 저장된다. 브라우저 동작 방식 - HTML Parserhttps://hhlin.tistory.com/4?category=764229 복잡한 DOM Tree를 탐색하기 위해 JavaScript로 탐색 알고리즘을 구현하는 것은 너무 복잡하다.그렇기 때문에 브라우저에서는 DOM이라는 개념을 통해, 다양한 DOM API(함수묶음정도)를 제공하고 있다.브라우저는 DOM Tree를 찾고 조작하는 것을 쉽게 도와주는 여러가지 메서드(DOM API)를 제공한다. DOM Treedocument : html의 최상위.. [JavaScript] window객체(setTimeout) window 객체window에는 많은 메서드들이 존재하며, window는 default의 개념이므로 생략할 수 있다.12window.setTimeout();setTimeout();cs setTimeout 활용setTimeout은 비동기로 실행되어 동기적인 다른 실행이 끝나야 실행된다.자바스크립트는 함수를 인자로 받을 수 있으며, 함수를 반환할 수도 있다.아래의 코드는 인자로 함수를 받고 있으며, 보통 나중에 실행되는 함수를 콜백함수라고 한다.123456789101112function run() { console.log("start"); setTimeout(function() { var msg = "hello"; console.log(msg); console.log("run ....ing"); }, 100.. [JavaScript] 함수호출 스택 함수 호출run이 호출되고, 그 다음에 printName이 호출된다. 12345678910function printName(firstName) { var myName = "hh_lin"; return myName + " " + firstName;} function run(firstName) { var firstName = firstName || "Kim"; var result = printName(firstName); console.log(result);}Colored by Color Scriptercs Call Stack1234567891011function foo(b){ var a = 5; return a * b + 10;} function bar(x){ var y = 3; return foo(x *.. [JavaScript] 함수 함수 선언함수는 여러 개의 인자를 받아서, 그 결과를 출력한다.파라미터의 개수와 인자의 개수가 일치하지 않아도 오류가 나지 않는다.파라미터가 1개일 때, 인자의 개수가 0개라면 파라미터는 undefined라는 값을 가지게 된다. 1234function printName(firstName) { var myName = "hh_lin"; return myName + " " + firstName;}Colored by Color Scriptercs 함수 표현함수는 아래와 같이 함수 표현식으로 쓸 수도 있다.이렇게 표현하게 되면, 함수 선언문과는 달리 선언과 호출순서에 따라서 정상적으로 함수가 실행되지 않을 수 있다.12345678function printName(firstName) { var inner = fun.. [JavaScript] 비교/반복/문자열 비교문if, else if, else를 통해서 다양한 비교문을 사용할 수 있다.123456789if (condition_1) { statement_1;} else if (condition_2) { statement_2;} else if (condition_n) { statement_n;} else { statement_last;} cs 변수 b의 경우 boolean값 false가 아닌 Boolean 객체에 해당하므로 true를 의미한다.12var b = new Boolean(false);if (b) // this condition evaluates to truecs ※ false로 취급되는 값falseundefinednull0NaN""(empty string) 분기문 - switch주어진 값과 일치하는 .. [JavaScript] 변수/연산자/타입 JavaScript의 버전자바스크립트의 버전은 ECMAScript(줄여서 ES)의 버전에 따라서 결정되고, 이를 자바스크립트 실행 엔진이 반영한다.ES5, ES6(ES2015)... 이런식으로 버전을 일컫는다.2018년을 중심으로 ES6를 지원하는 브라우저가 많아서 몇년간 ES6문법이 표준으로 쓰이는 상황이다.ES6는 ES5문법을 포함하고 있어서 하위호환성 문제가 없다. 다만 feature별로 지원하지 않는 브라우저가 있을 수 있어 조심해야 한다. 변수변수는 var, let, const로 선언할 수 있다. 어떤 것을 사용하는 가에 의해서 scope라는 변수의 유효범위가 달라진다.ES6이전에는 var만을 사용해서 변수를 선언할 수 있었다. 컴파일 단계가 없는 자바스크립트의 type은 실행단계에서 결정된다... 이전 1 다음
