'웹 언어 배우기/JavaScript' 카테고리의 글 목록

웹 언어 배우기/JavaScript (11)

자바스크립트 ES6(ECMAScript 6) 정리

웹 언어 배우기/JavaScript 다한(dahan) 2021. 2. 3. 12:30

자바스크립트 ES6(ECMAScript 6) 정리해봤습니다. ECMAScript는 자바스크립트 프로그래밍 언어를 정의하는 국제 표준의 이름입니다. 템플릿 문자열(리터럴) 문자열 안에 변수와 연산식을 혼합하여 사용할 수 있습니다. let id = '12345'; console.log(`id값은 ${id}입니다.`); //결과: id값은 12345입니다. `${}` 백틱(`)으로 감싸고 문자열은 그대로 적고 ${연산식}으로 작성합니다. 화살표 함수 기존의 함수보다 구문이 짧고 자신의 this, arguments(함수에 전달된 인수에 대항하는 배열 형태의 객체), super 또는 new.target을 바인딩하지 않습니다. (매개변수) => {함수 기능} let arr = ['css','html','javasc..

버튼 클릭 시 HTML 코드 복사하여 나타내는 방법

웹 언어 배우기/JavaScript 다한(dahan) 2021. 1. 27. 11:10

버튼 클릭 시 HTML 코드 복사하여 나타내는 방법에 대해 알아보겠습니다. 이름 아이콘 목표 추가 폰트패밀리 폰트 추가 저는 form 태그를 이용하여 목표 추가 버튼 또는 폰트 추가 버튼을 클릭하면 label과 input을 복사하여 아래에 나타나는 HTML 코드를 짜봤습니다. let addButton = document.querySelectorAll('button'); const addButtonClickHandle = (e) =>{ e.preventDefault(); let id = e.target.id; let appendArea = document.querySelector(`#${id}Add`); let html = document.querySelector(`.${id}__item--add`); l..

자바스크립트 배열 특정 문자열 찾기, match 함수

웹 언어 배우기/JavaScript 다한(dahan) 2021. 1. 25. 19:56

특정 텍스트 안에 검색할 단어, 찾고 싶은 단어가 있는 경우 해당 텍스트가 문구에 포함되어 있는지 확인할 수 있습니다. 또한, 정규표현식을 이용하여 특정 패턴을 검색할 수 있습니다. match 함수를 이용하여 자바스크립트 배열 특정 문자열 찾아보는 시간을 갖도록 하겠습니다. match 사용 방법 자바스크립트 배열 특정 문자열 찾기 전에 match 함수 사용 방법을 익히겠습니다. 문자열.match(찾을 단어) 간단한 예제와 함께 match 함수를 이해해보겠습니다. let str = 'hello world'; str.match('hello') 'hello world' 문자열에서 'hello'가 있는지 찾습니다. 일치하면 다음과 같이 결과가 나타납니다. [ 'hello', index: 0, input: 'he..

javascript로 이미지 업로드 및 미리보기 기능 구현하는 방법

웹 언어 배우기/JavaScript 다한(dahan) 2020. 6. 14. 13:26

이번에 간단한 프로젝트를 기획하면서 사진 업로드와 미리보기 기능을 구현하게 되었다. 처음에는 쉬울거라고 생각했지만 막상 하려고 하니 계속 막혔다. 무엇보다 시간을 잡아먹었던건 사진 10장 초과시 업로드를 불가능하게 만드는 것을 구현하는 것이였다. 이 과정에서 IT커뮤니티 사이트 OKKY에 질문을 많이 했었다. 약 2일 동안 이것만 한거 같다. 이미지 업로드 HTML 사진업로드 input 태그에는 file형태와 image만 업로드할 수 있게 설정했다. 또한, 최대 10장까지 업로드할 수 있기 때문에 multiple 속성도 추가했다. 구현하고 싶은 것은 input 태그에 클릭해서 업로드하는 것이 아닌 button 태그를 클릭해서 업로드하고 싶었다. 왜냐하면 input 태그는 CSS 입히기가 쉽지 않기 때문이..

스크롤 내리면 줄어드는 고정 헤더 만들기

웹 언어 배우기/JavaScript 다한(dahan) 2019. 9. 22. 07:00

fixed로 되어있는 고정 헤더를 특정 스크롤 위치에 도달하면 줄어드는 헤더를 만들고자 합니다. HTML, CSS, jquery를 이용해서 만들어보겠습니다. 고정 헤더 높이 설정 예제 $(function(){ var shrinkHeader = 300; $(window).scroll(function(){ var scroll = getCurrentScroll(); if(scroll >= shrinkHeader){ $('.header').addClass('shrink'); }else{ $('.header').removeClass('shrink'); } }); function getCurrentScroll(){ return window.pageYOffset || document.documentElement.sc..

자바스크립트) 이벤트 요소 가져오는 방법 [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파일의 데이터가 그대로 나타나는 것을 볼 수 있다. 이것을 ..

1
2

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

Designed by JB FACTORY

티스토리툴바