본문 바로가기

Web programming/JavaScript & jQuery12

[JavaScript] JSON JSON을 이해하려면 서버와의 통신에 대해 생각해보자. 웹사이트나 앱과 같은 Client들이 Server와 어떻게 통신할 수 있는지를 정의한 것이 *HTTP이다. * HTTP ( Hypertext Transfer Protocal) : Hypertext를(HTML 문서와 같은 리소스들을) 어떻게 서로 주고받을 수 있는지를 규약 한 프로토콜이다. - Hypertext는 링크만 해당하는 것이 아니라 문서나 이미지 등의 데이터 파일도 해당한다. HTTP는 Client가 Server에게 데이터를 request(요청)하고, 반대로 Server는 요청받은 것에 따라 response(응답)을 Client에 보내 주는 방식을 의미한다. HTTP를 이용해서 Server에게 데이터를 요청해서 받아올 수 있는 방법으로는 *A.. 2021. 4. 14.
[JavaScript] Strict mode 바닐자 자바스크립트는 유연한 언어이기 때문에 개발자가 선언되지 않은 변수의 값을 할당한다던지 기존의 프로토타입을 변경하는 등의 실수를 할 수 있다. 이러한 실수를 방지하기 위해서는 ECMAScript 5에 추가된 Strict mode로 작업하는 것이 좋다. Strict(엄격한) 모드 특징 기존 자바스크립트에는 조용히 무시되던 에러들을 throwing한다. (아래 이미지 참고) JavaScript 엔진의 최적화 작업을 어렵게 만드는 실수들을 바로잡으며. strict 모드의 코드는 not-strict 모드의 동일한 코드보다 더 빨리 작동되어 상대적으로 효율적이다. ECMAScript의 향후 버전에서 정의 될 문법을 금지한다. Strict 'use strict'; // 자바스크립트 파일 최상단에 선언 // a.. 2021. 4. 10.
<script>요소 defer와 async : HTML에서 스크립트 불러오기 HTML에서 JavaScript를 포함할 때, 어느 위치에 어떻게 참조시키는 것이 효율적인 방법일까? 브라우저가 HTML을 분석하여 화면에 출력하는 과정을 생각해보자. 우선 브라우저에서는 다운로드한 HTML의 구문을 분석(*parsing)을 하게된다. 브라우저가 HTML을 다운받아서 코드를 한 줄씩 parsing 하다가 를 만나게 되면 parsing 하는 것을 멈추고, script를 서버에서 받아오고 실행(fetching)하게 된다. * parsing HTML 태그에는 시작과 끝이 있고 속성 이름과 값이 있는데, parser는 이 문서에 대한 입력을 parsing(구문 분석)하여 문서 트리를 구축한다. (해당 파일을 브라우저 화면으로 볼 수 있는 일련의 과정) HTML parser는 이미지 같은 non-.. 2021. 3. 29.
window.open(); 윈도우팝업 제작 및 호출 var window = window.open(url, windowName, [windowFeatures]); → url HTML페이지, 이미지 파일 또는 브라우저에서 지원하는 리소스에 대한 경로도나 URL이 될 수 있다. 빈 문자열("")로 지정되면 새 창으로 열린다. → windowName (선택항목) target으로 지정할 경우 , 요소의 속성에 대한 대상으로 사용할 수 있다. 이름에는 공백이 없어야 하며, 이 이름이 창 제목으로 사용되지는 않는다. → windowFeatures (선택항목) 새로 연 창에 대한 항목의 기능들을(창의 기본 크기 및 위치, 도구 모음 포함 여부 등) 정의한다. 기능은 쉼표로 구분하여, 문자열에는 공백이 없어야 한다. 예: window.open('/popup.html', .. 2020. 12. 19.
jQuery 기본 문법 사용, 선택자와 메서드 본 글은 Tutorial Republic을 토대로 작성했습니다. jQuery 표준/기본 구문! 달러 기호($)로 시작하고 세미콜론(;)으로 끝난다. 제이쿼리에서 달러 기호는 jQuery의 별칭이다. 다음 예제는 기본적인 문장을 보여주는 코드이다. ▷ $(document).ready(handler); → document 엘리먼트로 호출 ▷ $( ).ready(handler); → 빈 엘리먼트로 호출 ▷ $(handler); → 특정 엘리먼트 없이 바로 호출 jQuery ready()메서드는 일반적으로 익명 함수와 함께 사용된다. 따라서 위의 예는 다음과 같은 축약 표기법으로 작성 가능하다. ● on 메서드로 알아보는 이벤트 연결 방법 // Syntax $(selector).on(event,childSele.. 2020. 11. 17.
jQuery란 jQuery는 JavaScript 라이브러리이다. jQuery는 다양한 브라우저에서 사용하기 쉽게 작동하는 API를 통해 HTML 문서 탐색 및 조작, 이벤트 처리, 애니메이션 및 Ajax와 같은 작업을 JavaScript 보다 훨씬 간단하게 만든다. jQuery의 모든 기능은 JavaScript를 통해 액세스되므로 코드를 이해하고 구조화하거나 디버깅하려면 JavaScript에 대한 이해가 필수적이다. 따라서 JavaScript와 기본 구문을 먼저 이해 하는 것이 좋겠다. jQuery 작동 원리 알아보기 ↓ How jQuery Works | jQuery Learning Center link jQuery: The Basics This is a basic tutorial, designed to help yo.. 2020. 10. 26.
JSON, Fetch API, AJAX란 JSON : JavaScript Object Notation 비동기 브라우저/서버 통신 (AJAX)을 위해, 넓게는 XML(AJAX가 사용)을 대체하는 주요 데이터 포맷이다. 특히, 인터넷에서 자료를 주고받을 때 그 자료를 표현하는 방법으로 알려져 있다. 자료의 종류에 큰 제한은 없으며, 특히 컴퓨터 프로그램의 변수값을 표현하는데 적합하다. Wikipedia JSON MDN JSON Description AJAX : Asynchronous Javascript And XML 비동기로 자바스크립트를 이용해서 원격의 XML(데이터)를 요청해서 화면을 갱신하는 기술로, 전체 페이지가 다시 로드되지 않고 일부분만 업데이트하는 좀 더 복잡한 웹페이지를 만들 수 있게 해준다. 또한 AJAX를 사용하면 웹페이지 일부가.. 2020. 5. 28.
Function 규칙과 Parameters 유형 함수 : Function 프로그램을 구성하는 기본 빌딩블록으로서 여러 함수가 있을 수 있다. 함수는 서브 프로그램이라고도 불리우기도 하며, 여러번 재사용이 가능하다는 장점이 있다. - 하나의 함수에는 한가지의 기능을 하도록 만들어야 한다. - 함수는 무언가를 동작하는 것이기 때문에 함수명은 동사형으로 짓는다. - 자바스크립트에서 함수는 오브젝트로 간주되기 때문에 함수를 변수에 할당 할 수 있고, 파라미터로 전달 되며, 함수를 리턴 할 수 있다. - 모든 함수에는 return undefined 상태(생략 가능)이며, return 값으로 return 할 수 있다. - 자바스크립트에는 타입이 없다. (다양한 개발자들과 소통하거나, 작성한 것을 API로 제공해야하는 경우에 타입을 기재한 자바스크립트 코드가 필요.. 2020. 5. 27.
DOM(Document Object Model) 이란? Document Object Model, DOM : 문서 객체 모델 브라우저는 HTML코드를 DOM은 객체형태 모델로서 HTML Element를 트리 구조(DOM Tree)로 저장하며, 특정 엘리먼트를 찾거나 조작하는 것을 쉽게 도와주는 메서드(다양한 DOM API)를 제공한다. DOM은 HTML, XML 문서의 프로그래밍 인터페이스이다. 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM을 수정할 수 있다. 웹 페이지를 수정하거나 생성하는데 사용되는 모든 property, method, event 들은 objects로 구성된다. 예를 들어 document object는 document 자체를 의미하며.. 2020. 5. 27.
[JS ES6] 변수와 선언 / 데이터 타입 변수의 타입 변수의 타입인 primitive, object에 따라 메모리의 저장 방식이 다르다. - primitive type : 값 자체가 메로리에 저장된다. - object type : 오브젝트가 가리키는 레퍼런스가 메모리에 저장된다. 데이터 타입 - Mutable data types : 변경이 가능한 데이터 타입으로 스스로 변경이 가능 (objects) - Immutable data types : 데이터 자체를 변경하지 못하는 데이터 타입 (Constants, premitive, frozen objects) 변수명 식별자(identifier)라고 불리우며, 다음과 같은 규칙을 따라 변수명을 작성한다. - 대소문자를 구분하기 때문에, 구분하지 않을 경우 서로 다른 변수가 된다. - 문자, 언더바( _.. 2020. 5. 21.
JavaScript란 JavaScript는 객체 기반의 스크립트 프로그래밍 언어이다. 표준화된 JavaScript는 ECMAScript(ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어)라고 한다. JavaScript는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js(브라우저 외부에서 가장 인기있는 크로스 플랫폼 JavaScript 런타임 환경)와 같이 서버 프로그래밍에도 사용되고 있다. 앞서 말했듯 주로 브라우저에서 사용되므로 개발자는 DOM을 통해 웹 페이지 컨텐츠를 조작하고, Ajax 및 IndexedDB로 데이터를 조작하며, 캔버스로 그래픽을 그리거나 다양한 API를 통해 브라우저를 실행하는 장치와 상호 작.. 2020. 5. 20.
자바스크립트의 탄생 배경 본 게시글에서는 개발자이자 유튜버인 드림코딩by엘리님의 강의를 통해 자바스크립의 탄생 배경에 대해 알아보고자 한다. 강의가 재미있고 유익하니, 함께 스터디 해보도록 하자. 본격적으로 자바스크립트를 배우기 앞서 전반적인 역사의 흐름을 통해 자바스크립트란 어떤 것인지 알아보도록 하자. 2020. 5. 20.
반응형

티스토리툴바