FrontEnd/JavaScript

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다. 1.텍스트 노드 접근텍스트 노드의 부모노드를 선택후 자식노드의 nodeValue를 통해 텍스트값에 접근,수정한다.안녕하세요눌러   2.속성(어튜리뷰트) 노드 접근    3.HTML 콘텐츠 조작3-1.textContent텍스트 요소를 취득,변경한다.  3-2.innerHTML해당 요소의 모든 자식요소를 포함하는 하나의 문자열을 얻을수있다.(마크업 포함)       4.DOM 조작4-1.createElement(tagname)태그이름을 가진 요소를 생성  4-2.createTextNode(text)텍스트 노드 생성  4-3.appendChild(Node)자식요소로 DOM트리에 추가  4-4.removeChild(Node)노드를 DOM 트리에..

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.  1.DOM (Document Object Model)HTML, XML 문서의 구조화된 표현을 제공하며, 프로그래밍 언어가 이 구조를 조작할 수 있도록 하는 인터페이스    2.DOM treedocument 객체를 최상위 노드(루트 노드)로 둔 문서를 트리구조로 표현한 형태각 노드는 요소(HTML 태그), 속성, 텍스트등을 나타낸다.웹에서 개발자도구 -> Elements -> properties에서 DOM트리를 확인가능하다.document├── html ├── head │ └── title │ └── "Sample Page" └── body ├── h1 │ └── "Hell..

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.1.sort(원본 배열 변경)요소를 정렬[4,12,5].sort()//[12,4,5][4,12,5].sort(function(a,b){return a-b;})//[4,5,12]    2.forEachfor문 대신 사용가능[1,2,3,4].forEach(function(item){ document.write(item +" ");});   3.map각 요소에 콜백함수의 반환값으로 새로운 배열생성,반환document.write([1,2,3,4].map(function(a){return a+3}))//4,5,6,7    4.filter콜백 함수의 실행결과가 true인 배열요소만 추출후 새로운 배열반환document.write([1,2,3,4..

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.1.배열JavaScript에서 배열은 객체고 프로토타입 객체는Array.prototype다.const Arr1=[1,2,3];Arr1[1]; //2Arr1.length;//3typeof Arr1;//object  2.생성자 함수const Arr2= new Array(1,2,3);//[1,2,3]const Arr3= new Array(4);//길이 4인 빈 배열생성    3.배열 요소 추가인덱스를 사용하여 할당Arr1[1]=1;   4.배열 요소 삭제delete로 삭제(length 변함 x)splice로 삭제(length 변화 O)delete Arr1[0];Arr1.splice(2,1);    5.배열 순회for in은 순서 보장 xf..

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.1.String 생성자생성자 함수로 생성할수도있지만 변수나 객체 프로퍼티가 문자열값을 가지면 생성자없이 String객체의 메소드와 프로퍼티를 사용할수있다. const str="hihihi"strobj=new String("hellohello")   2.String 프로퍼티2-1.lengthstrobj=new String("hellohello")document.write(strobj.length)//10   3.String 메소드3-1.charAt인수로 index를 전달하여 해당 index의 문자를 반환document.write(strobj.charAt(2)+"")   3-2.concat인수로 1개 이상의 문자열을 입력해서 기존 문자열과 연..

const regexr2=new RegExp([A-Z],'ig');모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다. 1.정규표현식/패턴/플래그 로 작성된다.   2.플래그 종류(생략가능)i: 대소문자 구분xg: 문자열내 모든 패턴 검색(안할시 첫번째 매칭만 수행)m: 행이 바껴도 검색     3.패턴.임의의 문자+앞의 패턴의 반복|or[][] 내부 문자는 or로 작동[ - ]범위 지정\d숫자\D숫자아닌 문자\w알파벳,숫자\W알파벳,숫자 아닌 문자^첫문자$끝문자\s공백{n1,n2}n1~n2자리     4. RegExp 객체new RegExp(정규표현식,플래그) 형식으로 작성한다.const regexr2=new RegExp([A-Z],'ig');  5.RegExp  메소드5-1.exec문자..

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다. 1.Date 생성자date= new Date()date= new Date(0)date= new Date('2019/05/16/17:00:10')date= new Date('June 16, 2011 11:23:12')date = new Date(년, 월, 일, 시, 분 , 초 , 밀리초);date = Date()//문자열로 반환    2.Date 메소드const today= new Date();today.setFullYear(2000);//년도 설정today.setMonth(12);//월 설정today.setDate(22);// 날짜 설정today.setHours(1)//시 설정today.setMinutes(30)//분설정today.set..

모던 자바스크립트 Deep Dive를 참고하여 학습,작성하였습니다.Math  Math 객체는 생성자 함수가 아니라 정적 프로퍼티랑 메소드만 제공한다.    1.PIMath.PI; // 3.141592653589793    2.메소드2-1.abs절댓값 반환Math.abs(-1); //1  2-2.round반올림Math.round(1.22)//1    2-3.ceil올림Math.ceil(1.1)//2   2-4.floor내림Math.floor(1.9)//1   2-5.sqrt제곱근 Math.sqrt(4)//2    2-6.random무작위 수(0~1사이)Math.random()    2-7.pow제곱수Math.pow(2,3)//8   2-8.max최댓값Math.max.apply(null,[1,2,3])//3..