'웹 언어 배우기' 카테고리의 글 목록 (3 Page)

웹 언어 배우기 (44)

자바스크립트) 이벤트 요소 가져오는 방법 [event.target]

웹 언어 배우기/JavaScript 다한(dahan) 2019. 8. 8. 15:16

특정한 DOM 객체의 요소에서 이벤트가 발생한 경우 해당 요소를 가져오는 방법에 대해 알아보겠다. 사용방법은 아래와 같다. event.target.? Hello const handleOnChange = e =>{ console.log(e.target.name); } document.querySelector("#hello").addEventListener("change",handleOnChange) input 태그에 어떤 행동을 할 때마다 name값인 helloName이 콘솔에 찍히는 소스이다. 즉, e.target에 input 태그의 속성을 넣어주고 그 속성을 e.target.(이곳) 이곳에 넣어주면 해당 요소를 가져온다.

javascript로 특정 URL 값 가져오는 방법

웹 언어 배우기/JavaScript 다한(dahan) 2019. 8. 1. 21:15

개인 프로젝트를 진행하던 중 검색 페이지에서 select로 된 값을 검색 결과 페이지로 그 검색어를 가져오는 것을 구현하려고 한다. 가령 검색 페이지에 서울, 경기, 강원 등의 지역을 선택할 수 있는 검색창이 있고 값을 선택하면 검색 결과 페이지로 이동하여 'searchResult.html?vaule="서울"' 이라는 URL이 표시된다. 그래서 검색 결과 페이지에 서울 이라는 값을 가지고 오는 것을 구현하고자 한다. window.location.href javascript는 URL를 보여주는 객체가 있다. 바로 window.location.href이다. 이 객체를 크롬이나 다른 브라우저 console창에 가서 입력하면 주소가 출력된다. 이외에도 hostname, pathname, protocol등을 가지..

jQuery $.getJSON 자바스크립트에서 데이터 가져오는 방법

웹 언어 배우기/JavaScript 다한(dahan) 2019. 7. 23. 22:49

JSON형태의 데이터를 가지고 오기 위해 jQuery의 $.getJSON를 사용하여 데이터를 가져오는 방법에 대해 알아보겠다. 그 전에 필자는 동기식 즉, 요청과 동시에 처리하는 방식으로 하기 위해 $.getJSON을 선택했다. 하지만, 비동기식으로 처리하기 위해서는 $.ajax를 사용하면 된다. $.getJSON 사용법 const URL = "url address"; $.getJSON(URL,function(data){ const items = data.item.items; console.log(items); }) json파일이 item안에 items에 데이터가 있다고 할때를 가정해보면 위와 같이 쓸 수 있다. console창에 가보면 json파일의 데이터가 그대로 나타나는 것을 볼 수 있다. 이것을 ..

key, value 데이터를 저장할 수 있는 Local Storage 사용법

웹 언어 배우기/JavaScript 다한(dahan) 2019. 4. 25. 16:23

웹 서버에서 데이터를 저장하는 방법도 있지만 클라이언트 즉, 웹 브라우저에서 key값과 value 값 데이터를 저장할 수 있는 Local Storage 속성이 있다. 사용 용도는 임시 저장 기능, 장바구니, 서버에 저장할 필요가 없는 경우 등이다. Local Storate 속성은 기본적으로 string(문자열)로 저장된다. 저장은 localStorage.setItem(key,value);로 저장할 수 있다. 또한, 불러오는 방법은 localStorage.getItem(key);로 불러올 수 있다. 예제를 통해 이해해보자. const form = document.querySelector('.js-form'), input = form.querySelector('input'), helloText = docum..

웹 브라우저에 시, 분, 초가 돌아가는 시계 만들기

웹 언어 배우기/JavaScript 다한(dahan) 2019. 4. 14. 17:03

00:00:00 디자인을 제외한다. 실질적으로 h1 안에 있는 것을 바꾸려고 한다. const jsClock = document.querySelector('.js-clock'); const clock = jsClock.querySelector('h1'); function clock(){ const date = new Date(); const hour = date.getHours(), minute = date.getMinutes(), second = date.getSeconds(); // clock.innerHTML = `${hour} : ${minute} : ${second}`; clock.innerHTML = `${hour < 10 ? `0${hour}` : hour} : ${minute < 10 ? ..

scope let과 const

웹 언어 배우기/ES6 다한(dahan) 2019. 4. 3. 00:58

let은 블럭 단위로써 아래 예제를 통해 가볍게 이해할 수 있다. var name = 'name'; //var function hello(){ for(var i=0;i

List와 arrayList의 차이점

웹 언어 배우기/JAVA 다한(dahan) 2019. 3. 30. 18:18

List는 인터페이스이다. 인터페이스는 공통되는 메소드를 추출해 놓은 클래스라고 생각하면 된다. 도형이라고 생각하면, List list = new ArrayList(); 도형 list = new 정사각형; arrayList list = new ArrayList(); 정사각형 list = new 정사각형; 자바의 다형성의 특징으로 상속 받아 사용해야 한다. 즉, List는 인터페이스이고 arrayList는 List에 상속된 클래스이다. 따라서, arrayList는 단독으로 사용할 수 없으며 사용시 List 인터페이스를 상속받고 사용해야 한다. 다형성이란 메소드나 클래스가 있을 때 이것들이 다양한 방법으로 동작하는 것을 말한다. 즉, 상속을 통해 기능을 확장하거나 변경하는 것을 가능하게 해 주고, 같은 클래..

java 생성자란?

웹 언어 배우기/JAVA 다한(dahan) 2019. 3. 28. 23:04

메소드 이름이 클래스 이름과 똑같고 반환형을 선언하지 않으며 그로인해 리턴값을 반환하지 않는다. 또한, 입력만 있고 출력은 없다. 따라서 생성자는 초기화만 해주는 작업을 한다. public class member{ //클래스 이름: member public memeber(){} //생성자 생성 }

1
2
3
4
5
6

Copyright © 다한의 웹 블로그 All Rights Reserved

Designed by JB FACTORY

티스토리툴바