dev-jong의 개발일지

해당 게시물에서는 여러가지 요소에 대해서 이벤트 리스너를 처리하는 방식과 그리고 css통해서 여러가지 요소중에 한 요소에 대해서 "선택" 됨을 알려주도록 하는 기능에 대해서 알아보겠다. 다음과 같은 구조의 HTML 구문이 있다. 각각의 코인명 가격 그리고 변동률에 대해서 태그로 묶여있는 구조이다.내가 다음과 같은 여러 요소중에서 코인 한개를 "클릭"해서 "선택"을 하려고 할 때, 어떤 작업을 통해서 다음과 같은 작업을 처리 할 수 있는지 자바스크립트 코드를 살펴보자 일단 태그를 확인해보면 동일하게 class = "coin"으로 묶어두었다. 묶어둔 클래스를 통해서 선택자를 .coin으로 해당 요소들을 참조가 가능하다. JavaScript 코드에서 다음과 같이 document.querySelectorAl..

자바에 클릭 이벤트를 통해서 실행문을 처리하는 방법에는 대표적으로 Onclick과 addEventListener() 방식이 있다. Onclick은 태그 내에 속성으로 넣어주어 이벤트를 처리하는 방식이고,addEventListener()는 특정 노드에 대해서 지정하여 사용한다 (노드는 document.querySelector(선택자)로 가져옴) 두 이벤트 처리에는 각각 함수가 들어가는데 파라미터로 this 그리고 이벤트객체를 넣어주어 클릭된 요소(노드) 에 대해서 세분화 하여 처리가 가능하도록 사용이 가능하다. [this]this는 현재 실행중인 코드에 문맥에서 참조하고 있는 값 이라고 볼 수 있다.다시 말해서, this는 좀있다 말할 addEventListener에 들어가는 함수에 파라미터로 들어가는 이..

자바스크립트의 주된 용도는 화면에 생동감을 주기위해, 다시말해서 화면에 사용자에 입력 또는 정해진 딜레이에 맞춰서 내가 만들어 놓은 정적의 시각적 화면인 html 화면에 동적처리를 위한 것이다. 이중에서도 사용자에 입력은 여러가지 형태에 "이벤트"로, "이벤트리스너"가 해당 이벤트가 발생하면 그에 맞춰서 어떤 화면작업을 해줄지 코드구현이 가능하다. 여기서 "이벤트리스너" 호출 방법 및 사용자의 어떤 입력을 "이벤트"로 받아들여서 처리하는지에 대해서 알아보겠다. [이벤트 처리] 1. onclick 속성을 통한 해당 요소의 이벤트 처리html에 태그 속성중에 onclick 속성을 사용해서 이벤트 처리가 가능하다. 다음 예시를 살펴보자 다음 html 코드를 살펴보면 3개의 태그 (button, a, di..

[HTML 요소 다루기]이전에 선택자를 통해서 html 태그에 설정한 속성값을 통해서 자바스크립트에서 해당 요소에 대해서 다루는 작업을 잠깐 해보았다.해당 게시물에서는 html 요소 및 이벤트리스너를 통한 상호작용에 대해서 설명해보겠다. 일단 HTML은 무조건 태그를 통해서 이루어져있는데 "노드"라는 용어 그리고 "DOM트리" 부터 배워보자. [DOM (Documnet Object Model)]- 모든 HTML 태그는 DOM에 따르면 객체라고 불리운다. 어떤 태그 내에 자식요소로 태그가 n개 존재하고 또 해당 자식요소로부터어떤 태그내에 자식요소도 존재한다. 그리고 태그내에 문자까지도 객체로 볼 수 있다.이런 모든 객체는 자바스크립트를 통해 접근이 가능하며, 페이지를 동적으로 조작하려고 할 때, 해당 객..

자바스크립트에서도 함수선언과 객체를 생성할 수 있다 해당 게시물에서는 다음과 같은 내용을 다루어보겠다. [함수선언] 1. 선언적 함수 선언function f01() { console.log("test01 called...");}f01(); 함수를 선언할 때는 function 키워드를 달아서 선언할 수 있다. 함수명(파라미터) {실행문} 과 같은 형식으로함수를 실행하려고 할떄는 f01(파라미터); 와 같은 형식으로 실행하면 된다. 2. 익명 함수와 화살표 함수 (자주사용)const f01 = function() { console.log("anonymous function called...");}//또는 화살표 함수const f01 = () => { console.log("anonymous function ..

[배열]자바스크립트에서 배열은 리스트 같은 객체(list-like objects)라고 불리운다. 배열은 리스트에 저장된 다수의 값들을 포함하고 있는 하나의 객체이다. 자료구조에서 말하는 배열은, 동일한 크기의 공간에 빈틈없이 연속적으로 나열된 구조를 말한다. 다시말해서 배열을 선언할 때, 이미 데이터 타입을 정하고 만들어지며 동일한 크기의 메모리 공간을 차지하게 되는것이다. 순서가 있고 순서에 따라 값을 가져올 수 있도록 하기 위해 서로 연속적으로 이루어진다. 자바스크립트의 배열은 자료구조에서 말하는 배열과는 사뭇 다르다. 배열의 요소를 위해서 각 메모리 공간을 동일하게 갖지 않는 다시말해서 타입이 다른 데이터가 들어올 수 있다. x = [1,2,3,'a',"asdvcd",false];console.lo..

[입출력 함수]우리가 결과에 대해서 출력을 확인해야하는 경우, 사용자로부터 입력을 받아야하는 경우 등간단한 코드를 작성하려고 할 때, 자주 사용하는 함수가 있다. 아래를 확인해보자 1. window.prompt(' ')해당 함수는 텍스트 필드, 확인, 취소 버튼이 있는 대화 상자를 띄운다. 입력한 메세지 내용을 리턴 값으로 돌려받는다. 2. document.write(' ')브라우저 화면 상의 페이지에 직접 값을 출력한다. 해당 함수는 html 내부에서 script 태그를 사용하여 사용 가능하다(위치가 필요하기 때문) 3. window.alert(' ') 해당 함수는 화면에 출력문과 알림창을 띄운다. window 4. document.querySelector(선택자)자바스크립트 코딩을 하면서 가장 많이..

[JavaScript]자바스크립트(JavaScript)는 객체 기반의 스크립트 언어로 우리가 기존에 HTML과 CSS라는 기술로 홈페이지를 구현했다면, 해당 홈페이지는 "정적"으로 이루어진 홈페이지이다. 여기에 추가로 사용자와의 상호작용(이벤트)를 통해서 웹페이지에 변화를 주는 "동적"의 홈페이지를 만들고 싶다면 해당 게시물에서 다룰 자바스크립트 언어를 통해서 가능하다. 자바스크립트는 주로 웹 브라우저에서 사용되며, Node.js와 같은 프레임워크를 사용하면 서버측 프로그래밍에서도 사용할 수 있다. [자바스크립트의 특징] 1. 자바스크립트는 객체 기반의 스크립트 언어2. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍 특징을 둘 다 지니고 있다.3. 자바스크립트는 동적으로 타입을 명시할 필요가 ..