본문 바로가기
728x90

프론트엔드/Javascript58

[javascript] 클래스 Class 선언 생성자 함수 getter setter constructor method Javascript 자바스크립트 클래스 1. 클래스(class) 선언 2. 생성자(constructor) 3. 함수(method) 4. getter 5. setter 자바스크립트에서 객체를 사용하기 위한 방법으로 Class가 있는데 다른 언어를 사용하던 사람에게는 아주 익숙한 키워드일 것이다. 클래스의 선언 class 원하는클래스명 { constructor(파라미터1, 파라미터2){ this.속성명1 = 파라미터1; this.속성명2 = 파라미터2; } } 위 예제 코드에서 constructor는 생성자를 의미한다. 생성자는 객체를 생성할때 자동으로 호출되는데, 전달되는 값을 통하여 객체를 생성함과 동시에 속성값을 초기화할수 있다. 물론 생략 가능하고, 내부에 객체생성시 원하는 기능을 입력하면 해당 기능.. 2021. 3. 29.
[Javascript] 버튼 클릭시 원하는 링크 이동 자바스크립트(Javascript) 링크 이동 window.location = '원하는 링크주소'; a태그의 속성 href 값에 링크 주소를 설정해 놓으면, 클릭시 해당 링크로 이동한다. Button 태그에서 원하는 링크로 이동하는 방법 티스토리 2021. 3. 3.
[Javascript] fetch API Javascript Web에서 리소스의 비동기 처리 - fetch API fetch는 promise 기반으로 비동기 네트워크 통신을 알기쉽게 기술하는 방법이다. fetch로부터 반환되는 promise객체는 Error발생시 reject하지않고, resolve를 통해 전달된 response내의 .status를 통하여 네트워크 상태를 진단할수 있다. (ex 200 성공 404 실패 데이터없음 등.) fetch('경로 또는 url') .then(response => response.json() or response.text()) .then(data => console.log(data)); 2021. 2. 25.
[Javascript] 배열 요소 검색 array.find() 자바스크립트 배열 요소 검색 array.find() array.find(CallbackFunction) 배열 내 요소 검색의 방법에는 여러가지가 있지만, 중복 무관하게 첫번째 나오는 하나의 요소를 찾아야 할떄는 find()가 가장 적절하다. [샘플예제 :javascript] const students = [ {name : 'hong' , score : '100'}, {name : 'kim' , score : '60'}, {name : 'seo' , score : '90'}, {name : 'lee' , score : '80'}, {name : 'jung' , score : '40'}, {name : 'han' , score : '50'} ] //50점 학생 찾기 { const student = stude.. 2021. 2. 23.
[프론트엔드] HTML 데이터 속성 dataset FrontEnd HTML Element Attribute - Dataset HTML 데이터 속성은 엘리먼트 내 attribute명으로 data- + 키이름 으로 사용 Javascript 에서 해당 데이터의 속성을 접근하기 위해서는 엘리먼트명.dataset.키이름 ※일반적인 객체와 같이 dataset[키이름] 으로는 접근 불가! [샘플 예제] [결과 출력] 2021. 2. 23.
[Javascript] 배열 (Array) - map() 자바스크립트의 Array.map(CallbackFunction):Array 함수는 배열의 모든 요소를 순회하며 콜백 함수의 기능을 실행하는 역할을 한다. Array.map(CallbackFunc) : [] 배열 내 요소를 순회하는 방법에는 여러가지가 있지만, map 함수는 여러 줄을 사용하는 for 에 비하여 코드양이 적어지고 가독성이 좋아지기때문에 사용을 많이 하는 편이다. const arr = [1,2,3,4,5]; const arr_map = arr.map(val => val*2); console.log(arr_map); [출력 결과] [2,4,6,8,10] 2021. 2. 23.
[Javascript] JSON string object 변환 JSON.stringify() / JSON.parse() JSON : Java Script Object Notation 객체 데이터를 효율적으로 전달하기 위한 포맷 1. 자바스크립트 객체(Javscript object)의 문자열 (String) 변환 2. 문자열을 자바스크립트 객체로 변환 //Javascript 객체 생성 const obj = { name : 'GoodMemory', page : 'https://goodmemory.tistory.com' } //자바스크립트 객체의 문자열 변환 const objToStr = JSON.stringify(obj); //출력 console.log(objToStr); //문자열을 자바스크립트 객체로 변환 const strToObj = JSON.parse(objToStr); //출력 console.log(strToObj).. 2021. 2. 22.
[Javascript] 페이지 로드 이후 스크립트의 실행 defer Javascript async 와 defer 자바스크립트의 실행을 페이지 로드 이후로 늦출수 있는 키워드는 defer이다. [Sample Code :Javscript] ※사용 주의※ defer은 defer : 페이지 로드 이후 해당 스크립트 실행 2021. 2. 21.
[Javascript] 배열 Array API - splice() 자바스크립트 배열 Array API - splice() array.splice(시작 인덱스, 제거할 요소의 수, 추가할 요소); [개념 이해] array.splice(시작 인덱스, 제거할 요소의 수, 추가할 요소) : 배열의 기존 요소를 삭제 하거나 추가 샘플 예제 ↓ [javascript] //Array.splice() const spliceArr = [1,2,3,4,5]; //요소 추가 없이 0번째 부터 2개의 요소 삭제 const spliceResult = spliceArr.splice(0,2); console.log('-----splice : 요소 삭제-----'); console.log('splice 삭제 배열 : ' + spliceResult); console.log('splice 원본 배열 .. 2021. 2. 16.
[Javascript] 배열 Array API - sort() 자바스크립트 배열 Array API - sort() array.sort(); [개념 이해] array.sort() : 배열의 요소를 정렬한 후 반환 (주의 : 원본 배열 또한 정렬된다.) 단, 정렬기준은 전달되는 함수에 따라 달라진다. 샘플 예제 ↓ array.sort() 같은 경우에는 여러 가지 예제를 준비하였다, 1. 숫자 정렬 2. 문자열 정렬 [javascript : 숫자 정렬] //배열 [Number] 정렬 const arr = [1,10,2,9,3,8,4,7,5,6]; //오름차순 const upSorted = arr.sort((first,second)=>{ //x,y 비교 후 x가 큰 경우 자리 바꾸기 //why? 오름차순은 앞 숫자가 작아야함 const x = first; const y =.. 2021. 2. 15.
728x90

티스토리툴바