자바스크립트
-
[javascript]자바스크립트 reduce 활용자바스크립트/Javascript 2020. 11. 26. 23:13
*광고 클릭은 제게 큰 힘이됩니다! var a = [1,2,3,4,5,6,7,8] a.forEach(data =>{ console.log(data); }) 대부분 배열에 있는 인자들을 꺼내어 사용할때 forEach문을 사용한다 ! 하지만 javascript 전문적인 개발자들은 내장 매서드중에 가장 강력한 reduce를 알아두면 다양한 곳에서 한층더 발전된 개발을 할수있을것이다! reduce,reduceRight reduce를 덧셈 함수로 알고있는 사람들이 많다. 왜냐면 대부분 사이트에서 reduce 예제를 덧셈으로 두기때문이다. reduce메서드는 배열.reduce((누적값,현재값,인덱스,요소)=>{return 결과},초깃값); 형태로 사용한다. 아래는 흔한 덧셈 예시이다 var a = [1,2,3,4,..
-
[자바스크립트]javascript 생성자 함수자바스크립트/Javascript 2020. 11. 23. 11:11
최근에 es6에는 javascript도 class를 생성할수있도록 해놓았다. 하지만 아직도 많은 사람들은 생성자 함수를 이용하고있다. 생성자 일반 언어 즉, java,python,c++ 등등 class라는 것이 존재한다. 하지만 javasciprt에서는 es6이전에까지는 존재하지 않았고, 그 방편으로 생성자 함수라는것이 존재했다. function Person(name, gender) { this.name = name; this.gender = gender; this.Hello = function() { alert(this.name + ' "hello"'); } } 위 와 같이 함수를 만들고 new 를 통해 생성해주면 생성자 함수가 되는것이다. kim이라는 변수에 new Person을 통하여 이름이 김동완..
-
[자바스크립트]javascript RegExp란?자바스크립트/Javascript 2020. 11. 23. 10:59
RegExp 정규표현식은 formal language라고하며 , regular expression 이나 rational expression이라부른다. 약어로 regexp라고 부른다. RegExp를 사용하는 이유는 대부분 어떤 패턴을 찾아 if문으로 걸러주는역할을 하는경우가 많다. 예를들면 var array = ['칙촉', '포테이토', '구름', '배경', '비경']; var result = []; array.forEach(function(item) { if (item.match(/경$/)) { result.push(item); } }); console.log(result); // ['배경', '비경'] 위와 같이 array함수에 각각의 item에 match라는 함수를이용하여 원하는 문자를 찾을경우 /경..
-
javascript Node 와 Element란?자바스크립트/Javascript 2020. 11. 22. 23:11
*도움이 되셨다면 광고 한번 클릭해주세요! 제게 큰 힘이됩니다! Node ,Element This is a paragraph. This is another paragraph. javasciprt node는 위와같이 태그 노드와 텍스트 노드 전체를 말한다. javascript Element는 텍스트 노드를 제외하고 태그()만 말합니다. 따라서 태그만 검색할때는 Element가 붙은 메소드를 선택해야한다. 여기서 DOM에 개념을 말하자면 dom은 document Object Model이라 불립니다. 즉 object 객체이며 document를 객체 형태로 구현했다고 생각하면된다. 흔히들 html 구조를보면 아래처럼 계층적 구조를 가지고있다. 이 상황을 dom 객체로 구현해보면 { document: { html..
-
[자바스크립트(javascript)] 모든 문자열 치환(repalce,replaceAll)자바스크립트/Javascript 2020. 11. 21. 10:20
문자열 치환 웹서비스를 구축하다보면 받아오는 데이터가 안내문등일 경우 그 안내문안에 이름과 전화번호등({nm},{phone}) 등으로 데이터가 들어와 이 데이터를 유동적으로 교체하는 경우가 많이 발생한다. 그럴경우에 안내문string을 replace로 변환하여 정상작동 하도록 만들기도한다. let str = '동완, 바보, 바보, 바보'; let replaced_str = str.replace('바보', '천재'); 위코드처럼 str.replace 를 사용하면 문자열을 바꿀수있다. 결과를 보자 잉? 분명히 문자열을 바꾸었는데 두번째 바보만 천재로 바뀌고 나머지는 변경되지 않았따? 왜그럴까? 자바스크립트 replace는 문자열에서 변경하려는 문자열이 여러 번 반복될경우, 첫번째로 발견한 문자열만 치환해준다..
-
[자바스크립트(javascript)]비동기 처리 및 콜백 함수자바스크립트/Javascript 2020. 11. 21. 09:43
비동기 처리 자바스크립트의 비동기 처리는 특정 코드의 연산이 종료될때까지 실행을 멈추지 않고 다음코드를 먼저 실행하는 자바스크립트 특성이다. Ajax를 이용한 비동기 처리 웹서비스를 구축할때 form 과 ajax를 이용하여 동적 서비스를 유지한다. 그때 데이터를 비동기적으로 받아할경우에는 ajax를 이용한다 아래와같이 fuction getData(){ var getdata; $.ajax({ url: "/commonServlet", dataType: "JSON", type: "POST", data: { id:"kkk", name : "111", }, success: function(data){ getdata =data; },error: function(xhr,status,error){ console.log..
-
javascript DOM이란 도대체 무엇인가?자바스크립트/Javascript 2020. 4. 24. 14:45
처음에 자바스크립트를 공부할때 dom이라는 이야기를 많이 들었지만 제대로 파악하지 않고 자바스크립트로 개발을 했었다. 하지만 시간이 지나고 기초가 매우 중요한것을 깨닫고 DOM에 대해 공부를 하기시작했다. 이번 포스팅에는 DOM에 대해 알아볼것이다. 그전에 BOM이라는것부터 알아보자 BOM(Browser Object Model)? 웹 서비스 개발은 브라우저와 밀접한 관련이 있다. 현재 나온 모든 웹서비스는 웹브라우저를 통해서 서비스를 제공하기 때문이다. BOM은 브라우저와 관련된 모든 객체들의 집합을 브라우저 객체 모델이라 부르며 이것을 이용해서 브라우저와 관련된 기능들을 구성한다. DOM은 이 BOM중의 하나이다. 브라우저 객체 모델(BOM)의 최상위 객체는 windows라는 객체이며 DOM은 이 wi..