MyPrograming

Event ? : 이벤트란, 웹사이트에서 사용자의 행위에의해 발생하는 모든 동작으로, 브라우저에서 화면을 클릭하거나 페이지가 로딩될 때, 화면이 닫힐 때, 화면이 줄거나 늘어날 때 등으로 모든 것이 이벤트라고 할 수 있다. onclick 예제 value가 "hello"인 버튼을 누르면 자바스크립트에 작성된 hello() 함수가 작동하면서 "Hello World"라는 대화상자가 등장하게 되는 것이다. 그 밖의 이벤트 핸들러 종류 이벤트 이벤트 핸들러 설 명 abort OnAbort 이미지를 읽다가 중단했을 경우 blur OnBlur 대상에서 포커스가 이동되었을 경우 change OnChange 대상에 입력되어 있는 값이 바뀌었을 경우 click OnClick 대상을 클릭했을 경우 dbclick InDbcl..

1. localStorage , sessionStorage ? 사용자의 로컬에 데이터를 저장하는 방법으로 "localStorage" , "sessionStorage" API가 제공된다. 보통 웹사이트의 정보를 저장하기 위해서는 필요로 하지만, 그 용도에 따라 클라이언트 저장소에 편리하게 저장할 수도 있다. 이들은 단순히 key와 value가 문자열로 저장되며, 도메인과 브라우저 별로 데이터를 저장한다. localStorage: 직접 삭제를 하지않으면 계속 데이터가 유지된다. sessionStorage: 동일한 세션에서만 사용이 가능한 저장소로, 브라우저를 닫으면 데이터가 삭제된다. 이 둘은 저장소로서의 기능은 대부분 동일하며, 차이점을 꼽자면 sessionStorage의 경우 세션이 종료되면 저장되었던 ..

Console? 자바스크립트로 작업을 하다보면 지금까지의 코드가 문제가 없는지, 혹은 다 작성된 코드에서 에러를 찾아서 수정하기 위해 디버깅을 해야할 때가 아주 많다. 이럴 경우 사용하게 되는 것이 "console"과 "alert"가 있다. console은 브라우저가 가지고 있는 객체로 인식이 된다. 최근의 웹 브라우저에는 자바스크립트를 실행하기 위핸 콘솔 기능이 표준으로 탑재되어 있다. 이를 사용하는 이유가 본질적으로는 alert와 같지만 console을 이용할 경우, alert를 사용했을 때 띄워지는 대화상자들을 하나하나 닫을 필요가 없기 때문이다. 또한 객체의 내부 내용까지 확인할 수 있어서 대부분 console을 사용한다. ※ alert? 웹상에서 문구를 박스형태 대화상자를 띄워 사용자에게 보여주..

▶ DOM을 알아보기 전 - BOM이란? 웹 서비스 개발은 브라우저와 밀접한 관련이 있다. 이러한 브라우저와 관련된 객체들의 집합을 브라우저 객체 모델 (BOM: Browser Object Model)이라고 부른다. 이 BOM을 이용해서 브라우저와 관련된 기능들을 구성한다. 앞으로 알아볼 DOM은 이 BOM 중의 하나이다. BOM의 가장 최상위 객체는 window이며, DOM은 이 window 객체의 하위 객체이기 하다. 1. DOM( Document Object Model )이란? Document (문서) + Object (객체) + Model( 모듈 ) 즉, DOM은 넓은 의미로 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미하며 좁은 의미로는 document 객체와 관련된 객체의 집합을 의미하..

기존의 JavaScript에서는 문자열을 쓰고싶을 때 ( ' )혹은 ( " )기호로 문자열을 둘러싸서 출력했다. ES2015이후 부터는 백틱( ` )을 사용하는 새로운 문자열이 생겼다. 기본적인 변수와 문자열 함께 출력 const case2 = 24; //변수 선언 console.log("Hello, world! I'm " + case2 + "year's old") //변수와 문자열 함께 출력 // Hello, world! I'm 24year's old 출력 원래 변수와 문자열을 함께 표현하기 위해서는 중간에 +로 이어주면서 따옴표 안에 띄어쓰기도 일일히 생각하면서 써야하는 번거로움이 있었다. 코드 상에서 큰따옴표나 작은 따옴표를 함께 쓰게되는 경우, 실수를 하는 경우가 빈번하여 오류가 자주 발생한다. ..

1. 자바스크립트 (JavaScript)? 자바스크립트는 객체(Object) 기반의 스크립트 언어이다. HTML로는 웹의 내용을 작성하고, CSS로는 웹을 디자인하는 것과 같이 자바스크립트는 웹의 동작 및 이벤트를 구현할수 있다. 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 통해 서버 측 프로그래밍에서도 사용 가능하다. 1-1. 자바스크립트의 특징 객체 기반의 스크립트 언어이다. 동적으로 작동하며, 타입을 명시할 필요가 없는 인터프리터 언어이다. 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다. 2. 자바스크립트 코드 기초 2-1. 자바스크립트 적용 로컬에 저장된 js파일을 HTML에 적용하는 방법이다. 2-2. 변수(Variable) 변수는 var,..

1. Ajax란? Ajax는 JavaScript의 라이브러리중 하나이며 Asynchronous Javascript And Xml(비동기식 자바스크립트와 xml)의 약자이다. 브라우저가 가지고있는 XMLHttpRequest 객체를 이용해서 전체 페이지를 새로 고치지 않고도 페이지의 일부만을 위한 데이터를 로드하는 기법 이며 Ajax를 한마디로 정의하자면 JavaScript를 사용한 비동기 통신, 클라이언트와 서버간에 XML 데이터를 주고받는 기술이라고 할 수 있다. 1-1. Ajax를 사용하는 이유? 기본적으로 HTTP프로토콜은 클라이언트쪽에서 Request를 보내고 Server쪽에서 Response를 받으면 이어졌던 연결이 끊기게 되어있다. 그래서 화면의 내용을 갱신하기 위해서는 다시 request를 하..