Mo's Develog

part.1에 이어서 또 다른예제로 DOM공부를 해보자 DOM API 사용하기:노드의 위치 바꾸기 메뉴 위치 변경하기 메뉴1 메뉴2 메뉴3 메뉴4 메뉴5 메뉴6 위로 아래로 ▲ 위 body태그의 상태이며 우리의 목표는 메뉴 중 하나를 선택하고 위로 또는 아래로 버튼을 눌렀을 때 해당 메뉴탭이 위 또는 아래로 움직이는 기능을 구현하는 것이다. head태그안에 script태그를 넣을 것이기 때문에 window.addEventListener를 사용할 것이다. 또 다른 예제를 보자 DOM API 사용하기:노드복제 하기 데이타 뿌려주기(복제할 행이 있는 경우) 번호 제목 작성일 작성자 조회수 1 제목1 2022-09-01 가길동 20 데이타 뿌려주기(복제할 행이 없는 경우) 1 제목1 2022-09-01 가길동 ..

BOM(Browser Object Model)은 브라우저를 스크립트 언어로 제어하기 위해 객체로 모델링 한 것이다. 그래서 JS에서 BOM API를 사용해서 브라우저를 제어할 수 있다. window객체(브라우저)는 BOM의 최상위 객체이며 전역객체로 브라우저당 1개이다. 이 BOM에서 document 즉, html파일을 스크립트 언어로 제어하기 위해 객체로 모델링 한 것을 DOM이라고 한다. 그래서 JS 에서 DOM API를 사용해서 HTML문서를 제어할 수 있는 것이다. DOM 최상위 node는 window객체의 자식인 document객체이며 document객체는 HTML문서 하나당 하나이다. ▲우리가 항상 기본적으로 사용하는 html파일의 틀이다. 위 틀을 DOM으로 나타내보면 아래와 같다. 하나씩 ..

/* 자스는 프로토타입 기반의 언어로 프로토타입(원형)을 만들고 속성이나 함수를 객체에 추가한다 자스에서 객체를 만드는 법 두 가지 1. 중괄호 사용(Literal 객체-JSON(JavaScript Object Notation)) var 객체명 = {}; 혹은 {"속성":"값",....} 속성 추가시에는 객체명.속성명=값; 함수 추가시에는 객체명.함수명 =function(){}; 2. 생성자 함수 사용 function 생성자함수명(){ this를 사용해서 속성 설정 } -보통 일반함수와 구분하기위해 함수명을 대문자로 시작 -return문을 안쓴다 -생성자 함수에는 주로 속성만 정의한다 var 객체명= new 생성자함수명(); -함수는 객체명.prototype.함수명=function(){}로 별도로 정의한..

JS에서의 CallByValue와 CallByReference는 Java와 동일하다. 1) CallByValue var param=100,args=1; //CallByValue]-값에 의한 호출.값이 전달 function callByValue(param,args){//매개변수 param,args는 지역변수 var temp =param; param = args; args = temp; console.log('callByValue함수 안:param-%s,args-%s',param,args); } window.callByValue(param,window.args); console.log('callByValue함수 밖:param-%s,args-%s',window.param,window.args); ▲ 값을 전달..

1. 함수 선언문형식으로 함수 정의 - Hoisting 됨 ▲ 함수 선언문방식으로 함수를 하나 정의하자. 함수 선언문방식으로 정의했으니 Hoisting이 지원된다. ▲ 1행부터 각각의 행의 출력결과를 보자. ▲ 함수명을 출력하면 함수정의문 자체를 출력해주며, 함수이므로 타입은 당연히 function이고, 4행이서 함수에 인자를 하나 주었으므로 arguments의 길이가 1이므로 입력한 인자를 menu변수에 받아서 같이 출력했다. 2. 함수 표현식형식으로 함수 정의 - Hoisting 안됨 함수 표현식으로 정의는 변수에 함수를 넣는 것이며, 이 때 함수는 이름이 없는 익명함수이다. ▲ 인자를 두개 받는 함수이며 받은 인자로 각각 시작값과 끝값으로 설정해서 누적합을 구하는 함수 ▲ return값을 가지므로 ..

함수정의 방법1 - 함수 선언(정의)문 - Hoisting이 된다. 함수정의 방법2 - 함수표현식(익명함수) - Hoisting 안된다. ▲ 변수가 함수를 참조하게 된다. 즉 변수에 함수를 대입한다. 함수정의 방법3 - 즉시 실행함수 JS에서의 함수특징 이제 하나씩 예제를 보면서 알아보자 - Function생성자 함수를 이용 ▲ 출력은 잘 되지만 이렇게 사용하지는 않는다. - 함수 선언(정의)문으로 함수 정의하기 ▲ 함수 정의(선언)문을 사용해서 함수를 정의하면 hoisting이 일어난다. 때문에 출력결과를 보면 '정의문 위에서 호출:'부분이 제일 처음으로 출력된 것이 아닌, add()함수안의 내용들이 먼저 출력된 것을 볼 수 있다. ▲ arguments란? ▲add함수는 인자를 2개받는데 5개를 넣어주..

▲ 자바와 다른 JS에서 변수의 특징 for문과 while문으로 아래 형태로 브라우저창에 출력해보자 1) For문으로 2) while문으로

▲ 자바와는 다른 JS에서 switch문의 특징

▲ parseInt()함수는 숫자형식의 문자열을 숫자로 바꿔주는 함수다. 숫자형식이 아닌 문자열은 숫자로 바꿀 수 없기때문에 NaN을 반환한다. 해당 변수가 NaN인지 아닌지를 판단하는 함수 isNaN을 사용해서 NaN을 판단한다. ▲undefined는 하나의 타입이면서 값이므로 quotation으로 감싸지 않고 그냥 비교가능하다. ▲ if(null_) 은 if(null_!=null)과 동일하다. 왜냐하면 JS 에서 조건식에서는 0, null false는 모두 false로 처리하기 때문이다. ▲ new 생성자 함수로 만든 것의 타입은 object이므로 두번째 if절의 결과값은 'str은 string타입이 아니다'가 된다.

1. 배열 요소 추가 1) 인덱스를 지정해서 추가 2) push() 함수 사용 3) unshift() 함수 사용 2. 배열 요소 가져오기 1) pop()함수 사용 2) shift()함수 사용 3. 배열요소 추출하기 1) slice() 함수 사용 ▲ 먼저 배열에 값을 좀 넣어두자 2) splice() 함수 사용 ▲ 2번방부터 끝방까지 삭제하여서 원본배열이 변경되고, 삭제한 요소로 새로운 배열을 만들었다. 다시 초기화상태에서 현재 원본배열 method는 아래와 같은 상태이다. ▲ 삭제는 하지 않고 추가만 할 수도 있다. 5. 배열의 모든 요소에 함수를 적용하여 요소 변환하기 1) map()함수 사용하기 6. 배열의 모든 요소에 함수를 적용하여 하나의 값으로 변환하기 ▲ reduce()함수를 이용해서 하나의 ..