함수는 1급 객체(대입, 파라미터, 반환, 연산 등 제약 없음)이고 람다 언어(익명 함수나 클로저 등을 정의하기 위한 표현식)이다. 모듈화의 근간이다. 함수 객체는 Function.prototype에 연결되고, Function은 Object.prototype에 연결된다. 1. 함수 생성 함수는 함수 리터럴로 생성할 수 있다. 함수리터럴은 function 이라는 필수 예약어, 선택사항인 함수명, 매개변수의 집합(일반 변수는 undefined으로 초기화하지만, 매개변수는 넘겨진 인수로 초기화된다), 코드집합으로 구성된다. 함수문장 VS 함수 표현식 함수문장은 hoisting의 대상이 된다. 함수가 위치한 곳에 관계없이 유효범위의 가장 상위로 이동된다. 그렇기때문에 함수 호출이 함수를 정의하는 문장보다 앞에 ..

JS를 이용한 HTML include HTML에서 보통 머릿말, 꼬리말, 메뉴바 등이 흔하게 중복된다.(서버사이드언어나 동적언어를 사용하지 않는다면 메뉴가 바뀔때마다 전부다 수동으로 바꾸어 주어야한다.) 이러한 문제를 해결하는 방법에는 여러가지가 있겠지만 AJAX를 이용해서 해결해보자 1. 사용법 에 를 넣어준다. 에 를 넣고 를 호출해준다. 여기서는 navbar를 관리하고 있다. 2. includeHTML.js 코드 function includeHTML() { var z, i, elmnt, file, xhttp; z = document.getElementsByTagName("*"); for (i = 0; i < z.length; i++) { elmnt = z[i]; file = elmnt.getAttr..

자바스크립트(JavaScript)를 들어가며 1. 자바스크립트란? 약칭 js라고 하며 객체 기반의 스크립트 프로그래밍 언어이다. 주로 웹브라우저(스크립트엔진-인터프리터가 내장되어 있다)에서 사용한다. CSS가 디자인을 담당한다면 js는 클라이언트 단에서 웹페이지가 동적으로 랜더링하는 것을 담당해준다. 최근에는 node.js로 서버사이드부분에도 상당히 유명해졌다. 뿐만 아니라 앵귤러, 리액트, 리액트 네이티브는 웹과 앱개발에서 매우 상승세타고있다.. 주변에서 하도 리액트리액트거려서 리액트공부해야하나 싶을정도다ㅋㅋㅋ 결국 할거지만 2. 자바와는 관계가 있나요? 자바스크립트는 자바와 이름이 비슷해서 착각을 할 수 있다. 자바와 문법, 구문이 유사한 점도 있지만, 이는 C언어를 조상으로 물려받았기 때문이며, 두..

이벤트 타입 아래는 onclick 이벤트 타입의 예제다. 이벤트 타입이라는 것은 이벤트의 종류라고 할 수 있다. 사용자 정보가 유효한지 여부를 확인하기 위해 이벤트를 많이 사용한다.웹브라우저는 많은 종류의 이벤트 타입을 제공한다. 하위 토픽에서는 주요한 이벤트 타입을 중심으로 어떤 이벤트 타입이 있는지 알아보겠다. 1. 폼폼과 관련된 이벤트 타입을 알아보자. (1) submit- submit은 폼의 정보를 서버로 전송하는 명령인 submit시에 일어난다.- form 태그에 적용된다.아래 예제는 전송 전에 텍스트 필드에 값이 입력 되었는지를 확인한다. 만약 값이 입력되지 않았다면 전송을 중단한다. name (2) change- change는 폼 컨트롤(value의 값)의 `값이 변경 되었을 때 발생하는 이..

이벤트 등록방법 1. inline인라인(inline) 방식으로 이벤트를 등록하는 방법을 알아보자. 인라인 방식은 이벤트를 이벤트 대상의 태그 속성으로 지정하는 것이다.(해당 태그안에 이벤트가 속성으로 직접 들어간 경우) 다음은 버튼을 클릭했을 때 Hello world를 경고창으로 출력한다. 이벤트가 발생한 대상을 필요로하는 경우 this를 통해서 참조할 수 있다.자바스크립트에서 this는 어떤 함수에서 this를 사용한다는 것은 그 함수가 속해있는 객체를 의미(자기 자신을 의미) this는 이벤트가 동작하고 있는 엘리먼트(input)을 가리킨다. --> 짧고 편리하게 코드를 작성할 수 있다. 인라인 방식은 태그에 이벤트가 포함되기 때문에 이벤트의 소재를 파악하는 것이 편리하다. 하지만 정보인 HTML과 ..

이벤트 1. 이벤트란?이벤트(event)는 어떤 사건을 의미한다. 브라우저에서의 사건이란 사용자가 클릭을 했을 '때', 스크롤을 했을 '때', 필드의 내용을 바꾸었을 '때'와 같은 것을 의미한다. onclick 속성의 자바스크립트 코드(alert(window.location))는 사용자가 이 버튼을 클릭 했을 '때' 실행된다. 즉 js 개발자는 어떤 일이 발생했을 때 실행 되어야 하는 코드를 등록하고, 브라우저는 그 일이 발생했을 때 등록된 코드를 실행하게 된다. 이러한 방식을 이벤트 프로그래밍이라고 한다. (1) event targettarget은 이벤트가 일어날 객체(button)를 의미한다. 아래 코드에서 타겟은 버튼 태그에 대한 객체가 된다. (2) event type이벤트의 종류를 의미한다. 위..

Text 객체 1. 소개텍스트 객체는 텍스트 노드에 대한 DOM 객체로 CharcterData를 상속 받는다. 아래는 텍스트 노드를 찾는 예제다. 주목할 것은 DOM에서는 공백이나 줄바꿈도 텍스트 노드라는 점이다.노드없음Hello world줄바꿈 노드가 숨겨있음 Hello world -->DOM에서는 공백조차도 분명히 존재하는 객체에 매핑되어 있다.실행결과)Hello worldTypeError {stack: (...), message: "Cannot read property 'nodeValue' of null"}Hello world 2. 주요 기능 (1) 값텍스트 노드의 값을 가져오는 API- data- nodeValue (2) 조작- appendData()- deleteData()- insertData..

Document 객체 1. 소개Document 객체는 DOM의 스팩이고 이것이 웹브라우저에서는 HTMLDocument 객체로 사용된다. HTMLDocument 객체는 문서 전체를 대표하는 객체라고 할 수 있다. 아래 코드는 이를 보여준다. 2. 노드 생성 APIdocument 객체의 주요 임무는 새로운 노드를 생성해주는 역할이다. 이에 대한 내용은 노드 변경 API에서 학습했기 때문에 여기서는 언급하지 않는다.- createElement()- createTextNode() 3. 문서 정보 API- title- URL- referrer- lastModified 출처: https://devbox.tistory.com/entry/JavaScript?category=574556 [장인개발자를 꿈꾸는 :: 기록하..

Node 객체 1. 소개Node 객체는 DOM에서 시조와 같은 역할을 한다. 다시 말해서 모든 DOM 객체는 Node 객체를 상속 받는다. Node 객체의 위상을 그림으로 나타내면 아래와 같다. 모든 엘리먼트, 텍스트, 주석등 HTML코드의 모든 문서의 구성요소들의 객체는 공통적으로 Node라는 객체를 상속받는다.Node객체는 firstChild, lastChild, nextSibling등의 프로퍼티를 가지고 있어서 이를 이용해서 각각의 Node들을 기준으로해서 자식이 누구인지, 형제가 누구인지 알 수 있다. 2. 주요기능Node 객체의 주요한 임무는 아래와 같다. (1) 관계엘리먼트는 서로 부모, 자식, 혹은 형제자매 관계로 연결되어 있다. 각각의 Node가 다른 Node와 연결된 정보를 보여주는 AP..

Element 객체 1. 소개Element 객체는 엘리먼트를 추상화한 객체다. HTMLElement 객체와의 관계를 이해하기 위해서는 DOM의 취지에 대한 이해가 선행되야 한다. DOM은 HTML만을 제어하기 위한 모델이 아니다. HTML이나 XML, SVG, XUL과 같이 마크업 형태의 언어를 제어하기 위한 규격이기 때문에 Element는 마크업 언어의 일반적인 규격에 대한 속성을 정의하고 있고, 각각의 구체적인 언어(HTML,XML,SVG)를 위한 기능은 HTMLElement, SVGElement, XULElement와 같은 객체를 통해서 추가해서 사용하고 있다. 2. 다른 객체들과의 관계DOM의 계층구조에서 Element 객체의 위치는 아래와 같다. ※ Element와 HTMLElement를 구분하..